/* Dashboard operator Janévalla VoIP.

   Tokennya disalin apa adanya dari bo/static/bo.css di proyek janevalla-web,
   bukan dikira-kira: DM Sans, brand hsl(244 84% 60%), radius 10px, kartu putih
   di atas latar 97.3%, bayangan dua lapis yang lembut. Staf yang sama memakai
   kedua panel bergantian, jadi keduanya harus terasa satu keluarga.

   Halaman tamu (call.html) sengaja TIDAK memakai berkas ini: tamu bukan staf,
   dan tampilannya menyusul merek hotel, bukan merek back office. */
:root {
  --background: 0 0% 97.3%;
  --foreground: 0 0% 6%;
  --card: 0 0% 100%;
  --border: 0 0% 89%;
  --muted: 0 0% 94.9%;
  --muted-foreground: 0 0% 42%;   /* 5.0:1 di halaman, 5.3:1 di kartu (WCAG AA) */
  --brand: 244 84% 60%;           /* putih di atasnya 6.2:1 */
  --brand-lembut: 244 84% 96%;
  --destructive: 0 72% 51%;
  --sukses: 152 60% 36%;
  --perhatian: 38 92% 50%;
  --radius: .625rem;
  --sisi-lebar: 250px;
  --bayang: 0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  --bayang-naik: 0 2px 4px rgba(0,0,0,.06), 0 8px 16px rgba(0,0,0,.05);
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Nama lama yang masih dipakai beberapa style sebaris di admin.html.
     Dipetakan ke token di atas supaya tidak ada warna yatim piatu. */
  --text-primary: hsl(var(--foreground));
  --text-secondary: hsl(var(--muted-foreground));
  --text-muted: hsl(var(--muted-foreground));
  --text-light: hsl(var(--muted-foreground));
  --apple-blue: hsl(var(--brand));
  --apple-red: hsl(var(--destructive));
  --apple-orange: hsl(var(--perhatian));
  --apple-gold: hsl(var(--brand));
  --glass-border-subtle: hsl(var(--border));
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--brand)); text-decoration: none; }
h1, h2, h3 { letter-spacing: -.01em; margin: 0; }

/* Satu aturan fokus untuk semua: tanpa ini papan ketik kehilangan jejak di
   tengah tabel yang panjang. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--brand) / .55); outline-offset: 2px; border-radius: 6px;
}

/* ------------------------------------------------------------ kendali --- */
.apple-btn-primary, .apple-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px); background: hsl(var(--card));
  color: hsl(var(--foreground)); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.apple-btn-secondary:hover { background: hsl(var(--muted)); }
.apple-btn-primary {
  background: hsl(var(--brand)); border-color: hsl(var(--brand));
  color: #fff; font-weight: 700;
}
.apple-btn-primary:hover { background: hsl(244 84% 54%); }
button[disabled], .apple-btn-primary[disabled] { opacity: .5; cursor: default; }

.apple-input, input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; padding: 8px 11px; font: inherit; font-weight: 400;
  color: hsl(var(--foreground)); background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
}
.apple-input:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid hsl(var(--brand) / .45); outline-offset: 1px;
  border-color: hsl(var(--brand));
}

.apple-glass-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); box-shadow: var(--bayang);
}

/* Varian tombol. Merah dan jingga dipakai sehemat mungkin: kalau semua tombol
   berwarna, yang betul-betul berbahaya tidak lagi menonjol. */
.tbl-bahaya {
  background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: #fff;
}
.tbl-bahaya:hover { background: hsl(0 72% 45%); }
.tbl-perhatian { color: hsl(28 80% 32%); border-color: hsl(var(--perhatian) / .45); }
.tbl-perhatian:hover { background: hsl(var(--perhatian) / .1); }

/* Formulir mengikuti kebiasaan BO: label membungkus medannya, jadi seluruh
   teks label ikut bisa diklik dan tidak perlu for/id yang cocok-cocokan. */
label { display: block; margin-bottom: 13px; font-size: 12.5px; font-weight: 500; }
label > input, label > select, label > textarea {
  width: 100%; margin-top: 5px; font-weight: 400;
}
.label-centang {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 18px; font-size: 13px; cursor: pointer;
}
.label-centang input { width: auto; margin: 0; }
.bantuan { margin: -8px 0 14px; }
.lirih { color: hsl(var(--muted-foreground)); font-size: 13px; }
.panel-judul { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.panel-judul.rapat { margin-bottom: 4px; }
.sempit { max-width: 640px; }
.tengah { text-align: center; }
.tautan-kotak {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px;
  background: hsl(var(--muted)); font-size: 11px; word-break: break-all;
}
.tautan-kotak a { color: hsl(var(--brand)); }
.incoming-wa { font-size: 13px; color: hsl(var(--sukses)); margin-bottom: 16px; }
.galat { color: hsl(var(--destructive)); font-size: 13px; margin: 0; }

#passkey-list { margin-bottom: 14px; }
.passkey-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid hsl(var(--border));
}
.passkey-baris:last-child { border-bottom: 0; }
.passkey-nama { font-size: 14px; font-weight: 500; }

