/* Kantor Virtual — pusat komando: latar biru-hitam pekat, panel kaca, aksen neon */
:root {
  --bg: #070b14;
  --panel: rgba(18, 26, 44, 0.62);
  --panel-solid: #121a2c;
  --panel2: rgba(10, 15, 28, 0.55);
  --garis: rgba(93, 138, 218, 0.22);
  --garis-kuat: rgba(93, 138, 218, 0.45);
  --teks: #dbe4f4;
  --redup: #7e8bab;
  --neon: #4da3ff;
  --hijau: #3ee08a;
  --kuning: #ffd66e;
  --abu: #8b94a8;
  --ungu: #b89aff;
  --merah: #ff7a7a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(43, 88, 173, 0.22), transparent 60%),
    radial-gradient(900px 460px at -10% 110%, rgba(38, 122, 96, 0.13), transparent 55%),
    var(--bg);
  color: var(--teks);
  font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 15px; line-height: 1.5;
  min-height: 100svh;
}

/* ---------- login ---------- */
.hal-login { display: grid; place-items: center; min-height: 100svh; }
.kotak-login {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--garis); border-radius: 16px;
  padding: 2.2rem 2.4rem; width: min(92vw, 370px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.kotak-login h1 { margin: 0 0 0.3rem; font-size: 1.28rem; letter-spacing: 0.01em; }
.kotak-login h1::before { content: "◈ "; color: var(--neon); }
.kotak-login .sub { color: var(--redup); margin: 0 0 1.5rem; font-size: 0.88rem; }
.kotak-login label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.86rem; color: var(--redup); }
.kotak-login input {
  width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--garis);
  background: rgba(7, 11, 20, 0.7); color: var(--teks); padding: 0 0.95rem; font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kotak-login input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(77,163,255,0.18); }
.kotak-login button {
  width: 100%; min-height: 48px; margin-top: 1.1rem; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #2f7ce8, #4da3ff); color: #06101f; font-weight: 800; font-size: 0.98rem; cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.kotak-login button:hover { filter: brightness(1.12); }
.kotak-login button:active { transform: scale(0.985); }
.pesan { color: var(--merah); min-height: 1.2em; margin: 0.7rem 0 0; font-size: 0.86rem; }

/* ---------- bar atas: kartu statistik ---------- */
.bar-atas {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; background: var(--panel2); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 800; white-space: nowrap; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.5rem; }
.brand .mark { color: var(--neon); }
.lencana-live {
  display: inline-flex; align-items: center; gap: 0.38rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  border-radius: 999px; padding: 0.22rem 0.62rem;
  background: rgba(62, 224, 138, 0.14); color: var(--hijau); border: 1px solid rgba(62,224,138,0.4);
}
.lencana-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hijau); }
.lencana-live.jalan .dot { animation: nadi 1.6s ease-in-out infinite; }
.lencana-live.mati { background: rgba(139,148,168,0.12); color: var(--abu); border-color: rgba(139,148,168,0.3); }
.lencana-live.mati .dot { background: var(--abu); animation: none; }
@keyframes nadi { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(62,224,138,0.5);} 50% { opacity: 0.45; box-shadow: 0 0 0 5px rgba(62,224,138,0);} }

.kartu-stat { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: 1; justify-content: flex-end; align-items: center; }
.stat {
  background: var(--panel); border: 1px solid var(--garis); border-radius: 12px;
  padding: 0.42rem 0.8rem; min-width: 96px;
  display: flex; flex-direction: column; gap: 0.05rem;
  transition: border-color 0.2s, background 0.2s;
}
.stat:hover { border-color: var(--garis-kuat); }
.stat .lbl { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--redup); white-space: nowrap; }
.stat .angka { font-family: var(--mono); font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: var(--teks); }
.stat .angka.biru { color: var(--neon); }
.stat .angka.hijau { color: var(--hijau); }
.stat .angka.kuning { color: var(--kuning); }
.stat .angka.jam { font-size: 0.95rem; }

#tombol-keluar {
  border: 1px solid var(--garis); background: transparent; color: var(--redup);
  border-radius: 9px; min-height: 40px; padding: 0 0.95rem; cursor: pointer; font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}
#tombol-keluar:hover { border-color: var(--merah); color: var(--merah); }

