/* =========================================================
   eVote — App CSS (Light/Dark + Mobile Responsiveness)
   ========================================================= */

/* THEME TOKENS (light) */
:root{
  --nav-bg: #0b2a4a;        /* navy header */
  --nav-fg: #ffffff;
  --nav-fg-muted: rgba(255,255,255,.75);
  --nav-hover-bg: rgba(255,255,255,.16);
  --nav-border: rgba(255,255,255,.25);

  --bg-page: #f6f7fb;
  --bg-card: #ffffff;
  --text-color: #212529;
  --text-muted: #6c757d;
  --border-soft: #e9ecef;

  --sidebar-bg: #ffffff;
  --sidebar-fg: #344767;
  --sidebar-hover-bg: #f2f4f7;
  --sidebar-active-bg: #eef5ff;
  --sidebar-active-border: #0d6efd;

  --progress-bar: #0d6efd;
}

/* THEME TOKENS (dark) */
body[data-theme="dark"]{
  --nav-bg: #0a1930;
  --nav-fg: #e7eefc;
  --nav-fg-muted: #b8c2d9;
  --nav-hover-bg: rgba(255,255,255,.14);
  --nav-border: rgba(231,238,252,.25);

  --bg-page: #0f172a;      /* slate-900-ish */
  --bg-card: #111827;      /* gray-900 */
  --text-color: #e5e7eb;   /* gray-200 */
  --text-muted: #94a3b8;   /* slate-400 */
  --border-soft: #2b3648;

  --sidebar-bg: #0b1222;
  --sidebar-fg: #cbd5e1;
  --sidebar-hover-bg: #151e33;
  --sidebar-active-bg: #0b203d;
  --sidebar-active-border: #60a5fa;

  --progress-bar: #60a5fa;
}

/* Base */
html,body{ height:100%; }
body{ background:var(--bg-page); color:var(--text-color); }

