/* ========================================
   教育業｜家長客訴治理系統

   Step 5
   Dashboard Prototype
======================================== */


/* ========================================
   1. Base
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-family);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    line-height: 1.3;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    margin-top: 0;
}

img {
    display: block;
    max-width: 100%;
}


/* ========================================
   2. App Layout
======================================== */

.app-layout {
    min-height: 100vh;
}

.app-main {
    min-width: 0;
}


/* ========================================
   3. Sidebar
======================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary);
    color: var(--color-white);
}

.sidebar-brand {
    padding: var(--space-6) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-group-name {
    margin-bottom: var(--space-2);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-sm);
}

.sidebar-system-name {
    margin-bottom: var(--space-2);
    color: var(--color-white);
    font-size: var(--font-size-xl);
}

.sidebar-system-en {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--font-size-xs);
}

.sidebar-nav {
    padding: var(--space-4);
}

.nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 46px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--font-size-sm);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.10);
}

.nav-link.active {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.16);
    font-weight: 700;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.10);
    font-size: var(--font-size-sm);
}

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--font-size-xs);
}

.sidebar-footer p {
    margin-bottom: 0;
}


/* ========================================
   4. Topbar
======================================== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar-eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
}

.topbar-title {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.topbar-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.status-dot {
    width: 9px;
    height: 9px;
    background-color: var(--color-secondary);
    border-radius: 50%;
}


/* ========================================
   5. Page Content
======================================== */

.page-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-12);
}

.page-heading {
    margin-bottom: var(--space-6);
}

.page-label,
.section-eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.page-heading h2 {
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.page-description {
    max-width: 800px;
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
}


/* ========================================
   6. Demo Alert
======================================== */

.demo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background-color: var(--color-warning-bg);
    border: 1px solid rgba(164, 91, 0, 0.18);
    border-radius: var(--radius-md);
}

.demo-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--color-white);
    background-color: var(--color-warning);
    border-radius: 50%;
    font-weight: 700;
}

.demo-alert h3 {
    margin-bottom: var(--space-1);
    color: var(--color-warning);
    font-size: var(--font-size-base);
}

.demo-alert p {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}


/* ========================================
   7. Sections
======================================== */

.dashboard-section {
    margin-bottom: var(--space-8);
}

.section-heading,
.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.section-heading h3,
.card-heading h3 {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
}


/* ========================================
   8. KPI Cards
======================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.kpi-card {
    position: relative;
    min-width: 0;
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.kpi-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    content: "";
    background-color: var(--color-secondary);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.kpi-card-warning::before {
    background-color: var(--color-warning);
}

.kpi-card-danger::before {
    background-color: var(--color-danger);
}

.kpi-label {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.kpi-value {
    margin-bottom: var(--space-1);
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.kpi-card-danger .kpi-value {
    color: var(--color-danger);
}

.kpi-card-warning .kpi-value {
    color: var(--color-warning);
}

.kpi-note {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}


/* ========================================
   9. Main Dashboard Grid
======================================== */

