/* Tema gelap dengan aksen kuning. Ganti warna tema cukup di blok :root ini. */
:root {
  --latar: #0a0a0b;
  --panel: #131315;
  --panel-2: #1a1a1d;
  --aksen-rgb: 234, 179, 8;        /* kuning, dipakai untuk latar transparan */
  --garis: rgba(var(--aksen-rgb), 0.30);
  --garis-redup: #26262a;
  --aksen: #eab308;
  --aksen-terang: #fde047;
  --aksen-gelap: #ca8a04;
  --teks-di-aksen: #111111;        /* teks gelap di atas kuning supaya terbaca */
  --teks: #e9e7e2;
  --teks-redup: #8f8c86;
  --hijau: #4ccf7d;
  --merah: #ff6b6b;
  --biru: #6aa8ff;
  --ungu: #b58cff;
  --oranye: #ffa94d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 12.5px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: inherit; text-decoration: none; }
h2 { font-size: 14px; margin: 0 0 10px; }
b, .tebal { font-weight: 600; }

/* --- Tata letak --- */
.tata-letak { display: flex; min-height: 100vh; }
.sidebar {
  width: 190px; flex-shrink: 0; padding: 14px 12px;
  background: linear-gradient(180deg, #121214, #0b0b0c);
  border-right: 1px solid var(--garis);
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh;
}
.utama { flex: 1; min-width: 0; padding: 12px 20px 30px; }

.merek { display: flex; align-items: center; gap: 8px; }
.logo {
  width: 32px; height: 32px; border-radius: 50%; font-size: 12px;
  display: grid; place-items: center; font-weight: 800; color: var(--teks-di-aksen);
  background: radial-gradient(circle at 30% 30%, var(--aksen-terang), var(--aksen-gelap));
  box-shadow: 0 0 14px rgba(var(--aksen-rgb), 0.35);
}
/* Logo gambar: tanpa latar gradasi bawaan, gambar dipotong rapi sesuai kotaknya */
.logo-gambar { width: 40px; height: 40px; background: none; box-shadow: none; object-fit: contain; border-radius: 8px; }
.merek-nama { font-weight: 800; letter-spacing: 0.5px; }
.merek-sub { font-size: 9px; letter-spacing: 1.2px; color: #fff; text-transform: uppercase; }

.menu { display: flex; flex-direction: column; gap: 6px; }
.menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--garis-redup);
  background: var(--panel); color: var(--teks-redup);
}
.menu a:hover { color: var(--teks); border-color: var(--garis); }
.menu a.aktif { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.08); }

.status-sinkron {
  margin-top: auto; font-size: 11px; color: var(--teks-redup);
  padding: 8px 10px; border: 1px solid var(--garis-redup); border-radius: 8px;
}
.titik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.titik.hijau { background: var(--hijau); box-shadow: 0 0 6px var(--hijau); }
.titik.merah { background: var(--merah); }

.atas {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--garis);
}
.atas-judul { font-size: 16px; font-weight: 700; }
.atas-sub { font-size: 11px; color: var(--teks-redup); margin-top: 1px; }
.atas-kanan { display: flex; align-items: center; gap: 8px; }
.atas-kanan form { margin: 0; }
.pengguna { display: inline-flex; align-items: center; gap: 5px; color: var(--aksen-terang); font-weight: 600; font-size: 12px; }
.waktu-segar { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--teks-redup);
  font-variant-numeric: tabular-nums; padding: 4px 8px; border: 1px solid var(--garis-redup); border-radius: 7px; }
.tombol-ikon { display: inline-flex; align-items: center; gap: 6px; }

/* --- Kartu & tombol --- */
.kartu {
  background: var(--panel); border: 1px solid var(--garis);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.tombol {
  display: inline-block; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--garis); background: var(--panel-2); color: var(--aksen-terang);
  font: inherit; font-weight: 600; white-space: nowrap;
}
.tombol:hover { border-color: var(--aksen); }
.tombol-utama { background: linear-gradient(180deg, var(--aksen), var(--aksen-gelap)); color: var(--teks-di-aksen); border-color: transparent; }
.tombol-redup { color: var(--teks-redup); }
.tombol-kecil { padding: 3px 8px; font-size: 11px; }

