/* ===== STICKY TABLE HEADER ===== */
.table-wrap { overflow:auto; max-height:calc(100vh - 230px); border-radius:0.5rem; border:1px solid #e5e7eb; box-shadow:0 2px 8px rgba(0,0,0,0.07); }
table { border-collapse:collapse; width:100%; }
thead th { position:sticky; top:0; z-index:20; background:#1e3a5f; color:#fff; font-size:0.75rem; font-weight:600; white-space:nowrap; padding:10px 12px; border-right:1px solid #2d5382; text-align:center; }
thead th:first-child { position:sticky; left:0; z-index:30; background:#152d4a; min-width:175px; }
tbody td:first-child { position:sticky; left:0; z-index:10; background:#f0f4fa; font-weight:600; font-size:0.78rem; color:#1e3a5f; padding:8px 12px; border-right:2px solid #c9d8ea; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
tbody tr:hover td:first-child { background:#dbeafe; }
tbody td { padding:4px 6px; border-right:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0; text-align:center; font-size:0.82rem; background:#fff; }
tbody tr:hover td { background:#f0f7ff; }
.param-label { color:#374151; }
.param-unit  { margin-left:4px; color:#94a3b8; font-size:0.72rem; }
.cell-input { width:90px; padding:4px 6px; border:1px solid transparent; border-radius:4px; text-align:center; font-size:0.82rem; background:transparent; transition:all 0.15s; }
.cell-input:focus { outline:none; border-color:#3b82f6; background:#eff6ff; box-shadow:0 0 0 2px #bfdbfe; }
select.cell-input { width:118px; cursor:pointer; }
.row-section td { background:#f8fafc !important; font-size:0.7rem; color:#64748b; font-style:italic; padding:2px 12px !important; }

/* ===== TAB BUTTONS ===== */
.tab-btn { padding:8px 20px; border-radius:8px 8px 0 0; font-size:0.8rem; font-weight:700; cursor:pointer; border:none; border-bottom:3px solid transparent; transition:all 0.18s; color:#93c5fd; background:rgba(255,255,255,0.08); letter-spacing:0.02em; }
.tab-btn.active { background:rgba(255,255,255,0.18); color:#fff; border-bottom:3px solid #38bdf8; }
.tab-btn:not(.active):hover { background:rgba(255,255,255,0.13); color:#e0f2fe; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ===== LAP OPERASIONAL ===== */
.lap-form-wrap { overflow:auto; max-height:calc(100vh - 230px); padding-bottom:16px; }
.area-group { margin-bottom:4px; padding:0 4px; }
.area-label { font-size:0.72rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.1em; padding:12px 4px 6px; display:flex; align-items:center; gap:6px; }
.area-label i { color:#60a5fa; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.lap-card { background:#fff; border-radius:10px; border:1px solid #e2e8f0; box-shadow:0 1px 4px rgba(0,0,0,0.06); overflow:hidden; }
.lap-card-header { background:#1e3a5f; color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; }
.unit-name { font-size:0.88rem; font-weight:700; }
.unit-area { font-size:0.68rem; color:#93c5fd; margin-top:1px; }
.unit-kode { font-size:0.68rem; background:rgba(255,255,255,0.15); border-radius:4px; padding:2px 7px; white-space:nowrap; }
.lap-info-bar { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:6px 14px; display:flex; gap:14px; flex-wrap:wrap; font-size:0.68rem; color:#64748b; }
.lap-info-bar i { margin-right:3px; color:#93c5fd; }
.lap-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 14px; }
.lap-field label { font-size:0.68rem; font-weight:600; color:#64748b; display:block; margin-bottom:3px; }
.lap-field label i { margin-right:3px; }
.lap-field input { width:100%; padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.82rem; color:#1e3a5f; transition:all 0.15s; box-sizing:border-box; }
.lap-field input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px #bfdbfe; }
.lap-field.full { grid-column:1/-1; }
.lap-card-footer { padding:8px 14px; border-top:1px solid #f1f5f9; display:flex; justify-content:flex-end; }
.lap-saved { font-size:0.68rem; color:#16a34a; display:none; align-items:center; gap:3px; }
.lap-saved.show { display:inline-flex; }

/* ===== BUTTONS ===== */
.btn { padding:7px 16px; border-radius:6px; font-size:0.82rem; font-weight:600; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px; transition:all 0.15s; }
.btn-primary { background:#1e3a5f; color:#fff; } .btn-primary:hover { background:#2563eb; }
.btn-success { background:#16a34a; color:#fff; } .btn-success:hover { background:#15803d; }
.btn-outline  { background:#fff; color:#1e3a5f; border:1px solid #1e3a5f; } .btn-outline:hover { background:#eff6ff; }
.btn-sm { padding:5px 12px; font-size:0.75rem; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ===== TOAST ===== */
#toast { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast-item { padding:10px 16px; border-radius:8px; color:#fff; font-size:0.82rem; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,0.18); animation:slideIn 0.3s ease; display:flex; align-items:center; gap:8px; }
.toast-success { background:#16a34a; } .toast-error { background:#dc2626; } .toast-info { background:#2563eb; }
@keyframes slideIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ===== MODAL ===== */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000;display:flex;align-items:center;justify-content:center; }
.modal-box { background:#fff;border-radius:12px;padding:24px;width:380px;max-width:95vw;box-shadow:0 8px 32px rgba(0,0,0,0.22); }
.modal-title { font-size:1rem;font-weight:700;color:#1e3a5f;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.riwayat-btn { width:100%;text-align:left;padding:8px 12px;border-radius:6px;border:1px solid #e2e8f0;background:#fff;font-size:0.82rem;cursor:pointer;display:flex;align-items:center;gap:8px;color:#374151;margin-bottom:4px;transition:all 0.12s; }
.riwayat-btn:hover { background:#eff6ff;border-color:#93c5fd;color:#1e3a5f; }
.riwayat-btn i { color:#60a5fa; }

/* ===== SPINNER ===== */
.spinner { display:inline-block;width:18px;height:18px;border:3px solid #bfdbfe;border-top:3px solid #2563eb;border-radius:50%;animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== SEARCH ===== */
.search-unit { padding:7px 12px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.82rem; width:200px; }
.search-unit:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 2px #bfdbfe; }

/* ===== LAP SINGLE UNIT FORM ===== */
.lap-single-card { background:#fff; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 2px 12px rgba(0,0,0,0.08); overflow:hidden; margin-top:4px; }
.lap-single-header { background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%); color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.lap-single-title { font-size:1.1rem; font-weight:800; letter-spacing:0.02em; }
.lap-single-sub { font-size:0.73rem; color:#93c5fd; margin-top:2px; }
.lap-kode-badge { font-size:0.72rem; background:rgba(255,255,255,0.18); border-radius:5px; padding:3px 10px; font-weight:600; }
.badge-saved { font-size:0.72rem; background:#dcfce7; color:#15803d; border-radius:5px; padding:3px 10px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.lap-single-infobar { background:#f0f4fa; border-bottom:1px solid #e2e8f0; padding:10px 20px; display:flex; gap:28px; flex-wrap:wrap; }
.info-item { display:flex; flex-direction:column; gap:1px; }
.info-label { font-size:0.65rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; }
.info-val { font-size:0.82rem; font-weight:600; color:#1e3a5f; }
.lap-single-body { padding:20px; display:flex; flex-direction:column; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group.full { grid-column:1/-1; }
.form-label { font-size:0.72rem; font-weight:700; color:#64748b; display:flex; align-items:center; gap:5px; }
.form-input { width:100%; padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:7px; font-size:0.88rem; color:#1e3a5f; transition:all 0.15s; box-sizing:border-box; }
.form-input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px #bfdbfe; }
.input-unit-wrap { position:relative; display:flex; align-items:center; }
.input-unit-wrap .form-input { padding-right:44px; }
.input-unit-label { position:absolute; right:10px; font-size:0.72rem; color:#94a3b8; font-weight:600; pointer-events:none; }
.lap-single-footer { padding:14px 20px; border-top:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; background:#fafafa; }

/* Wajib & opsional label */
.wajib { color:#dc2626; font-weight:700; margin-left:2px; }
.opsional { color:#94a3b8; font-weight:400; font-size:0.68rem; margin-left:4px; }

/* Input error highlight */
.form-input.input-error { border-color:#dc2626 !important; background:#fff5f5; box-shadow:0 0 0 3px #fecaca; animation: shakeX 0.3s ease; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ===== LAP EMPTY STATE ===== */
#lap-state-empty, #lap-state-pick-unit { display:flex; }
#lap-state-empty.hidden, #lap-state-pick-unit.hidden { display:none; }

/* ===== REVIEW LAPORAN ===== */
.review-wrap { background:#fff; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 2px 16px rgba(0,0,0,0.09); overflow:hidden; margin-top:4px; max-width:640px; margin-left:auto; margin-right:auto; }

/* Kop surat */
.review-kop { background:linear-gradient(135deg,#1e3a5f 0%,#1d4ed8 100%); color:#fff; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.review-kop-left { display:flex; align-items:center; gap:16px; }
.review-kop-icon { width:46px; height:46px; background:rgba(255,255,255,0.15); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.review-kop-title { font-size:1.05rem; font-weight:800; letter-spacing:0.04em; line-height:1.2; }
.review-kop-sub { font-size:0.72rem; color:#93c5fd; margin-top:3px; }
.review-kop-stamp { text-align:center; background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.3); border-radius:8px; padding:6px 12px; font-size:0.6rem; font-weight:800; letter-spacing:0.12em; color:#bbf7d0; line-height:1.5; flex-shrink:0; }
.review-kop-stamp i { font-size:1rem; display:block; margin-bottom:2px; color:#4ade80; }

/* Divider */
.review-divider { height:1px; background:linear-gradient(90deg,#e2e8f0 0%,#bfdbfe 50%,#e2e8f0 100%); margin:0 24px; }

/* Identitas unit */
.review-identity { padding:18px 24px 14px; }
.review-unit-name { font-size:1.25rem; font-weight:800; color:#1e3a5f; margin-bottom:12px; letter-spacing:0.01em; }
.review-id-table { border-collapse:collapse; width:auto; }
.review-id-table td { padding:3px 0; font-size:0.88rem; }
.rid-label { color:#64748b; min-width:130px; font-weight:500; }
.rid-sep { color:#94a3b8; padding:0 10px; }
.rid-val { color:#1e293b; font-weight:700; }

/* Data operasional */
.review-data-section { padding:14px 24px 18px; }
.review-section-label { font-size:0.68rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.review-section-label i { color:#3b82f6; }
.review-data-table { border-collapse:collapse; width:100%; }
.review-data-table tr { border-bottom:1px solid #f1f5f9; }
.review-data-table tr:last-child { border-bottom:none; }
.rdt-label { color:#475569; font-size:0.88rem; padding:8px 0; min-width:200px; }
.rdt-sep { color:#94a3b8; padding:8px 12px; }
.rdt-val { font-size:0.95rem; color:#1e293b; padding:8px 0; }
.rdt-unit { font-size:0.72rem; color:#64748b; margin-left:4px; font-weight:500; }
.rdt-last { background:#f8fafc; border-radius:6px; }
.rdt-last .rdt-label, .rdt-last .rdt-sep, .rdt-last .rdt-val { font-weight:700; color:#1e3a5f; }

/* Footer review */
.review-footer { padding:14px 24px; background:#f8fafc; border-top:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.review-save-info { font-size:0.72rem; color:#94a3b8; display:flex; align-items:center; gap:6px; }
.review-actions { display:flex; gap:10px; align-items:center; }
.btn-outline-dark { background:#fff; color:#1e3a5f; border:1.5px solid #1e3a5f; } .btn-outline-dark:hover { background:#eff6ff; }
.btn-kirim { background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,0.3); }
.btn-kirim:hover { background:linear-gradient(135deg,#15803d,#166534); }

/* ===== MODAL KIRIM ===== */
.kirim-preview-box { background:#f0f4fa; border:1px solid #dde4ef; border-radius:8px; padding:16px; margin-bottom:16px; max-height:300px; overflow-y:auto; }
.kirim-preview-text { font-family:'Courier New',monospace; font-size:0.82rem; color:#1e293b; white-space:pre-wrap; line-height:1.6; margin:0; }
.kirim-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-wa { background:#25d366; color:#fff; } .btn-wa:hover { background:#1da851; }