/* PAFDS readability spacing overrides.
   Kept separate from site.css so we can iterate without clashing with other lanes. */

body.app-pafds-shell:not(.embed) .container {
    max-width: 1760px;
    padding-left: 30px;
    padding-right: 30px;
}

.app-pafds-shell .app-shell,
.app-shell[class*="app-pafds"] {
    font-size: 1rem;
    color: #18314f;
}

.app-pafds-shell .app-shell p,
.app-pafds-shell .app-shell li,
.app-pafds-shell .app-shell td,
.app-shell[class*="app-pafds"] p,
.app-shell[class*="app-pafds"] li,
.app-shell[class*="app-pafds"] td {
    color: #2d425e;
    line-height: 1.62;
}

.app-pafds-shell .app-shell th,
.app-pafds-shell .app-shell label,
.app-shell[class*="app-pafds"] th,
.app-shell[class*="app-pafds"] label {
    color: #15304f;
}

.app-pafds-shell .app-shell .muted,
.app-pafds-shell .app-shell .tiny,
.app-shell[class*="app-pafds"] .muted,
.app-shell[class*="app-pafds"] .tiny {
    color: #536a88 !important;
}

.app-pafds-shell .app-shell input,
.app-pafds-shell .app-shell select,
.app-pafds-shell .app-shell textarea,
.app-shell[class*="app-pafds"] input,
.app-shell[class*="app-pafds"] select,
.app-shell[class*="app-pafds"] textarea {
    font-size: 0.98rem;
    line-height: 1.45;
}

.app-pafds-shell .app-shell input::placeholder,
.app-pafds-shell .app-shell textarea::placeholder,
.app-shell[class*="app-pafds"] input::placeholder,
.app-shell[class*="app-pafds"] textarea::placeholder {
    color: #647b98;
    opacity: 1;
}

.app-commandbar {
    padding: 12px 0 18px;
}

.app-shell {
    gap: 34px;
    padding: 38px;
    border-radius: 30px;
}

.app-main {
    gap: 30px;
}

.app-header {
    gap: 22px;
}

.app-header h1 {
    font-size: clamp(2rem, 3vw, 2.65rem);
    margin: 8px 0 10px;
}

.app-subtitle {
    max-width: 84ch;
    font-size: 1.02rem;
    line-height: 1.65;
}

.app-grid {
    gap: 24px;
}

.app-stack {
    gap: 20px;
}

.app-card {
    padding: 26px;
    border-radius: 20px;
}

.app-kpis {
    gap: 14px;
    margin-top: 18px;
}

.app-kpi {
    min-height: 64px;
    padding: 14px 16px;
}

body.app-pafds-shell .app-shell .table-wrap,
body.app-pafds-shell .data-card .table-wrap {
    padding: 8px;
    border-radius: 16px;
}

.app-shell .table-wrap .dark-table,
.app-shell .table-wrap .dash-table {
    min-width: 860px;
}

.app-shell .dark-table th,
.app-shell .dark-table td,
.dash-table th,
.dash-table td {
    padding: 14px 16px;
}

.app-shell .pill,
.app-btn,
.rail-link,
.app-search button,
.app-search input,
.app-search select {
    min-height: 44px;
}

.app-shell .pill {
    padding-top: 10px;
    padding-bottom: 10px;
}

.app-shell.app-mobile-ops .app-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.app-shell.app-mobile-ops .activity-table td {
    vertical-align: top;
}

@media (max-width: 1200px) {
    body.app-pafds-shell:not(.embed) .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .app-shell {
        padding: 28px;
        gap: 24px;
    }

    .app-card {
        padding: 22px;
    }

    .app-shell .table-wrap .dark-table,
    .app-shell .table-wrap .dash-table {
        min-width: 760px;
    }
}

@media (max-width: 820px) {
    body.app-pafds-shell:not(.embed) .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-shell {
        padding: 18px;
        gap: 18px;
        border-radius: 22px;
    }

    .app-header h1 {
        font-size: clamp(1.55rem, 8vw, 2rem);
    }

    .app-subtitle {
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .app-card {
        padding: 18px;
        border-radius: 16px;
    }

    .app-shell .table-wrap {
        padding: 4px;
    }

    .app-shell .table-wrap .dark-table,
    .app-shell .table-wrap .dash-table {
        min-width: 640px;
    }

    .app-shell .pill,
    .app-btn,
    .rail-link,
    .app-search button,
    .app-search input,
    .app-search select {
        min-height: 48px;
    }
}

/* PAFDS internal density refresh 2026-06-05.
   Loaded after pafds-shell.css, so keep these selectors scoped and decisive. */
body.app-pafds-shell .app-shell,
body.app-pafds-shell .staff-dashboard .dashboard-shell,
body.app-pafds-shell .app-shell[class*="app-pafds"] {
    gap: clamp(18px, 2vw, 28px) !important;
    padding: clamp(18px, 2.1vw, 30px) !important;
    border-radius: 8px !important;
}

body.app-pafds-shell .app-main {
    gap: clamp(18px, 1.8vw, 26px) !important;
}

body.app-pafds-shell .app-header {
    gap: 14px !important;
}

body.app-pafds-shell .app-header h1 {
    margin: 4px 0 6px !important;
    font-size: clamp(1.72rem, 2.2vw, 2.28rem) !important;
    letter-spacing: 0 !important;
}

body.app-pafds-shell .app-subtitle {
    max-width: 92ch !important;
    font-size: 0.99rem !important;
    line-height: 1.58 !important;
}

body.app-pafds-shell .app-grid,
body.app-pafds-shell .app-stack {
    gap: clamp(14px, 1.4vw, 22px) !important;
}

body.app-pafds-shell .app-card,
body.app-pafds-shell .panel,
body.app-pafds-shell .quick-card,
body.app-pafds-shell .spotlight,
body.app-pafds-shell .mini {
    padding: clamp(16px, 1.65vw, 24px) !important;
    border-radius: 8px !important;
}

body.app-pafds-shell .app-kpis {
    gap: 12px !important;
}

body.app-pafds-shell .app-kpi {
    min-height: 58px !important;
    padding: 12px 14px !important;
}

@media (min-width: 821px) {
    body.app-pafds-shell .table-wrap,
    body.app-pafds-shell .table-shell {
        padding: 6px !important;
        border-radius: 8px !important;
    }
}

body.app-pafds-shell .app-shell .dark-table th,
body.app-pafds-shell .app-shell .dark-table td,
body.app-pafds-shell .app-shell .dash-table th,
body.app-pafds-shell .app-shell .dash-table td {
    padding: 12px 14px !important;
    line-height: 1.45 !important;
}

body.app-pafds-shell .app-shell .pill,
body.app-pafds-shell .app-btn,
body.app-pafds-shell .rail-link,
body.app-pafds-shell .app-search button,
body.app-pafds-shell .app-search input,
body.app-pafds-shell .app-search select {
    min-height: 40px !important;
}

@media (max-width: 820px) {
    body.app-pafds-shell .app-shell,
    body.app-pafds-shell .staff-dashboard .dashboard-shell,
    body.app-pafds-shell .app-shell[class*="app-pafds"] {
        padding: 16px !important;
        gap: 16px !important;
    }

    body.app-pafds-shell .app-card,
    body.app-pafds-shell .panel,
    body.app-pafds-shell .quick-card,
    body.app-pafds-shell .spotlight,
    body.app-pafds-shell .mini {
        padding: 16px !important;
    }
}