/* ============================================================
   Election Monitor — Global CSS
   Built on Bootstrap 5.3 (loaded from CDN in _Layout)
   ============================================================ */
/* ── CSS Variables ─────────────────────────────────────────── */
:root {
      --em-primary:      #003366;
      --em-primary-lt:   #004080;
      --em-accent:       #009A44;
      
    /* green — APC colour */
      --em-danger:       #dc3545;
      --em-warning:      #ffc107;
      --em-neutral:      #6c757d;
      --em-bg:           #f0f4f8;
      --em-card:         #ffffff;
      --em-border:       #dee2e6;
      --em-shadow:       0 2px 8px rgba(0,0,0,.08);
      --em-radius:       .5rem;
      --em-font:         'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
/* ── Base ──────────────────────────────────────────────────── */
html, body {
      font-family: var(--em-font);
      background:   var(--em-bg);
    color:        #212529;
      min-height:   100vh;
}
/* ── Navbar ────────────────────────────────────────────────── */
.navbar-em {
      background: var(--em-primary);
      box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

    .navbar-em .navbar-brand,
    .navbar-em .nav-link {
        color: #fff !important;
    }

        .navbar-em .nav-link:hover {
            color: #a8d4ff !important;
        }
/* ── Cards ─────────────────────────────────────────────────── */
.card-em {
      background:     var(--em-card);
      border:         1px solid var(--em-border);
      border-radius: var(--em-radius);
      box-shadow:     var(--em-shadow);
}

    .card-em .card-header {
          background:     var(--em-primary);
          color:          #fff;
          border-radius: var(--em-radius) var(--em-radius) 0 0;
          font-weight:    600;
          padding:        .75rem 1.25rem;
    }
/* ── Stat cards (Live Dashboard) ───────────────────────────── */
.stat-card {
      background:     var(--em-primary);
      color:          #fff;
      border-radius: var(--em-radius);
      padding:        1.25rem;
      text-align:     center;
}

    .stat-card .stat-number {
          font-size:    2rem;
        font-weight: 700;
          line-height: 1.1;
    }

    .stat-card .stat-label {
          font-size: .8rem;
          opacity:    .8;
          margin-top: .25rem;
    }
/* ── Tables ────────────────────────────────────────────────── */
.table-em thead th {
      background:   var(--em-primary);
      color:        #fff;
    white-space: nowrap;
      font-size:    .82rem;
      padding:      .6rem .75rem;
      position:     sticky;
      top:          0;
      z-index:      2;
}

.table-em tbody tr:hover {
    background: #eaf0fb;
}

.table-em td {
    font-size: .85rem;
    vertical-align: middle;
}
/* Anomaly row highlights */
.row-overvoting  {
    background: #fff3cd !important;
}
.row-invalid     {
    background: #f8d7da !important;
}

.row-rerun       {
    background: #cfe2ff !important;
}
/* WinLoss badges */
.badge-won       {
    background: var(--em-accent);
    color: #fff;
}

.badge-lost      {
    background: var(--em-danger);
      color: #fff;
}

.badge-undecided {
    background: var(--em-warning);
    color: #000;
}

.badge-expecting {
    background: var(--em-neutral);
    color: #fff;
}
/* ── Forms ─────────────────────────────────────────────────── */
.form-section-title {
      font-size:      .75rem;
      font-weight:    700;
    text-transform: uppercase;
      letter-spacing: .05em;
      color:          var(--em-primary);
      border-bottom: 2px solid var(--em-primary);
      padding-bottom: .25rem;
      margin-bottom: .75rem;
      margin-top:     1.25rem;
}

.form-control:focus,
.form-select:focus {
      border-color: var(--em-primary);
      box-shadow:    0 0 0 .2rem rgba(0,51,102,.2);
}
/* ── Buttons ───────────────────────────────────────────────── */
.btn-em-primary {
      background: var(--em-primary);
      color:       #fff;
      border:      none;
}

    .btn-em-primary:hover {
          background: var(--em-primary-lt);
          color:       #fff;
    }
/* ── Progress bar (PU submission) ─────────────────────────── */
.progress-em .progress-bar {
      background: var(--em-accent);
      transition: width .6s ease;
}
/* ── Fetch-more button ─────────────────────────────────────── */
#btnFetchMore {
      min-width: 160px;
}
/* ── Upload drop-zone ──────────────────────────────────────── */
.drop-zone {
      border:         2px dashed var(--em-primary);
      border-radius: var(--em-radius);
      padding:        2rem;
    text-align:     center;
      cursor:         pointer;
      transition:     background .2s;
      color:          var(--em-primary);
}

    .drop-zone.dragover {
        background: #dce8f7;
    }
/* ── Spinner overlay ───────────────────────────────────────── */
#loadingOverlay {
      position:    fixed;
      inset:       0;
      background: rgba(0,51,102,.55);
      display:     flex;
      align-items: center;
    justify-content: center;
      z-index:     9990;
}

    #loadingOverlay.d-none {
        display: none !important;
    }
/* ── Responsive adjustments ────────────────────────────────── */
@media (max-width: 767.98px) {
      .table-em td, .table-em th {
        font-size: .76rem;
        padding: .4rem .5rem;
    }

      .stat-card .stat-number    {
        font-size: 1.4rem;
    }

      .hide-mobile               {
        display: none !important;
    }
}
/* ── Chart containers ──────────────────────────────────────── */
.chart-wrapper {
      position: relative;
      width:     100%;
      min-height: 280px;
}
/* ── Lock badge ────────────────────────────────────────────── */
.lock-badge {
      font-size:    .7rem;
      padding:      .2rem .5rem;
      border-radius: 4px;
      background:   #ffc107;
      color:        #000;
    font-weight: 700;
}
/* ── WhatsApp link ─────────────────────────────────────────── */
.wa-link {
      color: #25D366;
      font-weight: 600;
      text-decoration: none;
}

    .wa-link:hover {
        text-decoration: underline;
    }
/* ── Toast / alert bar ─────────────────────────────────────── */
.alert-em {
    border-left: 4px solid var(--em-primary);
      border-radius: var(--em-radius);
}