/* =============================================================
   UI REFRESH
   Lapisan terakhir yang menyeragamkan tampilan: satu palet warna,
   satu gaya tombol, tabel yang lebih padat, kartu tanpa glow.
   Tata letak tidak diubah. Selektor sengaja diawali
   "html body #appWrapper" (dan #adminView / #appSidebar) karena
   file sebelumnya memakai banyak !important dengan selektor ID.
   ============================================================= */

:root {
  --ui-primary: #1d4ed8;
  --ui-primary-hover: #1e40af;
  --ui-primary-soft: #eff6ff;
  --ui-text: #0f172a;
  --ui-text-2: #334155;
  --ui-muted: #64748b;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-danger: #dc2626;
  --ui-danger-soft: #fef2f2;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --ui-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Dasar ---------- */
html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--ui-font) !important;
}

/* ---------- Header ---------- */
html body #appWrapper .global-app-header {
  box-shadow: 0 1px 0 var(--ui-border) !important;
}

html body #appWrapper .global-app-header #globalPageTitle {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ui-text) !important;
  letter-spacing: -.01em !important;
}

html body #appWrapper .global-app-header .header-period-box[hidden] {
  display: none !important;
}

/* ---------- Sidebar ---------- */
html body #appWrapper #appSidebar .sidebar-nav {
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

html body #appWrapper #appSidebar .sidebar-item {
  color: var(--ui-text-2) !important;
  font-weight: 500 !important;
  border-radius: var(--ui-radius) !important;
}

html body #appWrapper #appSidebar .sidebar-item:hover {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

html body #appWrapper #appSidebar .sidebar-item.active,
html body #appWrapper #appSidebar .sidebar-dropdown-toggle.expanded {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary) !important;
  font-weight: 600 !important;
}

html body #appWrapper #appSidebar .sidebar-item.active .sidebar-item-icon svg {
  stroke: var(--ui-primary) !important;
}

/* Ikon Dashboard & Kelola Data sebelumnya kotak hitam terisi penuh. */
html body #appWrapper #appSidebar .sidebar-item[data-menu="dashboard"] .sidebar-item-icon svg,
html body #appWrapper #appSidebar #manageDataToggle .sidebar-item-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

html body #appWrapper #appSidebar .sidebar-logout {
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ui-radius) !important;
  border: 1px solid #fecaca !important;
  background: var(--ui-surface) !important;
  color: var(--ui-danger) !important;
  flex-shrink: 0 !important;
}

html body #appWrapper #appSidebar .sidebar-logout:hover {
  background: var(--ui-danger-soft) !important;
}

/* ---------- Kontrol form (input, select) ---------- */
html body #appWrapper #adminView input[type="text"],
html body #appWrapper #adminView input[type="search"],
html body #appWrapper #adminView input[type="number"],
html body #appWrapper #adminView input[type="password"],
html body #appWrapper #adminView input[type="date"],
html body #appWrapper #adminView input[type="month"],
html body #appWrapper #adminView select {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background-color: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

html body #appWrapper input:focus,
html body #appWrapper select:focus,
html body #appWrapper textarea:focus {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15) !important;
  outline: none !important;
}

html body #appWrapper #adminView .date-filter {
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ---------- Tombol ----------
   Primer  : aksi utama (simpan, tambah, input manual).
   Sekunder: semua tombol toolbar (export, import, template, cetak, reset).
   Bahaya  : hapus.                                                     */
html body #appWrapper .submit-btn,
html body #appWrapper #adminView #odpManualBtn,
html body #appWrapper #adminView #showAllReportsBtn {
  background: var(--ui-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  box-shadow: var(--ui-shadow) !important;
  text-shadow: none !important;
}

html body #appWrapper .submit-btn:hover,
html body #appWrapper #adminView #odpManualBtn:hover,
html body #appWrapper #adminView #showAllReportsBtn:hover {
  background: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}

html body #appWrapper #adminView #odpManualBtn,
html body #appWrapper #adminView #showAllReportsBtn {
  font-size: 13px !important;
}

