/*
 * OpenCMS Custom Brand Theme  —  Matrix Bricks minimal edition
 * Injected automatically via custom/assets/custom.yaml
 *
 * Strict three-color palette
 *   black  #000000 / #1a1a1a   navbar, body text, dark accents
 *   red    #cc0000 / #7b0000   primary, active, accent
 *   white  #ffffff / #ffffff   surfaces, body bg, light text on dark
 *
 * Plus neutral greys for borders / muted text / disabled states.
 *
 * Legacy CSS variable names (--brand-navy, --brand-blue, etc.) are kept
 * so the rest of the file keeps working — only the *values* changed.
 */

/* ─────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES (override oe- vars)
   ───────────────────────────────────────────── */
:root {
    /* page canvas */
    --oe-body-bg:                  #ffffff;
    --oe-body-color:               #1a1a1a;

    /* surface / cards / modals */
    --oe-surface-bg:               #ffffff;
    --oe-panel-bg:                 #ffffff;
    --oe-fieldset-bg:              #ffffff;

    /* top navbar */
    --oe-navbar-bg:                #000000;
    --oe-navbar-color:             #ffffff;
    --oe-navbar-link-hover-bg:     #cc0000;
    --oe-navbar-link-hover-color:  #ffffff;
    --oe-navbar-link-active-bg:    #cc0000;
    --oe-navbar-link-active-color: #ffffff;

    /* search bar */
    --oe-search-bg:                #1a1a1a;

    /* brand colours – all yellows/ambers point to red, all creams to white */
    --brand-navy:   #000000;
    --brand-blue:   #cc0000;
    --brand-sky:    #cc0000;
    --brand-yellow: #cc0000;
    --brand-amber:  #cc0000;
    --brand-cream:  #ffffff;
    --brand-green:  #1a1a1a;
    --brand-text:   #1a1a1a;
    --brand-muted:  #6e6e6e;
}

/* ─────────────────────────────────────────────
   2. GLOBAL BODY / BACKGROUND
   ───────────────────────────────────────────── */
html, body {
    background-color: var(--oe-body-bg) !important;
    color: var(--oe-body-color) !important;
}

.body_main,
.body_main_widescreen {
    background-color: var(--oe-body-bg) !important;
}

/* ─────────────────────────────────────────────
   3. TOP NAVIGATION BAR
   ───────────────────────────────────────────── */
nav.navbar, .navbar.bg-light, .navbar.navbar-light {
    background-color: #faf7f7 !important;
    border-bottom: 3px solid var(--brand-sky) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Navbar brand / logo area */
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: #c40101 !important;
    opacity: 1;
}

