/*
 * SangkanLogix interface typography system — v0.6.1 typography revision 1
 * Screen-only normalization for client dashboards and Wangoon Control Room.
 * Information Pack print dimensions remain governed by the existing print CSS.
 */

:root {
    --ui-font-micro: 8.5px;
    --ui-font-meta: 9.5px;
    --ui-font-small: 10.5px;
    --ui-font-body: 11.5px;
    --ui-font-lead: 12.5px;
    --ui-font-section: 14px;
    --ui-font-page: 18px;
    --ui-font-display: 22px;
    --ui-line-tight: 1.28;
    --ui-line-normal: 1.5;
    --ui-line-relaxed: 1.65;
}

@media screen {
    html {
        font-size: 15px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body.app-page {
        font-family: Montserrat, Arial, sans-serif;
        font-size: var(--ui-font-body);
        font-weight: 400;
        line-height: var(--ui-line-normal);
        letter-spacing: 0;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .app-page button,
    .app-page input,
    .app-page select,
    .app-page textarea,
    .app-page table {
        font-family: inherit;
    }

    .app-page h1,
    .app-page h2,
    .app-page h3,
    .app-page h4,
    .app-page h5,
    .app-page h6 {
        line-height: var(--ui-line-tight);
        letter-spacing: -.018em;
    }

    .app-page h1 { font-size: 19px; }
    .app-page h2 { font-size: var(--ui-font-page); }
    .app-page h3 { font-size: var(--ui-font-section); }
    .app-page h4 { font-size: var(--ui-font-lead); }
    .app-page h5 { font-size: var(--ui-font-body); }
    .app-page h6 { font-size: var(--ui-font-small); }

    .app-page strong,
    .app-page b {
        font-weight: 600;
    }

    .app-page p,
    .app-page li,
    .app-page dd,
    .app-page dt {
        font-size: var(--ui-font-small);
        line-height: 1.6;
    }

    .app-page small {
        font-size: var(--ui-font-meta);
        line-height: 1.45;
    }

    /* Sidebar and product identity */
    .app-page .sidebar {
        width: 248px;
        padding: 18px 14px;
    }

    .app-page .main-area {
        width: calc(100% - 248px);
        margin-left: 248px;
    }

    .app-page .brand-block {
        gap: 10px;
        padding: 4px 7px 18px;
    }

    .app-page .brand-block img,
    .app-page .brand-logo-placeholder {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .app-page .brand-title {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: -.01em;
    }

    .app-page .brand-subtitle {
        margin-top: 2px;
        font-size: 9.5px;
        line-height: 1.45;
    }

    .app-page .sidebar-nav {
        margin-top: 14px;
        gap: 2px;
    }

    .app-page .sidebar-nav .nav-link {
        min-height: 38px;
        gap: 9px;
        padding: 8px 10px;
        border-radius: 9px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: -.005em;
    }

    .app-page .nav-icon {
        flex-basis: 21px;
        width: 21px;
        height: 21px;
        border-radius: 6px;
        font-size: 7.5px !important;
        font-weight: 700;
    }

    .app-page .menu-label,
    .app-page .nav-group-label {
        font-size: var(--ui-font-micro);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: .15em;
    }

    .app-page .menu-label {
        margin: 17px 10px 6px;
    }

    .app-page .nav-submenu {
        margin-left: 31px;
    }

    .app-page .nav-sublink {
        padding: 5px 8px;
        font-size: 9px;
        line-height: 1.4;
    }

    .app-page .nav-sublink small {
        font-size: 8px;
    }

    /* Header */
    .app-page .topbar {
        min-height: 72px;
        padding: 13px 24px;
    }

    .app-page .topbar h1 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.25;
    }

    .app-page .topbar p {
        margin-top: 3px;
        font-size: 9.5px;
        line-height: 1.4;
    }

    .app-page .user-panel {
        gap: 12px;
    }

    .app-page .user-panel strong {
        font-size: 9.5px;
        font-weight: 700;
        line-height: 1.35;
    }

    .app-page .user-panel small {
        margin-top: 1px;
        font-size: 9px;
        line-height: 1.35;
    }

    /* Page hierarchy */
    .app-page .content-area {
        padding: 22px;
    }

    .app-page .simple-page-head {
        align-items: flex-end;
        gap: 16px;
        margin-bottom: 15px;
    }

    .app-page .simple-page-head h2,
    .app-page .shipment-head h2,
    .app-page .master-intro h2 {
        margin: 3px 0 4px;
        font-size: var(--ui-font-page);
        font-weight: 600;
        line-height: 1.28;
    }

    .app-page .simple-page-head p,
    .app-page .shipment-head p,
    .app-page .master-intro p,
    .app-page .page-intro {
        max-width: 820px;
        font-size: var(--ui-font-small);
        line-height: 1.6;
    }

    .app-page .eyebrow,
    .app-page .master-eyebrow,
    .app-page .control-eyebrow,
    .app-page .control-section-kicker,
    .app-page .geo-result-kicker {
        font-size: var(--ui-font-micro);
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .14em;
    }

    .app-page .section-title {
        margin-bottom: 15px;
        padding-bottom: 11px;
    }

    .app-page .section-title h3,
    .app-page .panel-card h3,
    .app-page .control-panel-head h3,
    .app-page .client-geo-card-title h3,
    .app-page .client-geo-history-head h3 {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: -.012em;
    }

    .app-page .section-title p,
    .app-page .panel-card p,
    .app-page .client-geo-card-title p,
    .app-page .client-geo-history-head p {
        font-size: var(--ui-font-meta);
        line-height: 1.6;
    }

    /* Cards, guidance and alerts */
    .app-page .metric-card,
    .app-page .panel-card,
    .app-page .control-panel {
        border-radius: 14px;
        padding: 17px;
    }

    .app-page .panel-card.p-0,
    .app-page .table-panel {
        padding: 0;
    }

    .app-page .alert,
    .app-page .simple-guide {
        padding: 10px 13px;
        font-size: var(--ui-font-small);
        line-height: 1.55;
    }

    .app-page .alert strong,
    .app-page .simple-guide strong {
        font-weight: 700;
    }

    .app-page .empty-state {
        padding: 34px 18px;
        font-size: var(--ui-font-small);
        line-height: 1.55;
    }

    .app-page .empty-state strong {
        font-size: var(--ui-font-lead);
    }

    /* Forms and actions */
    .app-page .form-label,
    .app-page legend {
        margin-bottom: 5px;
        font-size: var(--ui-font-small);
        font-weight: 600;
        line-height: 1.4;
    }

    .app-page .form-control,
    .app-page .form-select,
    .app-page .input-group-text {
        min-height: 40px;
        padding: 8px 11px;
        border-radius: 9px;
        font-size: var(--ui-font-body);
        line-height: 1.35;
    }

    .app-page textarea.form-control {
        min-height: 84px;
        line-height: 1.55;
    }

    .app-page .form-control::placeholder,
    .app-page textarea::placeholder {
        color: #8b9298;
        font-size: var(--ui-font-small);
        opacity: 1;
    }

    .app-page .form-hint,
    .app-page .form-text,
    .app-page .invalid-feedback,
    .app-page .valid-feedback {
        margin-top: 5px;
        font-size: var(--ui-font-meta);
        line-height: 1.5;
    }

    .app-page .btn {
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 9px;
        font-size: var(--ui-font-small);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -.005em;
    }

    .app-page .btn-sm {
        min-height: 31px;
        padding: 6px 9px;
        border-radius: 8px;
        font-size: var(--ui-font-meta);
    }

    .app-page .btn-lg {
        min-height: 43px;
        padding: 10px 15px;
        font-size: var(--ui-font-body);
    }

    .app-page .filter-bar {
        gap: 10px;
    }

    /* A single table scale for Bootstrap, compact and bespoke tables */
    .app-page .table {
        margin-bottom: 0;
        color: #252a2e;
        font-size: var(--ui-font-small);
        line-height: 1.5;
    }

    .app-page .table > :not(caption) > * > * {
        padding: 11px 12px;
        border-color: #e7ebed;
        vertical-align: middle;
    }

    .app-page .table thead th,
    .app-page .table-panel th,
    .app-page .simple-table th,
    .app-page .client-geo-table thead th {
        padding: 10px 12px;
        background: #fafbfb;
        color: #4d565c;
        font-size: 9.5px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: .025em;
        text-transform: none;
        white-space: nowrap;
    }

    .app-page .table tbody td,
    .app-page .table-panel td,
    .app-page .simple-table td,
    .app-page .client-geo-table tbody td {
        padding: 11px 12px;
        font-size: var(--ui-font-small);
        line-height: 1.5;
    }

    .app-page .table td strong,
    .app-page .simple-table td strong,
    .app-page .client-geo-request strong,
    .app-page .client-geo-plot strong,
    .app-page .client-geo-result strong {
        font-size: 10.75px;
        font-weight: 600;
        line-height: 1.4;
    }

    .app-page .table td small,
    .app-page .table th small,
    .app-page .client-geo-request small,
    .app-page .client-geo-plot small,
    .app-page .client-geo-result small {
        margin-top: 2px;
        font-size: var(--ui-font-meta);
        line-height: 1.45;
    }

    .app-page .table .btn-sm {
        min-height: 29px;
        padding: 5px 8px;
        font-size: 9px;
    }

    .app-page .badge,
    .app-page .simple-status,
    .app-page .verification-badge,
    .app-page .geo-priority-badge,
    .app-page .shipment-status,
    .app-page .lock-badge,
    .app-page .trace-status {
        padding: 4px 7px;
        font-size: 8.5px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 0;
    }

    /* Dashboard metrics */
    .app-page .metric-label {
        font-size: var(--ui-font-small);
    }

    .app-page .metric-value {
        font-size: 24px;
        line-height: 1.15;
    }

    .app-page .metric-description {
        font-size: var(--ui-font-meta);
        line-height: 1.45;
    }

    .app-page .welcome-card {
        padding: 20px;
        border-radius: 15px;
    }

    .app-page .welcome-card h2 {
        font-size: 19px;
        font-weight: 600;
    }

    .app-page .welcome-card p {
        font-size: var(--ui-font-small);
        line-height: 1.6;
    }

    /* Wangoon monitoring */
    .app-page .control-hero {
        padding: 24px 26px;
        border-radius: 18px;
    }

    .app-page .control-hero h2 {
        margin: 5px 0;
        font-size: var(--ui-font-display);
        font-weight: 700;
    }

    .app-page .control-hero p {
        font-size: var(--ui-font-small);
        line-height: 1.6;
    }

    .app-page .control-hero-actions .btn {
        min-height: 38px;
        padding: 8px 13px;
        font-size: 10px;
    }

    .app-page .control-kpi {
        min-height: 104px;
        padding: 16px;
    }

    .app-page .control-kpi span { font-size: var(--ui-font-meta); }
    .app-page .control-kpi strong { font-size: 23px; }
    .app-page .control-kpi small { font-size: 9px; }

    .app-page .control-panel-head > a,
    .app-page .control-legend span,
    .app-page .trend-values small,
    .app-page .trend-column > strong,
    .app-page .service-ring span,
    .app-page .service-breakdown > div,
    .app-page .control-panel-link,
    .app-page .pipeline-row span,
    .app-page .control-table th,
    .app-page .control-table td,
    .app-page .control-table td small,
    .app-page .request-status,
    .app-page .tenant-activity-list p strong,
    .app-page .tenant-activity-list p small,
    .app-page .activity-open,
    .app-page .expiry-row strong,
    .app-page .expiry-row small,
    .app-page .expiry-row > span,
    .app-page .control-empty-success small,
    .app-page .audit-feed strong,
    .app-page .audit-feed small,
    .app-page .rule-option strong,
    .app-page .rule-option small,
    .app-page .rule-group-title,
    .app-page .rules-matrix {
        font-size: 9px;
        line-height: 1.45;
    }

    .app-page .trend-values span,
    .app-page .service-breakdown strong,
    .app-page .pipeline-row strong,
    .app-page .control-empty-success strong {
        font-size: 10px;
    }

    .app-page .service-ring strong {
        font-size: 21px;
    }

    .app-page .request-status,
    .app-page .activity-open,
    .app-page .expiry-row > span {
        font-size: 8.5px;
    }

    .app-page .dashboard-geo-ready small,
    .app-page .dashboard-geo-ready p,
    .app-page .dashboard-geo-count {
        font-size: 9px;
        line-height: 1.45;
    }

    .app-page .dashboard-geo-ready strong {
        font-size: 10.5px;
    }

    /* Geolocation result and interactive map */
    .app-page .geo-result-copy h3 {
        font-size: 18px;
    }

    .app-page .geo-result-copy p {
        font-size: 10px;
        line-height: 1.6;
    }

    .app-page .geo-result-meta span,
    .app-page .geo-metric-card small,
    .app-page .geo-chart-label,
    .app-page .geo-map-head p,
    .app-page .geo-layer-list small,
    .app-page .geo-layer-empty span,
    .app-page .geo-opacity-label,
    .app-page .geo-map-hint ol,
    .app-page .geo-layer-time,
    .app-page .geo-method-card p,
    .app-page .geo-method-card li,
    .app-page .geo-method-detail p,
    .app-page .geo-scope-item span,
    .app-page .geo-scope-result span,
    .app-page .geo-scope-item small,
    .app-page .geo-scope-result small,
    .app-page .geo-review-reading p,
    .app-page .geo-map-hint p,
    .app-page .geo-map-interpretation p {
        font-size: 9px;
        line-height: 1.5;
    }

    .app-page .geo-result-meta strong,
    .app-page .geo-layer-list strong,
    .app-page .geo-layer-empty strong,
    .app-page .geo-map-hint strong,
    .app-page .geo-method-card small,
    .app-page .geo-method-detail strong,
    .app-page .geo-scope-item strong,
    .app-page .geo-scope-result strong,
    .app-page .geo-map-interpretation strong {
        font-size: 9.5px;
        line-height: 1.45;
    }

    .app-page .geo-metric-card strong,
    .app-page .geo-ring strong {
        font-size: 18px;
    }

    .app-page .geo-metric-card p,
    .app-page .geo-ring span,
    .app-page .geo-chart-copy p {
        font-size: 9px;
    }

    .app-page .geo-chart-copy h4 {
        font-size: 16px;
    }

    .app-page .geo-map-head h3 {
        font-size: 14px;
    }

    .app-page .geo-map-side-title,
    .app-page .geo-method-detail summary {
        font-size: 9.5px;
    }

    .app-page .geo-result-map .leaflet-control-layers,
    .app-page .geo-result-map .leaflet-popup-content {
        font-size: 10px;
    }

    .app-page .geo-result-map .leaflet-control-attribution {
        font-size: 8px;
    }

    /* Client geolocation history */
    .app-page .client-geo-flow > strong,
    .app-page .client-geo-flow > span,
    .app-page .client-geo-limit strong,
    .app-page .client-geo-limit span,
    .app-page .client-geo-pending,
    .app-page .client-geo-note {
        font-size: 9.5px;
        line-height: 1.55;
    }

    .app-page .client-geo-head-stats > span,
    .app-page .client-geo-history-head > span {
        font-size: 9px;
    }

    .app-page .client-geo-head-stats strong {
        font-size: 16px;
    }

    /* Footer remains legible without competing with page content */
    .app-page .app-footer {
        gap: 5px 16px;
        padding: 16px 22px 18px;
        font-size: 9.5px;
        line-height: 1.5;
    }

    .app-page .app-footer small {
        font-size: 9px;
        line-height: 1.55;
    }
}

@media screen and (max-width: 1100px) {
    .app-page .content-area {
        padding: 18px;
    }

    .app-page .simple-page-head {
        align-items: flex-start;
    }

    .app-page .table-responsive {
        scrollbar-width: thin;
    }
}

@media screen and (max-width: 720px) {
    html {
        font-size: 15px;
    }

    .app-page .sidebar {
        width: 100%;
        padding: 13px;
    }

    .app-page .main-area {
        width: 100%;
        margin-left: 0;
    }

    .app-page .brand-block {
        padding-bottom: 13px;
    }

    .app-page .brand-title {
        font-size: 12px;
    }

    .app-page .topbar {
        min-height: 62px;
        padding: 11px 15px;
    }

    .app-page .topbar h1 {
        font-size: 16px;
    }

    .app-page .content-area {
        padding: 14px;
    }

    .app-page .simple-page-head h2,
    .app-page .shipment-head h2,
    .app-page .master-intro h2 {
        font-size: 17px;
    }

    .app-page .metric-card,
    .app-page .panel-card,
    .app-page .control-panel {
        padding: 15px;
    }

    .app-page .table > :not(caption) > * > * {
        padding: 10px;
    }

    .app-page .form-control,
    .app-page .form-select,
    .app-page .input-group-text {
        font-size: 12px;
    }

    .app-page .app-footer {
        padding: 14px;
    }
}