/* ============================================================
   RESQ 911 Cebu — Light Theme (White + Amber/Orange Accent)
   ============================================================
   Place this <link> AFTER each page's <style> block so
   these rules cascade last and override inline dark-theme styles.
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
    /* ── Brand / Primary Accent (warm amber-orange) ── */
    --primary:          #D4880C;
    --primary-dark:     #B87300;
    --primary-light:    #FFF6E6;
    --primary-hover:    #C07A00;
    --secondary:        #E8A020;
    --accent:           #D4880C;

    /* ── Semantic Action Colors ── */
    --success:          #2E7D32;   /* positive / confirm  */
    --success-hover:    #1B5E20;
    --danger:           #C62828;   /* negative / delete   */
    --danger-hover:     #B71C1C;
    --warning:          #F9A825;
    --info:             #1565C0;

    /* ── Neutral / Button gray ── */
    --neutral:          #E8E8E8;
    --neutral-hover:    #D0D0D0;
    --neutral-text:     #555555;

    /* ── Legacy var overrides (used throughout inline CSS) ── */
    --cebu-blue:        #D4880C;   /* was blue ▸ now amber accent   */
    --cebu-gold:        #D4880C;   /* stays amber accent            */
    --cebu-red:         #C62828;   /* kept red for danger            */
    --dark:             #212121;
    --light:            #F8F9FA;
    --bg-gradient:      #FFFFFF;   /* replaces dark gradient         */
    --card-bg:          #FFFFFF;
    --card-border:      rgba(0, 0, 0, 0.08);
    --shadow:           0 2px 12px rgba(0, 0, 0, 0.08);

    /* ── Surfaces & Glass (override dark glass) ── */
    --glass:            #FFFFFF;
    --glass-border:     rgba(0, 0, 0, 0.08);
    --surface-1:        rgba(0, 0, 0, 0.03);
    --surface-2:        rgba(0, 0, 0, 0.04);
    --surface-3:        rgba(0, 0, 0, 0.06);
    --stroke:           rgba(0, 0, 0, 0.10);
    --stroke-2:         rgba(0, 0, 0, 0.14);

    /* ── Text Colors ── */
    --text:             #212121;
    --text-dark:        #212121;
    --text-primary:     #212121;
    --text-secondary:   #555555;
    --text-muted:       #888888;
    --text-main:        #212121;
    --text-bright:      #D4880C;
    --muted:            rgba(0, 0, 0, 0.60);
    --muted-2:          rgba(0, 0, 0, 0.45);

    /* ── Borders & Shadows ── */
    --border:           rgba(0, 0, 0, 0.10);
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:        0 8px 25px rgba(0, 0, 0, 0.10);

    /* ── Enterprise tokens (statistics page) ── */
    --bg-panel:         #FFFFFF;
    --radius:           14px;
    --radius-sm:        10px;
    --focus:            0 0 0 4px rgba(212, 136, 12, 0.20);
}


/* ===== BODY ===== */
body{
  background: #EEF1F4 !important;
  color: #333333 !important;
}

body::before {
    display: none !important;       /* remove dark-theme radial overlays */
}

/* cebustat waves */
.background-waves { display: none !important; }

/* particles overlay */
#particles-js { display: none !important; }
#bgCanvas     { display: none !important; }


/* ===== HEADER ===== */
header {
    background: #FFFFFF !important;
    border-bottom: 2px solid var(--primary) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
}

header.scrolled {
    background: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}


