/* style.css - ITRACK Simple Design — OPTIMIZED SPACING SYSTEM */

/* ══════════════════════════════════════════════════════════════════════
   SPACING SYSTEM REFERENCE
   ══════════════════════════════════════════════════════════════════════
   
   CONTAINER WIDTH: 1140px (unified across all pages)
   HORIZONTAL PADDING: 40px (desktop) / 32px (tablet) / 24px (mobile)
   
   SECTION PADDING HIERARCHY:
   • Large Hero:      96px vertical (landing pages)
   • Main Content:    80px vertical (primary sections)
   • Secondary:       64px vertical (sub-sections)
   • Compact:         48px vertical (tight spacing)
   • Minimal:         32px vertical (final touches)
   
   GRID GAPS:
   • Primary grid:    24px (cards, charts)
   • Secondary grid:  18px (compact layouts)
   • Minimal grid:    12px (tight spacing)
   
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ── */
    --bg: #f8f9fb;
    --surface: #ffffff;
    --text: #000000;
    --muted: #6b7280;
    --blue: #0d1b2a;
    --blue-soft: #f3f4f6;
    --yellow: #0d1b2a;
    --red: #0d1b2a;
    --border: #e5e7eb;
    --shadow: 0 20px 70px rgba(13, 27, 42, 0.08);
    
    /* ── Spacing (CSS Variables for consistency) ── */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    --space-6xl: 96px;
    
    /* ── Layout ── */
    --container-max: 1140px;
    --padding-desktop: 40px;
    --padding-tablet: 32px;
    --padding-mobile: 24px;
    
    /* ── Grid Gaps ── */
    --gap-tight: 12px;
    --gap-normal: 18px;
    --gap-loose: 24px;
}

* {
    box-sizing: border-box;
}

/* Hard safety net: .site-header and footer.site-footer both use
   backdrop-filter, which makes them a containing block for any
   position:fixed descendant (like the off-canvas .site-nav below).
   That means the nav's "translateX(100%) to push it off-screen" trick
   no longer measures against the real viewport - it can bleed past the
   page's right edge and make the ENTIRE page horizontally scrollable,
   which is what let the closed mobile menu peek out when swiping right.
   Clamping overflow-x here at the document level closes that off
   regardless of which element ends up causing the overflow. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    color: var(--text);
    line-height: 1.75;
}

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

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

/* ══════════════════════════════════════════════════════════════════════
   CONTAINER & LAYOUT (UNIFIED)
   ══════════════════════════════════════════════════════════════════════ */

.container,
.wrap {
    width: min(var(--container-max), 100%);
    margin: 0 auto;
    padding: 0;
}

/* Reduce overly-wide side gutters on pages that use the global .container/.wrap */
@media (min-width: 1024px) {
    /* Tighten gutters on wide screens */
    .container,
    .wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}



/* ── HEADER ────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(219, 227, 238, 0.95);
    backdrop-filter: blur(10px);
    padding: 0 var(--padding-desktop);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    padding: var(--space-lg) 0;
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--blue);
    flex-shrink: 0;
    text-decoration: none;
}

.brand .logo-img,
.logo-img {
    height: 52px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
}

.site-nav {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.site-nav a {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: var(--space-md) 0;
    color: var(--text);
    position: relative;
    transition: color 0.2s ease;
}

.site-nav a.two-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.site-nav a.two-line span {
    line-height: 1.2;
}

@media (max-width: 880px) {
    .site-nav {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }
    .header-inner {
        padding: var(--space-md) 0;
    }
}

.site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: width 0.25s ease;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--blue);
}

.site-nav a:hover::after,
.site-nav a.active::after {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE MAIN & HERO SECTIONS
   ══════════════════════════════════════════════════════════════════════ */

.page-main {
    padding: 0 var(--padding-desktop);
}

/* ── HERO: Large padding for prominence ── */
.hero {
    position: relative;
    padding: var(--space-6xl) 0;
    overflow: hidden;
    background-image: url('assets/images/lunsad pic.jpg');
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.65) 45%, rgba(255,255,255,0.85) 100%),
                radial-gradient(circle at top left, rgba(13, 27, 42, 0.16), transparent 30%),
                radial-gradient(circle at bottom right, rgba(13, 27, 42, 0.12), transparent 22%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}