html body #appWrapper #adminView .export-btn:not(#odpManualBtn):not(#showAllReportsBtn),
html body #appWrapper #adminView .file-btn,
html body #appWrapper #adminView .print-type-btn,
html body #appWrapper #adminView .toolbar-print-group .print-type-btn {
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-text-2) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: 38px !important;
}

html body #appWrapper #adminView .export-btn:not(#odpManualBtn):not(#showAllReportsBtn):hover,
html body #appWrapper #adminView .file-btn:hover,
html body #appWrapper #adminView .print-type-btn:hover {
  background: var(--ui-bg) !important;
  border-color: var(--ui-muted) !important;
  color: var(--ui-text) !important;
}

/* Tombol cetak per jenis tetap dibedakan lewat titik warna kecil. */
html body #appWrapper #adminView .print-type-btn.instalasi::before,
html body #appWrapper #adminView .print-type-btn.dismantle::before,
html body #appWrapper #adminView .print-type-btn.maintenance::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
}
html body #appWrapper #adminView .print-type-btn.instalasi::before { background: #16a34a; }
html body #appWrapper #adminView .print-type-btn.dismantle::before { background: #d97706; }
html body #appWrapper #adminView .print-type-btn.maintenance::before { background: #dc2626; }

html body #appWrapper #adminView .file-btn .file-btn-icon svg {
  stroke: currentColor !important;
}

/* Tombol aksi di tabel & modal */
html body .btn-edit,
html body #appWrapper .btn-edit {
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-primary) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

html body .btn-edit:hover,
html body #appWrapper .btn-edit:hover {
  background: var(--ui-primary-soft) !important;
  border-color: var(--ui-primary) !important;
}

html body .btn-delete,
html body #appWrapper .btn-delete {
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-danger) !important;
  border: 1px solid #fecaca !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

html body .btn-delete:hover:not(:disabled),
html body #appWrapper .btn-delete:hover:not(:disabled) {
  background: var(--ui-danger-soft) !important;
  border-color: var(--ui-danger) !important;
}

html body .btn-delete:disabled,
html body #appWrapper .btn-delete:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* Tombol konfirmasi di modal (Simpan / Hapus) */
html body .modal-actions .btn-print,
html body .modal .btn-print {
  background: var(--ui-primary) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body .modal-actions .btn-delete:not(:disabled),
html body .modal .modal-actions .btn-delete {
  background: var(--ui-danger) !important;
  color: #fff !important;
  border-color: var(--ui-danger) !important;
}

/* =============================================================
   TABEL
   Satu gaya untuk semua tabel di layar: Dashboard (laporan terbaru),
   Data Pelanggan, Rekap Material, Kelola ODP, Rekap Data, Kelola ONT,
   Akun, Jenis ONT, Teknisi, Jenis Perbaikan, Paket Service.
   ============================================================= */

/* Wadah: kartu putih bergaris, gulir horizontal bila tabel lebar. */
html body #appWrapper #adminView .report-table-wrap,
html body #appWrapper #adminView .master-table-wrap,
html body #appWrapper #adminView .inventory-table-wrap,
html body #appWrapper #adminView .recent-table-wrap {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  background: var(--ui-surface) !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-strong) transparent;
}

html body #appWrapper #adminView .report-table-wrap::-webkit-scrollbar,
html body #appWrapper #adminView .master-table-wrap::-webkit-scrollbar,
html body #appWrapper #adminView .inventory-table-wrap::-webkit-scrollbar {
  height: 8px;
}

html body #appWrapper #adminView .report-table-wrap::-webkit-scrollbar-thumb,
html body #appWrapper #adminView .master-table-wrap::-webkit-scrollbar-thumb,
html body #appWrapper #adminView .inventory-table-wrap::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: 999px;
}

/* Tabel di dalam wadah tidak perlu garis/bayangan sendiri. */
html body #appWrapper #adminView .report-table-wrap > table,
html body #appWrapper #adminView .master-table-wrap > table,
html body #appWrapper #adminView .inventory-table-wrap > table,
html body #appWrapper #adminView .recent-table-wrap > table {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tabel master (Akun, Jenis ONT, Teknisi, Jenis Perbaikan, Paket) tidak
   punya wadah, jadi tabelnya sendiri yang diberi bingkai kartu. */
