/* ==========================================================================
   MedEzee brand — component rules  ·  BRAND-01(c)
   --------------------------------------------------------------------------
   Load position: LAST. After Skote's app.min.css and after custom/css/medezee.css.
   Tokens live in medezee-brand-tokens.css, which loads FIRST. Do not merge.

   NOT in this file (deliberately, they belong to later tickets):
     · sidebar / app shell  → BRAND-04
     · auth card surfaces   → BRAND-06
     · shift + role chips   → BRAND-09
   ========================================================================== */

/* ==========================================================================
   1a. Bootstrap 5 / Skote :root bridge
   --------------------------------------------------------------------------
   CORRECTION TO BRAND-01: the ticket puts this block in medezee-brand-tokens.css
   (loaded first). That does not work. Skote's assets/css/bootstrap.min.css
   declares --bs-primary:#556ee6 on :root and loads AFTER the tokens file; two
   :root declarations tie on specificity, so Skote wins and the bridge is dead.
   Verified in the browser 07-Aug-2026 — getComputedStyle reported #556ee6.

   The bridge therefore lives here, in the sheet that loads last.

   What this block actually buys: only the components that read var(--bs-primary)
   directly — the colour UTILITIES (.text-primary, .bg-primary, .border-primary,
   .link-primary) plus body colour/bg and border-color. Everything else needs
   section 1b below.
   ========================================================================== */

:root {
    --bs-primary:            #4F46E5;
    --bs-primary-rgb:        79, 70, 229;
    --bs-secondary:          #059669;
    --bs-secondary-rgb:      5, 150, 105;
    --bs-success:            #059669;
    --bs-success-rgb:        5, 150, 105;
    --bs-warning:            #D97706;
    --bs-warning-rgb:        217, 119, 6;
    --bs-danger:             #DC2626;
    --bs-danger-rgb:         220, 38, 38;
    --bs-info:               #4F46E5;
    --bs-info-rgb:           79, 70, 229;
    --bs-body-color:         #334155;
    --bs-body-color-rgb:     51, 65, 85;
    --bs-body-bg:            #F8FAFC;
    --bs-body-bg-rgb:        248, 250, 252;
    --bs-border-color:       #E2E8F0;
    --bs-link-color:         #4F46E5;
    --bs-link-color-rgb:     79, 70, 229;
    --bs-link-hover-color:   #4338CA;
    --bs-body-font-family:   var(--font-family-main);
    --bs-body-font-size:     .875rem;
    --bs-border-radius:      .5rem;
}

/* ==========================================================================
   1b. Bootstrap COMPONENT bridge
   --------------------------------------------------------------------------
   Bootstrap 5.3.2 compiles every component variant with LITERAL HEX in a
   component-scoped variable, e.g.
       .btn-primary  { --bs-btn-bg:#556ee6 }
       .nav-pills    { --bs-nav-pills-link-active-bg:#556ee6 }
       .pagination   { --bs-pagination-active-bg:#556ee6 }
   Those ignore --bs-primary entirely. Because the declaration sits on the
   component selector, even a correctly-ordered :root override can never win —
   it has to be redeclared at the same selector, from a file that loads after
   Skote. That is what this section does. It is still one place, not N rulesets.
   ========================================================================== */

.btn-primary {
    --bs-btn-bg: var(--me-primary);
    --bs-btn-border-color: var(--me-primary);
    --bs-btn-hover-bg: var(--me-primary-hover);
    --bs-btn-hover-border-color: var(--me-primary-hover);
    --bs-btn-active-bg: var(--me-primary-deep);
    --bs-btn-active-border-color: var(--me-primary-deep);
    --bs-btn-disabled-bg: var(--me-primary);
    --bs-btn-disabled-border-color: var(--me-primary);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-primary {
    --bs-btn-color: var(--me-primary);
    --bs-btn-border-color: var(--me-primary);
    --bs-btn-hover-bg: var(--me-primary);
    --bs-btn-hover-border-color: var(--me-primary);
    --bs-btn-active-bg: var(--me-primary-deep);
    --bs-btn-active-border-color: var(--me-primary-deep);
    --bs-btn-disabled-color: var(--me-primary);
    --bs-btn-disabled-border-color: var(--me-primary);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-success {
    --bs-btn-bg: var(--me-success);
    --bs-btn-border-color: var(--me-success);
    --bs-btn-hover-bg: var(--me-success-text);
    --bs-btn-hover-border-color: var(--me-success-text);
    --bs-btn-active-bg: var(--me-success-text);
    --bs-btn-active-border-color: var(--me-success-text);
    --bs-btn-disabled-bg: var(--me-success);
    --bs-btn-disabled-border-color: var(--me-success);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--me-warning);
    --bs-btn-border-color: var(--me-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--me-warning-text);
    --bs-btn-hover-border-color: var(--me-warning-text);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--me-warning-text);
    --bs-btn-active-border-color: var(--me-warning-text);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--me-warning);
    --bs-btn-disabled-border-color: var(--me-warning);
}