.hero-copy {
    padding: var(--space-2xl);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 36px;
    box-shadow: 0 30px 50px rgba(13, 27, 42, 0.12);
    border: 1px solid #e5e7eb;
}

.hero-copy .eyebrow {
    display: inline-flex;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.8rem;
    color: var(--blue);
    margin-bottom: var(--space-xl);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(3rem, 4.5vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.hero-copy p {
    max-width: 660px;
    margin: var(--space-lg) 0 var(--space-2xl);
    color: var(--muted);
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.hero-panel {
    position: relative;
}

.hero-panel-card {
    padding: var(--space-2xl);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 34px;
    box-shadow: 0 26px 60px rgba(13, 27, 42, 0.12);
    border: 1px solid #e5e7eb;
}

.hero-panel-card h3 {
    margin: 0;
    font-size: 1.55rem;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: var(--space-md);
}

.hero-panel-card p {
    color: var(--muted);
    margin: 0 0 var(--space-lg);
    line-height: 1.75;
}

.feature-panel {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    box-shadow: var(--shadow);
    border-radius: 28px;
    padding: var(--space-2xl);
    backdrop-filter: blur(12px);
}

.feature-item {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid rgba(219, 227, 238, 0.95);
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: var(--space-md);
}

.feature-item span {
    color: var(--muted);
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.btn-primary,
.btn-secondary,
.btn-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-2xl);
    border-radius: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 18px 30px rgba(13, 27, 42, 0.15);
}

.btn-secondary {
    background: #f5f8ff;
    color: var(--text);
}

.btn-status {
    background: #f5f8ff;
    color: var(--text);
}

.btn-status.danger {
    background: var(--red);
    color: #fff;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-status:hover {
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS & LAYOUT
   ══════════════════════════════════════════════════════════════════════ */

.overview,
.section-cards,
.section-table,
.section-admin,
.section-status {
    margin-top: var(--space-2xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.overview h2,
.section-title {
    font-size: 2.1rem;
    margin-bottom: var(--space-md);
}

.overview p {
    max-width: 720px;
    color: var(--muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS & GRIDS
   ══════════════════════════════════════════════════════════════════════ */

.card-grid,
.status-grid,
.chapter-cards,
.admin-grid {
    display: grid;
    gap: var(--gap-loose);
}

.card,
.status-card,
.panel,
.map-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    padding: var(--space-2xl);
    box-shadow: var(--shadow);
}

.card h3,
.status-card h3,
.panel h3,
.map-card h3 {
    margin-top: 0;
}

.card p,
.status-card p,
.panel p,
.chapter-preview {
    color: var(--muted);
}

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

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

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

.card {
    min-height: 220px;
}

.map-card {
    margin-top: var(--space-2xl);
}

.map-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    margin-top: var(--space-md);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ══════════════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ══════════════════════════════════════════════════════════════════════ */

.form-group {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

label {
    font-weight: 600;
}

input[type='text'],
input[type='password'],
textarea,
select {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: var(--space-md) var(--space-lg);
    background: #fff;
    color: var(--text);
    font: inherit;
}

textarea {
    min-height: 180px;
    resize: vertical;
}

button[type='submit'] {
    min-width: 170px;
}

/* ══════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════ */

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

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

th {
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════════════════ */

.alert {
    padding: var(--space-lg) var(--space-2xl);
    border-radius: 22px;
    margin-bottom: var(--space-2xl);
    background: rgba(13, 27, 42, 0.08);
    color: var(--text);
    border: 1px solid rgba(13, 27, 42, 0.14);
}

.alert.warning {
    background: rgba(13, 27, 42, 0.10);
    border-color: rgba(13, 27, 42, 0.20);
}

.alert.danger {
    background: rgba(13, 27, 42, 0.12);
    border-color: rgba(13, 27, 42, 0.24);
}

/* ══════════════════════════════════════════════════════════════════════
   ANALYTICS SECTION
   ══════════════════════════════════════════════════════════════════════ */

.analytics-header {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.06), #ffffff 90%);
    border: 1px solid rgba(13, 27, 42, 0.10);
    border-radius: 36px;
    padding: var(--space-3xl);
    box-shadow: 0 28px 70px rgba(13, 27, 42, 0.08);
}

.analytics-hero-copy {
    display: grid;
    gap: var(--space-md);
}

.analytics-header > div {
    max-width: 780px;
}

.analytics-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-normal);
}

.hero-card {
    padding: var(--space-lg);
    border-radius: 26px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 24px 40px rgba(13, 27, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero-card-accent {
    background: linear-gradient(180deg, #0d1b2a, #1a2b3a);
    color: #ffffff;
    border-color: transparent;
}

.hero-card span,
.hero-card-accent span {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    opacity: 0.85;
}

.hero-card strong,
.hero-card-accent strong {
    font-size: 2.2rem;
    line-height: 1.05;
}

.hero-card p,
.hero-card-accent p {
    color: inherit;
    opacity: 0.85;
    margin: 0;
}

.analytics-meta,
.boxed-meta {
    font-size: 0.95rem;
    color: var(--muted);
    margin-top: var(--space-md);
}

.boxed-meta {
    margin: 0;
}

.analytics-panel {
    background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 32px;
    padding: var(--space-3xl);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-2xl);
}

.readonly-field-group .readonly-field {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: var(--space-md) var(--space-lg);
    color: var(--text);
    font-weight: 600;
}

.analytics-panel-top {
    margin-bottom: var(--space-2xl);
}

.analytics-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(170px, 1fr));
    gap: var(--gap-normal);
    align-items: end;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 28px;
    padding: var(--space-lg);
}

.analytics-filters .form-group {
    margin-bottom: 0;
}

.analytics-filters button,
.analytics-filters .btn-secondary {
    width: 100%;
}

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

.summary-card {
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    border: none;
    border-radius: 32px;
    padding: var(--space-xl);
    box-shadow: 0 24px 45px rgba(13, 27, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--gap-normal);
}

.summary-card span {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.summary-card strong {
    font-size: 2rem;
    color: var(--text);
    line-height: 1.1;
}

.summary-meta {
    display: grid;
    gap: var(--space-xs);
    color: var(--muted);
    font-size: 0.95rem;
}

.analytics-chart-card {
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    border: 1px solid #e5e7eb;
    border-radius: 34px;
    padding: var(--space-3xl);
    box-shadow: 0 28px 60px rgba(13, 27, 42, 0.08);
}

.chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid #e5e7eb;
}

.chart-caption {
    margin: var(--space-xs) 0 0;
    color: var(--muted);
}

.chart-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.chart-tab {
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: var(--text);
    padding: var(--space-md) var(--space-lg);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.chart-tab:hover {
    background: rgba(13, 27, 42, 0.06);
    transform: translateY(-1px);
}

.chart-tab.active {
    background: var(--blue);
    color: #fff;
    border-color: transparent;
}

.download-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(13, 27, 42, 0.08);
}

.chart-canvas {
    width: 100%;
    max-width: 100%;
    height: 360px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 100%);
    box-shadow: inset 0 0 0 1px #e5e7eb;
}

.hidden {
    display: none !important;
}

.analytics-hero {
    padding: var(--space-6xl) 0 var(--space-5xl);
    background: linear-gradient(180deg, rgba(13, 27, 42, 0.08), rgba(255, 255, 255, 0.96));
}

.hero-copy {
    max-width: 920px;
    margin-bottom: var(--space-xl);
}

.hero-copy .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.82rem;
    color: var(--blue);
    margin-bottom: var(--space-md);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2.8rem, 4vw, 4.4rem);
    line-height: 1.02;
}

.hero-copy p {
    margin: var(--space-lg) 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 780px;
}

.hero-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.filter-pill {
    background: #ffffff;
    border: 1px solid rgba(219, 227, 238, 0.95);
    border-radius: 999px;
    color: var(--text);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    font-weight: 700;
}

.filter-pill.active,
.filter-pill:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-1px);
}

