/**
 * assets/css/style.css
 * Sentralisasi Desain Sistem Informasi Pilkades Digital (syspilkades)
 * Desain Bersih, Konsisten, Responsif, dan Offline Ready
 */

:root {
  --sidebar-width: 260px;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-100: #f1f5f9;
  --color-slate-50:  #f8fafc;
  --color-primary:   #0d6efd;
  --color-success:   #198754;
  --color-danger:    #dc3545;
  --color-warning:   #ffc107;
  --color-info:      #0dcaf0;
}

/* 1. RESET & DASAR TIPOGRAFI */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-slate-100);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-slate-800);
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}

body.portal-body {
  display: flex;
  flex-direction: column;
}

body.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

body.kpps-body {
  padding-bottom: 70px;
}

/* 2. BORDER LEFT SEMANTIC ACCENTS */
.border-left-primary { border-left: 5px solid var(--color-primary) !important; }
.border-left-success { border-left: 5px solid var(--color-success) !important; }
.border-left-danger  { border-left: 5px solid var(--color-danger) !important; }
.border-left-warning { border-left: 5px solid var(--color-warning) !important; }
.border-left-info    { border-left: 5px solid var(--color-info) !important; }

/* 3. PULSE & ANIMASI INDIKATOR */
.pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
  animation: pulseAnimation 1.8s infinite;
}

@keyframes pulseAnimation {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
  70%  { transform: scale(1.1);  box-shadow: 0 0 0 7px rgba(25, 135, 84, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.fade-highlight {
  animation: highlightFade 3s ease-out;
}

@keyframes highlightFade {
  0%   { background-color: #d1fae5 !important; }
  100% { background-color: transparent; }
}

.fade-update {
  transition: background-color 0.4s ease;
}

.row-highlight {
  background-color: #dcfce7 !important;
}

/* 4. MODUL PANEL ADMINISTRASI (admin/) */
.admin-navbar {
  background-color: var(--color-slate-900);
}

.app-sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  flex-shrink: 0 !important;
  min-height: calc(100vh - 58px);
  background-color: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  color: var(--color-slate-700);
  font-size: 0.88rem;
  padding: 0.72rem 1rem;
  border-radius: 8px;
  margin-bottom: 3px;
  font-weight: 500;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.sidebar-link:hover {
  background-color: #e2e8f0;
  color: var(--color-primary);
}

.sidebar-link.active {
  background-color: var(--color-primary);
  color: #ffffff !important;
  font-weight: 600;
}

/* 5. PORTAL BERANDA UTAMA (index.php) */
.hero-banner {
  background: var(--color-slate-900);
  color: #ffffff;
  padding: 60px 20px 80px;
  text-align: center;
  border-bottom: 4px solid var(--color-primary);
}

.portal-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease-in-out;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px;
}

.portal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
  color: inherit;
}

.icon-box {
  width: 65px;
  height: 65px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 18px;
}

/* 6. GERBANG LOGIN (login.php) */
.login-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.login-header {
  background: var(--color-slate-900);
  color: #ffffff;
  padding: 30px 24px;
  text-align: center;
  border-bottom: 4px solid var(--color-primary);
}

/* 7. MEJA KPPS & PRESENSI (tps/absensi.php & tps/input_suara.php) */
.kpps-header {
  background: var(--color-slate-900);
  color: #ffffff;
  padding: 14px 18px;
  border-bottom: 3px solid var(--color-primary);
}

.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.c1-card {
  background: #ffffff;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.search-trigger-btn {
  background: #ffffff;
  border: 2px dashed var(--color-primary);
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.search-trigger-btn:hover {
  background: #eff6ff;
  border-style: solid;
}

.voter-result-item {
  cursor: pointer;
  transition: background 0.15s;
}

.voter-result-item:hover {
  background-color: #e2e8f0;
}

#cameraScannerRegion video {
  border-radius: 8px;
  width: 100% !important;
  max-height: 220px;
  object-fit: cover;
}

/* 8. LAYAR PROYEKTOR PUBLIK (public/kehadiran.php & public/quick_count.php) */
.screen-header {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  border-left: 6px solid var(--color-primary);
}

.qc-header {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border-left: 6px solid var(--color-success);
}

.hero-stat-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.tps-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.tps-card.updated-highlight {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.calon-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.calon-card.leader-card {
  border-color: var(--color-success);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.calon-card.vote-pulse {
  box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.3);
}

.card-row-item {
  width: 100%;
}

.pulse-live {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--color-success);
  border-radius: 50%;
  animation: pulseLive 1.8s infinite;
}

@keyframes pulseLive {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
  70%  { transform: scale(1.1);  box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.kiosk-btn {
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.connection-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}

.connection-indicator.online {
  color: #166534;
  background-color: #dcfce7;
  border-color: #86efac;
}

.connection-indicator.offline {
  color: #991b1b;
  background-color: #fee2e2;
  border-color: #fca5a5;
}