html body #appWrapper #adminView .master-list > table.master-table {
  width: 100% !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--ui-shadow) !important;
  background: var(--ui-surface) !important;
}

html body #appWrapper #adminView table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

/* Kepala tabel */
html body #appWrapper #adminView table thead th {
  height: 44px !important;
  padding: 0 14px !important;
  background: var(--ui-bg) !important;
  color: var(--ui-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

/* Isi tabel: satu baris teks per sel, tinggi baris ±48px. */
html body #appWrapper #adminView table tbody td {
  height: 48px !important;
  padding: 8px 14px !important;
  color: var(--ui-text-2) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: var(--ui-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid #eef2f6 !important;
}

html body #appWrapper #adminView table tbody tr:last-child td {
  border-bottom: 0 !important;
}

html body #appWrapper #adminView table tbody tr:hover td {
  background: #f8fafc !important;
}

html body #appWrapper #adminView table tbody td strong {
  color: var(--ui-text) !important;
  font-weight: 600 !important;
}

/* Kolom teks panjang boleh dua baris, dengan lebar terkendali. */
html body #appWrapper #adminView .report-table td.address-cell,
html body #appWrapper #adminView .recap-table td.recap-col-wrap,
html body #appWrapper #adminView .odp-table td:nth-child(2),
html body #appWrapper #adminView .odp-table td:nth-child(4) {
  white-space: normal !important;
  min-width: 180px !important;
  max-width: 280px !important;
}

/* Kolom No & checkbox */
html body #appWrapper #adminView table .number-col,
html body #appWrapper #adminView table .master-number-col {
  width: 52px !important;
  min-width: 52px !important;
  text-align: center !important;
  color: var(--ui-muted) !important;
}

html body #appWrapper #adminView table .select-col,
html body #appWrapper #adminView table .master-select-col {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Checkbox sempat ikut gaya input global (tinggi 42px) sehingga baris
   tabel master jadi 66px. */
html body #appWrapper #adminView table input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  accent-color: var(--ui-primary);
  cursor: pointer;
}

/* Badge: jenis pekerjaan, status WO, status stok — ukuran seragam. */
html body #appWrapper #adminView table .type-pill,
html body #appWrapper #adminView table .status-pill,
html body #appWrapper #adminView table .inventory-status {
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

html body #appWrapper #adminView .recap-table .recap-type-label {
  display: inline !important;
  margin: 0 0 0 6px !important;
  font-size: 11.5px !important;
  color: var(--ui-muted) !important;
}

/* ID tiket, SN, MAC: satu gaya monospace. */
html body #appWrapper #adminView table .report-id,
html body #appWrapper #adminView table .sn-tag-mono,
html body #appWrapper #adminView table .sn-mac-badge {
  display: inline-block !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #f1f5f9 !important;
  color: var(--ui-text-2) !important;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* SN/MAC maintenance (Keluar / Masuk) tetap dua baris kecil. */
html body #appWrapper #adminView table .table-sn-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

html body #appWrapper #adminView table .sn-tag-keluar,
html body #appWrapper #adminView table .sn-tag-masuk {
  display: inline-block !important;
  margin: 0 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

html body #appWrapper #adminView table .sn-tag-keluar small,
html body #appWrapper #adminView table .sn-tag-masuk small {
  font-family: var(--ui-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  opacity: .75;
}

/* Kolom Aksi: Edit + Hapus sebaris, tanpa padding tambahan. */
html body #appWrapper #adminView table .table-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: max-content !important;
  min-height: 0 !important;
  padding: 0 !important;
}

html body #appWrapper #adminView table td.master-item-actions,
html body #appWrapper #adminView table td.table-actions {
  display: table-cell !important;
}

html body #appWrapper #adminView table td.master-item-actions > button + button,
html body #appWrapper #adminView table td.table-actions > button + button {
  margin-left: 6px !important;
}

html body #appWrapper #adminView table .btn-edit,
html body #appWrapper #adminView table .btn-delete {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Tabel lebar: kolom Aksi menempel di kanan saat digulir horizontal. */
html body #appWrapper #adminView .report-table th:last-child,
html body #appWrapper #adminView .report-table td:last-child,
html body #appWrapper #adminView .odp-table th:last-child,
html body #appWrapper #adminView .odp-table td:last-child,
html body #appWrapper #adminView .inventory-table th:last-child,
html body #appWrapper #adminView .inventory-table td:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 1 !important;
  box-shadow: inset 1px 0 0 var(--ui-border) !important;
}