/* --- Filter --- */
.filter-isi { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; }
.filter label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--teks-redup); }
input, select {
  background: #0d0d0f; color: var(--teks); border: 1px solid var(--garis);
  border-radius: 7px; padding: 5px 8px; font: inherit; color-scheme: dark;
}
input:focus, select:focus { outline: none; border-color: var(--aksen); }
.isian-tanggal { position: relative; display: flex; }
.isian-tanggal input[type="text"] { flex: 1; min-width: 0; padding-right: 28px; }
.pemilih-tanggal { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tombol-kalender { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: none;
  border: 0; padding: 4px; color: var(--teks-redup); cursor: pointer; display: flex; }
.tombol-kalender:hover { color: var(--aksen); }
.filter-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.catatan { font-size: 11px; color: var(--teks-redup); }

/* --- Tab --- */
.tab { display: flex; gap: 6px; margin-bottom: 12px; }
.tab a {
  padding: 5px 11px; border-radius: 7px; border: 1px solid var(--garis-redup);
  background: var(--panel); color: var(--teks-redup);
}
.tab a.aktif { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.1); }
.tab { flex-wrap: wrap; }
.tab a:hover { color: var(--teks); }
.tab-angka {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 8px;
  font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.07);
}
.tab a.tab-terlewat .tab-angka { color: var(--merah); }
.tab a.tab-respons_terlambat .tab-angka { color: var(--oranye); }
.tab a.tab-tidak_dibalas_tengah .tab-angka { color: var(--ungu); }

/* --- Kartu angka --- */
.deret-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.deret-kartu .kartu { margin-bottom: 0; }
.angka-kartu { display: block; transition: border-color 0.15s; }
a.angka-kartu:hover { border-color: var(--aksen); }
.angka-label { font-size: 11px; color: var(--teks-redup); }
.angka { font-size: 22px; font-weight: 800; color: var(--teks); line-height: 1.25; }
.angka-sub { font-size: 11px; color: var(--teks-redup); }
.angka-kartu.jenis-terlewat { border-left: 3px solid var(--merah); }
.angka-kartu.jenis-respons_terlambat { border-left: 3px solid var(--oranye); }
.angka-kartu.jenis-tidak_dibalas_tengah { border-left: 3px solid var(--ungu); }

