/*
 * ══════════════════════════════════════════════════════════════════
 *  HILFEDIENST — Patient Layout CSS
 *  File: public/assets/css/patient-layout.css
 *  Shell for layout/master_redesigned.blade.php:
 *    sidebar_redesigned, header_redesigned, footer_redesigned
 *  (the AGB modal in the footer uses the shared hd-modal from style.css)
 *
 *  Structure + sizes = admin-layout.css (sidebar 250/62px, header 56px,
 *  footer 50px, 13px base). Colours = current patient website.
 *  All colours live in :root — change the theme there only.
 * ══════════════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────────────────────────
   1. VARIABLES
────────────────────────────────────────────────────────────────── */
:root {
    /* Patient theme (Materio palette of the current patient site) */
    --pt-primary:       #4f7ee8;
    --pt-primary-dk:    #2855d4;
    --pt-primary-lt:    rgba(79, 126, 232, .12);
    --pt-primary-rgb:   79, 126, 232;
    --pt-bg:            #f4f5fa;
    --pt-card:          #ffffff;
    --pt-border:        #e6e5e8;
    --pt-text:          #433c50;
    --pt-text-sub:      #6d6777;
    --pt-text-muted:    #a8a4af;
    --pt-hover:         rgba(67, 60, 80, .06);
    --pt-input-bg:      #ffffff;
    --pt-font:          'Poppins', sans-serif;

    /* Sidebar nav items — burgundy from the old theme-default.css.
       The sidebar has a very light burgundy tint. */
    --pt-nav-bg:         #fbf7f9;
    --pt-nav-hover:      rgba(92, 9, 49, .06);
    --pt-nav-color:      #5c0931;
    --pt-nav-active:     linear-gradient(270deg, #5C0931 0%, #1b020e 100%);
    --pt-nav-icon-bg:    rgba(92, 9, 49, .10);

    /* Status colours (Materio palette) — used by style.css */
    --pt-success:       #56ca00;
    --pt-success-lt:    rgba(86, 202, 0, .14);
    --pt-danger:        #ff4c51;
    --pt-danger-dk:     #e04347;
    --pt-danger-lt:     rgba(255, 76, 81, .14);
    --pt-warning:       #ffb400;
    --pt-warning-lt:    rgba(255, 180, 0, .16);
    --pt-info:          #16b1ff;
    --pt-info-lt:       rgba(22, 177, 255, .14);
    --pt-gray:          #8a8d93;
    --pt-gray-lt:       rgba(138, 141, 147, .14);

    /* Radius + shadows */
    --pt-radius:        10px;
    --pt-radius-lg:     14px;
    --pt-shadow-xs:     0 1px 3px rgba(67, 60, 80, .06);
    --pt-shadow-md:     0 8px 28px rgba(67, 60, 80, .12);
    --pt-shadow-lg:     0 24px 60px rgba(20, 16, 30, .2);

    /* Sizes — same as admin */
    --pt-w:             250px;
    --pt-mini-w:        62px;
    --pt-header-h:      56px;
    --pt-footer-h:      50px;
    --pt-content-px:    24px;
}

/* current sidebar width — header, content and footer are offset by this */
body                { --pt-side: var(--pt-w); }
body.hd-mini        { --pt-side: var(--pt-mini-w); }


/* ──────────────────────────────────────────────────────────────────
   2. RESET + BASE
────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--pt-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--pt-text);
    background: var(--pt-bg);
    overflow-x: hidden;
}

body, button, input, select, textarea, table, th, td, a,
h1, h2, h3, h4, h5, h6, p, label {
    font-family: var(--pt-font);
}

h1, h2, h3, h4, h5, h6 { color: var(--pt-text); margin: 0 0 .5rem; font-weight: 500; line-height: 1.3; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
h4 { font-size: 12px; }
p  { margin: 0 0 1rem; }
img { max-width: 100%; }

a { color: var(--pt-primary); text-decoration: none; }
a:hover { color: var(--pt-primary-dk); }


/* ──────────────────────────────────────────────────────────────────
   3. LAYOUT SHELL
────────────────────────────────────────────────────────────────── */
.hd-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1;
    margin-left: var(--pt-side);
    margin-top: var(--pt-header-h);
    padding: 16px var(--pt-content-px) 24px;
    min-height: calc(100vh - var(--pt-header-h) - var(--pt-footer-h));
    transition: margin-left .28s ease;
}


/* ──────────────────────────────────────────────────────────────────
   4. HEADER
────────────────────────────────────────────────────────────────── */
.hd-header {
    position: fixed;
    top: 0; right: 0;
    left: var(--pt-side);
    z-index: 1030;
    height: var(--pt-header-h);
    min-height: var(--pt-header-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--pt-card);
    border-bottom: 1px solid var(--pt-border);
    box-shadow: var(--pt-shadow-xs);
    transition: left .28s ease;
}
.hd-header-left  { display: flex; align-items: center; gap: 4px; }
.hd-header-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-spacer      { flex: 1; }

/* hamburger */
.nav-pushmenu {
    width: 36px; height: 36px;
    margin-right: 8px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pt-text-sub);
    transition: background .13s, color .13s;
}
.nav-pushmenu:hover { background: var(--pt-hover); color: var(--pt-text); }

/* logo in the header — shown on mobile, where the sidebar is hidden */
.nav-logo {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 4px;
    white-space: nowrap;
}
.nav-logo-img  { height: 28px; width: auto; max-width: 180px; object-fit: contain; flex-shrink: 0; }


