/* ============================================
   SPK Duta GenRe – Main Stylesheet
   Universitas Muhammadiyah Parepare 2025
   ============================================ */

:root {
  --teal:    #0d9488;
  --teal2:   #14b8a6;
  --gold:    #f59e0b;
  --gold2:   #fbbf24;
  --navy:    #0f172a;
  --slate:   #1e293b;
  --card:    #162032;
  --border:  rgba(20,184,166,.22);
  --text:    #e2e8f0;
  --muted:   #94a3b8;
  --danger:  #f87171;
  --success: #34d399;
  --sidebar-w: 250px;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--navy);
  color: var(--text);
  min-height: 100vh;
}

/* Noise texture */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:.5;
}

/* Gradient mesh */
body::after {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 10%, rgba(13,148,136,.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 95% 85%, rgba(245,158,11,.08) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}

/* ── SIDEBAR ──────────────────────── */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: rgba(15,23,42,.95);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .3s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--teal), var(--gold));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.brand-title { font-family:'Playfair Display',serif; font-size:1.05rem; color:#fff; }
.brand-sub { font-size:.7rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

.sidebar-nav { flex:1; padding:16px 12px; overflow-y:auto; }
.nav-section {
  font-size:.65rem; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase;
  padding: 14px 8px 6px;
  font-weight:600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: all .2s;
  margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(13,148,136,.25), rgba(13,148,136,.1));
  color: var(--teal2);
  border: 1px solid rgba(13,148,136,.3);
}
.nav-icon { font-size:1rem; width:20px; text-align:center; }

.sidebar-footer {
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
}
.user-info { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.user-avatar {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--teal), var(--gold));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.9rem; color:#fff;
  flex-shrink:0;
}
.btn-logout {
  display:block; text-align:center;
  padding:8px; border-radius:8px;
  background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.25);
  color:var(--danger);
  text-decoration:none;
  font-size:.82rem; font-weight:600;
  transition:all .2s;
}
.btn-logout:hover { background:rgba(248,113,113,.22); }

/* ── MAIN WRAP ────────────────────── */
.main-wrap {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  position: relative; z-index:1;
}

.topbar {
  height: 60px;
  background: rgba(15,23,42,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky; top:0; z-index:50;
}
.menu-toggle {
  display:none;
  background:transparent; border:none; color:var(--text);
  font-size:1.3rem; cursor:pointer;
}
.topbar-title {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; color:#fff; flex:1;
}
.topbar-right { display:flex; align-items:center; gap:12px; }

.content { padding: 28px 28px 60px; }

/* ── CARDS ────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  position:relative; z-index:1;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.card-title {
  font-family:'Playfair Display',serif;
  font-size:1.1rem; color:var(--gold2);
  display:flex; align-items:center; gap:10px;
}
.card-icon {
  width:30px; height:30px;
  background:linear-gradient(135deg,var(--teal),var(--gold));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
}

/* ── STATS ────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap:16px; margin-bottom:24px;
}
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:20px;
  text-align:center;
  transition:transform .2s;
}
.stat-card:hover { transform:translateY(-2px); }
.stat-val {
  font-family:'Playfair Display',serif;
  font-size:2.2rem; color:var(--teal2); line-height:1;
}
.stat-lbl {
  font-size:.72rem; color:var(--muted);
  margin-top:6px; letter-spacing:.06em; text-transform:uppercase;
}

/* ── FORMS ────────────────────────── */
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px; margin-bottom:16px;
}
.form-group label {
  display:block; font-size:.75rem; color:var(--muted);
  font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:10px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:.9rem;
  outline:none; transition:border .2s;
}
.form-group input:focus,
.form-group select:focus { border-color:var(--teal2); }
.form-group input::placeholder { color:var(--muted); }
.form-group select option { background:var(--slate); }

