:root {
  --ink: #1F1B3A;
  --muted: #635F82;
  --line: rgba(99, 95, 130, 0.16);
  --indigo: #4F46E5;
  --violet: #8B5CF6;
  --grad: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 100%);
  --card: rgba(255, 255, 255, 0.62);
  --card-solid: rgba(255, 255, 255, 0.9);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -22px rgba(56, 42, 122, 0.35), 0 2px 8px -4px rgba(56, 42, 122, 0.12);
  --shadow-soft: 0 8px 22px -16px rgba(56, 42, 122, 0.4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: #F3F0FF;
  -webkit-font-smoothing: antialiased;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48rem 32rem at 8% -8%, rgba(99, 102, 241, 0.32), transparent 62%),
    radial-gradient(42rem 30rem at 98% 2%, rgba(236, 72, 153, 0.2), transparent 60%),
    radial-gradient(46rem 30rem at 50% 108%, rgba(56, 189, 248, 0.22), transparent 62%),
    radial-gradient(34rem 26rem at 78% 62%, rgba(139, 92, 246, 0.18), transparent 65%);
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 0 rgba(99, 95, 130, 0.08);
}

.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;   /* logo tidak boleh menyusut jadi 0 saat nav banyak item */
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}

.nav {
  display: flex;
  gap: 6px;
  /* Navigasi boleh turun baris di dalam dirinya sendiri. Dengan 12+ menu,
     nav lebih lebar dari sisa ruang topbar; tanpa ini seluruh halaman
     bergeser horizontal dan logo menyusut jadi 0px. */
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  /* Padding dirapatkan (dari 8px 14px) supaya 12+ menu tetap satu baris
     pada desktop ≥1280px tanpa mendorong logo/overflow. */
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background .18s, color .18s;
}
.nav-link:hover { background: rgba(79, 70, 229, 0.08); color: var(--indigo); }
.nav-link.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(79, 70, 229, 0.9); }
.nav-link-out { color: #4b4768; }
.nav-link-out:hover { background: rgba(99, 95, 130, 0.12); color: #1f1b3a; }

/* ---------- Page ---------- */
.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.page-head { margin-bottom: 24px; }
.page-head h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-sub { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stats.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-card {
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.stat-value.accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-value.accent-dp { color: #0e7490; }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Tanpa form (tampilan publik): daftar memakai lebar penuh */
.layout-solo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.card {
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}

.form-card { position: sticky; top: 84px; }

.card-head { margin-bottom: 18px; }
.card-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.card-sub { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 14px; }

label { font-size: 13px; font-weight: 600; color: #33305a; }
.req { color: #e11d48; }

input[type="text"],
input[type="tel"],
input[type="search"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color .16s, box-shadow .16s, background .16s;
  appearance: none;
  -webkit-appearance: none;
}

textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: #9d99b5; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: rgba(225, 29, 72, 0.6);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.1);
}

.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #8b87a8;
  border-bottom: 2px solid #8b87a8;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select { padding-right: 34px; cursor: pointer; }

.field-error { margin: 0; font-size: 12.5px; color: #be123c; }

.form-alert {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.22);
  color: #9f1239;
}
.form-alert.is-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  color: #047857;
}

.btn-primary {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: var(--grad);
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(79, 70, 229, 0.95);
  transition: transform .14s, box-shadow .14s, opacity .14s;
}
.btn-primary:hover { box-shadow: 0 16px 28px -14px rgba(79, 70, 229, 1); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .72; cursor: default; transform: none; }

.spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-primary.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- List ---------- */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.list-tools { display: flex; gap: 8px; flex-wrap: wrap; }

.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #8b87a8;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.search-wrap input { padding-left: 33px; min-width: 210px; }

.select-wrap.compact select { min-width: 140px; font-size: 13.5px; padding-top: 9px; padding-bottom: 9px; }

/* Checkbox filter di area daftar (mis. "Sembunyikan Leads Tanpa Nama") */
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  color: #33305a;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background .16s, border-color .16s, color .16s;
}
.filter-check:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(79, 70, 229, 0.3); }
.filter-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--indigo);
  cursor: pointer;
}
.filter-check.is-active {
  border-color: rgba(79, 70, 229, 0.45);
  background: rgba(79, 70, 229, 0.1);
  color: #3730a3;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

.table thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(99, 95, 130, 0.1);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.55); }

