/*
 * Shared readability layer. Loaded after base, module and page styles so
 * component-specific micro typography cannot make core content inaccessible.
 */
:root {
    --font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-sans: var(--font-family);
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --type-body: var(--font-size-base);
    --type-content: var(--font-size-base);
    --type-secondary: var(--font-size-sm);
    --type-label: 14px;
    --type-page-heading: var(--font-size-2xl);
    --type-section-heading: var(--font-size-lg);
    --type-kpi: 28px;
    --type-table: var(--font-size-sm);
    --type-control: var(--font-size-base);
    --line-body: 1.5;
    --line-compact: 1.35;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}
html { font-size: 15px; }
body,
button,
input,
select,
textarea {
    font-family: var(--font-sans) !important;
}
body {
    font-size: var(--type-body) !important;
    line-height: var(--line-body);
}

/* Enforce the brief's minimum text size even inside legacy module selectors. */
.content-wrapper :where(p, span, small, .small, label, li, a, td, th, button, input, select, textarea, figcaption, time, summary, dt, dd, output) {
    font-size: clamp(14px, 1em, 16px) !important;
    line-height: 1.4 !important;
}
.content-wrapper :where(h1, h2, h3, h4, h5, h6) :where(span, small) {
    font-size: inherit !important;
    line-height: inherit !important;
}
.modal-content {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: var(--line-body);
}
.modal-title { font-size: var(--type-section-heading); line-height: 1.3; }
.modal-body :where(p, span, small, .small, label, li, a, td, th, button, input, select, textarea, figcaption) {
    font-size: clamp(14px, 1em, 16px) !important;
    line-height: 1.4 !important;
}
.modal-body :where(h1, h2, h3, h4, h5, h6) :where(span, small) {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* General page hierarchy and prose */
.content-wrapper,
.content-wrapper .container,
.main-shell,
.card,
.card-body,
.card-header,
.alert,
.dropdown-menu,
.dropdown-item,
.form-text,
.text-muted,
.page-header p {
    line-height: var(--line-body);
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6,
.dashboard-heading h1,
.reports-heading h2,
.operations-heading h2,
.data-page-header h2 {
    font-size: var(--type-page-heading) !important;
    line-height: 1.2 !important;
}
h1, h2, h3, h4, h5, h6,
.card-header,
.panel-heading h2,
.reports-section-heading h3,
.operations-title-row h3,
.data-section-heading h3,
.report-panel-heading h3,
.settings-card-header {
    line-height: 1.3;
}
.panel-heading h2,
.reports-section-heading h3,
.operations-title-row h3,
.data-section-heading h3,
.report-panel-heading h3,
.settings-card-header,
.card-header {
    font-size: var(--type-section-heading) !important;
}

/* App navigation and supporting labels */
.side-link,
.sidebar-user-copy strong,
.sidebar-logout,
.profile-copy strong,
.nav-link,
.dropdown-item,
.sidebar-promo strong {
    font-size: 15px !important;
    line-height: 1.4 !important;
}
.side-link {
    white-space: nowrap !important;
    overflow: visible;
}
.side-link span {
    min-width: 0;
    line-height: 1.35 !important;
}
.sidebar-caption,
.brand-copy small,
.sidebar-promo small,
.sidebar-user-copy small,
.profile-copy small,
.rate-label,
.topbar-rate-change,
.demo-mode-banner strong,
.demo-mode-banner a {
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.global-search input,
.global-search kbd,
.gold-rate-pill strong,
.silver-rate-pill strong {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* Summary values and dashboard content */
.stat-card .stat-value,
.kpi-value,
.gold-rate-main > strong {
    font-size: clamp(26px, 2vw, 30px) !important;
    line-height: 1.15 !important;
}
.stat-card .stat-label,
.kpi-label,
.kpi-note,
.kpi-mark,
.dashboard-eyebrow,
.panel-kicker,
.panel-link,
.dashboard-heading p,
.dashboard-date strong,
.dashboard-date small,
.rate-meta,
.rate-change,
.status-legend > span,
.status-legend strong,
.status-chart-center small,
.chart-legend,
.chart-range-filter button,
.loan-step,
.quick-loan-copy,
.quick-input-grid label,
.quick-results span,
.quick-results strong,
.quick-loan-cta,
.customer-info strong,
.customer-info span,
.customer-info small,
.customer-tabs button,
.customer-metric span,
.customer-metric strong,
.customer-mini-row,
.customer-mini-row strong,
.customer-panel-empty,
.report-period,
.report-tabs a,
.report-tabs span,
.report-metric span,
.report-metric strong,
.report-chart-controls button,
.dashboard-empty strong,
.dashboard-empty span,
.compact-empty,
.chart-empty,
.table-empty {
    line-height: var(--line-compact) !important;
}
.stat-card .stat-label,
.kpi-label,
.kpi-note,
.dashboard-eyebrow,
.panel-kicker,
.dashboard-heading p,
.dashboard-date small,
.rate-meta,
.status-legend > span,
.status-chart-center small,
.chart-legend,
.quick-loan-copy,
.quick-input-grid label,
.quick-results span,
.customer-info span,
.customer-info small,
.customer-metric span,
.customer-mini-row,
.customer-panel-empty,
.report-period,
.report-tabs a,
.report-tabs span,
.report-metric span,
.dashboard-empty span,
.chart-empty,
.table-empty {
    font-size: var(--type-secondary) !important;
}
.dashboard-heading p { font-size: 14px !important; }
.kpi-label,
.stat-card .stat-label { font-size: 14px !important; }
.status-chart-center strong { font-size: 22px !important; }
.kpi-value small,
.status-legend strong,
.customer-info strong,
.customer-metric strong,
.customer-mini-row strong,
.report-metric strong,
.dashboard-empty strong,
.quick-results strong {
    font-size: 14px !important;
}
.panel-link,
.quick-loan-cta,
.report-chart-controls button,
.customer-tabs button,
.chart-range-filter button {
    font-size: 14px !important;
    min-height: 40px;
}
.dashboard-new-loan { min-height: 42px; font-size: 15px !important; }
.panel-link,
.quick-loan-cta { display: inline-flex; align-items: center; }
.loan-more-button { min-width: 40px; min-height: 40px; }

/* Tables: keep dense records legible and allow horizontal scrolling. */
.table,
.table td,
.table tbody td,
.reports-table,
.reports-table tbody td,
.operations-table,
.operations-table tbody td,
.settings-history-table td,
.data-history-table,
.data-history-table tbody td,
.recent-panel .table,
.recent-panel .table td {
    font-size: var(--type-table) !important;
    line-height: 1.4 !important;
}
.table th,
.table thead th,
.reports-table thead th,
.operations-table thead th,
.settings-history-table thead th,
.data-history-table thead th,
.recent-panel .table thead th {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.table td,
.reports-table tbody td,
.operations-table tbody td,
.settings-history-table td,
.data-history-table tbody td,
.recent-panel .table td {
    padding: 9px 12px !important;
}
.table-responsive,
.recent-panel .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.recent-panel .table,
.reports-table,
.operations-table,
.settings-history-table,
.data-history-table {
    min-width: 620px;
}
.badge,
.status-tag,
.payment-tag,
.report-status,
.report-mode,
.overdue-days,
.record-badge,
.record-status,
.demo-status-pill,
.backup-status-tag,
.audit-action-tag {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Forms, buttons and tappable controls */
.form-label,
.form-check-label,
.reports-filter-form label span,
.operation-field > span,
.operation-checkbox,
.data-clear-form label,
.reset-field label,
.settings-field .form-label,
.rate-reason-field .form-label {
    font-size: var(--type-label) !important;
    line-height: 1.4 !important;
}
.form-control,
.form-select,
.input-group-text,
.reports-filter-form input,
.operation-field input,
.operation-field select,
.operation-field textarea,
.data-confirm-row .form-control,
.reset-field .form-control,
.quick-input-grid input {
    min-height: 44px;
    font-size: var(--type-control) !important;
    line-height: 1.4 !important;
}
textarea.form-control,
.operation-field textarea {
    min-height: 96px;
}
.btn,
.btn-gold,
.btn-brand,
.btn-outline-gold,
.reports-tab,
.operations-tab,
.reports-manage-link,
.operations-report-link {
    min-height: 40px;
    font-size: 15px !important;
    line-height: 1.35 !important;
}
.btn-sm {
    min-height: 38px;
    font-size: 14px !important;
}
.content-wrapper button,
.modal button { min-height: 40px; }
.form-text,
.settings-section-intro,
.settings-inline-note,
.settings-toggle-row small,
.settings-card-footer,
.report-empty,
.report-empty strong,
.report-empty span,
.reports-disclosure,
.record-only-notice,
.data-info-callout,
.backup-safety-note,
.reset-backup-ready,
.data-empty-state,
.data-empty-state strong,
.data-empty-state span {
    font-size: var(--type-secondary) !important;
    line-height: var(--line-body) !important;
}

/* Report-specific hierarchy and chart annotation sizes */
.reports-heading h2 { font-size: var(--type-page-heading) !important; line-height: 1.2 !important; }
.reports-section-heading h3,
.report-panel-heading h3 { font-size: var(--type-section-heading) !important; line-height: 1.3 !important; }
.reports-heading p,
.reports-eyebrow,
.reports-section-heading p,
.report-panel-heading p,
.reports-period,
.report-chip,
.report-summary-copy small,
.report-truncation {
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.report-summary-copy strong { font-size: 20px !important; line-height: 1.25 !important; }

@media (max-width: 820px) {
    .side-link { min-height: 44px; font-size: 15px !important; }
    .sidebar-caption,
    .sidebar-user-copy small,
    .sidebar-promo small { font-size: 13px !important; }
}
@media (max-width: 560px) {
    .page-header h1,
    .page-header h2,
    .dashboard-heading h1,
    .reports-heading h2,
    .operations-heading h2,
    .data-page-header h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    .dashboard-heading,
    .reports-heading,
    .operations-heading { flex-wrap: wrap; }
    .dashboard-heading p { font-size: 14px !important; line-height: 1.45 !important; }
    .reports-heading p,
    .operations-heading p { font-size: 13px !important; line-height: 1.45 !important; }
    .table,
    .recent-panel .table { min-width: 900px; }
    .recent-panel:nth-child(2) .table { min-width: 680px; }
    .topbar { min-height: 60px; }
    .gold-rate-pill strong,
    .silver-rate-pill strong { font-size: 14px !important; }
    .gold-rate-pill .rate-label,
    .silver-rate-pill .rate-label { font-size: 13px !important; }
    .demo-mode-banner { font-size: 14px !important; line-height: 1.4 !important; }
    .demo-mode-banner strong,
    .demo-mode-banner a { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .table-hover tbody tr { transform: none !important; }
}

/* Shell and module fit safeguards shared by pages without custom grid rules. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}
.main-shell,
.topbar,
.topbar-actions,
.content-wrapper,
.content-wrapper > .container,
.content-wrapper .card,
.content-wrapper .card-body,
.content-wrapper .card-header,
.content-wrapper .row > *,
.content-wrapper form,
.content-wrapper fieldset {
    min-width: 0;
}
.topbar { width: 100%; }
.topbar-actions { flex-wrap: nowrap; }
.global-search { min-width: 0; }
.content-wrapper table { max-width: 100%; }
.content-wrapper .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.content-wrapper .page-header,
.content-wrapper .reports-heading,
.content-wrapper .operations-heading,
.content-wrapper .data-page-header,
.content-wrapper .reports-section-heading,
.content-wrapper .operations-title-row {
    min-width: 0;
    flex-wrap: wrap;
}
.content-wrapper .form-control,
.content-wrapper .form-select,
.content-wrapper input,
.content-wrapper select,
.content-wrapper textarea {
    max-width: 100%;
}

@media (max-width: 767px) {
    .topbar-actions { min-width: 0; }
    .content-wrapper { width: 100%; }
    .content-wrapper .row { min-width: 0; }
    .content-wrapper .reports-filter-form,
    .content-wrapper .operations-form,
    .content-wrapper .settings-fields {
        min-width: 0;
    }
}