.dashboard-grid {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.dashboard-card {
    min-width: 0;
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}


/* ========================================
   10. Distribution
======================================== */

.distribution-list {
    display: grid;
    gap: var(--space-4);
}

.distribution-info {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.distribution-info strong {
    color: var(--color-primary);
}

.progress-track {
    overflow: hidden;
    height: 8px;
    background-color: var(--color-border-light);
    border-radius: var(--radius-pill);
}

.progress-bar {
    height: 100%;
    background-color: var(--color-secondary);
    border-radius: var(--radius-pill);
}

.progress-success {
    background-color: var(--color-success);
}

.progress-warning {
    background-color: var(--color-warning);
}

.progress-danger {
    background-color: var(--color-danger);
}


/* ========================================
   11. Severity
======================================== */

.severity-list {
    display: grid;
    gap: var(--space-2);
}

.severity-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.severity-row:last-child {
    border-bottom: 0;
}

.severity-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.severity-name {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.severity-l0,
.severity-l1 {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.severity-l2,
.severity-l3 {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.severity-l4,
.severity-l5 {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}

.critical-note {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background-color: var(--color-danger-bg);
    border-radius: var(--radius-md);
}

.critical-note strong {
    color: var(--color-danger);
}

.critical-note p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}


/* ========================================
   12. Case Table
======================================== */

.table-container {
    overflow-x: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.case-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.case-table th,
.case-table td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
}

.case-table th {
    color: var(--color-text-secondary);
    background-color: var(--color-surface-soft);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.case-table tbody tr:last-child td {
    border-bottom: 0;
}

.case-table tbody tr:hover {
    background-color: var(--color-surface-soft);
}


/* ========================================
   13. Table Severity
======================================== */

.table-severity,
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.table-severity.l1 {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.table-severity.l2,
.table-severity.l3 {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.table-severity.l5 {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}


/* ========================================
   14. Case Status
======================================== */

.status-processing {
    color: var(--color-info);
    background-color: var(--color-info-bg);
}

.status-followup {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.status-closed {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.status-escalated {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}


/* ========================================
   15. Governance Reminder
======================================== */

.governance-reminder {
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-secondary);
    border-radius: var(--radius-lg);
}

.governance-reminder h3 {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.governance-reminder p:last-child {
    margin-bottom: 0;
    color: var(--color-text-secondary);
}


/* ========================================
   16. Footer
======================================== */

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    border-top: 1px solid var(--color-border);
}

.app-footer p {
    margin-bottom: 0;
}


/* ========================================
   17. Accessibility
======================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
}


/* ========================================
   Step 6
   Cases Page
======================================== */

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

.page-heading-action {
    flex-shrink: 0;
}


/* ========================================
   Buttons
======================================== */

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.primary-button {
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.primary-button:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.secondary-button {
    color: var(--color-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.secondary-button:hover {
    background-color: var(--color-surface-soft);
}

.disabled-link {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}


/* ========================================
   Mini Statistics
======================================== */

.case-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.mini-stat-card {
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.mini-stat-card p {
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.mini-stat-card strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
}

.mini-stat-card span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.mini-stat-danger {
    border-color: rgba(179, 38, 30, 0.25);
    background-color: var(--color-danger-bg);
}

.mini-stat-danger strong {
    color: var(--color-danger);
}


/* ========================================
   Filter Panel
======================================== */

.filter-panel {
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.filter-panel-header h3 {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.static-ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    color: var(--color-info);
    background-color: var(--color-info-bg);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.filter-description {
    margin-bottom: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}


/* ========================================
   Form
======================================== */

.filter-form {
    display: grid;
    gap: var(--space-4);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.form-field input,
.form-field select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-field input::placeholder {
    color: var(--color-text-muted);
}

.form-field input:focus,
.form-field select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(40, 127, 122, 0.12);
    outline: none;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-3);
}


/* ========================================
   Full Cases Table
======================================== */

.cases-full-table {
    min-width: 1050px;
}

.case-id {
    color: var(--color-primary);
    font-weight: 700;
}

.critical-case-label {
    display: block;
    width: max-content;
    margin-top: var(--space-1);
    padding: 2px var(--space-2);
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.critical-case-row {
    background-color: rgba(253, 236, 234, 0.35);
}

.critical-case-row:hover {
    background-color: var(--color-danger-bg) !important;
}

.table-severity.l0 {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.danger-reminder {
    border-left-color: var(--color-danger);
}

.danger-reminder .section-eyebrow {
    color: var(--color-danger);
}


/* ========================================
   Step 8
   Case Detail Page
======================================== */

.case-overview-card {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.case-overview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.case-overview-header h3 {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.case-status-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.case-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.case-meta-grid > div {
    padding: var(--space-3);
    background-color: var(--color-surface-soft);
    border-radius: var(--radius-md);
}

.case-meta-grid span {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.case-meta-grid strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}


/* ========================================
   Detail Sections
======================================== */

.detail-section {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.detail-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.detail-section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.detail-section-header h3 {
    margin-bottom: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.detail-section-header p:last-child {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}


/* ========================================
   Detail Fields
======================================== */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.detail-field {
    padding: var(--space-4);
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.detail-field span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.detail-field p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.detail-field-full {
    grid-column: 1 / -1;
}


/* ========================================
   Evidence Detail
======================================== */

.evidence-detail-section {
    border-left: 5px solid var(--color-info);
}

.evidence-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.evidence-detail-card {
    padding: var(--space-4);
    background-color: var(--color-info-bg);
    border: 1px solid rgba(36, 107, 142, 0.15);
    border-radius: var(--radius-md);
}

.evidence-type {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-info);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.evidence-detail-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}


/* ========================================
   Risk Detail
======================================== */

.risk-detail-section {
    border-left: 5px solid var(--color-warning);
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.risk-card {
    padding: var(--space-4);
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.risk-card span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.risk-card strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
}

.risk-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}


/* ========================================
   AI Assistive Analysis
======================================== */

.ai-analysis-section {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-info);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ai-analysis-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ai-analysis-header h3 {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.ai-analysis-notice {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.ai-analysis-button {
    width: 100%;
}

.ai-analysis-status {
    padding: var(--space-3);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-soft);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.ai-analysis-status[data-state="ERROR"] {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}

.ai-analysis-result {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.ai-analysis-result[hidden] {
    display: none;
}

.ai-analysis-field {
    padding: var(--space-4);
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.ai-analysis-field h4 {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.ai-analysis-field p,
.ai-analysis-field ul {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.ai-analysis-field ul {
    padding-left: var(--space-5);
}

.ai-analysis-field-full {
    grid-column: 1 / -1;
}

.ai-analysis-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.ai-analysis-flag {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.human-review-required {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.safety-escalation-required {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}

.safety-escalation-clear {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}


/* ========================================
   Case Link
======================================== */

.case-link {
    text-decoration: none;
}

.case-link:hover {
    text-decoration: underline;
}


/* ========================================
   Tablet
======================================== */

@media (min-width: 700px) {

    .kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .case-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-field {
        grid-column: 1 / -1;
    }

    .filter-actions {
        grid-column: 1 / -1;
    }

    .case-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .risk-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ai-analysis-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .ai-analysis-button {
        width: auto;
    }

    .ai-analysis-result,
    .ai-analysis-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   Desktop
======================================== */

@media (min-width: 900px) {

    .app-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .sidebar-nav {
        overflow-y: auto;
        padding: var(--space-5) var(--space-4);
    }

    .nav-list {
        grid-template-columns: 1fr;
    }

    .topbar {
        min-height: 76px;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    .page-content {
        padding: var(--space-10) var(--space-8) var(--space-16);
    }

    .kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr);
    }

    .dashboard-card {
        padding: var(--space-6);
    }

    .app-footer {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}


@media (min-width: 1050px) {

    .filter-form {
        grid-template-columns:
            minmax(250px, 2fr)
            repeat(3, minmax(150px, 1fr));
    }

    .search-field {
        grid-column: auto;
    }

    .filter-actions {
        grid-column: 1 / -1;
    }

    .case-overview-card,
    .detail-section {
        padding: var(--space-6);
    }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 599px) {

    .nav-list {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .demo-alert {
        flex-direction: column;
    }

    .section-heading,
    .card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-footer {
        flex-direction: column;
    }

    .page-heading {
        flex-direction: column;
    }

    .page-heading-action {
        width: 100%;
    }

    .page-heading-action .primary-button {
        width: 100%;
    }

    .case-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-panel-header {
        flex-direction: column;
    }

    .filter-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .filter-actions button {
        width: 100%;
    }

    .case-overview-header {
        flex-direction: column;
    }

    .detail-section-header {
        flex-direction: column;
    }

    .risk-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   Step 9
   Risk Assessment Page
======================================== */


/* ========================================
   Risk Case Summary
======================================== */

.risk-case-summary {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.risk-case-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.risk-case-summary-header h3 {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.risk-case-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.risk-case-meta > div {
    padding: var(--space-3);
    background-color: var(--color-surface-soft);
    border-radius: var(--radius-md);
}

.risk-case-meta span {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.risk-case-meta strong {
    color: var(--color-text);
    font-size: var(--font-size-sm);
}


/* ========================================
   Critical Flag
======================================== */

.critical-flag-panel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background-color: var(--color-danger-bg);
    border: 1px solid rgba(179, 38, 30, 0.22);
    border-left: 5px solid var(--color-danger);
    border-radius: var(--radius-lg);
}

.critical-flag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--color-white);
    background-color: var(--color-danger);
    border-radius: 50%;
    font-size: var(--font-size-lg);
    font-weight: 800;
}

.critical-flag-content {
    min-width: 0;
}

.critical-flag-content .section-eyebrow {
    color: var(--color-danger);
}

.critical-flag-content h3 {
    margin-bottom: var(--space-2);
    color: var(--color-danger);
    font-size: var(--font-size-xl);
}

.critical-flag-content > p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.critical-flag-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
}

.critical-flag-status span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.critical-flag-status strong {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}


/* ========================================
   Risk Scale
======================================== */

.risk-scale-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.risk-scale-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.risk-scale-card strong {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.risk-scale-card span {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.risk-scale-zero strong {
    color: var(--color-text-secondary);
    background-color: var(--color-surface-soft);
}

.risk-scale-low strong {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.risk-scale-medium strong {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.risk-scale-high strong {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}


/* ========================================
   Seven Risk Dimensions
======================================== */

.risk-assessment-list {
    display: grid;
    gap: var(--space-4);
}

.risk-assessment-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.risk-assessment-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.risk-assessment-content {
    flex: 1;
    min-width: 0;
}

.risk-assessment-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.risk-assessment-title h4 {
    margin-bottom: 2px;
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.risk-assessment-title p {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.risk-assessment-description {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.risk-score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 800;
}

.risk-score-low {
    color: var(--color-success);
    background-color: var(--color-success-bg);
}

.risk-score-medium {
    color: var(--color-warning);
    background-color: var(--color-warning-bg);
}

.risk-score-high {
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
}


/* ========================================
   Risk Level Track
======================================== */

.risk-level-track {
    overflow: hidden;
    height: 7px;
    background-color: var(--color-border-light);
    border-radius: var(--radius-pill);
}

.risk-level-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
}

.level-1 {
    width: 33.333%;
    background-color: var(--color-success);
}

.level-2 {
    width: 66.666%;
    background-color: var(--color-warning);
}

.level-3 {
    width: 100%;
    background-color: var(--color-danger);
}


/* ========================================
   Risk Summary
======================================== */

.risk-summary-panel {
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    background-color: var(--color-primary);
    border-radius: var(--radius-lg);
    color: var(--color-white);
}

.risk-summary-panel .section-eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

.risk-summary-panel h3 {
    margin-bottom: var(--space-5);
    color: var(--color-white);
    font-size: var(--font-size-xl);
}

.risk-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.risk-summary-grid > div {
    padding: var(--space-4);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
}

.risk-summary-grid span,
.risk-summary-grid small {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--font-size-xs);
}

.risk-summary-grid strong {
    display: block;
    margin: var(--space-1) 0;
    color: var(--color-white);
    font-size: var(--font-size-xl);
}

.risk-summary-grid .text-warning {
    color: #ffd180;
}

.risk-summary-grid .text-success {
    color: #b9f6ca;
}


/* ========================================
   Step 9 Tablet
======================================== */

@media (min-width: 700px) {

    .risk-case-meta {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .risk-scale-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .risk-summary-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* ========================================
   Step 9 Desktop
======================================== */

@media (min-width: 1050px) {

    .risk-case-summary,
    .critical-flag-panel,
    .risk-summary-panel {
        padding: var(--space-6);
    }

}


/* ========================================
   Step 9 Mobile
======================================== */

@media (max-width: 599px) {

    .risk-case-summary-header {
        flex-direction: column;
    }

    .critical-flag-panel {
        flex-direction: column;
    }

    .critical-flag-status {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .risk-assessment-item {
        flex-direction: column;
    }

    .risk-assessment-number {
        width: 38px;
        height: 38px;
    }

    .risk-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/* ========================================
   Step 10
   Follow-up & Closure
======================================== */


/* ========================================
   Follow-up Summary
======================================== */

.follow-up-summary {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-3);

    margin-bottom:
        var(--space-6);
}


.follow-up-summary > div {
    padding:
        var(--space-4);

    background-color:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);
}


.follow-up-summary span {
    display: block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}


.follow-up-summary strong {
    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);
}



/* ========================================
   Follow-up Sections
======================================== */

.follow-up-section {
    margin-bottom:
        var(--space-6);

    padding:
        var(--space-5);

    background-color:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);
}



/* ========================================
   Timeline
======================================== */

.follow-up-timeline {
    display: grid;

    gap:
        var(--space-5);
}


.timeline-item {
    position: relative;

    display: grid;

    grid-template-columns:
        20px
        minmax(0, 1fr);

    gap:
        var(--space-3);
}


.timeline-marker {
    width: 14px;

    height: 14px;

    margin-top:
        var(--space-4);

    background-color:
        var(--color-secondary);

    border:
        3px solid
        var(--color-secondary-light);

    border-radius:
        50%;
}


.timeline-card {
    padding:
        var(--space-4);

    background-color:
        var(--color-surface-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);
}


.timeline-header {
    display: flex;

    flex-direction: column;

    gap:
        var(--space-3);

    margin-bottom:
        var(--space-4);
}


.timeline-header span {
    display: block;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}


.timeline-header strong {
    display: block;

    margin-top:
        var(--space-1);

    color:
        var(--color-primary);
}


.timeline-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-3);
}


.timeline-grid > div {
    padding:
        var(--space-3);

    background-color:
        var(--color-surface);

    border-radius:
        var(--radius-sm);
}


.timeline-grid span,
.timeline-note span {
    display: block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;
}


.timeline-grid p,
.timeline-note p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    line-height: 1.7;
}


.timeline-note {
    margin-top:
        var(--space-3);

    padding:
        var(--space-3);

    background-color:
        var(--color-surface);

    border-radius:
        var(--radius-sm);
}



/* ========================================
   Follow-up Grid
======================================== */

.follow-up-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-3);
}


.follow-up-field {
    padding:
        var(--space-4);

    background-color:
        var(--color-surface-soft);

    border:
        1px solid
        var(--color-border-light);

    border-radius:
        var(--radius-md);
}


.follow-up-field span {
    display: block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;
}


.follow-up-field strong {
    display: block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-primary);
}


.follow-up-field p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    line-height: 1.6;
}



/* ========================================
   Child Outcome
======================================== */

.child-outcome-section {
    border-left:
        5px solid
        var(--color-secondary);
}



/* ========================================
   Commitment Table
======================================== */

.commitment-table {
    width: 100%;

    min-width: 850px;

    border-collapse:
        collapse;
}


.commitment-table th,
.commitment-table td {
    padding:
        var(--space-3)
        var(--space-4);

    text-align:
        left;

    border-bottom:
        1px solid
        var(--color-border-light);

    font-size:
        var(--font-size-sm);
}


.commitment-table th {
    color:
        var(--color-primary);

    background-color:
        var(--color-surface-soft);

    font-weight:
        700;
}


.commitment-table td {
    color:
        var(--color-text-secondary);
}



/* ========================================
   Closure Checklist
======================================== */

.closure-checklist {
    display: grid;

    gap:
        var(--space-3);
}


.closure-check-row {
    display: flex;

    flex-direction: column;

    gap:
        var(--space-2);

    padding:
        var(--space-4);

    background-color:
        var(--color-surface-soft);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);
}


.closure-check-row span {
    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);
}


.check-good {
    color:
        var(--color-success);
}


.check-warning {
    color:
        var(--color-warning);
}



/* ========================================
   Closure Review
======================================== */

.closure-review-section {
    border-left:
        5px solid
        var(--color-warning);
}


.closure-review-grid {
    display: grid;

    grid-template-columns:
        1fr;

    gap:
        var(--space-3);
}


.closure-review-item {
    display: flex;

    align-items: flex-start;

    gap:
        var(--space-3);

    padding:
        var(--space-4);

    background-color:
        var(--color-success-bg);

    border:
        1px solid
        rgba(46, 125, 50, 0.16);

    border-radius:
        var(--radius-md);
}


.closure-review-item span {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 26px;

    height: 26px;

    color:
        var(--color-white);

    background-color:
        var(--color-success);

    border-radius:
        50%;

    font-weight:
        800;
}


.closure-review-item p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);
}


.closure-review-pending {
    background-color:
        var(--color-warning-bg);

    border-color:
        rgba(164, 91, 0, 0.18);
}


.closure-review-pending span {
    background-color:
        var(--color-warning);
}



/* ========================================
   Closure Decision
======================================== */

.closure-decision {
    margin-top:
        var(--space-5);

    padding:
        var(--space-5);

    background-color:
        var(--color-warning-bg);

    border-radius:
        var(--radius-md);
}


.closure-decision span {
    display: block;

    margin-bottom:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-size:
        var(--font-size-xs);
}


.closure-decision strong {
    display: block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-warning);

    font-size:
        var(--font-size-lg);
}


.closure-decision p {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-size-sm);

    line-height: 1.7;
}



/* ========================================
   Reopen
======================================== */

.reopen-note {
    padding:
        var(--space-4);

    background-color:
        var(--color-info-bg);

    border:
        1px solid
        rgba(36, 107, 142, 0.14);

    border-radius:
        var(--radius-md);
}


.reopen-note p {
    margin: 0;

    color:
        var(--color-text-secondary);

    line-height: 1.7;
}



/* ========================================
   Follow-up Actions
======================================== */

.follow-up-actions {
    display: flex;

    flex-direction: column;

    gap:
        var(--space-5);

    margin-top:
        var(--space-6);

    padding:
        var(--space-5);

    background-color:
        var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);
}



/* ========================================
   Tablet
======================================== */

@media (min-width: 700px) {

    .follow-up-summary {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }


    .timeline-header {
        flex-direction:
            row;

        align-items:
            flex-start;

        justify-content:
            space-between;
    }


    .timeline-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .follow-up-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .closure-review-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .closure-check-row {
        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;
    }


    .follow-up-actions {
        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;
    }

}



/* ========================================
   Desktop
======================================== */

@media (min-width: 1050px) {

    .follow-up-section {
        padding:
            var(--space-6);
    }


    .follow-up-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 599px) {

    .follow-up-summary {
        grid-template-columns:
            1fr
            1fr;
    }


    .follow-up-summary > div:first-child {
        grid-column:
            1 / -1;
    }


    .main-form-actions .primary-button,
    .main-form-actions .secondary-button {
        width: 100%;
    }

}

/* ========================================
   Step 12
   Baseline Analysis
======================================== */


/* ========================================
   Evidence Boundary
======================================== */

.baseline-evidence-alert {
    display: flex;

    align-items: flex-start;

    gap: var(--space-4);

    margin-bottom: var(--space-6);

    padding: var(--space-5);

    background-color: var(--color-warning-bg);

    border: 1px solid rgba(164, 91, 0, 0.18);

    border-left: 5px solid var(--color-warning);

    border-radius: var(--radius-lg);
}


.baseline-evidence-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    color: var(--color-white);

    background-color: var(--color-warning);

    border-radius: 50%;

    font-weight: 800;
}


.baseline-evidence-alert h3 {
    margin-bottom: var(--space-2);

    color: var(--color-primary);
}


.baseline-evidence-alert p:last-child {
    margin-bottom: 0;

    color: var(--color-text-secondary);

    line-height: 1.8;
}



/* ========================================
   Baseline KPI
======================================== */

.baseline-kpi-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.baseline-kpi-card {
    padding: var(--space-5);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.baseline-kpi-card span {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


.baseline-kpi-card strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-primary);

    font-size: var(--font-size-2xl);

    line-height: 1.3;
}


.baseline-kpi-card small {
    color: var(--color-text-muted);
}



/* ========================================
   Historical Inventory Table
======================================== */

.baseline-table-wrap {
    overflow-x: auto;

    width: 100%;
}


.baseline-table {
    width: 100%;

    min-width: 680px;

    border-collapse: collapse;
}


.baseline-table th,
.baseline-table td {
    padding: var(--space-3) var(--space-4);

    text-align: left;

    border-bottom: 1px solid var(--color-border);
}


.baseline-table thead th {
    color: var(--color-primary);

    background-color: var(--color-surface-soft);

    font-size: var(--font-size-sm);
}


.baseline-table tbody td {
    color: var(--color-text-secondary);
}


.baseline-table tbody tr:hover {
    background-color: var(--color-surface-soft);
}


.baseline-table tfoot th {
    color: var(--color-primary);

    background-color: var(--color-secondary-light);

    border-bottom: 0;
}


.baseline-table-note {
    margin-top: var(--space-4);

    padding: var(--space-4);

    background-color: var(--color-info-bg);

    border-radius: var(--radius-md);
}


.baseline-table-note strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-primary);
}


.baseline-table-note p {
    margin: 0;

    color: var(--color-text-secondary);

    line-height: 1.8;
}



/* ========================================
   Data Readiness
======================================== */

.baseline-readiness-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.baseline-readiness-card {
    padding: var(--space-5);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);
}


.baseline-readiness-card h4 {
    margin-bottom: var(--space-4);

    color: var(--color-primary);

    font-size: var(--font-size-lg);
}


.baseline-readiness-card ul {
    margin-bottom: 0;

    padding-left: var(--space-5);
}


.baseline-readiness-card li {
    margin-bottom: var(--space-2);

    color: var(--color-text-secondary);

    line-height: 1.7;
}


.baseline-readiness-card li:last-child {
    margin-bottom: 0;
}


.baseline-known {
    background-color: var(--color-success-bg);

    border-color: rgba(46, 125, 50, 0.16);
}


.baseline-unknown {
    background-color: var(--color-warning-bg);

    border-color: rgba(164, 91, 0, 0.16);
}



/* ========================================
   Data Required
======================================== */

.baseline-data-required-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.baseline-data-required-grid article {
    display: flex;

    align-items: flex-start;

    gap: var(--space-3);

    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.baseline-data-required-grid article > span {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 36px;

    height: 36px;

    color: var(--color-white);

    background-color: var(--color-primary);

    border-radius: var(--radius-sm);

    font-size: var(--font-size-xs);

    font-weight: 800;
}


.baseline-data-required-grid h4 {
    margin-bottom: var(--space-1);

    color: var(--color-primary);
}


.baseline-data-required-grid p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.7;
}



/* ========================================
   Future Analysis
======================================== */

.baseline-future-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.baseline-future-grid article {
    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.baseline-future-grid h4 {
    margin-bottom: var(--space-2);

    color: var(--color-secondary);
}


.baseline-future-grid p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.7;
}



/* ========================================
   Final Evidence Boundary
======================================== */

.baseline-final-boundary {
    margin-top: var(--space-6);

    padding: var(--space-5);

    background-color: var(--color-primary);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}


.baseline-final-boundary strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-white);

    font-size: var(--font-size-lg);
}


.baseline-final-boundary p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    line-height: 1.8;
}



/* ========================================
   Tablet
======================================== */

@media (min-width: 700px) {

    .baseline-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .baseline-readiness-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .baseline-data-required-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .baseline-future-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ========================================
   Desktop
======================================== */

@media (min-width: 1050px) {

    .baseline-kpi-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .baseline-data-required-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .baseline-future-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 599px) {

    .baseline-evidence-alert {
        flex-direction: column;
    }


    .baseline-kpi-card {
        padding: var(--space-4);
    }


    .baseline-readiness-card {
        padding: var(--space-4);
    }


    .baseline-final-boundary {
        padding: var(--space-4);
    }

}

/* ========================================
   Step 13
   Settings
======================================== */


/* ========================================
   Settings Notice
======================================== */

.settings-notice {
    margin-bottom: var(--space-6);

    padding: var(--space-5);

    background-color: var(--color-info-bg);

    border: 1px solid rgba(36, 107, 142, 0.18);

    border-left: 5px solid var(--color-info);

    border-radius: var(--radius-lg);
}


.settings-notice strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-primary);

    font-size: var(--font-size-lg);
}


.settings-notice p {
    margin: 0;

    color: var(--color-text-secondary);

    line-height: 1.8;
}



/* ========================================
   Governance Principles
======================================== */

.settings-principle-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.settings-principle-grid article {
    display: flex;

    align-items: flex-start;

    gap: var(--space-3);

    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.settings-principle-grid article > span {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 36px;

    height: 36px;

    color: var(--color-white);

    background-color: var(--color-primary);

    border-radius: var(--radius-sm);

    font-size: var(--font-size-xs);

    font-weight: 800;
}


.settings-principle-grid h4 {
    margin-bottom: var(--space-1);

    color: var(--color-primary);
}


.settings-principle-grid p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.7;
}



/* ========================================
   Role Table
======================================== */

.settings-role-table-wrap {
    overflow-x: auto;

    width: 100%;
}


.settings-role-table {
    width: 100%;

    min-width: 760px;

    border-collapse: collapse;
}


.settings-role-table th,
.settings-role-table td {
    padding: var(--space-3) var(--space-4);

    text-align: left;

    border-bottom: 1px solid var(--color-border);
}


.settings-role-table thead th {
    color: var(--color-primary);

    background-color: var(--color-surface-soft);

    font-size: var(--font-size-sm);
}


.settings-role-table tbody td {
    color: var(--color-text-secondary);

    vertical-align: top;
}


.settings-role-table tbody tr:hover {
    background-color: var(--color-surface-soft);
}


.settings-note {
    margin-top: var(--space-4);

    padding: var(--space-4);

    background-color: var(--color-warning-bg);

    border-radius: var(--radius-md);
}


.settings-note strong {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-primary);
}


.settings-note p {
    margin: 0;

    color: var(--color-text-secondary);

    line-height: 1.8;
}



/* ========================================
   Severity
======================================== */

.settings-severity-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-3);
}


.settings-severity-grid article {
    display: flex;

    align-items: center;

    gap: var(--space-3);

    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.settings-severity-grid strong {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-width: 42px;

    height: 42px;

    color: var(--color-white);

    background-color: var(--color-primary);

    border-radius: var(--radius-sm);
}


.settings-severity-grid span {
    color: var(--color-text-secondary);
}


.settings-severity-critical {
    background-color: var(--color-danger-bg) !important;

    border-color: rgba(179, 38, 30, 0.2) !important;
}


.settings-severity-critical strong {
    background-color: var(--color-danger);
}


.settings-severity-critical span {
    color: var(--color-danger);

    font-weight: 700;
}



/* ========================================
   Critical Box
======================================== */

.settings-critical-box {
    margin-top: var(--space-4);

    padding: var(--space-5);

    background-color: var(--color-danger-bg);

    border: 1px solid rgba(179, 38, 30, 0.18);

    border-left: 5px solid var(--color-danger);

    border-radius: var(--radius-lg);
}


.settings-critical-box h4 {
    margin-bottom: var(--space-2);

    color: var(--color-danger);

    font-size: var(--font-size-lg);
}


.settings-critical-box p:last-child {
    margin-bottom: 0;

    color: var(--color-text-secondary);

    line-height: 1.8;
}



/* ========================================
   AI Governance
======================================== */

.settings-ai-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.settings-ai-grid article {
    padding: var(--space-5);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);
}


.settings-ai-grid h4 {
    margin-bottom: var(--space-4);

    color: var(--color-primary);

    font-size: var(--font-size-lg);
}


.settings-ai-grid ul {
    margin-bottom: 0;

    padding-left: var(--space-5);
}


.settings-ai-grid li {
    margin-bottom: var(--space-2);

    color: var(--color-text-secondary);

    line-height: 1.7;
}


.settings-ai-grid li:last-child {
    margin-bottom: 0;
}


.settings-ai-allowed {
    background-color: var(--color-success-bg);

    border-color: rgba(46, 125, 50, 0.16) !important;
}


.settings-ai-prohibited {
    background-color: var(--color-danger-bg);

    border-color: rgba(179, 38, 30, 0.16) !important;
}



/* ========================================
   Data Governance
======================================== */

.settings-data-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-4);
}


.settings-data-grid article {
    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.settings-data-grid h4 {
    margin-bottom: var(--space-2);

    color: var(--color-secondary);
}


.settings-data-grid p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.7;
}



/* ========================================
   Future Configuration
======================================== */

.settings-future-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-3);
}


.settings-future-list article {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-4);

    background-color: var(--color-surface-soft);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);
}


.settings-future-list h4 {
    margin-bottom: var(--space-1);

    color: var(--color-primary);
}


.settings-future-list p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.7;
}


.settings-future-list article > span {
    flex-shrink: 0;

    padding: 6px 10px;

    color: var(--color-text-muted);

    background-color: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-xs);

    font-weight: 700;
}



