/* ============================================================
   CliniSys Theme — single source of truth for the UI
   Loaded globally via <x-mobile-responsive /> (all app pages).

   - Overrides the per-file token duplicates in staff/shared.css,
     admin/shared.css, etc. (":root:root" wins the cascade
     regardless of stylesheet load order).
   - Wrapped in @media screen so the print views keep their
     plain black-and-white look.
   ============================================================ */

@media screen {

    /* ---------- 1. Design tokens ---------- */
    :root:root {
        /* Brand — medical teal (replaces default Bootstrap blue) */
        --cs-primary: #0f766e;
        --cs-primary-hover: #0c5f59;
        --cs-primary-soft: #e6f4f3;
        /* Channels of --cs-primary, so .bg-primary can honour --bs-bg-opacity
           the way Bootstrap's own utilities expect. Keep in sync with the hex. */
        --cs-primary-rgb: 15, 118, 110;

        /* One green, one red, readable amber */
        --cs-success: #16a34a;
        --cs-success-hover: #128a3f;
        --cs-danger: #dc2626;
        --cs-danger-hover: #b91c1c;
        --cs-warning: #b45309;
        --cs-warning-soft: #fef3c7;
        --cs-info: #0369a1;
        --cs-info-soft: #e0f2fe;

        /* Ink & surfaces */
        --cs-ink: #1f2937;
        --cs-ink-muted: #5b6472;
        --cs-surface: #f8fafc;
        --cs-card: #ffffff;
        --cs-border: #e5e7eb;

        --cs-radius: 10px;
        --cs-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
        --cs-shadow-lg: 0 10px 24px rgba(16, 24, 40, .10);
        --cs-ring: 0 0 0 .2rem rgba(15, 118, 110, .22);

        --cs-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

        /* Re-map the legacy tokens that page CSS already consumes,
           so old var(--primary-color) usages pick up the brand. */
        --primary-color: var(--cs-primary);
        --primary-hover: var(--cs-primary-hover);
        --success-color: var(--cs-success);
        --warning-color: var(--cs-warning);
        --danger-color: var(--cs-danger);
        --bg-light: var(--cs-surface);
        --card-bg: var(--cs-card);
        --shadow-light: var(--cs-shadow);
        --border-radius: var(--cs-radius);
    }

    /* ---------- 2. Base typography ---------- */
    html body {
        font-family: var(--cs-font);
        color: var(--cs-ink);
        background-color: var(--cs-surface);
    }

    html body .page-title {
        color: var(--cs-ink);
        font-weight: 700;
    }

    html body .page-title i {
        color: var(--cs-primary);
    }

    /* ---------- 3. Buttons (Bootstrap 5.3 component vars + fallbacks) ---------- */
    .btn {
        border-radius: 8px;
        font-weight: 500;
    }

    .btn-primary {
        --bs-btn-bg: var(--cs-primary);
        --bs-btn-border-color: var(--cs-primary);
        --bs-btn-hover-bg: var(--cs-primary-hover);
        --bs-btn-hover-border-color: var(--cs-primary-hover);
        --bs-btn-active-bg: var(--cs-primary-hover);
        --bs-btn-active-border-color: var(--cs-primary-hover);
        --bs-btn-disabled-bg: var(--cs-primary);
        --bs-btn-disabled-border-color: var(--cs-primary);
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--cs-primary-hover);
        border-color: var(--cs-primary-hover);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--cs-primary);
        --bs-btn-border-color: var(--cs-primary);
        --bs-btn-hover-bg: var(--cs-primary);
        --bs-btn-hover-border-color: var(--cs-primary);
        --bs-btn-active-bg: var(--cs-primary);
        --bs-btn-active-border-color: var(--cs-primary);
        color: var(--cs-primary);
        border-color: var(--cs-primary);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:active {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
        color: #fff;
    }

    .btn-success {
        --bs-btn-bg: var(--cs-success);
        --bs-btn-border-color: var(--cs-success);
        --bs-btn-hover-bg: var(--cs-success-hover);
        --bs-btn-hover-border-color: var(--cs-success-hover);
        --bs-btn-active-bg: var(--cs-success-hover);
        --bs-btn-active-border-color: var(--cs-success-hover);
        background-color: var(--cs-success);
        border-color: var(--cs-success);
    }

    .btn-success:hover,
    .btn-success:active {
        background-color: var(--cs-success-hover);
        border-color: var(--cs-success-hover);
    }

    .btn-danger {
        --bs-btn-bg: var(--cs-danger);
        --bs-btn-border-color: var(--cs-danger);
        --bs-btn-hover-bg: var(--cs-danger-hover);
        --bs-btn-hover-border-color: var(--cs-danger-hover);
        background-color: var(--cs-danger);
        border-color: var(--cs-danger);
    }

    .btn-danger:hover,
    .btn-danger:active {
        background-color: var(--cs-danger-hover);
        border-color: var(--cs-danger-hover);
    }

    /* ---------- 4. Links, text & background utilities ---------- */
    a {
        color: var(--cs-primary);
    }

    a:hover {
        color: var(--cs-primary-hover);
    }

    .text-primary {
        color: var(--cs-primary) !important;
    }

    /* Mirrors Bootstrap's own .bg-primary so the bg-opacity-* utilities keep
       working. A flat background-color discarded --bs-bg-opacity entirely, which
       turned "bg-primary bg-opacity-10 text-primary" into teal text on a solid
       teal block. Do NOT re-declare --bs-bg-opacity here: this file loads after
       Bootstrap, so it would beat .bg-opacity-10 and reintroduce the bug. */
    .bg-primary {
        background-color: rgba(var(--cs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
    }

    .border-primary {
        border-color: var(--cs-primary) !important;
    }

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

    /* ---------- 5. Forms & focus ---------- */
    .form-control,
    .form-select {
        border-radius: 8px;
        border-color: var(--cs-border);
    }

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

    .form-check-input:checked {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
    }

    .btn:focus-visible,
    a:focus-visible {
        outline: none;
        box-shadow: var(--cs-ring);
    }

    /* ---------- 6. Cards ---------- */
    .card {
        border: 1px solid var(--cs-border);
        border-radius: var(--cs-radius);
        box-shadow: var(--cs-shadow);
    }

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

    /* ---------- 7. Tables ---------- */
    .table {
        --bs-table-hover-bg: rgba(15, 118, 110, .045);
        color: var(--cs-ink);
    }

    .table thead th {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 600;
        color: var(--cs-ink-muted);
        background-color: var(--cs-surface);
        border-bottom: 2px solid var(--cs-border);
        white-space: nowrap;
    }

    /* Sticky headers: harmless when the wrapper doesn't scroll,
       keeps headers visible when it does. */
    .table-responsive .table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .table tbody tr:hover {
        background-color: rgba(15, 118, 110, .045);
    }

    .table td {
        vertical-align: middle;
    }

    /* Right-aligned, tabular numerals for quantity/price columns */
    .text-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* ---------- 8. Badges — pill grammar ---------- */
    .badge {
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: .01em;
        padding: .38em .75em;
    }

    .badge.bg-primary {
        background-color: var(--cs-primary) !important;
    }

    .badge.bg-success {
        background-color: var(--cs-success) !important;
    }

    .badge.bg-danger {
        background-color: var(--cs-danger) !important;
    }

    /* Readable warning badge (amber text on soft amber, not black-on-yellow) */
    .badge.bg-warning {
        background-color: var(--cs-warning-soft) !important;
        color: var(--cs-warning) !important;
    }

    .badge.bg-info {
        background-color: var(--cs-info-soft) !important;
        color: var(--cs-info) !important;
    }

    /* ---------- 9. Modals ---------- */
    .modal-content {
        border: none;
        border-radius: var(--cs-radius);
        box-shadow: var(--cs-shadow-lg);
    }

    .modal-header {
        border-bottom: 1px solid var(--cs-border);
    }

    .modal-header .modal-title {
        font-weight: 600;
    }

    .modal-footer {
        border-top: 1px solid var(--cs-border);
    }

    /* ---------- 10. Alerts ---------- */
    .alert {
        border-radius: var(--cs-radius);
        border-width: 1px;
    }

    .alert-warning {
        color: var(--cs-warning);
        background-color: var(--cs-warning-soft);
        border-color: #fde68a;
    }

    /* ---------- 11. Sidebar (both staff & admin variants) ----------
       Active page = solid blue pill with white text, everywhere.
       Selectors are deliberately more specific than the sidebars' own
       CSS (inline <style> blocks and sidebar.css) so this wins the
       cascade for both variants. No border-left accents and no hover
       translateX — those pushed the highlight outside its container. */
    :root:root {
        --cs-nav-active: #007bff;
        --cs-nav-active-soft: rgba(0, 123, 255, .10);
    }

    #sidebar.sidebar {
        background-color: var(--cs-card);
        border-right: 1px solid var(--cs-border);
    }

    #sidebar.sidebar .nav-link,
    #sidebar.sidebar .dropdown-item {
        color: var(--cs-ink-muted);
        border-radius: 8px;
    }

    #sidebar.sidebar .nav {
        width: 100%;
        min-width: 0;
    }

    #sidebar.sidebar .nav-link,
    #sidebar.sidebar .dropdown-item,
    #sidebar.sidebar .section-items .nav-link {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
        max-width: 100%;
    }

    /* Chevrons never shrink or slide under the edge. */
    #sidebar.sidebar .section-arrow,
    #sidebar.sidebar .dropdown-arrow,
    #sidebar.sidebar .inventory-dropdown-arrow {
        flex-shrink: 0;
        margin-left: auto;
        padding-left: .5rem;
    }

    /* Keep every item inside its container: no hover slide anywhere. */
    #sidebar.sidebar .nav-link:hover,
    #sidebar.sidebar .dropdown-item:hover,
    #sidebar.sidebar .section-items .nav-link:hover {
        transform: none;
        color: var(--cs-nav-active);
        background-color: var(--cs-nav-active-soft);
    }

    /* One blue active style for every sidebar item — top-level links,
       collapsible section items, and submenu dropdown items alike. */
    #sidebar.sidebar .nav-link.active,
    #sidebar.sidebar .dropdown-item.active,
    #sidebar.sidebar .section-items .nav-link.active {
        background-color: var(--cs-nav-active) !important;
        color: #fff !important;
        font-weight: 600;
    }

    #sidebar.sidebar .nav-link.active i,
    #sidebar.sidebar .dropdown-item.active i,
    #sidebar.sidebar .section-items .nav-link.active i {
        color: #fff !important;
    }

    /* Section headers (ADMINISTRATION / CLINIC OPERATIONS / INVENTORY)
       stay muted labels — never painted like active pages. */
    #sidebar.sidebar .section-toggle,
    #sidebar.sidebar .section-toggle:hover {
        background-color: transparent;
        color: var(--cs-ink-muted);
        transform: none;
    }

    /* Pending-count pill used in the sidebars */
    .sidebar-count {
        display: inline-block;
        min-width: 1.5em;
        margin-left: .35em;
        padding: .1em .5em;
        border-radius: 999px;
        background-color: var(--cs-danger);
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.4;
    }

    /* ---------- 12. Empty states ---------- */
    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--cs-ink-muted);
    }

    .empty-state i {
        font-size: 2.25rem;
        color: var(--cs-border);
        display: block;
        margin-bottom: .75rem;
    }

    .empty-state .empty-title {
        font-weight: 600;
        color: var(--cs-ink);
        margin-bottom: .25rem;
    }

    /* ---------- 13. Scrollbars (subtle, WebKit) ---------- */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* ---------- 14. Pagination ---------- */
    .page-link {
        color: var(--cs-primary);
    }

    .page-item.active .page-link {
        background-color: var(--cs-primary);
        border-color: var(--cs-primary);
    }
}