/* ---------------------------------------------------------- kerangka --- */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sisi-lebar); flex: 0 0 var(--sisi-lebar);
  background: hsl(var(--card)); border-right: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-header { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.brand-mark {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  background: hsl(var(--brand)); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.brand-mark.besar { width: 44px; height: 44px; border-radius: 12px; font-size: 21px; }
.apple-btn-primary.lebar, .apple-btn-secondary.lebar { width: 100%; padding: 10px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-title { font-size: 14px; font-weight: 700; }
.brand-subtitle { font-size: 13px; color: hsl(var(--muted-foreground)); }

.operator-profile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 8px;
  margin: 0 10px 10px; padding: 9px 11px;
  background: hsl(var(--muted)); border-radius: calc(var(--radius) - 2px);
}
/* Baris alasan: hanya ada saat softphone sedang bermasalah. */
.op-detail {
  flex: 1 1 100%; margin: 0; font-size: 11.5px; line-height: 1.4;
  color: hsl(var(--destructive));
}
.op-detail:empty { display: none; }
.operator-info { display: flex; flex-direction: column; min-width: 0; }
.op-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-ext { font-size: 12px; color: hsl(var(--muted-foreground)); }
.status-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: hsl(var(--sukses) / .14); color: hsl(var(--sukses));
}
.status-badge.offline { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.status-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor;
}

.nav-menu { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 1px; border: 0; background: none;
  border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground));
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.nav-item:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--muted)); color: hsl(var(--foreground)); font-weight: 700; }
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }
.nav-item.active svg { color: hsl(var(--brand)); }
.nav-item span:not(.badge-count) { flex: 1; }
.badge-count {
  flex: none; min-width: 19px; padding: 1px 6px; border-radius: 999px;
  background: hsl(var(--destructive)); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center;
}

.sidebar-footer { padding: 10px; border-top: 1px solid hsl(var(--border)); }
.btn-signout {
  width: 100%; padding: 9px; border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px); background: hsl(var(--card));
  color: hsl(var(--muted-foreground)); font: inherit; font-size: 13px; cursor: pointer;
}
.btn-signout:hover {
  background: hsl(var(--destructive) / .08); color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / .4);
}

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; background: hsl(var(--background) / .88);
  backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border));
}
.page-title { font-size: 18px; font-weight: 700; flex: 1; }
.top-actions { display: flex; gap: 8px; }
.content-body { padding: 22px 24px 72px; max-width: 1180px; width: 100%; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Tombol menu, hanya muncul di layar sempit saat bilah sisi tersembunyi. */
.btn-menu { display: none; }

/* ------------------------------------------------------ antrean & call --- */
/* Dua bilah ini normalnya tidak ada. Dimunculkan oleh admin-app.js lewat
   style.display, jadi default-nya tetap none di sini. */
.queue-alert-card, .active-call-strip { display: none; }

.queue-alert-card {
  align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 13px 16px; margin-bottom: 16px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--perhatian));
  border-radius: var(--radius); box-shadow: var(--bayang);
}
.queue-alert-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.queue-alert-badge {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: hsl(var(--perhatian) / .16); color: hsl(28 80% 32%);
}
.queue-alert-text { font-size: 12.5px; color: hsl(var(--muted-foreground)); }