/* Hamburger toggler */
.navbar-toggler {
    border-color: rgba(224, 242, 254, 0.4) !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224,242,254,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ─────────────────────────────────────────────
   4. APP MENU (DROPDOWN NAVIGATION)
   ───────────────────────────────────────────── */
/* Top-level menu labels */
.appMenu .menuLabel,
.appMenu > div > .menuLabel,
.appMenu .menuSection > .menuLabel {
    color: #e90000 !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.6rem !important;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.appMenu .menuLabel:hover,
.appMenu > div:hover > .menuLabel,
.appMenu .menuSection:hover > .menuLabel {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    cursor: pointer;
}

/* Dropdown caret icons */
.appMenu .fa.closeButton {
    color: #ffffff !important;
}

/* Dropdown menus */
.appMenu .menuEntries.dropdown-menu,
.appMenu .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(204, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    padding: 4px 0 !important;
    min-width: 200px;
}

/* Dropdown items */
.appMenu .menuEntries li .menuLabel,
.appMenu .dropdown-menu li .menuLabel {
    color: #1a1a1a !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: 0 !important;
}

.appMenu .menuEntries li:hover .menuLabel,
.appMenu .dropdown-menu li:hover .menuLabel {
    background-color: #fff8d9 !important;
    color: #1a1a1a !important;
}

/* Disabled menu items */
.menuDisabled {
    color: #666666 !important;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   5. TAB STRIP (bottom of navbar)
   ───────────────────────────────────────────── */
.tabControls {
    background-color: #ffffff !important;
    border-bottom: 1px solid #d0d7de !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

/* Individual tab — neutral pill on white bar */
.tabSpan, .tabSpan.bgcolor2 {
    background-color: #cc0000 !important;
    border: 1px solid #cd0d0d !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 12px !important;
    margin: 2px 2px 0 !important;
    font-size: 0.8rem;
    transition: background 0.15s ease, color 0.15s ease;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.tabSpan:hover,
.tabSpan.bgcolor2:hover {
    background-color: #eaeaea !important;
    color: #1a1a1a !important;
    border-color: #b0b0b0 !important;
}

/* Active / visible tab — only the active one is red */
.tabSpan.tabsNoHover, .tabSpan.current {
    background-color: #f8f8f8 !important;
    color: #121111 !important;
    border-color: #070707 !important;
    font-weight: 600;
} 




/* Tab title text */
.tabTitle {
    color: inherit !important;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    display: inline-block;
    vertical-align: middle;
}

.tabHidden {
    color: #666666 !important;
}

/* Tab icons (refresh, lock, close) */
.tabSpan .fa-sync,
.tabSpan .fa-unlock,
.tabSpan .fa-lock,
.tabSpan .fa-times {
    color: inherit !important;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tabSpan .fa-sync:hover,
.tabSpan .fa-unlock:hover,
.tabSpan .fa-lock:hover,
.tabSpan .fa-times:hover {
    opacity: 1;
}

/* Patient toggle caret */
#patient_caret.fa.menu_arrow {
    color: #ffffff !important;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 1.1rem;
    transition: color 0.15s;
}
#patient_caret.fa.menu_arrow:hover {
    color: var(--brand-sky) !important;
}

/* ─────────────────────────────────────────────
   6. FRAME / CONTENT AREA
   ───────────────────────────────────────────── */
.mainFrames,
#mainFrames_div,
#framesDisplay {
    background-color: var(--oe-body-bg) !important;
}

.frameDisplay {
    background-color: var(--oe-body-bg) !important;
}

/* ─────────────────────────────────────────────
   7. PATIENT / ATTENDANT PANEL
   ───────────────────────────────────────────── */
#attendantData,
.body_title.acck {
    background-color: #ffffff !important;
    border-bottom: 2px solid var(--brand-sky) !important;
    color: var(--brand-text) !important;
    padding: 4px 12px !important;
    font-size: 0.875rem;
}

/* ─────────────────────────────────────────────
   8. PRIMARY BUTTONS
   ───────────────────────────────────────────── */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-blue) !important;
    border-color: #7b0000 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #7b0000 !important;
    box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.35) !important;
}

.btn-secondary {
    background-color: #e8e8e8 !important;
    border-color: #a0a0a0 !important;
    color: var(--brand-text) !important;
}

.btn-success,
.btn-success:hover {
    background-color: var(--brand-green) !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

.btn-info,
.btn-info:hover {
    background-color: var(--brand-sky) !important;
    border-color: #cc0000 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   9. SEARCH BAR
   ───────────────────────────────────────────── */
#anySearchBox, .form-control-sm.form-control[name="anySearchBox"] {
    background-color: #ffffff !important;
    color: #de1616 !important;
    border: 1px solid rgb(204 0 0) !important;
    border-radius: 4px !important;
}



#anySearchBox::placeholder {
    color: rgba(148, 196, 233, 0.65) !important;
}

#anySearchBox:focus {
    background-color: #1a0000 !important;
    border-color: var(--brand-sky) !important;
    box-shadow: 0 0 0 0.15rem rgba(204, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

#search_globals,
button#search_globals {
    background-color: var(--brand-sky) !important;
    border-color: #cc0000 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   10. USER DROPDOWN
   ───────────────────────────────────────────── */
#userData,
#userdropdown,
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(204, 0, 0, 0.3) !important;
}

#userData a,
#userData button,
#userdropdown .dropdown-item {
    color: #b70303 !important;
}