.custom-range {
    display: none;
    align-items: center;
    gap: var(--space-md);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: var(--space-md) var(--space-lg);
}

.custom-range label {
    font-size: 0.85rem;
    color: var(--muted);
}

.custom-range input {
    width: 140px;
}

.alert-banner {
    background: rgba(13, 27, 42, 0.06);
    border: 1px solid rgba(13, 27, 42, 0.12);
    border-radius: 28px;
    color: #0d1b2a;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-xl);
}

.alert-banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.metric-sections {
    padding-bottom: var(--space-5xl);
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.metric-card {
    padding: var(--space-2xl);
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 24px 45px rgba(13, 27, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--gap-normal);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-normal);
}

.metric-label {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    margin-bottom: var(--space-md);
}

.metric-card h2 {
    margin: 0;
    font-size: 3.2rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.metric-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.7;
}

.status-pill {
    padding: var(--space-md) var(--space-lg);
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.status-safe {
    background: rgba(13, 27, 42, 0.08);
    color: #0d1b2a;
}

.status-warning {
    background: rgba(13, 27, 42, 0.12);
    color: #0d1b2a;
}

.status-danger {
    background: rgba(13, 27, 42, 0.16);
    color: #0d1b2a;
}

.status-loading {
    background: rgba(13, 27, 42, 0.10);
    color: #0d1b2a;
}

.chart-section {
    display: grid;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.chart-panel {
    background: #ffffff;
    border-radius: 32px;
    padding: var(--space-3xl);
    box-shadow: 0 24px 45px rgba(13, 27, 42, 0.08);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-normal);
}

.chart-panel-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

.chart-panel-header p {
    margin: var(--space-xs) 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.monitor-map {
    width: 100%;
    height: 420px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
}

.map-section {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-xl);
}

.map-panel,
.alerts-panel {
    background: #ffffff;
    border-radius: 32px;
    padding: var(--space-3xl);
    box-shadow: 0 24px 45px rgba(13, 27, 42, 0.08);
}

.alerts-table-wrap {
    overflow-x: auto;
    margin-top: var(--gap-normal);
}

.alerts-table {
    width: 100%;
    border-collapse: collapse;
}

.alerts-table th,
.alerts-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 0.95rem;
}

