/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* =============================================
   HEADER
   ============================================= */
.app-header {
  background: #1e3a5f;
  color: #fff;
  padding: 8px 16px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-header-icon { font-size: 1.4rem; color: #93c5fd; flex-shrink: 0; }
.app-header-body { display: flex; flex-direction: column; }
.app-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.app-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tab-row { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.app-header-sub { font-size: 0.7rem; color: #93c5fd; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }

/* =============================================
   TAB BUTTONS
   ============================================= */
.tab-btn {
  flex: 0 0 auto;
  width: 12.5%;
  text-align: center;
  padding: 6px 8px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  font-size: 0.75rem;
  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;
  white-space: nowrap;
}
.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; }
/* Icon admin di pojok kanan tab-row */
.tab-btn-admin-icon {
  width: 32px;
  flex: 0 0 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 6px;
  opacity: 0.55;
}
.tab-btn-admin-icon:not(.active):hover { opacity: 1; }
.tab-btn-admin-icon.active { opacity: 1; border-bottom: 3px solid #f59e0b; color: #fbbf24; background: rgba(251,191,36,0.15); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* =============================================
   DATA SUB-TAB (HOP BBM / STOCK OLI)
   ============================================= */
.data-subtab-row {
  display: flex;
  gap: 6px;
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
  align-items: center;
}
.data-subtab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  min-width: 110px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  border-bottom: none;
  background: #f8fafc;
  color: #64748b;
  letter-spacing: 0.03em;
  transition: all 0.15s;
  position: static;
}
.data-subtab-btn.active {
  background: #1e3a5f;
  color: #fff;
  border-color: #1e3a5f;
}
.data-subtab-btn:not(.active):hover {
  background: #e2e8f0;
  color: #1e3a5f;
}
.data-subtab-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
.data-subtab-date .toolbar-label {
  margin-bottom: 0;
}

/* =============================================
   TOOLBAR
   ============================================= */
/* Tombol mobile: sembunyi di desktop */
.btn-toolbar-mobile { display: none; }

.toolbar-wrap {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 10px 14px;
}
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-select {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.82rem;
  color: #1e3a5f;
  background: #fff;
  cursor: pointer;
  transition: border 0.15s;
  min-width: 0;
  flex: 1;
  max-width: 220px;
}
.toolbar-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
.toolbar-select:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.toolbar-input {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.82rem;
  color: #1e3a5f;
  transition: border 0.15s;
}
.toolbar-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
#sel-tanggal, #lap-tanggal { width: 150px; flex-shrink: 0; }
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.toolbar-info { font-size: 0.7rem; color: #94a3b8; margin-left: auto; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.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-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.25); }
.btn-kirim:hover { background: linear-gradient(135deg,#15803d,#166534); }
.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1da851; }
.btn-sm { padding: 5px 10px; font-size: 0.73rem; }
/* icon-only on small screens */
.btn .btn-text { display: inline; }

/* =============================================
   MONITORING TABLE
   ============================================= */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: max-content; min-width: 100%; }

/* Kolom NO pada table submenu data & tabel inputan: fit content */
#neraca-table th:first-child,
#neraca-table td:first-child,
#data-table th:first-child,
#data-table td:first-child,
#oli-table th:first-child,
#oli-table td:first-child,
#main-table th:first-child,
#main-table td:first-child {
  width: 1px !important;
  min-width: unset !important;
  max-width: unset !important;
  white-space: nowrap !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Sticky header row */
thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #1e3a5f;
  color: #fff;
  font-size: 0.57rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 9px 8px;
  border-right: 1px solid #2d5382;
  text-align: center;
}
/* Sticky first column header (top-left corner) */
thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 30;
  background: #152d4a;
  min-width: 170px;
  max-width: 220px;
  text-align: left;
}
/* Sticky first column body */
tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  color: #374151;
  padding: 7px 10px;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  min-width: 170px;
  max-width: 220px;
}
tbody tr:hover td:first-child { background: #f0f7ff; }
tbody td {
  padding: 3px 4px;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  font-size: 0.75rem;
  background: #fff;
}
tbody tr:hover td { background: #f0f7ff; }

.th-param { text-align: center !important; background: #1e3a5f !important; color: #fff !important; border-right: none !important; }
.th-mesin { min-width: 100px; }
.th-mesin-name { font-weight: 700; font-size: 0.72rem; white-space: normal; word-break: break-word; line-height: 1.3; }
.th-mesin-meta { margin-top: 3px; display: flex; flex-direction: column; gap: 1px; }
.th-id  { font-size: 0.62rem; color: #93c5fd; }
.th-sn  { font-size: 0.6rem;  color: #111827; }
.param-label { color: #374151; }
.param-unit  { margin-left: 3px; color: #94a3b8; font-size: 0.68rem; }
.cell-input {
  width: 82px;
  padding: 5px 5px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: center;
  font-size: 0.75rem;
  background: #fff;
  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: 112px; cursor: pointer; font-size: 0.75rem; }
.cell-input-text { width: 160px; text-align: left; font-size: 0.75rem; }

/* Mobile: cegah zoom otomatis iOS (min 16px hanya di layar kecil) */
@media (max-width: 768px) {
  .cell-input { font-size: max(0.75rem, 16px); }
  .cell-input-text { font-size: max(0.75rem, 16px); }
  select.cell-input { font-size: max(0.75rem, 16px); }
  .data-subtab-btn { font-size: 0.7rem !important; }
}

/* Disabled: abu-abu, tidak bisa diklik */
.cell-input.cell-disabled,
.cell-input.cell-disabled:focus {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none;
  opacity: 0.7 !important;
}
td.td-disabled {
  background: #f8fafc !important;
}
tbody tr:hover td.td-disabled { background: #f1f5f9 !important; }

/* Required: border biru tipis agar terlihat wajib diisi */
.cell-input.cell-required {
  border-color: #bfdbfe !important;
  background: #fff !important;
}
.cell-input.cell-required:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px #bfdbfe !important;
}
td.td-required { background: #fff !important; }

/* Error: border merah jika field wajib kosong saat simpan */
.cell-input.cell-error,
.cell-input.cell-error:focus {
  border-color: #ef4444 !important;
  background: #fff1f1 !important;
  box-shadow: 0 0 0 2px #fecaca !important;
  animation: shake 0.3s ease;
}
td.td-error { background: #fff1f1 !important; }
tbody tr:hover td.td-error { background: #ffe4e4 !important; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.row-section td { background: #f8fafc !important; font-size: 0.68rem; color: #64748b; font-style: italic; padding: 2px 10px !important; }

/* =============================================
   TOAST
   ============================================= */
#toast { position: fixed; bottom: 20px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); }
.toast-item { padding: 9px 14px; border-radius: 8px; color: #fff; font-size: 0.8rem; 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; padding: 12px; }
.modal-box { background: #fff; border-radius: 12px; padding: 20px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); max-height: 90vh; overflow-y: auto; }
.modal-title { font-size: 0.95rem; 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: 16px; height: 16px; border: 3px solid #bfdbfe; border-top: 3px solid #2563eb; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================
   LAP. OPERASIONAL — 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: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.lap-single-title { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.lap-single-sub { font-size: 0.7rem; color: #93c5fd; margin-top: 2px; }
.lap-kode-badge { font-size: 0.7rem; background: rgba(255,255,255,0.18); border-radius: 5px; padding: 3px 9px; font-weight: 600; white-space: nowrap; }
.badge-saved { font-size: 0.7rem; background: #dcfce7; color: #15803d; border-radius: 5px; padding: 3px 9px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.lap-single-infobar { background: #f0f4fa; border-bottom: 1px solid #e2e8f0; padding: 8px 18px; display: flex; gap: 20px; flex-wrap: wrap; }
.info-item { display: flex; flex-direction: column; gap: 1px; }
.info-label { font-size: 0.62rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; }
.info-val { font-size: 0.8rem; font-weight: 600; color: #1e3a5f; }
.lap-single-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 0.7rem; font-weight: 700; color: #64748b; display: flex; align-items: center; gap: 4px; }
.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: 40px; }
.input-unit-label { position: absolute; right: 10px; font-size: 0.7rem; color: #94a3b8; font-weight: 600; pointer-events: none; }
.lap-single-footer { padding: 12px 18px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; background: #fafafa; gap: 8px; flex-wrap: wrap; }

/* ── KOP LAPORAN ── */
.lap-kop { padding: 16px 20px 12px; border-bottom: 1px solid #e2e8f0; }
.lap-kop-title { font-size: 0.85rem; font-weight: 800; color: #1e3a5f; text-transform: uppercase; letter-spacing: 0.06em; }
.lap-kop-unit  { font-size: 0.85rem; font-weight: 800; color: #1e3a5f; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.lap-kop-meta  { display: flex; gap: 16px; align-items: center; margin-top: 6px; flex-wrap: wrap; font-size: 0.78rem; color: #475569; }

/* ── FIELD ROW (label : input) ── */
.lap-field-row   { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.lap-field-row:last-child { border-bottom: none; }
.lap-field-label { min-width: 220px; font-size: 0.82rem; color: #334155; font-weight: 500; flex-shrink: 0; }
.lap-field-sep   { color: #64748b; font-weight: 600; flex-shrink: 0; }
.lap-field-input { flex: 1; padding: 6px 10px; border: 1.5px solid #e2e8f0; border-radius: 6px; font-size: 0.85rem; color: #1e3a5f; min-width: 0; transition: border 0.15s; box-sizing: border-box; }
.lap-field-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
.lap-field-input.input-error { border-color: #dc2626 !important; background: #fff5f5; }
.lap-field-unit  { font-size: 0.72rem; color: #94a3b8; font-weight: 600; white-space: nowrap; flex-shrink: 0; min-width: 28px; }

/* ── OLI FIELD ── */
.oli-angka-input { flex: 1; min-width: 0; max-width: 100px; }
.oli-x-btn {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  font-size: 0.85rem; font-weight: 700; line-height: 1;
  border: 1.5px solid #fca5a5; border-radius: 50%; background: #fff5f5;
  color: #ef4444; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.oli-x-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.oli-x-btn-error { background: #ef4444 !important; color: #fff !important; border-color: #dc2626 !important; animation: oli-shake 0.35s ease; }
@keyframes oli-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
.oli-tm-label {
  flex: 1; font-size: 0.82rem; color: #475569; font-style: italic;
  display: flex; align-items: center; gap: 6px;
}
.oli-reset-btn {
  background: none; border: none; cursor: pointer; color: #94a3b8;
  font-size: 0.8rem; padding: 0 2px; line-height: 1;
}
.oli-reset-btn:hover { color: #dc2626; }
.oli-hint { font-size: 0.72rem; color: #f59e0b; font-weight: 500; white-space: nowrap; flex-shrink: 0; }

/* ── Kamera Modal ── */
.kamera-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
}
.kamera-modal-box {
  background: #0f172a; border-radius: 12px; overflow: hidden;
  width: min(96vw, 480px); display: flex; flex-direction: column;
}
.kamera-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #1e293b; color: #f1f5f9;
  font-size: 0.9rem; font-weight: 700;
}
.kamera-close-btn {
  background: none; border: none; color: #94a3b8; font-size: 1.1rem;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.kamera-close-btn:hover { background: #334155; color: #f1f5f9; }
.kamera-video { width: 100%; max-height: 60vh; object-fit: cover; background: #000; }
.kamera-modal-footer { padding: 12px; display: flex; justify-content: center; background: #1e293b; }
.btn-capture {
  padding: 10px 32px; border-radius: 50px; font-size: 1rem; font-weight: 700;
  background: #ef4444; color: #fff; border: none; cursor: pointer; transition: background 0.15s;
}
.btn-capture:hover { background: #dc2626; }
.kamera-error { padding: 10px 14px; color: #fca5a5; font-size: 0.82rem; background: #1e293b; }

/* ── Upload Dokumen ── */
.btn-upload-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  border: 1.5px solid #cbd5e1; background: #f8fafc; color: #334155;
  cursor: pointer; transition: all 0.15s; user-select: none;
}
.btn-upload-opt:hover { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.btn-upload-kamera { border-color: #a7f3d0; background: #f0fdf4; color: #065f46; }
.btn-upload-kamera:hover { border-color: #10b981; background: #d1fae5; color: #065f46; }

/* Operator dropdown */
.op-input-wrap { position: relative; flex: 1; min-width: 0; }
.op-input-wrap .lap-field-input { width: 100%; }
.op-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  z-index: 300;
  padding: 4px 0;
  max-height: 200px;
  overflow-y: auto;
}
.op-dropdown.hidden { display: none; }
.op-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.83rem;
  color: #1e3a5f;
  transition: background 0.12s;
}
.op-item:hover { background: #f0f7ff; }
.op-item input[type="checkbox"] { accent-color: #2563eb; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.op-item span { flex: 1; }

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

/* Input error */
.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)} }

/* 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; }
.review-kop { background: linear-gradient(135deg,#1e3a5f 0%,#1d4ed8 100%); color: #fff; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.review-kop-left { display: flex; align-items: center; gap: 14px; }
.review-kop-icon { width: 42px; height: 42px; background: rgba(255,255,255,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.review-kop-title { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; }
.review-kop-sub { font-size: 0.68rem; 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: 5px 10px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; color: #bbf7d0; line-height: 1.5; flex-shrink: 0; }
.review-kop-stamp i { font-size: 0.95rem; display: block; margin-bottom: 2px; color: #4ade80; }
.review-divider { height: 1px; background: linear-gradient(90deg,#e2e8f0 0%,#bfdbfe 50%,#e2e8f0 100%); margin: 0 20px; }
.review-identity { padding: 16px 20px 12px; }
.review-unit-name { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; color: #1e3a5f; margin-bottom: 10px; }
.review-id-table { border-collapse: separate; border-spacing: 0; width: auto; }
.review-id-table td { padding: 3px 0; font-size: 0.85rem; border: none !important; outline: none !important; box-shadow: none !important; text-align: left; background: transparent !important; }
.rid-label { color: #64748b; min-width: 110px; font-size: 0.85rem; font-weight: 500; text-align: left !important; background: transparent !important; }
.rid-sep { color: #94a3b8; padding: 0 8px; }
.rid-val { color: #1e293b; font-size: 0.85rem; font-weight: 500; text-align: right !important; }
.review-data-section { padding: 12px 20px 16px; }
.review-section-label { font-size: 0.65rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.review-section-label i { color: #3b82f6; }
.review-data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.review-data-table tr { border: none; }
.review-data-table td { border: none !important; outline: none !important; box-shadow: none !important; text-align: left; background: transparent !important; }
.rdt-label { color: #475569; font-size: 0.85rem; font-weight: 500; padding: 7px 0; min-width: 160px; text-align: left !important; background: transparent !important; }
.rdt-sep { color: #94a3b8; padding: 7px 10px; }
.rdt-val { font-size: 0.85rem; font-weight: 500; color: #1e293b; padding: 7px 0; text-align: right !important; }
.rdt-unit { font-size: 0.7rem; color: #64748b; margin-left: 3px; font-weight: 500; }
.rdt-last { background: transparent; border-radius: 6px; }
.rdt-last .rdt-label, .rdt-last .rdt-sep, .rdt-last .rdt-val { font-weight: 500; color: #1e293b; }
.review-footer { padding: 12px 20px; 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.7rem; color: #94a3b8; display: flex; align-items: center; gap: 5px; }
.review-actions { display: flex; gap: 8px; align-items: center; }

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

/* =============================================
   MOBILE  ≤ 640px
   ============================================= */
@media (max-width: 640px) {
  /* Header compact */
  .app-header { padding: 6px 10px 0; }
  .app-name { font-size: 0.7rem; padding-bottom: 3px; }
  .tab-btn { flex: 1; padding: 5px 4px; font-size: 0.65rem; height: 28px; box-sizing: border-box; text-align: center; }
  .tab-btn-admin-icon { width: 16px; flex: 0 0 16px; border-radius: 4px; }
  .tab-btn-admin-icon svg { width: 10px; height: 10px; }
  .data-subtab-btn { font-size: 0.7rem; padding: 5px 10px; height: 28px; box-sizing: border-box; }
  .app-header-sub { display: none; }

  /* Hide button text, show icon only */
  .btn .btn-text { display: none; }
  .btn { padding: 7px 10px; }

  /* Tombol Simpan — tampilkan teks, lebih besar di mobile */
  #btn-simpan-semua { padding: 10px 22px; font-size: 1rem; font-weight: 700; }
  #btn-simpan-semua .btn-text { display: inline; }

  /* Toolbar mobile: setiap field 1 baris */
  .toolbar-wrap { padding: 6px 8px; }
  .toolbar { gap: 5px; flex-direction: column; flex-wrap: nowrap; }
  .toolbar-group { flex: none; width: 100%; display: flex; align-items: center; gap: 6px; }
  .toolbar-label { font-size: 0.7rem; width: 56px; flex-shrink: 0; }
  .toolbar-select { max-width: 100%; min-width: 0; flex: 1; font-size: 0.75rem; padding: 5px 6px; height: 32px; box-sizing: border-box; }
  .toolbar-input { font-size: 0.75rem; padding: 5px 6px; flex: 1; width: 100%; height: 32px; box-sizing: border-box; -webkit-appearance: none; appearance: none; line-height: normal; }
  .toolbar-info { display: none; }
  /* Tombol mobile tampil, tombol desktop sembunyi */
  .btn-toolbar-mobile { display: flex; align-items: center; justify-content: center; padding: 0 8px; height: 32px; box-sizing: border-box; flex-shrink: 0; }
  #btn-padam-desktop { display: none !important; }
  #btn-simpan-semua { display: none !important; }
  /* Select periode di row periode, flex: 1 supaya muat dalam 1 baris */
  #toolbar-group-periode .toolbar-select { flex: 1; min-width: 0; }

  /* Table */
  .table-wrap { max-height: calc(100vh - 200px); border-radius: 0.375rem; }
  thead th:first-child { min-width: 100px !important; max-width: 100px !important; }
  tbody td:first-child  { min-width: 100px !important; max-width: 100px !important; font-size: 0.57rem !important; padding: 2px 3px !important; }
  .th-mesin { min-width: 100px !important; }
  .th-mesin-name { font-size: 0.57rem !important; }
  .th-id, .th-sn { font-size: 0.48rem !important; }
  thead th { font-size: 0.57rem !important; padding: 3px 2px !important; }
  /* Input angka: font>=16px agar tidak auto-zoom di iOS */
  .cell-input { width: 100px !important; font-size: 16px !important; padding: 2px 1px !important; min-height: 20px !important; }
  .cell-input-kwh { width: 100px !important; }
  select.cell-input { width: 100px !important; min-height: 20px !important; font-size: 13px !important; }
  .cell-input-text { width: 200px !important; min-height: 20px !important; font-size: 16px !important; }
  tbody td { font-size: 0.57rem !important; padding: 3px 4px !important; }
  tbody td:first-child { font-size: 0.57rem !important; }
  .cell-input { font-size: 0.57rem !important; }
  select.cell-input { font-size: 0.75rem !important; }
  .cell-input-text { font-size: 0.57rem !important; }

  /* Form single col on mobile */
  .form-row { grid-template-columns: 1fr; }
  .form-group.full { grid-column: 1; }
  .lap-single-body { padding: 10px; gap: 7px; }
  .lap-single-header { padding: 12px 14px; }
  .lap-single-infobar { padding: 8px 14px; gap: 14px; }
  .lap-single-footer { padding: 10px 14px; }

  /* Form laporan operasional mobile: 100% lebar, 1 row */
  #lap-form-container,
  #lap-review-container { max-width: 100% !important; padding: 0 2px; }
  .lap-field-row { flex-wrap: nowrap; gap: 4px; align-items: center; padding: 0; }
  .lap-field-label { min-width: 120px; max-width: 120px; font-size: 0.72rem; flex-shrink: 0; }
  .lap-field-sep { flex-shrink: 0; }
  .lap-field-input { flex: 1; min-width: 0; font-size: 0.82rem; padding: 6px 8px; }
  .lap-field-unit { flex-shrink: 0; font-size: 0.68rem; }
  .op-input-wrap { flex: 1; min-width: 0; }
  .oli-angka-input { max-width: 70px; }
  .oli-x-btn { width: 22px; height: 22px; font-size: 0.78rem; }
  .op-dropdown { font-size: 0.82rem; }
  .op-item { padding: 9px 10px; }

  /* Review */
  .review-identity { padding: 12px 14px; }
  .review-data-section { padding: 10px 14px 14px; }
  .review-footer { padding: 10px 14px; }
  .review-kop { padding: 14px 14px; }
  .review-divider { margin: 0 14px; }
  .rdt-label { min-width: 120px; font-size: 0.85rem; }
  .rdt-val { font-size: 0.85rem; }
  .rid-label { font-size: 0.85rem; }
  .rid-val { font-size: 0.85rem; }
  .rid-label { min-width: 90px; }

  /* Modal full width */
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-box { border-radius: 12px 12px 0 0; max-width: 100%; padding: 16px; }

  /* Toast */
  #toast { bottom: 12px; right: 10px; left: 10px; }
  .toast-item { font-size: 0.75rem; }

  /* Tab content padding */
  #tab-monitoring, #tab-laporan { padding: 8px 8px; }
}

/* =============================================
   TABLET  641px – 1024px
   ============================================= */
@media (min-width: 641px) and (max-width: 1024px) {
  .toolbar-select { max-width: 180px; }
  .table-wrap { max-height: calc(100vh - 225px); }
  thead th:first-child { min-width: 160px; }
  tbody td:first-child  { min-width: 160px; }
  .cell-input { width: 80px; min-height: 34px; font-size: 16px; }
  select.cell-input { width: 106px; min-height: 34px; font-size: 16px; }
  .cell-input-text { width: 140px; min-height: 34px; font-size: 16px; }
}

/* =============================================
   TAILWIND REPLACEMENTS (pengganti cdn.tailwindcss.com)
   ============================================= */
.hidden            { display: none !important; }
.flex              { display: flex; }
.inline-flex       { display: inline-flex; }
.block             { display: block; }
.min-h-screen      { min-height: 100vh; }
.bg-slate-100      { background-color: #f1f5f9; }
.text-xs           { font-size: 0.75rem; line-height: 1rem; }
.text-slate-400    { color: #94a3b8; }
.mb-3              { margin-bottom: 0.75rem; }
.mt-3              { margin-top: 0.75rem; }
.max-h-64          { max-height: 16rem; }
.overflow-y-auto   { overflow-y: auto; }
.justify-end       { justify-content: flex-end; }
.items-center      { align-items: center; }
.w-full            { width: 100%; }
.gap-2             { gap: 0.5rem; }
.p-4               { padding: 1rem; }
.rounded           { border-radius: 0.25rem; }
.font-bold         { font-weight: 700; }
.text-sm           { font-size: 0.875rem; }
.cursor-pointer    { cursor: pointer; }
.opacity-50        { opacity: 0.5; }
.select-none       { user-select: none; }

/* =============================================
   ICON SYSTEM (pengganti FontAwesome CDN)
   Menggunakan SVG inline via CSS mask-image
   ============================================= */
.fas, .far, .fab {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* calendar-day */
.fa-calendar-day {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16h-32z'/%3E%3C/svg%3E");
}
/* check-circle */
.fa-check-circle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}
/* clock */
.fa-clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.5 33.3-6.5s4.5-25.9-6.5-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.5 33.3-6.5s4.5-25.9-6.5-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E");
}
/* copy */
.fa-copy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");
}
/* download */
.fa-download {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64z'/%3E%3C/svg%3E");
}
/* file-pdf */
.fa-file-pdf {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56H192v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H304c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V368z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-35.3 0-64 28.7-64 64V512H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM176 352h32c30.9 0 56 25.1 56 56s-25.1 56-56 56H192v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H192v48h16zm96-80h32c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H304c-8.8 0-16-7.2-16-16V368c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H320v96h16zm80-112c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H448v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V368z'/%3E%3C/svg%3E");
}
/* filter */
.fa-filter {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9.1 97.3C-.7 85.4-2.8 68.9 3.9 54.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9.1 97.3C-.7 85.4-2.8 68.9 3.9 54.9z'/%3E%3C/svg%3E");
}
/* history */
.fa-history {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z'/%3E%3C/svg%3E");
}
/* paper-plane */
.fa-paper-plane {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E");
}
/* pen */
.fa-pen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'/%3E%3C/svg%3E");
}
/* save */
.fa-save {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'/%3E%3C/svg%3E");
}
/* search */
.fa-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.4-14.9 87.3-40 120.9L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-33.6 25.1-75.5 40-120.7 40C93.1 416 0 322.9 0 208S93.1 0 210 0S416 93.1 416 208zM210 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.4-14.9 87.3-40 120.9L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-33.6 25.1-75.5 40-120.7 40C93.1 416 0 322.9 0 208S93.1 0 210 0S416 93.1 416 208zM210 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}
/* spinner (animated) */
.fa-spinner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'/%3E%3C/svg%3E");
}
.fa-spin { animation: spin 0.7s linear infinite; }
/* =============================================
   SLD EDITOR
   ============================================= */
#sld-wrap {
  position: relative;
  height: 580px;
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
}
#sld-palette {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  background: #1e3a5f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  overflow-y: auto;
  z-index: 10;
}
.sld-pal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  width: 64px;
  transition: background 0.15s;
  user-select: none;
}
.sld-pal-item:hover { background: rgba(255,255,255,0.15); }
.sld-pal-item span {
  font-size: 0.58rem;
  color: #93c5fd;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}
.sld-pal-item svg { flex-shrink: 0; }
#sld-canvas-wrap {
  position: absolute;
  left: 72px;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #f1f5f9;
}
#sld-canvas {
  display: block;
  background: #fff;
}
#sld-props-panel {
  position: absolute;
  right: 8px;
  top: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
  font-size: 0.78rem;
}
#sld-state-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #94a3b8;
  font-size: 0.9rem;
  font-style: italic;
}
#sld-toolbar-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
#sld-toolbar-actions button {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #334155;
  color: #e2e8f0;
  transition: background 0.15s;
}
#sld-toolbar-actions button:hover { background: #475569; }
#sld-btn-save  { background: #0284c7 !important; color: #fff !important; }
#sld-btn-save:hover  { background: #0369a1 !important; }
#sld-btn-delete { background: #dc2626 !important; color: #fff !important; }
#sld-btn-delete:hover { background: #b91c1c !important; }
#sld-mode-label {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: #93c5fd;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#sld-mode-label:hover { background: rgba(255,255,255,0.15); }

/* whatsapp */
.fa-whatsapp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}