/*
 * 2026 interface layer.
 *
 * app.css owns themes, accessibility and module-specific behavior. This file
 * owns the shared visual rhythm so the application can evolve without every
 * controller view inventing a new card, input or table treatment.
 */

:root {
    --app-radius-sm: 9px;
    --app-radius: 13px;
    --app-radius-lg: 18px;
    --ui-space: 20px;
    --ui-control-height: 42px;
}

body {
    font-size: 14.5px;
    line-height: 1.55;
    background-color: var(--app-bg);
    background-image:
        radial-gradient(circle at 82% -10%, color-mix(in oklab, var(--app-accent) 10%, transparent), transparent 34rem),
        radial-gradient(circle at 20% 110%, color-mix(in oklab, var(--app-accent-2) 7%, transparent), transparent 30rem);
    background-attachment: fixed;
}

.app-sidebar {
    width: 252px;
    flex-basis: 252px;
    border-right-color: color-mix(in oklab, var(--app-border) 68%, transparent);
    box-shadow: 14px 0 38px rgba(0, 0, 0, .12);
}

.app-brand { padding: 23px 20px 18px; font-size: 18px; }
.app-brand img { max-height: 31px; max-width: 158px; }
.app-brand-tenant { padding-inline: 20px; padding-bottom: 18px; font-size: 12px; }
.app-nav { padding: 4px 12px 30px; }
.app-nav .nav-section { padding: 20px 10px 7px; font-size: 10.5px; }
.app-nav a {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 13.5px;
}
.app-nav .nav-icon {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
}
.app-nav a:hover .nav-icon,
.app-nav a.active .nav-icon { background: rgba(255, 255, 255, .1); }
.app-nav a.active { background: color-mix(in oklab, var(--app-accent) 28%, var(--app-sidebar-hover)); }

.app-header {
    min-height: 64px;
    padding: 11px 26px;
    gap: 10px;
    background: color-mix(in oklab, var(--app-surface) 76%, transparent);
    backdrop-filter: saturate(1.35) blur(18px);
}

.app-content {
    width: min(100%, 1720px);
    margin-inline: auto;
    padding: 30px clamp(22px, 2.6vw, 44px) 48px;
}

.page-head { align-items: center; margin-bottom: 24px; gap: 20px; }
.page-head h1 {
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 680;
    letter-spacing: -.035em;
    line-height: 1.15;
}
.page-head .sub { max-width: 72ch; margin-top: 6px; font-size: 14px; line-height: 1.45; }
.page-head .actions { gap: 10px; align-items: center; }

.card {
    border-radius: var(--app-radius-lg);
    border-color: color-mix(in oklab, var(--app-border) 78%, var(--card-tint, var(--app-accent)) 22%);
    box-shadow: var(--app-lift), 0 14px 38px color-mix(in oklab, var(--app-shadow-color) 48%, transparent);
    overflow: clip;
}
.card:has(> .card-head):hover {
    box-shadow: var(--app-lift), 0 18px 46px color-mix(in oklab, var(--app-shadow-color) 55%, transparent);
}
.card-head {
    min-height: 60px;
    padding: 17px 20px 16px 24px;
    column-gap: 12px;
    line-height: 22px;
}
.card-head::before { width: 4px; }
.card-head h2 {
    font-size: 15px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: -.012em;
    color: var(--app-text);
}
.card-head h2::before { width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.card-head .sub { font-size: 13px; color: var(--app-text-muted); }
.card-body { padding: 20px; }
:is(.card, .cols-2) + :is(.card, .cols-2) { margin-top: var(--ui-space); }
.cols-2 { gap: var(--ui-space); }
.job-record > :is(.stats, .card, .cols-2, .job-panel-grid)
    + :is(.stats, .card, .cols-2, .job-panel-grid) { margin-top: var(--ui-space); }
.job-panel-grid { gap: var(--ui-space); }

.legal-header{max-width:1060px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.legal-header nav{display:flex;align-items:center;gap:16px}.legal-brand{font-size:20px;font-weight:750;color:var(--app-text);text-decoration:none}.legal-shell{max-width:900px;margin:20px auto 70px;padding:0 24px}.legal-document{background:var(--app-surface);border:1px solid var(--app-border);border-radius:18px;padding:clamp(24px,5vw,54px);box-shadow:var(--ui-shadow)}.legal-document h1{font-size:clamp(34px,6vw,54px);letter-spacing:-.035em;margin:.15em 0 .35em}.legal-document h2{font-size:22px;margin:2em 0 .55em;padding-top:.2em}.legal-document h3{font-size:17px;margin:1.35em 0 .4em}.legal-document p,.legal-document li{line-height:1.72}.legal-document li+li{margin-top:.45em}.legal-lead{font-size:18px;color:var(--app-text-muted)}.legal-kicker{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--app-accent-ink)}.legal-footer,.app-legal-footer{text-align:center;color:var(--app-text-muted);font-size:13px}.legal-footer{padding:0 24px 44px}.app-legal-footer{padding:32px 0 8px}.legal-footer a,.app-legal-footer a{color:inherit}

.stats { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 16px; }
.stats + * { margin-top: var(--ui-space); }
.stat { min-height: 116px; padding: 18px 19px; }
.stat .label { font-size: 11.5px; }
.stat .value { margin-top: 9px; font-size: 29px; }
.stat .foot { margin-top: 5px; font-size: 12.5px; }

.btn {
    min-height: var(--ui-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 620;
}
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.btn-accent,
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 7px 18px color-mix(in oklab, var(--app-accent) 25%, transparent); }

.form-control,
.form-select {
    min-height: var(--ui-control-height);
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 14px;
    background: color-mix(in oklab, var(--app-bg) 72%, var(--app-surface));
}
textarea.form-control { min-height: auto; }
.form-label {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--app-text-muted);
}
.form-text { margin-top: 6px; line-height: 1.45; }
.form-grid { gap: 18px 20px; }