.alerts-table thead {
    background: #f3f4f6;
}

.history-pill {
    display: inline-flex;
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.history-danger {
    background: rgba(13, 27, 42, 0.16);
    color: #0d1b2a;
}

.history-warning {
    background: rgba(13, 27, 42, 0.12);
    color: #0d1b2a;
}

.history-safe {
    background: rgba(13, 27, 42, 0.08);
    color: #0d1b2a;
}

.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(219, 227, 238, 0.95);
    font-size: 0.9rem;
    color: var(--muted);
}

.conversion-info {
    font-weight: 600;
}

.time-info {
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════ */

.about-hero {
    padding: var(--space-5xl) 0 var(--space-3xl);
    background-image: linear-gradient(180deg, rgba(31,86,255,0.06), rgba(255,255,255,0.98));
}

.about-hero .hero-copy {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

.mv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    margin-top: var(--gap-normal);
}

.mv-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(219,227,238,0.95);
    border-radius: 22px;
    padding: var(--space-xl);
    box-shadow: 0 22px 50px rgba(21,67,132,0.06);
}

.mv-card h3 {
    margin-top: 0;
    font-size: 1.45rem;
    color: var(--blue);
}

.mv-card--accent {
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
    border-top: 4px solid var(--yellow);
}

/* ── MISSION & VISION PAGE ─────────────────────── */

.mv-hero {
    position: relative;
    padding: var(--space-6xl) 0;
    overflow: hidden;
}

.mv-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/images/lunsad pic.jpg');
    background-size: cover;
    background-position: center;
    filter: saturate(.95) contrast(.95);
}

.mv-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,82,162,0.45), rgba(255,255,255,0.32));
}

.mv-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--padding-desktop);
}

.mv-hero__content {
    max-width: 780px;
    color: #052043;
}

.mv-hero .eyebrow {
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mv-hero h1 {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    margin: var(--space-xs) 0 var(--space-md);
}

.mv-hero__sub {
    font-weight: 700;
    color: #eaf2ff;
}

.mv-hero__lead {
    color: rgba(255,255,255,0.9);
    max-width: 640px;
}

.mv-section {
    padding: var(--space-5xl) 0;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
}

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

.mv-card {
    background: linear-gradient(180deg, #fff, #f8fbff);
    border-radius: 18px;
    padding: var(--space-xl);
    transition: transform .28s ease, box-shadow .28s ease;
    border: 1px solid rgba(219, 227, 238, 0.95);
}

.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(21, 67, 132, 0.12);
}

.mv-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(246, 252, 255, 0.6));
    color: var(--blue);
    margin-bottom: var(--space-md);
    box-shadow: 0 8px 22px rgba(21, 67, 132, 0.05);
}