#userdropdown .dropdown-item:hover,
#userdropdown .dropdown-item:focus {
    background-color: var(--brand-sky) !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   11. CARDS, PANELS, MODALS
   ───────────────────────────────────────────── */
.card,
.panel,
.panel-default,
.modal-content {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    color: var(--brand-text) !important;
}

.card-header,
.panel-heading {
    background-color: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    color: var(--brand-navy) !important;
    font-weight: 600;
}

/* Modal header */
.modal-header {
    background-color: var(--brand-navy) !important;
    color: #ffffff !important;
    border-radius: 7px 7px 0 0 !important;
}

.modal-header .modal-title {
    color: #ffffff !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 0.8;
}

/* ─────────────────────────────────────────────
   12. TABLES
   ───────────────────────────────────────────── */
.table {
    color: var(--brand-text) !important;
    background-color: #ffffff !important;
}

.table thead th {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    border-color: #7b0000 !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.table-hover tbody tr:hover {
    background-color: #ffffff !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   13. FORM CONTROLS / INPUTS
   ───────────────────────────────────────────── */
.form-control,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="search"],
.input-group-text {
    background-color: #ffffff !important;
    color: var(--brand-text) !important;
    border-color: #d0d7de !important;
    border-radius: 5px !important;
}

.form-control:focus,
select:focus,
textarea:focus,
input:focus {
    background-color: #ffffff !important;
    color: var(--brand-text) !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(204, 0, 0, 0.25) !important;
}

label {
    color: var(--brand-text) !important;
    font-weight: 500;
}

/* ─────────────────────────────────────────────
   14. FIELDSETS & SECTION HEADERS
   ───────────────────────────────────────────── */
fieldset,
.oe-fieldset {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
}