.filters { gap: 10px; margin-bottom: 20px; }
form.filters {
    padding: 22px;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-lift), 0 12px 32px color-mix(in oklab, var(--app-shadow-color) 42%, transparent);
}
.filters:not(form) { padding: 7px; gap: 4px; }

.table-wrap { background: color-mix(in oklab, var(--app-surface) 92%, transparent); }
.table { font-size: 13.5px; }
.table thead th { padding: 12px 17px; font-size: 11px; }
.table tbody td { padding: 14px 17px; }
.table tbody tr { transition: background-color var(--app-fast) var(--app-ease); }
.empty { padding: 56px 20px; }
.empty .big { font-size: 17px; font-weight: 650; }

.pill { padding: 4px 9px; border-radius: 999px; }
.note,
.callout { border-radius: 13px; padding: 14px 16px; }
.dropdown-menu { padding: 7px; border-radius: 13px; box-shadow: var(--app-shadow-lg); }
.dropdown-item { padding: 9px 11px; border-radius: 8px; }

.app-nav-toggle,
.app-nav-scrim { display: none; }
.app-location-compact,
.app-user-compact { display: none; }

@media (max-width: 980px) {
    html,
    body { max-width: 100%; overflow-x: clip; }
    .app { width: 100%; min-height: 100dvh; }
    .app-header { padding-inline: 14px; }
    .app-content { padding: 22px 14px 38px; }
    .app-nav-toggle { display: inline-flex; flex: 0 0 auto; font-size: 18px; }
    .app-sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(86vw, 300px);
        transform: translateX(-105%);
        transition: transform .22s var(--app-ease);
    }
    .app-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 55;
        width: 100%;
        height: 100dvh;
        padding: 0;
        border: 0;
        background: var(--app-scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s var(--app-ease);
    }
    body.nav-open { overflow: hidden; }
    body.nav-open .app-sidebar { transform: translateX(0); }
    body.nav-open .app-nav-scrim { display: block; opacity: 1; pointer-events: auto; }
    .app-nav a { min-height: 46px; }
    .page-head { align-items: flex-start; }
    .page-head .actions { width: 100%; margin-left: 0; flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
    .page-head .actions .btn,
    .page-head .actions > form { flex: 1 1 auto; }
    .page-head .actions > form .btn { width: 100%; }
    .card,
    .card-body,
    .table-wrap { min-width: 0; max-width: 100%; }
}

@media (max-width: 620px) {
    .legal-header { padding: 16px; align-items: flex-start; }
    .legal-header nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .legal-shell { padding: 0 12px; margin-top: 8px; }
    .legal-document { padding: 22px 18px; border-radius: 14px; }
    .legal-document h2 { font-size: 20px; }
    body { font-size: 14px; }
    .app-header {
        min-height: 58px;
        gap: 6px;
        padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    }
    .app-header .btn-sm { min-width: 40px; min-height: 40px; padding: 7px 10px; }
    .app-header .dropdown > .btn { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-user-label,
    .app-location-label { display: none; }
    .app-user-compact,
    .app-location-compact { display: inline; }
    .app-user-menu > .btn { max-width: 52px !important; }
    .app-location-menu > .btn { max-width: 92px !important; }
    .app-content { padding: 18px 12px calc(32px + env(safe-area-inset-bottom)); }
    .page-head { gap: 14px; margin-bottom: 18px; }
    .page-head h1 { font-size: 25px; }
    .card-head { padding: 15px 16px 14px 20px; }
    .card-body { padding: 16px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { min-height: 98px; padding: 14px; }
    .stat .value { font-size: 23px; }
    form.filters { padding: 16px; }
    .filters:not(form) { width: 100%; }
    .table thead th,
    .table tbody td { padding-inline: 13px; }
    .kv { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: 8px 12px; }
    .form-actions { flex-wrap: wrap; padding: 12px; }
    .form-actions .btn { flex: 1 1 auto; }
    .dropdown-menu { max-width: calc(100vw - 24px); }
    .modal-dialog { margin: 12px; }
    .modal-content { max-height: calc(100dvh - 24px); overflow-y: auto; }
    img,
    video,
    canvas,
    svg { max-width: 100%; }
}

@media (max-width: 420px) {
    .stats { grid-template-columns: 1fr; }
    .stat { min-height: 88px; }
    .page-head .actions .btn,
    .page-head .actions > form { flex-basis: 100%; }
    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv dd { margin-bottom: 9px; overflow-wrap: anywhere; }
    .card-head { align-items: flex-start; }
    .card-head .spacer { display: none; }
    .card-head .btn,
    .card-head > form { margin-left: 0; }
}