/* Global Dashboard Typography — loaded last to win cascade */

/* ── 1. Root token ─────────────────────────────────────────────────── */
:root {
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.6;
}

/* ── 2. Body / general text (16px) ────────────────────────────────── */
body,
.app-default,
p,
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-muted {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* ── 3. Page headings (24px – 32px) ───────────────────────────────── */
h1, h2, .h1, .h2,
.page-title, .app-page-title,
.fs-1, .fs-2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
}

h3, h4, h5, .h3, .h4, .h5,
.fs-3, .fs-4 {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

/* ── 4. Dashboard card numbers (24px – 32px) ──────────────────────── */
.stats-number,
.kpi-number,
.card .card-title h3,
.card-title .fw-bolder,
.fs-2hx {
    font-size: 28px !important;
    line-height: 1.2 !important;
}

/* ── 5. Sidebar / menu text ────────────────────────────────────────── */
/* Note: sidebar.html also has an inline <style> block — both must agree. */
.menu-item .menu-link .menu-title,
.app-sidebar-menu .menu-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.menu-heading {
    font-size: 12px !important;
}

.menu-item .menu-link {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

/* ── 6. Buttons (15px – 16px) ─────────────────────────────────────── */
.btn {
    font-size: 15.5px !important;
    padding: 0.6rem 1.25rem !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
}

/* ── 7. Form labels (15px – 16px) ─────────────────────────────────── */
.form-label,
label {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* ── 8. Input fields (16px) ───────────────────────────────────────── */
.form-control,
.form-select,
.form-control-solid,
.select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.5 !important;
}

.select2-container--bootstrap5 .select2-selection {
    min-height: calc(1.5em + 1.5rem + 2px) !important;
}

/* ── 9. Table text (14px – 15px) ──────────────────────────────────── */
.table,
.table th,
.table td,
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > th {
    font-size: 14.5px !important;
    padding: 0.85rem 1.15rem !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

.table th {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── 10. Modals & dropdowns (16px) ────────────────────────────────── */
.modal-body,
.dropdown-menu .dropdown-item {
    font-size: 16px !important;
}


/* ── 11. Card body spacing ────────────────────────────────────────── */
.card-body,
.card .card-body {
    padding: 1.5rem 1.75rem !important;
}

.stats-card {
    min-height: 110px;
}

.icon-card {
    padding: 14px !important;
    justify-content: center !important;
}

.icon-card .icon-wrapper {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.icon-card .icon-wrapper img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── 12. Dashboard component classes (override rem-based rules) ────── */

/* Chart card headers */
.chart-card-title {
    font-size: 15px !important;
}

.chart-card-subtitle {
    font-size: 13px !important;
}

/* Period switcher buttons */
.period-switcher button {
    font-size: 12.5px !important;
}

/* KPI cards */
.kpi-label {
    font-size: 13px !important;
}

/* Finance rows */
.fin-label {
    font-size: 14px !important;
}

.fin-value {
    font-size: 14.5px !important;
}

/* Quick-nav links */
.qnav-text {
    font-size: 15px !important;
}

/* Icon dashboard cards */
.icon-card-title {
    font-size: 14.5px !important;
}

/* Stats labels */
.stats-label {
    font-size: 14px !important;
}

/* Dashboard welcome / description text */
.welcome-text p,
.hospital-description {
    font-size: 15px !important;
}

/* Nav pill labels */
.nav-pills .nav-link small {
    font-size: 14px !important;
}

/* ── 13. Bootstrap/Metronic fs-* utility size floors ──────────────── */
/*
   Metronic defines fs-5 through fs-9 with !important at very small rem
   values.  These overrides raise the floor so detail pages, breadcrumbs,
   badges, and any inline fs-* class are still legible.
   fs-1 through fs-4 are already overridden above (sections 3-4).
*/
.fs-5           { font-size: 16px !important; }
.fs-6           { font-size: 15px !important; }
.fs-7           { font-size: 14px !important; }
.fs-8           { font-size: 13px !important; }
.fs-9           { font-size: 12px !important; }

/* breadcrumbs use fs-7 — keep them readable */
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.text-muted {
    font-size: 14px !important;
}

/* badges throughout detail pages */
.badge {
    font-size: 13px !important;
    padding: 0.4em 0.75em !important;
}

/* ── 14. Responsive adjustments ───────────────────────────────────── */
@media (max-width: 992px) {
    body, p { font-size: 15px !important; }
    .table th, .table td,
    table.dataTable > tbody > tr > td,
    table.dataTable > thead > tr > th {
        font-size: 13.5px !important;
        padding: 0.65rem 0.85rem !important;
    }
    .btn {
        font-size: 14px !important;
        padding: 0.5rem 1rem !important;
    }
    .stats-number, .kpi-number { font-size: 24px !important; }
    h1, h2, .h1, .h2 { font-size: 22px !important; }
    .fs-6 { font-size: 14px !important; }
    .fs-7 { font-size: 13px !important; }
    .fs-8 { font-size: 12px !important; }
    .breadcrumb-item, .breadcrumb-item a { font-size: 13px !important; }
}

@media (max-width: 576px) {
    body, p { font-size: 14px !important; }
    .menu-item .menu-link .menu-title { font-size: 14px !important; }
    .form-label, label { font-size: 14px !important; }
    .stats-number, .kpi-number { font-size: 22px !important; }
    h1, h2, .h1, .h2 { font-size: 20px !important; }
}