html body #appWrapper #adminView .report-table th:last-child,
html body #appWrapper #adminView .odp-table th:last-child,
html body #appWrapper #adminView .inventory-table th:last-child {
  z-index: 2 !important;
}

/* Teks "Pilih data untuk hapus massal" di atas tabel master. */
html body #appWrapper #adminView .master-bulk-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 32px !important;
  margin: 16px 0 8px !important;
  color: var(--ui-muted) !important;
  font-size: 12.5px !important;
}

/* Keadaan kosong / memuat */
html body #appWrapper #adminView .empty-state {
  padding: 40px 16px !important;
  border: 1px dashed var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* Dashboard: tabel laporan terbaru lebih ringkas. */
html body #appWrapper #adminView .recent-table tbody td {
  height: 42px !important;
}

/* ---------- Paginasi ---------- */
html body #appWrapper #adminView .app-table-pagination button,
html body #appWrapper #adminView .pagination-controls button,
html body #appWrapper #adminView .pagination-icon-actions button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

html body #appWrapper #adminView .app-table-pagination button:hover:not(:disabled) {
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary) !important;
}

html body #appWrapper #adminView .app-table-pagination button:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

html body #appWrapper #adminView .pagination-controls,
html body #appWrapper #adminView .pagination-icon-actions {
  display: flex !important;
  gap: 6px !important;
}

html body #appWrapper #adminView .app-table-pagination {
  color: var(--ui-muted) !important;
  font-size: 13px !important;
}

/* ---------- Kartu & dashboard ---------- */
html body #appWrapper #adminView .summary-metric-card,
html body #appWrapper #adminView .quick-action,
html body #appWrapper #adminView .dashboard-surface,
html body #appWrapper #adminView .ringkasan-card,
html body #appWrapper #adminView .material-summary-item,
html body #appWrapper #adminView .settings-section {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
  background: var(--ui-surface) !important;
}

html body #appWrapper #adminView .summary-metric-card::before {
  display: none !important;
}

html body #appWrapper #adminView .quick-action:hover {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
}

html body #appWrapper #adminView .summary-metric-value,
html body #appWrapper #adminView .material-summary-item strong + *,
html body #appWrapper #adminView .summary-metric-title {
  color: var(--ui-text) !important;
}

html body #appWrapper #adminView .summary-metric-title {
  font-weight: 600 !important;
}

html body #appWrapper #adminView .panel-section-title,
html body #appWrapper #adminView .panel-section-title .title-wrap,
html body #appWrapper #adminView .dashboard-section-heading h3,
html body #appWrapper #adminView .summary-chart-head strong,
html body #appWrapper #adminView .account-form-title {
  color: var(--ui-text) !important;
  font-weight: 700 !important;
}

/* Form Pengaturan sebelumnya 14px lebih lebar dari panel lain. */
html body #appWrapper #adminView #settingsForm {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- Form laporan (Instalasi / Dismantle / Maintenance) ---------- */
html body #appWrapper #formView .ticket-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow) !important;
}

html body #appWrapper #formView .submit-btn {
  min-height: 44px !important;
}

/* ---------- Halaman login ---------- */
html body.login-page #adminLoginView .login-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
}

html body.login-page #adminLoginView .login-field label {
  text-align: left !important;
  display: block !important;
  color: var(--ui-text-2) !important;
  font-weight: 600 !important;
}

html body.login-page #adminLoginView .login-field input {
  text-align: left !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
}

/* Kolom password sejajar dengan kolom username (sebelumnya menjorok 42px). */
html body.login-page #adminLoginView .password-field input {
  padding-left: 14px !important;
}

html body.login-page #adminLoginView .submit-btn {
  min-height: 44px !important;
  font-size: 15px !important;
}

