/* --- Reset ringan --- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

/* --- Layout dasar --- */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f7f7f8;
  color:#222;
}
.topbar{
  background:#111; color:#fff;
  padding:10px 14px; display:flex; align-items:center;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.topbar a{ color:#fff; text-decoration:none; margin:0 8px; }
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }

/* --- Teks judul --- */
h1{ margin:0 0 14px 0; font-size:22px; }
h2{ margin:12px 0; font-size:18px; }

/* --- Kartu & baris --- */
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.row{ display:flex; gap:16px; flex-wrap:wrap; }

/* --- Tabel --- */
table{ width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; }
th,td{ border:1px solid #e5e7eb; padding:8px 10px; font-size:14px; vertical-align:middle; }
th{ background:#f3f4f6; text-align:left; }
tbody tr:nth-child(even){ background:#fafafa; }

/* --- Badge --- */
.badge{ padding:2px 8px; border-radius:12px; font-size:12px; display:inline-block; }
.badge.green{ background:#dcfce7; color:#166534; }
.badge.red{   background:#fee2e2; color:#991b1b; }
.badge.gray{  background:#e5e7eb; color:#374151; }

/* --- Tombol --- */
.btn{
  display:inline-block; padding:8px 12px; border-radius:8px; background:#111; color:#fff;
  text-decoration:none; border:0; cursor:pointer; line-height:1;
}
.btn.small{ padding:4px 8px; font-size:12px; }
.btn.secondary{ background:#374151; }
.btn.danger{ background:#b91c1c; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* --- Form --- */
input, select, textarea{
  padding:7px 8px; border:1px solid #d1d5db; border-radius:8px; width:100%; background:#fff;
}
form{ display:grid; gap:8px; }
.muted{ color:#666; }

/* --- Pesan --- */
.msg{ padding:10px 12px; border:1px solid #ddd; border-radius:8px; margin:12px 0; }
.msg.ok{ background:#eefcf4; border-color:#b7f0c7; color:#1e7e34; }
.msg.error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* --- Modal (dipakai Check-In, Check-Out, Extend) --- */
.ci-modal .ci-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); }
.ci-modal .ci-card{
  position:fixed; left:50%; top:6%; transform:translateX(-50%);
  width:min(860px,94%); background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* --- Helpers --- */
.actions{ white-space: nowrap; }