.mv-card h3 {
    margin: 0 0 var(--space-xs);
    font-size: 1.05rem;
}

.mv-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.mv-vision {
    padding: var(--space-5xl) 0;
    background: linear-gradient(180deg, rgba(245, 252, 250, 0.7), rgba(255, 255, 255, 0.98));
    border-top: 1px solid rgba(219, 227, 238, 0.9);
}

.mv-vision__inner {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-3xl);
    border-radius: 20px;
}

.mv-vision h2 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
    color: var(--text);
}

.mv-vision__lead {
    font-size: 1.25rem;
    color: var(--muted);
    line-height: 1.7;
}

.kw {
    font-weight: 700;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
}

.kw--blue {
    color: #0f4fe6;
}

.kw--green {
    color: #0f9d58;
}

.kw--gold {
    color: #b7790b;
}

/* Filipino cultural texture */
.page-main::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%);
    background-size: 24px 24px;
    mix-blend-mode: overlay;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER (UNIFIED PADDING)
   ══════════════════════════════════════════════════════════════════════ */

footer.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(209, 213, 219, 0.95);
    z-index: 90;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

footer.site-footer .footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 12px var(--padding-desktop);
}

footer.site-footer .footer-note,
footer.site-footer .footer-center,
footer.site-footer .footer-right {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

footer.site-footer .footer-note {
    text-align: left;
    flex: 1 1 260px;
    color: #374151;
}

footer.site-footer .footer-center,
footer.site-footer .footer-right {
    text-align: right;
    flex: 0 0 auto;
    white-space: nowrap;
}

footer.site-footer .footer-link {
    color: var(--ink-3);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

footer.site-footer .footer-link:hover {
    color: var(--blue);
    text-decoration: underline;
}

@media (max-width: 720px) {
    footer.site-footer {
        font-size: 12px;
    }

    /* Keep the note + both links on ONE row instead of wrapping to
       multiple lines, and CENTER that row instead of pinning it to the
       left edge - on mobile the footer only has one short line of
       content, so left-aligned made it look stuck in the corner instead
       of sitting in the middle of the bar like the rest of the site's
       mobile layout does. If the content is ever too wide to all fit at
       once, the bar itself scrolls horizontally (overflow-x:auto is
       scoped to just this element) rather than clipping text or
       wrapping it - and because the scroll is contained here, it can't
       bleed out into a page-wide horizontal scroll the way the
       off-canvas nav bug did. */
    footer.site-footer .footer-bar {
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 10px 16px;
    }

    footer.site-footer .footer-note,
    footer.site-footer .footer-center,
    footer.site-footer .footer-right {
        text-align: center;
        flex: 0 0 auto;
        white-space: nowrap;
        max-width: none;
    }

    footer.site-footer .footer-note {
        order: 1;
    }
    footer.site-footer .footer-center {
        order: 2;
    }
    footer.site-footer .footer-right {
        order: 3;
    }

    footer.site-footer .footer-link {
        font-size: 0.85rem;
    }
}

/* Covers the full range of phone widths in one place: iPhone Pro Max /
   large Android (~430px) down through iPhone SE / small Android (~320px).
   Shrinks type a bit further at this width so more of the line is
   visible before you need to scroll, while staying on one row. */
@media (max-width: 400px) {
    footer.site-footer .footer-bar {
        padding: 8px 12px;
        gap: 8px;
    }

    footer.site-footer .footer-note {
        font-size: 10.5px;
    }

    footer.site-footer .footer-link {
        font-size: 0.75rem;
    }
}

footer.site-footer .footer-link:hover {
    color: var(--blue);
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */

.mv-card {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp .6s forwards;
}

.mv-card:nth-child(1) { animation-delay: 0.06s }
.mv-card:nth-child(2) { animation-delay: 0.12s }
.mv-card:nth-child(3) { animation-delay: 0.18s }
.mv-card:nth-child(4) { animation-delay: 0.24s }
.mv-card:nth-child(5) { animation-delay: 0.30s }
.mv-card:nth-child(6) { animation-delay: 0.36s }
.mv-card:nth-child(7) { animation-delay: 0.42s }
.mv-card:nth-child(8) { animation-delay: 0.48s }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS (Progressive scaling)
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet: 1100px and below */
@media (max-width: 1100px) {
    :root {
        --padding-desktop: 32px;
    }

    .analytics-filters {
        grid-template-columns: 1fr 1fr;
    }

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

    .metric-row {
        grid-template-columns: 1fr;
    }

    .map-section {
        grid-template-columns: 1fr;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .mv-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Tablet: 860px and below */
@media (max-width: 860px) {
    :root {
        --padding-desktop: 32px;
    }

    .analytics-header,
    .analytics-filters,
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .chart-head {
        flex-direction: column;
        align-items: stretch;
    }

    .card-grid,
    .chapter-cards,
    .status-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }

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

    .analytics-hero-cards {
        grid-template-columns: 1fr;
    }
}

/* Mobile: 720px and below */
@media (max-width: 720px) {
    :root {
        --padding-desktop: 24px;
    }

    .site-header {
        padding: 0 var(--padding-desktop);
    }

    .page-main {
        padding: 0 var(--padding-desktop);
    }

    .header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding: var(--space-md) 0;
    }

    .site-nav {
        justify-content: flex-start;
        overflow-x: auto;
        position: static;
        transform: none;
    }

    .analytics-hero {
        padding: var(--space-5xl) 0 var(--space-2xl);
    }

    .hero-copy h1 {
        font-size: 2.6rem;
    }

    .hero-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-range {
        width: 100%;
        flex-wrap: wrap;
    }

    .custom-range input {
        width: 100%;
    }

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

    .mv-hero {
        padding: var(--space-3xl) 0;
    }

    .mv-hero__inner {
        flex-direction: column;
    }

    .mv-cards {
        grid-template-columns: 1fr;
    }

    .mv-hero h1 {
        font-size: 2rem;
    }

    /* NOTE: footer.site-footer rules for this breakpoint live in the
       single @media (max-width: 720px) block near the top of the footer
       section above. A second, conflicting block used to live here,
       forcing flex-wrap:nowrap + white-space:nowrap + overflow-x:auto,
       which overrode the correct wrapping rules (later source order wins
       at equal specificity) and turned the footer into a clipped,
       horizontally-scrolling strip instead of letting the text wrap. */
}

/* Small Mobile: 460px and below */
@media (max-width: 460px) {
    :root {
        --padding-desktop: 16px;
    }

    .hero {
        padding: var(--space-5xl) 0;
    }

    .hero-inner {
        gap: var(--space-md);
    }

    .hero-copy {
        padding: var(--space-lg);
    }

    .hero-copy h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }

    .analytics-hero {
        padding: var(--space-3xl) 0 var(--space-xl);
    }

    .analytics-header {
        padding: var(--space-xl);
    }

    .analytics-panel {
        padding: var(--space-xl);
    }

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

    .metric-card {
        padding: var(--space-lg);
    }

    .mv-section {
        padding: var(--space-3xl) 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE NAV / HAMBURGER MENU
   Appended at the end of the file so it reliably overrides the earlier
   .site-nav / .header-inner responsive rules above (later source order
   wins when specificity is equal), without needing to touch or risk
   breaking any of the existing layout rules elsewhere in this file.
   ══════════════════════════════════════════════════════════════════════ */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}
.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 24;
}
.nav-backdrop.nav-open {
    opacity: 1;
    pointer-events: auto;
}

body.nav-locked {
    overflow: hidden;
}

@media (max-width: 880px) {
    .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) 0;
    }

    .nav-toggle { display: flex; }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        transform: translateX(100%);
        height: 100vh;
        width: min(300px, 82vw);
        background: var(--surface);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: var(--space-xl);
        padding: 96px var(--padding-mobile) var(--padding-mobile);
        box-shadow: -12px 0 40px rgba(13, 27, 42, .15);
        transition: transform 0.3s ease;
        z-index: 25;
        overflow-x: visible;
        overflow-y: auto;
    }

    .site-nav.nav-open {
        transform: translateX(0);
    }

    .site-nav a {
        padding: var(--space-sm) 0;
        width: 100%;
        font-size: 1rem;
    }

    .site-nav a.two-line {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }
}