/* ASSIDU.ai V2 — Layout Styles (Apple Liquid Glass) */

/* Portal layout: sidebar + main content */
.portal-layout { display: flex; min-height: 100vh; }

/* ===== Sidebar — Liquid Glass panel ===== */
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--glass-inner-glow), 1px 0 20px rgba(0,0,0,0.04);
    z-index: 100; display: flex; flex-direction: column;
    padding: 20px 0; overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

.sidebar-logo {
    padding: 0 20px 24px;
    font-size: 15px; font-weight: 800;
    letter-spacing: 0.05em; color: var(--primary-ink);
}

.nav-section {
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 8px 20px 4px;
    text-transform: uppercase;
}

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; margin: 1px 8px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; transition: var(--transition);
    border-radius: var(--radius-sm);
    font-weight: 500; text-decoration: none;
    border: 1px solid transparent;
}
.nav-item:hover {
    background: var(--card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--border-light);
    text-decoration: none;
    color: var(--text);
}
.nav-item.active {
    color: var(--primary-ink);
    background: var(--primary-light);
    border-color: var(--border);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.nav-icon { font-size: 16px; width: 22px; text-align: center; }
.nav-sep { height: 1px; background: var(--border-light); margin: 10px 16px; }

/* Main content area */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1; padding: 28px 32px;
    min-height: 100vh;
}

/* Stat row */
.stat-row { display: flex; gap: 16px; margin-bottom: 24px; }
.stat-row > * { flex: 1; }

/* Mobile sidebar */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99;
}
.sidebar-toggle {
    display: none; position: fixed; top: 12px; left: 12px;
    z-index: 101;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 8px 12px;
    cursor: pointer; font-size: 18px;
    box-shadow: var(--shadow);
    color: var(--text);
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .sidebar-toggle { display: block; }
    .main-content { margin-left: 0; padding: 60px 16px 16px; }
    .stat-row { flex-direction: column; }
}

/* ===== Auth layout — Liquid Glass card ===== */
.auth-layout {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
    background: linear-gradient(135deg, #edfffe 0%, #f4fffe 50%, #e8faf9 100%);
}
.auth-layout::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(62,205,198,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(62,205,198,0.08) 0%, transparent 50%);
    pointer-events: none;
}
.auth-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl); padding: 40px;
    width: 100%; max-width: 440px;
    box-shadow: var(--shadow-glow), var(--glass-inner-glow);
}
.auth-logo {
    font-size: 20px; font-weight: 800; color: var(--primary-ink);
    letter-spacing: 0.05em; text-align: center; margin-bottom: 8px;
}
.auth-title {
    font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 4px;
}
.auth-sub {
    font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 28px;
}

/* ===== Dark Theme Layout ===== */
[data-theme="dark"] .sidebar {
    background: rgba(10,26,26,0.70);
    border-right-color: rgba(62,205,198,0.10);
    box-shadow: var(--glass-inner-glow), 1px 0 20px rgba(0,0,0,0.2);
}
[data-theme="dark"] .nav-item:hover {
    background: rgba(62,205,198,0.06);
    border-color: rgba(62,205,198,0.10);
    color: var(--text);
}
[data-theme="dark"] .nav-item.active {
    background: rgba(79,224,216,0.12);
    border-color: rgba(79,224,216,0.20);
}
[data-theme="dark"] .sidebar-logo img { filter: none; }
[data-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .sidebar-toggle {
    background: rgba(10,26,26,0.70);
    border-color: rgba(62,205,198,0.15);
}

[data-theme="dark"] .auth-layout {
    background: linear-gradient(165deg, #0a1a1a, #0c2020, #0f2a2a);
}
[data-theme="dark"] .auth-layout::before {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(62,205,198,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0,228,200,0.05) 0%, transparent 50%);
}
[data-theme="dark"] .auth-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(62,205,198,0.12);
    box-shadow: var(--shadow-glow), var(--glass-inner-glow);
}
[data-theme="dark"] .auth-logo img { filter: none; }

