:root{
  --blue:#1f4dbd;
  --red:#e11d48;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --radius:14px;
  --shadow:0 6px 20px rgba(2,6,23,.06);
  --card:#ffffff;
  --b:#e5e7eb;
  --mut:#64748b;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#fff; color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:.2em 0 .6em; letter-spacing:.2px}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}
.topbar{
  background:linear-gradient(90deg, rgba(31,77,189,.06), rgba(225,29,72,.06));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px; margin:8px 0 16px 0; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow);
}
.topbar h1{margin:0; font-size:20px; color:var(--text)}
.topbar::after{
  content:""; display:block; height:3px; margin-top:10px; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--red));
}

/* Cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:16px; box-shadow:var(--shadow);
}

/* Forms */
.row{display:flex; gap:12px; flex-wrap:wrap}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:#fff;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,77,189,.15);
}
.small{font-size:12px; color:var(--muted)}

/* Buttons */
.btn{
  background:var(--blue); color:#fff; padding:10px 14px;
  border-radius:10px; border:1px solid var(--blue); font-weight:700; cursor:pointer
}
.btn.red{background:var(--red); border-color:var(--red)}
.btn.gray{background:#fff; color:var(--txt); border:1px solid var(--b)}
.btn.ok{background:#22c55e; border:1px solid #16a34a}

/* ===== Minimal Modern Table ===== */
.table{
  width:100%;
  border-collapse:collapse;       /* grid yang bersih, satu garis */
  background:#fff;
  font-size:14px;
}
.table thead th{
  background:#fff;
  color:var(--muted);
  text-align:left;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  padding:10px 12px;
  border-bottom:2px solid var(--line); /* garis tegas tapi halus */
}
.table tbody td{
  padding:10px 12px;
}
/* hanya garis horizontal antar baris, tanpa garis vertikal */
.table tbody tr + tr td{
  border-top:1px solid var(--line);
}
/* hover yang sangat halus, tetap putih bersih */
.table tbody tr:hover td{
  background:rgba(31,77,189,.03);
}

/* Flash messages */
.flash-ok, .flash-success{
  background:rgba(31,77,189,.08); color:#0b3aa2; border:1px solid rgba(31,77,189,.25);
  padding:10px 12px; border-radius:10px; margin-bottom:12px;
}
.flash-error{
  background:rgba(225,29,72,.08); color:#991b1b; border:1px solid rgba(225,29,72,.25);
  padding:10px 12px; border-radius:10px; margin-bottom:12px;
}

/* Utilities */
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:rgba(31,77,189,.1); color:var(--blue); border:1px solid rgba(31,77,189,.2)}
.badge.red{ background:rgba(225,29,72,.1); color:var(--red); border-color:rgba(225,29,72,.2) }
.actions form{display:inline}
@media (max-width: 820px){
  .hide-md{ display:none !important; }
}
::selection{ background:rgba(31,77,189,.18); color:#fff; }

/* === Simple Topbar Nav (chips menu) === */
.nav {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.nav a {
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line, var(--b, #e5e7eb));
  border-radius:0px;
  background:#fff;
  color:var(--text, var(--txt, #0f172a));
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.nav a:hover {
  border-color: var(--blue);
  box-shadow:0 0 0 3px rgba(31,77,189,.10);
}
.nav a.is-active {
  background: var(--blue);
  color:#fff;
  border-color: var(--blue);
}
.nav .logout {
  background: var(--red);
  border-color: var(--red);
  color:#fff;
}

/* Topbar jadi lebih simple (opsional, tetap pakai latar putih & aksen halus) */
.topbar{
  background:linear-gradient(90deg, rgba(31,77,189,.06), rgba(225,29,72,.06));
  border:1px solid var(--line, var(--b, #e5e7eb));
  border-radius:14px;
  padding:10px 12px;
  box-shadow: var(--shadow, 0 6px 20px rgba(2,6,23,.06));
}

/* Responsif: nav bisa di-scroll di HP */
@media (max-width: 768px){
  .nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav::-webkit-scrollbar{ display:none; }
}

/* === DENSER NAV === */
/* Desktop & tablet: jarak & padding diperkecil */
@media (min-width: 769px){
  .nav{ gap:6px !important; }          /* semula 10px */
  .nav a{
    padding:6px 10px !important;       /* semula 8px 12px */
    border-radius:10px;                /* sedikit lebih rapat */
  }
  .topbar{ padding:8px 10px !important; } /* opsional: header lebih compact */
}

/* Opsi ekstra rapat: tambahkan class 'compact' pada <nav class="nav compact"> */
.nav.compact{ gap:4px !important; }
.nav.compact a{ padding:6px 8px !important; }

.form-actions{ margin-top:14px; }

.table.t-center th,
.table.t-center td{
text-align: center !important;}

/* Square nav chips (kotak) */
.nav a{ border-radius:0 !important; }

/* Pastikan desktop/compact juga kotak */
@media (min-width: 769px){
  .nav a{ border-radius:0 !important; }
}
.nav.compact a{ border-radius:0 !important; }

/* === NAV SUPER-COMPACT === */
.nav{ gap:4px !important; }          /* semula 10px */
.nav a{
  padding:4px 8px !important;        /* semula 8px 12px */
  margin:0 !important;               /* pastikan tak ada margin ekstra */
}

/* Jika ingin LEBIH rapat lagi di desktop, aktifkan ini */
@media (min-width: 769px){
  .nav{ gap:3px !important; }
  .nav a{ padding:4px 6px !important; }
}

/* Opsi: hanya untuk halaman tertentu
   ubah <nav class="nav"> -> <nav class="nav compact"> */
.nav.compact{ gap:2px !important; }
.nav.compact a{ padding:3px 6px !important; }