/*
 * Warnoes OS Admin Typography v5.4.3
 * Self-hosted type system for fast, legible backoffice work.
 * Plus Jakarta Sans: UI/body | Barlow Condensed: display | IBM Plex Mono: figures
 */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-400-800.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-800.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-700.woff2") format("woff2");
}

:root {
    --font-ui: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Barlow Condensed", "Arial Narrow", var(--font-ui);
    --font-numeric: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-body: var(--font-ui);
    --font-heading: var(--font-display);
}

body.app-body,
body.auth-body {
    font-family: var(--font-ui);
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-body :is(button, input, select, textarea),
body.auth-body :is(button, input, select, textarea) {
    font-family: inherit;
}

body.app-body :is(h1, h2, .brand-title, .page-title),
body.auth-body :is(h1, h2, .brand-title) {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: condensed;
    text-wrap: balance;
}

/*
 * Headline leading must remain comfortable when Barlow Condensed wraps.
 * This late global rule normalizes older modules that used sub-1.1 leading.
 */
body.app-body .main-area :is(h1, h2),
body.auth-body :is(h1, h2) {
    line-height: 1.12 !important;
}

body.app-body .main-area :is(
    .executive-hero,
    .crm-hero,
    .growth-hero,
    .mc-hero,
    [class$="-hero"],
    [class*="-hero "],
    [class$="__hero"],
    [class*="__hero "]
) :is(h1, h2) {
    line-height: 1.14 !important;
    letter-spacing: -.012em !important;
}

body.app-body :is(h3, h4, h5, h6),
body.auth-body :is(h3, h4, h5, h6) {
    font-family: var(--font-ui);
    font-weight: 750;
    text-wrap: balance;
}

body.app-body .topbar h1 {
    font-size: clamp(1.75rem, 2.25vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

body.app-body .panel-header h2 {
    font-size: clamp(1.55rem, 2vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -.015em;
}

body.app-body :is(
    .page-eyebrow,
    .sidebar-group-label,
    .side-label,
    .admin-refinement-context__eyebrow,
    .module-card-icon
) {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .115em;
}

body.app-body :is(
    .btn,
    .sidebar-link,
    .badge,
    .tab-button,
    .filter-chip,
    .system-status-pill
) {
    font-family: var(--font-ui);
    letter-spacing: -.006em;
}

/* Numeric rhythm: figures stay aligned in tables, controls, and operational IDs. */
body.app-body :is(
    table,
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    .badge,
    .timer,
    .order-number,
    .shift-code
) {
    font-variant-numeric: tabular-nums lining-nums;
}

body.app-body :is(.metric-grid, .dashboard-grid) > *,
body.app-body .metric-card > *,
body.app-body .summary-row > *,
body.app-body .financial-summary > div > * {
    min-width: 0;
}

/*
 * Metric values use their card as the sizing reference. Long revenue figures
 * scale earlier than counts and may wrap as a final safety net—never clip.
 */
body.app-body .metric-card {
    container-name: warnoes-metric;
    container-type: inline-size;
}

body.app-body .metric-card > strong {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: 10px 6px;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 12cqi, 2.75rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
}

body.app-body :is(.is-numeric-value, .is-money-value) {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
    letter-spacing: -.045em;
}

body.app-body .metric-card > .is-money-value {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
    font-size: clamp(1.25rem, 9.1cqi, 2.25rem);
    line-height: 1.06;
    letter-spacing: -.065em;
}

body.app-body .metric-card > .is-numeric-value:not(.is-money-value) {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
    font-size: clamp(1.7rem, 12cqi, 2.75rem);
}

body.app-body .summary-row {
    min-width: 0;
}

body.app-body .summary-row > :first-child {
    flex: 1 1 auto;
}

body.app-body .summary-row > span {
    flex: 0 1 auto;
    max-width: 56%;
    text-align: right;
    overflow-wrap: anywhere;
}

body.app-body .summary-row > .is-money-value {
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.2;
}

body.app-body :is(
    .financial-summary strong,
    .closing-total-card strong,
    [data-denom-total],
    [data-summary-total],
    [data-money],
    .money-value,
    .currency-value,
    .grand-total,
    .total-amount
) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.app-body :is(
    .financial-summary strong,
    .closing-total-card strong,
    [data-denom-total],
    [data-summary-total],
    [data-money],
    .money-value,
    .currency-value,
    .total-amount
).is-money-value,
body.app-body .financial-summary .grand strong {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
    font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
    letter-spacing: -.045em;
}

/* Tables keep large amounts intact and scroll at the wrapper boundary. */
body.app-body .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

body.app-body .data-table :is(th, td) {
    font-variant-numeric: tabular-nums lining-nums;
}

body.app-body .data-table td.is-money-value {
    font-family: var(--font-numeric);
    font-size: .94em;
    font-weight: 600;
    letter-spacing: -.045em;
    white-space: nowrap;
}

body.app-body .data-table td.is-money-value strong {
    font: inherit;
}

@media (max-width: 760px) {
    body.app-body .topbar h1 {
        font-size: clamp(1.6rem, 7vw, 2rem);
    }

    body.app-body .metric-card > strong {
        font-size: clamp(1.45rem, 12cqi, 2.35rem);
    }

    body.app-body .metric-card > .is-money-value {
        font-size: clamp(1.12rem, 8.7cqi, 1.9rem);
    }

    body.app-body .summary-row > span {
        max-width: 50%;
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    body.app-body .metric-card > .is-money-value {
        font-size: clamp(1.35rem, 8.8cqi, 2rem);
    }

    body.app-body .summary-row {
        align-items: flex-start;
    }

    body.app-body .summary-row > span {
        max-width: 48%;
    }
}

@media (prefers-reduced-data: reduce) {
    body.app-body,
    body.auth-body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
}