/*
 * SIA UBS PPNI accessible typography foundation (Balanced Compact v2).
 * Inter 4.1 is self-hosted under ../fonts and licensed under SIL OFL 1.1.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
    --sia-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sia-font-body: 1rem;
    --sia-font-table: .9375rem;
    --sia-font-control: .9375rem;
    --sia-font-button: .9375rem;
    --sia-font-label: .875rem;
    --sia-font-nav: .9375rem;
    --sia-font-meta: .875rem;
    --sia-font-caption: .875rem;
    --sia-font-card-title: 1.0625rem;
    --sia-font-modal-title: 1.125rem;
    --sia-font-page-heading: 1.375rem;
    /* Compatibility aliases; new views should use the semantic tokens above. */
    --sia-font-ui: var(--sia-font-control);
    --sia-font-small: var(--sia-font-nav);
    --sia-weight-body: 450;
    --sia-weight-ui: 500;
    --sia-weight-label: 600;
    --sia-weight-heading: 700;
    --sia-weight-display: 800;
    --sia-line-body: 1.55;
    --sia-line-table: 1.45;
    --sia-line-control: 1.4;
    --sia-line-meta: 1.45;
    --sia-line-compact: 1.4;
    --sia-line-ui: var(--sia-line-control);

    --sia-text-strong: #1e293b;
    --sia-text-body: #334155;
    --sia-text-secondary: #475569;
    --sia-text-muted: #506075;
    --sia-text-placeholder: #59677a;
    --sia-text-link: #174ea6;
    --sia-text-info: #174ea6;
    --sia-text-success: #14532d;
    --sia-text-warning: #713f12;
    --sia-text-danger: #991b1b;
    --sia-text-disabled: #8492a0;

    --bs-body-font-family: var(--sia-font-family);
    --bs-body-font-size: var(--sia-font-body);
    --bs-body-font-weight: var(--sia-weight-body);
    --bs-body-line-height: var(--sia-line-body);
    --bs-body-color: var(--sia-text-body);
    --bs-body-color-rgb: 51, 65, 85;
    --bs-heading-color: var(--sia-text-strong);
    --bs-secondary-color: var(--sia-text-secondary);
    --bs-tertiary-color: var(--sia-text-muted);
    --bs-link-color: var(--sia-text-link);
    --bs-link-color-rgb: 23, 78, 166;
    --bs-link-hover-color: #0f3f83;
    --bs-link-hover-color-rgb: 15, 63, 131;
}

html[data-bs-theme="light"] {
    --sia-text-strong: #1e293b;
    --sia-text-body: #334155;
    --sia-text-secondary: #475569;
    --sia-text-muted: #506075;
    --sia-text-placeholder: #59677a;
    --sia-text-link: #174ea6;
    --sia-text-info: #174ea6;
    --sia-text-success: #14532d;
    --sia-text-warning: #713f12;
    --sia-text-danger: #991b1b;
    --sia-text-disabled: #8492a0;
    --bs-body-color: var(--sia-text-body);
    --bs-body-color-rgb: 51, 65, 85;
    --bs-heading-color: var(--sia-text-strong);
    --bs-secondary-color: var(--sia-text-secondary);
    --bs-tertiary-color: var(--sia-text-muted);
    --bs-link-color: var(--sia-text-link);
    --bs-link-color-rgb: 23, 78, 166;
}

html[data-bs-theme="dark"] {
    --sia-text-strong: #f8fbff;
    --sia-text-body: #edf3fb;
    --sia-text-secondary: #c1cfdf;
    --sia-text-muted: #b8c6d8;
    --sia-text-placeholder: #b8c6d8;
    --sia-text-link: #a8c7ff;
    --sia-text-info: #a8c7ff;
    --sia-text-success: #8cf0c2;
    --sia-text-warning: #ffe0a3;
    --sia-text-danger: #ffb4c5;
    --sia-text-disabled: #8292a8;
    --bs-body-color: var(--sia-text-body);
    --bs-body-color-rgb: 237, 243, 251;
    --bs-heading-color: var(--sia-text-strong);
    --bs-secondary-color: var(--sia-text-secondary);
    --bs-tertiary-color: var(--sia-text-muted);
    --bs-link-color: var(--sia-text-link);
    --bs-link-color-rgb: 168, 199, 255;
}

html,
body {
    font-family: var(--sia-font-family) !important;
    font-optical-sizing: auto;
    font-feature-settings: "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: var(--sia-font-body);
    font-weight: var(--sia-weight-body);
    line-height: var(--sia-line-body);
    color: var(--sia-text-body);
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--sia-text-strong);
    font-weight: var(--sia-weight-heading);
    line-height: 1.2;
}

h1,
.h1 {
    font-size: 1.75rem;
}

h2,
.h2 {
    font-size: 1.5rem;
}

h3,
.h3,
.page-heading h3 {
    font-size: var(--sia-font-page-heading);
}

h4,
.h4 {
    font-size: 1.125rem;
}

h5,
.h5 {
    font-size: 1.0625rem;
}

h6,
.h6 {
    font-size: 1rem;
}

p,
li,
dd,
dt {
    line-height: var(--sia-line-body);
}

small,
.small {
    font-size: var(--sia-font-caption);
    line-height: var(--sia-line-compact);
}

.text-muted,
.text-secondary {
    color: var(--sia-text-secondary) !important;
}

