/* =================================================================
   All Med 360 — Brand identity tokens (navy + steel)
   Derived from the allmed360 logo (deep medical navy + metallic steel).
   Loaded AFTER main.css / travel.css / emr-theme.css so it overrides
   their palettes in one place. To retheme the whole app, edit here.
   ================================================================= */
:root {
    /* --- Brand core --- */
    --brand-navy-deep: #16375b;
    --brand-navy:      #1e4d7b;
    --brand-blue:      #2f6aa8;
    --brand-steel:     #8fa3b5;
    --brand-silver:    #c3ccd6;
    --brand-soft:      #dbeafe;

    /* --- Override main.css palette (was generic blue) --- */
    --primary-color: #1e4d7b;
    --primary-dark:  #16375b;
    --primary-light: #2f6aa8;

    /* --- Override emr-theme.css palette (was teal) --- */
    --emr-primary:       #1e4d7b;
    --emr-primary-dark:  #16375b;
    --emr-primary-light: #2f6aa8;
    --emr-primary-soft:  #dbeafe;
}

/* =================================================================
   Sidebar → light theme (near-white with brand-navy accents).
   main.css styles the sidebar white-on-dark; these overrides flip it
   to a clean light surface. The active item keeps the navy pill.
   ================================================================= */
.sidebar {
    background: #ffffff;
    color: #334155;
    border-inline-end: 1px solid #e6eaf0;
    box-shadow: 0 0 24px rgba(15, 23, 42, .06);
}

.sidebar-header { border-bottom-color: #eceff4; }
.sidebar-logo,
.logo-text      { color: var(--brand-navy); }

/* Branch selector — override the white-on-dark inline styles */
.sidebar #SelectBID {
    background: #f4f7fb !important;
    border: 1px solid #dde3ec !important;
    color: #1f2937 !important;
}

/* Section titles */
.sidebar .nav-section-title { color: #94a3b8; }

/* Top-level links */
.sidebar .nav-link          { color: #334155; }
.sidebar .nav-link:hover    { background: #eef3f9; color: var(--brand-navy); transform: none; }
.sidebar .nav-link.active   { color: #fff; }            /* keep navy gradient pill */

/* Dropdown container + links */
.sidebar .nav-dropdown              { background: #f6f8fb; }
.sidebar .nav-dropdown-link         { color: #475569; }
.sidebar .nav-dropdown-link:hover   { background: #e9eff7; color: var(--brand-navy); }
.sidebar .nav-dropdown-link.active  { background: rgba(30, 77, 123, .12); color: var(--brand-navy); }
.sidebar .nav-dropdown-link:before        { background: #cbd5e1; }
.sidebar .nav-dropdown-link:hover:before  { background: var(--brand-navy); }

/* Dropdown dividers / separators (were rgba-white → invisible on light) */
.sidebar .nav-dropdown-divider span { color: #94a3b8; }
.sidebar .nav-dropdown-separator    { border-top-color: #e2e8f0 !important; }

/* Brand utility classes */
.text-brand   { color: var(--brand-navy) !important; }
.bg-brand     { background: var(--brand-navy) !important; color: #fff !important; }
.border-brand { border-color: var(--brand-navy) !important; }

/* =================================================================
   Hover-expand mini sidebar — collapsed at rest, expands on hover.
   The page content stays offset by the collapsed width, so the
   expanded sidebar OVERLAYS content instead of pushing it.
   ================================================================= */
.sidebar { transition: width .18s cubic-bezier(.4, 0, .2, 1), background .3s ease; }

@media (min-width: 993px) {
    /* Keep content offset at the collapsed width, hovered or not */
    .sidebar.collapsed ~ .main-content,
    body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-collapsed-width);
        width: calc(100% - var(--sidebar-collapsed-width));
    }
    [dir="rtl"] .sidebar.collapsed ~ .main-content,
    [dir="rtl"] body.sidebar-collapsed .main-content {
        margin-left: 0;
        margin-right: var(--sidebar-collapsed-width);
    }

    /* Expand as an overlay on hover */
    .sidebar.collapsed:hover {
        width: var(--sidebar-width);
        z-index: 1200;
        box-shadow: 0 24px 48px rgba(15, 23, 42, .38);
    }
    /* Reveal labels / badges / arrows / open dropdowns while hovered */
    .sidebar.collapsed:hover .logo-text,
    .sidebar.collapsed:hover .nav-link-text { opacity: 1; width: auto; }
    .sidebar.collapsed:hover .nav-section-title { opacity: 1; height: auto; padding: 0 1.5rem; margin-bottom: .5rem; }
    .sidebar.collapsed:hover .nav-badge { display: inline-block; }
    .sidebar.collapsed:hover .dropdown-arrow { display: inline-block; }
    .sidebar.collapsed:hover .nav-item.has-dropdown.active .nav-dropdown { display: block; }
}