/* =================================================================
   Clopr Dental — brand identity tokens ("Pearl Teal")
   A tooth drawn from two interlocking loops (a nod to the Clopr rings):
   deep teal ink, clinical teal, aqua, mint, pearl surfaces and one warm
   coral accent. Loaded AFTER main.css / travel.css / emr-theme.css so it
   overrides their palettes in one place. To retheme the app, edit here.
   ================================================================= */
:root {
    /* --- Brand core --- */
    --brand-ink:    #073b42;   /* deep teal ink — wordmark, headings, rail */
    --brand-deep:   #0a5560;   /* deep teal — hover / pressed states        */
    --brand-teal:   #0b7a85;   /* clinical teal — primary actions & links   */
    --brand-aqua:   #19c3c9;   /* aqua — the second loop, highlights        */
    --brand-mint:   #9fe6dc;   /* mint — completed / positive washes        */
    --brand-pearl:  #f3fbfa;   /* pearl — app ground                        */
    --brand-coral:  #ff7a5c;   /* coral — the one warm accent (badges, CTAs) */
    --brand-steel:  #7f9c9e;   /* muted steel-teal                          */
    --brand-silver: #c5d7d5;   /* hairlines                                 */
    --brand-soft:   #d4efec;   /* soft teal wash for tints                  */

    /* --- Override main.css palette --- */
    --primary-color: #0b7a85;
    --primary-dark:  #073b42;
    --primary-light: #19c3c9;

    /* --- Override emr-theme.css palette --- */
    --emr-primary:       #0b7a85;
    --emr-primary-dark:  #073b42;
    --emr-primary-light: #19c3c9;
    --emr-primary-soft:  #d4efec;
    --emr-accent:        #ff7a5c;
    --emr-accent-dark:   #e2583a;
    --emr-accent-soft:   #ffe6df;
}

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

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

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

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

/* Top-level links */
.sidebar .nav-link          { color: #2c4548; }
.sidebar .nav-link:hover    { background: #eaf4f3; color: var(--brand-deep); transform: none; }
.sidebar .nav-link.active   { color: #fff; }            /* keep teal gradient pill */

/* Dropdown container + links */
.sidebar .nav-dropdown              { background: #f4f8f8; }
.sidebar .nav-dropdown-link         { color: #3e5a5d; }
.sidebar .nav-dropdown-link:hover   { background: #e5f0ee; color: var(--brand-deep); }
.sidebar .nav-dropdown-link.active  { background: rgba(20, 94, 102, .12); color: var(--brand-deep); }
.sidebar .nav-dropdown-link:before        { background: #c5d7d5; }
.sidebar .nav-dropdown-link:hover:before  { background: var(--brand-deep); }

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

/* Brand utility classes */
.text-brand   { color: var(--brand-deep) !important; }
.bg-brand     { background: var(--brand-deep) !important; color: #fff !important; }
.border-brand { border-color: var(--brand-deep) !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(9, 36, 39, .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-deep, #145e66); }
.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; }