/* ============================================================
   muhsinin — DASHBOARD THEME: Hitam · Putih · Emas
   Modern Futuristik Islami
   ============================================================ */
:root {
  --bg:       #070707;
  --bg2:      #0f0f0f;
  --bg3:      #161616;
  --bg4:      #1e1e1e;
  --border:   #252525;
  --border2:  rgba(212,175,55,.18);
  --text:     #f5f5f5;
  --text2:    #888;
  --text3:    #555;

  --gold:     #D4AF37;
  --gold2:    #F0C040;
  --gold3:    #8B6B14;
  --gold-glow: rgba(212,175,55,.35);
  --gold-bg:  rgba(212,175,55,.08);
  --gold-bg2: rgba(212,175,55,.15);

  --green:    #00C566;
  --green-glow: rgba(0,197,102,.3);
  --red:      #FF3B3B;
  --red-glow: rgba(255,59,59,.3);
  --blue:     #4A9EFF;
  --purple:   #9B59B6;
  --yellow:   var(--gold);

  --sidebar-w: 220px;

  /* Geometric line pattern for Islamic feel */
  --geo-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23D4AF37' stroke-width='.3' opacity='.06'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30Z M15 15 L45 15 L45 45 L15 45Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ===== SIDEBAR (hidden — diganti bottom nav) ===== */
.sidebar, .sidebar-overlay { display: none !important; }

/* (kept for compatibility) */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width .25s;
  z-index: 100;
  position: relative;
}
/* Gold top accent line */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .sidebar-nav span,
.sidebar.collapsed .sidebar-footer span,
.sidebar.collapsed .logo span { display: none; }
.sidebar.collapsed .logo { justify-content: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 12px; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 14px;
  border-bottom: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.logo i { font-size: 1.4rem; color: var(--gold); filter: drop-shadow(0 0 8px var(--gold-glow)); }
.logo strong { color: var(--text); font-weight: 700; letter-spacing: .3px; }
.logo span { color: var(--gold); }

.sidebar-toggle {
  background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: 1rem; padding: 4px;
}
.sidebar-toggle:hover { color: var(--gold); }

.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 18px;
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--text2); text-decoration: none;
  font-size: .87rem; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: all .15s; letter-spacing: .2px;
}
.nav-item:hover { background: var(--gold-bg); color: var(--text); }
.nav-item.active {
  background: var(--gold-bg);
  color: var(--gold);
  border-left-color: var(--gold);
}
.nav-item i { width: 18px; text-align: center; }

.sidebar-footer { padding: 14px; border-top: 1px solid var(--border); }
.server-status { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text2); }

/* ===== MAIN ===== */
.main { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; width: 100%; }

/* Panels container — like jemaah's .app-content */
.main-panels { flex: 1; position: relative; overflow: hidden; min-height: 0; }