.cell-name { font-weight: 600; }
.cell-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.cell-note { display: block; font-size: 12.5px; color: #4b4768; margin-top: 4px; max-width: 30ch; }

.wa-link { color: var(--indigo); text-decoration: none; font-weight: 500; white-space: nowrap; }
.wa-link:hover { text-decoration: underline; }
.muted { color: var(--muted); font-size: 13px; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-prospek    { background: rgba(99, 102, 241, 0.1);  color: #4338ca; border-color: rgba(99, 102, 241, 0.22); }
.badge-tahap-awal { background: rgba(99, 102, 241, 0.1);  color: #4338ca; border-color: rgba(99, 102, 241, 0.22); }
.badge-follow-up  { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.28); }
.badge-survey     { background: rgba(14, 165, 233, 0.12); color: #0369a1; border-color: rgba(14, 165, 233, 0.26); }
.badge-penawaran  { background: rgba(79, 70, 229, 0.12);  color: #3730a3; border-color: rgba(79, 70, 229, 0.26); }
.badge-negosiasi  { background: rgba(139, 92, 246, 0.14); color: #6d28d9; border-color: rgba(139, 92, 246, 0.3); }
.badge-deal       { background: rgba(16, 185, 129, 0.14); color: #047857; border-color: rgba(16, 185, 129, 0.3); }
.badge-dp         { background: rgba(6, 182, 212, 0.15);  color: #0e7490; border-color: rgba(6, 182, 212, 0.32); }
.badge-tidak-jadi { background: rgba(244, 63, 94, 0.1);   color: #be123c; border-color: rgba(244, 63, 94, 0.24); }

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  color: #4b4768;
  white-space: nowrap;
}

.empty, .loading { text-align: center; padding: 44px 16px; color: var(--muted); }
.empty-icon { font-size: 30px; margin-bottom: 8px; }
.empty-title { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.empty-sub { margin: 0; font-size: 13.5px; }
.loading { font-size: 13.5px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 40px -18px rgba(56, 42, 122, 0.5);
  opacity: 0;
  transition: opacity .22s, transform .22s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { color: #9f1239; border-color: rgba(225, 29, 72, 0.3); }
.toast::before { content: '✓'; font-weight: 700; color: #059669; }
.toast.is-error::before { content: '!'; color: #e11d48; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .form-card { position: static; }
  .search-wrap input { min-width: 170px; }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .page { padding: 22px 14px 56px; }
  .topbar-inner { padding: 10px 14px; }
  .brand-logo { height: 32px; }
  .page-head h1 { font-size: 22px; }
  .stats { gap: 10px; margin-bottom: 24px; }
  .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 12px 12px; border-radius: var(--radius-sm); }
  .stat-label { font-size: 10.5px; }
  .stat-value { font-size: 19px; }
  .card { padding: 16px; border-radius: 16px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .list-tools { width: 100%; }
  .search-wrap { flex: 1 1 100%; }
  .search-wrap input { min-width: 0; }
  .select-wrap.compact { flex: 1 1 100%; }
  .select-wrap.compact select { width: 100%; }
  .filter-check { flex: 1 1 100%; white-space: normal; }
  .toast { bottom: 16px; }

  /* Tabel jadi kartu bertumpuk di HP */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.62);
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .table tbody tr:last-child { margin-bottom: 0; }
  .table tbody td { border: 0; padding: 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .table tbody td + td { margin-top: 7px; }
  .table tbody td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 0 0 auto;
  }
  .table tbody td[data-label="Nama Prospek"] { display: block; margin-bottom: 10px; }
  .table tbody td[data-label="Nama Prospek"]::before { display: none; }
  .cell-name { font-size: 15.5px; }
  .cell-note { max-width: none; }
}

/* =========================================================
   Halaman detail lead
   ========================================================= */

[hidden] { display: none !important; }

.page-narrow { max-width: 1040px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .16s;
}
.back-link:hover { color: var(--indigo); }

.detail-actions svg,
.back-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.detail-head-main { min-width: 0; }
.detail-head h1 {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.detail-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn-wa,
.btn-ghost,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, background .16s, border-color .16s;
}

.btn-wa {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  box-shadow: 0 12px 22px -14px rgba(21, 128, 61, 0.9);
}
.btn-wa:hover { transform: translateY(-1px); box-shadow: 0 16px 26px -14px rgba(21, 128, 61, 1); }
.btn-wa.is-disabled { opacity: .5; pointer-events: none; box-shadow: none; }

.btn-ghost,
.btn-secondary {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}
.btn-ghost:hover,
.btn-secondary:hover { background: #fff; border-color: rgba(79, 70, 229, 0.4); color: var(--indigo); }

.btn-secondary { flex: 0 0 auto; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 0;
}
.detail-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.detail-item.is-full { grid-column: 1 / -1; }
.detail-item dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-item dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.detail-note {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: #3a3660;
  white-space: normal;
}

.edit-card { border-color: rgba(79, 70, 229, 0.25); }

.form-foot { display: flex; gap: 10px; margin-top: 4px; }
.form-foot .btn-primary { flex: 1 1 auto; }

.meta-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.meta-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.meta-item dt { color: var(--muted); }
.meta-item dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

.meta-hint {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.notfound-card { text-align: center; padding: 48px 24px; }
.notfound-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 20px;
  padding: 11px 22px;
  text-decoration: none;
}

/* Baris daftar bisa diklik menuju detail */
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr[data-href]:focus-within { background: rgba(255, 255, 255, 0.7); }
.cell-name a { color: inherit; text-decoration: none; }
.cell-name a:hover { color: var(--indigo); text-decoration: underline; }

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { order: 2; }
}

@media (max-width: 720px) {
  .page-narrow { padding-left: 14px; padding-right: 14px; }
  .detail-head { gap: 16px; margin-bottom: 20px; }
  .detail-head h1 { font-size: 22px; }
  .detail-actions { width: 100%; }
  .detail-actions .btn-wa,
  .detail-actions .btn-ghost { flex: 1 1 0; padding: 11px 12px; font-size: 13.5px; }
  .detail-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .form-foot { flex-direction: column-reverse; }
  .form-foot .btn-secondary { width: 100%; }
  .notfound-card { padding: 36px 18px; }
}

.cell-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.row-chevron {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
  color: #a8a4c0;
  transition: color .16s, transform .16s;
}
.table tbody tr[data-href]:hover .row-chevron { color: var(--indigo); transform: translateX(2px); }

/* Daftar Leads (Manager & publik): kolom Lokasi (isi = `alamat`) & Masuk
   (Tanggal Masuk). Lokasi dibatasi lebarnya supaya alamat panjang tidak
   melebarkan tabel; di HP batasnya dilepas (mode kartu). */
.table-leads td[data-label="Lokasi"] { max-width: 18ch; overflow-wrap: anywhere; }
.table-leads td[data-label="Masuk"] { white-space: nowrap; }
.table-leads .cell-lokasi { display: block; }
/* Tabel ini punya 7 kolom (Manager) di dalam kartu daftar yang lebih sempit
   dari halaman. Teks yang boleh turun baris membuat seluruh kolom — termasuk
   Aksi (tepat setelah Status) dan Masuk (paling kanan) — muat tanpa gulir
   horizontal di desktop. Tidak ada kolom yang disembunyikan. */
.table-leads thead th { white-space: normal; }
.table-leads .chip { white-space: normal; }
.table-leads .wa-link { white-space: normal; overflow-wrap: anywhere; }
/* Padding sedikit lebih rapat (dari 12px) supaya 7 kolom benar-benar muat. */
.table-leads thead th,
.table-leads tbody td { padding-left: 10px; padding-right: 10px; }
.table-leads td[data-label="Nama Prospek"] { max-width: 26ch; overflow-wrap: anywhere; }

/* Halaman Leads (form + daftar berdampingan): daftar punya 7 kolom, jadi kolom
   form dirapatkan sedikit agar nama prospek & tombol Aksi tetap lega.
   Di 1025–1199px form ditumpuk di atas daftar supaya tabel tetap utuh tanpa
   gulir horizontal. Hanya berlaku di halaman Leads (class tambahan);
   halaman Proyek tidak berubah. */
@media (min-width: 1025px) {
  .layout.leads-layout { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .layout.leads-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .table-leads td[data-label="Lokasi"] { max-width: none; }
}

/* =========================================================
   Halaman proyek
   ========================================================= */

.field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.input-prefix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-prefix > span {
  position: absolute;
  left: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
}
.input-prefix input { padding-left: 38px; }

.chip.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.nilai { font-weight: 600; white-space: nowrap; }

.form-alert a { color: inherit; font-weight: 600; }

@media (max-width: 720px) {
  .input-prefix > span { left: 11px; }
}

/* =========================================================
   Field grup (jadwal, keuangan) & grid form proyek
   ========================================================= */

.field-group {
  margin: 0 0 16px;
  padding: 14px 14px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.42);
}

.field-group > legend {
  padding: 0 8px;
  margin-left: -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo);
}

.field-grid-2,
.field-grid-3 {
  display: grid;
  gap: 0 12px;
}
.field-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* input type=date ikut gaya input teks */
input[type="date"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input[type="date"]:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
input[type="date"].is-invalid {
  border-color: rgba(225, 29, 72, 0.6);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.1);
}

/* badge status proyek */
.badge-desain-3d       { background: rgba(139, 92, 246, 0.14); color: #6d28d9; border-color: rgba(139, 92, 246, 0.3); }
.badge-produksi        { background: rgba(79, 70, 229, 0.12);  color: #3730a3; border-color: rgba(79, 70, 229, 0.26); }
.badge-menunggu-produksi { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.28); }
.badge-selesai         { background: rgba(16, 185, 129, 0.14); color: #047857; border-color: rgba(16, 185, 129, 0.3); }

@media (max-width: 720px) {
  .field-grid-2,
  .field-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .field-group { padding: 12px 12px 2px; }
}

/* =========================================================
   KAS Operasional
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.kas-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.kas-head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.kas-head-actions svg,
.btn-icon svg,
.user-chip svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-icon { padding: 10px 12px; }
.btn-inline { width: auto; padding: 10px 16px; }
.btn-inline svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px; padding: 3px 10px 3px 8px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-size: 12.5px; font-weight: 600; color: #3a3660;
  backdrop-filter: blur(10px);
}

.pill-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: #e11d48; color: #fff;
  font-size: 11.5px; font-weight: 700;
}

.stat-note { font-size: 11.5px; color: var(--muted); }
.stat-value.masuk { color: #047857; }
.stat-value.keluar { color: #be123c; }
.stat-card-akhir { border-color: rgba(79, 70, 229, 0.3); box-shadow: 0 12px 28px -20px rgba(79, 70, 229, 0.7); }

.kas-setting-card { margin-bottom: 24px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.inline-form .field { flex: 1 1 240px; margin-bottom: 0; }
.inline-form .btn-secondary { flex: 0 0 auto; }

/* Peringatan status saldo awal (belum ditetapkan Manager) */
.kas-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.9);
  box-shadow: 0 14px 30px -26px rgba(180, 83, 9, 0.9);
}
.kas-notice-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}
.kas-notice strong { display: block; font-size: 14px; color: #8a4b06; margin-bottom: 4px; }
.kas-notice p { margin: 0; font-size: 13px; line-height: 1.6; color: #7c5a20; }
.kas-notice em { font-style: normal; font-weight: 650; }

.table-kas th.ta-right, .table-kas td.ta-right { text-align: right; }
.table-kas .nowrap { white-space: nowrap; }
.nominal-masuk { color: #047857; font-weight: 600; }
.nominal-keluar { color: #be123c; font-weight: 600; }
.nominal-saldo { color: var(--ink); font-variant-numeric: tabular-nums; }
.table-kas td { font-variant-numeric: tabular-nums; }

.tr-batal { opacity: 0.62; }
.tr-batal .cell-name { text-decoration: line-through; }

.badge-batal   { background: rgba(99, 95, 130, 0.12); color: #4b4768; border-color: rgba(99, 95, 130, 0.25); }
.badge-menunggu { background: rgba(245, 158, 11, 0.16); color: #b45309; border-color: rgba(245, 158, 11, 0.32); }

.row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn-mini {
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9);
  color: #3a3660; border-radius: 8px; padding: 5px 10px;
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-mini:hover { background: #fff; border-color: rgba(79, 70, 229, 0.45); color: var(--indigo); }
.btn-mini.danger:hover { border-color: rgba(225, 29, 72, 0.45); color: #be123c; }

.kas-footnote { margin: 18px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ---------- modal ---------- */
body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 80; display: none; }
.modal.is-open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(31, 27, 58, 0.42);
  backdrop-filter: blur(4px);
  animation: fadeIn .18s ease;
}
.modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 28px));
  margin: min(8vh, 64px) auto 24px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 70px -30px rgba(31, 27, 58, 0.55);
  padding: 22px;
  animation: popIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.modal-x {
  border: 0; background: transparent; font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 4px; border-radius: 8px;
}
.modal-x:hover { color: var(--ink); background: rgba(99, 95, 130, 0.1); }
.modal-info {
  margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(79, 70, 229, 0.07); border: 1px solid rgba(79, 70, 229, 0.16);
  font-size: 13px; line-height: 1.55; color: #3a3660;
}
.input-readonly { background: rgba(99, 95, 130, 0.07); color: var(--muted); cursor: not-allowed; }

/* ---------- halaman login ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.auth-wrap { width: 100%; max-width: 400px; margin: auto; }
.auth-card { padding: 28px 24px; }
.auth-logo { display: block; height: 42px; width: auto; margin-bottom: 20px; }
.auth-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.auth-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; }
.auth-foot { margin: 18px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- halaman persetujuan ---------- */
.h2-like { margin: 0 0 4px; font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }

.perm-list { display: grid; gap: 14px; }
.perm-card {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(255, 251, 235, 0.65);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: opacity .2s;
}
.perm-card.is-done { opacity: .55; }
.perm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.perm-meta { font-size: 12.5px; color: var(--muted); }
.perm-body { display: grid; gap: 6px; margin-bottom: 12px; }
.perm-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.perm-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.perm-alasan { color: #3a3660; }
.perm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.perm-note {
  flex: 1 1 220px;
  font-family: inherit; font-size: 13px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
}
.perm-note:focus { outline: none; border-color: rgba(79, 70, 229, 0.5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }

.btn-approve, .btn-reject {
  border: 0; border-radius: var(--radius-sm); padding: 9px 16px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: #fff; transition: transform .14s, box-shadow .14s, opacity .14s;
}
.btn-approve { background: linear-gradient(135deg, #10b981 0%, #047857 100%); box-shadow: 0 10px 20px -14px rgba(4, 120, 87, 0.9); }
.btn-reject { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); box-shadow: 0 10px 20px -14px rgba(190, 18, 60, 0.9); }
.btn-approve:hover, .btn-reject:hover { transform: translateY(-1px); }
.btn-approve:disabled, .btn-reject:disabled { opacity: .6; cursor: default; transform: none; }

.empty.small { padding: 26px 16px; }

/* ---------- audit table ---------- */
.table-audit { font-size: 13px; }
.table-audit td { vertical-align: top; }
.table-audit .nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .kas-head { gap: 12px; }
  .kas-head-actions { width: 100%; }
  .kas-head-actions .btn-primary.btn-inline { flex: 1 1 auto; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .btn-secondary { width: 100%; }
  .modal-panel { margin: 0 auto; max-height: 92vh; border-radius: 16px; width: calc(100% - 20px); padding: 18px; }
  .perm-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .perm-label { padding-top: 0; }
  .perm-actions { flex-direction: column; align-items: stretch; }
  .perm-actions .btn-approve, .perm-actions .btn-reject { width: 100%; }
  .table-kas td { align-items: baseline; }
  .table-kas td.ta-right, .table-kas th.ta-right { text-align: right; }
  .row-actions { justify-content: flex-end; }
  .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sorotan singkat untuk transaksi yang baru disimpan */
.table-kas tr.tr-baru > td {
  animation: kasRowBaru 2s ease-out;
}
@keyframes kasRowBaru {
  0%   { background: rgba(79, 70, 229, 0.16); }
  60%  { background: rgba(79, 70, 229, 0.10); }
  100% { background: transparent; }
}

/* =========================================================
   Kas Opname
   ========================================================= */

.modal-panel.modal-wide { width: min(680px, calc(100% - 28px)); }

.opname-dash {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.opname-dash .stat-card { min-height: 104px; justify-content: flex-start; }
.stat-value.sm { font-size: 18px; line-height: 1.3; }
.stat-catatan {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4b4768;
  overflow-wrap: anywhere;
}
.mt-0 { margin-top: 0; }

.table-opname td { font-variant-numeric: tabular-nums; vertical-align: top; }
.table-opname th.ta-right, .table-opname td.ta-right { text-align: right; }
.table-opname .nowrap { white-space: nowrap; }
.mono-sm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .01em; }

.selisih-nol { color: #047857; font-weight: 600; }
.selisih-lebih { color: #b45309; font-weight: 600; }
.selisih-kurang { color: #be123c; font-weight: 600; }

.badge-draft { background: rgba(99, 95, 130, 0.12); color: #4b4768; border-color: rgba(99, 95, 130, 0.25); }

.btn-mini.ok { border-color: rgba(16, 185, 129, 0.45); color: #047857; }
.btn-mini.ok:hover { background: #ecfdf5; border-color: rgba(16, 185, 129, 0.7); }
.btn-mini.warn { border-color: rgba(245, 158, 11, 0.5); color: #b45309; }
.btn-mini.warn:hover { background: #fffbeb; border-color: rgba(245, 158, 11, 0.8); }

input.input-readonly.is-lebih { color: #b45309; font-weight: 600; }
input.input-readonly.is-kurang { color: #be123c; font-weight: 600; }

@media (max-width: 1024px) {
  .opname-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .opname-dash { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .opname-dash .stat-card { min-height: 0; }
  .modal-panel.modal-wide { width: calc(100% - 20px); }
  .table-opname td[data-label="Aksi"] { display: block; }
  .table-opname .row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* =========================================================
   Agenda Kegiatan Radafa
   ========================================================= */

.agenda-head h1 {
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .agenda-head h1 { font-size: 17px; letter-spacing: 0; }
}

.agenda-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
/* Lima kartu ringkasan: 1 baris di desktop lebar, turun bertahap di layar
   sempit agar label panjang ("Agenda Non Aktif") tidak terpotong. */
@media (max-width: 1100px) {
  .agenda-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.stat-card.stat-hari-ini {
  border-color: rgba(79, 70, 229, 0.35);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9), rgba(245, 243, 255, 0.72));
  box-shadow: 0 14px 30px -22px rgba(79, 70, 229, 0.85);
}
.stat-card.stat-aktif { border-color: rgba(16, 185, 129, 0.28); }
.stat-card.stat-nonaktif { border-color: rgba(99, 95, 130, 0.22); }
.stat-value.sv-aktif { color: #047857; }
.stat-value.sv-nonaktif { color: #55516f; }

.agenda-toolbar-card { margin-bottom: 20px; padding: 14px 16px; }
.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.agenda-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.chip-group, .view-toggle { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(99, 95, 130, 0.08); }
.chip-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #55516f;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.chip-btn:hover { color: var(--indigo); background: rgba(255, 255, 255, 0.7); }
.chip-btn.is-active {
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 4px 12px -6px rgba(56, 42, 122, 0.45);
}

.range-wrap { display: inline-flex; align-items: center; gap: 6px; }
.range-wrap input[type="date"] { width: auto; padding: 8px 10px; font-size: 13px; }
.range-sep { font-size: 12px; color: var(--muted); }

/* ---------- tabel agenda ---------- */
.table-agenda th.ta-right, .table-agenda td.ta-right { text-align: right; }
.table-agenda .nowrap { white-space: nowrap; }
.table-agenda td { vertical-align: top; }

.agenda-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}
.agenda-flag.today { background: var(--grad); color: #fff; }
.agenda-flag.past { background: rgba(99, 95, 130, 0.12); color: #55516f; }
.agenda-flag.internal { background: rgba(245, 158, 11, 0.16); color: #b45309; }

.table-agenda tr.tr-hari-ini > td {
  background: rgba(79, 70, 229, 0.055);
  box-shadow: inset 3px 0 0 var(--indigo);
}
.table-agenda tr.tr-lewat > td { color: #5b5876; }
.table-agenda tr.tr-lewat .cell-name { font-weight: 500; }

/* ---------- kalender ---------- */
.kal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kal-label { font-size: 14px; font-weight: 650; min-width: 140px; text-align: center; }

.kalender { display: flex; flex-direction: column; gap: 6px; }
.kal-head, .kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal-h {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2px;
}
.kal-cell {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.kal-cell.is-empty { background: transparent; border-color: transparent; }
.kal-cell.has-item { background: rgba(255, 255, 255, 0.92); border-color: rgba(79, 70, 229, 0.28); cursor: pointer; }
.kal-cell.has-item:hover { border-color: rgba(79, 70, 229, 0.55); box-shadow: 0 8px 18px -14px rgba(79, 70, 229, 0.9); }
.kal-cell.is-today { border-color: var(--indigo); background: rgba(238, 242, 255, 0.95); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.35); }
.kal-day { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #4b4768; }
.kal-cell.is-today .kal-day { color: var(--indigo); }
.kal-count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--grad); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.kal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-item {
  font-size: 11.5px;
  line-height: 1.35;
  color: #3a3660;
  background: rgba(79, 70, 229, 0.09);
  border-radius: 6px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kal-more { font-size: 10.5px; color: var(--muted); padding-left: 3px; }

/* ---------- form ---------- */
.checkline { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; color: #33305a; cursor: pointer; }
.checkline input[type="checkbox"] { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--indigo); flex: 0 0 auto; }

.modal-panel.modal-sm { width: min(430px, calc(100% - 28px)); }

.btn-danger {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(190, 18, 60, 0.95);
  transition: transform .14s, opacity .14s;
}
.btn-danger:hover { transform: translateY(-1px); }
.btn-danger:disabled { opacity: .7; cursor: default; transform: none; }
.btn-danger.is-loading .spinner { display: inline-block; }
.btn-danger .spinner {
  display: none;
  width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}

@media (max-width: 1024px) {
  .agenda-toolbar { align-items: flex-start; }
}

@media (max-width: 720px) {
  /* Ponsel: 5 kartu → 2 kolom, kartu "Total Agenda" melebar penuh di tengah
     supaya label & angka tidak terpotong/bertumpuk (Aktif & Non Aktif
     berdampingan di baris terakhir). */
  .agenda-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .agenda-stats .stat-card { padding: 11px 10px; }
  .agenda-stats .stat-card:nth-child(3) { grid-column: 1 / -1; }
  .agenda-stats .stat-label { font-size: 10px; }
  .agenda-stats .stat-value { font-size: 17px; }
  .agenda-stats .stat-note { font-size: 10.5px; }
  .agenda-toolbar { flex-direction: column; align-items: stretch; }
  .chip-group, .view-toggle { width: 100%; justify-content: space-between; }
  .chip-btn { flex: 1 1 auto; padding: 7px 8px; font-size: 12px; }
  /* 6 filter: boleh turun baris (3 + 3) agar tiap tombol tetap nyaman
     disentuh dan tidak ada tombol yang terpotong di layar sempit. */
  .agenda-toolbar .chip-group {
    flex-wrap: wrap;
    border-radius: 16px;
    gap: 5px;
  }
  .agenda-toolbar .chip-group .chip-btn {
    flex: 1 1 calc(33.333% - 6px);
    min-height: 34px;
    padding: 8px 6px;
  }
  .agenda-toolbar-right { flex-direction: column; align-items: stretch; }
  .range-wrap { width: 100%; }
  .range-wrap input[type="date"] { flex: 1 1 0; min-width: 0; }
  .search-wrap input { min-width: 0; }
  .kal-cell { min-height: 64px; padding: 4px; }
  .kal-item { display: none; }
  .kal-more { display: none; }
  .kal-grid, .kal-head { gap: 4px; }
  .table-agenda td[data-label="Aksi"] { display: block; }
  .table-agenda .row-actions { justify-content: flex-start; }
  .agenda-flag { margin-left: 4px; }
}

/* =========================================================
   Modul Customer
   ========================================================= */

.table-customer th.ta-right, .table-customer td.ta-right { text-align: right; }
.table-customer td { vertical-align: top; }
.table-customer .cell-name { display: inline; }

@media (max-width: 720px) {
  .table-customer td[data-label="Aksi"] { display: block; }
  .table-customer .row-actions { justify-content: flex-start; }
}

/* =========================================================
   Navigasi responsif (banyak menu: Leads, Customer, Proyek, KAS, ...)
   Ambang 1200px: dengan 12 menu (termasuk Tukang) nav sudah lebih lebar
   dari ruang tersisa, sehingga di bawah ambang ini nav dibuat baris sendiri.
   Tanpa aturan ini logo menyusut jadi 0px dan halaman bergeser horizontal.
   ========================================================= */
@media (max-width: 1200px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 8px; }
  .nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-link { flex: 0 0 auto; padding: 6px 11px; font-size: 12.5px; }
}

@media (max-width: 420px) {
  .nav-link { padding: 6px 9px; font-size: 12px; }
}

/* Kotak cari lead di modal Konversi */
.search-lead { width: 100%; }
.search-lead input { width: 100%; padding-left: 33px; }
#k_cari_info { min-height: 16px; }

/* =========================================================
   Dashboard Proyek (ringkasan per status)
   ========================================================= */

.dash-summary { margin-bottom: 20px; }

.dash-filter { margin-bottom: 20px; padding: 16px 18px; }
.dash-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
}
.dash-filter-grid .field { margin-bottom: 0; }
.dash-filter-action { justify-content: end; }
.dash-filter-action .btn-secondary { width: 100%; padding: 10px 14px; font-size: 13.5px; }
.filter-state { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

.dash-status { margin-bottom: 24px; }
.dash-status-head { margin-bottom: 12px; }
.dash-status-head h2 { margin: 0 0 3px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.status-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 16px 16px 15px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-soft);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  overflow: hidden;
}
.status-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--st-color, var(--indigo));
}
.status-card:hover {
  transform: translateY(-2px);
  border-color: var(--st-color, var(--indigo));
  box-shadow: 0 18px 32px -22px rgba(56, 42, 122, 0.55);
}
.status-card:focus-visible { outline: 2px solid var(--st-color, var(--indigo)); outline-offset: 2px; }

.status-top { display: flex; align-items: center; gap: 8px; }
.status-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: var(--st-color, var(--indigo));
  flex: 0 0 24px;
}
.status-name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4b4768;
}
.status-count {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.status-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.status-card.is-empty { opacity: .78; }
.status-card.is-empty .status-count { color: var(--muted); }
.status-card.is-loading { cursor: default; --st-color: #b9b5cf; }

/* warna pembeda per status (konsisten dengan badge) */
.status-desain-3d        { --st-color: #8b5cf6; }
.status-produksi         { --st-color: #4f46e5; }
.status-menunggu-produksi{ --st-color: #f59e0b; }
.status-selesai          { --st-color: #10b981; }

.dash-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.22);
  color: #9f1239;
  font-size: 13px;
}

/* chip & total pada daftar proyek yang sedang difilter */
.list-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.18);
  font-size: 12.5px;
  color: #3a3660;
}
.list-total {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #3a3660;
}

@media (max-width: 1024px) {
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-filter-action { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .status-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .status-card { padding: 13px 14px; }
  .status-count { font-size: 17px; }
  .dash-filter-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stats.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-filter { padding: 14px; }
  .list-tools { width: 100%; }
}

/* Chip jam pada daftar agenda */
.jam-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #3730a3;
  background: rgba(79, 70, 229, 0.09);
  border: 1px solid rgba(79, 70, 229, 0.18);
  white-space: nowrap;
}

/* =========================================================
   Tabel Agenda: kunci lebar kolom & pemetaan header/data
   ========================================================= */

/* Batas 721px = tepat di atas mode "tabel jadi kartu" (max-width: 720px).
   Sebelumnya batasnya 901px, sehingga pada lebar 721–900px tabel jatuh ke
   table-layout: auto tanpa lebar kolom terkunci (kolom sempit seperti PIC
   tinggal 44px dan teks panjang mendorong lebar kolom seenaknya). */
@media (min-width: 721px) {
  /* table-layout fixed + colgroup => lebar kolom tidak ditentukan isi,
     sehingga header dan setiap sel selalu berada di kolom yang sama. */
  .table.table-agenda {
    table-layout: fixed;
    width: 100%;
    min-width: 900px;
  }
  .table-agenda col.c-tanggal    { width: 10.5%; }
  .table-agenda col.c-hari       { width: 7.5%; }
  .table-agenda col.c-jam        { width: 7%; }
  .table-agenda col.c-agenda     { width: 17%; }
  .table-agenda col.c-klien      { width: 12%; }
  .table-agenda col.c-lokasi     { width: 12%; }
  .table-agenda col.c-pic        { width: 8%; }
  .table-agenda col.c-status     { width: 8.5%; }
  .table-agenda col.c-keterangan { width: 9%; }
  .table-agenda col.c-aksi       { width: 8.5%; }

  /* padding lebih rapat agar kolom sempit (Tanggal/Hari/Jam) tidak memotong isi */
  .table-agenda thead th,
  .table-agenda tbody td { padding-left: 9px; padding-right: 9px; }

  /* header tetap terlihat & sejajar saat daftar panjang digulir
     (dibatasi ke panel tabel agenda agar tabel modul lain tidak ikut berubah) */
  #panelTabel .table-wrap {
    max-height: 68vh;
    overflow: auto;
  }
  .table-agenda thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(248, 247, 255, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 -1px 0 var(--line);
  }
}

/* Perilaku gulir tabel untuk SEMUA modul pada layar laptop ke atas
   (dipertahankan seperti sebelumnya; panel agenda sudah mendapatkannya
   sejak 721px lewat aturan di atas). */
@media (min-width: 901px) {
  .table-wrap {
    max-height: 68vh;
    overflow: auto;
  }
}

/* Tanggal / Hari / Jam: ruang cukup, tidak memaksa melebar */
.table-agenda .col-tanggal-lebar { min-width: 0; }
.table-agenda td.nowrap,
.table-agenda th { white-space: nowrap; }

/* Kolom teks panjang: bungkus di dalam kolomnya sendiri, jangan meluber */
.table-agenda td:not(.nowrap) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.table-agenda td .cell-name,
.table-agenda td .cell-note {
  display: block;
  max-width: none;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* penanda tanggal tidak valid */
.badge-tanggal-invalid {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #be123c;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.26);
  /* jangan nowrap: kolom Tanggal sempit, badge harus boleh turun baris
     agar tidak meluber ke kolom Hari di sebelahnya */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* HP: pertahankan label + nilai tetap menempel pada kolomnya */
@media (max-width: 720px) {
  .table-agenda td:not(.nowrap) { overflow-wrap: anywhere; }
  .table-agenda tbody td { align-items: flex-start; }
  .table-agenda tbody td::before { padding-top: 1px; }
  .table-agenda tbody td > * { min-width: 0; }
  .table-agenda tbody td { text-align: right; }
  .table-agenda tbody td[data-label="Agenda"] { display: block; text-align: left; }
  .table-agenda tbody td[data-label="Agenda"]::before { display: block; margin-bottom: 2px; }
}

/* Sel Tanggal: nilai & chip di baris terpisah agar tidak meluber ke kolom lain */
.table-agenda td[data-label="Tanggal"] { white-space: normal; }
.table-agenda .tanggal-nilai { display: block; white-space: nowrap; }
.table-agenda .tanggal-chips { display: block; margin-top: 3px; }
.table-agenda .tanggal-chips .agenda-flag { margin-left: 0; margin-right: 4px; }

/* chip jam lebih rapat agar muat di kolom sempit */
.table-agenda .jam-chip { padding: 2px 6px; font-size: 12px; }

/* Kolom Status (Aktif / Non Aktif): badge harus MUAT di kolom sempit.
   Padding & font diperkecil dan badge boleh turun baris (mis. "Non Aktif"
   jadi dua baris) supaya tidak meluber ke kolom Keterangan dan tidak
   melebarkan tabel. Hanya berlaku di tabel agenda. */
.table-agenda td[data-label="Status"] .badge {
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* =========================================================
   KAS BSI (modul kas terpisah — tampilan mengikuti KAS Operasional)
   ========================================================= */

.filter-card { margin-bottom: 24px; }
.filter-card .card-head { margin-bottom: 0; }
.filter-card .list-tools { align-items: center; }

.stat-value-sm { font-size: 18px; }

/* Ringkasan angka closing */
.closing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
}
.closing-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79, 70, 229, 0.16);
  background: rgba(79, 70, 229, 0.05);
}
.closing-box.is-strong {
  border-color: rgba(79, 70, 229, 0.32);
  background: rgba(79, 70, 229, 0.09);
}
.closing-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.closing-box strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Tabel riwayat closing & pengajuan tetap nyaman di layar kecil */
.table-audit td[data-label="Status"] { white-space: nowrap; }

@media (max-width: 720px) {
  .closing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-card .list-tools { width: 100%; }
  .filter-card .list-tools .select-wrap.compact { flex: 1 1 46%; }
  .filter-card .list-tools .select-wrap select { min-width: 0; width: 100%; }
  .filter-card .list-tools .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .table-audit td[data-label="Status"]::before { content: attr(data-label); }
}

/* =========================================================
   Halaman Hapus Data (khusus Manager) — kosongkan per modul
   ========================================================= */
.hapus-notice { margin-bottom: 28px; }
.hapus-notice .hapus-notice-sub {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(180, 83, 9, 0.28);
  font-size: 12.5px;
}

.hapus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
}

.hapus-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  margin: 0;
}

.hapus-card-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.hapus-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79, 70, 229, 0.14);
  background: rgba(79, 70, 229, 0.05);
}
.hapus-count strong {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hapus-count span { font-size: 12.5px; color: var(--muted); }

.hapus-block {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(225, 29, 72, 0.22);
  background: rgba(255, 241, 242, 0.85);
  font-size: 12.5px;
  color: #881337;
}
.hapus-block-title {
  margin: 0 0 6px;
  font-weight: 650;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hapus-block ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.hapus-block li { line-height: 1.5; }
.hapus-block-saran { display: block; color: #9f1239; opacity: .9; }

.hapus-ok {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(236, 253, 245, 0.9);
  font-size: 12.5px;
  font-weight: 600;
  color: #047857;
}

.hapus-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hapus-card-foot .btn-danger,
.hapus-card-foot .hapus-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.hapus-link { display: inline-flex; align-items: center; }

/* --- modal konfirmasi berlapis --- */
.hapus-fakta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.hapus-fakta > div {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}
.hapus-fakta span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.hapus-fakta strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.hapus-tetap {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: #4b4768;
}

#alertDua { white-space: pre-line; }

.hapus-hasil { text-align: center; padding: 4px 0 8px; }
.hapus-hasil-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  font-size: 24px;
  font-weight: 800;
}
.hapus-hasil h3 { margin: 0 0 12px; font-size: 16px; }
.hapus-hasil ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  max-width: 420px;
  font-size: 13px;
  color: #4b4768;
}
.hapus-hasil li {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.hapus-riwayat { table-layout: auto; }

@media (max-width: 980px) {
  .hapus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hapus-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hapus-fakta { grid-template-columns: minmax(0, 1fr); }
  .hapus-card { padding: 16px; }
}

/* ---------- Kolom Aksi per baris (Leads & Proyek) ---------- */
.table th.ta-right, .table td.ta-right { text-align: right; }
@media (max-width: 720px) {
  .table td[data-label="Aksi"] { display: block; }
  .table td[data-label="Aksi"] .row-actions { justify-content: flex-start; }
}

/* Tombol hapus pada halaman detail lead (visual merah, tetap gaya ghost) */
.btn-ghost.btn-danger-ghost { color: #be123c; border-color: rgba(225, 29, 72, 0.28); }
.btn-ghost.btn-danger-ghost:hover {
  background: #fff1f2;
  border-color: rgba(225, 29, 72, 0.55);
  color: #9f1239;
}

/* =========================================================
   Impor Leads (khusus Manager)
   ========================================================= */
.impor-blok { margin: 24px 0 0; }
.impor-blok:first-of-type { margin-top: 20px; }

.impor-subjudul {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.impor-catatan {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.92);
  font-size: 13px;
  color: #7c5a20;
}
.impor-catatan ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.impor-catatan strong { color: #8a4b06; }

.impor-peta td { vertical-align: top; font-size: 13px; }
.impor-peta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(79, 70, 229, 0.08);
  color: #4338ca;
}

.impor-tabel td { vertical-align: top; }
.impor-tabel .badge { margin-bottom: 4px; }

.impor-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.impor-aksi .btn-primary,
.impor-aksi .btn-secondary { flex: 0 0 auto; }

.impor-daftar {
  margin: 0 0 4px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #4b4768;
}
.impor-daftar li::marker { color: rgba(99, 95, 130, 0.6); }

#kartuPratinjau .stats, #kartuHasil .stats { margin: 4px 0 20px; }

.impor-aksi .btn-inline { display: inline-flex; align-items: center; }

@media (max-width: 720px) {
  .impor-aksi { flex-direction: column; align-items: stretch; }
  .impor-aksi .btn-primary,
  .impor-aksi .btn-secondary,
  .impor-aksi .btn-inline { width: 100%; justify-content: center; text-align: center; }
}

/* =========================================================
   Statistik Leads (halaman PUBLIK — hanya angka agregat)
   ========================================================= */

.statistik-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.statistik-head-text h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.statistik-head-actions { display: flex; align-items: flex-end; gap: 10px; }

.tahun-pilih { display: flex; flex-direction: column; gap: 6px; }
.tahun-pilih-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tahun-pilih .select-wrap.compact select { min-width: 120px; font-weight: 600; }

/* ---------- kartu ringkasan ---------- */
.statistik-stats { margin-bottom: 24px; }
.statistik-card { position: relative; padding-top: 52px; }
.statistik-card .stat-icon {
  position: absolute;
  top: 14px;
  left: 16px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.18);
}
.statistik-card .stat-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--indigo);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.statistik-card .stat-value { font-size: 26px; font-variant-numeric: tabular-nums; }
.statistik-card .stat-value.stat-bulan {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.statistik-card .stat-note { line-height: 1.45; }

/* ---------- notifikasi ---------- */
.statistik-notice { border-color: rgba(79, 70, 229, 0.28); background: rgba(243, 240, 255, 0.92); box-shadow: none; }
.statistik-notice .kas-notice-icon { background: var(--indigo); }
.statistik-notice strong { color: #3730a3; }
.statistik-notice p { color: #4b4768; }
.statistik-notice.is-error { border-color: rgba(244, 63, 94, 0.3); background: rgba(255, 241, 244, 0.95); }
.statistik-notice.is-error .kas-notice-icon { background: #e11d48; }
.statistik-notice.is-error strong { color: #9f1239; }
.statistik-notice.is-error p { color: #7f2b44; }

/* ---------- kartu grafik & tabel ---------- */
.statistik-card-block { margin-bottom: 24px; }
.statistik-card-block:last-of-type { margin-bottom: 16px; }

.chart-wrap { position: relative; width: 100%; min-height: 120px; }
.chart-svg { display: block; width: 100%; height: auto; }

.chart-grid { stroke: rgba(99, 95, 130, 0.13); stroke-width: 1; }
.chart-axis { stroke: rgba(99, 95, 130, 0.3); stroke-width: 1; }
.chart-tick { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-label { font-size: 11px; fill: var(--muted); font-weight: 500; }
.chart-caption {
  font-size: 10px;
  fill: #8b87a8;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.chart-value { font-size: 11px; font-weight: 700; fill: #4338ca; font-variant-numeric: tabular-nums; }

.bar-group { cursor: pointer; outline: none; }
.bar-hit { fill: transparent; }
.bar-rect {
  fill: url(#gradBar);
  opacity: .72;
  transition: opacity .16s;
}
.bar-group:hover .bar-rect,
.bar-group:focus-visible .bar-rect { opacity: 1; }
.bar-rect.is-max { opacity: 1; }

.chart-line { fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { stroke: none; }
.chart-dot { fill: #fff; stroke: var(--violet); stroke-width: 2.2; transition: r .14s; }
.bar-group:hover .chart-dot,
.bar-group:focus-visible .chart-dot { r: 5.4; fill: var(--violet); }

.chart-tooltip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: rgba(31, 27, 58, 0.92);
  box-shadow: 0 12px 24px -16px rgba(31, 27, 58, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.chart-tooltip.is-visible { opacity: 1; }

/* ---------- tabel ringkasan bulanan ---------- */
.table-statistik td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.table-statistik .col-no { width: 44px; color: var(--muted); }
.table-statistik .cell-bulan { font-weight: 550; }
.table-statistik .chip-maks {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #4338ca;
  background: rgba(79, 70, 229, 0.1);
  border-color: rgba(79, 70, 229, 0.22);
}
.table-statistik .is-kosong .num { color: var(--muted); }

.pct-cell { display: flex; align-items: center; gap: 10px; }
.pct-num { min-width: 46px; font-weight: 600; font-size: 13px; }
.pct-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 120px;
  height: 6px;
  border-radius: 999px;
  background: rgba(99, 95, 130, 0.13);
  overflow: hidden;
}
.pct-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad);
}

.table-statistik .baris-total td {
  border-top: 1px solid rgba(79, 70, 229, 0.25);
  border-bottom: 0;
  background: rgba(79, 70, 229, 0.06);
  padding-top: 14px;
  padding-bottom: 14px;
}
.table-statistik .baris-total td:first-child { border-radius: 10px 0 0 10px; }
.table-statistik .baris-total td:last-child { border-radius: 0 10px 10px 0; }

.statistik-foot {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .statistik-head { align-items: flex-start; }
}

@media (max-width: 720px) {
  .statistik-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .statistik-head-text h1 { font-size: 19px; }
  .statistik-head-actions { width: 100%; }
  .tahun-pilih { width: 100%; }
  .tahun-pilih .select-wrap.compact,
  .tahun-pilih .select-wrap.compact select { width: 100%; }

  .statistik-card { padding-top: 46px; }
  .statistik-card .stat-value { font-size: 21px; }
  .statistik-card .stat-value.stat-bulan { font-size: 16px; }
  .statistik-card .stat-note { font-size: 11px; }

  .chart-label, .chart-tick { font-size: 12px; }

  /* Tabel jadi kartu bertumpuk: baris total dibuat menonjol & mudah dibaca */
  .table-statistik td[data-label] { align-items: center; }
  .table-statistik td[data-label]::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
    flex: 0 0 auto;
  }
  .table-statistik td[data-label="No."] { display: none; }
  .table-statistik td[data-label="Bulan"] { font-size: 15px; }
  .table-statistik .pct-cell { justify-content: flex-end; }
  .table-statistik .pct-bar { max-width: 96px; }
  .table-statistik .baris-total {
    background: rgba(79, 70, 229, 0.07);
    border-color: rgba(79, 70, 229, 0.28);
  }
  .table-statistik .baris-total td:first-child,
  .table-statistik .baris-total td:last-child { border-radius: 0; }
}

/* =========================================================
   Closing Proyek (khusus Manager)
   ========================================================= */

/* Indikator proyek yang sudah closing (kunci permanen) */
.badge-closing,
.badge-sudah-closing {
  background: rgba(15, 118, 110, 0.13);
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.3);
  white-space: nowrap;
}
.tr-closing .cell-name::after {
  content: '🔒';
  margin-left: 6px;
  font-size: 11px;
  vertical-align: middle;
}
#projectBody tr.tr-closing td { background: rgba(15, 118, 110, 0.035); }

/* Tombol yang syaratnya belum terpenuhi: tetap bisa diklik agar alasannya
   muncul sebagai pesan, tetapi tampil nonaktif. */
.btn-mini.is-disabled {
  opacity: .55;
  border-style: dashed;
  cursor: not-allowed;
}
.btn-mini.is-disabled:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
  color: #3a3660;
}

/* ---------- Modal closing ---------- */
.closing-info {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.65);
}
.closing-info > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.closing-info dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.closing-info dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.closing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.closing-warn {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 12.5px;
  line-height: 1.55;
  color: #92400e;
}

.closing-confirm-text {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.closing-confirm-period {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: #3a3660;
}
.closing-confirm-note {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Laporan omzet closing ---------- */
.omzet-card { margin-bottom: 32px; }
.omzet-tahun { min-width: 150px; }
.omzet-tahun label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.omzet-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}
.omzet-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
}
.omzet-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.omzet-value {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.omzet-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #92400e;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.26);
}

.table-omzet th.ta-right, .table-omzet td.ta-right { text-align: right; }
.table-omzet .is-kosong .nilai,
.table-omzet .is-kosong .cell-name { color: var(--muted); font-weight: 500; }
.table-omzet .baris-total td {
  border-top: 1px solid rgba(79, 70, 229, 0.25);
  border-bottom: 0;
  background: rgba(79, 70, 229, 0.06);
}
.table-omzet .baris-total td:first-child { border-radius: 10px 0 0 10px; }
.table-omzet .baris-total td:last-child { border-radius: 0 10px 10px 0; }

@media (max-width: 900px) {
  .omzet-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .closing-info > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .closing-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .omzet-sum { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .omzet-tahun { width: 100%; min-width: 0; }
  .table-omzet .baris-total td:first-child,
  .table-omzet .baris-total td:last-child { border-radius: 0; }
}

/* =========================================================
   Update Proyek: mode ubah + field keuangan otomatis
   ========================================================= */

/* Banner mode ubah di atas form */
.edit-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(79, 70, 229, 0.3);
  background: rgba(79, 70, 229, 0.08);
}
.edit-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.edit-banner-text strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4338ca;
}
.edit-banner-text span {
  font-size: 13.5px;
  color: #3a3660;
  overflow-wrap: anywhere;
}
.btn-small { padding: 6px 12px; font-size: 12.5px; }

/* Field otomatis (read-only) */
.keuangan-sub { margin: 0 0 14px; }
.auto-keuangan {
  margin: 6px 0 10px;
  padding: 14px 14px 4px;
  border: 1px dashed rgba(79, 70, 229, 0.35);
  border-radius: var(--radius-md);
  background: rgba(79, 70, 229, 0.04);
}
.auto-keuangan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4338ca;
}
.auto-badge {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.28);
  background: rgba(255, 255, 255, 0.7);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #4338ca;
}
.auto-keuangan .field-hint { margin-top: 2px; }

.input-prefix-auto input,
input.money-auto {
  background: rgba(99, 95, 130, 0.09);
  color: #3a3660;
  font-weight: 650;
  cursor: default;
  border-style: dashed;
}
.input-prefix-auto input:focus { outline: none; border-color: var(--line); box-shadow: none; }
.input-prefix-auto.is-minus input { color: #be123c; border-color: rgba(225, 29, 72, 0.4); }

@media (max-width: 720px) {
  .edit-banner { flex-direction: column; align-items: stretch; }
  .edit-banner .btn-small { width: 100%; }
  .auto-keuangan { padding: 12px 12px 2px; }
}

/* =========================================================
   Manajemen Tukang (master data, khusus Manager)
   ========================================================= */

.table-tukang .col-no {
  width: 52px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.table-tukang td[data-label="Nama Tukang"] .cell-name { font-weight: 650; }
.table-tukang td[data-label="Keterangan"] { vertical-align: top; }
.table-tukang td[data-label="Keterangan"] .cell-note { white-space: pre-line; }

/* Badge jabatan */
.badge-tukang {
  background: rgba(79, 70, 229, 0.12);
  color: #3730a3;
  border-color: rgba(79, 70, 229, 0.26);
}
.badge-helper {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.26);
}

.muted { color: var(--muted); }

@media (max-width: 720px) {
  /* Mode kartu: nomor urut ditampilkan sebagai penanda kecil di kiri atas */
  .table-tukang td[data-label="No."] {
    width: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
  }
  .table-tukang td[data-label="No."]::before { content: 'No.'; }
  .table-tukang td[data-label="Keterangan"] { display: block; }
  .table-tukang td[data-label="Keterangan"]::before {
    display: block;
    margin-bottom: 2px;
  }
  .table-tukang td[data-label="Keterangan"] .cell-note { max-width: none; }
}

/* =========================================================
   Detail Proyek (4 tab: Team Produksi, Dokumen, Foto, Catatan)
   ========================================================= */

/* ---------- breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb a {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 4px;
}
.breadcrumb a:hover { background: rgba(79, 70, 229, 0.09); }
.breadcrumb-sep { opacity: .55; }
.breadcrumb-current {
  color: var(--ink);
  font-weight: 600;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.detail-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.detail-page-head h1 { overflow-wrap: anywhere; }

/* ---------- ringkasan proyek ---------- */
.proyek-summary { margin-bottom: 20px; }
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
}
.summary-item { min-width: 0; }
.summary-item dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.summary-item dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.summary-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.badge-belum-closing {
  background: rgba(99, 95, 130, 0.1);
  color: #4b4767;
  border-color: rgba(99, 95, 130, 0.24);
  white-space: nowrap;
}

/* ---------- banner proyek terkunci ---------- */
.proyek-locked {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.85);
  color: #92400e;
  font-size: 13.5px;
  line-height: 1.55;
}
.proyek-locked strong { color: #78350f; }

/* ---------- tab card ---------- */
.tab-card { padding: 0; overflow: hidden; }
.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  transition: color .16s ease, background .16s ease;
  white-space: nowrap;
}
.tab:hover { color: var(--indigo); background: rgba(79, 70, 229, 0.07); }
.tab.is-active {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
  background: rgba(79, 70, 229, 0.07);
}
.tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.tab-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(99, 95, 130, 0.13);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tab.is-active .tab-count {
  background: var(--grad);
  color: #fff;
}

/* ---------- panel tab ---------- */
.tab-panel { padding: 20px 20px 22px; }
.tab-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tab-head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.tab-head .card-sub { margin: 0; }
.tab-head .btn-inline { flex: 0 0 auto; }

.tab-state { padding: 6px 0 2px; font-size: 13.5px; color: var(--muted); }
.tab-empty {
  text-align: center;
  padding: 34px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.45);
}
.tab-empty-icon { display: block; font-size: 26px; margin-bottom: 8px; }
.tab-empty p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- tabel detail ---------- */
.table-detail .col-no {
  width: 52px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.table-detail td[data-label="Keterangan"],
.table-detail td[data-label="Keterangan Penugasan"] { vertical-align: top; }
.table-detail .cell-note { white-space: pre-line; }
.file-cell { overflow-wrap: anywhere; }
.badge-dok {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
  border-color: rgba(139, 92, 246, 0.26);
  white-space: nowrap;
}
.table-detail a.btn-mini { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- pagination ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.pager .btn-mini:disabled { opacity: .45; cursor: not-allowed; }
.pager-info { font-size: 12.5px; color: var(--muted); }

/* ---------- galeri foto ---------- */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.foto-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.foto-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: rgba(99, 95, 130, 0.1);
  cursor: zoom-in;
  overflow: hidden;
}
.foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.foto-thumb:hover img { transform: scale(1.03); }
.foto-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.foto-judul { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.foto-ket { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.foto-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.foto-aksi { margin-top: 6px; justify-content: flex-start; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: none; }
.lightbox.is-open { display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 46, 0.72);
  backdrop-filter: blur(4px);
}
.lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 70px -30px rgba(24, 20, 46, 0.7);
  overflow: auto;
}
.lightbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.lightbox-head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.lightbox-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 20, 46, 0.06);
  border-radius: var(--radius-md);
  padding: 10px;
  min-height: 180px;
}
.lightbox-body img {
  max-width: 100%;
  max-height: 64vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.lightbox-caption { margin: 0; font-size: 13px; color: var(--muted); }
.lightbox-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.lightbox-foot a { text-decoration: none; }

/* ---------- catatan (timeline) ---------- */
.note-list { display: flex; flex-direction: column; gap: 16px; }
.note-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  padding-left: 4px;
}
.note-dot {
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}
.note-body {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.66);
  padding: 12px 14px 14px;
}
.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.note-waktu { font-weight: 650; color: var(--ink); }
.note-oleh::before { content: '· '; }
.note-edit { font-size: 11.5px; font-style: italic; }
.note-isi {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.note-body .row-actions { justify-content: flex-start; margin-top: 10px; }
.modal-note { font-size: 12.5px; color: var(--muted); }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
}

@media (max-width: 720px) {
  .tab-panel { padding: 16px 14px 18px; }
  .tabs { padding: 8px 8px 0; }
  .tab { padding: 9px 11px 10px; font-size: 13px; }
  .tab-label { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  .summary-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .detail-page-head .detail-actions { width: 100%; }
  .detail-page-head .detail-actions .btn-inline { width: 100%; justify-content: center; }
  .tab-head .btn-inline { width: 100%; justify-content: center; }
  .foto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .foto-card figcaption { padding: 10px 11px 12px; }
  .lightbox-panel { padding: 14px; max-height: 96vh; }
  .lightbox-foot .btn-inline { flex: 1 1 auto; justify-content: center; }
  .table-detail td[data-label="No."] {
    width: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
  }
  .table-detail td[data-label="Aksi"] { display: block; }
  .table-detail td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-detail td[data-label="Aksi"] .row-actions { justify-content: flex-start; }
}

/* Tautan bergaya tombol mini (tombol Detail pada daftar proyek) */
a.btn-mini { text-decoration: none; display: inline-flex; align-items: center; }
.detail-link { border-color: rgba(79, 70, 229, 0.4); color: var(--indigo); }

/* =========================================================
   Administrator (pengguna, izin, akses publik, aktivitas)
   ========================================================= */

/* ---------- tab ---------- */
.adm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--shadow-soft);
}
.adm-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.adm-tab:hover { background: rgba(79, 70, 229, 0.08); color: var(--ink); }
.adm-tab.is-active {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(79, 70, 229, 0.9);
}
.adm-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(99, 95, 130, 0.14);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}
.adm-tab.is-active .adm-tab-badge {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.adm-panel { display: block; }
.adm-panel + .adm-panel { margin-top: 20px; }
.adm-panel .card + .card { margin-top: 20px; }

/* ---------- kartu ringkasan ---------- */
.adm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.adm-card { display: flex; flex-direction: column; gap: 12px; }
.adm-card .h2-like { margin: 0; font-size: 17px; }
.adm-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.6px;
  line-height: 1.55;
  color: var(--ink);
}
.adm-list li::marker { color: var(--indigo); }
.adm-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.adm-chip.is-ok {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
.adm-chip.is-warn {
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}
.adm-chip.is-mini { padding: 2px 7px; font-size: 10.5px; }

.adm-callout {
  display: block;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.07);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.adm-callout.is-ok {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.09);
}
.adm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 16px;
}
.adm-foot .adm-hint { flex: 1 1 220px; }

/* ---------- tabel ---------- */
.table-adm-user .col-no,
.table-adm-publik .col-no,
.table-adm-log .col-no,
.table-adm-izin .col-no {
  width: 52px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cell-strong { font-weight: 600; }
.cell-ket { font-size: 12.8px; color: var(--muted); vertical-align: top; }
.cell-ket .cell-sub { display: block; margin-top: 4px; }
.ta-center { text-align: center; }
.table th.ta-center, .table td.ta-center { text-align: center; }

.table-adm-user td[data-label="Pengguna"] .cell-name { font-weight: 650; }
.table-adm-user tr.tr-nonaktif { opacity: .72; }

.table-adm-izin { table-layout: auto; }
.table-adm-izin th { white-space: nowrap; }
.table-adm-izin td[data-label="Modul"] { min-width: 150px; }
.table-adm-izin tr.tr-grup td {
  background: rgba(79, 70, 229, 0.06);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--indigo);
  padding-top: 10px;
  padding-bottom: 10px;
}
.adm-dash { color: rgba(99, 95, 130, 0.45); }
.adm-wajib {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b45309;
  margin-top: 2px;
}

/* checkbox izin */
.adm-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.adm-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #4F46E5;
  cursor: pointer;
}
.adm-check input:disabled { cursor: not-allowed; opacity: .75; }
.adm-check input:disabled + span { cursor: not-allowed; }
.adm-check input:focus-visible { outline: 2px solid rgba(79, 70, 229, 0.5); outline-offset: 2px; }

/* badge peran & status */
.badge-peran {
  background: rgba(79, 70, 229, 0.1);
  color: #3730a3;
  border-color: rgba(79, 70, 229, 0.24);
}
.badge-peran-manager {
  background: rgba(139, 92, 246, 0.14);
  color: #5b21b6;
  border-color: rgba(139, 92, 246, 0.3);
}
.badge-peran-keuangan {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.28);
}
.badge-aktif {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}
.badge-nonaktif {
  background: rgba(99, 95, 130, 0.12);
  color: #4b5563;
  border-color: rgba(99, 95, 130, 0.24);
}

.btn-mini-danger { border-color: rgba(225, 27, 34, 0.35); color: #b91c1c; }
.btn-mini-danger:hover { background: rgba(225, 27, 34, 0.08); }
.btn-mini:disabled { opacity: .55; cursor: not-allowed; }

.table-adm-log .cell-ket { max-width: 380px; }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .adm-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .adm-tabs { gap: 4px; padding: 5px; }
  .adm-tab { padding: 8px 11px; font-size: 12.8px; }
  .adm-foot .btn-primary, .adm-foot .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .adm-card .adm-foot .btn-inline { width: 100%; justify-content: center; }

  /* Matriks izin tetap berupa tabel (bukan kartu) dan bisa digulir. */
  .table-adm-izin {
    display: table;
    width: 100%;
    min-width: 600px;
    table-layout: auto;
  }
  .table-adm-izin thead { display: table-header-group; }
  .table-adm-izin tbody { display: table-row-group; }
  .table-adm-izin tfoot { display: table-footer-group; }
  .table-adm-izin tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .table-adm-izin th,
  .table-adm-izin td {
    display: table-cell;
    padding: 9px 7px;
    border-bottom: 1px solid var(--line);
    text-align: center;
  }
  .table-adm-izin td[data-label="Modul"] { text-align: left; }
  .table-adm-izin td::before { display: none; content: none; }
  .table-adm-izin .cell-ket { font-size: 11.8px; }

  .table-adm-user td[data-label="Pengguna"] { display: block; }
  .table-adm-user td[data-label="Pengguna"]::before { display: none; }
  .table-adm-user td[data-label="Aksi"] { display: block; }
  .table-adm-user td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-adm-user td[data-label="Aksi"] .row-actions { justify-content: flex-start; }
  .table-adm-log .cell-ket { max-width: none; }
}

/* =========================================================
   INVENTORY WORKSHOP (subnav, tabel, form, badge)
   ========================================================= */

/* ---------- sub-navigasi Inventory ---------- */
.inv-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin: 0 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--shadow-soft);
}
.inv-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, color .16s;
}
.inv-subnav-link:hover { background: rgba(79, 70, 229, 0.08); color: var(--ink); }
.inv-subnav-link.is-active {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(79, 70, 229, 0.9);
}
.inv-subnav-ic { font-size: 13px; line-height: 1; }

/* ---------- umum ---------- */
.inv-kode {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 7px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.2);
  color: #3730a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.inv-inline { display: inline; }
.inv-dl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.inv-mini-title {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.inv-empty-cell { text-align: center; color: var(--muted); font-size: 13px; }
.inv-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  font-size: 13.5px;
}
.inv-span-2 { grid-column: 1 / -1; }
.inv-detail-body { font-size: 13.5px; }
.table-inv-mini { font-size: 12.5px; }
.table-inv-mini thead th { font-size: 11px; }
.inv-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.inv-form-grid .field { margin-bottom: 0; }
.inv-form-grid .field-error { margin-top: 4px; }
.tr-nonaktif { opacity: .68; }

/* ---------- badge inventory ---------- */
.badge-inv-draft    { background: rgba(99, 95, 130, 0.12); color: #4b5563; border-color: rgba(99, 95, 130, 0.24); }
.badge-inv-submitted{ background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.32); }
.badge-inv-approved { background: rgba(14, 165, 233, 0.13); color: #0369a1; border-color: rgba(14, 165, 233, 0.3); }
.badge-inv-posted   { background: rgba(16, 185, 129, 0.13); color: #047857; border-color: rgba(16, 185, 129, 0.3); }
.badge-inv-cancelled{ background: rgba(225, 27, 34, 0.1); color: #b91c1c; border-color: rgba(225, 27, 34, 0.26); }
.badge-inv-ok       { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.28); }
.badge-inv-warn     { background: rgba(245, 158, 11, 0.14); color: #b45309; border-color: rgba(245, 158, 11, 0.32); }
.badge-inv-bad      { background: rgba(225, 27, 34, 0.1); color: #b91c1c; border-color: rgba(225, 27, 34, 0.26); }
.badge-inv-view     { background: rgba(99, 95, 130, 0.1); color: var(--muted); }
.badge-inv-kat      { background: rgba(139, 92, 246, 0.12); color: #5b21b6; border-color: rgba(139, 92, 246, 0.26); }

/* ---------- tabel inventory ---------- */
.table-inv-material td[data-label="Nama & Spesifikasi"] .cell-name,
.table-inv-material td[data-label="Nama & Spesifikasi"] .cell-name { font-weight: 650; }
.table-inv-material th, .table-inv-material td { vertical-align: top; }
.table-inv-doc td { vertical-align: top; }

/* ---------- kartu dashboard ---------- */
.inv-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.inv-grid-2 .card { margin: 0; }
.inv-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.inv-card-head h2 { margin: 0; font-size: 16.5px; }
.inv-card-head .card-sub { margin: 0; }
.inv-scroll { overflow-x: auto; }

/* ---------- filter bar ---------- */
.inv-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.inv-filter .field { margin: 0; min-width: 150px; flex: 1 1 160px; }
.inv-filter .field label { font-size: 11.5px; }
.inv-filter .field input, .inv-filter .field select { width: 100%; }
.inv-filter .inv-filter-aksi { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- stok masuk / keluar ---------- */
.inv-metode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.inv-metode-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.inv-metode-btn:hover { border-color: rgba(79, 70, 229, 0.4); }
.inv-metode-btn.is-active {
  border-color: var(--indigo);
  background: rgba(79, 70, 229, 0.07);
  box-shadow: 0 10px 24px -18px rgba(79, 70, 229, 0.9);
}
.inv-metode-ic { font-size: 20px; line-height: 1; }
.inv-metode-txt strong { display: block; font-size: 14px; margin-bottom: 2px; }
.inv-metode-txt span { font-size: 12.5px; color: var(--muted); }

.inv-baris-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 22px 0 10px;
}
.inv-baris-head h3 { margin: 0; font-size: 15px; }
.inv-barang-pilih { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inv-barang-pilih input { min-width: 200px; }

.inv-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.62);
  padding: 14px;
  margin-bottom: 14px;
}
.inv-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.inv-item-head .cell-name { font-size: 14.5px; }
.inv-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.inv-item-grid .field { margin: 0; }
.inv-item-grid .field label { font-size: 11.5px; }
.inv-item-note { grid-column: 1 / -1; }
.inv-item-hitung {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(79, 70, 229, 0.07);
  font-size: 12.5px;
  color: #3730a3;
}
.inv-item-remove { border-color: rgba(225, 27, 34, 0.3); color: #b91c1c; }

.inv-summary {
  border: 1px solid rgba(79, 70, 229, 0.2);
  background: rgba(79, 70, 229, 0.05);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13.5px;
}
.inv-summary h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--indigo); }
.inv-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.inv-summary dt { color: var(--muted); }
.inv-summary dd { margin: 0; font-weight: 600; }

.inv-warn-box {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.inv-warn-box strong { display: block; margin-bottom: 2px; }

/* ---------- kartu stok ---------- */
.inv-kartu-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  font-size: 13.5px;
}
.inv-kartu-head div span { display: block; }
.inv-saldo-akhir { font-weight: 700; font-size: 16px; }

/* ---------- opname ---------- */
.inv-opname-item {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  font-size: 13px;
}
.inv-opname-item input { width: 100%; }
.inv-opname-selisih { font-weight: 700; }
.inv-opname-selisih.is-minus { color: #b91c1c; }
.inv-opname-selisih.is-plus { color: #047857; }

/* ---------- laporan ---------- */
.inv-lap-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.inv-lap-tab {
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.66);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  cursor: pointer;
}
.inv-lap-tab.is-active { background: var(--grad); color: #fff; border-color: transparent; }
.inv-lap-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }

/* ---------- responsif ---------- */
@media (max-width: 1024px) {
  .inv-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-opname-item { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  .inv-opname-item .inv-opname-alasan { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .inv-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .inv-metode { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .inv-subnav { gap: 4px; padding: 5px; }
  .inv-subnav-link { padding: 7px 10px; font-size: 12.5px; }
  .inv-subnav-ic { display: none; }
  .inv-form-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-item-grid { grid-template-columns: minmax(0, 1fr); }
  .inv-filter { padding: 12px; }
  .inv-filter .field { flex: 1 1 100%; }
  .inv-filter .inv-filter-aksi { width: 100%; }
  .inv-filter .inv-filter-aksi .btn-inline { flex: 1 1 auto; justify-content: center; }
  .inv-opname-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .inv-kartu-head { gap: 10px 18px; }
  .table-inv-material td[data-label="Nama & Spesifikasi"],
  .table-inv-material td[data-label="Nama & Spesifikasi"] { display: block; }
  .table-inv-material td[data-label="Nama & Spesifikasi"]::before,
  .table-inv-material td[data-label="Nama & Spesifikasi"]::before { display: block; margin-bottom: 2px; }
  .table-inv-material td[data-label="Aksi"] { display: block; }
  .table-inv-material td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-inv-material td[data-label="Aksi"] .row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- perbandingan harga supplier (dalam modal) ---------- */
.inv-banding { font-size: 13px; }
.inv-termurah {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.09);
  color: #065f46;
}
.inv-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.modal-panel select[size] { height: auto; min-height: 108px; padding: 4px; }
.table-inv-supplier td[data-label="Supplier"] .cell-name { font-weight: 650; }

/* ---------- stok masuk: pencarian material & step form ---------- */
.inv-masuk-form { display: flex; flex-direction: column; }
.inv-masuk-form .inv-step { width: 100%; }
.inv-masuk-form[data-metode="material"] [data-step="material"] { order: 1; }
.inv-masuk-form[data-metode="material"] [data-step="header"] { order: 2; }
.inv-masuk-form[data-metode="material"] [data-step="items"] { order: 3; }
.inv-masuk-form[data-metode="material"] [data-step="ringkasan"] { order: 4; }
.inv-masuk-form[data-metode="supplier"] [data-step="header"] { order: 1; }
.inv-masuk-form[data-metode="supplier"] [data-step="material"] { order: 2; }
.inv-masuk-form[data-metode="supplier"] [data-step="items"] { order: 3; }
.inv-masuk-form[data-metode="supplier"] [data-step="ringkasan"] { order: 4; }

.inv-hasil-cari {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.inv-hasil-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.inv-hasil-item:hover { border-color: var(--indigo); background: rgba(79, 70, 229, 0.06); }
.inv-hasil-nama { font-weight: 600; overflow-wrap: anywhere; }
.inv-hasil-meta { font-size: 12px; color: var(--muted); }
.inv-nota-belum { margin-top: 8px; font-size: 12.5px; }
.inv-item-hitung { line-height: 1.55; }

/* ---------- tabel daftar penerimaan/pengeluaran ---------- */
.table-inv-masuk th, .table-inv-masuk td,
.table-inv-keluar th, .table-inv-keluar td,
.table-inv-permintaan th, .table-inv-permintaan td { vertical-align: top; }
.table-inv-masuk .row-actions, .table-inv-keluar .row-actions,
.table-inv-permintaan .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.btn-mini-ok { border-color: rgba(16, 185, 129, 0.4); color: #047857; }
.btn-mini-ok:hover { background: rgba(16, 185, 129, 0.1); }

@media (max-width: 720px) {
  .table-inv-masuk td[data-label="Nomor & Tanggal"],
  .table-inv-masuk td[data-label="Supplier / Nota"],
  .table-inv-masuk td[data-label="Tujuan"] { display: block; }
  .table-inv-masuk td[data-label="Nomor & Tanggal"]::before,
  .table-inv-masuk td[data-label="Supplier / Nota"]::before,
  .table-inv-masuk td[data-label="Tujuan"]::before { display: block; margin-bottom: 2px; }
  .table-inv-masuk td[data-label="Aksi"] { display: block; }
  .table-inv-masuk td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-inv-masuk .row-actions { justify-content: flex-start; }
  .inv-hasil-item { grid-template-columns: minmax(0, 1fr); }
  .inv-hasil-meta { display: block; }
}

/* ---------- daftar item (form permintaan/opname/penyerahan) ---------- */
.inv-item-list { display: flex; flex-direction: column; gap: 10px; }
.inv-item-list .inv-item { margin-bottom: 0; }
.inv-item-list .inv-opname-item { margin-bottom: 0; }
.table-inv-keluar td[data-label="Nomor & Tanggal"],
.table-inv-permintaan td[data-label="Nomor & Tanggal"] { white-space: normal; }

@media (max-width: 720px) {
  .table-inv-keluar td[data-label="Nomor & Tanggal"],
  .table-inv-keluar td[data-label="Proyek / Penerima"],
  .table-inv-permintaan td[data-label="Nomor & Tanggal"],
  .table-inv-permintaan td[data-label="Proyek"],
  .table-inv-permintaan td[data-label="PIC / Tukang"] { display: block; }
  .table-inv-keluar td[data-label="Nomor & Tanggal"]::before,
  .table-inv-keluar td[data-label="Proyek / Penerima"]::before,
  .table-inv-permintaan td[data-label="Nomor & Tanggal"]::before,
  .table-inv-permintaan td[data-label="Proyek"]::before,
  .table-inv-permintaan td[data-label="PIC / Tukang"]::before { display: block; margin-bottom: 2px; }
  .table-inv-keluar td[data-label="Aksi"],
  .table-inv-permintaan td[data-label="Aksi"] { display: block; }
  .table-inv-keluar td[data-label="Aksi"]::before,
  .table-inv-permintaan td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-inv-keluar .row-actions,
  .table-inv-permintaan .row-actions { justify-content: flex-start; }
}

/* ---------- tabel opname ---------- */
.table-inv-opname td { vertical-align: top; }
.table-inv-opname .row-actions { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 720px) {
  .table-inv-opname td[data-label="Nomor & Tanggal"] { display: block; }
  .table-inv-opname td[data-label="Nomor & Tanggal"]::before { display: block; margin-bottom: 2px; }
  .table-inv-opname td[data-label="Aksi"] { display: block; }
  .table-inv-opname td[data-label="Aksi"]::before { display: block; margin-bottom: 4px; }
  .table-inv-opname .row-actions { justify-content: flex-start; }
}

/* ---------- laporan & kartu stok ---------- */
.table-inv-lap td, .table-inv-kartu td { vertical-align: top; }
.table-inv-lap tr.tr-grup td {
  background: rgba(79, 70, 229, 0.06);
  padding-top: 10px;
  padding-bottom: 10px;
}
.table-inv-kartu th.ta-right, .table-inv-kartu td.ta-right { text-align: right; }

@media (max-width: 720px) {
  .table-inv-lap td[data-label="Material"],
  .table-inv-lap td[data-label="Proyek"],
  .table-inv-lap td[data-label="Alasan"],
  .table-inv-kartu td[data-label="Supplier / Proyek"] { display: block; }
  .table-inv-lap td[data-label="Material"]::before,
  .table-inv-lap td[data-label="Proyek"]::before,
  .table-inv-lap td[data-label="Alasan"]::before,
  .table-inv-kartu td[data-label="Supplier / Proyek"]::before { display: block; margin-bottom: 2px; }
}

/* ---------- input foto bukti penerimaan ---------- */
.inv-item input[type="file"] {
  width: 100%;
  font-size: 12px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(99, 95, 130, 0.35);
  background: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   IMPOR MASTER INVENTORY (Supplier / Material)
   Halaman inv_import.php + assets/inv_import.js
   ========================================================= */
.table-inv-import td { vertical-align: top; }
.table-inv-import tr.tr-invalid td { background: rgba(225, 29, 72, 0.05); }
.imp-alasan, .imp-peringatan {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 3px;
}
.imp-alasan { color: #9f1239; }
.imp-peringatan { color: #b45309; }
.imp-list {
  margin: 6px 0 16px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.imp-list li { margin-bottom: 4px; }
#pemetaanWrap summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--indigo);
  padding: 4px 0;
}
#pemetaanWrap summary:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .table-inv-import td[data-label="Data"],
  .table-inv-import td[data-label="Alasan"] { display: block; }
  .table-inv-import td[data-label="Data"]::before,
  .table-inv-import td[data-label="Alasan"]::before { display: block; margin-bottom: 2px; }
}

/* =========================================================
   DETAIL AGENDA & INFO HASIL KUNJUNGAN
   (halaman agenda_detail.php — dua tab, unggah dokumen & foto)
   ========================================================= */

.agenda-summary .summary-grid { margin: 0; }
.agenda-form { display: flex; flex-direction: column; gap: 18px; }

.agenda-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.agenda-inline-actions .btn-inline { margin-top: 0; padding: 9px 16px; font-size: 13px; }
.agenda-inline-note { font-size: 12.5px; }

.agenda-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}
.agenda-form-foot .btn-primary { flex: 0 0 auto; min-width: 200px; }
.agenda-save-note { font-size: 12.5px; }

/* Section di dalam tab (dokumen, foto, draw, catatan) */
.agenda-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.agenda-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 14px;
}
.agenda-section-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.agenda-section-head .card-sub { margin: 0; }

.btn-unggah { flex: 0 0 auto; }
.btn-unggah:disabled { opacity: .55; cursor: not-allowed; }

/* Status proses unggah (indikator loading) */
.upload-progress {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.07);
  font-size: 13px;
  color: #3a3660;
}
.upload-progress::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.3);
  border-top-color: var(--indigo);
  animation: agenda-spin .8s linear infinite;
}
@keyframes agenda-spin { to { transform: rotate(360deg); } }

/* Tab dengan perubahan belum disimpan */
.tab.is-dirty { color: #b45309; }
.tab.is-dirty .tab-count { background: rgba(180, 83, 9, 0.16); color: #92400e; }
.tab.is-dirty::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex: 0 0 auto;
}

/* Galeri foto Agenda: thumbnail utuh (tidak terpotong) */
.agenda-galeri .foto-thumb {
  aspect-ratio: 4 / 3;
  background: rgba(99, 95, 130, 0.09);
}
.agenda-galeri .foto-thumb img {
  object-fit: contain;
  background: rgba(255, 255, 255, 0.6);
}

/* Placeholder saat thumbnail masih dimuat */
.foto-card.is-loading .foto-thumb {
  background-image: linear-gradient(100deg, rgba(99, 95, 130, 0.10) 20%, rgba(99, 95, 130, 0.20) 40%, rgba(99, 95, 130, 0.10) 60%);
  background-size: 220% 100%;
  animation: agenda-shimmer 1.2s ease-in-out infinite;
}
.foto-card.is-loading .foto-thumb img { opacity: 0; }
.foto-card .foto-thumb img { opacity: 1; transition: opacity .18s ease, transform .25s ease; }
.foto-card .foto-thumb img.is-broken { opacity: .4; }
@keyframes agenda-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lightbox-nav .btn-mini:disabled { opacity: .45; cursor: not-allowed; }
.lightbox-body img.is-loading { opacity: .35; }

.table-agenda-file .col-no { width: 52px; }
.table-agenda-file td[data-label="Nama File"] .cell-name { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .agenda-form-foot { flex-direction: column-reverse; align-items: stretch; }
  .agenda-form-foot .btn-primary { width: 100%; }
  .agenda-section { margin-top: 22px; padding-top: 18px; }
  .agenda-section-head { gap: 10px; }
  .agenda-section-head .btn-unggah { width: 100%; justify-content: center; }
  .agenda-galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .agenda-galeri .foto-card figcaption { padding: 10px 11px 12px; }
  .agenda-inline-actions .btn-inline { width: 100%; justify-content: center; }
  .agenda-detail-page .tab { padding: 10px 11px 12px; font-size: 13px; }
}

/* =========================================================
   DETAIL KEUANGAN TUKANG (kasbon, hasil, grafik bulanan)
   Semua kelas berprefiks .keu- agar tidak bertabrakan dengan
   blok CSS modul lain. Khusus Manager.
   ========================================================= */

/* ---------- identitas tukang ---------- */
.keu-ident { margin-bottom: 20px; }
.keu-ident-main { display: flex; align-items: flex-start; gap: 16px; }
.keu-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: var(--grad);
  box-shadow: 0 12px 26px -18px rgba(79, 70, 229, 0.9);
}
.keu-avatar svg { width: 26px; height: 26px; }
.keu-nama {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.keu-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.keu-ket { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- total besar per tab ---------- */
.keu-total-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(255, 255, 255, 0.72) 62%);
}
.keu-total-hasil {
  border-color: rgba(79, 70, 229, 0.26);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(255, 255, 255, 0.72) 62%);
}
.keu-total-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.keu-total-value {
  display: block;
  margin: 4px 0 2px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #b45309;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.keu-total-hasil .keu-total-value { color: #4338ca; }
.keu-total-note { font-size: 12.5px; color: var(--muted); }
.keu-total-side {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: rgba(180, 83, 9, 0.7);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(99, 95, 130, 0.14);
}
.keu-total-hasil .keu-total-side { color: rgba(67, 56, 202, 0.75); }
.keu-total-side svg { width: 22px; height: 22px; }

/* ---------- filter tanggal / periode ---------- */
.keu-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.keu-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.keu-filter-field > span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.keu-filter-field input[type="date"] {
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}
.keu-filter-note { flex: 1 1 220px; font-size: 12.5px; color: var(--muted); }
.keu-filter-grafik { align-items: center; }
.keu-filter-grafik .keu-filter-field { min-width: 0; }

/* ---------- kartu ringkasan ---------- */
.keu-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 18px;
}
.keu-card {
  padding: 16px 16px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.keu-card-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
.keu-card-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.keu-card-value.is-negatif { color: #be123c; }
.keu-card-note { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* Status saldo: warna + keterangan teks (tidak hanya warna). */
.keu-card.is-positif { border-left: 3px solid #10b981; }
.keu-card.is-nol { border-left: 3px solid #f59e0b; }
.keu-card.is-negatif { border-left: 3px solid #e11d48; }
.keu-card.is-negatif .keu-card-value { color: #be123c; }
.keu-card.is-kosong { border-left: 3px solid rgba(99, 95, 130, 0.35); }

.keu-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
}
.keu-note.is-positif { color: #047857; border-color: rgba(16, 185, 129, 0.35); background: rgba(236, 253, 245, 0.75); }
.keu-note.is-nol { color: #92400e; border-color: rgba(245, 158, 11, 0.35); background: rgba(255, 251, 235, 0.8); }
.keu-note.is-negatif { color: #9f1239; border-color: rgba(225, 29, 72, 0.3); background: rgba(255, 241, 242, 0.8); }

.keu-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}
.keu-info-item {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}
.keu-info-label { display: block; font-size: 12px; color: var(--muted); }
.keu-info-value { display: block; margin-top: 2px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }

.keu-disclaimer {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(99, 95, 130, 0.3);
  background: rgba(255, 255, 255, 0.5);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- grafik bulanan ---------- */
.keu-chart-block {
  margin: 0 0 22px;
  padding: 16px 16px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}
.keu-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.keu-chart-head h3 { margin: 0; font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.keu-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.keu-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.keu-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.keu-dot-kasbon { background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%); }
.keu-dot-hasil { background: linear-gradient(180deg, #8B5CF6 0%, #4F46E5 100%); }

.keu-chart-wrap { min-height: 160px; }
/* Gradien dua seri (id SVG dibuat oleh assets/tukang_keuangan.js). */
.keu-chart-wrap .bar-rect.bar-kasbon { fill: url(#keuGradKasbon); opacity: .86; }
.keu-chart-wrap .bar-rect.bar-hasil { fill: url(#keuGradHasil); opacity: .86; }
.keu-chart-wrap .bar-group:hover .bar-rect,
.keu-chart-wrap .bar-group:focus-visible .bar-rect { opacity: 1; }
.keu-chart-wrap .chart-value.is-kasbon { fill: #b45309; }
.keu-chart-wrap .chart-value.is-hasil { fill: #4338ca; }
.keu-chart-empty {
  margin: 0 0 8px;
  padding: 26px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(99, 95, 130, 0.28);
  background: rgba(255, 255, 255, 0.45);
}
.keu-chart-hint { margin: 6px 0 4px; font-size: 12px; color: var(--muted); }

/* ---------- tabel keuangan ---------- */
.table-keu td.cell-uang { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.table-keu td.cell-uang.is-negatif { color: #be123c; }
.table-keu .is-kosong .cell-uang, .table-keu .is-kosong td { color: var(--muted); font-weight: 500; }
.table-keu .baris-total td {
  background: rgba(79, 70, 229, 0.08);
  border-top: 1px solid rgba(79, 70, 229, 0.22);
}
.table-keu .baris-total td:first-child { border-radius: 10px 0 0 10px; }
.table-keu .baris-total td:last-child { border-radius: 0 10px 10px 0; }
.table-keu tr.tr-baru > td { animation: kasRowBaru 2s ease-out; }
.keu-table-bulanan { margin-top: 4px; }

/* Tombol Detail Keuangan pada daftar tukang */
.btn-mini.btn-keuangan {
  border-color: rgba(79, 70, 229, 0.35);
  color: var(--indigo);
  background: rgba(79, 70, 229, 0.08);
  text-decoration: none;
  white-space: nowrap;
}
.btn-mini.btn-keuangan:hover { background: #eef2ff; border-color: rgba(79, 70, 229, 0.6); color: #3730a3; }

@media (max-width: 1100px) {
  .keu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keu-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .keu-ident-main { gap: 12px; }
  .keu-avatar { width: 44px; height: 44px; border-radius: 13px; }
  .keu-avatar svg { width: 22px; height: 22px; }
  .keu-nama { font-size: 17px; }
  .keu-total-card { padding: 14px; gap: 10px; }
  .keu-total-value { font-size: 21px; }
  .keu-total-side { display: none; }
  .keu-cards, .keu-info { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .keu-card { padding: 14px; }
  .keu-card-value { font-size: 19px; }
  .keu-filter { padding: 12px; }
  .keu-filter-field { flex: 1 1 100%; min-width: 0; }
  .keu-filter-note { flex: 1 1 100%; }
  .keu-chart-block { padding: 14px 12px 8px; }
  .keu-chart-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .keu-table-bulanan .table-keu { table-layout: auto; }
}

/* =========================================================
   AGENDA PUBLIK — kartu daftar (agenda.php untuk pengunjung
   tanpa login) + halaman detail hanya-baca
   (agenda_detail_publik.php). Semua kelas berprefiks .ap- /
   .agenda-kartu / .kartu- agar tidak bertabrakan.
   ========================================================= */

/* ---------- kartu agenda pada halaman daftar publik ---------- */
.agenda-kartu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 4px;
}
.agenda-kartu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.agenda-kartu:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 18px 34px -22px rgba(24, 20, 46, 0.5);
}
.agenda-kartu:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }
.agenda-kartu.is-hari-ini { border-color: rgba(79, 70, 229, 0.42); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12); }
.agenda-kartu.is-lewat { opacity: .94; }

.kartu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.kartu-tanggal { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kartu-hari {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
  font-weight: 600;
}
.kartu-judul {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kartu-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.kartu-info > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; }
.kartu-info dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.kartu-info dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.kartu-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--grad);
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 10px 20px -14px rgba(79, 70, 229, 0.95);
}
.kartu-cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- halaman detail publik ---------- */
.ap-page { max-width: 1000px; }
.ap-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 22px;
}
.ap-head h1 { font-size: 25px; }
.ap-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ap-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  color: #3a3660;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ap-badge-tanggal { background: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.24); color: #3730a3; }
.ap-badge-only { background: rgba(99, 95, 130, 0.1); color: var(--muted); }

.ap-stack { display: flex; flex-direction: column; gap: 22px; }
.ap-card { padding: 20px 20px 22px; }
.ap-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ap-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ap-card-head h2 svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #4F46E5;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-count {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(99, 95, 130, 0.1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ap-summary { margin: 0; }
.ap-catatan { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ap-catatan h3 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-teks {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #2a2650;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* kontak & lokasi */
.ap-kontak-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ap-kontak {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
}
.ap-kontak-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-kontak-nilai {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ap-kontak-nilai.is-kosong { color: var(--muted); }
.ap-alamat { margin: 0; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ap-alamat.is-kosong { color: var(--muted); }
.ap-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ap-btn-wa,
.ap-btn-maps { align-self: flex-start; margin-top: 2px; font-size: 13.5px; }

/* daftar dokumen */
.ap-dok-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-dok {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.66);
}
.ap-dok-ext {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.1);
  color: #3730a3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: center;
}
.ap-dok-info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.ap-dok-nama { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.ap-dok-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-dok-aksi { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.btn-mini.btn-unduh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 100%);
  color: #fff;
  padding: 6px 11px;
  box-shadow: 0 8px 16px -12px rgba(79, 70, 229, 1);
}
.btn-mini.btn-unduh:hover { background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%); color: #fff; }
.btn-mini.btn-unduh svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ap-sub-title { margin: 22px 0 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.ap-sub-title:first-of-type { margin-top: 4px; }
.ap-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(99, 95, 130, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.ap-foot-note { margin: 26px 2px 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.ap-foot-actions { justify-content: center; margin-top: 16px; }

@media (max-width: 900px) {
  .agenda-kartu-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .ap-kontak-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .agenda-kartu-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .ap-card { padding: 16px 14px 18px; }
  .ap-head h1 { font-size: 21px; }
  .ap-head .detail-actions { width: 100%; }
  .ap-head .detail-actions .btn-inline { width: 100%; justify-content: center; }
  .ap-summary { grid-template-columns: minmax(0, 1fr); }
  .ap-btn-wa,
  .ap-btn-maps { width: 100%; justify-content: center; }
  .ap-dok { flex-wrap: wrap; }
  .ap-dok-info { flex: 1 1 130px; }
  .ap-dok-aksi { width: 100%; }
  .ap-dok-aksi .btn-mini { flex: 1 1 auto; justify-content: center; }
  .kartu-info > div { grid-template-columns: 68px minmax(0, 1fr); }
}

/* =========================================================
   Statistik Leads — TIGA GRAFIK PIE
   (By Sumber / By Proyek / By Status)
   ---------------------------------------------------------
   Desktop: 3 kartu berdampingan. Tablet: 2 kolom. Ponsel: 1 kolom.
   Diagram & legenda memakai lebar kartu, jadi tidak pernah
   menimbulkan gulir horizontal.
   ========================================================= */

.statistik-pie-section { margin-bottom: 28px; }
.statistik-pie-head { margin-bottom: 16px; }
.statistik-pie-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pie-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.pie-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  min-width: 0;
}
/* Aksen tipis di kepala kartu: tiap diagram punya identitas warna sendiri
   (sumber = orange/amber, interest = kuning keemasan, status = coral). */
.pie-card::before {
  content: '';
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--pie-aksen, linear-gradient(90deg, #4F46E5, #8B5CF6));
  opacity: .9;
}
.pie-card--sumber { --pie-aksen: linear-gradient(90deg, #ff8a1e, #ffc46b); }
.pie-card--interest { --pie-aksen: linear-gradient(90deg, #ffc61a, #ffe07a); }
.pie-card--status { --pie-aksen: linear-gradient(90deg, #ff5348, #ff9c86); }
.pie-card-head { display: flex; flex-direction: column; gap: 3px; }
.pie-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pie-card-sub { margin: 0; font-size: 12px; color: var(--muted); }

.pie-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.pie-body .pie-loading { padding: 26px 8px; }
.pie-empty {
  margin: 0;
  padding: 34px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.45);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

/* ---------- diagram: 3D style ----------
   Muka potongan selalu LINGKARAN penuh (lebar sudut = persentase asli);
   kesan tiga dimensi datang dari dinding/kedalaman (SVG, dibuat JS),
   gradasi volume, dan bayangan lembut di bawah diagram. */
.pie-chart {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 2px 0 0;
}
.pie-svg {
  display: block;
  max-width: 100%;
  height: auto;
  animation: pieMasuk .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pieMasuk {
  from { opacity: 0; transform: translateY(7px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.pie-shadow,
.pie-depth,
.pie-hole,
.pie-hole-rim,
.pie-iris-label,
.pie-total-num,
.pie-total-sub { pointer-events: none; }

/* Potongan: gradasi volume dibuat di JS (satu gradient per potongan).
   Muncul bertahap saat data dimuat/berubah, dan tersorot saat hover/fokus. */
.pie-iris {
  cursor: pointer;
  outline: none;
  animation: pieIrisMasuk .4s ease both;
  transition: filter .16s ease;
}
@keyframes pieIrisMasuk {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pie-iris.is-aktif,
.pie-iris:focus-visible { filter: brightness(1.07) drop-shadow(0 5px 12px rgba(31, 27, 58, 0.34)); }
.pie-iris:focus-visible { stroke: #fff; stroke-width: 2; }

/* Label persen di atas potongan: warna teks (gelap/terang) ditentukan JS
   sesuai kecerahan warna potongan supaya selalu terbaca. */
.pie-iris-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.pie-total-num {
  font-size: 21px;
  font-weight: 700;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pie-total-sub {
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Tooltip di dalam kartu: teks boleh membungkus supaya tidak melebar
   keluar kartu (tidak boleh memicu gulir horizontal di ponsel). */
.pie-chart .chart-tooltip {
  max-width: 220px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
.pie-chart .chart-tooltip.pie-tip { padding: 8px 11px; }
.pie-tip-nama {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pie-tip-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.76);
}
.pie-tip-baris strong {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- legenda ---------- */
.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pie-legend-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 12.5px;
  transition: background .14s;
}
.pie-legend-row.is-aktif { background: rgba(79, 70, 229, 0.08); }
.pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  transition: box-shadow .16s ease, transform .16s ease;
}
/* Baris legenda kategori dengan persentase tertinggi (warna sorotan). */
.pie-legend-row.is-teratas .pie-legend-nama { font-weight: 700; color: var(--ink); }
.pie-legend-row.is-teratas .pie-legend-dot {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 3.2px rgba(31, 27, 58, 0.16);
}
.pie-legend-nama { color: #332f52; font-weight: 550; overflow-wrap: anywhere; }
.pie-legend-angka {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pie-legend-persen {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pie-card-total {
  margin: auto 0 0;
  padding-top: 10px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.pie-card-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pie-card-total .pie-card-top { white-space: nowrap; }

/* ---------- responsif ---------- */
@media (max-width: 1100px) {
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 720px) {
  .statistik-pie-section { margin-bottom: 22px; }
  .statistik-pie-head h2 { font-size: 16.5px; }
  .statistik-pie-head .card-sub { font-size: 12.5px; }
  .pie-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pie-card { padding: 16px; gap: 12px; }
  .pie-card-head h3 { font-size: 14.5px; }
  .pie-legend-row { grid-template-columns: 10px minmax(0, 1fr) auto 46px; font-size: 12px; }
  .pie-chart .chart-tooltip { max-width: 190px; }
}

/* Animasi masuk dihormati sebagai dekorasi saja — bila pengguna meminta
   gerak minimal, diagram langsung tampil tanpa animasi. */
@media (prefers-reduced-motion: reduce) {
  .pie-svg,
  .pie-iris { animation: none !important; }
  .pie-iris { transition: none; }
}

/* =========================================================
   LEADS — FILTER PERIODE TAHUN & AKUMULASI STATUS
   ---------------------------------------------------------
   Filter periode berada di bagian paling atas halaman Leads
   dan berlaku untuk daftar + keenam kartu akumulasi.
   ========================================================= */
.periode-bar {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.periode-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.periode-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.periode-form .select-wrap.compact { flex: 0 0 auto; }
.periode-form .btn-inline { margin-top: 0; }  /* .btn-inline punya margin-top 20px */
.periode-form .btn-inline.is-dirty { box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16); }
.periode-note {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.periode-note.is-aktif { color: var(--indigo); font-weight: 600; }

/* Enam kartu akumulasi status */
.stats.stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-value.sv-tahap   { color: #4338ca; }
.stat-value.sv-proses  { color: #0369a1; }
.stat-value.sv-deal    { color: #047857; }
.stat-value.sv-tidak   { color: #be123c; }
.stat-value.sv-respond { color: #b45309; }

@media (max-width: 1180px) {
  .stats.stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .periode-bar { padding: 12px 14px; margin-bottom: 16px; }
  .periode-form { gap: 8px 10px; }
  .periode-label { flex: 1 1 100%; }
  .periode-form .select-wrap.compact { flex: 1 1 0; min-width: 0; }
  .periode-form .select-wrap.compact select { width: 100%; min-width: 0; }
  .periode-form .btn-inline { flex: 0 0 auto; padding: 10px 16px; }
  .periode-note { margin: 0; flex: 1 1 100%; font-size: 12px; }
  .stats.stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tombol Import & Export berbagi lebar, tidak terpotong di layar sempit */
  .leads-actions .btn-ghost { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 13px; }
  .leads-actions .btn-ghost svg { flex: 0 0 auto; }
}

/* =========================================================
   EXPORT DATA LEADS — tombol satu klik
   ---------------------------------------------------------
   Tombol export langsung menyiapkan & mengunduh file .xlsx
   di browser: tanpa modal, tanpa form nama file, dan tanpa
   unduhan file lewat jaringan (penyebab unduhan terputus).
   ========================================================= */
#btnExportLeads .btn-label { white-space: nowrap; }
#btnExportLeads.is-loading { cursor: progress; opacity: .82; }
/* Spinner bawaan berwarna putih (untuk tombol primary); di tombol ghost
   dipakai warna indigo supaya terlihat di latar terang. */
#btnExportLeads .spinner {
  border-color: rgba(79, 70, 229, 0.25);
  border-top-color: var(--indigo);
}
#btnExportLeads.is-loading .spinner { display: inline-block; }

/* =========================================================
   HAPUS DATA — kartu destruktif, ringkasan relasi, history log
   ---------------------------------------------------------
   Melengkapi blok "Halaman Hapus Data" di atas: kartu dengan
   ikon, ringkasan relasi per tabel, antrean file, dan tabel
   History Penghapusan Data + modal detail log.
   ========================================================= */
.hapus-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hapus-ikon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(225, 29, 72, 0.22);
  background: linear-gradient(140deg, rgba(255, 241, 242, 0.95), rgba(253, 242, 248, 0.85));
  color: #be123c;
}
.hapus-ikon svg { width: 21px; height: 21px; }

.hapus-count {
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}
.hapus-count > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hapus-count-sub { text-align: right; }
.hapus-count-sub strong {
  font-size: 17px !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  color: #4b4768 !important;
}
.hapus-count-sub span { font-size: 11.5px; }

.hapus-relasi {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.66);
  padding: 0;
  overflow: hidden;
}
.hapus-relasi > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 650;
  color: #4b4768;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hapus-relasi > summary::-webkit-details-marker { display: none; }
.hapus-relasi > summary::before {
  content: "▸";
  font-size: 10px;
  color: var(--muted);
  transition: transform .15s;
}
.hapus-relasi[open] > summary::before { transform: rotate(90deg); }
.hapus-relasi > summary:hover { background: rgba(79, 70, 229, 0.04); }
.hapus-relasi ul {
  margin: 0;
  padding: 4px 12px 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: #4b4768;
}
.hapus-relasi li {
  display: flex;
  align-items: flex-baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(99, 95, 130, 0.16);
}
.hapus-relasi li:last-child { border-bottom: 0; padding-bottom: 0; }
.hapus-relasi li span { min-width: 0; overflow-wrap: anywhere; }
.hapus-relasi li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hapus-catatan { font-style: normal; color: var(--muted); }
.hapus-relasi-tetap > summary { color: #635f82; }

.hapus-file-note {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(79, 70, 229, 0.28);
  background: rgba(79, 70, 229, 0.04);
  font-size: 12px;
  color: #4b4768;
}

.hapus-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11.5px;
}
.hapus-status.is-ok { background: rgba(16, 185, 129, 0.14); color: #047857; }
.hapus-status.is-warn { background: rgba(225, 29, 72, 0.12); color: #be123c; }

.hapus-card-foot .btn-danger,
#btnEksekusi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hapus-card-foot .btn-danger svg,
#btnEksekusi svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hapus-card-foot .btn-danger:disabled { cursor: not-allowed; }

/* --- ringkasan tabel pada modal --- */
.hapus-tabel-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.7);
}
.hapus-tabel-ringkas { margin: 0; table-layout: auto; min-width: 420px; }
.hapus-tabel-ringkas th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(243, 240, 255, 0.98);
}
.hapus-tabel-ringkas td { vertical-align: top; }
.hapus-tabel-ringkas td .cell-sub,
.hapus-tabel-ringkas td .cell-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}
.hapus-tabel-ringkas tr.is-utama td { background: rgba(79, 70, 229, 0.05); }
.hapus-tetap li.is-warn { border-color: rgba(225, 29, 72, 0.3); background: rgba(255, 241, 242, 0.8); color: #881337; }

/* --- hasil eksekusi --- */
.hapus-hasil-icon.is-info { background: rgba(79, 70, 229, 0.14); color: var(--indigo); }
.hapus-hasil-tabel {
  list-style: none;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  font-size: 12.5px;
}
.hapus-hasil-tabel li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px !important;
  border-radius: 8px;
  border: 1px dashed rgba(99, 95, 130, 0.22) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  text-align: left;
}
.hapus-hasil-tabel li strong { font-variant-numeric: tabular-nums; }

/* --- history & detail log --- */
.hapus-log { table-layout: auto; }
.hapus-log .cell-sub { display: block; font-size: 11.5px; color: var(--muted); }
.btn-mini-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: #3a3660;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini-ghost:hover { background: #fff; border-color: rgba(79, 70, 229, 0.45); color: var(--indigo); }

.hapus-log-detail { display: flex; flex-direction: column; gap: 4px; }
.hapus-log-meta {
  margin: 0 0 14px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  color: #4b4768;
}
.hapus-log-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(79, 70, 229, 0.07);
  padding: 1px 5px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.hapus-log-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .hapus-ikon { width: 34px; height: 34px; border-radius: 10px; }
  .hapus-ikon svg { width: 18px; height: 18px; }
  .hapus-count { flex-direction: row; }
  .hapus-count strong { font-size: 22px; }
  .hapus-count-sub strong { font-size: 16px !important; }
  .hapus-tabel-wrap { max-height: none; }
  .hapus-tabel-ringkas { min-width: 0; }
  /* mode kartu: label ::before pada tabel audit sudah diatur global */
  .hapus-log-detail .hapus-fakta { grid-template-columns: minmax(0, 1fr); }
}

/* Tombol destruktif pada kartu yang masih diblokir relasi: tetap merah dan
   tetap bisa diklik (modal menjelaskan alasannya), hanya sedikit diredupkan. */
.hapus-card-foot .btn-danger.is-blocked { opacity: .74; }
.hapus-card-foot .btn-danger.is-blocked:hover { opacity: .9; }

/* =========================================================
   BUAT AGENDA DARI DAFTAR LEADS
   Tombol aksi per baris + catatan sumber data di form Tambah Agenda.
   ========================================================= */

/* Tombol aksi "Buat Agenda" (Leads). Gaya mengikuti .btn-mini yang sudah ada,
   hanya diberi aksen indigo + ikon kalender-plus. */
.btn-mini.btn-agenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Disamakan dengan tinggi .btn-mini lain (ikon tidak menambah tinggi) */
  line-height: 15px;
  border-color: rgba(79, 70, 229, 0.35);
  color: var(--indigo);
  background: rgba(79, 70, 229, 0.07);
  text-decoration: none;
  white-space: nowrap;
}
.btn-mini.btn-agenda:hover {
  background: #eef2ff;
  border-color: rgba(79, 70, 229, 0.6);
  color: #3730a3;
}
.btn-mini.btn-agenda svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Catatan "Sumber data: Leads #N" di dalam form Tambah Agenda. */
.form-source {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.07);
  color: #3730a3;
  font-size: 12.5px;
  line-height: 1.6;
}
.form-source strong { font-weight: 700; }
.form-source a {
  color: var(--indigo);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Sumber agenda pada halaman Detail Agenda. */
.sumber-lead-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.sumber-lead-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  text-decoration: none;
}
.sumber-lead-link svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   PROYEK — PENGISIAN OTOMATIS DARI DATA CUSTOMER
   Status singkat di bawah field Customer: memuat / berhasil / gagal.
   (Teksnya dari assets/projects.js; warna memakai tema yang sudah ada.)
   ========================================================= */

.autofill-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.22);
  color: #3f3a6b;
}
.autofill-note[hidden] { display: none; }
.autofill-note::before {
  content: "i";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: rgba(79, 70, 229, 0.16);
  color: #4338ca;
}
.autofill-note.is-loading::before {
  content: "";
  background: none;
  border: 2px solid rgba(79, 70, 229, 0.28);
  border-top-color: #4f46e5;
  animation: spin .7s linear infinite;
}
.autofill-note.is-ok {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.28);
  color: #065f46;
}
.autofill-note.is-ok::before {
  content: "✓";
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}
.autofill-note.is-error {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.22);
  color: #9f1239;
}
.autofill-note.is-error::before {
  content: "!";
  background: rgba(225, 29, 72, 0.16);
  color: #be123c;
}

/* =========================================================
   AGENDA — TAB "UPDATE STATUS" (khusus Manager)
   Halaman agenda_detail.php (tab ke-3). Kelas berprefiks .status-
   dan .segmented agar tidak bertabrakan dengan blok CSS lain.
   Field tanggal disembunyikan lewat atribut [hidden] (global
   `[hidden] { display: none !important; }` sudah ada di atas).
   ========================================================= */

.status-blok {
  padding: 16px 18px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
}
.status-blok-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.status-blok-no {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
}
.status-blok-head h3 {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.status-blok-head .card-sub { margin: 0; font-size: 12.5px; line-height: 1.5; }

/* Desktop: dropdown & tanggal berdampingan; mobile: menumpuk vertikal */
.status-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 12px 16px;
  align-items: start;
}
.status-pair .field { margin-bottom: 14px; }

/* Label untuk kontrol non-input (segmented & tanggal referensi) */
.status-label {
  font-size: 13px;
  font-weight: 600;
  color: #33305a;
}

/* Tanggal Agenda hanya informasi (tidak bisa diubah) */
.status-ref {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(99, 95, 130, 0.32);
  background: rgba(243, 240, 255, 0.75);
  font-size: 14px;
  font-weight: 650;
  color: #33305a;
  font-variant-numeric: tabular-nums;
}

/* Checklist "Sudah DP / Belum DP" — dua pilihan, saling eksklusif */
.segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(99, 95, 130, 0.09);
}
.segmented-opt { position: relative; display: inline-flex; }
.segmented-opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.segmented-opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.segmented-opt input:checked + span {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.26);
}
.segmented-opt input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.segmented-opt input:disabled + span { opacity: .6; cursor: not-allowed; }

/* Catatan internal (bukan untuk halaman publik) */
.status-privasi {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Tombol Reset Form memakai .btn-inline yang punya margin-top 20px */
#formStatus .agenda-form-foot .btn-secondary.btn-inline { margin-top: 0; }

@media (max-width: 720px) {
  .status-blok { padding: 14px 14px 2px; }
  .status-blok-head { gap: 9px; margin-bottom: 12px; }
  .status-pair { grid-template-columns: 1fr; gap: 0; }
  .segmented { width: 100%; }
  .segmented-opt { flex: 1 1 0; }
  .segmented-opt span { width: 100%; padding: 9px 12px; }
  #formStatus .agenda-form-foot .btn-secondary.btn-inline { width: 100%; justify-content: center; }
}

/* =========================================================
   AGENDA — EXPORT DATA AGENDA KE EXCEL (modal pengaturan)
   ---------------------------------------------------------
   Tombol export duduk di .kas-head-actions bersama tombol Tambah
   Agenda. .btn-inline punya margin-top: 20px (dipakai form lain),
   jadi di baris kepala ini margin itu dinolkan agar kedua tombol
   sejajar — hanya berlaku di halaman Agenda.
   ========================================================= */
.agenda-head-actions .btn-inline { margin-top: 0; min-height: 39px; }
.agenda-head-actions .btn-secondary svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#btnExportAgenda.is-loading { opacity: .72; pointer-events: none; }

/* Kotak informasi export (jenis data, total, periode, format) */
.exp-info {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.16);
}
.exp-info-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4f46e5;
}
.exp-list { margin: 0; display: grid; gap: 6px; }
.exp-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.5;
}
.exp-row dt { margin: 0; color: var(--muted); }
.exp-row dd { margin: 0; color: #2b2748; font-weight: 500; overflow-wrap: anywhere; }
.exp-row dd strong { font-weight: 700; color: var(--ink, #1f1b3a); }

/* Nama file: input + ekstensi yang ditampilkan otomatis */
.exp-name {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.exp-name input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.exp-ext {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(99, 95, 130, 0.09);
  border: 1px solid rgba(99, 95, 130, 0.22);
  border-left: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Lokasi penyimpanan */
.exp-lokasi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.exp-lokasi .btn-inline { margin-top: 0; gap: 8px; }
.exp-lokasi .btn-inline svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.exp-lokasi .btn-inline.is-disabled { opacity: .6; cursor: not-allowed; }
.exp-lokasi-status {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.exp-lokasi-status.is-ok { color: #047857; font-weight: 600; }
.exp-lokasi-status.is-warn { color: #b45309; }

@media (max-width: 720px) {
  .agenda-head-actions { width: 100%; }
  .agenda-head-actions .btn-inline { flex: 1 1 auto; }
  .exp-row { grid-template-columns: 1fr; gap: 1px; }
  .exp-lokasi { flex-direction: column; align-items: stretch; }
  .exp-lokasi .btn-inline { width: 100%; justify-content: center; }
  .exp-lokasi-status { text-align: center; }
}

/* =====================================================================
   MONITORING AGENDA — GANTT CHART (hanya baca)
   ---------------------------------------------------------------------
   Kelas berawalan `.mon-*` (halaman) dan `.gantt-*` (tabel timeline).
   Tampilan desktop = tabel Gantt dengan kolom kiri sticky; ≤900px diganti
   kartu agenda yang bisa dibuka (expandable) agar tidak ada kolom terpotong.
   ===================================================================== */

/* Sub-menu Modul Agenda (Daftar Agenda / Monitoring Agenda) */
.agenda-subnav {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(99, 95, 130, 0.08);
  width: fit-content;
  max-width: 100%;
}
.agenda-subnav-link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #55516f;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.agenda-subnav-link:hover { background: rgba(255, 255, 255, 0.7); color: var(--indigo); }
.agenda-subnav-link.is-active {
  background: #fff;
  color: var(--indigo);
  box-shadow: 0 4px 12px -6px rgba(56, 42, 122, 0.45);
}

.mon-head h1 { font-size: 22px; letter-spacing: .01em; }
.mon-viewchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 650;
  vertical-align: 1px;
}
.mon-viewchip svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------- kartu ringkasan (bisa diklik) ---------------- */
.mon-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}
.mon-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 14px 14px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-soft);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.mon-stat:hover { transform: translateY(-1px); border-color: rgba(79, 70, 229, 0.35); }
.mon-stat.is-active {
  border-color: rgba(79, 70, 229, 0.6);
  box-shadow: 0 14px 30px -20px rgba(79, 70, 229, 0.85);
}
.mon-stat.is-active::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--indigo);
}
.mon-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.35;
}
.mon-stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.mon-stat-note { font-size: 10.5px; color: var(--muted); }
.mon-stat-total .mon-stat-value { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mon-stat-belum { border-color: rgba(99, 95, 130, 0.22); }
.mon-stat-belum .mon-stat-value { color: #55516f; }
.mon-stat.umur-hijau { border-color: rgba(16, 185, 129, 0.3); }
.mon-stat.umur-hijau .mon-stat-value { color: #047857; }
.mon-stat.umur-kuning { border-color: rgba(245, 158, 11, 0.32); }
.mon-stat.umur-kuning .mon-stat-value { color: #b45309; }
.mon-stat.umur-oranye { border-color: rgba(249, 115, 22, 0.34); }
.mon-stat.umur-oranye .mon-stat-value { color: #c2410c; }
.mon-stat.umur-merah { border-color: rgba(239, 68, 68, 0.34); }
.mon-stat.umur-merah .mon-stat-value { color: #b91c1c; }
.mon-stat-hint { margin: 0 0 20px; font-size: 12px; color: var(--muted); }

/* ---------------- filter ---------------- */
.mon-filter-card { margin-bottom: 20px; padding: 16px 18px; }
.mon-filter { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.mon-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 168px; min-width: 0; }
.mon-field > span {
  font-size: 11.5px;
  font-weight: 650;
  color: #33305a;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mon-field-grow { flex: 2 1 230px; }
.mon-field-reset { flex: 0 0 auto; }
/* Dua input tanggal harus bisa menyusut/menurun baris: tanpa `min-width: 0`
   + flex-wrap, input tanggal berlebar intrinsik ~134px mendorong halaman
   melebar horizontal (terukur 80px di 900px, 55px di 1024px). */
.mon-field .range-wrap { width: 100%; flex-wrap: wrap; }
.mon-field .range-wrap input[type="date"] {
  flex: 1 1 118px;
  min-width: 0;
  width: auto;
  padding: 9px 8px;
  font-size: 12.5px;
}
.mon-field select, .mon-field input[type="search"] { font-size: 13.5px; padding: 9px 11px; }
.mon-locked {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(99, 95, 130, 0.3);
  background: rgba(99, 95, 130, 0.06);
  font-size: 13px;
  color: var(--muted);
}
.mon-filter-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---------------- legenda & kontrol timeline ---------------- */
.mon-gantt-card { padding: 18px 18px 22px; }
.mon-gantt-head { margin-bottom: 12px; }
.mon-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--muted);
}
.mon-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mon-legend-sep { width: 1px; height: 16px; background: var(--line); }
.mon-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.mon-dot.pin-awal { background: #0d9488; }
.mon-dot.pin-akhir { background: #4F46E5; }
.mon-dot.pin-sekarang { background: #f59e0b; }
.mon-dot.umur-hijau { background: #10b981; }
.mon-dot.umur-kuning { background: #f59e0b; }
.mon-dot.umur-oranye { background: #f97316; }
.mon-dot.umur-merah { background: #ef4444; }
.mon-dot.umur-belum { background: #94a3b8; }

.mon-timeline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mon-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mon-range-label { font-size: 13px; font-weight: 650; color: var(--ink); }
.mon-today-btn { border-color: rgba(239, 68, 68, 0.4) !important; color: #b91c1c !important; }
.mon-zoom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mon-zoom select { width: auto; padding: 6px 10px; font-size: 13px; }
.mon-hint { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); }

/* ---------------- badge durasi ---------------- */
.mon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.mon-badge-sub { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; }
.mon-badge.umur-hijau { background: rgba(16, 185, 129, 0.14); color: #047857; }
.mon-badge.umur-kuning { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.mon-badge.umur-oranye { background: rgba(249, 115, 22, 0.16); color: #c2410c; }
.mon-badge.umur-merah { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.mon-badge.umur-belum { background: rgba(148, 163, 184, 0.2); color: #475569; }

/* ---------------- tabel Gantt ---------------- */
.gantt-scroll {
  position: relative;
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.gantt-scroll:focus-visible { outline: 2px solid rgba(79, 70, 229, 0.45); outline-offset: 2px; }
.gantt-inner {
  --px: 11px;
  --gi-no: 38px;
  --gi-nama: 172px;
  --gi-pic: 78px;
  --gi-awal: 100px;
  --gi-akhir: 108px;
  --gi-sekarang: 108px;
  --gi-dur-akhir: 80px;
  --gi-dur-sekarang: 86px;
  width: max-content;
  min-width: 100%;
}
.gantt-head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.gantt-info {
  display: flex;
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 10px 0 14px -14px rgba(31, 27, 58, 0.55);
}
.gantt-info-head { z-index: 6; }
.gantt-info .gi-c, .gantt-info-head .gi-c {
  flex: 0 0 auto;
  padding: 7px 8px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.gantt-info-head .gi-c {
  font-size: 11.5px;
  font-weight: 650;
  color: #33305a;
  line-height: 1.25;
  justify-content: center;
}
.gi-no { width: var(--gi-no); color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.gi-nama { width: var(--gi-nama); }
.gi-pic { width: var(--gi-pic); font-size: 12px; }
.gi-awal { width: var(--gi-awal); }
.gi-akhir { width: var(--gi-akhir); }
.gi-sekarang { width: var(--gi-sekarang); }
.gi-dur-akhir { width: var(--gi-dur-akhir); }
.gi-dur-sekarang { width: var(--gi-dur-sekarang); }
.gantt-info .gi-nama strong { font-size: 12.5px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.gantt-info .gi-nama small { font-size: 10.5px; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.gi-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.gi-val { font-size: 11.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gi-date { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gi-sub { font-size: 10px; font-weight: 500; color: var(--muted); }

.gantt-body { position: relative; }
.gantt-row {
  display: flex;
  align-items: stretch;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
}
.gantt-row:last-child { border-bottom: 0; }
.gantt-row:nth-child(even) .gantt-info { background: #faf9ff; }
.gantt-row:hover .gantt-info { background: #f5f3ff; }
.gantt-track {
  position: relative;
  flex: 0 0 auto;
  min-height: 62px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(99, 95, 130, 0.13) 0 1px,
    transparent 1px calc(var(--px) * 7)
  );
}
.gantt-row:nth-child(even) .gantt-track { background-color: #faf9ff; }
.gantt-row:hover .gantt-track { background-color: #f8f6ff; }

.gantt-tl-head { position: relative; flex: 0 0 auto; padding-top: 18px; }
.gantt-months { display: flex; height: 30px; }
.gantt-month {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 650;
  color: #33305a;
  border-left: 1px solid rgba(79, 70, 229, 0.28);
  border-bottom: 1px solid var(--line);
  background: rgba(238, 242, 255, 0.65);
  overflow: hidden;
  white-space: nowrap;
}
.gantt-weeks { display: flex; height: 28px; }
.gantt-week {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  border-left: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}

/* penanda status pada timeline */
.mon-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mon-pin.pin-awal { top: 30%; }
.mon-pin.pin-akhir { top: 50%; }
.mon-pin.pin-sekarang { top: 70%; }
.mon-pin-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: block;
  box-shadow: 0 2px 7px rgba(31, 27, 58, 0.4);
  transition: transform .15s;
}
.mon-pin.pin-awal .mon-pin-dot { background: #0d9488; }
.mon-pin.pin-akhir .mon-pin-dot { background: #4F46E5; }
.mon-pin.pin-sekarang .mon-pin-dot { background: #f59e0b; }
.mon-pin:hover .mon-pin-dot,
.mon-pin:focus-visible .mon-pin-dot { transform: scale(1.4); }
.mon-pin:focus-visible { outline: 2px solid rgba(79, 70, 229, 0.5); outline-offset: 1px; border-radius: 50%; }
.mon-line {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.32), rgba(245, 158, 11, 0.5));
  z-index: 2;
}
.mon-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ef4444;
  opacity: .8;
  z-index: 3;
}
.mon-today-flag {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 7;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------------- tooltip ---------------- */
.mon-tip {
  position: fixed;
  z-index: 70;
  width: max-content;
  max-width: 268px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(31, 27, 58, 0.97);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 18px 40px -18px rgba(31, 27, 58, 0.85);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s, transform .12s;
  pointer-events: none;
}
.mon-tip.is-on { opacity: 1; transform: translateY(0); }
.mon-tip-title { margin: 0; font-size: 13px; font-weight: 700; }
.mon-tip-sub { margin: 0 0 8px; font-size: 11.5px; color: rgba(255, 255, 255, 0.66); }
.mon-tip-list { margin: 0; display: grid; gap: 4px; }
.mon-tip-list > div { display: grid; grid-template-columns: 96px 1fr; gap: 6px; }
.mon-tip-list dt { margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.mon-tip-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mon-tip-note { margin: 8px 0 0; font-size: 11px; color: #fcd34d; }

/* ---------------- tampilan ponsel: kartu expandable ---------------- */
.mon-cards { display: none; }
.mon-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
.mon-card.is-open { border-color: rgba(79, 70, 229, 0.35); box-shadow: 0 12px 26px -22px rgba(79, 70, 229, 0.9); }
.mon-card-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mon-card-no {
  flex: 0 0 auto;
  width: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mon-card-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mon-card-title strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.mon-card-title small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.mon-card-badge { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mon-card-sub { font-size: 10px; color: var(--muted); }
.mon-card-caret { flex: 0 0 auto; font-size: 12px; color: var(--muted); transition: transform .18s; }
.mon-card.is-open .mon-card-caret { transform: rotate(180deg); }
.mon-card-detail { padding: 0 14px 14px; }
.mon-card-status { margin: 0 0 10px; display: grid; gap: 8px; }
.mon-card-status > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.mon-card-status > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mon-card-status dt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.mon-card-status dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.mon-card-status dd strong { font-weight: 650; }
.mon-card-status dd span { font-size: 11.5px; color: var(--muted); }
.mon-card-range { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.mon-card-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.mon-card-track {
  position: relative;
  height: 44px;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(99, 95, 130, 0.12) 0 1px,
    transparent 1px calc(var(--px, 11px) * 7)
  );
}
.mon-footnote { margin-top: 18px; }

@media (max-width: 1180px) {
  .mon-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gantt-scroll { display: none !important; }
  .mon-cards { display: grid; gap: 12px; }
  .mon-legend { gap: 7px 12px; }
  .mon-timeline-bar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 720px) {
  .mon-head h1 { font-size: 17px; letter-spacing: 0; }
  .mon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mon-stat { padding: 11px 11px 10px; }
  .mon-stat-label { font-size: 10px; }
  .mon-stat-value { font-size: 19px; }
  .mon-stat-note { font-size: 10px; }
  .mon-field { flex: 1 1 100%; }
  .mon-field-reset { width: 100%; }
  .mon-field-reset .btn-secondary { width: 100%; }
  .mon-gantt-card { padding: 14px 12px 18px; }
  .mon-card-badge .mon-badge { font-size: 10.5px; }
  .agenda-subnav { width: 100%; }
  .agenda-subnav-link { flex: 1 1 auto; text-align: center; padding: 8px 10px; font-size: 12px; }
  .mon-tip { max-width: 228px; }
}