/* ──────────────────────────────────────────────────────────────────
   5. SIDEBAR
────────────────────────────────────────────────────────────────── */
.hd-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--pt-w);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    background: var(--pt-nav-bg);
    border-right: 1px solid var(--pt-border);
    box-shadow: 4px 0 24px rgba(67, 60, 80, .06);
    overflow: hidden;
    transition: width .28s ease, transform .28s ease, box-shadow .28s ease;
}

/* brand: logo.png, favicon in mini mode */
.hd-brand {
    height: var(--pt-header-h);
    min-height: var(--pt-header-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid var(--pt-border);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}
.hd-brand-full { height: 26px; width: auto; max-width: 170px; object-fit: contain; }
.hd-brand-mini { height: 30px; width: 30px; object-fit: contain; display: none; }

/* nav */
.hd-sidebar-inner {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
}
.hd-sidebar-inner::-webkit-scrollbar { width: 3px; }
.hd-sidebar-inner::-webkit-scrollbar-thumb { background: var(--pt-border); border-radius: 3px; }

.hd-nav  { list-style: none; margin: 0; padding: 8px 6px; }
.hd-item { margin-bottom: 2px; position: relative; }

.hd-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-text);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.hd-link:hover { background: var(--pt-nav-hover); color: var(--pt-text); }

.hd-link.hd-active {
    background: var(--pt-nav-active);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(92, 9, 49, .3);
}
.hd-link.hd-active:hover { color: #fff; }

/* icon tile */
.hd-icon {
    width: 32px; height: 32px; min-width: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--pt-nav-icon-bg);
    color: var(--pt-nav-color);
    flex-shrink: 0;
    transition: background .13s, color .13s;
}
.hd-link:hover .hd-icon { background: rgba(92, 9, 49, .16); }
.hd-icon svg { width: 15px; height: 15px; display: block; stroke: currentColor; flex-shrink: 0; }
.hd-icon-text { font-size: 17px; font-weight: 600; line-height: 1; }

.hd-link.hd-active .hd-icon { background: rgba(255, 255, 255, .18); color: #fff; }

/* label */
.hd-link p {
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    color: inherit;
    transition: opacity .18s;
}

/* mobile backdrop */
.hd-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 1034;
    background: rgba(20, 16, 30, .45);
}


/* ──────────────────────────────────────────────────────────────────
   6. MINI MODE (desktop) — icon-only sidebar, expands on hover
────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    body.hd-mini .hd-sidebar { width: var(--pt-mini-w); }
    body.hd-mini .hd-sidebar:hover {
        width: var(--pt-w);
        box-shadow: 6px 0 32px rgba(67, 60, 80, .15);
    }

    body.hd-mini .hd-sidebar:not(:hover) .hd-brand      { padding: 0; justify-content: center; }
    body.hd-mini .hd-sidebar:not(:hover) .hd-brand-full { display: none; }
    body.hd-mini .hd-sidebar:not(:hover) .hd-brand-mini { display: block; }
    body.hd-mini .hd-sidebar:not(:hover) .hd-link p     { opacity: 0; }

    /* tooltip on the icon (same as admin) */
    body.hd-mini .hd-sidebar:not(:hover) .hd-item > .hd-link::after {
        content: attr(data-label);
        position: absolute;
        left: calc(var(--pt-mini-w) + 8px);
        top: 50%;
        transform: translateY(-50%);
        padding: 5px 10px;
        border-radius: 8px;
        background: var(--pt-text);
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
        z-index: 2000;
    }
    body.hd-mini .hd-sidebar:not(:hover) .hd-item > .hd-link:hover::after { opacity: 1; }
}


/* ──────────────────────────────────────────────────────────────────
   7. MOBILE (< 1200px) — sidebar slides in over the page
────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    body, body.hd-mini { --pt-side: 0px; }

    .hd-sidebar,
    body.hd-mini .hd-sidebar {
        width: var(--pt-w);
        transform: translateX(-100%);
        box-shadow: none;
    }
    body.hd-mobile-open .hd-sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(20, 16, 30, .25);
    }
    body.hd-mobile-open .hd-sidebar-backdrop { display: block; }
    body.hd-mobile-open { overflow: hidden; }

    .nav-logo { display: flex; }
}

@media (max-width: 575.98px) {
    :root { --pt-content-px: 16px; }
    .hd-header { padding: 0 12px; }
}


/* ──────────────────────────────────────────────────────────────────
   8. FOOTER
────────────────────────────────────────────────────────────────── */
.hd-footer {
    margin-left: var(--pt-side);
    height: var(--pt-footer-h);
    min-height: var(--pt-footer-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 var(--pt-content-px);
    font-size: 12px;
    color: var(--pt-text-muted);
    background: var(--pt-card);
    border-top: 1px solid var(--pt-border);
    overflow: hidden;
    transition: margin-left .28s ease;
}
.footer-left { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-left svg { flex-shrink: 0; }
.footer-left a { color: var(--pt-primary); font-weight: 600; }
.footer-left a:hover { color: var(--pt-primary-dk); text-decoration: underline; }
.footer-right { font-size: 12px; color: var(--pt-text-muted); white-space: nowrap; }


/* ──────────────────────────────────────────────────────────────────
   9. PRINT
────────────────────────────────────────────────────────────────── */
@media print {
    .hd-sidebar,
    .hd-sidebar-backdrop,
    .hd-header,
    .hd-footer,
    .print-hide { display: none !important; }

    .content-wrapper { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
}