/* --- Tabel --- */
/* Tabel panjang bergulir di dalam kotaknya sendiri, sehingga judul kolom tetap terlihat (sticky) */
.tabel-bungkus { overflow: auto; max-height: 72vh; border: 1px solid var(--garis-redup); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--teks-redup); background: #101012; padding: 6px 10px; position: sticky; top: 0; z-index: 1;
  box-shadow: inset 0 -1px 0 var(--garis-redup);
}
td { padding: 5px 10px; border-top: 1px solid var(--garis-redup); vertical-align: middle; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
tbody tr:hover { background: rgba(var(--aksen-rgb), 0.06); }
/* Angka dalam kolom rata dengan lebar digit seragam */
td.kanan, th.kanan, .mono { font-variant-numeric: tabular-nums; }
/* Judul kolom yang bisa diklik untuk mengurutkan */
table.bisa-urut th:not(.tanpa-urut) { cursor: pointer; user-select: none; }
table.bisa-urut th:not(.tanpa-urut):hover { color: var(--teks); }
table.bisa-urut th[aria-sort="ascending"]::after { content: " ▲"; color: var(--aksen-terang); }
table.bisa-urut th[aria-sort="descending"]::after { content: " ▼"; color: var(--aksen-terang); }
td a:hover { color: var(--aksen-terang); }
.kanan { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.kosong { text-align: center; color: var(--teks-redup); padding: 18px; }
.redup { color: var(--teks-redup); font-weight: 400; }
.kecil { font-size: 10.5px; }
.hijau { color: var(--hijau); }
.merah { color: var(--merah); }

.kepala-kartu { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kepala-kartu h2 { margin: 0; }
.paginasi { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--teks-redup); }

.lencana {
  display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid currentColor;
}
.lencana.jenis-terlewat { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.lencana.jenis-respons_terlambat { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.jenis-tidak_dibalas_tengah { color: var(--ungu); background: rgba(181, 140, 255, 0.08); }

/* --- Percakapan --- */
.info-chat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin-top: 10px; }
.info-chat > div { display: flex; flex-direction: column; font-size: 12px; }
.info-chat .lebar { grid-column: 1 / -1; }
.daftar-kendala { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }

.transkrip { display: flex; flex-direction: column; gap: 3px; }
.baris-pesan {
  display: grid; grid-template-columns: 60px 190px 1fr; gap: 10px;
  padding: 5px 10px; border-radius: 6px; border-left: 3px solid transparent;
}
.waktu-pesan { font-family: Consolas, monospace; color: var(--teks-redup); font-size: 11px; padding-top: 1px; }
.pengirim { font-weight: 600; font-size: 12px; }
.teks-pesan { word-break: break-word; }
.isi-pesan { white-space: pre-wrap; }  /* hanya isi pesan yang mempertahankan baris baru */
.teks-pesan .lencana, .penanda-mulai { display: inline-block; margin: 0 6px 4px 0; }
.penanda-mulai { font-size: 10.5px; font-weight: 600; opacity: 0.75; }
.penanda-mulai.jenis-terlewat { color: var(--merah); }
.penanda-mulai.jenis-respons_terlambat { color: var(--oranye); }
.penanda-mulai.jenis-tidak_dibalas_tengah { color: var(--ungu); }
.baris-pesan.customer { background: rgba(106, 168, 255, 0.07); border-left-color: var(--biru); }
.baris-pesan.customer .pengirim { color: var(--biru); }
.baris-pesan.agent { background: rgba(var(--aksen-rgb), 0.07); border-left-color: var(--aksen); }
.baris-pesan.agent .pengirim { color: var(--aksen-terang); }
.baris-pesan.sapaan { opacity: 0.6; border-left-color: var(--aksen); }
.baris-pesan.sistem, .baris-pesan.form { color: var(--teks-redup); font-size: 11.5px; font-style: italic; border-left-color: #3a3a40; }

/* --- Dashboard (pemantauan langsung) --- */
.menu-judul { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teks-redup); margin: 6px 4px -2px; }
.peringatan { border-color: rgba(255, 107, 107, 0.5); color: var(--merah); }
.peringatan code { color: var(--aksen-terang); }
.info-segar { font-size: 11px; color: var(--teks-redup); margin-bottom: 8px; }
/* stretch: kedua kartu dalam satu baris setinggi kartu yang paling tinggi */
.dua-kolom { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 12px; align-items: stretch; }
.dua-kolom > .kartu { margin-bottom: 0; }
.dua-kolom { margin-bottom: 12px; }
/* Topik Member mengisi tinggi kartu: baris-barisnya dibagi rata dari atas ke bawah */
.kartu-topik { display: flex; flex-direction: column; }
.kartu-topik .daftar-topik { flex: 1; justify-content: space-evenly; }
tbody tr.baris-lewat { background: rgba(255, 107, 107, 0.07); }
.teks-potong { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oranye { color: var(--oranye); }
.lencana.status-siap { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.status-tidak { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.status-offline { color: var(--teks-redup); }

/* --- Ikon --- */
.ikon { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -3px; }
h2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
h2 > .ikon { color: var(--aksen-terang); }
.angka-label { display: flex; align-items: center; gap: 6px; }
.angka-label .ikon { width: 14px; height: 14px; opacity: 0.8; }

/* --- Topik member (Dashboard): label di atas, batang di bawah --- */
.daftar-topik { display: flex; flex-direction: column; gap: 10px; }
.topik-baris { display: flex; flex-direction: column; gap: 4px; }
.topik-jalur { height: 8px; border-radius: 4px; background: #1e1e22; overflow: hidden; }
.topik-isi { height: 100%; background: var(--aksen); border-radius: 4px; }

/* --- Grafik chat per jam (Dashboard) --- */
.legenda { display: flex; gap: 14px; font-size: 11px; color: var(--teks-redup); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.kunci { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.kunci-masuk { background: #3987e5; }    /* slot kategorikal 1, tervalidasi di latar #131315 */
.kunci-masalah { background: #d95926; }  /* slot kategorikal 2 */
.grafik { margin-top: 4px; }
.grafik-plot { position: relative; height: 180px; margin-left: 40px; }
.garis-bantu { position: absolute; left: 0; right: 0; border-top: 1px solid #26262a; }
.garis-bantu span { position: absolute; left: -40px; width: 34px; text-align: right; transform: translateY(-50%);
  font-size: 10px; color: var(--teks-redup); font-variant-numeric: tabular-nums; }
.grafik-kolom-wadah { position: absolute; inset: 0; display: flex; }
.grafik-kolom { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center;
  border-radius: 6px 6px 0 0; outline: none; }
.grafik-kolom:hover, .grafik-kolom:focus { background: rgba(255, 255, 255, 0.04); }
.batang-pasang { display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.batang { width: 10px; border-radius: 4px 4px 0 0; }
.batang-masuk { background: #3987e5; }
.batang-masalah { background: #d95926; }
.grafik-kolom.masa-depan { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.02) 6px 8px); }
.grafik-kolom .tooltip { display: none; position: absolute; bottom: calc(100% - 12px); left: 50%; transform: translateX(-50%);
  z-index: 5; flex-direction: column; gap: 3px; white-space: nowrap; font-size: 11px; padding: 7px 9px;
  background: var(--panel-2); border: 1px solid var(--garis); border-radius: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.grafik-kolom .tooltip span { display: flex; align-items: center; gap: 5px; color: var(--teks-redup); }
.grafik-kolom .tooltip span b { color: var(--teks); }
.grafik-kolom:hover .tooltip, .grafik-kolom:focus .tooltip { display: flex; }
.grafik-kolom:first-child .tooltip { left: 0; transform: none; }
.grafik-kolom:last-child .tooltip { left: auto; right: 0; transform: none; }
.grafik-sumbu-x { display: flex; margin-left: 40px; margin-top: 4px; border-top: 1px solid #3a3a40; padding-top: 3px; }
.grafik-sumbu-x span { flex: 1; text-align: center; font-size: 10px; color: var(--teks-redup); font-variant-numeric: tabular-nums; }
.grafik-sumbu-x span.berjalan { color: var(--teks); font-weight: 700; }
.tabel-alternatif { margin-top: 8px; font-size: 12px; }
.tabel-alternatif summary { cursor: pointer; color: var(--teks-redup); }
.tabel-alternatif table { margin-top: 6px; }

/* --- Pengaturan --- */
.pesan-form { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pesan-sukses { border-color: rgba(76, 207, 125, 0.5); color: var(--hijau); background: rgba(76, 207, 125, 0.06); }
.pesan-galat { border-color: rgba(255, 107, 107, 0.5); color: var(--merah); background: rgba(255, 107, 107, 0.06); }
.pesan-info { color: var(--teks-redup); }
.grid-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.status-item { border: 1px solid var(--garis-redup); border-radius: 9px; padding: 10px 12px; background: var(--panel-2); }
.status-item.baik { border-left: 3px solid var(--hijau); }
.status-item.buruk { border-left: 3px solid var(--merah); }
.status-judul { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--teks-redup); }
.status-nilai { font-size: 16px; font-weight: 700; margin: 2px 0; }
.status-ket { font-size: 11px; color: var(--teks-redup); line-height: 1.5; word-break: break-word; }
.status-ket code { color: var(--aksen-terang); }
.galat-terakhir { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; font-size: 12px;
  border: 1px solid rgba(255, 107, 107, 0.35); border-radius: 8px; background: rgba(255, 107, 107, 0.05); word-break: break-word; }
.galat-terakhir > .ikon { color: var(--merah); margin-top: 2px; }
h2.sub-bagian { margin-top: 16px; font-size: 13px; }
.lencana.tugas-menunggu { color: var(--teks-redup); }
.lencana.tugas-berjalan { color: var(--biru); background: rgba(106, 168, 255, 0.08); }
.lencana.tugas-selesai { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.tugas-gagal { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.dua-kolom-sama { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dua-kolom-sama > .kartu { margin-bottom: 0; }
.form-pengaturan { display: flex; flex-direction: column; gap: 10px; }
.form-pengaturan .catatan { margin: 0; line-height: 1.5; }
.isian-angka { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--garis-redup); }
.isian-angka > span:first-child { display: flex; flex-direction: column; font-weight: 600; }
.isian-angka small { font-weight: 400; font-size: 11px; }
.isian-satuan { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--teks-redup); white-space: nowrap; }
.isian-satuan input { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.form-tombol { display: flex; gap: 8px; flex-wrap: wrap; }
.tabel-shift td { border-top: 0; padding: 4px 6px 4px 0; }
.tabel-shift th { position: static; background: none; box-shadow: none; padding: 0 6px 2px 0; }
.tabel-shift input { width: 100%; }
.baris-tanggal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.baris-tanggal label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--teks-redup); }

/* --- Akun --- */
.lencana.peran-master { color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.12); font-size: 10px; padding: 0 5px; }
.dua-kolom-akun { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dua-kolom-akun > .kartu { margin-bottom: 0; }
.isian-blok { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--teks-redup); }
.isian-blok small { font-weight: 400; }
.isian-blok input { font-weight: 400; color: var(--teks); }
.info-master { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.info-master > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.info-master code, .form-pengaturan code { color: var(--aksen-terang); }
.kartu-akun-saya { max-width: 520px; }
.aksi-akun { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.aksi-akun form { display: flex; gap: 6px; margin: 0; }
.ubah-akun summary { list-style: none; }
.ubah-akun summary::-webkit-details-marker { display: none; }
.ubah-akun[open] summary { border-color: var(--aksen); }
.form-ubah-akun { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px; min-width: 240px;
  border: 1px solid var(--garis); border-radius: 8px; background: var(--panel-2); }
.tombol-bahaya { color: var(--merah); border-color: rgba(255, 107, 107, 0.35); }
.tombol-bahaya:hover { border-color: var(--merah); }
tbody tr.baris-redup td { opacity: 0.6; }

/* --- Pantau Agen --- */
.info-shift { font-size: 12px; margin-bottom: 10px; padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--garis); background: rgba(var(--aksen-rgb), 0.06); }
.info-shift-sebaris { margin-bottom: 0; padding: 4px 10px; }
.tombol-aktif { border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.15); }
.grid-agen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 12px; }
.grid-agen .kartu { margin-bottom: 0; }
.kartu-agen { display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s; }
.kartu-agen:hover { border-color: var(--aksen); }
.kartu-perhatian { border-color: var(--merah); box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25) inset; }
.kartu-offline { opacity: 0.55; }
.kartu-agen-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--garis-redup); }
.kartu-agen-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
.kartu-agen-baris > .redup:first-child { width: 58px; font-size: 11px; }
.kepuasan-kecil { margin-left: auto; }

.garis-waktu { position: relative; height: 22px; border-radius: 6px; background: #0d0d0f;
  border: 1px solid var(--garis-redup); overflow: hidden; }
.segmen { position: absolute; top: 0; bottom: 0; min-width: 1px; }
.segmen-accepting_chats { background: var(--hijau); }
.segmen-not_accepting_chats { background: var(--oranye); }
.segmen-offline { background: #3a3a40; }
.skala-waktu { display: flex; justify-content: space-between; font-size: 10px; color: var(--teks-redup); margin-top: 3px; }
.ringkas-status { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; }

/* --- Login --- */
.halaman-login {
  /* flex (bukan grid) supaya teks panjang tidak melebarkan kolom melebihi layar HP */
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  /* cahaya merah lembut di belakang logo + pola titik halus */
  background:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(var(--aksen-rgb), 0.16), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--latar);
}
.login-wadah { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.login-merek { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.login-merek .logo-gambar { width: 92px; height: 92px; border-radius: 20px;
  filter: drop-shadow(0 8px 28px rgba(var(--aksen-rgb), 0.45)); }
.login-merek .logo { width: 72px; height: 72px; font-size: 22px; }  /* cadangan "LC" kalau logo belum ada */
.login-merek h1 { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: 3px; }
.login-merek .merek-sub { font-size: 10px; letter-spacing: 2.5px; }

.kotak-login { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.login-sapa { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.login-sapa b { font-size: 15px; }
.login-sapa span { font-size: 12px; color: var(--teks-redup); }
.isian { display: flex; flex-direction: column; gap: 5px; }
.isian label { font-size: 11px; font-weight: 600; color: var(--teks-redup); }
.isian-ikon { position: relative; display: flex; align-items: center; }
.isian-ikon > .ikon { position: absolute; left: 11px; color: var(--teks-redup); pointer-events: none; }
.isian-ikon input { width: 100%; padding: 10px 38px 10px 36px; font-size: 13px; border-radius: 9px; transition: border-color 0.15s, box-shadow 0.15s; }
.isian-ikon input:focus { box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), 0.18); }
.isian-ikon:focus-within > .ikon { color: var(--aksen-terang); }
.tombol-mata { position: absolute; right: 6px; display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 6px; background: none; color: var(--teks-redup); cursor: pointer; }
.tombol-mata:hover { color: var(--teks); background: rgba(255, 255, 255, 0.06); }
.peringatan-caps { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--oranye); }
.peringatan-caps[hidden] { display: none; }
.tombol-login { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 13px; margin-top: 4px; }
.tombol-login:disabled { opacity: 0.7; cursor: wait; }
.login-kaki { font-size: 11px; color: var(--teks-redup); text-align: center; }
.galat { display: flex; align-items: center; gap: 7px; color: var(--merah); font-size: 12px; padding: 9px 11px;
  border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 9px; background: rgba(255, 107, 107, 0.08); }

@media (max-width: 1100px) {
  .filter-isi { grid-template-columns: repeat(2, 1fr); }
  .dua-kolom { grid-template-columns: 1fr; }
  .info-chat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tata-letak { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; }
  .utama { padding: 14px 16px; }
  .baris-pesan { grid-template-columns: 1fr; gap: 2px; }
}