/* ---------- Ponsel ---------- */
@media (max-width: 760px) {
  html body #appWrapper #adminView .admin-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body #appWrapper #adminView .admin-toolbar > input,
  html body #appWrapper #adminView .admin-toolbar > select,
  html body #appWrapper #adminView .admin-toolbar > .date-filter {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Tombol toolbar dua kolom, bukan tumpukan tombol besar satu per baris. */
  html body #appWrapper #adminView .admin-toolbar > .export-btn,
  html body #appWrapper #adminView .admin-toolbar > .print-type-btn,
  html body #appWrapper #adminView .admin-toolbar > .file-btn {
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html body #appWrapper #adminView .toolbar-print-group {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
  }

  html body #appWrapper #adminView .toolbar-print-group .print-type-btn {
    flex: 1 1 calc(50% - 6px) !important;
  }
}

/* Ringkasan dashboard tidak perlu bingkai di luar kartu-kartu metriknya. */
html body #appWrapper #adminView [data-panel="dashboard"] .ringkasan-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =============================================================
   TABEL DATA PELANGGAN (ringkas, 10 kolom)
   Info yang berkaitan ditumpuk dua baris dalam satu sel supaya
   tabel muat di layar tanpa perlu digulir ke samping.
   ============================================================= */
html body #appWrapper #adminView #reportList .report-table {
  width: 100% !important;
  min-width: 1080px !important;
  table-layout: auto !important;
}

html body #appWrapper #adminView #reportList .report-table tbody td {
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

html body #appWrapper #adminView #reportList .cell-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  line-height: 1.35 !important;
}

html body #appWrapper #adminView #reportList .cell-stack small,
html body #appWrapper #adminView #reportList .device-mac,
html body #appWrapper #adminView #reportList .cell-muted {
  color: var(--ui-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

html body #appWrapper #adminView #reportList .cell-clamp {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}

/* Lebar kolom */
html body #appWrapper #adminView #reportList .col-customer { min-width: 170px !important; max-width: 220px !important; white-space: normal !important; }
html body #appWrapper #adminView #reportList .col-address { min-width: 150px !important; max-width: 200px !important; white-space: normal !important; }
html body #appWrapper #adminView #reportList .col-device { min-width: 170px !important; }
html body #appWrapper #adminView #reportList .col-work { min-width: 120px !important; }
html body #appWrapper #adminView #reportList .col-date { min-width: 120px !important; }
html body #appWrapper #adminView #reportList .col-note { min-width: 140px !important; max-width: 200px !important; white-space: normal !important; }
html body #appWrapper #adminView #reportList .col-id { min-width: 150px !important; }

/* Perangkat: SN monospace, MAC kecil di bawahnya */
html body #appWrapper #adminView #reportList .device-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  line-height: 1.35 !important;
}

html body #appWrapper #adminView #reportList .device-line + .device-line {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed var(--ui-border) !important;
}

html body #appWrapper #adminView #reportList .device-sn {
  color: var(--ui-text) !important;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

html body #appWrapper #adminView #reportList .device-mac {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-size: 11.5px !important;
}

html body #appWrapper #adminView #reportList .device-label {
  align-self: flex-start !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
}

html body #appWrapper #adminView #reportList .device-label.out { background: #dcfce7 !important; color: #166534 !important; }
html body #appWrapper #adminView #reportList .device-label.in { background: #fef3c7 !important; color: #92400e !important; }

/* Status WO sebagai teks bertitik di bawah badge jenis pekerjaan */
html body #appWrapper #adminView #reportList .status-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 500 !important;
  color: var(--ui-text-2) !important;
}

html body #appWrapper #adminView #reportList .status-text::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-muted);
}

html body #appWrapper #adminView #reportList .status-text.done::before { background: #16a34a; }
html body #appWrapper #adminView #reportList .status-text.pending::before { background: #d97706; }
html body #appWrapper #adminView #reportList .status-text.issue::before { background: #dc2626; }
html body #appWrapper #adminView #reportList .status-text.cancelled::before { background: #94a3b8; }

html body #appWrapper #adminView #reportList .source-pill {
  font-size: 10.5px !important;
  padding: 0 6px !important;
  line-height: 16px !important;
  border-radius: 4px !important;
}

