/* ══════════════════════════════════════════════════════════════
   DREAMS UNIVERSE — SHARED APP SHELL (du-shell.css)
   ──────────────────────────────────────────────────────────────
   Sidebar rail (desktop) + off-canvas drawer (mobile). Paired with
   du-shell.js, which renders the sidebar markup. Every page that
   shows the sidebar loads exactly this file, so items, spacing,
   active/hover states and motion are identical everywhere.

   State classes live on <html> (not <body>) so the inline boot
   script in <head> can apply them BEFORE first paint:
     html.sidebar-collapsed   desktop rail collapsed
     html.drawer-open         mobile drawer open
     html.du-authed           a Supabase session exists (used by
                              pages with optional login, e.g. cars)
     html.shell-optional      page shows the shell only when signed in

   Motion: collapse / drawer / hover / active indicator animate only
   transform + opacity (compositor). Widths never animate. The main
   column's offset switches instantly and du-shell.js plays a FLIP
   transform so it glides instead of snapping.

   Breakpoint: 900px — the value the existing page CSS already used
   for the drawer. Keep DU_SHELL_BP in du-shell.js in sync.
   ══════════════════════════════════════════════════════════════ */

:root {
    --sidebar-w: 258px;              /* expanded rail width              */
    --sidebar-w-collapsed: 78px;     /* collapsed rail width             */
    --sidebar-drawer-w: 280px;       /* mobile drawer width              */
    --shell-offset: var(--sidebar-w);/* space reserved for the rail      */
    --du-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --du-dur: 260ms;
    --du-row-h: 44px;                /* every nav row is exactly this tall */
    --du-ico: 20px;                  /* icon box                         */
    --du-chip: 40px;                 /* icon chip (collapsed hover/active) */
    --du-pad-x: 15px;                /* row padding: centres icons in the 78px rail (14+15+10 = 39) */
    --du-gap: 12px;                  /* icon ↔ label gap                 */
    --du-radius: 12px;
    /* How far the rail slides left when collapsed. */
    --du-collapse-shift: calc(var(--sidebar-w-collapsed) - var(--sidebar-w));
}
html.sidebar-collapsed { --shell-offset: var(--sidebar-w-collapsed); }

/* ── Content wrapper: reserves the rail width up-front (no reflow on
      load because the collapsed class is set before first paint). ── */
.app-shell {
    position:relative; z-index:1;
    display:block;
    min-height:100vh;
    padding-left:var(--shell-offset);
}
.main-area {
    display:flex; flex-direction:column;
    min-width:0;
    min-height:100vh;
}

/* ── Admin pages: <body> (flex) > aside.sidebar + .main ──
      Same idea — the content column reserves the rail width up-front.
      (body > .main outranks each admin page's own `.main { margin-left:260px }`.) */
