:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-dim: #6b7684;
  --primary: #5e3ed4;
  --primary-dark: #4c2fb0;
  --primary-soft: rgba(94, 62, 212, 0.10);
  --radius: 20px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg) radial-gradient(1100px 480px at 15% -8%, rgba(94,62,212,.07), transparent),
              radial-gradient(900px 420px at 100% 0%, rgba(94,62,212,.05), transparent);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ── Shell (full-width, tanpa sidebar -- 28 Agu, satu halaman aja) ── */
.app-shell-full { display: flex; flex-direction: column; min-height: 100vh; }

.topbar-full {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 18px; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-full-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-full-logo { display: block; height: 28px; width: auto; flex-shrink: 0; }
.topbar-full-title { min-width: 0; }
.topbar-full-title h1 { margin: 0; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.topbar-full-title .sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* .topbar-full-actions bungkus DUA grup (aksi + user) -- masing-masing
   grup sendiri flex-nowrap biar isinya (filter+tombol, atau pill+keluar)
   gak pernah kepisah atas-bawah, cuma grupnya sebagai satu unit yang
   boleh pindah baris kalau sempit. */
.topbar-full-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
#topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.topbar-full-user { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--border); flex-shrink: 0; flex-wrap: nowrap; }
.user-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-weight: 600; color: var(--text); background: var(--surface-alt); white-space: nowrap; }
.logout-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px; white-space: nowrap; }
.logout-btn:hover { color: var(--primary); }

.content-full { padding: 20px 28px 36px; flex: 1; max-width: 1600px; width: 100%; margin: 0 auto; box-sizing: border-box; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 14px rgba(94,62,212,.28); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-ghost { border-color: transparent; }
.btn-sm { padding: 6px 13px; font-size: 12.5px; }

/* ── Card ──────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

/* ── Hub: product cards ───────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.product-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .18s, box-shadow .18s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.10); }
.product-card-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.product-card h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.product-card p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; flex: 1; }
.product-card .btn { align-self: flex-start; }

/* ── Hero: ringkasan komposit di atas (29 Agu, "biar gak polos") ─── */
/* Ring conic-gradient CSS murni, gak pakai library chart -- warnanya
   ngikut status keseluruhan (ijo/kuning/merah), sama pola sama tabel
   status di bawah biar gak ada 2 bahasa visual beda buat hal yang sama. */
.hero-panel {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 20px;
  animation: widgetIn .32s cubic-bezier(.2,.7,.3,1) both;
}
.hero-ring {
  width: 128px; height: 128px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(var(--hero-color, var(--primary)) calc(var(--pct, 0) * 1%), var(--surface-alt) 0);
  transition: background 1.2s cubic-bezier(.2,.8,.2,1);
}
.hero-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 3px rgba(15,23,42,.06); }
.hero-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.hero-ring-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--hero-color, var(--primary)); }
.hero-ring-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; margin-top: 1px; text-align: center; padding: 0 8px; }
.hero-text { flex: 1; min-width: 200px; }
.hero-text h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.hero-text p { margin: 0; color: var(--text-muted); font-size: 13px; }
.hero-depts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-dept-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-alt); font-size: 12px; font-weight: 700; color: var(--text);
}
.hero-dept-chip .hero-dept-frac { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .hero-panel { padding: 20px; gap: 18px; }
  .hero-ring { width: 100px; height: 100px; }
  .hero-ring-value { font-size: 21px; }
}

/* ── Insight: widget dashboard ───────────────────────────────── */
/* Grid 4-kolom tetap (bukan auto-fill) -- biar widget size:'lg' bisa
   span 2 kolom secara konsisten, gak tergantung berapa banyak kartu
   yang kebetulan muat per baris. */
.widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.widget-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 17px; position: relative;
  grid-column: span 1; min-width: 0; /* grid item default min-width:auto bisa
    bikin kartu (dan tabel di dalamnya) maksa lebar > kolom grid-nya */
  transition: transform .18s, box-shadow .18s;
  animation: widgetIn .32s cubic-bezier(.2,.7,.3,1) both;
}
.widget-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.10); }
@keyframes widgetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Kartu masuk gantian (bukan bareng semua) -- kesan lebih "hidup" tanpa
   norak, dibatasi 12 kartu pertama biar dashboard yang widget-nya banyak
   gak nunggu lama buat kartu terakhir muncul. */
.widget-card:nth-child(1) { animation-delay: 0ms; }
.widget-card:nth-child(2) { animation-delay: 30ms; }
.widget-card:nth-child(3) { animation-delay: 60ms; }
.widget-card:nth-child(4) { animation-delay: 90ms; }
.widget-card:nth-child(5) { animation-delay: 120ms; }
.widget-card:nth-child(6) { animation-delay: 150ms; }
.widget-card:nth-child(7) { animation-delay: 180ms; }
.widget-card:nth-child(8) { animation-delay: 210ms; }
.widget-card:nth-child(9) { animation-delay: 240ms; }
.widget-card:nth-child(10) { animation-delay: 270ms; }
.widget-card:nth-child(11) { animation-delay: 300ms; }
.widget-card:nth-child(12) { animation-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
  .widget-card { animation: none; transition: none; }
  .widget-card:hover { transform: none; }
}
.widget-card.size-lg { grid-column: span 2; }
.widget-card .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.widget-card .label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.005em; }
.widget-card .value { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.widget-card .sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.widget-remove {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--surface-alt); color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s;
}
.widget-card:hover .widget-remove { opacity: 1; }
.widget-remove:hover { background: #fee2e2; color: #dc2626; }
.widget-card .error-msg { color: #dc2626; font-size: 13px; }

/* ── Drag-and-drop: pindah urutan widget (28 Agu) ────────────────── */
.widget-card { transition: box-shadow .15s, opacity .15s; }
.widget-card .drag-handle {
  position: absolute; top: 14px; right: 44px; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
  cursor: grab; opacity: 0; transition: opacity .15s, background .15s; background: transparent;
}
.widget-card:hover .drag-handle { opacity: 1; }
.widget-card .drag-handle:hover { background: var(--surface-alt); color: var(--primary); }
.widget-card .drag-handle:active { cursor: grabbing; }
.widget-card.dragging { opacity: .35; box-shadow: 0 10px 30px rgba(15,23,42,.2); }

.widget-kpi-btn {
  position: absolute; top: 14px; right: 74px; width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; background: transparent; border: none;
}
.widget-card:hover .widget-kpi-btn { opacity: 1; }
.widget-kpi-btn:hover { background: var(--surface-alt); color: var(--primary); }

.kpi-popover { padding: 14px; }

/* Widget tipe 'list' -- tabel mini di dalam kartu, tanpa border ekstra
   (kartunya sendiri udah jadi pembatas visual). */
.widget-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.widget-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.widget-table th { text-align: left; color: var(--text-dim); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; padding: 0 8px 8px 0; border-bottom: 1px solid var(--border); }
.widget-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--surface-alt); color: var(--text); }
.widget-table tr:last-child td { border-bottom: none; }
.widget-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Widget tipe 'trend' -- mini bar chart CSS murni (div dengan tinggi
   proporsional), gak pakai library charting biar tetap ringan. */
.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 84px; margin-top: 8px; }
.trend-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 1px; }
.trend-bars-row { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; }
/* min-height PIXEL (bukan cuma andalin persentase dari JS) -- data
   demo lokal seringkali nyaris nol di rentang "N hari terakhir dari
   HARI INI" (datanya beberapa bulan lebih tua dari tanggal sistem
   sekarang), jadi batang yang cuma dihitung persentase kadang jadi
   sub-pixel dan keliatan kosong padahal chart-nya bukan rusak. */