/* ===== TOPBAR ===== */
.topbar {
  height: 56px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; flex-shrink: 0;
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-left h1 { font-size: 1rem; font-weight: 600; color: var(--text); }
.topbar-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: .9rem; font-weight: 600; color: var(--gold);
  white-space: nowrap;
}
.topbar-logo i { font-size: 1.2rem; filter: drop-shadow(0 0 6px var(--gold-glow)); }
.topbar-logo strong { color: var(--text); font-weight: 700; }
.topbar-back {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--gold); width: 34px; height: 34px; border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0; transition: background .15s;
}
.topbar-back:hover { background: var(--gold-bg2); }
.topbar-icon-btn {
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0; transition: color .15s, background .15s;
}
.topbar-icon-btn:hover { color: var(--gold); background: var(--gold-bg); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.stat-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 20px; font-size: .78rem; color: var(--text2);
}
.stat-chip i { color: var(--gold); }
.stat-chip.panic { background: rgba(255,59,59,.12); border-color: var(--red); color: var(--red); }
.topbar-time { font-size: .8rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.mobile-only { display: none; }

/* ===== TUNNEL BAR ===== */
.tunnel-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 20px; flex-shrink: 0;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  min-height: 38px; gap: 10px;
}
.tunnel-bar-left  { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.tunnel-bar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tunnel-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #555;
  transition: background .3s;
}
.tunnel-dot.connected  { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.tunnel-dot.connecting { background: #f39c12; box-shadow: 0 0 6px #f39c12; animation: dotPulse .8s infinite alternate; }
.tunnel-dot.stopped    { background: #555; box-shadow: none; }
@keyframes dotPulse { to { opacity: .3; } }
.tunnel-label { font-size: .78rem; color: var(--text2); white-space: nowrap; }
.tunnel-url {
  font-size: .78rem; color: #2ecc71; font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.tunnel-btn-copy, .tunnel-btn-qr {
  background: var(--bg4); border: 1px solid var(--border); color: var(--text2);
  border-radius: 5px; padding: 4px 8px; cursor: pointer; font-size: .8rem; line-height: 1;
  transition: color .2s;
}
.tunnel-btn-copy:hover, .tunnel-btn-qr:hover { color: #2ecc71; border-color: #2ecc71; }
.tunnel-btn-toggle {
  background: var(--bg4); border: 1px solid var(--border); color: var(--text2);
  border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: .78rem;
  white-space: nowrap; transition: background .2s, border-color .2s, color .2s;
}
.tunnel-btn-toggle.active {
  background: rgba(231,76,60,.12); border-color: var(--red); color: var(--red);
}

/* ===== PANIC BANNER ===== */
.panic-banner {
  background: linear-gradient(90deg, #8B0000, var(--red));
  color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  font-weight: 600; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,59,59,.5);
}
.panic-banner button {
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  color: #fff; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: .85rem;
}

/* ===== PANELS ===== */
.panel {
  display: none; position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px; flex-direction: column; gap: 20px;
}
.panel.active { display: flex; }

/* ===== QR BANNER ===== */
/* ===== ACCESS CARDS (QR Jemaah + Pembimbing) ===== */
.access-cards-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
.access-card {
  background: linear-gradient(135deg, #0e0e0e 0%, #1a1500 100%);
  border: 1px solid var(--border2); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 0 20px rgba(212,175,55,.07); cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.access-card:hover { border-color: var(--gold); box-shadow: 0 0 24px rgba(212,175,55,.15); }
.access-card-qr { flex-shrink: 0; background:#fff; padding:6px; border-radius:6px; }
.access-card-qr img, .access-card-qr canvas { display:block!important; }
.access-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.access-card-label { font-size:.82rem; font-weight:600; color:var(--gold); }
.access-card-label i { margin-right:5px; }
.access-card-url { font-size:.72rem; color:var(--text2); font-family:monospace; word-break:break-all; }

/* ===== CASCADE MENU ===== */
.dash-menu-cascade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.dash-menu-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px 8px 16px; border-radius: 16px;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-family: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.dash-menu-item .dmi-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold-bg); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: var(--gold);
  transition: background .2s, box-shadow .2s;
}
.dash-menu-item:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(212,175,55,.12); }
.dash-menu-item:hover .dmi-icon { background: var(--gold-bg2); box-shadow: 0 0 16px var(--gold-glow); }

.qr-url { font-size: .88rem; color: var(--text); font-family: monospace; word-break: break-all; flex: 1; }
.btn-copy-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--gold-bg); color: var(--gold); font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s;
  flex-shrink: 0;
}
.btn-copy-link:hover { background: var(--gold-bg2); box-shadow: 0 0 10px var(--gold-glow); }

/* ===== STATS GRID ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stat-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.stat-card.blue::before   { background: var(--blue); }
.stat-card.green::before  { background: var(--green); }
.stat-card.red::before    { background: var(--red); }
.stat-card.purple::before { background: var(--purple); }
.stat-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.stat-icon.blue   { background: rgba(74,158,255,.12); color: var(--blue); }
.stat-icon.green  { background: rgba(0,197,102,.12);  color: var(--green); }
.stat-icon.red    { background: rgba(255,59,59,.12);  color: var(--red); }
.stat-icon.purple { background: rgba(155,89,182,.12); color: var(--purple); }
.stat-icon.gold   { background: var(--gold-bg); color: var(--gold); }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--text); }
.stat-label { font-size: .72rem; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }

/* ===== DASHBOARD GRID ===== */
.dashboard-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; }

/* ===== CARD ===== */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-header h3 {
  font-size: .88rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.card-header h3 i { color: var(--gold); }

/* ===== ACTIVITY LIST ===== */
.activity-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; background: var(--bg3); border-radius: 8px; font-size: .82rem;
  border: 1px solid transparent; transition: border-color .15s;
}
.activity-item:hover { border-color: var(--border); }
.activity-item .ai-icon { font-size: .95rem; margin-top: 1px; color: var(--gold); }
.activity-item .ai-time { color: var(--text3); font-size: .72rem; white-space: nowrap; margin-top: 2px; }

/* ===== MAP ===== */
#mainMap { flex: 1; min-height: 0; height: calc(100vh - 160px); border-radius: 10px; }
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-shrink: 0;
}
.map-tools-left { display: flex; gap: 8px; }
.map-legend {
  position: absolute; bottom: 24px; left: 240px; z-index: 800;
  background: var(--bg2); border: 1px solid var(--border2);
  padding: 8px 12px; border-radius: 8px; display: flex; gap: 16px; font-size: .78rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.6);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
#panel-peta { padding-bottom: 0; }

/* ===== DOTS ===== */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.green  { background: var(--green); }
.dot.yellow { background: var(--gold); }
.dot.gray   { background: #444; }
.dot.red    { background: var(--red); }
.dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.dot.offline { background: #333; }

/* ===== BUTTONS ===== */
.btn {
  padding: 8px 16px; border-radius: 8px; font-size: .84rem; font-weight: 500;
  cursor: pointer; border: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; letter-spacing: .2px;
}
.btn:hover { opacity: .88; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #0a0a0a; font-weight: 700;
  box-shadow: 0 2px 12px rgba(212,175,55,.3);
}
.btn-primary:hover { box-shadow: 0 4px 20px rgba(212,175,55,.5); opacity: 1; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text2); }
.btn-outline:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.btn-sm { padding: 5px 10px; font-size: .76rem; }
.btn-green { background: var(--green); color: #000; font-weight: 700; }
.btn-red   { background: var(--red);   color: #fff; }

/* ===== TABLE ===== */
.table-wrapper { overflow-x: auto; }
.panel-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-shrink: 0; }
.search-input {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 8px 14px; border-radius: 8px; font-size: .85rem; flex: 1;
}
.search-input:focus { outline: none; border-color: var(--gold); }
.select-sm {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: .82rem; cursor: pointer;
}
.data-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.data-table th {
  background: var(--bg3); padding: 10px 14px; text-align: left;
  color: var(--gold); font-weight: 600; font-size: .75rem;
  border-bottom: 1px solid var(--border2); text-transform: uppercase; letter-spacing: .5px;
}
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tr:hover td { background: var(--bg3); }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .72rem; font-weight: 600;
}
.badge-green  { background: rgba(0,197,102,.1);  color: var(--green); }
.badge-gray   { background: rgba(150,150,150,.1); color: #777; }
.badge-yellow { background: var(--gold-bg);       color: var(--gold); }
.badge-red    { background: rgba(255,59,59,.1);   color: var(--red); }
.badge-blue   { background: rgba(74,158,255,.1);  color: var(--blue); }

/* ===== AUDIO ===== */
.audio-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.audio-rooms-col, .audio-call-col { display: flex; flex-direction: column; gap: 16px; }
.room-list { display: flex; flex-direction: column; gap: 6px; }
.room-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg3); border-radius: 8px;
  border: 1px solid transparent; transition: all .2s;
}
.room-item:hover { border-color: var(--border2); background: var(--bg4); }
.room-item.room-active {
  background: rgba(212,175,55,.07);
  border-color: rgba(212,175,55,.4);
  box-shadow: inset 3px 0 0 var(--gold);
}
.room-item.room-active .room-name { color: var(--gold); }
.room-item.room-active .room-icon { background: var(--gold-bg); color: var(--gold); }
.room-item.room-active .join-btn {
  background: var(--gold-bg2); border: 1px solid var(--gold); color: var(--gold);
}
.room-icon {
  width: 36px; height: 36px; background: var(--bg2);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--text2);
}
.room-info { flex: 1; }
.room-name { font-size: .85rem; font-weight: 600; }
.room-sub  { font-size: .73rem; color: var(--text2); }
.room-count {
  font-size: .7rem; font-weight: 500; color: var(--gold);
  background: var(--gold-bg); padding: 1px 6px; border-radius: 8px; margin-left: 4px;
}
.join-btn { margin-left: auto; }