fieldset legend,
.oe-fieldset legend {
    color: var(--brand-navy) !important;
    font-weight: 700;
    font-size: 0.9rem;
    background-color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────────
   15. BADGES, ALERTS, PILLS
   ───────────────────────────────────────────── */
.badge-primary { background-color: var(--brand-blue) !important; color: #fff !important; }
.badge-success { background-color: var(--brand-green) !important; color: #fff !important; }
.badge-info    { background-color: var(--brand-sky) !important; color: #fff !important; }

.alert-primary {
    background-color: #ffffff !important;
    border-color: #d0d7de !important;
    color: #1a0000 !important;
}

.alert-success {
    background-color: #f0f0f0 !important;
    border-color: #cccccc !important;
    color: #1a1a1a !important;
}

/* ─────────────────────────────────────────────
   16. TABS (Bootstrap tab component inside pages)
   ───────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid #d0d7de !important;
}

/* Inactive tab labels — light text on dark headers */
.nav-tabs .nav-link {
    color: #cccccc !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Active tab — solid red, white text */
.nav-tabs .nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
    background-color: #cc0000 !important;
    border-bottom: 2px solid #cc0000 !important;
    border-radius: 4px 4px 0 0;
}

/* Legacy OpenEMR tab list (the classic ul.tabNav) */
ul.tabNav a {
    color: #cccccc !important;
}
ul.tabNav a:hover {
    color: #ffffff !important;
}
ul.tabNav li.current a {
    color: #ffffff !important;
    background-color: #cc0000 !important;
}

/* ─────────────────────────────────────────────
   17. SIDEBAR / LEFT NAV
   ───────────────────────────────────────────── */
#oe-nav-sidebar,
#oe-nav-sidebar .list-group-item {
    background-color: #ffffff !important;
    color: var(--brand-text) !important;
    border-color: #ffffff !important;
}

#oe-nav-sidebar .list-group-item.active,
#oe-nav-sidebar .list-group-item:hover {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
    border-color: var(--brand-blue) !important;
}

/* ─────────────────────────────────────────────
   18. LOGIN PAGE — plain white, full-screen.
   Overrides the body gradient + triangle SVG + white card
   defined in style_matrix_bricks.scss. Nothing here paints
   a card: the form sits directly on a white body.
   ───────────────────────────────────────────── */

/* Body: plain white, no gradient, no background image */
body:has(#login_form),
html:has(#login_form),
html:has(#login_form) body {
    background: #ffffff !important;
    background-image: none !important;
    min-height: 100vh !important;
}

/* Kill the decorative overlay rendered by style_matrix_bricks */
body:has(#login_form)::before,
body:has(#login_form)::after {
    content: none !important;
    background: none !important;
    display: none !important;
}

/* Remove the white card — no background, no border, no shadow,
   no rounded corners, no width cap. Form fills the viewport. */
body:has(#login_form) .box,
body:has(#login_form) .band,
body:has(#login_form) .vertical-band {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 2rem !important;
    margin: 0 auto !important;
}

/* Inner grid: cap content to a comfortable width and centre it */
body:has(#login_form) .vertical-band .align-items-center {
    max-width: 960px;
    margin: 0 auto;
}

/* Title / site name */
body:has(#login_form) h1,
body:has(#login_form) h2,
body:has(#login_form) h3 {
    color: var(--brand-navy) !important;
    font-weight: 700;
}

/* Inputs stay clean and readable on the white body */
body:has(#login_form) .form-control,
body:has(#login_form) input[type="text"],
body:has(#login_form) input[type="password"] {
    border-color: #d0d7de !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
}

body:has(#login_form) .form-control:focus {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.2) !important;
}

/* Primary CTA — brand red, full-width */
body:has(#login_form) #login-button,
body:has(#login_form) .btn-login,
body:has(#login_form) button[type="submit"],
body:has(#login_form) .btn-primary {
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-sky) 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 0.55rem 2rem !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body:has(#login_form) .btn-primary:hover,
body:has(#login_form) button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(204, 0, 0, 0.45) !important;
}

/* ─────────────────────────────────────────────
   19. PAGE-LEVEL HEADERS / TITLES
   ───────────────────────────────────────────── */
h1, h2, h3 {
    color: var(--brand-navy) !important;
}

h4, h5, h6 {
    color: var(--brand-text) !important;
}

/* Page title bar (used in many OpenEMR pages) */
.title, .ptitle {
    color: var(--brand-navy) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--brand-sky) !important;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* ─────────────────────────────────────────────
   20. LINKS
   Default: brand red on white  (matches the dropdown
   menu look the user picked out as the reference).
   ───────────────────────────────────────────────────── */
a {
    color: #cc0000;
    text-decoration: none;
}

a:hover {
    color: #7b0000;
    text-decoration: underline;
}

/* Dropdown menus — dark text on white, subtle grey hover */
.dropdown-menu .dropdown-item,
.dropdown-menu a {
    color: #1a1a1a !important;
    font-weight: 500;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
}

/* ─────────────────────────────────────────────
   21. PAGINATION
   ───────────────────────────────────────────── */
.page-link {
    color: var(--brand-blue) !important;
    border-color: #ffffff !important;
}

.page-link:hover {
    background-color: #ffffff !important;
    color: var(--brand-navy) !important;
}

.page-item.active .page-link {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   22. BRAND LOGO SVG COLOR OVERRIDE
   ───────────────────────────────────────────── */
#mainBox .logo .emr-menu-logo > #blue-color,
#mainBox_vertical .logo .emr-menu-logo > #blue-color {
    fill: #ffffff !important;
}

.about-review-image > #color {
    fill: var(--brand-blue) !important;
}

/* ─────────────────────────────────────────────
   23. SELECT2 / AUTOCOMPLETE
   ───────────────────────────────────────────── */
.select2-container--bootstrap4 .select2-selection {
    border-color: #d0d7de !important;
}

.select2-container--bootstrap4 .select2-selection--single:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 0.15rem rgba(204, 0, 0, 0.25) !important;
}

.select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: var(--brand-blue) !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   24. CALENDAR COLORS
   ───────────────────────────────────────────── */
#OpenEMR_scheduler_header,
.fc-toolbar.fc-header-toolbar {
    background-color: var(--brand-navy) !important;
    color: #ffffff !important;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
}

.fc-button-primary,
.fc-button {
    background-color: var(--brand-blue) !important;
    border-color: #7b0000 !important;
    color: #ffffff !important;
}

.fc-button-primary:hover,
.fc-button:hover {
    background-color: #7b0000 !important;
}

/* ─────────────────────────────────────────────
   25. MISCELLANEOUS HELPERS
   ───────────────────────────────────────────── */
.text-primary { color: var(--brand-blue) !important; }
.text-info    { color: var(--brand-sky) !important; }
.text-success { color: var(--brand-green) !important; }
.text-muted   { color: var(--brand-muted) !important; }

.bg-primary { background-color: var(--brand-blue) !important; color: #fff !important; }
.bg-info    { background-color: var(--brand-sky) !important; color: #fff !important; }
.bg-success { background-color: var(--brand-green) !important; color: #fff !important; }

/* Scroll bars (Webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: #d0d7de; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }

/* ─────────────────────────────────────────────
   26. OEMR-SPECIFIC CLASSES (legacy pages)
   ───────────────────────────────────────────── */
.bgcolor1 { background-color: #ffffff !important; }
.bgcolor2 { background-color: #ffffff !important; color: var(--brand-text) !important; }
.bgcolor3 { background-color: #ffffff !important; }

.mainbox {
    background-color: var(--oe-body-bg) !important;
}

/* Bold category headings in forms */
.bold, .bold1 {
    color: var(--brand-navy) !important;
    font-weight: 700;
}

/* Top header band in older pages */
.pageheading {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 8px 16px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* Dividers */
hr {
    border-color: #d0d7de !important;
    opacity: 1;
}

/* ─────────────────────────────────────────────
   27b. BRAND BADGE — hidden by request.
   The "OpenCMS" pill next to the navbar-brand is no longer wanted.
   CSS guard in case a cached brand_init.js still injects it.
   ───────────────────────────────────────────── */
#oc-brand-badge {
    display: none !important;
}

/* ─────────────────────────────────────────────
   28. CONTEXT WIDGET (dashboard-context module)
   The "OPENCMS" pill that appears in the page-heading nav.
   Override its inline styles so it looks branded on the
   black navbar instead of inheriting a generic blue.
   ───────────────────────────────────────────── */
.context-nav-dropdown {
    margin-left: 1rem;
}

.context-nav-dropdown .context-label {
    color: #ffffff !important;
    font-weight: 500;
}

.context-nav-dropdown .context-select,
nav.navbar select.context-select,
nav.navbar .form-control.context-select {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    border: 1px solid #cc0000 !important;
    border-radius: 999px !important;
    font-weight: 600;
    padding: 0.25rem 0.85rem !important;
    box-shadow: none;
}

.context-nav-dropdown .context-select:focus,
nav.navbar select.context-select:focus {
    border-color: #7b0000 !important;
    box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.30) !important;
    outline: 0;
}

.context-nav-dropdown .context-settings-btn {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

.context-nav-dropdown .context-settings-btn:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.context-nav-dropdown .locked-icon {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   29. CALENDAR — "Today" highlight + provider header
   Calendar dates / time labels keep their default red
   (inherited from the global `a { color: #cc0000 }` rule).
   ───────────────────────────────────────────── */

/* "Today" cell — solid red pill, white text */
td.currentDay,
td.currentDay a,
.currentDay,
.calendar-today,
.today-highlight {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 4px;
}

/* Provider name header bar at top of day/week grid */
.providerheader,
.providerday,
div.providerheader.providerday {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 6px 12px !important;
}

.providerheader .providerXbtn,
.providerheader .userClose {
    color: #ffffff !important;
    opacity: 0.75;
}
.providerheader .providerXbtn:hover,
.providerheader .userClose:hover {
    opacity: 1;
}

/* ─────────────────────────────────────────────
   27. PRINT OVERRIDES – keep clean
   ───────────────────────────────────────────── */
@media print {
    nav.navbar,
    .tabControls,
    #attendantData {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}