/* ---------- 3 kolom ---------- */
.tiga-kolom {
  display: grid; gap: 0.9rem;
  grid-template-columns: 300px 1fr 320px;
  padding: 0.9rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 1150px) {
  .tiga-kolom { grid-template-columns: 1fr 1fr; }
  .kolom.tengah { order: -1; grid-column: 1 / -1; }
}
@media (max-width: 740px) {
  .tiga-kolom { grid-template-columns: 1fr; }
  .kolom.tengah { order: -1; }
  .kolom { min-height: auto; max-height: none; }
}
.kolom {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--garis); border-radius: 16px;
  padding: 1rem; min-height: 0; max-height: none; overflow: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
}
.kolom h2 {
  font-size: 0.8rem; margin: 0 0 0.85rem; color: var(--redup);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
}

/* tab kanan */
.tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.tab {
  flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid var(--garis);
  background: transparent; color: var(--redup); font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tab.aktif { background: rgba(77,163,255,0.16); color: var(--neon); border-color: var(--garis-kuat); }

/* ---------- aktivitas ---------- */
.chip-wrap { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.chip {
  border: 1px solid var(--garis); background: transparent; color: var(--redup);
  border-radius: 999px; min-height: 34px; padding: 0 0.9rem; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--garis-kuat); color: var(--teks); }
.chip.aktif { background: rgba(77,163,255,0.16); color: var(--neon); border-color: var(--garis-kuat); font-weight: 800; }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.65rem;
  padding: 0.6rem 0.35rem; border-bottom: 1px solid rgba(93,138,218,0.1); font-size: 0.88rem;
}
.hitung-feed { font-size: 0.72rem; color: var(--redup); font-family: var(--mono); margin-bottom: 0.5rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 0.74rem; color: #0a1220;
  align-self: start;
}
.avatar.av0 { background: var(--neon); }
.avatar.av1 { background: var(--hijau); }
.avatar.av2 { background: var(--ungu); }
.avatar.av3 { background: var(--kuning); }
.avatar.av4 { background: #ffa66e; }
.avatar.av5 { background: #7ee0d2; }
.avatar.avatar-sistem { background: rgba(139,148,168,0.25); color: var(--abu); }
.feed .waktu { color: var(--redup); font-size: 0.7rem; font-family: var(--mono); grid-column: 2; }
.feed li.baru { animation: masuk 0.6s ease-out; }
@keyframes masuk { from { background: rgba(77,163,255,0.16); } to { background: transparent; } }

/* kotak kirim pesan */
.form-pesan { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem; margin-top: 0.9rem; }
.form-pesan input {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--garis);
  background: rgba(7,11,20,0.7); color: var(--teks); padding: 0 0.85rem; font-size: 0.9rem;
  transition: border-color 0.2s;
}
.form-pesan input:focus { outline: none; border-color: var(--neon); }
.form-pesan button {
  min-height: 44px; min-width: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(77,163,255,0.16); color: var(--neon); font-weight: 800; font-size: 0.9rem;
  border: 1px solid var(--garis-kuat);
  transition: background 0.2s, color 0.2s;
}
.form-pesan button:hover { background: var(--neon); color: #06101f; }
.form-pesan .ok { grid-column: 1 / -1; font-size: 0.74rem; color: var(--hijau); font-family: var(--mono); }

/* ---------- denah ---------- */
.denah { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 560px) { .denah { grid-template-columns: 1fr; } }
.ruangan {
  background: var(--panel2); border: 1px dashed var(--garis-kuat); border-radius: 14px;
  padding: 0.8rem; min-height: 160px; transition: border-color 0.2s;
}
.ruangan:hover { border-color: var(--neon); }
.ruangan h3 { margin: 0 0 0.65rem; font-size: 0.72rem; color: var(--redup); text-transform: uppercase; letter-spacing: 0.12em; }
.kartu-agent {
  background: rgba(7, 12, 22, 0.72); border: 1px solid var(--garis); border-left: 3px solid var(--hijau);
  border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.86rem;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.kartu-agent:hover { transform: translateX(2px); }
.kartu-agent .nm { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.kartu-agent .pr { color: var(--redup); font-size: 0.74rem; }
.kartu-agent.k-kerja { border-left-color: var(--hijau); }
.kartu-agent.k-santai { border-left-color: var(--kuning); }
.kartu-agent.k-tidur { border-left-color: var(--abu); }
.kartu-agent.k-rapat { border-left-color: var(--ungu); }

/* ---------- backlog ---------- */
.form-task { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.form-task select, .form-task input, .form-task button {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--garis);
  background: rgba(7,11,20,0.7); color: var(--teks); padding: 0 0.75rem; font-size: 0.9rem;
}
.form-task button {
  background: linear-gradient(135deg, #2f7ce8, #4da3ff); color: #06101f; font-weight: 800; border: 0; cursor: pointer;
  transition: filter 0.2s;
}
.form-task button:hover { filter: brightness(1.12); }
.grup-task h3 { font-size: 0.72rem; color: var(--redup); margin: 0.9rem 0 0.45rem; text-transform: uppercase; letter-spacing: 0.1em; }
.task {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(7, 12, 22, 0.6); border: 1px solid var(--garis); border-radius: 10px;
  padding: 0.6rem 0.75rem; margin-bottom: 0.45rem; font-size: 0.87rem;
  transition: border-color 0.2s, background 0.2s;
}
.task:hover { border-color: var(--garis-kuat); }
.task .judul { flex: 1; }
.task .pj { color: var(--redup); font-size: 0.72rem; font-family: var(--mono); }
.task.selesai .judul { text-decoration: line-through; opacity: 0.55; }
.task.gagal .judul { color: var(--merah); }
.p1 { color: var(--merah); font-weight: 800; }
.p2 { color: var(--kuning); }
.p3 { color: var(--redup); }
.task select, .bar-bawah select {
  min-height: 34px; border-radius: 8px; background: rgba(7,11,20,0.7); color: var(--teks);
  border: 1px solid var(--garis); font-size: 0.76rem; padding: 0 0.35rem; cursor: pointer;
}
.task select:focus, .bar-bawah select:focus { outline: none; border-color: var(--neon); }

/* catatan */
.form-catatan { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.form-catatan textarea {
  min-height: 84px; border-radius: 10px; border: 1px solid var(--garis);
  background: rgba(7,11,20,0.7); color: var(--teks); padding: 0.6rem 0.8rem; font-size: 0.9rem; resize: vertical;
  transition: border-color 0.2s;
}
.form-catatan textarea:focus { outline: none; border-color: var(--neon); }
.form-catatan button {
  min-height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #2f7ce8, #4da3ff); color: #06101f; font-weight: 800;
  transition: filter 0.2s;
}
.form-catatan button:hover { filter: brightness(1.12); }
.catatan-item {
  background: rgba(7,12,22,0.6); border: 1px solid var(--garis); border-radius: 10px;
  padding: 0.65rem 0.8rem; margin-bottom: 0.5rem; font-size: 0.88rem;
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
}
.catatan-item .isi { white-space: pre-wrap; word-break: break-word; }
.catatan-item .meta { font-family: var(--mono); font-size: 0.68rem; color: var(--redup); grid-column: 1 / -1; }
.catatan-item .hapus {
  border: 0; background: transparent; color: var(--abu); cursor: pointer; font-size: 0.8rem; min-height: 32px;
  transition: color 0.2s;
}
.catatan-item .hapus:hover { color: var(--merah); }

/* ---------- bar bawah ---------- */
.bar-bawah {
  display: flex; gap: 0.55rem; overflow-x: auto; padding: 0.4rem 0.8rem;
  background: var(--panel2); backdrop-filter: blur(12px); border-top: 1px solid var(--garis);
  position: sticky; bottom: 0; z-index: 5;
}
.bar-bawah .kartu-agent { min-width: 212px; margin: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; }
.bar-bawah .identitas { display: grid; gap: 0.05rem; }
.lencana {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.14rem 0.55rem;
}
.l-kerja { background: rgba(62,224,138,0.15); color: var(--hijau); }
.l-santai { background: rgba(255,214,110,0.15); color: var(--kuning); }
.l-tidur { background: rgba(139,148,168,0.16); color: var(--abu); }
.l-rapat { background: rgba(184,154,255,0.16); color: var(--ungu); }

/* transisi status agent (halus, 200ms) */
.kartu-agent, .lencana, .status-dot { transition: all 0.2s ease-out; }

/* status dot */
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.1rem; }
.st-kerja { background: var(--hijau); box-shadow: 0 0 8px rgba(62,224,138,0.6); }
.st-santai { background: var(--kuning); box-shadow: 0 0 8px rgba(255,214,110,0.5); }
.st-tidur { background: var(--abu); }
.st-rapat { background: var(--ungu); box-shadow: 0 0 8px rgba(184,154,255,0.5); }

@media (max-width: 740px) {
  .bar-atas { gap: 0.45rem; padding: 0.5rem 0.6rem; }
  .brand { font-size: 0.82rem; }
  .lencana-live { font-size: 0.62rem; padding: 0.16rem 0.4rem; }
  #tombol-keluar { min-height: 34px; padding: 0 0.6rem; font-size: 0.76rem; }
  .kartu-stat { order: 10; flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
  .stat .btn-hp { display: none; }
  .stat { min-width: 0; padding: 0.24rem 0.45rem; border-radius: 9px; }
  .stat .lbl { font-size: 0.5rem; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat .angka { font-size: 0.74rem; font-weight: 700; }
}