.trend-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; opacity: 0.85; }
.trend-labels { display: flex; gap: 4px; margin-top: 4px; }
.trend-labels span { flex: 1; text-align: center; font-size: 9.5px; color: var(--text-dim); }
.trend-legend { display: flex; gap: 14px; margin-bottom: 6px; }
.trend-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.trend-legend-dot { width: 8px; height: 8px; border-radius: 50%; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { color: var(--text-dim); margin-bottom: 14px; }

/* ── KPI: border kiri kartu + pill kecil di bawah angka ─────────── */
.widget-card.kpi-pass { border-left: 3px solid #16a34a; }
.widget-card.kpi-fail { border-left: 3px solid #dc2626; }
.kpi-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.kpi-pill.pass { background: rgba(22,163,74,.12); color: #16a34a; }
.kpi-pill.fail { background: rgba(220,38,38,.12); color: #dc2626; }
.kpi-pill.unknown { background: var(--surface-alt); color: var(--text-dim); }
.kpi-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Filter tanggal: tombol trigger + panel dropdown ────────────── */
.date-filter { position: relative; }
.date-filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: border-color .15s; font-family: inherit;
}
.date-filter-trigger:hover { border-color: var(--primary); }
.date-filter-trigger .cal-icon { color: var(--primary); flex-shrink: 0; }
/* Jaring pengaman -- label ini SEHARUSNYA udah pendek (lihat shortId() di
   index.html), tapi dibatasi lebar+ellipsis juga biar apapun isinya gak
   pernah bisa dorong topbar keluar viewport. */
#dateFilterLabel { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.date-filter-trigger .chev { color: var(--text-dim); flex-shrink: 0; transition: transform .15s; }
.date-filter.open .date-filter-trigger .chev { transform: rotate(180deg); }
.date-filter.open .date-filter-trigger { border-color: var(--primary); color: var(--primary); }

/* position:fixed + top/left dihitung JS (lihat positionFilterPanel() di
   index.html) tiap kali dibuka -- anchoring CSS murni (mis. "right:0")
   pecah begitu trigger-nya pindah posisi (topbar yang wrap di layar
   sempit bikin trigger kadang di kiri, kadang di kanan), jadi dipastikan
   selalu dalam batas viewport lewat JS, bukan ditebak lewat breakpoint. */
.date-filter-panel {
  display: none; position: fixed; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15,23,42,.18); padding: 16px;
  width: 330px; max-width: calc(100vw - 32px);
}
.date-filter.open .date-filter-panel { display: block; }

.date-filter-section-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 9px; }
.date-filter-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.date-filter-preset {
  padding: 9px 12px; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--surface-alt); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .12s; font-family: inherit;
}
.date-filter-preset:hover { border-color: var(--primary); color: var(--primary); }
.date-filter-preset.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); font-weight: 700; }

