* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #f4f6f8;
  color: #1c2733;
}

header {
  background: #10263f;
  color: #fff;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

header h1 { margin: 0; font-size: 1.3rem; }
header .subtitle { color: #9fb3c8; font-size: 0.85rem; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.logout-form { margin: 0; }

.nav { display: flex; gap: 0.9rem; margin-left: 1rem; font-size: 0.85rem; }
.nav a { color: #9fb3c8; text-decoration: none; padding-bottom: 0.15rem; }
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; border-bottom: 2px solid #4a90d9; }

.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  margin: 0.4rem 0;
}

#softphone-controls { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---- agent console ---- */

.console-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

#agent-status-badge { margin-left: 0.4rem; }
#agent-mode { margin-left: 0.5rem; font-weight: 400; }

/* An inbound call is the one thing an agent must not misread as an outbound
   dial — they're being called back, and the greeting is different. */
.inbound-banner {
  background: #1c4f9c;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 0.9rem;
}

.pop-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.pop-facts { width: auto; margin-bottom: 0.5rem; }
.pop-facts th { padding-right: 1rem; white-space: nowrap; color: #5b6b7c; }
.pop-facts td { font-weight: 600; }

#wrapup-card { border-top: 2px solid #dde3ea; margin-top: 1rem; padding-top: 0.75rem; }
.wrapup-countdown {
  font-weight: 400;
  font-size: 0.8rem;
  color: #8a6410;
  background: #fdf0d3;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-left: 0.4rem;
}
.disposition-choice.chosen { background: #1666c1; color: #fff; }
#disposition-form .grow { flex: 1 1 16rem; }
#disposition-error { color: #a0302a; }

#notes-form { flex-direction: column; align-items: stretch; }
#notes-text {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid #c6cfd9;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  align-items: flex-start;
}

.panel {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 1rem;
  flex: 1 1 340px;
}

.panel.wide { flex-basis: 100%; }

h2 { margin-top: 0; font-size: 1.05rem; }
h3 { font-size: 0.9rem; margin-bottom: 0.35rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid #eef1f5; }
th { color: #5b6b7c; font-weight: 600; }

tr.selected { background: #eaf3ff; }
tr.clickable { cursor: pointer; }

form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; align-items: flex-end; }
label { display: flex; flex-direction: column; font-size: 0.75rem; color: #5b6b7c; gap: 0.15rem; }
input, select {
  padding: 0.35rem 0.5rem;
  border: 1px solid #c6cfd9;
  border-radius: 5px;
  font-size: 0.85rem;
}

button {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 5px;
  background: #1666c1;
  color: #fff;
  font-size: 0.82rem;
  cursor: pointer;
}
button:hover { background: #0f57a8; }
button.small { padding: 0.2rem 0.55rem; font-size: 0.75rem; }
button.danger { background: #b3352c; }
button.danger:hover { background: #992b23; }
button.ghost { background: #e5ebf2; color: #1c2733; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge.running, .badge.available, .badge.connected { background: #d9f2e2; color: #1c7a41; }
.badge.idle, .badge.offline { background: #e8ecf1; color: #5b6b7c; }
.badge.paused, .badge.reserved, .badge.pending { background: #fdf0d3; color: #8a6410; }
.badge.completed { background: #dbe9ff; color: #1c4f9c; }
.badge.on_call, .badge.voicemail { background: #e6ddfb; color: #5b34a8; }
.badge.abandoned, .badge.failed, .badge.busy, .badge.no_answer, .badge.canceled { background: #fadcda; color: #a0302a; }
/* Disposition categories. */
.badge.sale { background: #d9f2e2; color: #1c7a41; }
.badge.contact { background: #dbe9ff; color: #1c4f9c; }
.badge.callback { background: #fdf0d3; color: #8a6410; }
.badge.no_contact { background: #e8ecf1; color: #5b6b7c; }
.badge.dnc { background: #fadcda; color: #a0302a; }
.badge.other { background: #e8ecf1; color: #5b6b7c; }
.badge.wrap_up { background: #e6ddfb; color: #5b34a8; }

/* Caller-ID coverage tiers: exact area-code match down to no local number. */
.badge.area_code { background: #d9f2e2; color: #1c7a41; }
.badge.state { background: #fdf0d3; color: #8a6410; }
.badge.none { background: #fadcda; color: #a0302a; }

td.at-cap { color: #a0302a; font-weight: 600; }

/* License badges double as revoke buttons, so reset the button chrome. */
.badge.license {
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-right: 0.2rem;
}
.badge.license.ok { background: #d9f2e2; color: #1c7a41; }
.badge.license.expiring { background: #fdf0d3; color: #8a6410; }
.badge.license.expired { background: #fadcda; color: #a0302a; text-decoration: line-through; }
.license-cell { max-width: 12rem; }

.stat-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.stat-row.big .stat { min-width: 130px; padding: 0.7rem 1.1rem; }
.stat-row.big .value { font-size: 1.9rem; }

.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1c7a41;
  margin-right: 0.35rem;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.stat {
  background: #f0f4f9;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  min-width: 90px;
}
.stat.warn { background: #fdf0d3; }
.stat.warn .value { color: #8a6410; }
.stat .value { font-size: 1.25rem; font-weight: 700; }
.stat .label { font-size: 0.7rem; color: #5b6b7c; text-transform: uppercase; letter-spacing: 0.04em; }

.detail-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.detail-columns > div { flex: 1 1 320px; }

.hint { font-size: 0.75rem; color: #7a8a9a; margin: 0.2rem 0; }

.bar-track {
  display: inline-block;
  width: 110px;
  height: 10px;
  background: #eef1f5;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: middle;
}
.bar-fill { height: 100%; background: #1666c1; }
.bar-fill.green { background: #1c7a41; }
.bar-fill.red { background: #b3352c; }

.export-link {
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 0.75rem;
  color: #1666c1;
}

#report-window { font-size: 0.8rem; margin-left: 0.5rem; }

#call-events { margin-top: 0.75rem; border-top: 2px solid #dde3ea; padding-top: 0.5rem; }
#call-events-table td { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; }

footer {
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem;
  color: #7a8a9a;
}