.btn-danger {
    --bs-btn-bg: var(--me-danger);
    --bs-btn-border-color: var(--me-danger);
    --bs-btn-hover-bg: var(--me-danger-text);
    --bs-btn-hover-border-color: var(--me-danger-text);
    --bs-btn-active-bg: var(--me-danger-text);
    --bs-btn-active-border-color: var(--me-danger-text);
    --bs-btn-disabled-bg: var(--me-danger);
    --bs-btn-disabled-border-color: var(--me-danger);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--me-primary);
}

.pagination {
    --bs-pagination-color: var(--me-primary);
    --bs-pagination-hover-color: var(--me-primary-hover);
    --bs-pagination-active-bg: var(--me-primary);
    --bs-pagination-active-border-color: var(--me-primary);
    --bs-pagination-focus-color: var(--me-primary-hover);
}

.list-group {
    --bs-list-group-active-bg: var(--me-primary);
    --bs-list-group-active-border-color: var(--me-primary);
    --bs-list-group-action-active-bg: var(--me-bg);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--me-primary);
    --bs-dropdown-link-active-color: #fff;
}

.progress {
    --bs-progress-bar-bg: var(--me-primary);
}

/* Form controls compile the checked/focus colour as literal hex too. */
.form-check-input:checked {
    background-color: var(--me-primary);
    border-color: var(--me-primary);
}

.form-check-input:focus {
    border-color: var(--me-primary);
    box-shadow: var(--me-focus-ring);
}

.form-switch .form-check-input:focus {
    border-color: var(--me-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--me-primary);
    box-shadow: var(--me-focus-ring);
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body {
    font-family: var(--font-family-main);
    color: var(--me-body);
    background-color: var(--me-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-main);
    font-weight: 600;
    color: var(--me-ink);
}

a {
    color: var(--me-primary);
}

a:hover,
a:focus {
    color: var(--me-primary-hover);
}

.text-muted {
    color: var(--me-muted) !important;
}

/* Figures must align in every amount column — Billing, IPD, Payments, reports.
   Apply .num to any cell or span holding a quantity or currency value. */
.num,
.text-num,
td.num,
th.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
}

/* ==========================================================================
   3. Brand lockup
   --------------------------------------------------------------------------
   .brand-ezee is the ON-LIGHT emerald. On the dark shell it must switch to
   --me-sidebar-ezee (#34D399) — #059669 does not reach AA on #0F172A.
   That override ships with BRAND-04.
   ========================================================================== */

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1;
}

.brand-logo:hover,
.brand-logo:focus {
    text-decoration: none;
}

.brand-logo img {
    display: block;
    height: 32px;
    width: auto;
}

.brand-med {
    color: var(--me-primary);
}

.brand-ezee {
    color: var(--me-secondary);
}

/* ==========================================================================
   4. Brand buttons
   --------------------------------------------------------------------------
   One primary CTA per screen. .btn-ezee-secondary is a SECONDARY action —
   never use it as the only call to action on a page, and never on auth.
   ========================================================================== */

.btn-med-primary {
    color: #fff;
    background-color: var(--me-primary);
    border: 1px solid var(--me-primary);
    border-radius: var(--me-radius);
    font-weight: 600;
}

.btn-med-primary:hover,
.btn-med-primary:focus {
    color: #fff;
    background-color: var(--me-primary-hover);
    border-color: var(--me-primary-hover);
}

.btn-med-primary:active {
    color: #fff;
    background-color: var(--me-primary-deep);
    border-color: var(--me-primary-deep);
}

