/* =================================================================
   AllMed 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 (derived from the AllMed360 logo) --- */
    --brand-navy-deep: #082352;   /* deepest navy — "AllMed" wordmark shadow   */
    --brand-navy:      #0c3a8e;    /* primary navy-royal — logo body            */
    --brand-blue:      #1e6be6;    /* bright royal — the blue loop / links      */
    --brand-sky:       #3b9bff;    /* light accent — the "360" gradient tip     */
    --brand-steel:     #8ca0bc;    /* muted steel                               */
    --brand-silver:    #c7cdd4;    /* chrome circuit loop                       */
    --brand-soft:      #dce8ff;    /* soft blue wash for tints                  */

    /* --- Override main.css palette (was generic blue) --- */
    --primary-color: #0c3a8e;
    --primary-dark:  #082352;
    --primary-light: #1e6be6;

    /* --- Override emr-theme.css palette (was teal) --- */
    --emr-primary:       #0c3a8e;
    --emr-primary-dark:  #082352;
    --emr-primary-light: #1e6be6;
    --emr-primary-soft:  #dce8ff;
}

/* =================================================================
   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; }
}

/* ===== Collapsible sidebar sections (accordion) — each section is one top-level group ===== */
.sidebar-nav .nav-section-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    -webkit-user-select: none;
}
.sidebar-nav .nav-section-title:hover { color: var(--brand-navy, #1e4d7b); }
.sidebar-nav .nav-section-title .section-arrow {
    font-size: 11px;
    opacity: .5;
    transition: transform .25s ease;
    flex: 0 0 auto;
    margin-inline-start: auto;
}
/* Collapsed → arrow points to the inline-start; menu height animates to 0 */
.sidebar-nav .nav-section.section-collapsed > .nav-section-title .section-arrow { transform: rotate(-90deg); }
[dir="rtl"] .sidebar-nav .nav-section.section-collapsed > .nav-section-title .section-arrow { transform: rotate(90deg); }
.sidebar-nav .nav-section > .nav-menu {
    overflow: hidden;
    max-height: 6000px;
    transition: max-height .3s ease;
}
.sidebar-nav .nav-section.section-collapsed > .nav-menu { max-height: 0 !important; }
/* When the whole sidebar is icon-collapsed, ignore the accordion (hover reveals as before) */
.sidebar.collapsed .nav-section > .nav-menu { max-height: none !important; overflow: visible; }
.sidebar.collapsed .section-arrow { display: none; }