/* NKOSEC global light/dark theme - applies to all pages */
:root{
  --nk-bg:#06101f;
  --nk-bg2:#091a33;
  --nk-card:rgba(8,22,43,.88);
  --nk-card2:rgba(12,31,60,.74);
  --nk-line:rgba(113,168,255,.22);
  --nk-text:rgba(255,255,255,.96);
  --nk-muted:rgba(214,226,245,.74);
  --nk-input:rgba(6,17,37,.56);
  --nk-accent:#2f80ff;
  --nk-accent2:#00b7ff;
  --nk-shadow:0 22px 70px rgba(0,0,0,.45);
}

html[data-nkosec-theme="light"]{
  --nk-bg:#eef6ff;
  --nk-bg2:#ffffff;
  --nk-card:rgba(255,255,255,.94);
  --nk-card2:rgba(244,249,255,.96);
  --nk-line:rgba(12,37,74,.14);
  --nk-text:#071a33;
  --nk-muted:#4e6280;
  --nk-input:#ffffff;
  --nk-accent:#0b5ed7;
  --nk-accent2:#0284c7;
  --nk-shadow:0 18px 50px rgba(12,37,74,.14);
}

html[data-nkosec-theme="dark"]{
  --nk-bg:#06101f;
  --nk-bg2:#091a33;
  --nk-card:rgba(8,22,43,.88);
  --nk-card2:rgba(12,31,60,.74);
  --nk-line:rgba(113,168,255,.22);
  --nk-text:rgba(255,255,255,.96);
  --nk-muted:rgba(214,226,245,.74);
  --nk-input:rgba(6,17,37,.56);
  --nk-accent:#2f80ff;
  --nk-accent2:#00b7ff;
  --nk-shadow:0 22px 70px rgba(0,0,0,.45);
}

html[data-nkosec-theme] body{
  color:var(--nk-text) !important;
  background:
    radial-gradient(900px 520px at 16% 10%, rgba(0,183,255,.20), transparent 65%),
    radial-gradient(820px 470px at 86% 18%, rgba(47,128,255,.16), transparent 62%),
    linear-gradient(135deg,var(--nk-bg),var(--nk-bg2)) !important;
  transition:background .25s ease,color .25s ease;
}

html[data-nkosec-theme="light"] body{
  background:
    radial-gradient(900px 520px at 16% 10%, rgba(11,94,215,.11), transparent 65%),
    radial-gradient(820px 470px at 86% 18%, rgba(2,132,199,.10), transparent 62%),
    linear-gradient(135deg,var(--nk-bg),var(--nk-bg2)) !important;
}

html[data-nkosec-theme] .card,
html[data-nkosec-theme] .panel,
html[data-nkosec-theme] .hero,
html[data-nkosec-theme] .left,
html[data-nkosec-theme] .right,
html[data-nkosec-theme] .box,
html[data-nkosec-theme] .container,
html[data-nkosec-theme] .wrap > section,
html[data-nkosec-theme] .main,
html[data-nkosec-theme] table{
  background:linear-gradient(180deg,var(--nk-card),var(--nk-card2)) !important;
  border-color:var(--nk-line) !important;
  color:var(--nk-text) !important;
  box-shadow:var(--nk-shadow);
}

html[data-nkosec-theme] h1,
html[data-nkosec-theme] h2,
html[data-nkosec-theme] h3,
html[data-nkosec-theme] h4,
html[data-nkosec-theme] label,
html[data-nkosec-theme] strong,
html[data-nkosec-theme] b,
html[data-nkosec-theme] th,
html[data-nkosec-theme] td{
  color:var(--nk-text) !important;
}

html[data-nkosec-theme] p,
html[data-nkosec-theme] .muted,
html[data-nkosec-theme] .sub,
html[data-nkosec-theme] small,
html[data-nkosec-theme] .hint,
html[data-nkosec-theme] .cardSub,
html[data-nkosec-theme] .school{
  color:var(--nk-muted) !important;
}

