/* assets/style.css — UI Foundation (Professional Theme)
   - Typography (Inter)
   - Brand palette (Dwipahara green)
   - Buttons, Cards, Forms, Tables
   - Utilities & Print styles
*/

/* ===== Fonts ===== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ===== Design Tokens ===== */
:root{
  --brand: #16a34a;            /* main green (match header) */
  --brand-dark: #0f5f2e;       /* header gradient end */
  --accent: #22c55e;           /* lighter green accent */
  --text: #0f172a;             /* slate-900 */
  --muted: #64748b;            /* slate-500 */
  --bg: #f8fafc;               /* slate-50 */
  --surface: #ffffff;
  --border: #e5e7eb;           /* gray-200 */
  --ring: rgba(22,163,74,.34); /* focus ring */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.05);
  --shadow-soft: 0 4px 14px rgba(2,6,23,.05);
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .1px;
}

/* container width: make it a bit wider for dashboards */
.container { max-width: 1180px; }

/* links */
a { color: var(--accent); text-decoration: none; }
a:hover { filter: brightness(1.06); text-decoration: underline; }

/* headings */
h1,h2,h3,h4 { letter-spacing: .2px; }

/* ===== Header (from header.php) helpers ===== */
.dw-header { color: #fff; }
.dw-header a { color: #fff; text-decoration: underline; }
.dw-logo { display:block; }

/* ===== Cards ===== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card .card-body { padding: 18px; }

/* ===== Buttons ===== */
.btn { border-radius: 12px; font-weight: 600; letter-spacing: .2px; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-primary:hover {
  background: var(--brand);
  color: #fff;
}
.btn-success {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-warning {
  color: #1f2937;
  background: #fde68a;
  border-color: #fcd34d;
}
.btn-danger {
  background: #ef4444;
  border-color: #ef4444;
}

/* ===== Forms ===== */
.form-control, .form-select, textarea {
  border-radius: 12px;
  border-color: var(--border);
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
input[type="file"].form-control {
  padding: .45rem .75rem;
}
label.form-label { font-weight: 600; color: #111827; }

/* subtle help text */
small.text-muted { color: var(--muted) !important; }

/* ===== Tables ===== */
.table {
  border-color: var(--border);
  background: var(--surface);
}
.table th, .table td { vertical-align: middle; }
.table thead th {
  background: #f3f4f6; /* gray-100 */
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fcfcfd; }
.table-hover tbody tr:hover { background: #f8fbf9; }

/* sticky header helper for long lists */
.table.sticky-header thead th {
  position: sticky; top: 0; z-index: 2;
}

/* ===== Nav (partials/nav.php) =====
   Note: nav.php punya style inline sebelumnya.
   Nanti kita bersihkan di file nav.php agar hanya pakai kelas berikut.
*/
.portal-nav{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin:14px 0;padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}
.portal-nav a{
  display:inline-block;padding:8px 12px;border-radius:10px;
  text-decoration:none;border:1px solid transparent;
  color:#111;font-weight:600;letter-spacing:.2px;opacity:.95;
}
.portal-nav a:hover{opacity:1;border-color:#e5e7eb}
.portal-nav a.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.portal-nav .right{
  margin-left:auto;display:flex;align-items:center;gap:.6rem;
  font-size:.92rem;color:#374151;opacity:.95
}
.portal-nav .right a{border:1px solid #ef4444;color:#ef4444;border-radius:8px;padding:6px 10px;text-decoration:none}
.portal-nav .right a:hover{background:#ef4444;color:#fff}

/* ===== Media: Webcam preview (pendaftaran) ===== */
#videoPreview{border-radius:12px;border:1px solid var(--border);box-shadow: var(--shadow-soft);}
#photoPreviewImg{border-radius:12px;border:1px solid var(--border);box-shadow: var(--shadow-soft);}

/* ===== Badges / Chips ===== */
.badge-rounded { border-radius: 999px; padding: 6px 10px; }

/* ===== Layout helpers ===== */
.section { margin-block: 1.25rem; }
.section-lg { margin-block: 1.75rem; }
.shadow-soft { box-shadow: var(--shadow-soft); }
.rounded-2xl { border-radius: 16px; }

/* ===== Print ===== */
@media print {
  body { background:#fff; }
  .portal-nav, .filter-bar, .print-hide, .btn, .navbar { display: none !important; }
  .card { box-shadow: none; border-color: #bbb; }
  .table thead th { background: #e5ffe8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}