.audio-call-card { display: flex; flex-direction: column; }
.audio-idle {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; color: var(--text2); padding: 48px 20px; text-align: center;
}
.audio-idle i { font-size: 3rem; color: var(--border); }
.audio-active { display: flex; flex-direction: column; gap: 16px; }
.audio-header { display: flex; align-items: center; justify-content: space-between; }
.audio-room-name { font-size: 1.1rem; font-weight: 600; }
.audio-badge {
  background: var(--gold-bg); color: var(--gold);
  padding: 3px 10px; border-radius: 10px; font-size: .78rem;
  border: 1px solid var(--border2);
}

.audio-visualizer {
  display: flex; align-items: flex-end; gap: 3px; height: 48px;
  padding: 6px; background: var(--bg3); border-radius: 8px;
}
.av-bar { flex: 1; background: var(--gold); border-radius: 2px; height: 4px; transition: height .1s; opacity: .4; }
.av-bar.active { opacity: 1; }

.audio-participants { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.participant-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border-radius: 20px; padding: 5px 12px; font-size: .8rem;
  border: 1px solid var(--border);
}
.participant-chip .p-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.participant-chip .p-dot.speaking { animation: pulse-green .5s ease infinite; }

.audio-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ctrl-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
  cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--text); transition: all .15s;
}
.ctrl-btn:hover { background: var(--bg4); border-color: var(--border2); }
.ctrl-btn.ptt {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #000; font-size: 1.3rem; border: none;
  box-shadow: 0 4px 20px rgba(212,175,55,.4);
}
.ctrl-btn.ptt.active { background: var(--green); color: #000; box-shadow: 0 0 20px var(--green-glow); }
.ctrl-btn.muted { background: rgba(255,59,59,.12); color: var(--red); border-color: rgba(255,59,59,.3); }
.ctrl-btn.red   { background: var(--red); color: #fff; border: none; }
.ptt-hint { text-align: center; font-size: .75rem; color: var(--text2); }

.broadcast-area { display: flex; flex-direction: column; gap: 10px; }
.broadcast-area textarea {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 10px; border-radius: 8px; resize: none; font-family: inherit;
  font-size: .85rem; width: 100%;
}
.broadcast-area textarea:focus { outline: none; border-color: var(--gold); }
.broadcast-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* ===== TERJEMAHAN ===== */
.translate-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.translate-direction { display: flex; gap: 8px; margin-bottom: 16px; }
.lang-btn {
  flex: 1; padding: 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg3); color: var(--text2);
  cursor: pointer; font-size: .84rem; transition: all .15s;
}
.lang-btn.active {
  background: var(--gold-bg); border-color: var(--gold);
  color: var(--gold); font-weight: 600;
}
.flag { font-size: 1rem; }
.translate-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.translate-input-area, .translate-output-area { display: flex; flex-direction: column; gap: 8px; }
.translate-input-area label, .translate-output-area label { font-size: .76rem; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tr-label-row { display: flex; align-items: center; justify-content: space-between; }
.tts-input-btn {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
  transition: background .15s;
}
.tts-input-btn:hover { background: var(--gold-bg); border-color: var(--border2); }
.tts-input-btn:active { opacity: .75; }
.translate-input-area textarea {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 12px; border-radius: 8px; resize: none; font-size: .9rem; font-family: inherit;
}
.translate-input-area textarea:focus { outline: none; border-color: var(--gold); }
.translate-result {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; min-height: 120px;
  font-size: .95rem; line-height: 1.6;
}
.phrase-shortcuts { margin-top: 16px; }
.phrase-shortcuts p { font-size: .74rem; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.phrase-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.phrase-chip {
  padding: 5px 12px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 16px; font-size: .78rem; cursor: pointer; transition: all .15s; color: var(--text2);
}
.phrase-chip:hover { background: var(--gold-bg); border-color: var(--border2); color: var(--gold); }

/* Frasa Manage */
.frasa-manage-card { margin-top: 16px; }
.frasa-admin-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-top: 4px; }
.frasa-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--bg3); border-radius: 8px; border: 1px solid var(--border);
  transition: border-color .15s;
}
.frasa-row:hover { border-color: var(--border2); }
.frasa-row-text  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frasa-id   { font-size: .85rem; font-weight: 500; color: var(--text); }
.frasa-ar   { font-size: .8rem; color: var(--text2); }
.frasa-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; }
.history-item { background: var(--bg3); border-radius: 8px; padding: 10px 12px; font-size: .82rem; border: 1px solid var(--border); }
.history-item .hi-asal       { color: var(--text2); margin-bottom: 4px; }
.history-item .hi-terjemahan { font-weight: 500; color: var(--gold); }

