/* =====================================================================
   dashboard.css  ·  DGbooking custom dashboard shell
   ---------------------------------------------------------------------
   Custom sidebar + header chrome (replaces RadzenLayout/RadzenPanelMenu).
   Brand source color #131722.  Supports LIGHT and DARK:
     - light is the default (tokens on .dg-shell)
     - dark activates when MainLayout adds the .dg-dark class
       (bound to its isWhiteTheme flag)
   All colors flow from semantic --dg-* vars, so dark mode only needs to
   re-declare those vars (see the .dg-dark block near the bottom).

   INCLUDE ONCE, after the theme stylesheet, in wwwroot/index.html:
     <link id="theme" rel="stylesheet" href="StyleSheet.css" />
     <link rel="stylesheet" href="dashboard.css" />
   ===================================================================== */

.dg-shell {
    /* ---- LIGHT theme tokens (defaults) ---- */
    --dg-sidebar-bg:#eef2f5;
    --dg-content-bg:#ffffff;
    --dg-surface:#ffffff;            /* cards / header base */
    --dg-border:#bfcbe0;
    --dg-text:#1b1d20;
    --dg-text-dim:#6e7a98;
    --dg-nav-fg:#46506e;
    --dg-nav-hover-bg:rgba(70,80,110,.12);
    --dg-nav-hover-fg:#313640;
    --dg-nav-active-bg:#131722;
    --dg-nav-active-fg:#ffffff;
    --dg-accent:#9ca8c4;
    --dg-header-bg:rgba(238,242,245,.82);
    --dg-scrim:rgba(19,23,34,.45);
    --dg-shadow-1:0 1px 2px rgba(19,23,34,.16),0 1px 3px 1px rgba(19,23,34,.08);
    --dg-shadow-3:0 4px 8px 3px rgba(19,23,34,.10),0 1px 3px rgba(19,23,34,.18);
    --dg-shadow-6:0 12px 16px 6px rgba(19,23,34,.11),0 4px 6px rgba(19,23,34,.18);

    --dg-ease:cubic-bezier(.2,0,0,1);
    --dg-sidebar-w:256px;
    --dg-rail-w:76px;
    --dg-header-h:3.5rem;

    display:flex;
    height:100vh; height:100dvh;
    overflow:hidden;
    background:var(--dg-content-bg);
    color:var(--dg-text);
    font-family:var(--rz-text-font-family, "Segoe UI", system-ui, sans-serif);
}

/* ===================== SIDEBAR ===================== */
.dg-sidebar {
    width:var(--dg-sidebar-w);
    flex:none;
    display:flex;
    flex-direction:column;
    background:var(--dg-sidebar-bg);
    border-inline-end:1px solid var(--dg-border);
    transition:width .28s var(--dg-ease), transform .28s var(--dg-ease);
    z-index:30;
}
.dg-brand {
    display:flex; align-items:center; gap:10px;
    height:var(--dg-header-h); padding:0 14px; flex:none;
}
.dg-brand .dg-logo-full { max-width:160px; max-height:34px; width:auto; height:auto; display:block; }
.dg-brand .dg-logo-mini { width:30px; height:30px; display:none; }

.dg-nav {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:10px 0; display:flex; flex-direction:column; gap:2px;
}
.dg-nav-link {
    display:flex; align-items:center; gap:14px;
    margin:2px 12px; padding:11px 14px;
    border-radius:12px;
    color:var(--dg-nav-fg);
    font-size:.9rem; font-weight:500;
    text-decoration:none; white-space:nowrap; cursor:pointer;
    transition:background-color .2s var(--dg-ease), color .2s var(--dg-ease), transform .15s var(--dg-ease);
}
.dg-nav-link .rzi { font-size:1.25rem; flex:none; }
.dg-nav-link:hover {
    background:var(--dg-nav-hover-bg);
    color:var(--dg-nav-hover-fg);
    transform:translateX(2px);
}
.dg-nav-link.active {
    background:var(--dg-nav-active-bg);
    color:var(--dg-nav-active-fg);
    box-shadow:var(--dg-shadow-1);
    position:relative;
}
.dg-nav-link.active .rzi { color:var(--dg-nav-active-fg); }
.dg-nav-link.active::before {
    content:""; position:absolute; inset-inline-start:-12px; top:50%;
    transform:translateY(-50%); width:4px; height:58%;
    border-radius:999px; background:var(--dg-accent);
}
.dg-side-footer { flex:none; padding:12px; }
.dg-side-footer .dg-pro {
    background:var(--dg-sidebar-bg);
    border:1px solid var(--dg-border);
    border-radius:14px; padding:14px;
}

/* ===================== MAIN ===================== */
.dg-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }

