/* ============================================================
   RecTrack — Tema Biru Langit & Hijau Muda + Layout Sidebar
   (offline)
   ============================================================ */
:root {
  --sky:    #0284c7;   /* sky-600 (lebih tua) */
  --sky-d:  #0369a1;   /* sky-700 */
  --green:  #22c55e;   /* green-500 */
  --green-d:#16a34a;   /* green-600 */
  --brand:  #0284c7;
  --brand-2:#16a34a;
  --brand-soft: #e0f2fe;   /* sky-100 */
  --ink:    #0f172a;
  --muted:  #64748b;
  --line:   #e2e8f0;
  --surface:#ffffff;
  --bg:     #f0f7fb;
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444; --info:#0ea5e9;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --shadow-lg: 0 14px 40px rgba(14,165,233,.20);
  --sb-w: 260px;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 100% -10%, #d8f3e6 0%, transparent 55%),
    radial-gradient(900px 480px at -8% 0%, #d6efff 0%, transparent 52%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* ============ SHELL (sidebar + main) ============ */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); z-index: 1045;
  background: linear-gradient(180deg, var(--sky) 0%, var(--green) 115%);
  color: #fff; display: flex; flex-direction: column;
  padding: 1.1rem .85rem; box-shadow: 4px 0 24px rgba(2,132,199,.18);
  transition: transform .25s ease;
}
.sb-brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.3rem; color: #fff;
  padding: .3rem .5rem 1.1rem;
}
.sb-brand .brand-badge {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.22);
  display: grid; place-items: center; font-size: 1.25rem; backdrop-filter: blur(4px);
}
.sb-nav { display: flex; flex-direction: column; gap: .28rem; flex: 1; }
.sb-link {
  display: flex; align-items: center; gap: .7rem;
  color: rgba(255,255,255,.92); padding: .68rem .85rem; border-radius: 12px;
  font-weight: 600; font-size: .94rem; text-decoration: none; transition: .16s ease;
}
.sb-link i { font-size: 1.12rem; }
.sb-link:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateX(2px); }
.sb-link.active { background: #fff; color: var(--sky-d); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.sb-foot { border-top: 1px solid rgba(255,255,255,.28); padding-top: .8rem; margin-top: .4rem; }
.sb-user { display: flex; align-items: center; gap: .6rem; color: #fff; padding: 0 .3rem .2rem; }

.app-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.25); color: #fff; font-weight: 700;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4);
}

.app-main { margin-left: var(--sb-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1.1rem; display: flex; align-items: center; gap: .8rem;
}
.topbar-title { font-weight: 700; color: var(--ink); }
.app-avatar2 {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--green)); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: .85rem;
}
.content { flex: 1; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

.sb-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .app-main { margin-left: 0; }
  body.sb-open .sidebar { transform: none; }
  body.sb-open .sb-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1044;
  }
}

/* ============ Komponen ============ */
.page-title { font-weight: 800; letter-spacing: -.02em; }
.text-muted { color: var(--muted) !important; }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { box-shadow: 0 10px 30px rgba(15,23,42,.08); }

/* Kartu statistik */
.stat { position: relative; overflow: hidden; border: none; color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.stat .stat-body { position: relative; z-index: 2; padding: 1.1rem 1.25rem; }
.stat .stat-label { font-size: .8rem; opacity: .92; font-weight: 600; }
.stat .stat-num { font-size: 2.1rem; font-weight: 800; line-height: 1.1; }
.stat .stat-ico { position: absolute; right: -8px; bottom: -12px; font-size: 4.5rem; opacity: .2; z-index: 1; }
.stat.s-total { background: linear-gradient(135deg, #0284c7, #0369a1); }
.stat.s-proc  { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.stat.s-join  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stat.s-fail  { background: linear-gradient(135deg, #fb7185, #e11d48); }

/* Tombol */
.btn { border-radius: 11px; font-weight: 600; transition: .18s ease; }
.btn-primary { background: linear-gradient(135deg, var(--sky), var(--green)); border: none; box-shadow: 0 6px 16px rgba(14,165,233,.28); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-lg); color: #fff; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #f97316); border: none; color: #fff; }
.btn-warning:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline-secondary { border-color: var(--line); color: var(--ink); }
.btn-outline-secondary:hover { background: var(--brand-soft); border-color: var(--sky); color: var(--sky-d); }
.btn-sm { border-radius: 9px; }

/* Form */
.form-control, .form-select { border-radius: 11px; border: 1px solid var(--line); padding: .55rem .8rem; transition: .15s ease; }
.form-control:focus, .form-select:focus { border-color: var(--sky); box-shadow: 0 0 0 .2rem rgba(14,165,233,.18); }
.form-label { font-weight: 600; font-size: .88rem; color: #334155; }
.input-group-text { border-radius: 11px; border-color: var(--line); color: var(--muted); }

/* Tabel */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line); background: #f6fbfe; }
.table tbody td { vertical-align: middle; border-color: #eef5f9; }
.table-hover tbody tr { transition: background .15s; }
.table-hover tbody tr:hover { background: var(--brand-soft); }
.card .table-responsive { border-radius: var(--radius); overflow: hidden; }

/* Badge pill */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; }
.bg-secondary { background: #94a3b8 !important; }
.bg-info { background: var(--info) !important; }
.bg-primary { background: var(--sky-d) !important; }
.bg-warning { background: var(--warn) !important; color: #fff !important; }
.bg-success { background: var(--green) !important; }
.bg-danger { background: var(--danger) !important; }
.bg-dark { background: #334155 !important; }

.progress { background: #e6f1f7; border-radius: 999px; height: 8px; }
.progress-bar { border-radius: 999px; }
.list-group-item { border-color: #eef5f9; }
a { color: var(--sky-d); }
a:hover { color: var(--green-d); }
footer.app-foot { color: var(--muted); font-size: .82rem; padding: 1.2rem 0 1.6rem; text-align: center; }

/* ============ Halaman Auth ============ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 410px; border-radius: 20px; box-shadow: var(--shadow-lg); border: none; overflow: hidden; }
.auth-head { background: linear-gradient(135deg, var(--sky), var(--green)); color: #fff; padding: 2rem 1.75rem 1.5rem; text-align: center; }
.auth-head .brand-badge { width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.2); display: inline-grid; place-items: center; font-size: 1.6rem; margin-bottom: .5rem; }
.auth-body { padding: 1.6rem 1.75rem 1.9rem; }
.otp-input { letter-spacing: .6em; font-size: 1.4rem; text-align: center; font-weight: 700; }