/* sidebar.css — two-zone layout: dark sidebar + warm canvas */

:root {
    --sb-width: 260px;
    --sb-speed: 0.25s;
    --sb-accent: #7c3aed;
    --sb-canvas: #fef6f0;
}

/* Force canvas background on app interior (overrides dark-theme) */
body {
    background: var(--sb-canvas) !important;
    color: #3d3555 !important;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Mobile header ───────────────────────────────────────────── */
#vms-mobile-header {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 30;
    background: #1a1035;
    color: white;
    align-items: center;
    padding: 0 16px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#vms-hamburger {
    padding: 6px;
    margin-left: -6px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#vms-hamburger:hover { background: rgba(255,255,255,0.1); }
#vms-mobile-header .mob-brand {
    margin-left: 10px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Sidebar overlay (mobile backdrop) ──────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 35;
    opacity: 0;
    transition: opacity var(--sb-speed) ease;
}
.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
#vms-sidebar {
    width: var(--sb-width);
    min-height: 100vh;
    background: linear-gradient(180deg, #1a1035 0%, #120b28 50%, #0e0820 100%);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--sb-speed) cubic-bezier(0.4,0,0.2,1);
}
#vms-sidebar::-webkit-scrollbar          { width: 5px; }
#vms-sidebar::-webkit-scrollbar-track   { background: transparent; }
#vms-sidebar::-webkit-scrollbar-thumb   { background: rgba(124,58,237,0.3); border-radius: 10px; }
#vms-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.sb-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Brand */
.sb-brand {
    padding: 20px 20px 8px;
    position: relative;
}
.sb-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
a.sb-brand-row,
a.sb-brand-row:hover,
a.sb-brand-row:visited { text-decoration: none !important; color: inherit !important; }
.sb-brand-icon { font-size: 1.4rem; }
.sb-brand-name {
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
#vms-sidebar-close {
    display: none;
    position: absolute;
    top: 14px; right: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    line-height: 1;
}
#vms-sidebar-close:hover { color: white; background: rgba(255,255,255,0.1); }

/* User info */
.sb-user {
    margin: 0 12px 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--sb-accent);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sb-user-name  { color: white;                    font-size: 0.875rem; font-weight: 500; }
.sb-user-level { color: rgba(196,181,253,0.6);    font-size: 0.72rem; margin-top: 1px; }

/* Section headers */
.sb-section-header {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,181,253,0.5);
    padding: 18px 20px 6px 23px;
    font-weight: 600;
}

/* ── Nav items ───────────────────────────────────────────────── */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 20px;
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    text-decoration: none !important;
    user-select: none;
}
.nav-item:hover {
    background: rgba(124,58,237,0.12);
    color: rgba(255,255,255,0.95);
}
.nav-item.active {
    background: rgba(124,58,237,0.18);
    color: #fff;
    border-left-color: var(--sb-accent);
}
.nav-item .nav-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.nav-item .nav-label { flex: 1; }
.sb-chevron {
    width: 14px; height: 14px;
    opacity: 0.5;
    transition: transform var(--sb-speed) ease;
    flex-shrink: 0;
}
.sb-chevron.rotated { transform: rotate(90deg); }

/* Lucide icon sizing in nav items */
.nav-item [data-lucide] {
    width: 16px; height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
}

/* ── Submenus ─────────────────────────────────────────────────── */
.sb-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
    background: rgba(0,0,0,0.12);
}
.sb-submenu.open { max-height: 240px; }
.sb-submenu .nav-item {
    padding-left: 52px;
    font-size: 0.8125rem;
}

/* ── Admin section ────────────────────────────────────────────── */
.sb-admin-section {
    background: rgba(180,50,50,0.06);
    border-top: 1px solid rgba(124,58,237,0.15);
    margin-top: 4px;
    padding-top: 2px;
}
.sb-admin-section .sb-section-header {
    color: rgba(255,160,130,0.55);
}

/* ── Auth section (pinned bottom) ─────────────────────────────── */
.sb-auth-section {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 10px 0 14px;
}
.sb-auth-section .nav-item {
    color: rgba(255,255,255,0.45);
    font-size: 0.8rem;
}
.sb-auth-section .nav-item:hover { color: rgba(255,255,255,0.8); }

/* ── Main content area ───────────────────────────────────────── */
#vms-main {
    margin-left: var(--sb-width);
    min-height: 100vh;
    background: var(--sb-canvas);
    transition: margin-left var(--sb-speed) ease;
    /* Sticky footer (#61) */
    display: flex;
    flex-direction: column;
    /* Re-map ALL dark-theme CSS variables to light palette (#63)
       dark-theme.css uses var(--bg-card), var(--text), etc. everywhere;
       overriding them here makes every dark rule inside #vms-main use
       light values without touching dark-theme.css. */
    --bg-page:    #fef6f0;
    --bg-nav:     #f5f0fa;
    --bg-card:    #ffffff;
    --bg-input:   #faf8fc;
    --border:     #e8e0f0;
    --border-foc: #7c3aed;
    --text:       #1e1145;
    --text-muted: #7c7494;
    --accent:     #7c3aed;
    --accent-h:   #6d28d9;
    --accent-lite: #5b21b6;
    --danger:     #dc2626;
    --success:    #059669;
    /* Variables added for #68 refactor */
    --bg-info:          #f5f0fa;
    --text-info:        #1e1145;
    --bg-notes-subtle:  rgba(124,58,237,0.04);
}

/* ── Light canvas — explicit overrides for dark-theme !important rules (#63) ── */