/* ========================================
   Tablet
======================================== */

@media (min-width: 700px) {

    .settings-principle-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .settings-severity-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .settings-ai-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .settings-data-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ========================================
   Desktop
======================================== */

@media (min-width: 1050px) {

    .settings-severity-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .settings-data-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}



/* ========================================
   Mobile
======================================== */

@media (max-width: 599px) {

    .settings-notice {
        padding: var(--space-4);
    }


    .settings-principle-grid article {
        padding: var(--space-3);
    }


    .settings-ai-grid article {
        padding: var(--space-4);
    }


    .settings-critical-box {
        padding: var(--space-4);
    }


    .settings-future-list article {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ========================================
   Follow-up Commitment Table Wrapper
   Mobile Horizontal Scroll Fix
======================================== */

.table-wrapper {
    width: 100%;
    overflow-x: auto;

    background-color: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    -webkit-overflow-scrolling: touch;
}

/* Phase 2C Module 1 authenticated workflow */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); background: var(--color-background); }
.auth-card, .module-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.auth-card { width: min(100%, 30rem); }
.module-shell { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: var(--space-5) 0; }
.module-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.module-panel { margin-bottom: var(--space-4); }
.module-form { display: grid; gap: var(--space-3); }
.module-form label { display: grid; gap: var(--space-2); font-weight: 700; }
.module-form input:not([type='checkbox']), .module-form select { width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.module-inline { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: end; }
.module-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.privacy-note { padding: var(--space-3); border-left: .25rem solid var(--color-warning); background: var(--color-surface); }
.module-kicker { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-weight: 700; }
.module-field { display: grid; gap: var(--space-2); margin: var(--space-4) 0; font-weight: 700; }
.module-field select { width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); }
.risk-signal-list { display: grid; gap: var(--space-3); }
.risk-signal-card { border: 1px solid var(--color-border); border-left: .25rem solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-4); }
.risk-signal-card h3 { margin-top: 0; }
.communication-draft-list { display: grid; gap: var(--space-2); padding-left: 0; list-style: none; }
.draft-list-button { width: 100%; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; }
.draft-list-button:hover, .draft-list-button:focus-visible { border-color: var(--color-primary); }
.communication-version-list { display: grid; gap: var(--space-3); }
.communication-version-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.communication-version-card h3 { margin-top: 0; }
.communication-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.case-cost-list { display: grid; gap: var(--space-2); padding-left: 0; list-style: none; }
.case-cost-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.case-cost-totals article { display: grid; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.case-cost-totals strong { font-size: var(--font-size-xl); }
.case-cost-entry-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.case-cost-entry-card { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.field-help { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.module-form textarea { width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; resize: vertical; }
@media (max-width: 599px) { .module-header { align-items: flex-start; flex-direction: column; } }
.prevention-action-card { display: block; margin: .75rem 0; padding: 1rem; border: 1px solid var(--border-color, #d8dee8); border-radius: .75rem; background: var(--surface-color, #fff); }
.management-recommendation-card { display: block; margin: .75rem 0; padding: 1rem; border: 1px solid var(--border-color, #d8dee8); border-radius: .75rem; background: var(--surface-color, #fff); }
.improvement-project-card { display: block; margin: .75rem 0; padding: 1rem; border: 1px solid var(--border-color, #d8dee8); border-radius: .75rem; background: var(--surface-color, #fff); }
.reputation-response-card { display:block; margin:.75rem 0; padding:1rem; border:1px solid var(--border-color,#d8dee8); border-radius:.75rem; background:var(--surface-color,#fff); }