html[data-nkosec-theme] input,
html[data-nkosec-theme] select,
html[data-nkosec-theme] textarea{
  background:var(--nk-input) !important;
  color:var(--nk-text) !important;
  border-color:var(--nk-line) !important;
}

html[data-nkosec-theme] select option{
  color:#071a33 !important;
  background:#fff !important;
}

html[data-nkosec-theme] a.btn,
html[data-nkosec-theme] .btn,
html[data-nkosec-theme] button,
html[data-nkosec-theme] .adminBtn,
html[data-nkosec-theme] .back{
  border-color:rgba(47,128,255,.38) !important;
}

html[data-nkosec-theme] .btn-primary,
html[data-nkosec-theme] button[type="submit"],
html[data-nkosec-theme] .submit{
  background:linear-gradient(135deg,var(--nk-accent),var(--nk-accent2)) !important;
  color:#fff !important;
}

html[data-nkosec-theme] table,
html[data-nkosec-theme] tr,
html[data-nkosec-theme] th,
html[data-nkosec-theme] td{
  border-color:var(--nk-line) !important;
}

/* Fixed universal theme switch */
.nkosec-theme-switch{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  display:flex;
  gap:7px;
  padding:7px;
  border-radius:999px;
  border:1px solid var(--nk-line);
  background:var(--nk-card);
  box-shadow:0 14px 35px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
}

.nkosec-theme-switch button{
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px !important;
  padding:8px 11px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  cursor:pointer !important;
  color:var(--nk-muted) !important;
  background:transparent !important;
  box-shadow:none !important;
}

.nkosec-theme-switch button.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--nk-accent),var(--nk-accent2)) !important;
  box-shadow:0 8px 20px rgba(47,128,255,.28) !important;
}

@media(max-width:650px){
  .nkosec-theme-switch{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:12px;
  }
}


/* Fix visibility/readability in light mode, especially Upload Voters page */
html[data-nkosec-theme="light"] .hero,
html[data-nkosec-theme="light"] .panel,
html[data-nkosec-theme="light"] .card,
html[data-nkosec-theme="light"] .left,
html[data-nkosec-theme="light"] .right{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,249,255,.98)) !important;
  color:#071a33 !important;
  border-color:rgba(12,37,74,.14) !important;
  box-shadow:0 18px 50px rgba(12,37,74,.12) !important;
}

html[data-nkosec-theme="light"] .notice,
html[data-nkosec-theme="light"] .tips,
html[data-nkosec-theme="light"] .pill,
html[data-nkosec-theme="light"] .badge,
html[data-nkosec-theme="light"] .classChip,
html[data-nkosec-theme="light"] .msg,
html[data-nkosec-theme="light"] .pt,
html[data-nkosec-theme="light"] .field{
  background:#eef6ff !important;
  color:#071a33 !important;
  border-color:rgba(12,37,74,.14) !important;
}

html[data-nkosec-theme="light"] .notice b,
html[data-nkosec-theme="light"] .tipsTitle,
html[data-nkosec-theme="light"] .pill,
html[data-nkosec-theme="light"] .badge,
html[data-nkosec-theme="light"] .classChip,
html[data-nkosec-theme="light"] label,
html[data-nkosec-theme="light"] h1,
html[data-nkosec-theme="light"] h2,
html[data-nkosec-theme="light"] h3,
html[data-nkosec-theme="light"] b,
html[data-nkosec-theme="light"] strong{
  color:#071a33 !important;
}

html[data-nkosec-theme="light"] .muted,
html[data-nkosec-theme="light"] .school,
html[data-nkosec-theme="light"] .sub,
html[data-nkosec-theme="light"] .hint,
html[data-nkosec-theme="light"] .tips ul,
html[data-nkosec-theme="light"] .notice{
  color:#4e6280 !important;
}