/* Label Keluar/Masuk sebaris dengan SN; keterangan WO menempel di status. */
html body #appWrapper #adminView #reportList .device-sn-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body #appWrapper #adminView #reportList .device-line + .device-line {
  margin-top: 4px !important;
  padding-top: 4px !important;
}

html body #appWrapper #adminView #reportList .col-work {
  min-width: 150px !important;
  max-width: 220px !important;
  white-space: normal !important;
}

html body #appWrapper #adminView #reportList .status-text {
  display: block !important;
  max-width: 210px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #appWrapper #adminView #reportList .status-text::before {
  display: inline-block !important;
  margin-right: 6px !important;
  vertical-align: 1px !important;
}

html body #appWrapper #adminView #reportList .status-note {
  margin-left: 4px !important;
  color: var(--ui-muted) !important;
  font-weight: 400 !important;
}

/* Lebar kolom tetap (persentase) supaya semua kolom, termasuk ID Tiket,
   muat di layar 1366px ke atas tanpa gulir. Di layar lebih sempit tabel
   tetap bisa digulir (min-width) dengan kolom Aksi menempel di kanan. */
html body #appWrapper #adminView #reportList .report-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 1000px !important;
}

html body #appWrapper #adminView #reportList .report-table th,
html body #appWrapper #adminView #reportList .report-table td {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

html body #appWrapper #adminView #reportList .report-table .select-col { width: 42px !important; }
html body #appWrapper #adminView #reportList .report-table .number-col { width: 44px !important; }
html body #appWrapper #adminView #reportList .report-table .col-customer { width: 17% !important; }
html body #appWrapper #adminView #reportList .report-table .col-address { width: 14% !important; }
html body #appWrapper #adminView #reportList .report-table .col-device { width: 19% !important; }
html body #appWrapper #adminView #reportList .report-table .col-work { width: 16% !important; }
html body #appWrapper #adminView #reportList .report-table .col-date { width: 13% !important; }
html body #appWrapper #adminView #reportList .report-table .col-id { width: 15% !important; }
html body #appWrapper #adminView #reportList .report-table .col-actions { width: 128px !important; }

html body #appWrapper #adminView #reportList .report-table thead th {
  white-space: normal !important;
  line-height: 1.3 !important;
}

html body #appWrapper #adminView #reportList .device-sn,
html body #appWrapper #adminView #reportList .device-mac {
  word-break: break-all !important;
}

html body #appWrapper #adminView #reportList .col-date small,
html body #appWrapper #adminView #reportList .col-customer small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

html body #appWrapper #adminView #reportList .col-id .report-id {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Proporsi kolom: ID Tiket mendapat ruang cukup untuk ID terpanjang
   (mis. MIG-INS-260906-CBCC82) tanpa dipotong. */
html body #appWrapper #adminView #reportList .report-table .col-customer { width: 16% !important; }
html body #appWrapper #adminView #reportList .report-table .col-address { width: 13% !important; }
html body #appWrapper #adminView #reportList .report-table .col-device { width: 18% !important; }
html body #appWrapper #adminView #reportList .report-table .col-work { width: 15% !important; }
html body #appWrapper #adminView #reportList .report-table .col-date { width: 12% !important; }
html body #appWrapper #adminView #reportList .report-table .col-id { width: 17% !important; }

html body #appWrapper #adminView #reportList .col-id .report-id {
  padding: 2px 5px !important;
  font-size: 11.5px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* SN panjang boleh turun baris di dalam kolom Perangkat. */
html body #appWrapper #adminView #reportList .device-sn-row {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

html body #appWrapper #adminView #reportList .device-sn {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Label Keluar/Masuk tetap di kiri SN; yang turun baris adalah SN-nya. */
html body #appWrapper #adminView #reportList .device-sn-row {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}

html body #appWrapper #adminView #reportList .device-label {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
}

/* No HP & nama teknisi tidak dipotong, boleh dua baris. */
html body #appWrapper #adminView #reportList .col-date small,
html body #appWrapper #adminView #reportList .col-customer small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body #appWrapper #adminView #reportList .device-sn,
html body #appWrapper #adminView #reportList .device-mac {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* =============================================================
   REKAP DATA — filter Periode & kolom tabel
   ============================================================= */
html body #appWrapper #adminView .recap-period-filter {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