/* ===== White-label: app.smileartpavilion.com -> SILVER METALLIC shell (brushed aluminium / chrome).
   Higher specificity than the light/dark .auth-layout/.sidebar/.nav-item rules so it wins in either
   theme. Other hosts are unaffected. The surface is a light polished-silver gradient with a diagonal
   sheen band + a faint brushed-metal texture; panels get a glossy top highlight and a metallic bevel
   carried in the box-shadow (bright inset top edge, dark inset bottom edge). ===== */

/* --- DARK silver-metallic background + animated reflection sheen (login + portal shell).
   A deep gunmetal gradient with a brighter polished steel band through the middle; a soft light
   band (the "reflection") sweeps slowly back-and-forth across it, with a faint brushed texture on
   top. Panels/cards/sidebar stay LIGHT and float on this dark metal. The login card is pinned to an
   opaque silver-white panel just below so it keeps its current light look on the dark canvas. --- */
/* DARK silver-metallic backdrop + animated reflection. Painted on the BODY pseudo-elements — NOT the
   body's own `background`: base.css backgrounds <html> too, so the body's background is NOT propagated
   to the canvas; it sits on the body box IN FRONT of the z-index:-1 pseudos and hides them (a bright
   test band proved invisible). With the body transparent, ::before (static metal) + ::after (moving
   reflection), both z-index:-1, render above the html background and below content. The login's
   .auth-layout is transparent too so the same body backdrop shows through there. */
body.brand-metallic,
body.brand-metallic .auth-layout {
    background: transparent;
}
/* Static brushed metal: deep gunmetal gradient + polished highlight (top-left) + corner shade + grain.
   body::before gets content/position/inset/z-index:-1 from base.css; we only paint it here. */