.active-call-strip {
  flex-direction: column; gap: 14px; padding: 16px 18px; margin-bottom: 16px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--sukses));
  border-radius: var(--radius); box-shadow: var(--bayang);
}
.active-call-info {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.active-call-caller { font-size: 15px; font-weight: 700; }
.active-call-timer {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: hsl(var(--sukses));
}
.active-call-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.active-call-actions .search-input { flex: 1 1 220px; }

/* ------------------------------------------------------------- angka --- */
/* Grid, bukan flex: dengan flex kartu terakhir melar sendirian satu baris
   penuh begitu teksnya lebih panjang daripada sebuah angka. */
.stats-row {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat-card { padding: 13px 15px; }
.stat-label { font-size: 12px; color: hsl(var(--muted-foreground)); }
.stat-value { font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
/* Kartu yang isinya kalimat, bukan angka: ukuran angka membuatnya pecah
   jadi tiga baris dan menenggelamkan tiga kartu di sebelahnya. */
.stat-value-teks { font-size: 14px; font-weight: 500; color: hsl(var(--sukses)); }

/* ------------------------------------------------------------ tabel ---- */
.table-card { padding: 18px; margin-bottom: 16px; }
.table-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.table-title { font-size: 14px; font-weight: 700; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.search-input { min-width: 180px; }

/* Tabelnya lebar dan tidak bisa dipendekkan tanpa menyembunyikan data, jadi
   yang digulir adalah tabelnya sendiri, bukan seluruh halaman. */
.table-card { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); font-weight: 500;
  padding: 0 10px 8px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap;
}
.data-table td { padding: 10px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: hsl(var(--muted) / .6); }
.empty-table-state {
  text-align: center; padding: 26px 10px; color: hsl(var(--muted-foreground)); font-size: 13px;
}
.wa-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: hsl(var(--sukses) / .14); color: hsl(var(--sukses));
}
.wa-badge:hover { background: hsl(var(--sukses) / .22); }

/* Lencana status di dalam tabel, dipasang oleh admin-app.js. */
.lencana {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.lencana-sukses { background: hsl(var(--sukses) / .14); color: hsl(var(--sukses)); }
.lencana-perhatian { background: hsl(var(--perhatian) / .18); color: hsl(28 80% 32%); }
.lencana-gagal { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.lencana-diam { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ------------------------------------------------------------ dialog --- */
.modal-backdrop, .incoming-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: hsl(0 0% 6% / .45); padding: 20px;
  align-items: center; justify-content: center;
}
.modal-dialog {
  width: min(480px, 100%); max-height: 88vh; overflow-y: auto;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 14px; box-shadow: var(--bayang-naik);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid hsl(var(--border));
}
.modal-title { font-size: 15px; font-weight: 700; }
.btn-close-modal {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  color: hsl(var(--muted-foreground)); font-size: 22px; line-height: 1;
}
.btn-close-modal:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.modal-body { padding: 18px; }
.modal-footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid hsl(var(--border));
}
.qr-preview-box {
  display: inline-block; padding: 10px; margin-bottom: 12px; background: #fff;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}
.qr-preview-box svg, .qr-preview-box canvas, .qr-preview-box img {
  display: block; width: 210px; height: 210px;
}

/* Panggilan masuk. Satu-satunya tempat yang boleh berteriak: resepsionis
   mungkin sedang melihat ke arah lain. */
.incoming-card {
  width: min(380px, 100%); padding: 28px 24px; text-align: center;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 16px; box-shadow: var(--bayang-naik);
}
.incoming-tag {
  display: inline-block; padding: 3px 11px; margin-bottom: 14px; border-radius: 999px;
  background: hsl(var(--brand-lembut)); color: hsl(var(--brand));
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.incoming-caller-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.incoming-dept-badge { font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 18px; }
.incoming-actions { display: flex; gap: 10px; }
.btn-answer, .btn-reject {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 16px; border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-answer { background: hsl(var(--sukses)); color: #fff; }
.btn-answer:hover { background: hsl(152 60% 30%); }
.btn-reject {
  background: hsl(var(--card)); color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / .4);
}
.btn-reject:hover { background: hsl(var(--destructive) / .08); }

/* ------------------------------------------------------------- masuk --- */
.login-container {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
}
.login-card {
  width: min(370px, 100%); padding: 30px 26px 24px; text-align: center;
  border-radius: 14px; box-shadow: var(--bayang-naik);
}
.login-header { margin-bottom: 22px; }
.login-header .brand-mark { margin: 0 auto 14px; }
.login-title { font-size: 20px; font-weight: 700; margin: 0; }
.login-desc { color: hsl(var(--muted-foreground)); font-size: 13px; margin: 4px 0 0; }
.form-group { margin-bottom: 13px; text-align: left; }
.form-label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 500; }
.form-input { width: 100%; }
.error-msg {
  display: none; margin-bottom: 14px; padding: 10px 13px; text-align: left;
  background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .3);
  border-radius: calc(var(--radius) - 2px); color: hsl(var(--destructive)); font-size: 13px;
}
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: hsl(var(--border));
}
.login-divider {
  font-size: 11px; color: hsl(var(--muted-foreground));
  text-transform: uppercase; letter-spacing: .04em;
}

/* ------------------------------------------------------------ sempit --- */
@media (max-width: 880px) {
  .sidebar {
    position: fixed; z-index: 60; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--bayang-naik);
  }
  .sidebar.buka { transform: none; }
  .btn-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; font-size: 17px;
  }
  /* Bilah atas memuat empat hal dan lebar layarnya 375px. Dibiarkan satu baris
     ia mendorong halaman sampai bisa digeser ke samping, jadi aksinya turun ke
     barisnya sendiri. */
  .top-bar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .page-title { font-size: 16px; min-width: 0; }
  .top-actions { flex: 1 1 100%; }
  .content-body { padding: 16px 14px 60px; }
  .table-card { padding: 14px; }

  /* Jempol, bukan kursor: tiap kendali diberi tinggi sentuh penuh dan jarak
     yang cukup supaya tidak saling serempet. */
  .apple-btn-primary, .apple-btn-secondary, .btn-signout, .btn-close-modal {
    min-height: 44px;
  }
  .top-actions { gap: 10px; }
  .top-actions .apple-btn-primary, .top-actions .apple-btn-secondary { flex: 1 1 auto; }
  .nav-item { padding: 12px 10px; }
  .active-call-actions > * { flex: 1 1 100%; }
  .incoming-actions { flex-direction: column; }
}