/* ── BUTTONS ──────────────────────── */
.btn {
  padding:10px 22px; border:none;
  border-radius:10px; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:.875rem; font-weight:600;
  transition:all .2s; letter-spacing:.02em;
  text-decoration:none; display:inline-block;
}
.btn-primary {
  background:linear-gradient(135deg,var(--teal),#0f766e);
  color:#fff; box-shadow:0 4px 14px rgba(13,148,136,.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(13,148,136,.4); }
.btn-gold {
  background:linear-gradient(135deg,var(--gold),#d97706);
  color:#0f172a; box-shadow:0 4px 14px rgba(245,158,11,.3);
}
.btn-gold:hover { transform:translateY(-1px); }
.btn-danger {
  background:rgba(248,113,113,.12); color:var(--danger);
  border:1px solid rgba(248,113,113,.3);
}
.btn-danger:hover { background:rgba(248,113,113,.22); }
.btn-sm { padding:6px 14px; font-size:.78rem; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* ── TABLES ───────────────────────── */
.table-wrap { overflow-x:auto; border-radius:12px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th {
  background:rgba(13,148,136,.15); color:var(--teal2);
  padding:12px 14px; text-align:left;
  font-weight:600; font-size:.72rem;
  letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
}
tbody td {
  padding:11px 14px;
  border-top:1px solid rgba(255,255,255,.05);
  color:var(--text);
}
tbody tr:hover td { background:rgba(255,255,255,.03); }
tbody tr:first-child td { border-top:none; }

/* Rank colors */
.rank-1 { color:var(--gold2); font-weight:700; }
.rank-2 { color:#94a3b8; font-weight:600; }
.rank-3 { color:#b45309; font-weight:600; }

/* Pills / badges */
.pill {
  display:inline-block; padding:3px 10px;
  border-radius:20px; font-size:.72rem; font-weight:600;
}
.pill-pos { background:rgba(52,211,153,.12); color:var(--success); }
.pill-neg { background:rgba(248,113,113,.12); color:var(--danger); }
.pill-laki { background:rgba(96,165,250,.12); color:#93c5fd; }
.pill-perempuan { background:rgba(244,114,182,.12); color:#f9a8d4; }

/* ── ALERTS ───────────────────────── */
.alert { padding:12px 16px; border-radius:10px; font-size:.875rem; margin-bottom:16px; }
.alert-info    { background:rgba(13,148,136,.1);  border:1px solid rgba(13,148,136,.3);  color:var(--teal2); }
.alert-success { background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.3);  color:var(--success); }
.alert-warning { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.3);  color:var(--gold2); }
.alert-danger  { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:var(--danger); }

/* ── SCORE INPUT TABLE ────────────── */
.score-input-table th:first-child,
.score-input-table td:first-child {
  position:sticky; left:0;
  background:var(--card); z-index:5;
  border-right:1px solid var(--border);
}
.score-input-table input[type="number"] {
  width:80px; padding:6px 8px; font-size:.82rem;
}

/* ── PROGRESS BAR ─────────────────── */
.bar-bg { background:rgba(255,255,255,.07); border-radius:4px; height:8px; overflow:hidden; }
.bar-fill {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--teal),var(--gold2));
  transition:width .8s ease;
}

/* ── WINNER CARD ──────────────────── */
.winner-card {
  background:linear-gradient(135deg,rgba(13,148,136,.2),rgba(245,158,11,.1));
  border:1px solid var(--gold);
  border-radius:16px; padding:32px;
  text-align:center; margin-bottom:24px;
}
.winner-crown { font-size:3rem; margin-bottom:8px; }
.winner-name {
  font-family:'Playfair Display',serif;
  font-size:2rem; color:var(--gold2); line-height:1.2;
}
.winner-meta { font-size:.9rem; color:var(--teal2); margin-top:8px; }

/* ── LOGIN PAGE ───────────────────── */
.login-page {
  min-height:100vh; display:flex;
  align-items:center; justify-content:center;
  padding:20px; position:relative; z-index:1;
}
.login-card {
  width:100%; max-width:420px;
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:40px 36px;
}
.login-logo {
  text-align:center; margin-bottom:28px;
}
.login-logo .icon {
  width:64px; height:64px;
  background:linear-gradient(135deg,var(--teal),var(--gold));
  border-radius:18px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
}
.login-logo h1 {
  font-family:'Playfair Display',serif;
  font-size:1.4rem; color:#fff;
}
.login-logo p { font-size:.82rem; color:var(--muted); margin-top:4px; }

/* ── PRINT STYLES ─────────────────── */
@media print {
  body { background:#fff !important; color:#000 !important; }
  body::before, body::after { display:none !important; }
  .sidebar, .topbar, .btn, .btn-row { display:none !important; }
  .main-wrap { margin-left:0 !important; }
  .card { background:#fff !important; border:1px solid #ddd !important; }
  table th { background:#f0f9f8 !important; color:#0d9488 !important; }
  .winner-card { background:#f0fdf9 !important; border:2px solid #0d9488 !important; }
}

/* ── RESPONSIVE ───────────────────── */
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-wrap { margin-left:0; }
  .menu-toggle { display:block; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid { grid-template-columns:1fr; }
  .content { padding:16px; }
}