html[data-nkosec-theme="light"] input,
html[data-nkosec-theme="light"] select,
html[data-nkosec-theme="light"] textarea{
  background:#ffffff !important;
  color:#071a33 !important;
  border-color:rgba(12,37,74,.18) !important;
}

html[data-nkosec-theme="light"] input::placeholder,
html[data-nkosec-theme="light"] textarea::placeholder{
  color:#7b8ca8 !important;
}

html[data-nkosec-theme="light"] .btn:not(.btn-primary),
html[data-nkosec-theme="light"] a.btn:not(.btn-primary),
html[data-nkosec-theme="light"] .btn-soft,
html[data-nkosec-theme="light"] .btn-secondary,
html[data-nkosec-theme="light"] .back,
html[data-nkosec-theme="light"] .adminBtn{
  background:#ffffff !important;
  color:#0b5ed7 !important;
  border-color:rgba(11,94,215,.24) !important;
  box-shadow:0 8px 20px rgba(12,37,74,.08) !important;
}

html[data-nkosec-theme="light"] .btn-primary,
html[data-nkosec-theme="light"] button[type="submit"],
html[data-nkosec-theme="light"] .submit{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0b5ed7,#0284c7) !important;
}

html[data-nkosec-theme="light"] .heroTop,
html[data-nkosec-theme="light"] .panelHead{
  border-color:rgba(12,37,74,.12) !important;
}

html[data-nkosec-theme="light"] .logo{
  background:#ffffff !important;
  border-color:rgba(12,37,74,.14) !important;
}

html[data-nkosec-theme="light"] .flash.success{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#86efac !important;
}

html[data-nkosec-theme="light"] .flash.error{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border-color:#fecaca !important;
}

html[data-nkosec-theme="light"] .nkosec-theme-switch{
  background:#ffffff !important;
  border-color:rgba(12,37,74,.14) !important;
}

/* Premium notification behaviour */
.flash{
  transition:opacity .45s ease, transform .45s ease, max-height .45s ease, margin .45s ease, padding .45s ease;
}
.flash.nkosec-hide{
  opacity:0 !important;
  transform:translateY(-8px) !important;
  max-height:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  overflow:hidden !important;
}


/* Premium confirmation modal */
.nkosec-confirm-backdrop{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,8,23,.66);
  backdrop-filter:blur(10px);
}
.nkosec-confirm-box{
  width:min(430px,100%);
  border:1px solid var(--nk-line);
  background:linear-gradient(180deg,var(--nk-card),var(--nk-card2));
  color:var(--nk-text);
  border-radius:22px;
  box-shadow:0 26px 80px rgba(0,0,0,.42);
  padding:20px;
  text-align:center;
}
.nkosec-confirm-icon{
  width:48px;
  height:48px;
  margin:0 auto 10px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  box-shadow:0 12px 30px rgba(239,68,68,.28);
}
.nkosec-confirm-box h3{margin:0 0 8px !important;color:var(--nk-text) !important}
.nkosec-confirm-box p{margin:0 0 18px !important;color:var(--nk-muted) !important;line-height:1.55}
.nkosec-confirm-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.nkosec-confirm-actions button{border-radius:999px !important;padding:11px 15px !important;font-weight:900 !important;cursor:pointer !important}
.nkosec-confirm-cancel{background:rgba(255,255,255,.06) !important;color:var(--nk-text) !important;border:1px solid var(--nk-line) !important}
.nkosec-confirm-yes{background:linear-gradient(135deg,#ef4444,#f59e0b) !important;color:#fff !important;border:1px solid rgba(239,68,68,.35) !important}

/* Premium reusable hover polish */
.nkosec-premium-card,
.tile,
.box,
.card{
  backdrop-filter:blur(12px);
}
.tile,
a.btn,
.btn,
button{
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.tile:hover,
a.btn:hover,
.btn:hover,
button:hover{
  transform:translateY(-1px);
}