a {
    text-underline-offset: .15em;
}

#main a:not(.btn):not(.sidebar-link):not(.dropdown-item),
.page-content a:not(.btn):not(.nav-link) {
    color: var(--sia-text-link);
}

.form-label,
.col-form-label,
legend {
    color: var(--sia-text-strong);
    font-size: var(--sia-font-label) !important;
    font-weight: var(--sia-weight-label);
    line-height: var(--sia-line-compact);
}

.form-control,
.form-select,
.input-group-text {
    color: var(--sia-text-body);
    font-size: var(--sia-font-control);
    font-weight: var(--sia-weight-ui);
    line-height: var(--sia-line-control);
}

.form-control:not(textarea),
.form-select {
    min-height: 2.5rem;
}

.form-check-label {
    color: var(--sia-text-body);
    font-size: var(--sia-font-label);
    font-weight: var(--sia-weight-ui);
    line-height: var(--sia-line-compact);
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--sia-text-placeholder);
    opacity: 1;
}

.form-text,
.invalid-feedback,
.valid-feedback {
    font-size: var(--sia-font-caption);
    line-height: var(--sia-line-compact);
}

.form-control:disabled,
.form-select:disabled,
.btn:disabled,
.disabled,
[aria-disabled="true"] {
    color: var(--sia-text-disabled);
}

.btn:not(.btn-sm) {
    font-size: var(--sia-font-button);
    font-weight: var(--sia-weight-label);
    line-height: var(--sia-line-control);
}

.btn-sm {
    font-size: var(--sia-font-caption);
}

.btn,
.badge,
.chip,
[class$="-chip"],
[class*="-chip "],
[class$="-pill"],
[class*="-pill "] {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.card-title,
.modal-title {
    color: var(--sia-text-strong);
    font-size: var(--sia-font-card-title);
    font-weight: var(--sia-weight-heading);
    line-height: 1.3;
}

.modal-title {
    font-size: var(--sia-font-modal-title);
}

.table,
table {
    color: var(--sia-text-body);
    font-size: var(--sia-font-table);
    font-weight: var(--sia-weight-ui);
    line-height: var(--sia-line-table);
    font-variant-numeric: tabular-nums;
}

.table tbody th,
.table tbody td,
table tbody th,
table tbody td {
    font-size: var(--sia-font-table);
}

.table > :not(caption) > * > *,
table > :not(caption) > * > * {
    color: inherit;
}

.table > :not(caption) > * > *,
.dataTable-table > :not(caption) > * > * {
    padding-block: .5rem;
    padding-inline: .625rem;
}

.table-sm > :not(caption) > * > * {
    padding-block: .25rem;
    padding-inline: .5rem;
}

.table.table-md tr th,
.table-md.dataTable-table tr th,
.table-md.dataTable-table tr td {
    padding: .625rem .75rem;
}

.table thead th,
table thead th {
    font-size: var(--sia-font-caption);
    font-weight: var(--sia-weight-label);
    line-height: 1.35;
    letter-spacing: .02em;
}

.table caption,
table caption {
    font-size: var(--sia-font-caption);
    line-height: var(--sia-line-compact);
}

.sidebar-wrapper .menu .sidebar-title,
.sidebar-wrapper .menu .sidebar-link,
.sidebar-wrapper .menu .submenu .submenu-item a {
    font-size: var(--sia-font-nav);
    line-height: var(--sia-line-compact);
}

.sidebar-wrapper .menu .sidebar-link,
.sidebar-wrapper .menu .submenu .submenu-item a {
    font-weight: var(--sia-weight-label);
}

.badge {
    font-size: var(--sia-font-caption);
    font-weight: var(--sia-weight-label);
    line-height: var(--sia-line-compact);
}

.pagination,
.pagination .page-link {
    font-size: var(--sia-font-caption);
    font-weight: var(--sia-weight-ui);
}

.alert,
.dropdown-item,
.list-group-item {
    font-size: var(--sia-font-nav);
    line-height: var(--sia-line-control);
}

/* Keep secondary information compact without reducing contrast or crossing 14px. */
.sia-meta,
.sia-caption,
[class$="-meta"],
[class*="-meta "],
[class$="-metadata"],
[class*="-metadata "],
[class$="-muted"],
[class*="-muted "],
[class$="-subtitle"],
[class*="-subtitle "],
[class$="-caption"],
[class*="-caption "] {
    font-size: var(--sia-font-meta) !important;
    line-height: var(--sia-line-meta);
}

.text-info {
    color: var(--sia-text-info) !important;
}

.text-success {
    color: var(--sia-text-success) !important;
}

.text-warning {
    color: var(--sia-text-warning) !important;
}

.text-danger {
    color: var(--sia-text-danger) !important;
}

/* Informational text remains solid; opacity is reserved for true UI states or decoration. */
p.opacity-75,
div.opacity-75,
span.opacity-75,
small.opacity-75,
.tracer-result-label,
.eoffice-metric-label,
.attendance-metric-card small,
.obe-rps-metric .label,
.obe-attempt-muted,
.verify-logo span {
    opacity: 1 !important;
}

.page-content p,
.prose,
.reading-width {
    max-width: 72ch;
}

@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    .input-group-text {
        font-size: 1rem !important;
    }

    .form-control:not(textarea),
    .form-select,
    .btn:not(.btn-sm) {
        min-height: 2.75rem;
    }

    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}