body > .main {
    margin-left:var(--shell-offset);
    min-width:0;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */
.sidebar {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    height:100vh; height:100dvh;
    padding:1.1rem 14px;
    display:flex; flex-direction:column;
    background:linear-gradient(180deg, rgba(10,10,14,0.92), rgba(7,7,10,0.96));
    border-right:1px solid var(--card-border, rgba(255,255,255,0.05));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    z-index:20;
    overflow:hidden;
    transform:translateX(0);
    transition:transform var(--du-dur) var(--du-ease-out);
    will-change:transform;
}
/* Inner wrapper: when the rail slides left, this slides right by the
   same amount, so icons stay put and labels simply get clipped. */
.sidebar-inner {
    display:flex; flex-direction:column;
    flex:1; min-height:0;
    width:100%;
    transform:translateX(0);
    transition:transform var(--du-dur) var(--du-ease-out);
}
html.sidebar-collapsed .sidebar       { transform:translateX(var(--du-collapse-shift)); }
html.sidebar-collapsed .sidebar-inner { transform:translateX(calc(-1 * var(--du-collapse-shift))); }

/* Everything that fades when collapsed. */
.du-fade { transition:opacity var(--du-dur) var(--du-ease-out); }
html.sidebar-collapsed .du-fade { opacity:0; pointer-events:none; }

/* ── Brand ── */
.sidebar-brand {
    display:flex; align-items:center; gap:10px;
    height:64px;
    /* 42px logo centred in the 78px collapsed rail: 14 (aside) + 4 + 21 = 39 */
    padding:0 var(--du-pad-x) 0 4px;
    margin-bottom:0.5rem;
    border-bottom:1px solid var(--card-border, rgba(255,255,255,0.05));
    flex:none;
    text-decoration:none;
    white-space:nowrap;
}
/* Brand emblem (brand-logo.png) — replaces the old ✦ glyph */
.sidebar-brand .icon {
    width:42px; height:42px; flex:none;
    display:block; object-fit:contain;
    filter:drop-shadow(0 0 10px var(--gold-glow, rgba(201,169,78,0.32)));
    animation:duBrandGlow 3.5s ease-in-out infinite;   /* same glow as dashboard.html */
}
@keyframes duBrandGlow {
    0%,100% { filter:drop-shadow(0 0 8px var(--gold-glow, rgba(201,169,78,0.32))); }
    50%     { filter:drop-shadow(0 0 16px var(--gold-glow-strong, rgba(201,169,78,0.55))); }
}
.sidebar-brand-text { min-width:0; }
.sidebar-brand-text h1 {
    font-family:'Playfair Display', serif; font-weight:700;
    font-size:1rem; letter-spacing:0.02em; line-height:1.15;
    background:linear-gradient(120deg, var(--gold-light, #f0d98a), var(--gold, #c9a94e), var(--gold-dark, #a8892e));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.sidebar-brand-text small {
    display:block;
    font-size:0.5rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--text-muted, rgba(255,255,255,0.52)); font-weight:600;
}

/* ── Nav list ── */
.sidebar-nav {
    flex:1; min-height:0;
    overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; gap:4px;
    padding:4px 2px;
    margin:0 -2px;
    scrollbar-width:none;
    overscroll-behavior:contain;
}
.sidebar-nav::-webkit-scrollbar { width:0; height:0; }
.sidebar-nav > * { flex-shrink:0; }

.nav-group-label {
    height:32px;
    display:flex; align-items:flex-end;
    padding:0 var(--du-pad-x) 6px;
    font-size:0.6rem; font-weight:700; line-height:1;
    letter-spacing:0.16em; text-transform:uppercase;
    color:var(--text-muted, rgba(255,255,255,0.52));
    white-space:nowrap;
}
.sidebar-nav > .nav-group-label:first-child { height:22px; }

/* ── Rows: nav items, user card, footer buttons share ONE geometry ── */
.nav-item,
.sidebar-user,
.sidebar-collapse {
    position:relative;
    display:flex; align-items:center; gap:var(--du-gap);
    width:100%;
    height:var(--du-row-h);
    padding:0 var(--du-pad-x);
    border-radius:var(--du-radius);
    font-size:0.87rem; font-weight:500; line-height:1;
    color:var(--text-mid, rgba(255,255,255,0.72));
    white-space:nowrap;
    text-decoration:none;
    text-align:left;
    background:none; border:0;
    cursor:pointer;
    isolation:isolate;
    transition:color var(--du-dur) var(--du-ease-out);
    -webkit-tap-highlight-color:transparent;
}
.sidebar-collapse { font-size:0.8rem; color:var(--text-muted, rgba(255,255,255,0.52)); }
.sidebar-user { height:52px; }

/* Row background layer (hover/active) — fades with opacity only. */
.nav-item::after,
.sidebar-user::after,
.sidebar-collapse::after {
    content:''; position:absolute; inset:0; z-index:-1;
    border-radius:inherit;
    border:1px solid transparent;
    background:rgba(201,169,78,0.06);
    opacity:0;
    transition:opacity var(--du-dur) var(--du-ease-out);
}
.sidebar-collapse::after { background:rgba(255,255,255,0.04); }
.sidebar-user::after {
    opacity:1;
    background:rgba(255,255,255,0.025);
    border-color:var(--card-border, rgba(255,255,255,0.05));
}
.nav-item:hover::after,
.sidebar-collapse:hover::after,
.nav-item:focus-visible::after,
.sidebar-collapse:focus-visible::after { opacity:1; }
.nav-item:hover, .sidebar-collapse:hover { color:var(--text-light, #f4f2ea); }

.nav-item.active { color:var(--gold-light, #f0d98a); font-weight:600; }
.nav-item.active::after {
    opacity:1;
    background:linear-gradient(180deg, rgba(201,169,78,0.14), rgba(201,169,78,0.05));
    border-color:var(--border-gold-strong, rgba(201,169,78,0.32));
}

/* Active indicator bar — grows in with transform. */
.nav-item::before {
    content:''; position:absolute; left:-2px; top:50%;
    width:3px; height:60%; margin-top:-13px; /* 60% of 44px ≈ 26px */
    border-radius:3px;
    background:linear-gradient(180deg, var(--gold-light, #f0d98a), var(--gold-dark, #a8892e));
    box-shadow:0 0 10px var(--gold-glow-strong, rgba(201,169,78,0.55));
    transform:scaleY(0); opacity:0;
    transition:transform var(--du-dur) var(--du-ease-out), opacity var(--du-dur) var(--du-ease-out);
}
.nav-item.active::before { transform:scaleY(1); opacity:1; animation:duIndicatorIn var(--du-dur) var(--du-ease-out) both; }
@keyframes duIndicatorIn { from { transform:scaleY(0); opacity:0; } to { transform:scaleY(1); opacity:1; } }

/* Icon box — identical size everywhere. The ::before is a square
   "chip" that takes over the hover/active highlight when collapsed. */
.du-ico {
    position:relative;
    flex:none;
    width:var(--du-ico); height:var(--du-ico);
    display:grid; place-items:center;
}
.du-ico::before {
    content:''; position:absolute;
    left:50%; top:50%;
    width:var(--du-chip); height:var(--du-chip);
    margin:calc(var(--du-chip) / -2) 0 0 calc(var(--du-chip) / -2);
    border-radius:var(--du-radius);
    border:1px solid transparent;
    background:rgba(201,169,78,0.08);
    opacity:0; z-index:-1;
    transition:opacity var(--du-dur) var(--du-ease-out);
}
.du-ico i, .nav-item i.nav-ico {
    width:var(--du-ico); text-align:center;
    font-size:0.92rem; line-height:1;
    color:var(--gold-dark, #a8892e);
    transition:color var(--du-dur) var(--du-ease-out);
}
.sidebar-collapse .du-ico i { font-size:0.8rem; color:inherit; }
.nav-item.active .du-ico i,
.nav-item:hover .du-ico i { color:var(--gold-light, #f0d98a); }

.nav-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Collapsed: row layers fade out, chips fade in (opacity only). */
html.sidebar-collapsed .nav-item::after,
html.sidebar-collapsed .sidebar-collapse::after,
html.sidebar-collapsed .sidebar-user::after { opacity:0; }
html.sidebar-collapsed .nav-item:hover .du-ico::before,
html.sidebar-collapsed .sidebar-collapse:hover .du-ico::before,
html.sidebar-collapsed .nav-item:focus-visible .du-ico::before { opacity:1; }
html.sidebar-collapsed .nav-item.active .du-ico::before {
    opacity:1;
    background:linear-gradient(180deg, rgba(201,169,78,0.18), rgba(201,169,78,0.06));
    border-color:var(--border-gold-strong, rgba(201,169,78,0.32));
}

/* ── Badges ── */
.nav-badge {
    flex:none;
    font-size:0.62rem; font-weight:700; line-height:1.3;
    padding:0.15rem 0.5rem; border-radius:40px;
    background:linear-gradient(135deg, var(--gold-light, #f0d98a), var(--gold, #c9a94e));
    color:#0b0a0a;
}
.nav-badge[hidden] { display:none; }
.nav-badge.dot {
    min-width:7px; min-height:7px; padding:0;
    background:var(--danger, #e74c3c);
    box-shadow:0 0 0 2px rgba(7,7,10,0.9);
}
html.sidebar-collapsed .nav-badge { opacity:0; }

/* ── Footer ── */
.sidebar-footer {
    flex:none;
    display:grid; gap:4px;
    padding-top:0.85rem; margin-top:0.5rem;
    border-top:1px solid var(--card-border, rgba(255,255,255,0.05));
}
.sidebar-user:hover::after {
    background:rgba(201,169,78,0.05);
    border-color:var(--border-gold, rgba(201,169,78,0.18));
}
.sidebar-user .avatar {
    flex:none;
    width:34px; height:34px; margin-left:-7px; /* centres the 34px avatar on the 20px icon column */
    border-radius:50%;
    display:grid; place-items:center;
    background:linear-gradient(135deg, var(--gold-dark, #a8892e), var(--gold, #c9a94e), var(--gold-light, #f0d98a));
    color:#0b0a0a; font-weight:800; font-size:0.75rem;
    box-shadow:0 0 0 2px rgba(201,169,78,0.12);
}
.sidebar-user .meta { min-width:0; flex:1; margin-left:-7px; line-height:1.3; }
.sidebar-user .meta b {
    display:block;
    font-size:0.79rem; font-weight:600;
    color:var(--text-light, #f4f2ea);
    overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user .meta span {
    font-size:0.62rem; color:var(--gold-light, #f0d98a);
    letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
}
.sidebar-collapse .du-ico i.fa-angles-left { transition:transform var(--du-dur) var(--du-ease-out); }
html.sidebar-collapsed .sidebar-collapse .du-ico i.fa-angles-left { transform:rotate(180deg); }

/* ══════════════════════════════════════════════════════════════
   TOPBAR BURGER (drawer trigger — only visible on mobile)
   ══════════════════════════════════════════════════════════════ */
.topbar-burger {
    display:none;
    width:40px; height:40px; border-radius:12px;
    background:var(--bg-card, rgba(14,14,18,0.92));
    border:1px solid var(--card-border, rgba(255,255,255,0.05));
    place-items:center; align-content:center;
    flex:none; cursor:pointer;
}
.topbar-burger span {
    display:block; width:16px; height:1.6px;
    background:var(--text-light, #f4f2ea); border-radius:2px;
    transition:transform var(--du-dur) var(--du-ease-out), opacity var(--du-dur) var(--du-ease-out);
}
.topbar-burger span + span { margin-top:4px; }
html.drawer-open .topbar-burger span:nth-child(1) { transform:translateY(5.6px) rotate(45deg); }
html.drawer-open .topbar-burger span:nth-child(2) { opacity:0; }
html.drawer-open .topbar-burger span:nth-child(3) { transform:translateY(-5.6px) rotate(-45deg); }

/* Admin: floating burger (the admin topbar has no slot for one). */
.du-float-burger {
    position:fixed; top:14px; left:14px; z-index:45;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
}

/* ══════════════════════════════════════════════════════════════
   DRAWER BACKDROP
   ══════════════════════════════════════════════════════════════ */
.drawer-backdrop {
    position:fixed; inset:0; z-index:40;
    background:rgba(3,3,6,0.7);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden;
    transition:opacity var(--du-dur) var(--du-ease-out), visibility 0s linear var(--du-dur);
}
html.drawer-open .drawer-backdrop {
    opacity:1; visibility:visible;
    transition:opacity var(--du-dur) var(--du-ease-out), visibility 0s;
}
html.drawer-open, html.drawer-open body { overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤ 900px): off-canvas drawer, collapse state ignored
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    :root, html.sidebar-collapsed { --shell-offset: 0px; }
    .sidebar,
    html.sidebar-collapsed .sidebar {
        width:min(var(--sidebar-drawer-w), 86vw);
        z-index:50;
        background:linear-gradient(180deg, rgba(10,10,14,0.98), rgba(7,7,10,1));
        transform:translateX(-102%);
        visibility:hidden;
        transition:transform var(--du-dur) var(--du-ease-out), visibility 0s linear var(--du-dur);
    }
    html.drawer-open .sidebar,
    html.drawer-open.sidebar-collapsed .sidebar {
        transform:translateX(0);
        visibility:visible;
        transition:transform var(--du-dur) var(--du-ease-out), visibility 0s;
    }
    html.sidebar-collapsed .sidebar-inner { transform:none; }
    html.sidebar-collapsed .du-fade,
    html.sidebar-collapsed .nav-badge { opacity:1; pointer-events:auto; }
    html.sidebar-collapsed .nav-item::after { opacity:0; }
    html.sidebar-collapsed .nav-item:hover::after,
    html.sidebar-collapsed .nav-item.active::after,
    html.sidebar-collapsed .sidebar-user::after { opacity:1; }
    html.sidebar-collapsed .nav-item:hover .du-ico::before,
    html.sidebar-collapsed .sidebar-collapse:hover .du-ico::before,
    html.sidebar-collapsed .nav-item:focus-visible .du-ico::before,
    html.sidebar-collapsed .nav-item.active .du-ico::before { opacity:0; }
    /* The collapse toggle has no meaning inside the drawer. */
    .sidebar-collapse[data-du-action="collapse"] { display:none; }
    .topbar-burger { display:grid; }
    /* keep the admin page title clear of the floating burger */
    html.du-has-float-burger body > .main { padding-top:68px; }
}

/* ══════════════════════════════════════════════════════════════
   OPTIONAL SHELL (pages that allow guests, e.g. cars.html)
   ══════════════════════════════════════════════════════════════ */
html.shell-optional:not(.du-authed) .app-shell { padding-left:0; }
html.shell-optional:not(.du-authed) .sidebar,
html.shell-optional:not(.du-authed) .drawer-backdrop,
html.shell-optional:not(.du-authed) .topbar { display:none; }
html.shell-optional.du-authed .site-header,
html.shell-optional.du-authed .mobile-nav { display:none; }

/* Pre-ready: suppress transitions until du-shell.js has applied the
   restored state, so nothing animates on page load. */
html:not(.du-shell-ready) .sidebar,
html:not(.du-shell-ready) .sidebar-inner,
html:not(.du-shell-ready) .du-fade,
html:not(.du-shell-ready) .nav-item::after,
html:not(.du-shell-ready) .du-ico::before { transition:none; }

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-inner, .du-fade, .drawer-backdrop,
    .nav-item::before, .nav-item::after, .du-ico::before { transition:none; animation:none; }
}