/* Light sidebar themes (medical look). The body gets one class: theme-white, theme-sky or theme-teal. Loaded after app.css. */
body[class*="theme-"] .sidebar-brand { flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.1rem 1.2rem .9rem; }
body[class*="theme-"] .brand-logo { display: block; width: 168px; height: auto; }
body[class*="theme-"] .brand-on-dark { display: none; }
body[class*="theme-"] .brand-on-light { display: block; }
body[class*="theme-"] .sidebar-brand .sub { max-width: 13rem; margin-top: .1rem; }

/* ---- shared light-sidebar behaviour (colours come from the variables below) ---- */
body[class*="theme-"] .sidebar { background: var(--sb-bg); color: var(--sb-text); border-right: 1px solid var(--sb-line); }
body[class*="theme-"] .sidebar-brand { color: var(--sb-text); }
body[class*="theme-"] .sidebar-brand .sub { color: var(--sb-sub); font-weight: 600; }
body[class*="theme-"] .nav-label { color: var(--sb-sub); }
body[class*="theme-"] .nav-link-item { color: var(--sb-text); }
body[class*="theme-"] .nav-link-item i, body[class*="theme-"] .nav-parent > i:first-child { color: var(--sb-icon); }
body[class*="theme-"] .nav-link-item:hover, body[class*="theme-"] .nav-parent:hover { background: var(--sb-hover); color: var(--sb-text); }
body[class*="theme-"] .nav-link-item:hover i { color: var(--sb-accent); }
body[class*="theme-"] .nav-link-item.active { background: var(--sb-active-bg); color: var(--sb-active-text); box-shadow: var(--sb-active-shadow); }
body[class*="theme-"] .nav-link-item.active i { color: var(--sb-active-text); }
body[class*="theme-"] .nav-parent { color: var(--sb-text); }
body[class*="theme-"] .nav-parent:not(.collapsed) { color: var(--sb-text); }
body[class*="theme-"] .nav-parent .chev { color: var(--sb-sub); }
body[class*="theme-"] .nav-children { border-left-color: var(--sb-line); }
body[class*="theme-"] .sidebar-foot { color: var(--sb-sub); border-top-color: var(--sb-line); }
body[class*="theme-"] .sidebar-foot strong { color: var(--sb-text); }

/* ---- A. Clean white ---- */
body.theme-white { --sb-bg: #ffffff; --sb-line: #e1e9f5; --sb-text: #263754; --sb-sub: #7387a8; --sb-icon: #6c88b8; --sb-hover: #f0f6ff; --sb-accent: #1d5fe0;
    --sb-active-bg: #e2eeff; --sb-active-text: #0f47b4; --sb-active-shadow: inset 3px 0 0 #1d5fe0; }
/* ---- B. Sky blue ---- */
body.theme-sky { --sb-bg: linear-gradient(180deg, #eaf5ff 0%, #d5e9fa 100%); --sb-line: #c4ddf2; --sb-text: #17365f; --sb-sub: #5f82ad; --sb-icon: #3b78bb; --sb-hover: rgba(255, 255, 255, .65); --sb-accent: #1260c8;
    --sb-active-bg: #1d6fd6; --sb-active-text: #ffffff; --sb-active-shadow: 0 4px 12px rgba(29, 111, 214, .3); }
/* ---- C. Medical teal ---- */
body.theme-teal { --sb-bg: linear-gradient(180deg, #e9f7f5 0%, #d3eeeb 100%); --sb-line: #bfe0dc; --sb-text: #123c40; --sb-sub: #4f8a88; --sb-icon: #26908b; --sb-hover: rgba(255, 255, 255, .65); --sb-accent: #0c8a82;
    --sb-active-bg: #0e9a91; --sb-active-text: #ffffff; --sb-active-shadow: 0 4px 12px rgba(14, 154, 145, .3); }