.dg-header {
    flex:none; height:var(--dg-header-h);
    display:flex; align-items:center; gap:12px; padding:0 18px;
    background:var(--dg-header-bg);
    -webkit-backdrop-filter:saturate(180%) blur(10px);
    backdrop-filter:saturate(180%) blur(10px);
    border-bottom:1px solid var(--dg-border);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    position:sticky; top:0; z-index:10;
}
.dg-burger {
    flex:none; width:40px; height:40px;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border:0; border-radius:50%; background:transparent; cursor:pointer;
    transition:background-color .2s var(--dg-ease);
}
.dg-burger:hover { background:var(--dg-nav-hover-bg); }
.dg-burger span { display:block; width:20px; height:2px; border-radius:2px; background:var(--dg-text); }

.dg-header-actions { margin-inline-start:auto; display:flex; align-items:center; gap:6px; }

.dg-content {
    flex:1; overflow:auto; padding:1.5rem 1.75rem;
    background:var(--dg-content-bg);
}
.dg-content > * { max-width:1600px; margin-inline:auto; }

.dg-scrim {
    position:fixed; inset:0; background:var(--dg-scrim);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--dg-ease); z-index:25;
}

/* ===================== COLLAPSED RAIL (desktop) ===================== */
.dg-shell.is-collapsed .dg-sidebar { width:var(--dg-rail-w); }
.dg-shell.is-collapsed .dg-nav-text,
.dg-shell.is-collapsed .dg-side-footer,
.dg-shell.is-collapsed .dg-logo-full { display:none; }
.dg-shell.is-collapsed .dg-logo-mini { display:block; }
.dg-shell.is-collapsed .dg-brand { justify-content:center; padding:0; }
.dg-shell.is-collapsed .dg-nav-link { justify-content:center; margin:2px 10px; padding:11px 0; }
.dg-shell.is-collapsed .dg-nav-link.active::before { display:none; }

/* ===================== DARK THEME OVERRIDES ===================== */
/* Activated by MainLayout adding .dg-dark to .dg-shell. Only re-declares
   the semantic vars; every rule above picks them up automatically. */
.dg-shell.dg-dark {
    --dg-sidebar-bg:#0d0f12;        /* baseDG-900 */
    --dg-content-bg:#131722;        /* baseDG-800 */
    --dg-surface:#1f232a;           /* baseDG-700 */
    --dg-border:#313640;            /* baseDG-600 */
    --dg-text:#e8ebf0;
    --dg-text-dim:#9ca8c4;
    --dg-nav-fg:#bfcbe0;            /* light brand tone */
    --dg-nav-hover-bg:rgba(191,203,224,.12);
    --dg-nav-hover-fg:#ffffff;
    --dg-nav-active-bg:#bfcbe0;      /* light pill on dark */
    --dg-nav-active-fg:#131722;      /* dark text on it */
    --dg-accent:#6e7a98;
    --dg-header-bg:rgba(13,15,18,.78);
    --dg-scrim:rgba(0,0,0,.55);
    --dg-shadow-1:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.25);
    --dg-shadow-3:0 4px 8px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
    --dg-shadow-6:0 12px 16px 6px rgba(0,0,0,.35),0 4px 6px rgba(0,0,0,.45);
}
.dg-shell.dg-dark .dg-header { border-bottom-color:var(--dg-border); }

/* ===================== RESPONSIVE ===================== */
@media (min-width:1600px) {
    .dg-content { padding:2rem 2.5rem; }
    .dg-shell { --dg-sidebar-w:272px; }
}

@media (max-width:768px) {
    .dg-sidebar {
        position:fixed; top:0; bottom:0; inset-inline-start:0;
        width:min(84vw, 300px);
        transform:translateX(-100%);
        box-shadow:var(--dg-shadow-6);
    }
    .dg-shell.is-collapsed .dg-sidebar { width:min(84vw, 300px); }
    .dg-shell.is-collapsed .dg-nav-text,
    .dg-shell.is-collapsed .dg-side-footer,
    .dg-shell.is-collapsed .dg-logo-full { display:revert; }
    .dg-shell.is-collapsed .dg-logo-mini { display:none; }
    .dg-shell.is-collapsed .dg-nav-link { justify-content:flex-start; padding:11px 14px; margin:2px 12px; }
    .dg-shell.is-collapsed .dg-brand { justify-content:flex-start; padding:0 14px; }

    .dg-shell.is-open .dg-sidebar { transform:translateX(0); }
    .dg-shell.is-open .dg-scrim { opacity:1; pointer-events:auto; }

    .dg-content { padding:1rem; }
}

@media (max-width:480px) {
    .dg-header { padding:0 10px; gap:6px; }
    .dg-header-actions { gap:2px; }
    .dg-content { padding:.75rem; }
}

@media (prefers-reduced-motion:reduce) {
    .dg-shell *, .dg-sidebar, .dg-scrim { transition:none !important; animation:none !important; }
}

/* ===================== Unauthenticated pages ===================== */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #ffffff;
}