/* Forms: dark-theme has !important on background/color/border */
#vms-main input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
#vms-main textarea,
#vms-main select {
    background: #faf8fc !important;
    color: #1e1145 !important;
    border: 1.5px solid #e8e0f0 !important;
    border-radius: 6px;
}
#vms-main input:focus,
#vms-main textarea:focus,
#vms-main select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
#vms-main label { color: #7c7494; }

/* Buttons stay purple (#vms-hamburger and #vms-sidebar-close are NOT in #vms-main) */
#vms-main input[type="submit"],
#vms-main input[type="button"],
#vms-main button {
    background: #7c3aed !important;
    color: #fff !important;
    border: none !important;
}
#vms-main input[type="submit"]:hover,
#vms-main input[type="button"]:hover,
#vms-main button:hover {
    background: #6d28d9 !important;
}

/* decorateTop cards: dark-theme sets div.mb bg with !important */
#vms-main div.mb {
    background: #ffffff !important;
    border: 1px solid rgba(30,17,69,0.06) !important;
    border-radius: 8px;
    color: #3d3555;
    box-shadow: 0 1px 3px rgba(30,17,69,0.06), 0 4px 12px rgba(30,17,69,0.03);
}
#vms-main div.mb h4 { color: #222; background: transparent; height: auto; font-size: 0.9rem; font-weight: 600; }
/* task #164 (ref #106) — h2 inside .mb cards was rendering dark blue on the
   purple/blue gradient (unreadable). Match the h4 color and tighten spacing
   so panel headings are legible whether the source heading is h2 or h4. */
#vms-main div.mb h2 { color: #222 !important; background: transparent !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: normal !important; padding: 0.4em !important; margin-top: 0; margin-bottom: 4px; }
#vms-main div.mb h3 { color: #222 !important; background: transparent !important; height: auto !important; font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: normal !important; padding: 0.3em 0.4em !important; margin-top: 0.6em; margin-bottom: 4px; }
#vms-main div.mb p, #vms-main div.mb li, #vms-main div.mb td { font-size: 0.75em; }
#vms-main div.mb ul.sprite_nav li, #vms-main div.mb ul.sprite_nav_sites li { font-size: 0.875rem; }

/* Notes boxes */
#vms-main div.notes,
#vms-main .notes {
    background: #f5f0fa !important;
    border: 1px solid #e8e0f0 !important;
    color: #3d3555 !important;
}
#vms-main div.notes h4, #vms-main .notes h4 { color: #5b21b6 !important; background-image: none !important; }
#vms-main div.notes p,  #vms-main .notes p  { color: #7c7494 !important; }

/* Kill legacy yellow/orange bg utility classes */
#vms-main .fc9, #vms-main .ffc, #vms-main .yellowBox,
#vms-main .infoBox, #vms-main .notice {
    background: #f5f0fa !important;
    border: 1px solid #e8e0f0 !important;
    color: #1e1145 !important;
}

/* Tables — task #134/#168 */
#vms-main table { border-collapse: collapse; width: 100%; }
#vms-main th { background: #f5f0fa; color: #1e1145; border-bottom: 1px solid #e8e0f0; padding: 8px 12px; text-align: left; }
#vms-main td { color: #3d3555; border-bottom: 1px solid rgba(30,17,69,0.06); padding: 7px 12px; }
#vms-main tr:hover td { background: rgba(124,58,237,0.04); }
#vms-main tr.altRow td,
#vms-main tr.alt td    { background: rgba(30,17,69,0.02); }

/* Links inside content area: dark-theme sets --accent-lite (#a78bfa) for links,
   that's too light on white. Variable override above sets --accent-lite: #5b21b6. */
#vms-main a,
#vms-main a:link,
#vms-main a:visited { color: #5b21b6; }
#vms-main a:hover,
#vms-main a:active  { color: #7c3aed; }

/* squarebutton CTAs */
#vms-main a.squarebutton,
#vms-main a.squarebutton:link,
#vms-main a.squarebutton:visited {
    background: #7c3aed !important;
    color: #fff !important;
}
#vms-main a.squarebutton:hover { background: #6d28d9 !important; }

/* Flash message cards */
#vms-main #homeMessageArea div,
#vms-main #applicationSaved,
#vms-main #bugReported {
    background: #fff;
    border: 1px solid #7c3aed;
    color: #1e1145;
}

/* ── Page footer (inside #vms-main) ─────────────────────────── */
#vms-footer {
    /* background now inherits via var(--bg-page) cascade — dark-theme refactored in #68 */
    padding: 20px 32px 28px;
    margin-top: auto;   /* sticky footer: flex child pushed to bottom (#61) */
    border-top: 1px solid rgba(30,17,69,0.08);
    color: #7c7494;
    font-size: 0.8125rem;
}
#vms-footer a                   { color: #7c7494; text-decoration: none; }
#vms-footer a:hover             { color: var(--sb-accent); }
.vms-footer-links {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 6px;
}
#vms-footer p { text-align: center; margin: 4px 0 0; }

/* ── Mobile breakpoint ───────────────────────────────────────── */
@media (max-width: 767px) {
    #vms-mobile-header  { display: flex; }
    #vms-sidebar-close  { display: block; }
    #vms-sidebar        { transform: translateX(-100%); }
    #vms-sidebar.mobile-open { transform: translateX(0); }
    #vms-main           { margin-left: 0; padding-top: 48px; }
}

/* ── Accessibility ───────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

/* ── Legacy dark-theme overrides that no longer apply ────────── */
#vms-main #pageWrapper   { padding: 0 !important; }
#vms-main #pageBanner,
#vms-main #topnav,
#vms-main #account,
#vms-main #search,
#vms-main #subBanner,
#vms-main #pageNavigation,
#vms-main #bread         { display: none !important; }
#vms-main #contentwrapper,
#vms-main #contentcolumn { padding: 0; width: 100%; }