/* ── Logo Text ── */
.logo-text {
    background: linear-gradient(135deg, #212121 0%, var(--primary) 50%, #212121 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

.logo-text::after {
    background: linear-gradient(135deg, var(--primary) 0%, #CC7A00 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: var(--primary) !important;
}

/* ── Header title (liverecorded) ── */
.header-title {
    background: linear-gradient(135deg, #212121 0%, var(--primary) 50%, #212121 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* ── Auth / User welcome ── */
.auth-buttons .user-welcome {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border: 1px solid rgba(212, 136, 12, 0.2) !important;
}

/* Header user tag (liverecorded) */
.header-right .user-tag {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(212, 136, 12, 0.2) !important;
}


/* ===== BUTTONS — Logout / Negative Action ===== */
.auth-buttons .btn {
    background: linear-gradient(135deg, var(--danger) 0%, #E53935 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.25) !important;
    transition: all 0.25s ease !important;
}

.auth-buttons .btn:hover {
    background: linear-gradient(135deg, #E53935 0%, var(--danger) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.35) !important;
}


/* ===== HAMBURGER MENU TOGGLE ===== */
.menu-toggle {
    border-color: rgba(212, 136, 12, 0.3) !important;
    color: var(--primary) !important;
}

.menu-toggle:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary) !important;
}


/* ===== NAVIGATION BAR (dashboard, about) ===== */
.nav-icons {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(212, 136, 12, 0.15) !important;
}

.nav-icons a {
    background: var(--primary-light) !important;
    color: #333333 !important;
    border: 2px solid rgba(212, 136, 12, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.nav-icons a i {
    color: var(--primary) !important;
}

.nav-icons a:hover {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 6px 20px rgba(212, 136, 12, 0.25) !important;
}

.nav-icons a:hover i {
    color: #FFFFFF !important;
}


/* ── Nav links (about page) ── */
.nav-links {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(212, 136, 12, 0.15) !important;
}

.nav-links a {
    color: #333333 !important;
}

.nav-links a::before {
    background: linear-gradient(90deg, var(--primary), #E8A020) !important;
}

.nav-links a:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}


/* ── Nav toggle button ── */
.nav-toggle {
    background: var(--primary-light) !important;
    border-color: rgba(212, 136, 12, 0.3) !important;
    color: var(--primary) !important;
}

.nav-toggle:hover {
    background: rgba(212, 136, 12, 0.1) !important;
    border-color: var(--primary) !important;
}


/* ===== CARDS — Generic ===== */
.card,
.monitoring-card,
.team-card,
.emergency-card,
.video-card,
.stat-card,
.chart-card,
.table-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.card::before,
.monitoring-card::before,
.team-card::before,
.emergency-card::before,
.stat-card::before,
.video-card::before {
    background: linear-gradient(90deg, var(--primary), #E8A020) !important;
}

.card:hover,
.monitoring-card:hover,
.team-card:hover,
.emergency-card:hover,
.video-card:hover {
    box-shadow: 0 12px 32px rgba(212, 136, 12, 0.15) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}

.stat-card:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.12) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}


/* ── Card Content / Body ── */
.card-content,
.card-body {
    background: #FFFFFF !important;
    color: #333333 !important;
}


/* ── Card Headings ── */
.card h3,
.card-body h3,
.emergency-title {
    color: var(--primary) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--primary) !important;
}

/* ── Card Text ── */
.card p,
.card-body p,
.emergency-description {
    color: #555555 !important;
}

/* ── Card Meta ── */
.reporter-info,
.location-info,
.timestamp,
.card-meta {
    color: #666666 !important;
}

.card-meta i {
    color: var(--primary) !important;
}

.reporter-info i { color: var(--primary) !important; }
.location-info i { color: var(--success) !important; }
.timestamp i { color: var(--warning) !important; }

/* ── Card Icon Overlay ── */
.card-icon {
    background: #FFFFFF !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.card-icon i {
    color: var(--primary) !important;
}

/* ── Card Image Backgrounds ── */
.card-image {
    background: var(--primary-light) !important;
}

.media-container {
    background: linear-gradient(135deg, var(--primary-light), #FFF0D4) !important;
}


/* ===== ACTION BUTTONS ===== */

/* ── Positive / Confirm (Green) ── */
.btn-respond,
.btn-success,
button.success,
.btn-positive {
    background: linear-gradient(135deg, var(--success), #388E3C) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.2) !important;
    transition: all 0.25s ease !important;
}

.btn-respond:hover,
.btn-success:hover,
button.success:hover,
.btn-positive:hover {
    background: linear-gradient(135deg, #388E3C, var(--success-hover)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.35) !important;
}

/* ── Negative / Danger (Red) ── */
.btn-danger,
.close-btn,
button.danger {
    background: linear-gradient(135deg, var(--danger), #E53935) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.2) !important;
    transition: all 0.25s ease !important;
}

.btn-danger:hover,
button.danger:hover {
    background: linear-gradient(135deg, #E53935, var(--danger-hover)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.35) !important;
}

.close-btn:hover {
    background: linear-gradient(135deg, #E53935, var(--danger-hover)) !important;
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.35) !important;
}

/* ── Neutral Buttons (Gray) ── */
.btn-neutral,
button.neutral {
    background: var(--neutral) !important;
    color: var(--neutral-text) !important;
    border: 1px solid #D0D0D0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s ease !important;
}

.btn-neutral:hover,
button.neutral:hover {
    background: var(--neutral-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ── Primary Accent Buttons (Amber CTA) ── */
.card-learn-more,
.go-to-btn,
.btn-view,
.btn-back,
.back-btn,
.team-card .btn,
#getLocationBtn,
.control-btn {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(212, 136, 12, 0.2) !important;
    transition: all 0.25s ease !important;
}

.card-learn-more:hover,
.go-to-btn:hover,
.btn-view:hover,
.btn-back:hover,
.back-btn:hover,
.team-card .btn:hover,
#getLocationBtn:hover,
.control-btn:hover {
    background: linear-gradient(135deg, #E8A020, var(--primary-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 136, 12, 0.3) !important;
    color: #FFFFFF !important;
}

/* Report button override */
.btn-report {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    color: #FFFFFF !important;
}

.btn-report:hover {
    background: linear-gradient(135deg, #E8A020, var(--primary-dark)) !important;
    box-shadow: 0 6px 20px rgba(212, 136, 12, 0.3) !important;
}


/* ===== SLIDESHOW (dashboard) ===== */
.slideshow-wrapper {
    background: var(--primary-light) !important;
    border-bottom-color: var(--primary) !important;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--primary) !important;
    border-color: rgba(212, 136, 12, 0.3) !important;
    backdrop-filter: blur(6px) !important;
}

.nav-btn:hover {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
}


/* ===== RESCUE TEAMS STRIP (dashboard) ===== */
.rescue-teams-strip {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

.team-item {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.team-item:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.12) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}


/* ===== INTRO SECTION (dashboard) ===== */
.intro-section {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.intro-section:hover {
    box-shadow: 0 12px 32px rgba(212, 136, 12, 0.1) !important;
}

.intro-text {
    color: #333333 !important;
}

.intro-text h2 {
    background: linear-gradient(135deg, var(--primary) 0%, #E8A020 50%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.intro-text p {
    color: #555555 !important;
}

.intro-text strong {
    color: var(--primary) !important;
}


/* ===== HERO SECTIONS ===== */
.video-caption,
.dashboard-header {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.video-caption::before,
.dashboard-header::before {
    background: linear-gradient(90deg, var(--danger), var(--primary), #E8A020) !important;
}

.video-caption h1,
.dashboard-title {
    background: linear-gradient(135deg, var(--primary) 0%, #E8A020 50%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

.video-caption p,
.dashboard-subtitle {
    color: #555555 !important;
}

/* Page hero (liverecorded) */
.page-hero h1 {
    background: linear-gradient(135deg, var(--primary) 0%, #E8A020 50%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.page-hero p {
    color: #555555 !important;
}


/* ===== VIDEO WRAPPER (awareness) ===== */
.video-wrapper {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
}

.video-wrapper:hover {
    box-shadow: 0 12px 32px rgba(212, 136, 12, 0.15) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}


/* ===== STAT CHIPS (liverecorded) ===== */
.stat-chip {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #555555 !important;
}

.stat-chip i { color: var(--primary) !important; }
.stat-chip strong { color: #212121 !important; }


/* ===== MODALS ===== */
.modal-content {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    color: #333333 !important;
}

.modal-content h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.modal-content p {
    color: #444444 !important;
}

.modal-content img {
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.modal-content audio {
    background: #F5F5F5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Modal header/footer (liverecorded) */
.modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.modal-title {
    color: var(--primary) !important;
}

.modal-close {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #333333 !important;
}

.modal-close:hover {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #FFFFFF !important;
}

.modal-footer {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
    color: #666666 !important;
}

.modal-footer i { color: var(--primary) !important; }


/* ===== EMERGENCY BADGE ===== */
.emergency-badge {
    background: linear-gradient(135deg, var(--danger), #E53935) !important;
}

/* LIVE badge */
.badge-live {
    background: linear-gradient(135deg, var(--danger), #E53935) !important;
}


/* ===== FORM ELEMENTS (post_emergency) ===== */
.form-section {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.form-section::before {
    background: linear-gradient(90deg, var(--danger), var(--primary)) !important;
}

.form-section h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.form-section h2::after {
    background: linear-gradient(90deg, var(--primary), transparent) !important;
}

.form-section label {
    color: #333333 !important;
}

input, textarea, select {
    background: #FFFFFF !important;
    color: #333333 !important;
    border: 1px solid #D0D0D0 !important;
}

input::placeholder, textarea::placeholder {
    color: #999999 !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(212, 136, 12, 0.15) !important;
    background: #FFFFFF !important;
}

select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 20px 20px !important;

  padding-right: 50px !important;
  cursor: pointer !important;
}
select::-ms-expand{ display:none; } /* old Edge/IE */

.file-upload-container {
    border-color: #D0D0D0 !important;
    background: #FAFAFA !important;
}

.file-upload-container:hover {
    border-color: var(--primary) !important;
    background: var(--primary-light) !important;
}

.file-upload-container i {
    color: var(--primary) !important;
}

.file-upload-container p {
    color: #555555 !important;
}

.file-preview .thumb {
    background: #F5F5F5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}


/* ===== SIDEBARS (post_emergency, flood_prone) ===== */
.sidebar-left, .sidebar-right {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    color: #333333 !important;
}

.sidebar-left::before, .sidebar-right::before {
    background: linear-gradient(90deg, var(--primary), #E8A020) !important;
}

.sidebar-left h2, .sidebar-right h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.sidebar-left p, .sidebar-right p {
    color: #555555 !important;
}

.sidebar-right p b {
    color: var(--danger) !important;
}

.sidebar-left .icon {
    color: var(--primary) !important;
}

.sidebar-right .icon {
    color: var(--danger) !important;
}


/* ===== SIDEBAR (flood_prone) ===== */
.sidebar {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.sidebar::before {
    background: linear-gradient(90deg, var(--primary), #E8A020) !important;
}

.sidebar:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.1) !important;
    border-color: rgba(212, 136, 12, 0.2) !important;
}

.sidebar h3 {
    color: var(--primary) !important;
    border-bottom-color: rgba(212, 136, 12, 0.2) !important;
}


/* ── Data boxes (flood_prone sidebar) ── */
.data-box {
    background: #F8F9FA !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.data-box:hover {
    background: #F0F0F0 !important;
}

.data-box h4 {
    color: var(--primary) !important;
}

.data-box li {
    background: #FFFFFF !important;
    border-left-color: var(--primary) !important;
    color: #333333 !important;
}

.data-box li:hover {
    background: var(--primary-light) !important;
    border-left-color: var(--primary-dark) !important;
}

.risk-badge { color: #FFFFFF !important; }

/* ── Stats box ── */
.stat-item {
    background: #F8F9FA !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.stat-value {
    color: var(--primary) !important;
}

.stat-label {
    color: #666666 !important;
}


/* ===== SEISMIC / EARTHQUAKE PAGE ===== */
#quakeListContainer {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-right-color: var(--primary) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
    color: #333333 !important;
}

#quakeListContainer h3 {
    color: var(--primary) !important;
    border-bottom-color: rgba(212, 136, 12, 0.2) !important;
}

.quake-item {
    background: #F8F9FA !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #333333 !important;
}

.quake-item:hover {
    background: var(--primary-light) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
    box-shadow: 0 4px 12px rgba(212, 136, 12, 0.1) !important;
}

.quake-item strong {
    color: var(--primary) !important;
}

.quake-item small {
    color: #666666 !important;
}

/* Seismic search bar */
#mapSearch {
    border-color: var(--primary) !important;
}

#mapSearch button {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
}

#mapSearch button:hover {
    background: linear-gradient(135deg, #E8A020, var(--primary-dark)) !important;
}

/* Seismic legend */
.legend {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(6px) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #333333 !important;
    border-left-color: var(--primary) !important;
}

.legend h4,
.legend strong {
    color: var(--primary) !important;
}

.legend div {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}


/* ===== ABOUT PAGE — Sections ===== */
.section {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.section h2 {
    color: var(--primary) !important;
    border-bottom-color: rgba(212, 136, 12, 0.2) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.section p {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
}

.section li {
    color: #333333 !important;
}

.section li::before {
    color: var(--primary) !important;
}

/* ── Stats section (about) ── */
.stats-section {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.stats-section h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

/* About stat cards */
.stats-section .stat-card {
    background: #FFFFFF !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.stats-section .stat-card span {
    color: #555555 !important;
}

.stats-section .stat-card strong {
    color: var(--primary) !important;
}

.stats-section .stat-card.highlight {
    background: var(--primary-light) !important;
    box-shadow: 0 4px 16px rgba(212, 136, 12, 0.12) !important;
}


/* ── Chart / Table cards (about) ── */
.chart-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.table-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.table-card h3 {
    color: var(--primary) !important;
}

th {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
}

th, td {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    color: #333333 !important;
}

tbody tr:nth-child(even) {
    background: #F8F9FA !important;
}


/* ===== STATISTICS PAGE ===== */
.stats-grid {
    gap: 20px;
}

.container .stat-card,
.detail-view .stat-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.stat-title {
    color: #555555 !important;
}

.stat-number,
.stat-card .stat-value {
    color: var(--primary) !important;
}

.stat-icon {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Statistics detail title */
.detail-title {
    color: #212121 !important;
}

.detail-title .municipality-name,
.detail-title .province-label {
    color: #212121 !important;
}

.detail-title::after {
    background: linear-gradient(90deg, var(--primary), transparent) !important;
}

/* Statistics map container */
.map-container {
    background: #FFFFFF !important;
    border-color: rgba(212, 136, 12, 0.2) !important;
}

#map:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.15) !important;
}

/* Detail stats */
.detail-stats {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* ===== CEBUSTAT PAGE ===== */
.province-title {
    background: linear-gradient(135deg, #333333, var(--primary), #333333) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

.province-title::after {
    background: linear-gradient(90deg, transparent, var(--primary), transparent) !important;
    box-shadow: 0 0 8px rgba(212, 136, 12, 0.4) !important;
}

/* Area buttons (cebustat) */
.area-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    color: #333333 !important;
}

.area-btn:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.12) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}

.area-btn .name {
    color: #333333 !important;
}

.area-btn .type {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-color: rgba(212, 136, 12, 0.2) !important;
}

.area-btn:hover .type {
    background: rgba(212, 136, 12, 0.15) !important;
    box-shadow: 0 0 8px rgba(212, 136, 12, 0.2) !important;
}

/* Barangay cards */
.barangay-card,
.barangay-card-main {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #333333 !important;
}


/* ===== NO DATA / EMPTY STATES ===== */
.no-data {
    background: #F8F9FA !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #555555 !important;
}

.no-data i {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.no-data h3 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.empty-state i {
    color: rgba(212, 136, 12, 0.25) !important;
}

.empty-state h3 {
    color: var(--primary) !important;
}

.empty-state p {
    color: #888888 !important;
}


/* ===== LOADING OVERLAY ===== */
.loading-overlay {
    background: rgba(255, 255, 255, 0.85) !important;
}

.loading-spinner {
    border-color: rgba(0, 0, 0, 0.08) !important;
    border-top-color: var(--primary) !important;
}


/* ===== PLAY BUTTON (liverecorded) ===== */
.play-btn {
    background: rgba(212, 136, 12, 0.9) !important;
    box-shadow: 0 4px 20px rgba(212, 136, 12, 0.35) !important;
}

.play-btn i {
    color: #FFFFFF !important;
}

.video-card:hover .play-btn {
    box-shadow: 0 8px 30px rgba(212, 136, 12, 0.5) !important;
}


/* ===== SKELETON LOADERS ===== */
.skeleton-card {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.skeleton-thumb,
.skeleton-line {
    background: linear-gradient(110deg, #F0F0F0 0%, #E0E0E0 50%, #F0F0F0 100%) !important;
    background-size: 200% 100% !important;
}


/* ===== FOOTER ===== */
footer {
    background: #FFFFFF !important;
    color: #555555 !important;
    border-top: 2px solid var(--primary) !important;
    backdrop-filter: none !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04) !important;
}

footer span {
    color: var(--primary) !important;
}

.footer-bottom {
    background: var(--primary-light) !important;
    color: #333333 !important;
    border-top-color: rgba(212, 136, 12, 0.15) !important;
    box-shadow: none !important;
}

.footer-container section {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.footer-container section:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.08) !important;
    border-color: rgba(212, 136, 12, 0.2) !important;
}

.footer-container h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
}

.footer-container p {
    color: #555555 !important;
}

.footer-container i {
    color: var(--primary) !important;
}

/* Flood-prone footer */
.footer-left,
.footer-center,
.footer-right {
    color: #555555 !important;
}


/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F0F0F0; }
::-webkit-scrollbar-thumb { background: rgba(212, 136, 12, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 136, 12, 0.5); }


/* ===== RESPONSIVE — Mobile header override ===== */
@media (max-width: 768px) {
    .auth-buttons {
        border-top-color: rgba(212, 136, 12, 0.15) !important;
    }

    /* Mobile nav dropdown (liverecorded) */
    .header-right {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        border-bottom: 2px solid var(--primary) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    }

    /* Seismic quake list mobile */
    #quakeListContainer {
        border-bottom-color: var(--primary) !important;
    }
}

/* ==========================================================
   MOBILE SINGLE-SCROLL FIX — seismic.php & flood_prone.php
   Map always on top, single continuous page scroll
   ========================================================== */

/* --- seismic.php mobile fix (≤992px) --- */
@media (max-width: 992px) {
    /* Let #app flow in document instead of locking to viewport */
    #app {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 95px !important;
        overflow: visible !important;
    }

    /* Map wrapper comes first visually */
    #mapWrapper {
        order: -1 !important;
        flex: none !important;
        height: 60vh !important;
        min-height: 350px !important;
        position: relative !important;
    }

    /* Map fills its wrapper */
    #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Quake list expands naturally — no inner scroll */
    #quakeListContainer {
        max-height: none !important;
        overflow-y: visible !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }
}

@media (max-width: 768px) {
    #app {
        margin-top: 70px !important;
    }

    #mapWrapper {
        height: 55vh !important;
        min-height: 300px !important;
    }
}

@media (max-width: 576px) {
    #mapWrapper {
        height: 50vh !important;
        min-height: 280px !important;
    }

    #quakeListContainer {
        padding: 14px !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* --- flood_prone.php mobile fix (≤992px) --- */
@media (max-width: 992px) {
    /* Let main-container flow naturally */
    .main-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Map comes first visually */
    #viewDiv {
        order: -1 !important;
        flex: none !important;
        height: 60vh !important;
        min-height: 400px !important;
        width: 100% !important;
    }

    /* Sidebars expand naturally — no inner scroll */
    .sidebar {
        width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }

    /* Footer should not be fixed on mobile */
    footer {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .main-container {
        padding: 12px !important;
        margin-top: 70px !important;
        height: auto !important;
    }

    #viewDiv {
        height: 55vh !important;
        min-height: 350px !important;
    }
}

@media (max-width: 576px) {
    .main-container {
        padding: 8px !important;
    }

    #viewDiv {
        height: 50vh !important;
        min-height: 300px !important;
    }

    .sidebar {
        max-height: none !important;
        overflow-y: visible !important;
        padding: 16px !important;
    }
}


/* ==========================================================
   EVENT PAGES — sarok, rosquillos, rosqui, letchon
   (simple event-row layout)
   ========================================================== */
.events-container {
    max-width: 1600px !important;
    margin: 40px auto !important;
    padding: 0 40px !important;
}

.event-row {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    margin-bottom: 35px !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.event-row:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.12) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}

.event-image {
    box-shadow: none !important;
}

.event-image::before {
    background: none !important;
}

.event-image img {
    filter: none !important;
    border-radius: 0 !important;
}

.event-row:hover .event-image img {
    transform: scale(1.03) !important;
    filter: none !important;
}

.event-text {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #333333 !important;
    padding: 30px !important;
}

.event-text::before {
    display: none !important;
}

.event-row:hover .event-text {
    transform: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.event-text h2 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}

.event-text span {
    color: var(--primary-dark) !important;
    font-size: 0.9rem !important;
}

.event-text p {
    color: #444444 !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
}


/* ==========================================================
   EVENT PAGES — event, chicharon, nightmarket, sinulog
   (card-grid layout)
   ========================================================== */

/* Page title */
.page-title {
    text-align: center !important;
}

.page-title h1 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--primary) !important;
    background-clip: unset !important;
    color: var(--primary) !important;
    text-shadow: none !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.page-title p {
    color: #555555 !important;
    font-size: 1rem !important;
}

/* Event grid */
.events-grid {
    gap: 30px !important;
}

/* Event cards */
.event-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: none !important;
}

.event-card::before {
    display: none !important;
}

.event-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(212, 136, 12, 0.15) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}

.event-card-link {
    color: #333333 !important;
}

.event-card img {
    filter: none !important;
}

.event-card:hover img {
    transform: scale(1.05) !important;
    filter: none !important;
}

/* Event content */
.event-content {
    background: #FFFFFF !important;
    color: #333333 !important;
    padding: 24px !important;
}

.event-content h3 {
    color: var(--primary) !important;
    -webkit-text-fill-color: var(--primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

.event-date {
    color: var(--primary-dark) !important;
    font-size: 0.85rem !important;
}

.event-content p {
    color: #444444 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}

/* Tag */
.tag {
    background: var(--primary-light) !important;
    border: 1px solid rgba(212, 136, 12, 0.3) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

.event-card:hover .tag {
    background: rgba(212, 136, 12, 0.15) !important;
    border-color: rgba(212, 136, 12, 0.5) !important;
    color: var(--primary-dark) !important;
    transform: none !important;
}

/* View button */
.view-btn {
    background: linear-gradient(135deg, var(--primary), #E8A020) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(212, 136, 12, 0.25) !important;
    border-radius: 10px !important;
}

.view-btn:hover {
    background: linear-gradient(135deg, #E8A020, var(--primary-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(212, 136, 12, 0.35) !important;
}


/* ==========================================================
   ABOUT US PAGE — about_us.php
   Gallery & Lightbox
   ========================================================== */
.gallery-grid {
    gap: 20px !important;
}

.gallery-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
}

.gallery-item:hover {
    box-shadow: 0 8px 24px rgba(212, 136, 12, 0.12) !important;
    border-color: rgba(212, 136, 12, 0.25) !important;
}

.gallery-item figcaption {
    color: #333333 !important;
    background: #FFFFFF !important;
}

.lightbox-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
}

.lightbox-inner {
    background: #FFFFFF !important;
    border-radius: 12px !important;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    background: #FFFFFF !important;
    color: #333333 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border-color: var(--primary) !important;
}


/* ==========================================================
   STATISTIC ABOUT US — statistic_aboutus.php
   ========================================================== */
.stats-cards {
    gap: 20px !important;
}

.charts-wrapper {
    gap: 30px !important;
}


/* ==========================================================
   VIEW WEATHER — view_weather.php
   ========================================================== */
#sidePanel {
    background: #FFFFFF !important;
    color: #333333 !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.06) !important;
}

#sidePanel h3 {
    color: var(--primary) !important;
    border-bottom: 2px solid rgba(212, 136, 12, 0.3) !important;
}

#sidePanel .data-box {
    background: #F8F9FA !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #333333 !important;
}

#sidePanel .data-box h4 {
    background: linear-gradient(90deg, var(--primary), #E8A020) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#sidePanel .data-box p,
#sidePanel .data-box li {
    color: #444444 !important;
}


/* ==========================================================
   EVENT PAGES — Mobile Responsive Overrides
   ========================================================== */
@media (max-width: 900px) {
    .events-container {
        padding: 0 20px !important;
    }

    .event-row,
    .event-row.reverse {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .event-text {
        padding: 24px !important;
    }

    .event-text h2 {
        font-size: 1.3rem !important;
    }

    .event-text p {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 768px) {
    /* Event cards */
    .events-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 20px !important;
    }

    .event-card img {
        height: 180px !important;
    }

    .event-content {
        padding: 20px !important;
    }

    .event-content h3 {
        font-size: 1.15rem !important;
    }

    .page-title h1 {
        font-size: 1.5rem !important;
    }

    .page-title p {
        font-size: 0.9rem !important;
        padding: 0 20px !important;
    }

    /* Logo text */
    .logo-container .logo-link img,
    .logo-container .city-logo {
        height: 44px !important;
        max-height: 44px !important;
    }

    /* View weather side panel to bottom */
    .main-container {
        flex-direction: column !important;
    }

    #sidePanel {
        width: 100% !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    #windyFrame {
        min-height: 350px !important;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }

    /* Stats */
    .stats-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .event-card img {
        height: 160px !important;
    }

    .events-container {
        padding: 0 16px !important;
    }

    .gallery-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-cards {
        grid-template-columns: 1fr !important;
    }

    .stats-section {
        padding: 20px !important;
    }

    #sidePanel {
        max-height: 300px !important;
        padding: 12px !important;
    }
}


/* ===== ACCESSIBILITY — Focus Rings ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(212, 136, 12, 0.5) !important;
    outline-offset: 2px !important;
}