/* ===== PANIC ===== */
.panic-list { display: flex; flex-direction: column; gap: 10px; }
.panic-item {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  transition: border-color .2s;
}
.panic-item.active { border-color: var(--red); background: rgba(255,59,59,.04); }
.panic-icon {
  width: 44px; height: 44px; background: rgba(255,59,59,.12);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--red); flex-shrink: 0;
}
.panic-info { flex: 1; }
.panic-nama { font-weight: 600; margin-bottom: 2px; }
.panic-meta { font-size: .78rem; color: var(--text2); }
.panic-msg  { font-size: .85rem; color: var(--red); margin-top: 4px; }
.panic-time { font-size: .75rem; color: var(--text2); white-space: nowrap; }
.resolve-btn {
  background: none; border: 1px solid var(--border); color: var(--text2);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: .78rem;
  transition: all .15s; white-space: nowrap;
}
.resolve-btn:hover { background: var(--green); color: #000; border-color: var(--green); font-weight: 600; }

/* ===== MODAL ===== */
.modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.85); z-index: 1000;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px; padding: 24px; width: 460px; max-width: 95vw;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 30px rgba(212,175,55,.1);
}
/* date + time pair */
.dt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dt-pair input { box-sizing: border-box; }
/* checkin list */
.checkin-table { display: flex; flex-direction: column; gap: 4px; }
.checkin-done, .checkin-undone { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: .85rem; }
.checkin-done   { background: rgba(46,204,113,.1); color: #2ecc71; }
.checkin-undone { background: rgba(231,76,60,.1); color: #e74c3c; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1rem; color: var(--gold); }
.modal-header button { background: none; border: none; color: var(--text2); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modal-header button:hover { color: var(--text); }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .75rem; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: .87rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--gold);
}
.form-group select option { background: var(--bg3); }
.form-group.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ===== EMPTY STATE ===== */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 32px;
  color: var(--text2); text-align: center;
}
.empty-state i { font-size: 2rem; color: var(--border); }

/* ===== PETA PANEL LAYOUT ===== */
#panel-peta { padding: 0 !important; flex-direction: row !important; overflow: hidden; }
.peta-map-col { flex: 1; display: flex; flex-direction: column; padding: 16px; overflow: hidden; min-width: 0; }
#mainMap { flex: 1; min-height: 0; height: auto !important; border-radius: 10px; }

/* ===== PANIC NAV PANEL ===== */
.panic-nav-panel {
  width: 0; overflow: hidden;
  background: var(--bg2);
  border-left: 2px solid rgba(255,59,59,.3);
  display: flex; flex-direction: column;
  transition: width .3s ease; flex-shrink: 0;
}
.panic-nav-panel.open { width: 290px; }
.pnp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255,59,59,.08);
  border-bottom: 1px solid rgba(255,59,59,.25);
  flex-shrink: 0;
}
.pnp-badge { color: var(--red); font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.pnp-close { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1rem; padding: 4px; }
.pnp-close:hover { color: var(--text); }
.pnp-body { padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pnp-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,59,59,.15); border: 2px solid var(--red);
  color: var(--red); font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.pnp-nama { font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.pnp-grup { font-size: .78rem; color: var(--text2); margin-bottom: 8px; }
.pnp-pesan {
  background: rgba(255,59,59,.08); border: 1px solid rgba(255,59,59,.2);
  border-radius: 8px; padding: 8px 10px; color: #ff9999;
  font-size: .82rem; line-height: 1.4; margin-bottom: 6px;
}
.pnp-ts { font-size: .74rem; color: var(--text2); }
.pnp-route-info {
  display: none; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pnp-route-info.show { display: grid; }
.pnp-stat {
  background: var(--bg2); padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .78rem; text-align: center;
}
.pnp-stat i { font-size: 1.1rem; color: var(--gold); margin-bottom: 2px; }
.pnp-stat span { font-weight: 600; font-size: .85rem; }
.pnp-hint {
  display: none; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--gold-bg); border-bottom: 1px solid var(--border2);
  color: var(--gold); font-size: .82rem; flex-shrink: 0;
  animation: hint-pulse 1.5s ease-in-out infinite;
}
.pnp-hint.show { display: flex; }
@keyframes hint-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.pnp-actions { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.btn-red { color: #fff !important; border-color: rgba(255,59,59,.3) !important; }
.btn-red:hover { background: rgba(255,59,59,.1) !important; }

/* ===== PANIC MAP MARKERS ===== */
.panic-map-marker { position: relative; width: 36px; height: 36px; }
.pmm-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid rgba(255,59,59,.6);
  animation: pmm-pulse 1s ease-out infinite;
}
.pmm-ring2 {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,59,59,.3);
  animation: pmm-pulse 1s ease-out infinite .3s;
}
.pmm-inner {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff5252, #8B0000);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem;
  box-shadow: 0 0 16px rgba(255,59,59,.8);
}
@keyframes pmm-pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Guide marker */
.guide-marker {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  border: 3px solid #000;
  box-shadow: 0 0 10px var(--gold-glow);
}

/* ===== LEAFLET CUSTOM ===== */
.leaflet-popup-content-wrapper {
  background: var(--bg2); border: 1px solid var(--border2);
  color: var(--text); border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.7);
}
.leaflet-popup-tip { background: var(--bg2); }

.marker-pulse {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(212,175,55,.7); border: 2px solid rgba(212,175,55,.6);
  animation: pulse-gold 1.2s ease-out infinite;
}
.marker-pulse.offline { border-color: rgba(100,100,100,.5); animation: none; background: #333; }
.marker-pulse.panic   { border-color: rgba(255,59,59,.8); background: var(--red); animation: pulse-red .6s ease infinite; }

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(0,197,102,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(0,197,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,197,102,0); }
}
@keyframes pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,59,.9); }
  70%  { box-shadow: 0 0 0 12px rgba(255,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); }
}

/* ===== PEMBIMBING BADGE (topbar) ===== */
.pembimbing-badge {
  display: flex; align-items: center; gap: 7px;
  background: var(--gold-bg); border: 1px solid var(--border2);
  color: var(--gold); padding: 5px 12px; border-radius: 20px;
  font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.pembimbing-badge:hover { background: var(--gold-bg2); }

/* ===== PANIC NAV — RESPONDER ===== */
.pnp-responder {
  display: none; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(0,197,102,.06); border-bottom: 1px solid rgba(0,197,102,.2);
  flex-shrink: 0;
}
.pnp-responder.show { display: flex; }
.pnp-resp-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,197,102,.15); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.pnp-resp-label { font-size: .72rem; color: var(--text2); margin-bottom: 2px; }
.pnp-resp-name  { font-size: .88rem; font-weight: 700; color: var(--green); }
.pnp-resp-time  { font-size: .72rem; color: var(--text2); margin-top: 1px; }