body.brand-metallic::before {
    background:
        radial-gradient(ellipse at 20% 14%, rgba(255,255,255,0.13) 0%, transparent 52%),
        radial-gradient(ellipse at 86% 90%, rgba(0,0,0,0.34) 0%, transparent 56%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, rgba(0,0,0,0.05) 1px 3px),
        linear-gradient(150deg, #121419 0%, #20252d 21%, #333b45 43%, #434c58 50%, #2b313a 71%, #14161b 100%);
    background-size: 100% 100%, 100% 100%, auto, cover;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
/* Animated reflection: a soft diagonal light band swept across via transform (translateX) — GPU
   composited so it keeps moving on the fixed layer. Sits ABOVE ::before but below content (both
   z-index:-1; ::after paints last). Range keeps the band on-screen the whole cycle so it's always
   visible gliding across rather than flashing past off-screen. */
body.brand-metallic::after {
    content: '';
    position: fixed;
    top: -60%; bottom: -60%; left: -30%; width: 55%;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 34%, rgba(255,255,255,0.26) 50%, rgba(255,255,255,0.05) 66%, transparent 100%);
    transform: translateX(5%) rotate(18deg);
    will-change: transform;
    animation: smileartSweep 6s ease-in-out infinite alternate;
}
@keyframes smileartSweep {
    from { transform: translateX(5%) rotate(18deg); }
    to   { transform: translateX(175%) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.brand-metallic::after { animation: none; }
}

/* Login card → dark graphite glass so the whole site reads dark; a deep drop shadow lifts it off
   the brushed metal and a faint top sheen keeps the metallic feel. */
body.brand-metallic .auth-card {
    background: linear-gradient(180deg, rgba(36,41,51,0.94) 0%, rgba(22,25,32,0.95) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 70px rgba(0,0,0,0.62), 0 4px 14px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Page headers sit directly on the dark metal (cards keep dark ink via --text) → light ink. */
body.brand-metallic .page-title { color: #eef1f5; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
body.brand-metallic .page-sub { color: #aeb6c1; }

/* Dashboard GridStack widgets → dark graphite glass on the metal canvas (white ink stays crisp). */
body.brand-metallic .grid-stack-item-content {
    background: rgba(28,32,40,0.80);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
body.brand-metallic .grid-stack-item-content::before { display: none; }

/* --- Sidebar: dark brushed metal with a faint top sheen + beveled edges --- */
body.brand-metallic .sidebar {
    background:
        linear-gradient(180deg, rgba(40,45,55,0.92) 0%, rgba(28,32,40,0.88) 14%, rgba(19,22,28,0.9) 100%);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    border-right: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset -1px 0 0 rgba(0,0,0,0.30), 1px 0 22px rgba(0,0,0,0.40);
}

/* --- Nav items: subtle metallic hover + chrome-pressed active state --- */
body.brand-metallic .nav-item:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    border-color: rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    color: var(--text);
}
body.brand-metallic .nav-item.active {
    color: #eef1f5;
    background: linear-gradient(180deg, rgba(93,107,129,0.55), rgba(58,66,82,0.50));
    border-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.30);
    font-weight: 600;
}

/* --- Sidebar toggle: matching dark brushed-metal chip --- */
body.brand-metallic .sidebar-toggle {
    background: linear-gradient(180deg, rgba(56,63,75,0.92), rgba(34,39,48,0.9));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.40);
    color: var(--text);
}

/* --- Top bar (home/portal header): dark brushed metal to match the shell --- */
body.brand-metallic .topbar {
    background: linear-gradient(180deg, rgba(34,39,48,0.90) 0%, rgba(23,26,33,0.85) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 14px rgba(0,0,0,0.35);
}

/* --- Partner-logo chip + "powered by assidu" co-brand. The Smile Art Pavilion mark is fine,
   dark, thin lettering that washes out on the silver-metallic surface, so seat it on a clean
   bright chip with a soft drop shadow so it lifts off the metal (used on login + the top bar). --- */
body.brand-metallic .brand-cobrand { display: inline-flex; align-items: center; gap: 10px; }
body.brand-metallic .sidebar-logo { display: flex; flex-direction: column; align-items: center; gap: 5px; }
body.brand-metallic .brand-logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 14px; border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #eef1f4 100%);
    border: 1px solid rgba(70,80,95,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 4px 14px rgba(40,46,54,0.22), 0 1px 3px rgba(40,46,54,0.14);
}
body.brand-metallic .brand-logo-chip img { display: block; filter: none; height: 20px; }
body.brand-metallic .brand-poweredby {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
body.brand-metallic .brand-poweredby img { height: 12px; display: block; }
/* Login: larger, centered chip stack — but keep the "powered by assidu" co-brand small + subtle. */
body.brand-metallic .auth-logo .brand-logo-chip { padding: 12px 22px; border-radius: 14px; }
body.brand-metallic .auth-logo .brand-logo-chip img { height: 38px; max-width: 240px; object-fit: contain; }
body.brand-metallic .auth-logo .brand-poweredby { font-size: 7.5px; gap: 4px; opacity: 0.7; }
body.brand-metallic .auth-logo .brand-poweredby img { height: 9px; }

/* --- Dialogs / modals / popovers / menus / command bar: their hard-coded dark-teal backgrounds
   don't match the steel shell, so re-skin them to a dark graphite-metal panel (white text/inputs
   already come from the re-themed tokens). --- */
body.brand-metallic .app-dialog,
body.brand-metallic .fm-modal,
body.brand-metallic .pd-context-menu,
body.brand-metallic .pd-version-popover,
body.brand-metallic .cmp-overlay,
body.brand-metallic .modal-overlay > .modal,
body.brand-metallic .command-bar-panel {
    background: linear-gradient(180deg, rgba(36,41,51,0.97) 0%, rgba(24,27,34,0.97) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* --- Primary buttons: polished steel slab with top gloss + bevel + white text --- */
body.brand-metallic .btn-primary {
    background: linear-gradient(180deg, #5d6878 0%, #4a5568 52%, #3c4555 100%);
    color: #ffffff;
    border: 1px solid rgba(40,46,54,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2), 0 4px 14px rgba(40,46,54,0.28);
}
body.brand-metallic .btn-primary:hover {
    background: linear-gradient(180deg, #6a7585 0%, #525d70 52%, #404a5b 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.22), 0 6px 18px rgba(40,46,54,0.34);
}