.btn-med-primary:disabled,
.btn-med-primary.disabled {
    background-color: var(--me-primary);
    border-color: var(--me-primary);
    opacity: .55;
}

.btn-ezee-secondary {
    color: #fff;
    background-color: var(--me-secondary);
    border: 1px solid var(--me-secondary);
    border-radius: var(--me-radius);
    font-weight: 600;
}

.btn-ezee-secondary:hover,
.btn-ezee-secondary:focus {
    color: #fff;
    background-color: var(--me-success-text);
    border-color: var(--me-success-text);
}

.btn-med-outline {
    color: var(--me-primary);
    background-color: transparent;
    border: 1px solid var(--me-primary);
    border-radius: var(--me-radius);
    font-weight: 600;
}

.btn-med-outline:hover,
.btn-med-outline:focus {
    color: #fff;
    background-color: var(--me-primary);
    border-color: var(--me-primary);
}

/* ==========================================================================
   5. Focus
   --------------------------------------------------------------------------
   :focus-visible only — a visible ring on every mouse click is noise. Keyboard
   traversal must always show focus (BRAND-16 acceptance).
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--me-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--me-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   6. Surfaces
   ========================================================================== */

.card {
    background-color: var(--me-surface);
    border: 1px solid var(--me-line);
    border-radius: var(--me-radius-lg);
    box-shadow: var(--me-shadow-sm);
}

.card-header {
    background-color: var(--me-surface);
    border-bottom: 1px solid var(--me-line);
    font-weight: 600;
    color: var(--me-ink);
}

.table {
    --bs-table-border-color: var(--me-line);
}

/* ==========================================================================
   7. Status badges  ·  groundwork for BRAND-08
   --------------------------------------------------------------------------
   Tint background + dark text + 1px border. The text colour is always the
   *-text token, never the base token — badge captions are small text and the
   base tokens fail AA below 24px.

   EVERY badge must carry a text label. Colour alone is not a status.
   ========================================================================== */

.me-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: var(--me-radius-sm);
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.me-badge-success {
    color: var(--me-success-text);
    background-color: #ECFDF5;
    border-color: #A7F3D0;
}

.me-badge-warning {
    color: var(--me-warning-text);
    background-color: #FFFBEB;
    border-color: #FDE68A;
}

.me-badge-danger {
    color: var(--me-danger-text);
    background-color: #FEF2F2;
    border-color: #FECACA;
}

.me-badge-info {
    color: var(--me-info-text);
    background-color: #EEF2FF;
    border-color: #C7D2FE;
}

.me-badge-approval {
    color: #6D28D9;
    background-color: #F5F3FF;
    border-color: #DDD6FE;
}

.me-badge-neutral {
    color: #475569;
    background-color: #F1F5F9;
    border-color: var(--me-line);
}

.me-badge-frozen {
    color: #3730A3;
    background-color: #EEF2FF;
    border-color: #C7D2FE;
}

/* ==========================================================================
   8. Callouts
   ========================================================================== */

.ainote {
    background-color: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-left: 4px solid var(--me-primary);
    border-radius: var(--me-radius);
    padding: .65rem .9rem;
    font-size: .85rem;
    color: var(--me-body);
}

.note-warn {
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 4px solid var(--me-warning);
    border-radius: var(--me-radius);
    padding: .65rem .9rem;
    font-size: .85rem;
    color: var(--me-body);
}

/* ==========================================================================
   9. Print
   --------------------------------------------------------------------------
   Scope note: this is the app's generic print stylesheet — internal reports,
   list screens, roster/muster packs. It must NOT be relied on to style the
   patient bill/invoice, QR bill landing pages or their PDFs. Those stay on
   TENANT branding per BR-3 and are handled in BRAND-13.
   ========================================================================== */

@media print {
    body {
        background: #fff;
        color: #000;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    .me-badge {
        border: 1px solid #999;
        color: #000;
        background: transparent;
    }

    a[href]::after {
        content: "";
    }

    .no-print,
    .btn,
    .vertical-menu,
    #page-topbar,
    .right-bar {
        display: none !important;
    }
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keep wide hospital logos within the 250px navigation brand box. */
.navbar-brand-box img { max-width: 160px; object-fit: contain; }

/* The collapsed 70px box retains 24px padding on each side. */
.navbar-brand-box .logo-sm img { max-width: 22px; }