.btn-accept {
  background: var(--gold-bg); border: 1px solid var(--border2);
  color: var(--gold); font-weight: 600;
}
.btn-accept:hover { background: var(--gold-bg2) !important; }
.btn-accept.accepted {
  background: rgba(0,197,102,.1) !important; border-color: rgba(0,197,102,.3) !important;
  color: var(--green) !important; cursor: default; opacity: .85;
}
.btn-accept:disabled { cursor: default; }
.resp-badge { color: var(--green) !important; margin-top: 4px; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold3); }

/* ===== CHAT (Dashboard) ===== */
.dash-chat-thread {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
#panel-chat { padding: 0; overflow: hidden; }
#panel-chat .panel-toolbar { padding: 0 16px; flex-shrink: 0; }
.dash-chat-composer {
  display: flex; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;
}
.dash-chat-composer input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; font-size: .9rem; outline: none;
}
.dash-chat-composer input:focus { border-color: var(--gold); }
.dash-chat-composer button {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #000; border: none; border-radius: 8px;
  padding: 9px 14px; cursor: pointer; font-size: .95rem; font-weight: 700;
}

.dcb { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.dcb-self      { align-self: flex-end;   align-items: flex-end; }
.dcb-other, .dcb-pembimbing { align-self: flex-start; align-items: flex-start; }
.dcb-nama  { font-size: .72rem; color: var(--text2); margin-bottom: 1px; }
.dcb-grup  { color: var(--gold); font-size: .68rem; }
.dcb-text  {
  padding: 8px 12px; border-radius: 12px; font-size: .875rem; line-height: 1.45;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border); word-break: break-word;
}
.dcb-self .dcb-text {
  background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3);
  color: var(--gold2); border-radius: 12px 12px 2px 12px;
}
.dcb-other .dcb-text {
  background: var(--bg4); border-color: var(--border);
  color: var(--text); border-radius: 12px 12px 12px 2px;
}
.loc-bubble {
  background: rgba(255,59,59,.08); border: 1px solid rgba(255,59,59,.3);
  border-radius: 10px; padding: 10px 12px; min-width: 200px;
}
.loc-header { font-size: .82rem; font-weight: 700; color: #ff9999; margin-bottom: 4px; }
.loc-coords { font-size: .75rem; color: var(--text2); font-family: monospace; margin-bottom: 8px; }
.loc-btn {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--gold-bg); color: var(--gold);
  border: 1px solid var(--border2); border-radius: 7px;
  padding: 6px 10px; text-decoration: none; font-size: .8rem; font-weight: 600;
  transition: background .15s;
}
.loc-btn:hover { background: var(--gold-bg2); }
.dcb-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.dcb-time { font-size: .68rem; color: var(--text3); }
.dcb-del {
  background: none; border: none; cursor: pointer; padding: 1px 3px;
  color: var(--text3); font-size: .7rem; opacity: 0; transition: opacity .15s;
  border-radius: 4px; line-height: 1;
}
.dcb:hover .dcb-del { opacity: 1; }
.dcb-del:hover { color: var(--red); background: rgba(255,59,59,.12); }
.chat-unread-badge {
  background: var(--red); color: #fff; border-radius: 10px; font-size: .72rem;
  padding: 1px 6px; font-weight: 700; align-items: center; justify-content: center;
}

/* ===== DOA — Dashboard ===== */
.doa-form-card {
  background: var(--bg2); border-radius: 12px; padding: 14px; margin: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border);
}
.doa-form-card input, .doa-form-card textarea {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: .875rem; outline: none; resize: vertical;
}
.doa-form-card input:focus, .doa-form-card textarea:focus { border-color: var(--gold); }
.doa-form-card textarea[dir="rtl"] { font-size: 1rem; line-height: 1.7; }
.doa-form-card button {
  background: linear-gradient(135deg, var(--gold), var(--gold3));
  color: #000; border: none; border-radius: 8px;
  padding: 10px; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.doa-form-card button:hover { opacity: .9; }
.doa-admin-list { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.doa-empty-admin { text-align: center; color: var(--text2); padding: 32px 0; }
.doa-admin-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  transition: border-color .2s;
}
.doa-admin-card:hover { border-color: var(--border2); }
.dac-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dac-judul  { font-weight: 600; font-size: .9rem; color: var(--gold); }
.dac-del    { background: none; border: none; color: var(--red); cursor: pointer; font-size: .85rem; padding: 2px 4px; }
.dac-arab   { font-size: 1.1rem; line-height: 1.8; color: var(--text); text-align: right; direction: rtl; margin-bottom: 4px; }
.dac-latin  { font-size: .82rem; color: var(--text2); font-style: italic; margin-bottom: 4px; }
.dac-terjemah { font-size: .85rem; color: var(--text2); margin-bottom: 4px; }
.dac-meta   { font-size: .72rem; color: var(--text3); border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }

/* ===== RESPONSIVE — TABLET (≤ 900px) ===== */
@media (max-width: 900px) {
  .stats-grid        { grid-template-columns: 1fr 1fr; }
  .dashboard-grid    { grid-template-columns: 1fr; }
  .audio-layout      { grid-template-columns: 1fr; }
  .translate-layout  { grid-template-columns: 1fr; }
  .translate-box     { grid-template-columns: 1fr; }
  .sidebar           { position: fixed; left: calc(-1 * var(--sidebar-w)); top: 0; bottom: 0; z-index: 500; transition: left .25s; }
  .sidebar.open      { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,.7); }
  .mobile-only       { display: flex !important; }
  .map-legend        { left: 16px; bottom: 80px; }
}

/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 499;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }


