/* ============================================================
   BUKU KAS INTERNET DESA — STYLE MODERN & RESPONSIF
   ============================================================ */

:root {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --primary-soft: #ccfbf1;
  --ink: #0f172a;
  --muted: #64748b;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --wa: #25d366;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .05);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- APP LAYOUT (SIDEBAR + MAIN) ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: none;
  background: var(--card);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 60;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.side-brand:hover { text-decoration: none; }
.side-brand-logo { height: 34px; width: auto; object-fit: contain; flex: none; }
.side-brand-text { line-height: 1.25; font-size: 14px; }

.side-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.side-nav a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.side-nav a.active { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(13, 148, 136, .25); }
.nav-ico { font-size: 16px; width: 20px; text-align: center; flex: none; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }

.side-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-user-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #34d399);
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.side-user-meta { display: flex; flex-direction: column; min-width: 0; }
.side-user-name { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-role { font-size: 11.5px; color: var(--muted); }
.side-foot-actions { display: flex; gap: 8px; }
.side-ico {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: 15px;
}
.side-ico:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.side-logout {
  flex: 1;
  background: var(--red-soft);
  color: var(--red);
  padding: 7px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.side-logout:hover { background: var(--red); color: #fff; text-decoration: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.login-logo-img { height: 60px; width: auto; object-fit: contain; }

.nav-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 80;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: -260px; top: 0; bottom: 0; height: 100%; transition: left .25s ease; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(15, 23, 42, .25); }
  .nav-toggle { display: block; }
  .wrap { padding-top: 64px; }
}

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 500;
}
.flash-success { background: var(--green-soft); color: #14532d; border: 1px solid #bbf7d0; }
.flash-error { background: var(--red-soft); color: #7f1d1d; border: 1px solid #fecaca; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.muted { color: var(--muted); font-size: 13px; }
.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
.page-head .muted { margin: 2px 0 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- CARDS ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pad-x { padding: 0 2px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.stat-sub { color: var(--muted); font-size: 12px; }
.stat-saldo { border-top: 3px solid var(--primary); }
.stat-masuk { border-top: 3px solid var(--green); }
.stat-keluar { border-top: 3px solid var(--red); }
.stat-belum { border-top: 3px solid var(--red); }
.stat-hutang { border-top: 3px solid var(--amber); }
.stat-pelanggan { border-top: 3px solid var(--amber); }
.stat-odp { border-top: 3px solid var(--primary); }
.stat-click { cursor: pointer; }
.stat-click:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }

.stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-ico {
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--primary-soft);
}
.stat-masuk .stat-ico { background: var(--green-soft); }
.stat-belum .stat-ico { background: var(--red-soft); }
.stat-pelanggan .stat-ico { background: var(--amber-soft); }
.stat-odp .stat-ico { background: var(--primary-soft); }

/* ---------- TABLE ---------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr:hover { background: #f8fafc; }
tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
th.sortable-th { cursor: pointer; user-select: none; }
th.sortable-th:hover { color: var(--primary-dark); }
th.sortable-th[data-dir="asc"]::after { content: " \25B2"; font-size: 9px; }
th.sortable-th[data-dir="desc"]::after { content: " \25BC"; font-size: 9px; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 28px; }
.num-in { color: var(--green); font-weight: 600; }
.num-out { color: var(--red); font-weight: 600; }

/* matriks laporan */
.matrix th, .matrix td { padding: 7px 8px; font-size: 12.5px; }
.matrix td.ta-r, .matrix th.ta-r { text-align: right; }
.cell-empty { color: #cbd5e1; }
.cell-belum { background: #f1f5f9; }
.cell-macet { background: #fde68a; }
.cell-admin { background: #ede9fe; }
.cell-tidak_aktif { background: #dbeafe; }
.rekap-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--muted); }
.rekap-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.rekap-legend .lg-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.cell-total { font-weight: 700; background: #f8fafc; }
.sticky-col {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* lebar tetap kolom sticky agar tersusun rapi tanpa tumpang tindih saat scroll */
.matrix thead .sticky-col:nth-child(1), .matrix tbody .sticky-col:nth-child(1) { width: 36px; min-width: 36px; max-width: 36px; }
.matrix thead .sticky-col:nth-child(2), .matrix tbody .sticky-col:nth-child(2) { left: 36px; width: 150px; min-width: 150px; max-width: 150px; }
.matrix thead .sticky-col:nth-child(3), .matrix tbody .sticky-col:nth-child(3) { left: 186px; width: 180px; min-width: 180px; max-width: 180px; }
.matrix thead .sticky-col:nth-child(4), .matrix tbody .sticky-col:nth-child(4) { left: 366px; width: 130px; min-width: 130px; max-width: 130px; }
.report-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }

/* ---------- BADGES ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-masuk { background: var(--green-soft); color: #15803d; }
.badge-keluar { background: var(--red-soft); color: #b91c1c; }
.badge-aktif { background: var(--green-soft); color: #15803d; }
.badge-macet { background: var(--amber-soft); color: #b45309; }
.badge-admin { background: #ede9fe; color: #6d28d9; }
.badge-tidak_aktif { background: #dbeafe; color: #1e40af; }

/* ---------- RINGKASAN STATUS KIRIM WA ---------- */
.kirim-summary { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 4px 0 16px; }
.kirim-stat {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); min-width: 128px;
}
.kirim-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.kirim-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kirim-belum { border-top: 3px solid var(--amber); }
.kirim-belum .kirim-num { color: #b45309; }
.kirim-sudah { border-top: 3px solid var(--green); }
.kirim-sudah .kirim-num { color: #15803d; }
.kirim-total { border-top: 3px solid var(--primary); }
.kirim-total .kirim-num { color: var(--ink); }

/* ---------- RINGKASAN PAKET ---------- */
.paket-summary { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 16px; }
.paket-stat {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); min-width: 140px;
  text-decoration: none; cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .05s;
}
.paket-stat:hover { box-shadow: 0 6px 16px rgba(15,23,42,.10); text-decoration: none; border-color: #cbd5e1; }
.paket-stat:active { transform: translateY(1px); }
.paket-stat.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.paket-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.paket-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.paket-reguler { border-top: 3px solid var(--green); }
.paket-reguler .paket-num { color: #15803d; }
.paket-premium { border-top: 3px solid #2563eb; }
.paket-premium .paket-num { color: #1d4ed8; }
.paket-superior { border-top: 3px solid var(--amber); }
.paket-superior .paket-num { color: #b45309; }
.paket-total { border-top: 3px solid var(--primary); }
.paket-total .paket-num { color: var(--ink); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .05s;
}
.btn:hover { background: #e2e8f0; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--bg); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--red-soft); border-color: #fecaca; color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }
.btn-wa { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; }
.btn-wa:hover { background: var(--wa); color: #fff; border-color: var(--wa); }
.btn-wa-solid { background: var(--wa); border-color: var(--wa); color: #fff; font-size: 15px; padding: 10px 18px; }
.btn-wa-solid:hover { background: #1fb85a; color: #fff; }

/* ---------- FORM ---------- */
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form select, .form textarea {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.inline { display: inline; }

.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter input, .filter select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

/* ---------- LOGIN ---------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0f766e, #0d9488 45%, #134e4a);
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-logo h1 { margin: 0; font-size: 19px; }
.login-logo p { margin: 0; color: var(--muted); font-size: 13px; }
.login-card .form label { margin-bottom: 14px; }

/* ---------- WA PREVIEW ---------- */
.wa-preview {
  background: #e7ffdb;
  border: 1px solid #c7f0c0;
  border-radius: 12px;
  padding: 16px;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.55;
  color: #0b3b2e;
  margin: 14px 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .grid-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .page-head { align-items: flex-start; }
  .head-actions { width: 100%; }
  .head-actions .filter { width: 100%; }
  .head-actions .filter select { flex: 1; }
  th, td { padding: 8px 9px; }
}

/* ---------- RADIO & DUSUN ---------- */
.radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); cursor: pointer; }
.radio input { width: auto; margin: 0; }
.foto-preview { display: block; max-width: 130px; max-height: 130px; border-radius: 8px; border: 1px solid var(--border); object-fit: cover; margin: 4px 0 2px; }
.dusun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dusun-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; color: var(--ink);
}
.dusun-item:hover { background: var(--primary-soft); border-color: var(--primary); text-decoration: none; }
.dusun-nama { font-weight: 700; }
.dusun-count { font-size: 12px; color: var(--muted); }

.form .field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.wa-edit { width: 100%; min-height: 240px; box-sizing: border-box; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.5; padding: 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; margin-top: 6px; }
.wa-status-row { margin: 14px 0 6px; }
.dusun-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }

/* ---------- PRINT ---------- */
.print-only { display: none !important; }
@media print {
  .sidebar, .nav-toggle, .no-print, .page-head, .flash, .btn, .head-actions, .grid-cards { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
  .sticky-col { position: static; background: #fff; }
  .matrix th, .matrix td { font-size: 10px; padding: 4px 6px; }
  .print-only { display: block !important; }
  .print-header { margin-bottom: 16px; }
  .print-header h1 { font-size: 20px; margin: 0 0 4px; color: #0f172a; }
  .print-meta { font-size: 12px; color: #334155; }
}

/* ---------- MODAL & DETAIL TRANSAKSI ---------- */
.row-click { cursor: pointer; }
.row-click:hover { background: #f0fdfa !important; }
.row-click:focus { outline: 2px solid var(--primary); outline-offset: -2px; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.28);
  width: 100%; max-width: 460px; max-height: 85vh; overflow: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-close {
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  font-size: 22px; line-height: 1; width: 36px; height: 36px; cursor: pointer; color: var(--muted);
}
.modal-close:hover { background: #e2e8f0; color: var(--ink); }
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 18px 20px 20px; }

.detail-grid {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 8px 14px; font-size: 14px;
}
.d-k { color: var(--muted); font-weight: 600; }
.d-v { color: var(--ink); word-break: break-word; }
.d-amt { color: var(--green); font-weight: 700; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

.detail-foto { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.detail-foto-item { width: 92px; text-align: center; }
.detail-foto-item img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); display: block; }
.detail-foto-item span { font-size: 11px; color: var(--muted); display: block; margin-top: 3px; }

.gmaps-wrap { margin-top: 2px; }
.gmaps-mini { width: 100%; height: 260px; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; }
.odp-map { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0 0; }
.odp-map-all { position: relative; z-index: 0; width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
@media (max-width: 720px) { .odp-map-all { height: 320px; } }

.odp-pin-wrap { background: transparent; border: none; }
.odp-pin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 0 0 4px rgba(13,148,136,.18);
}
.odp-pop strong { display: block; font-size: 14px; margin-bottom: 2px; }
.odp-pop-sub { font-size: 12.5px; color: #475569; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.18); }
.leaflet-popup-content { margin: 12px 14px; line-height: 1.5; font-family: inherit; }

.odp-foto { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--border); margin-top: 14px; display: block; }
.odp-sub { font-size: 14px; margin: 18px 0 8px; color: var(--ink); }

/* ---------- ODP INFO & INFOGRAFIS ---------- */
.odp-info {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, #eef6ff, #f8fbff);
}
.odp-info-icon { font-size: 30px; line-height: 1; }
.odp-info-body strong { font-size: 15px; }
.odp-info-body p { margin: 6px 0 0; color: var(--ink); font-size: 14px; line-height: 1.6; }

.odp-stats { grid-template-columns: repeat(3, 1fr); }

.odp-warn { border-left: 4px solid var(--amber); background: #fffbeb; }
.odp-warn-head { font-weight: 700; color: #92400e; margin-bottom: 4px; }
.odp-assign { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.odp-assign label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.odp-assign select {
  font: inherit; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; color: var(--ink); min-width: 220px;
}

.odp-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.odp-sub-head .odp-sub { margin: 18px 0 8px; }
.cust-checklist { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; margin: 8px 0 14px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ink); }
.check-item:hover { background: #f1f5f9; }
.check-item input { margin-top: 3px; width: auto; flex: none; }
.check-item > span { line-height: 1.45; }

@media (max-width: 720px) {
  .odp-stats { grid-template-columns: 1fr; }
  .odp-assign { flex-direction: column; align-items: stretch; }
}

/* ---------- PAGINATION ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.pagination-info { font-size: 13px; color: var(--muted); }
.pagination-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.page-link:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-link.disabled { opacity: .45; cursor: default; pointer-events: none; }
.page-ellipsis { color: var(--muted); padding: 0 2px; }

@media print {
  .modal-backdrop { display: none !important; }
}