/* ============================================================================
   FILE: theme.css
   PATH: public/css/theme.css
   VERSION: 2.0.0
   DATE CREATED: 2026-08-18
   DATE REVISED: 2026-08-19
   PURPOSE: ICAO Clean Light theme layer for the AviaSAFE platform.
            Loaded LAST (before </head>) so it enforces the locked light
            design system on top of variables.css / main.css / shell.css and
            page-level inline styles. The platform is light-only: no .dark
            class is ever applied and no theme switcher exists.
   AUTHOR: AviaSAFE Systems
   ============================================================================ */

/* ========== BASE / PAGE CANVAS ========== */
:root {
    --color-bg: #f8fafc;
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-text-strong: #0f172a;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-focus: #0284c7;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-strong);
}

::selection {
    background: rgba(2, 132, 199, 0.18);
    color: #0f172a;
}

/* ========== NAVIGATION / HEADER ========== */
.app-header {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
}
.app-header .logo {
    color: var(--color-text-strong);
}
.app-header nav a {
    color: #334155;
}
.app-header nav a:hover,
.app-header nav a.active {
    color: var(--color-focus);
}

/* ========== CARDS / SURFACES ========== */
.card,
.feature-card,
.stat-card,
.table-card,
.chart-wrapper,
.light-card,
.detail-grid,
.risk-preview,
.filter-bar,
.header-bar,
.empty-state,
.error-state,
.loading-state,
.bio-modal-card,
[class$="-modal-card"],
[class*="modal-card"] {
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: var(--color-text);
}

/* Card titles & metrics — high-contrast slate-900 */
.stat-card .num,
.stat-card h3,
.stat-card h4,
.table-card h3,
.table-card h4,
.detail-grid .value,
.detail-field .value,
.page-header .value,
.header-bar .value,
.card h1, .card h2, .card h3, .card h4,
.light-card h3, .light-card h4,
.page h1, .page h2, .page h3, .page h4 {
    color: var(--color-text-strong);
}

/* ========== KPI / STATUS BADGES (clean pastel + bold dark labels) ========== */
.badge-warning {
    background: #fef3c7;
    color: #92400e;
}
.badge-danger,
.badge-critical {
    background: #fee2e2;
    color: #991b1b;
}
.badge-success,
.badge-completed {
    background: #dcfce7;
    color: #166534;
}
.badge-new,
.badge-processing,
.badge-high,
.badge-medium {
    background: #ffedd5;
    color: #c2410c;
}
.badge-default {
    background: #f1f5f9;
    color: #475569;
}
.status-badge.status-active {
    background: #dcfce7;
    color: #166534;
}
.status-badge.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* ========== FORMS ========== */
.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.filter-bar input,
.filter-bar select,
.filter-bar textarea {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: var(--color-text);
}
.form-control::placeholder,
.form-group input::placeholder {
    color: var(--color-text-muted);
}
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.filter-bar textarea:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}
.form-group label {
    color: #1e293b;
}
.form-hint {
    color: var(--color-text-muted);
}

/* ========== TABLES ========== */
.table th,
.table-card th {
    background: #f8fafc;
    color: #475569;
}
.table td,
.table-card td,
.detail-grid td {
    border-bottom-color: var(--color-border);
}
.table tr:hover td,
.table-card tr:hover td,
.detail-grid tr:hover td {
    background: #f8fafc;
}

/* ========== MODALS ========== */
.modal-backdrop,
.modal-overlay {
    background: rgba(2, 6, 23, 0.6);
}
.modal,
.modal-content,
.modal-dialog {
    background: #ffffff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.modal-header,
.modal-footer {
    border-color: var(--color-border);
}
.modal-title,
.modal-header h2,
.modal-header h3,
.modal-header h4 {
    color: var(--color-text-strong);
}

/* ========== FOOTER ========== */
/* Compact light footer. Total height ~64-80px, balancing the ~64px header.
   Subtly differentiated from the page canvas (--color-bg #f8fafc) with a
   slightly deeper slate tint and a hairline top border. Loaded last so it
   wins over main.css / shell.css / global.css on every page. */
.app-footer,
.dashboard-footer {
    background: var(--color-gray-100);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-sm) 0;
}

.app-footer .footer-links {
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.app-footer .footer-links a,
.dashboard-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.app-footer .footer-links a:hover,
.dashboard-footer a:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

.app-footer .footer-divider {
    color: var(--color-gray-400);
}

.app-footer p,
.dashboard-footer p {
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.app-footer p strong,
.dashboard-footer p strong {
    color: var(--color-text-strong);
}

/* ========== STICKY FOOTER (flush bottom) ========== */
/* Enforce a full-viewport flex column so the footer always sits at the very
   bottom of the viewport on short pages, and width:100% so it never leaves a
   gap on the right. min-height:100dvh covers mobile URL-bar variance while the
   100vh line keeps older browsers happy. Loaded last so these win over
   main.css / global.css / shell.css on every page. */
html, body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main,
.main-content,
.page-content,
.container,
#main-content {
    flex: 1 0 auto;
}

footer,
.app-footer,
.dashboard-footer {
    margin-top: auto !important;
    width: 100%;
}

/* ========== SCROLLBARS ========== */
body,
.shell-content {
    scrollbar-color: #cbd5e1 var(--color-bg);
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}