/* Header */
.app-header{
  height:60px;
  background: var(--nav-bg);
  color: var(--nav-fg);
  position:sticky; top:0; z-index:1030;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.app-header .brand{ display:flex; align-items:center; gap:.65rem; }
.brand .logo{
  width:36px; height:36px; border-radius:10px; background:#fff; color:#0d6efd;
  display:grid; place-items:center; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.brand .title{ font-weight:700; letter-spacing:.2px }

/* Header actions */
.header-actions .btn,
.header-actions .dropdown-toggle{
  color: var(--nav-fg); border-color: var(--nav-border);
}
.header-actions .btn:hover,
.header-actions .btn:focus{
  color: var(--nav-fg); background: var(--nav-hover-bg); border-color: var(--nav-border);
}

/* Account dropdown (light & dark) */
.app-header .dropdown-menu{
  border:1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-color);
}
.app-header .dropdown-item{ color: var(--text-color); }
.app-header .dropdown-item:hover{
  background: var(--sidebar-active-bg);
  color: var(--text-color);
}

/* Layout */
:root{ --sidebar-w: 260px; }
.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:calc(100vh - 60px);
}
.sidebar{
  position:sticky; top:60px;
  height:calc(100vh - 60px); overflow:auto;
  background:var(--sidebar-bg); border-right:1px solid var(--border-soft);
}
.sidebar .nav-group-title{
  padding:.75rem 1rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; font-size:.75rem;
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem 1rem; color:var(--sidebar-fg); border-left:3px solid transparent;
  background:transparent;
}
.sidebar .nav-link .bi{ font-size:1.05rem; opacity:.9 }
.sidebar .nav-link:hover{ background:var(--sidebar-hover-bg); color:#0d6efd; }
body[data-theme="dark"] .sidebar .nav-link:hover{ color:#60a5fa; }
.sidebar .nav-link.active{
  background:var(--sidebar-active-bg); color:#0d6efd; border-left-color:var(--sidebar-active-border); font-weight:600;
}
body[data-theme="dark"] .sidebar .nav-link.active{ color:#60a5fa; }

.content{ padding:1.25rem 1.25rem 2rem 1.25rem; }

/* Footer */
.app-footer{
  background:var(--bg-card); border-top:1px solid var(--border-soft); color:var(--text-muted);
  padding:.9rem 1rem; font-size:.9rem;
}

/* Components */
.card{ border:1px solid var(--border-soft); background:var(--bg-card); box-shadow:0 6px 22px rgba(0,0,0,.05) }
.alert{ border:1px solid var(--border-soft); box-shadow:0 4px 14px rgba(0,0,0,.06) }
.table{ color:var(--text-color); }
.table thead th{ border-bottom:1px solid var(--border-soft); }
.table td, .table th{ border-color:var(--border-soft); }
.progress{ background:rgba(13,110,253,.125) }
.progress-bar{ background:var(--progress-bar) }

/* Offcanvas skin inside manager */
.mgr-offcanvas .offcanvas-header{ border-bottom:1px solid var(--border-soft); color:var(--text-color); background:var(--bg-card); }
.mgr-offcanvas .offcanvas-body{ background:var(--bg-card); color:var(--text-color); }
.mgr-offcanvas .section-title{ font-weight:700; color:var(--text-color); font-size:.95rem; }
.mgr-offcanvas .hint{ color:var(--text-muted); font-size:.85rem; }
.mgr-offcanvas .card{ border:1px solid var(--border-soft); background:var(--bg-card); }
.mgr-offcanvas .list-group-item{ display:flex; justify-content:space-between; align-items:center; background:var(--bg-card); color:var(--text-color); border-color:var(--border-soft); }
.mgr-offcanvas .list-group-item:hover{ background:var(--sidebar-hover-bg); }

/* =========================================================
   MOBILE SIDEBAR + OVERLAY (FIXED Z-INDEX, SINGLE-COLUMN)
   ========================================================= */
@media (max-width: 991.98px){
  /* Use a single column for content; sidebar overlays */
  .layout{ grid-template-columns: 1fr; }

  .sidebar{
    position: fixed;
    left: 0; top: 60px;
    width: var(--sidebar-w);
    max-width: 86vw;               /* comfortable overlay width */
    transform: translateX(-100%);  /* hidden by default */
    transition: transform .2s ease;
    box-shadow: 12px 0 24px rgba(0,0,0,.08);
    z-index: 1031;                 /* ABOVE overlay (1029), header is 1030 */
  }
  body.sidebar-open .sidebar{ transform: none; }
}

/* Dim overlay (below header, below sidebar) */
body.sidebar-open { overflow: hidden; }
body.sidebar-open::before{
  content:"";
  position: fixed;
  left: 0; right: 0; top: 60px; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 1029;
}

/* Desktop collapsed sidebar */
@media (min-width: 992px){
  body.sidebar-collapsed .layout{ grid-template-columns: 72px 1fr; }
  body.sidebar-collapsed .sidebar{ width:72px }
  body.sidebar-collapsed .sidebar .nav-link span.label{ display:none }
  body.sidebar-collapsed .sidebar .nav-group-title{ display:none }
}

/* =========================================================
   DARK MODE: TABLES + FORMS + DATATABLES
   ========================================================= */

/* Tables */
body[data-theme="dark"] .table{
  --bs-table-bg: var(--bg-card);
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--border-soft);
  --bs-table-striped-bg: rgba(255,255,255,.035);
  --bs-table-striped-color: var(--text-color);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-hover-color: var(--text-color);
  background: var(--bg-card);
  color: var(--text-color);
}
body[data-theme="dark"] .table > :not(caption) > * > *{
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
/* Zebra & hover */
body[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: var(--bs-table-striped-bg) !important;
}
body[data-theme="dark"] .table-hover > tbody > tr:hover > *{
  background-color: var(--bs-table-hover-bg) !important;
}

/* Forms */
body[data-theme="dark"] .form-label,
body[data-theme="dark"] .form-text{ color: var(--text-muted); }

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-select:disabled,
body[data-theme="dark"] .input-group-text{
  background-color: #0f172a;
  color: var(--text-color);
  border-color: var(--border-soft);
}
body[data-theme="dark"] .form-control::placeholder{ color: var(--text-muted); opacity:.9; }
body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus{
  background-color: #0f172a;
  color: var(--text-color);
  border-color: #60a5fa;
  box-shadow: 0 0 0 .2rem rgba(96,165,250,.25);
}

/* Checks */
body[data-theme="dark"] .form-check-input{
  background-color:#0f172a; border-color: var(--border-soft);
}
body[data-theme="dark"] .form-check-input:checked{
  background-color:#60a5fa; border-color:#60a5fa;
}
body[data-theme="dark"] .form-check-label{ color: var(--text-color); }

/* Input group borders sync */
body[data-theme="dark"] .input-group .form-control,
body[data-theme="dark"] .input-group .input-group-text,
body[data-theme="dark"] .input-group .btn{
  border-color: var(--border-soft);
}

/* Dropdowns / Modals / Offcanvas */
body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .offcanvas,
body[data-theme="dark"] .offcanvas .offcanvas-body{
  background: var(--bg-card);
  color: var(--text-color);
  border-color: var(--border-soft);
}

/* Simple-DataTables */
body[data-theme="dark"] .dataTable-wrapper .dataTable-top,
body[data-theme="dark"] .dataTable-wrapper .dataTable-bottom{
  color: var(--text-color);
}
body[data-theme="dark"] .dataTable-wrapper .dataTable-input,
body[data-theme="dark"] .dataTable-wrapper .dataTable-selector{
  background:#0f172a; color:var(--text-color); border:1px solid var(--border-soft);
}
body[data-theme="dark"] .dataTable-table{
  color: var(--text-color);
  background: var(--bg-card);
}
body[data-theme="dark"] .dataTable-pagination a{
  color: var(--text-color);
  background:#0f172a; border:1px solid var(--border-soft);
}
body[data-theme="dark"] .dataTable-pagination .active a{
  background:#0b203d; border-color:#60a5fa; color:#e5e7eb;
}

/* =========================================================
   DARK LEGIBILITY PATCHES (admin)
   ========================================================= */
body[data-theme="dark"] .text-muted,
body[data-theme="dark"] .form-text,
body[data-theme="dark"] .small,
body[data-theme="dark"] small { color:#cbd5e1 !important; }

body[data-theme="dark"] h1, 
body[data-theme="dark"] h2, 
body[data-theme="dark"] h3, 
body[data-theme="dark"] h4, 
body[data-theme="dark"] h5, 
body[data-theme="dark"] h6 { color: var(--text-color); }

body[data-theme="dark"] table thead th {
  color: var(--text-color);
  background: var(--bg-card);
  border-color: var(--border-soft);
}

/* Links */
body[data-theme="dark"] a { color: #93c5fd; }
body[data-theme="dark"] a:hover,
body[data-theme="dark"] a:focus { color: #bfdbfe; }

/* Outline buttons */
body[data-theme="dark"] .btn-outline-secondary { color:#e5e7eb; border-color:#475569; }
body[data-theme="dark"] .btn-outline-secondary:hover { background:#0b203d; border-color:#60a5fa; color:#e5e7eb; }
body[data-theme="dark"] .btn-outline-dark { color:#e5e7eb; border-color:#475569; }
body[data-theme="dark"] .btn-outline-dark:hover { background:#0b203d; border-color:#60a5fa; color:#e5e7eb; }

/* List groups */
body[data-theme="dark"] .list-group-item {
  background: var(--bg-card);
  color: var(--text-color);
  border-color: var(--border-soft);
}

/* Badges */
body[data-theme="dark"] .badge.text-bg-secondary,
body[data-theme="dark"] .badge.bg-secondary { background:#334155; color:#e5e7eb; }
body[data-theme="dark"] .badge.text-bg-success,
body[data-theme="dark"] .badge.bg-success { background:#166534; color:#e5e7eb; }
body[data-theme="dark"] .badge.text-bg-info,
body[data-theme="dark"] .badge.bg-info { background:#0b3a5b; color:#e5e7eb; }
body[data-theme="dark"] .badge.text-bg-warning,
body[data-theme="dark"] .badge.bg-warning { background:#9a6700; color:#111827; }
body[data-theme="dark"] .badge.text-bg-light,
body[data-theme="dark"] .badge.bg-light { background:#2a3344; color:#e5e7eb; border:1px solid var(--border-soft); }

/* Offcanvas fine text */
body[data-theme="dark"] .mgr-offcanvas .section-title { color: var(--text-color); }
body[data-theme="dark"] .mgr-offcanvas .hint { color: #cbd5e1; }

body[data-theme="dark"] .dataTable-wrapper .dataTable-info,
body[data-theme="dark"] .dataTable-wrapper label { color: var(--text-color); }

body[data-theme="dark"] .dataTable-wrapper .dataTable-input::placeholder { color: #cbd5e1; }

body[data-theme="dark"] .text-secondary { color:#cbd5e1 !important; }

/* =========================================================
   STAT CARDS (Dashboard)
   ========================================================= */
.stat-card { 
  background: var(--bg-card); 
  border: 1px solid var(--border-soft); 
  border-radius: .75rem; 
  padding: 1rem 1.25rem;
  display:flex; align-items:center; gap:.9rem;
}
.stat-icon { 
  width:42px; height:42px; border-radius:.65rem; 
  display:grid; place-items:center; 
  background: var(--sidebar-active-bg); 
  border:1px solid var(--border-soft);
}
.stat-value { 
  font-size: 1.9rem; line-height:1; font-weight: 800; 
  color: var(--text-color);
}
.stat-label { 
  color: var(--text-muted); 
  font-weight: 600; letter-spacing:.3px; 
  text-transform: uppercase; font-size:.72rem; 
}

/* =========================================================
   MOBILE RESPONSIVENESS UTILITIES
   ========================================================= */

/* Compact spacing & type on phones */
@media (max-width: 575.98px){
  .content{ padding:.85rem .85rem 1.2rem; }
  .app-header .brand .title{ font-size:.98rem; }
  .header-actions .btn,
  .header-actions .dropdown-toggle{ padding:.25rem .5rem; font-size:.9rem; }
  .card > .card-body{ padding: .9rem; }
  .alert{ padding:.65rem .8rem; }
  h4{ font-size:1.15rem; } h5{ font-size:1rem; }
}

/* Tables on small screens: reduce padding & allow wrapping */
@media (max-width: 575.98px){
  .table{ font-size:.92rem; }
  .table > :not(caption) > * > *{ padding:.45rem .5rem; }
  .table td, .table th{ white-space:nowrap; }
  .table td code{ word-break:break-all; white-space:normal; }
}

/* DataTables toolbar stacks on phones */
@media (max-width: 575.98px){
  .dataTable-wrapper .dataTable-top,
  .dataTable-wrapper .dataTable-bottom{
    display:flex; flex-wrap:wrap; gap:.5rem;
  }
  .dataTable-wrapper .dataTable-search,
  .dataTable-wrapper .dataTable-dropdown{ width:100%; }
  .dataTable-wrapper .dataTable-input,
  .dataTable-wrapper .dataTable-selector{ width:100%; }
}

/* Input groups: avoid overflow */
.input-group > .form-control{ min-width:0; }
.input-group .btn{ white-space:nowrap; }

/* Buttons: tap-friendly */
@media (max-width: 575.98px){
  .btn{ padding:.5rem .75rem; }
}

/* Offcanvas lists tighter on phones */
@media (max-width: 575.98px){
  .mgr-offcanvas .list-group-item{ padding:.6rem .75rem; }
}

/* Sticky action bars respect iOS safe area */
.sticky-actions{ bottom: calc(18px + env(safe-area-inset-bottom)); }

/* Election/Voter cards: actions full-width on phones */
@media (max-width: 576px){
  .election-actions .btn{ flex:1 1 100%; }
}

/* Reduce visual jitter when mobile browser chrome appears */
@supports(height: 100dvh){
  .layout{ min-height: calc(100dvh - 60px); }
}

/* Utilities */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }