* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, sans-serif; background:#f3f6fa; margin:0; color:#333; }
.container { max-width: 1300px; margin: 20px auto; padding: 0 15px; }
h1,h2,h3 { color:#1a5276; }

/* ==================== TOPBAR ==================== */
.topbar {
    background: linear-gradient(90deg,#1a5276,#2e86c1); color:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 24px; flex-wrap:wrap; gap:10px;
}
.brand { font-size:20px; font-weight:bold; }
.nav a { color:#fff; text-decoration:none; margin:0 10px; font-weight:500; }
.nav a:hover { text-decoration: underline; }
.userinfo { display:flex; align-items:center; gap:10px; font-size:14px; }

/* ==================== CARDS ==================== */
.cards {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px; margin:20px 0;
}
.card {
    background:#fff; border-radius:10px; padding:18px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    display:flex; flex-direction:column; gap:6px;
    border-left:5px solid #2e86c1;
}
.card strong { font-size:28px; color:#1a5276; }
.card.green  { border-left-color:#28b463; }
.card.green strong  { color:#28b463; }
.card.orange { border-left-color:#e67e22; }
.card.orange strong { color:#e67e22; }

/* ==================== FORMS ==================== */
.form-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:15px;
    background:#fff; padding:20px; border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.form-group { display:flex; flex-direction:column; }
.form-group.span-2 { grid-column: span 2; }
.form-group label { font-weight:600; margin-bottom:5px; color:#1a5276; }
.form-group .hint { font-weight:400; color:#888; font-size:12px; }
.form-group input,
.form-group select,
.form-group textarea {
    padding:9px 12px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}
.form-group input:focus,
.form-group select:focus { border-color:#2e86c1; outline:none; }
.actions { flex-direction:row; gap:10px; justify-content:flex-start; }

/* ==================== BUTTONS ==================== */
.btn {
    display:inline-block; padding:8px 16px; border-radius:6px;
    background:#eaecee; color:#333; text-decoration:none;
    border:none; cursor:pointer; font-size:14px;
}
.btn:hover { background:#d5d8dc; }
.btn.primary { background:#2e86c1; color:#fff; }
.btn.primary:hover { background:#1a5276; }
.btn.danger  { background:#e74c3c; color:#fff; }
.btn.warn    { background:#e67e22; color:#fff; }
.btn.small   { padding:4px 8px; font-size:12px; }

/* =========================================================
   TABLE — SCROLL HORIZONTAL HANYA DI TABEL
   =========================================================
   Prinsip:
   - .table-scroll = container tabel, overflow-x:auto, LEBAR 100% halaman
   - Halaman tetap scroll normal (tidak ada max-height di sini)
   - Tabel min-width lebih lebar → memicu scrollbar HORIZONTAL di container
   - Header tabel sticky HANYA saat scroll vertikal halaman (opsional),
     jadi kita pakai posisi default (bukan sticky top)
   ========================================================= */

.table-scroll {
    width: 100%;
    overflow-x: auto;              /* ← ini yang membuat scroll horizontal */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 15px;
    /* TIDAK ada overflow-y dan TIDAK ada max-height */
    scrollbar-width: thin;
    scrollbar-color: #2e86c1 #eaecee;
    -webkit-overflow-scrolling: touch;   /* smooth scroll di iOS */
}
.table-scroll::-webkit-scrollbar { height: 12px; }
.table-scroll::-webkit-scrollbar-track {
    background: #eaecee; border-radius: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #2e86c1; border-radius: 6px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: #1a5276; }

.data-table {
    width: 100%;
    min-width: 1700px;              /* paksa tabel lebih lebar dari layar */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

/* ---- Sel & header standar ---- */
.data-table thead th {
    background: #1a5276;
    color: #fff;
    white-space: nowrap;
    padding: 10px;
    text-align: left;
    font-weight: 600;
}
.data-table thead th small { font-weight: 400; opacity: .8; }

.data-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid #eaecee;
    text-align: left;
    vertical-align: top;
}

/* ---- Hover baris ---- */
.data-table tbody tr:hover td { background: #f8fbff; }

/* ---- Baris khusus ---- */
.data-table tbody tr.row-selesai td { background: #f0f0f0; }
.data-table tbody tr.row-lewat td   { background: #fff5e6; }

/* ---- Kolom No sticky KIRI (relatif terhadap .table-scroll) ---- */
.data-table th.sticky-col,
.data-table td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 5;
    background: inherit;
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}
.data-table thead th.sticky-col {
    z-index: 12;
    background: #1a5276;
}
/* Warna latar kolom sticky saat baris hover/warna khusus */
.data-table tbody tr td.sticky-col { background: #fff; }
.data-table tbody tr:hover td.sticky-col { background: #f8fbff; }
.data-table tbody tr.row-selesai td.sticky-col { background: #f0f0f0; }
.data-table tbody tr.row-lewat td.sticky-col   { background: #fff5e6; }

/* ---- Kolom Aksi sticky KANAN ---- */
.data-table th.sticky-col-right,
.data-table td.sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 5;
    background: inherit;
    box-shadow: -2px 0 4px rgba(0,0,0,0.06);
}
.data-table thead th.sticky-col-right {
    z-index: 12;
    background: #1a5276;
}
.data-table tbody tr td.sticky-col-right { background: #fff; }
.data-table tbody tr:hover td.sticky-col-right { background: #f8fbff; }
.data-table tbody tr.row-selesai td.sticky-col-right { background: #f0f0f0; }
.data-table tbody tr.row-lewat td.sticky-col-right   { background: #fff5e6; }

.text-center { text-align:center !important; padding:20px !important; }
.actions-cell { white-space:nowrap; }

/* ==================== BADGES ==================== */
.badge {
    display:inline-block; padding:2px 8px; border-radius:12px;
    font-size:12px; font-weight:600; color:#fff; white-space:nowrap;
}
.badge-mt         { background:#2e86c1; }
.badge-ms         { background:#8e44ad; }
.badge-aktif      { background:#28b463; }
.badge-selesai    { background:#95a5a6; }
.badge-warn       { background:#e67e22; }
.badge-tepat      { background:#28b463; }
.badge-lebih-awal { background:#e74c3c; }
.badge-lebih-lama { background:#8e44ad; }

.sub-label { font-size:11px; color:#666; margin-top:3px; font-weight:600; }
.muted { color:#aaa; }

/* ==================== FILTER BAR ==================== */
.filter-bar {
    display:flex; gap:10px; flex-wrap:wrap; margin:15px 0; align-items:center;
}
.filter-bar input,
.filter-bar select {
    padding:8px 12px; border:1px solid #ccc; border-radius:6px; font-size:14px;
}

/* ==================== ALERTS ==================== */
.alert-success, .alert-error {
    padding:10px 15px; border-radius:6px; margin:10px 0; font-size:14px;
}
.alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.alert-error   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }

/* ==================== LOGIN ==================== */
.login-page {
    background: linear-gradient(135deg,#1a5276,#2e86c1);
    min-height:100vh; display:flex; align-items:center; justify-content:center; margin:0;
}
.login-box {
    background:#fff; padding:35px; border-radius:12px; width:340px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.login-box h1 { text-align:center; margin:0 0 5px; color:#1a5276; font-size:22px; }
.login-box .sub { text-align:center; color:#777; margin-bottom:20px; font-size:13px; }
.login-box label { display:block; margin-top:12px; margin-bottom:5px; font-weight:600; font-size:13px; }
.login-box input { width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
.login-box button {
    width:100%; margin-top:20px; padding:11px; background:#2e86c1;
    color:#fff; border:none; border-radius:6px; font-size:15px; cursor:pointer; font-weight:600;
}
.login-box button:hover { background:#1a5276; }

/* ==================== MODAL ==================== */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.modal-box h3 { margin: 0 0 5px; color: #1a5276; }

.preview-box {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    border-left: 5px solid;
    background: #f4f6f7;
    border-color: #ccc;
    color: #555;
}
.preview-tepat      { background:#d4edda; border-color:#28b463; color:#155724; }
.preview-lebih-awal { background:#f8d7da; border-color:#e74c3c; color:#721c24; }
.preview-lebih-lama { background:#e8daef; border-color:#8e44ad; color:#4a235a; }

/* ==================== FOOTER ==================== */
.footer { text-align:center; padding:20px; color:#888; }