:root{
  --bg:#0f172a;           /* slate-900 */
  --card:#111827;       /* gray-900 */
  --muted:#94a3b8;      /* slate-400 */
  --text:#e5e7eb;       /* gray-200 */
  --accent:#3b82f6;     /* blue-500 */
  --accent-2:#22c55e;   /* green-500 */
  --warn:#f59e0b;       /* amber-500 */
  --danger:#ef4444;     /* red-500 */
  --oncall:#1e293b;     /* slate-800 */
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
body{ display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; position:sticky; top:0; background:rgba(15,23,42,0.85); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(148,163,184,0.1);
  flex-wrap: wrap; gap: 10px;
}
.brand-kpis {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.brand{ font-weight:700; letter-spacing:.3px; font-size: 16px; }
.controls{ display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.control{ display:flex; flex-direction:column; gap:6px; }
.control label{ font-size:12px; color:var(--muted); }
input, select{
  background:var(--card); color:var(--text); border:1px solid rgba(148,163,184,.15);
  border-radius:10px; padding:8px 10px; min-width:160px;
}
#calendarDay::-webkit-calendar-picker-indicator{
  filter: brightness(0) invert(1);
}
.btn{
  background:var(--accent); color:white; border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  height: 37px; /* Align with inputs */
}
.btn:hover{ filter:brightness(1.05); }

.topbar-kpis {
  display: flex;
  gap: 24px;
}
.topbar .kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.topbar .kpi-label {
  color: var(--muted);
  font-size: 14px;
}
.topbar .kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.dashboard-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: row;
}
.dashboard-wrapper.single-dept {
  flex-direction: row;
}
.dashboard-wrapper .live-calls-panel {
  flex: 0 0 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(148,163,184,0.12);
  background: rgba(17,24,39,0.5);
}
.live-calls-panel.hidden {
  display: none !important;
}
.live-calls-title {
  margin: 0;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  color: var(--text);
  flex-shrink: 0;
}
.live-calls-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.live-calls-empty {
  color: var(--muted);
  font-size: 15px;
  padding: 12px;
}
.live-calls-list .call-detail-table {
  font-size: 15px;
}
.live-calls-list .call-detail-table th,
.live-calls-list .call-detail-table td {
  padding: 8px 10px;
}
.call-row-active {
  background: rgba(34,197,94,0.08);
  border-left: 3px solid var(--accent-2);
}
.call-row-just-ended {
  opacity: 0.55;
  background: rgba(148,163,184,0.04);
  border-left: 3px solid rgba(148,163,184,0.25);
  transition: opacity 0.6s ease;
}
.dashboard-main {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12-column master grid */
  gap: 16px;
  padding: 16px;
  align-items: start;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

/* Compact tiles when 2+ departments or all selected—resize to fit viewport */
.dashboard-main.multi-dept-view .tile {
  min-height: 85px;
  padding: 10px;
}
.dashboard-main.multi-dept-view .tile .stats { margin-top: 8px; gap: 6px; }
.dashboard-main.multi-dept-view .tile .stat { padding: 6px; }
.dashboard-main.multi-dept-view .tile .stat .value { font-size: 15px; }
.dashboard-main.multi-dept-view .tile .user { font-size: 14px; }
.dashboard-main.multi-dept-view .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.department-block {
  grid-column: span 12; /* Default to full width */
  min-width: 0;
}

.department-block-col {
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 16px;
  padding: 14px;
  background: rgba(17,24,39,.6);
}

.grid-vertical {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}

.department-title {
  color: var(--text);
  margin: 0 0 12px 4px;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(148,163,184,.1);
  padding-bottom: 8px;
}
.department-title-clickable {
  cursor: pointer;
}
.department-title-clickable:hover {
  color: var(--accent);
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tile{
  background:var(--card);
  border:1px solid rgba(148,163,184,.12);
  border-radius:16px; padding:14px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
  min-height:120px; display:flex; flex-direction:column; justify-content:space-between;
  cursor: pointer;
}
.tile:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

.tile .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tile .user{
  font-weight: 700;
  word-break: break-all;
  font-size: 16px;
}
.badge{
  padding:4px 8px;
  border-radius:999px; font-size:12px;
  border:1px solid rgba(148,163,184,.15); color:var(--muted);
  min-width: 60px; /* Ensure space for timer */
  text-align: center;
}
.badge.on{
  color:white;
  border-color:transparent;
  background:linear-gradient(90deg, var(--accent-2), #16a34a);
  font-size: 14px;
  font-weight: 700;
}
.badge.off{ color:var(--muted); background:transparent; visibility:hidden; }

.stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.stat{
  flex:1; background:rgba(148,163,184,.06); border:1px solid rgba(148,163,184,.12);
  border-radius:12px; padding:10px; text-align:center;
}
.stat .label{ font-size:12px; color:var(--muted); }
.stat .value{ font-size:18px; font-weight:700; margin-top:2px; }

.oncall{
  background:var(--oncall);
  border-color:rgba(34,197,94,.6);
  box-shadow: 0 0 0 2px rgba(34,197,94,.15) inset, 0 8px 20px rgba(0,0,0,.25);
}

.tile.just-ended {
  border-color: rgba(245,158,11,.6);
  box-shadow: 0 0 0 2px rgba(245,158,11,.15) inset, 0 8px 20px rgba(0,0,0,.25);
}
.badge.just-ended {
  color: var(--warn);
  border-color: rgba(245,158,11,.4);
  background: rgba(245,158,11,.12);
  font-size: 14px;
  font-weight: 700;
}

/* Per docs/prompts/PROMPT-RINGING-COLOR-AND-NO-ANSWER-LABEL.md §1 / operator
   decisions §1–§4: a user whose phone is ringing paints the tile with a
   solid yellow border (Tailwind yellow-500 #eab308) plus a subtle 1.5s
   border-color pulse so it reads as "active & alerting" rather than
   "frozen amber leftover". Only border-color animates (cheap; no
   compositor reflow) — do not promote to box-shadow / transform on a
   30-tile dashboard view.

   Source-order precedence is intentional: this rule sits BELOW
   .tile.just-ended and ABOVE no later override, so the cascade
   resolves to oncall (defined above .tile.just-ended) > ringing >
   just-ended > base when multiple classes are toggled on the same
   element. The JS class-toggling code in app.js also enforces
   precedence by short-circuit (oncall first, ringing only if !oncall,
   etc.) — the CSS source order is the second line of defence. */
.tile.ringing {
  border-color: #eab308;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, .18) inset, 0 8px 20px rgba(0, 0, 0, .25);
  animation: tile-ring-pulse 1.5s ease-in-out infinite;
}
@keyframes tile-ring-pulse {
  0%, 100% { border-color: #eab308; }
  50%      { border-color: #facc15; }
}
/* Operator decision §3: badge stays hidden during ring — only the yellow
   tile border indicates state. Once the leg flips to on_call the existing
   .badge.on style takes over and the green "On Call M:SS" badge renders. */
.badge.ringing { visibility: hidden; }

.footer{ padding:10px 16px; color:var(--muted); border-top:1px solid rgba(148,163,184,.1); }

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  padding: 20px;
  width: 90%;
  max-width: 400px;
}
.modal-large { max-width: 800px; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-title { margin: 0; font-size: 18px; }
.close-btn {
  background: none; border: none; font-size: 28px;
  color: var(--muted); cursor: pointer;
}
.modal-divider {
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  margin: 12px 0;
}
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
.department-list {
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 8px; /* For scrollbar */
}
.department-option {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.department-option:hover {
  background: rgba(255,255,255,0.05);
}
.department-option input {
  margin-right: 12px;
}

.hidden { display: none; }

/* Call Detail Table */
.call-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.call-detail-table th, .call-detail-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}
.call-detail-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.direction-in { color: var(--accent-2); }
.direction-out { color: var(--accent); }

/* Call type badge for internal calls */
.call-type-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 5px;
  white-space: nowrap;
}
.call-type-badge.internal {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
/* Per docs/prompts/PROMPT-FIX-MISSED-CALLS-AND-HOTDESK-ATTRIBUTION.md §8:
   marks unanswered legs in the user-history table. */
.call-type-badge.missed {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
/* Per docs/prompts/PROMPT-RINGING-COLOR-AND-NO-ANSWER-LABEL.md §3 / operator
   decision §6: outbound unanswered legs (the user dialled, callee did not
   pick up) render "No Answer" in the call-history modals — distinct from
   inbound .missed (red) so floor managers can tell at a glance whether the
   user failed to pick up vs. failed to reach someone. Internal unanswered
   calls always render on the caller's row with direction='outbound' and
   therefore correctly map here too (operator decision §7). Mirrors the
   .call-type-badge.missed shape so future readers see the parallel. */
.call-type-badge.no-answer {
  background: rgba(245, 158, 11, .15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .35);
}