/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {

  /* Topbar compact */
  .topbar { padding: 0 10px; height: 50px; }
  .topbar-left { min-width: 0; flex: 1; overflow: hidden; }
  .topbar-left h1 { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .topbar-time { display: none; }
  .topbar-right { gap: 6px; flex-shrink: 0; }

  /* Hide non-essential topbar items */
  .pembimbing-badge span { display: none; }
  .stat-chip { padding: 4px 8px; font-size: .72rem; }
  #btnLockScreen { display: none; }

  /* Tunnel bar - compact */
  .tunnel-bar { padding: 4px 10px; min-height: 30px; }
  .tunnel-url  { display: none !important; }
  .tunnel-btn-copy { display: none !important; }
  .tunnel-btn-qr   { display: none !important; }
  .tunnel-label { font-size: .72rem; }
  .tunnel-btn-toggle { padding: 3px 8px; font-size: .72rem; }

  /* Panels */
  .panel { padding: 12px; gap: 12px; }

  /* Stats grid 2 col */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-icon { width: 38px; height: 38px; font-size: 1rem; }
  .stat-value { font-size: 1.5rem; }
  .stat-label { font-size: .68rem; }

  /* QR banner vertical */
  .access-cards-row { grid-template-columns: 1fr; }
  .access-card { padding: 12px 14px; }
  .dash-menu-cascade { grid-template-columns: repeat(3, 1fr); }
  .btn-copy-link { width: 100%; justify-content: center; }

  /* Map */
  #mainMap { height: calc(100dvh - 170px) !important; min-height: 300px; }
  .map-toolbar { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
  .map-tools-left { flex-wrap: wrap; gap: 6px; flex: 1; }
  .map-tools-left .btn { font-size: .75rem; padding: 5px 8px; }
  .map-tools-right select { font-size: .75rem; }
  .map-legend { left: 8px; bottom: 8px; flex-wrap: wrap; gap: 6px; font-size: .68rem; padding: 4px 8px; }
  #panel-peta { flex-direction: column !important; padding: 0 !important; gap: 0 !important; }
  .peta-map-col { padding: 8px 10px 0; display: flex; flex-direction: column; }

  /* Panic nav panel - hidden until .open */
  .panic-nav-panel { position: fixed; bottom: 58px; left: 0; right: 0;
                     width: 0 !important; height: 0 !important; overflow: hidden;
                     z-index: 450; border-left: none; border-top: 2px solid rgba(255,59,59,.3); }
  .panic-nav-panel.open { width: 100% !important; height: 70dvh !important; overflow: visible; }

  /* Panel toolbar */
  .panel-toolbar { flex-wrap: wrap; gap: 8px; }
  .panel-toolbar .search-input { min-width: 0; }
  .panel-toolbar .btn { font-size: .78rem; padding: 6px 10px; }

  /* Table - horizontal scroll on mobile */
  .table-wrapper { overflow-x: auto; }
  .data-table { min-width: 700px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: .78rem; white-space: nowrap; }

  /* Alarm card */
  .alarm-dashboard-card { flex-direction: column; padding: 14px; }
  .alarm-dash-left { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
  .alarm-big-btn { width: 72px; height: 64px; flex-shrink: 0; }
  .alarm-dash-hint { max-width: none; text-align: left; }

  /* Audio */
  .ctrl-btn { width: 46px; height: 46px; }
  .ctrl-btn.ptt { width: 58px; height: 58px; }

  /* Chat */
  #panel-chat { overflow: hidden; flex-direction: column; }
  #panel-chat.active { display: flex; }
  .dash-chat-thread { flex: 1; overflow-y: auto; min-height: 0; }
  .chat-composer { flex-shrink: 0; padding: 8px; background: var(--bg2); border-top: 1px solid var(--border2); }

  /* Modals */
  .modal-box { width: 96vw; max-width: none; padding: 18px; }
  .form-group.two-col { grid-template-columns: 1fr; }

  /* Cards */
  .card { padding: 12px; }
  .card-header h3 { font-size: .82rem; }

  /* Schedule stats */
  #scheduleStats { grid-template-columns: 1fr 1fr; }

  /* QR Modal */
  #qrLanGrid { grid-template-columns: 1fr !important; }
  #qrTunnelSection > div { grid-template-columns: 1fr !important; }

  /* Remote control */
  .audio-call-col .card div[style*="grid-template-columns:1fr 1fr"] {
    display: grid; grid-template-columns: 1fr 1fr;
  }
}

/* ===== EXTRA SMALL (≤ 400px) ===== */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topbar-right .btn-alarm .alarm-btn-label { display: none; }
}

/* ===== AI TRANSLATOR ===== */

/* Topbar */
.ai-tr-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}
.ai-tr-title-row { display: flex; align-items: center; gap: 10px; }
.ai-tr-title-row h3 { margin: 0; font-size: 1.05rem; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#7c3aed,#5b21b6);
  color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; letter-spacing: .3px; flex-shrink: 0;
}
.ai-badge-on {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#2ecc71,#27ae60);
  color: #000; font-size: .68rem; font-weight: 700; padding: 2px 8px;
  border-radius: 12px; flex-shrink: 0;
}
.ai-badge-off {
  display: inline-flex; align-items: center; gap: 5px;
  background: #333; color: #888; font-size: .68rem; font-weight: 700;
  padding: 2px 8px; border-radius: 12px; flex-shrink: 0;
}

/* Mode tabs */
.ai-tr-mode-tabs { display: flex; gap: 4px; }
.ai-mode-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border2);
  background: var(--bg3); color: var(--text3); font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.ai-mode-tab i { font-size: .85rem; }