html body #appWrapper #adminView .recap-period-control {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 38px !important;
  min-width: 210px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background-color .15s ease;
}

html body #appWrapper #adminView .recap-period-control:hover {
  border-color: var(--ui-muted) !important;
}

html body #appWrapper #adminView .recap-period-control:focus-within {
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .15) !important;
}

html body #appWrapper #adminView .recap-period-control.is-active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
  padding-right: 34px !important;
}

html body #appWrapper #adminView .recap-period-eyebrow {
  color: var(--ui-muted) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body #appWrapper #adminView .recap-period-value {
  flex: 1 1 auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

html body #appWrapper #adminView .recap-period-control.is-active .recap-period-value {
  color: var(--ui-primary) !important;
}

html body #appWrapper #adminView .recap-period-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  fill: none !important;
  stroke: var(--ui-muted) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
}

html body #appWrapper #adminView .recap-period-control.is-active .recap-period-icon {
  display: none !important;
}

/* Input bulan bawaan menutupi seluruh kotak tapi tak terlihat, sehingga
   klik di mana pun membuka pemilih bulan/tahun milik browser. */
html body #appWrapper #adminView .recap-period-control input[type="month"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

html body #appWrapper #adminView .recap-period-clear {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ui-primary) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
}

html body #appWrapper #adminView .recap-period-clear[hidden] {
  display: none !important;
}

html body #appWrapper #adminView .recap-period-clear:hover {
  background: rgba(29, 78, 216, .12) !important;
}

/* Kolom tabel Rekap Data */
html body #appWrapper #adminView .recap-table {
  min-width: 1900px !important;
}

html body #appWrapper #adminView .recap-table .recap-col-mono {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace !important;
  font-size: 12px !important;
}

html body #appWrapper #adminView .recap-table .recap-col-status {
  min-width: 190px !important;
}

@media (max-width: 760px) {
  html body #appWrapper #adminView .recap-period-filter,
  html body #appWrapper #adminView .recap-period-control {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* =============================================================
   CETAK PDF — REKAP DATA (A4 landscape)
   Kata hanya dipatahkan di spasi/tanda hubung (bukan di tengah kata),
   lebar kolom dari <colgroup>, baris tidak terbelah antar halaman,
   dan kepala tabel diulang di setiap halaman.
   ============================================================= */
html body #printArea .recap-print-document .print-title h2 {
  margin-bottom: 2px !important;
}

html body #printArea table.recap-print-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid #94a3b8 !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 7pt !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

html body #printArea table.recap-print-table thead {
  display: table-header-group !important;
}

html body #printArea table.recap-print-table tr {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

html body #printArea table.recap-print-table th,
html body #printArea table.recap-print-table td {
  padding: 3px 4px !important;
  border: 0 !important;
  border-right: 0.5px solid #cbd5e1 !important;
  border-bottom: 0.5px solid #cbd5e1 !important;
  text-align: left !important;
  vertical-align: top !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html body #printArea table.recap-print-table th {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-size: 6.3pt !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #94a3b8 !important;
}

html body #printArea table.recap-print-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

html body #printArea table.recap-print-table .rp-num {
  text-align: center !important;
  color: #475569 !important;
}

html body #printArea table.recap-print-table td.rp-strong {
  font-weight: 600 !important;
}

html body #printArea table.recap-print-table td.rp-nowrap {
  white-space: nowrap !important;
}

/* ID tiket, SN, MAC: monospace kecil; boleh patah di tanda hubung
   atau di spasi sekitar tanda panah (SN lama → SN baru). */
html body #printArea table.recap-print-table td.rp-mono {
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace !important;
  font-size: 6.4pt !important;
  letter-spacing: -0.1px !important;
}

html body #printArea table.recap-print-table td.rp-status small {
  display: block !important;
  margin-top: 1px !important;
  color: #64748b !important;
  font-size: 6pt !important;
}

/* Teks tanpa spasi yang lebih panjang dari kolomnya (mis. SN 20 karakter)
   baru dipatahkan sebagai jalan terakhir, supaya tidak menembus kolom lain. */
html body #printArea table.recap-print-table td {
  overflow-wrap: break-word !important;
}