.date-filter-custom { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.date-filter-custom-row { display: flex; align-items: center; gap: 8px; }
.date-filter-custom-row input[type="date"] {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface-alt); cursor: text;
}
.date-filter-custom-row .to-label { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
.date-filter-custom.active .date-filter-custom-row input[type="date"] { border-color: var(--primary); }

/* ── Status Departemen ─────────────────────────────────────────────── */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.section-heading h2 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.section-heading .sub { color: var(--text-muted); font-size: 12.5px; }

.dept-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dept-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dept-table tr:last-child td { border-bottom: none; }
.dept-col-product { width: 45%; }
.dept-col-status { width: 55%; }
.dept-row-product { display: flex; align-items: center; gap: 12px; }
.dept-row-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dept-row-product .name { font-weight: 700; font-size: 14px; }

.dept-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dept-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
/* Dot = lampu asli merah/kuning/hijau (jenuh, gampang dibedain sekilas
   pandang) -- WARNA TEKS dipisah dari warna dot (bukan currentColor lagi)
   karena kuning jenuh gagal kontras kalau dipakai buat teks kecil, tapi
   sebagai bulatan lampu itu justru yang paling "kuning beneran". */
.dept-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.dept-status.green { color: #15803d; }
.dept-status.green .dept-dot { background: #22c55e; }
.dept-status.yellow { color: #a16207; }
.dept-status.yellow .dept-dot { background: #eab308; }
.dept-status.red { color: #dc2626; }
.dept-status.red .dept-dot { background: #ef4444; }
.dept-status.none { color: var(--text-dim); }
.dept-status.none .dept-dot { background: var(--text-dim); }
.dept-detail { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.dept-kpi-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dept-kpi-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text); line-height: 1.4; }
.dept-kpi-item .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dept-kpi-item.pass .dot { background: #16a34a; }
.dept-kpi-item.fail .dot { background: #dc2626; }
.dept-kpi-item.unknown .dot { background: var(--text-dim); }
.dept-kpi-item-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }


/* ── Add-widget modal ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 4px; }
.modal-body { padding: 12px 24px 24px; overflow-y: auto; }
.catalog-group + .catalog-group { margin-top: 18px; }
.catalog-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 14px 0 8px; }
.catalog-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  cursor: pointer; border: 1px solid transparent;
}
.catalog-item:hover { background: var(--surface-alt); }
.catalog-item.added { opacity: .5; cursor: default; }
.catalog-item-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.catalog-item-label { font-size: 13.5px; font-weight: 600; }
.catalog-item-add { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--primary); }

/* ── Kelola Akun (modal) ──────────────────────────────────────────── */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.form-field input, .form-field select {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--surface-alt); box-sizing: border-box;
}
.form-field input:disabled { color: var(--text-dim); cursor: not-allowed; }
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.form-actions { display: flex; gap: 8px; }

.user-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.user-row:last-child { border-bottom: none; }
.user-row .info { flex: 1; min-width: 120px; }
.user-row .info .name { font-weight: 700; font-size: 13.5px; }
.user-row .info .email { font-size: 12px; color: var(--text-muted); }
.role-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.user-row .actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Responsif: 3 titik henti (tablet lebar / tablet / hp) ───────── */
@media (max-width: 1100px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
  .widget-card.size-lg { grid-column: span 2; }
}

@media (max-width: 960px) {
  /* Topbar pecah jadi 2 baris: brand penuh di atas, aksi+user di bawah
     (space-between bawaan .topbar-full-actions gak berubah, cuma sekarang
     dia jadi baris sendiri karena brand udah minta lebar penuh). */
  .topbar-full-brand { flex-basis: 100%; }
  .topbar-full-actions { flex-basis: 100%; justify-content: space-between; }
}

@media (max-width: 720px) {
  .content-full, .topbar-full { padding-left: 18px; padding-right: 18px; }
  .topbar-full { padding-top: 12px; padding-bottom: 12px; }
  .topbar-full-title .sub { display: none; }
  .widget-grid { grid-template-columns: 1fr; }
  .widget-card.size-lg { grid-column: span 1; }

  /* Tabel status departemen jadi kartu bertumpuk, bukan kolom sempit. */
  .dept-table, .dept-table tbody, .dept-table tr, .dept-table td { display: block; width: auto !important; }
  .dept-table tr { padding: 16px 18px; border-bottom: 1px solid var(--border); }
  .dept-table tr:last-child { border-bottom: none; }
  .dept-table td { padding: 0; border-bottom: none; }
  .dept-col-product { margin-bottom: 12px; }
}

@media (max-width: 480px) {
  .topbar-full-logo { height: 24px; }
  .topbar-full-title h1 { font-size: 16px; }
  .user-pill { display: none; }
  .topbar-full-user { padding-left: 0; border-left: none; }
  .date-filter-trigger, #btnAddWidget, #btnUsers, #btnKpi { padding: 7px 12px; font-size: 12.5px; }
  .date-filter-presets { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* 4 tombol (filter + KPI + kelola akun + tambah widget) gak muat lagi
     kalau semuanya nampilin teks penuh di layar sekecil ini -- yang
     jarang dipencet diciutin jadi ikon doang, tooltip (title=) masih
     ada buat aksesibilitas. */
  #btnUsers .btn-label, #btnAddWidget .btn-label, #btnKpi .btn-label { display: none; }
  #btnUsers, #btnAddWidget, #btnKpi { padding: 8px 10px; }
}