.ai-mode-tab.active {
  background: linear-gradient(135deg,#7c3aed,#5b21b6);
  border-color: #7c3aed; color: #fff;
  box-shadow: 0 2px 12px rgba(124,58,237,.4);
}
.ai-mode-tab:hover:not(.active) { border-color: #7c3aed; color: #a78bfa; }

/* Panel wrappers */
.ai-tr-panel { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* Source badge */
.ai-source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; color: #a78bfa; padding: 2px 8px;
  border-radius: 8px; border: 1px solid rgba(124,58,237,.3);
  background: rgba(124,58,237,.1);
}

/* ── VOICE MODE ─────────────────── */
.voice-tr-wrapper {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 16px; background: var(--bg2); border-radius: 16px;
  border: 1px solid var(--border2);
}
.voice-tr-status-row { display: flex; align-items: center; gap: 8px; }
.vtrs-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #555; transition: background .3s;
}
.vtrs-dot.listening { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse .8s infinite alternate; }
.vtrs-dot.translating { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { opacity: .4; } }

.voice-tr-main-btn {
  position: relative; width: 90px; height: 90px; border-radius: 50%;
  border: none; cursor: pointer; background: linear-gradient(135deg,#7c3aed,#5b21b6);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; transition: transform .15s;
  box-shadow: 0 4px 24px rgba(124,58,237,.5);
  -webkit-tap-highlight-color: transparent;
}
.voice-tr-main-btn:active { transform: scale(.93); }
.voice-tr-main-btn.listening {
  background: linear-gradient(135deg,var(--green),#27ae60);
  box-shadow: 0 4px 24px rgba(46,204,113,.5);
  animation: micPulse 1.5s infinite;
}
.voice-tr-main-btn.translating {
  background: linear-gradient(135deg,#f39c12,#e67e22);
  box-shadow: 0 4px 24px rgba(243,156,18,.5);
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 4px 24px rgba(46,204,113,.4); }
  50% { box-shadow: 0 4px 40px rgba(46,204,113,.9), 0 0 0 12px rgba(46,204,113,.15); }
}

.vtr-rings { position: absolute; inset: -12px; border-radius: 50%; pointer-events: none; }
.vtr-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(46,204,113,.0); transition: all .3s;
}
.voice-tr-main-btn.listening .vtr-ring.r1 {
  border-color: rgba(46,204,113,.4);
  animation: ringExpand 1.5s infinite;
}
.voice-tr-main-btn.listening .vtr-ring.r2 {
  border-color: rgba(46,204,113,.25);
  animation: ringExpand 1.5s .4s infinite;
}
@keyframes ringExpand {
  0%  { transform: scale(1); opacity: 1; }
  100%{ transform: scale(1.6); opacity: 0; }
}

.vtr-hint { font-size: .82rem; color: var(--text3); text-align: center; }
.vtr-transcript-box, .vtr-result-box {
  width: 100%; max-width: 480px; padding: 12px 16px;
  border-radius: 12px; border: 1px solid var(--border2);
}
.vtr-transcript-box { background: rgba(255,255,255,.04); }
.vtr-result-box { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); }
.vtr-box-label { font-size: .7rem; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.vtr-box-text { font-size: .95rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.vtr-box-text.vtr-result { color: #c4b5fd; font-size: 1.05rem; }
.vtr-auto-row { display: flex; align-items: center; gap: 10px; }

/* ── PHOTO MODE ─────────────────── */
.photo-tr-wrapper { display: flex; flex-direction: column; gap: 14px; }
.photo-tr-actions { display: flex; gap: 10px; }
.photo-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; border-radius: 14px;
  border: 2px dashed rgba(124,58,237,.4); background: rgba(124,58,237,.06);
  color: #a78bfa; cursor: pointer; font-size: .82rem; font-weight: 600;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.photo-btn i { font-size: 1.6rem; }
.photo-btn:hover, .photo-btn:active { border-color: #7c3aed; background: rgba(124,58,237,.15); }

.photo-drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px; border: 2px dashed var(--border2); border-radius: 14px;
  background: var(--bg3); color: var(--text3); cursor: pointer;
  text-align: center; transition: all .15s; min-height: 120px; justify-content: center;
}
.photo-drop-zone i { font-size: 2rem; color: #555; }
.photo-drop-zone p { margin: 0; font-size: .85rem; }
.photo-drop-hint { font-size: .72rem !important; color: #555 !important; }
.photo-drop-zone:hover, .photo-drop-zone.drag-over { border-color: #7c3aed; background: rgba(124,58,237,.06); color: #a78bfa; }
.photo-drop-zone:hover i { color: #a78bfa; }

.photo-preview-wrap {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #000; max-height: 300px; display: flex; align-items: center; justify-content: center;
}
.photo-preview-wrap img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.photo-clear-btn {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}

.photo-result-wrap { display: flex; flex-direction: column; gap: 10px; }
.photo-result-section {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border2); background: var(--bg3);
}
.photo-result-section.photo-result-translated {
  border-color: rgba(124,58,237,.3); background: rgba(124,58,237,.06);
}
.photo-result-label {
  font-size: .72rem; color: var(--text3); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.photo-result-text { font-size: .92rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.photo-result-section.photo-result-translated .photo-result-text { color: #c4b5fd; }

/* Claude settings card */
.claude-settings-card { border-color: rgba(124,58,237,.3) !important; }
.claude-status-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg3); border-radius: 10px; margin-bottom: 12px;
}
.claude-api-input-row { display: flex; gap: 8px; align-items: stretch; }
.claude-api-input-row input { flex: 1; }

/* Mobile tweaks for AI translator */
@media (max-width: 768px) {
  .ai-tr-topbar { flex-direction: column; align-items: flex-start; }
  .ai-tr-mode-tabs { width: 100%; }
  .ai-mode-tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: .75rem; }
  .ai-mode-tab span { display: none; }
  .ai-mode-tab i { font-size: 1rem; }
  .voice-tr-wrapper { padding: 16px 12px; }
  .voice-tr-main-btn { width: 80px; height: 80px; font-size: 1.7rem; }
  .photo-tr-actions { flex-direction: row; }
  .photo-btn { padding: 14px 8px; font-size: .78rem; }
}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #333; border-radius: 24px; cursor: pointer; transition: .2s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ===== NAV BADGE ===== */
.nav-badge { background: var(--red); color: #fff; border-radius: 8px; font-size: .65rem; padding: 1px 5px; margin-left: 4px; font-weight: 700; }

/* ===== SCHEDULE ===== */
.schedule-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.schedule-card.warning { border-color: rgba(231,76,60,.5); background: rgba(231,76,60,.05); }
.schedule-card.done { border-color: rgba(46,204,113,.3); }
.sch-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.sch-info { flex: 1; min-width: 0; }
.sch-title { font-weight: 600; font-size: .9rem; }
.sch-sub { font-size: .75rem; color: var(--text2); margin-top: 2px; }
.sch-progress { display: flex; align-items: center; gap: 8px; }
.sch-bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.sch-bar-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width .3s; }
.sch-pct { font-size: .75rem; color: var(--text2); min-width: 35px; text-align: right; }

/* ===== STAFF LIST ===== */
.staff-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.staff-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.staff-info { flex: 1; }
.staff-name { font-size: .9rem; font-weight: 600; }
.staff-role { font-size: .72rem; color: var(--text2); }

/* ===== INPUT SM ===== */
.input-sm { padding: 9px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: .9rem; width: 100%; box-sizing: border-box; }

/* ===== ALARM BUTTON (topbar) ===== */
.btn-alarm {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #b8000a, #e74c3c);
  color: #fff; border: none; border-radius: 8px; padding: 6px 14px;
  font-size: .82rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 0 10px rgba(231,76,60,.4);
  transition: opacity .2s, transform .1s;
}
.btn-alarm:hover { opacity: .85; transform: scale(1.03); }
.btn-alarm:active { transform: scale(.97); }
@media (max-width: 600px) { .alarm-btn-label { display: none; } }

/* ===== ALARM DASHBOARD CARD ===== */
.alarm-dashboard-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, #1a0000 0%, #0d0d0d 100%);
  border: 1px solid rgba(231,76,60,.3); border-radius: 14px; padding: 18px 20px;
}
.alarm-dash-left { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.alarm-big-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100px; height: 90px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #b8000a, #e74c3c);
  color: #fff; cursor: pointer; font-size: .85rem; font-weight: 700;
  box-shadow: 0 0 20px rgba(231,76,60,.5); transition: transform .15s, box-shadow .15s;
}
.alarm-big-btn i { font-size: 1.8rem; }
.alarm-big-btn:hover { transform: scale(1.05); box-shadow: 0 0 28px rgba(231,76,60,.7); }
.alarm-big-btn:active { transform: scale(.96); }
.alarm-dash-hint { font-size: .72rem; color: #888; text-align: center; max-width: 110px; margin: 0; }
.alarm-dash-right { flex: 1; min-width: 0; }
.alarm-dash-hdr {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: .82rem; color: var(--text2); margin-bottom: 8px; font-weight: 600;
}
.alarm-empty { font-size: .8rem; color: var(--text3); padding: 8px 0; }
.alarm-schedule-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px;
}
.alarm-sch-icon { color: #e74c3c; font-size: 1rem; flex-shrink: 0; }
.alarm-sch-info { flex: 1; min-width: 0; }
.alarm-sch-title { font-size: .85rem; font-weight: 600; }
.alarm-sch-time  { font-size: .72rem; color: var(--text2); }
@media (max-width: 600px) {
  .alarm-dashboard-card { flex-direction: column; }
  .alarm-dash-left { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
  .alarm-big-btn { width: 80px; height: 72px; }
  .alarm-dash-hint { max-width: 180px; text-align: left; }
}

/* ===== ALARM MODAL STYLES ===== */
.alarm-sound-opt {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 6px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg3); cursor: pointer; font-size: .85rem;
  transition: border-color .2s, background .2s;
}
.alarm-sound-opt:has(input:checked) { border-color: #e74c3c; background: rgba(231,76,60,.1); color: #e74c3c; }
.alarm-sound-opt input { display: none; }
.alarm-day-opt { display: flex; align-items: center; gap: 4px; font-size: .82rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); }
.alarm-day-opt:has(input:checked) { border-color: var(--gold); background: rgba(212,175,55,.12); color: var(--gold); }
.alarm-send-btn {
  background: linear-gradient(135deg, #b8000a, #e74c3c); color: #fff; border: none;
  flex: 1; font-weight: 700;
}

/* ===== BOTTOM NAV (semua layar) ===== */
.admin-bottom-nav {
  display: flex;
  flex-shrink: 0;
  height: 58px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  align-items: stretch;
  position: relative;
}
.admin-bottom-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.abn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: .64rem; font-weight: 500; font-family: inherit;
  padding: 4px 2px; transition: color .15s; position: relative;
  border-radius: 0;
}
.abn-item i { font-size: 1.2rem; }
.abn-item.active { color: var(--gold); }
.abn-item.active i { filter: drop-shadow(0 0 6px var(--gold-glow)); }
#navBtnPengaturan { display: none; }
body.role-admin #navBtnPengaturan { display: flex; }

/* Darurat / Panic center button */
.abn-panic-nav {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 4px 2px; position: relative;
}
.abn-panic-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,59,59,.12); border: 2px solid rgba(255,59,59,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--red); margin-bottom: 2px; transition: all .15s;
}
.abn-panic-nav.active .abn-panic-icon,
.abn-panic-icon.active {
  background: var(--red); color: #fff;
  box-shadow: 0 0 14px rgba(255,59,59,.5);
  border-color: var(--red);
}
.abn-panic-label {
  font-size: .64rem; font-weight: 500; color: var(--red);
}
.abn-panic-nav.active .abn-panic-label { color: var(--red); }
.abn-badge {
  position: absolute; top: 5px; right: calc(50% - 18px);
  background: var(--red); color: #fff; font-size: .5rem; font-weight: 700;
  border-radius: 6px; padding: 1px 4px; line-height: 1.2; min-width: 14px; text-align: center;
}

/* ===== JEMAAH TABLE: username badge ===== */
.user-cred-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(46,204,113,.12); color: #2ecc71; border: 1px solid rgba(46,204,113,.3);
  border-radius: 12px; padding: 2px 8px; font-size: .7rem; font-weight: 600;
}
.no-cred-badge {
  display: inline-flex; align-items: center; gap: 4px;
  color: #555; font-size: .7rem;
}

@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(46,204,113,.3); }
  50%      { box-shadow: 0 0 0 5px rgba(46,204,113,.0); }
}