/**
 * Connected ETC — Design System v5
 * AGGRESSIVE overlay — overrides server CSS variables + broad element targeting
 * v4: Force button colors, heading colors, blue→navy catch-all
 * v5: FIX monitor cards — removed [class*="card"] overbroad selector,
 *     strip borders from agent card children, let server layout breathe
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap');

/* ============================================================================
   OVERRIDE SERVER CSS VARIABLES
   The server inline styles use var(--font), var(--navy), etc.
   By overriding at :root, changes cascade through ALL inline rules.
   ============================================================================ */
:root {
  /* Override server's font variable to use Sora */
  --font: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-brand: 'Carrol', 'Space Grotesk', sans-serif !important;
  --font-mono: 'Source Code Pro', monospace !important;

  /* Design system tokens */
  --ds-bg: #F5F5F5;
  --ds-card: #FFFFFF;
  --ds-border: #E5E5E5;
  --ds-header: #0A0A0A;
  --ds-text: #111111;
  --ds-secondary: #888888;
  --ds-muted: #BBBBBB;
  --ds-accent: #06B6D4;
  --ds-accent-hover: #0891B2;
  --ds-success: #22C55E;
  --ds-warning: #EAB308;
  --ds-danger: #EF4444;
}

/* ============================================================================
   ALL HEADINGS — Force Source Code Pro across entire admin
   Server uses h2/h3/h4 for section titles like "CALL HISTORY", "AGENTS", etc.
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Code Pro', monospace !important;
  letter-spacing: 0.5px !important;
  color: #111111 !important;
}

/* ============================================================================
   TOPBAR / HEADER BRAND
   ============================================================================ */
.topbar,
.header {
  background: var(--ds-header) !important;
  position: relative !important;
}

.topbar::after,
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-accent), transparent);
  opacity: 0.15;
}

/* Brand lockup (injected by brand-header.js) */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0;
}

.brand-c, .brand-rest {
  font-family: 'Carrol', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: #fff;
}

.brand-c { margin-right: -0.08em; }

.brand-etc {
  font-family: 'Carrol', 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 2.5px;
  opacity: 0.3;
  color: #fff;
}

.brand-subtitle {
  font-family: 'Source Code Pro', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 2px;
  margin-left: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Globe */
.globe-wrap {
  position: relative;
  display: inline-block;
  margin: 0 -1px;
}

.globe {
  position: relative;
  transform-style: preserve-3d;
  animation: globeSpin 14s linear infinite;
}

@keyframes globeSpin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* Header right — status, badges, buttons */
.topbar button,
.header button:not(.brand-lockup *) {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 0.2s !important;
}

.topbar button:hover,
.header button:not(.brand-lockup *):hover {
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* ============================================================================
   LIVE STATUS STRIP — Fix visibility
   These are the stats below the tab bar: LIVE, Active Calls, Agents Ready, etc.
   ============================================================================ */
.live-strip,
.live-bar,
[class*="live-strip"],
[class*="live-bar"],
[class*="status-strip"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  color: #666 !important;
  padding: 6px 28px !important;
}

.live-strip strong,
.live-bar strong,
.live-strip b,
.live-bar b {
  color: #111 !important;
  font-weight: 600 !important;
}

.live-dot,
.live-strip [class*="dot"],
.live-bar [class*="dot"] {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--ds-success) !important;
}

.live-label,
.live-strip [class*="label"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #bbb !important;
}

.live-stat,
.live-strip span,
.live-bar span {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  color: #888 !important;
}

.live-stat strong,
.live-strip span strong,
.live-bar span strong {
  color: #111 !important;
}

/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */
.nav-bar,
.nav-tabs,
[class*="nav-bar"],
[class*="nav-tabs"] {
  background: #fafafa !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

.nav-bar a,
.nav-bar > div,
.nav-bar > span,
.nav-tabs a,
.nav-tabs > div,
.nav-tab,
.tab {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 13px !important;
  color: #888 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

.nav-bar a:hover,
.nav-bar > div:hover,
.nav-tabs a:hover,
.nav-tabs > div:hover,
.nav-tab:hover,
.tab:hover {
  color: #111 !important;
}

.nav-bar a.active,
.nav-bar > div.active,
.nav-tabs a.active,
.nav-tabs > div.active,
.nav-tab.active,
.tab.active {
  color: #111 !important;
  border-bottom-color: var(--ds-accent) !important;
}

/* ============================================================================
   MONITOR PAGE — AGENT CARDS
   v5: DO NOT force flex/grid on cards — let server layout breathe.
   Only style the TOP-LEVEL card container, never nested children.
   ============================================================================ */

/* Style top-level agent cards only — white bg, border, rounded */
.agent-card,
.monitor-card {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  color: #111 !important;
}

.agent-card:hover,
.monitor-card:hover {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 2px 8px rgba(6,182,212,0.1) !important;
}

/* CRITICAL: Undo the damage from [class*="card"] on nested elements inside agent cards.
   The server nests divs inside cards that also match [class*="card"].
   Strip borders/backgrounds from ALL children inside agent cards. */
.agent-card > *,
.agent-card div,
.agent-card span,
.agent-card p {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Agent name */
.agent-card h3,
.agent-card h4,
.agent-card .name,
.agent-card [class*="name"] {
  font-family: 'Sora', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111 !important;
  margin-bottom: 2px !important;
}

/* Agent extension number */
.agent-card .ext,
.agent-card [class*="ext"],
.agent-card small {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  color: #888 !important;
}

/* Agent status text */
.agent-card [class*="status"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ============================================================================
   MONITOR PAGE — STAT NUMBERS AT TOP
   ============================================================================ */
.stat-value,
.stat-number,
[class*="stat-val"],
[class*="stat-num"] {
  font-family: 'Source Code Pro', monospace !important;
  font-weight: 600 !important;
  color: #111 !important;
}

.stat-label,
.stat-title,
[class*="stat-lab"],
[class*="stat-tit"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  color: #aaa !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ============================================================================
   CAMPAIGN ITEMS / SIDEBAR
   ============================================================================ */
.campaign-item,
[class*="campaign-item"],
[class*="campaign_item"],
.sidebar-item {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  padding: 14px !important;
}

.campaign-item:hover,
[class*="campaign-item"]:hover,
.sidebar-item:hover {
  border-color: var(--ds-accent) !important;
  box-shadow: 0 2px 8px rgba(6,182,212,0.1) !important;
}

.campaign-item.active,
.campaign-item.selected,
.sidebar-item.active {
  border-color: var(--ds-accent) !important;
  background: #f0f9fb !important;
}

/* ============================================================================
   ALL LABELS — Source Code Pro, uppercase
   ============================================================================ */
label {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #aaa !important;
}

/* ============================================================================
   BADGES — Status, Disposition, Role
   ============================================================================ */

/* Running / Active */
[class*="badge-running"],
[class*="badge-active"],
[class*="status-running"] {
  background: rgba(34,197,94,0.15) !important;
  color: #16a34a !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  border: none !important;
  text-transform: uppercase !important;
}

/* Paused */
[class*="badge-paused"],
[class*="status-paused"] {
  background: rgba(234,179,8,0.15) !important;
  color: #d97706 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  border: none !important;
  text-transform: uppercase !important;
}

/* Completed / Done */
[class*="badge-completed"],
[class*="badge-done"],
[class*="status-completed"] {
  background: rgba(200,200,200,0.15) !important;
  color: #666 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  border: none !important;
  text-transform: uppercase !important;
}

/* Admin badge */
[class*="badge-admin"],
[class*="role-admin"],
.badge.admin {
  background: rgba(239,68,68,0.15) !important;
  color: #dc2626 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

/* Agent badge */
[class*="badge-agent"],
[class*="role-agent"],
.badge.agent {
  background: rgba(34,197,94,0.15) !important;
  color: #16a34a !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

/* Call direction badges */
[class*="badge-in"],
.dir-in {
  color: #06B6D4 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
}

[class*="badge-out"],
.dir-out {
  color: #22C55E !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
}

/* Disposition badges - these show as plain text in the server */
[class*="disposition"],
td:nth-child(7),
td:nth-child(8) {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
}

/* ============================================================================
   TABLES — Force Source Code Pro everywhere
   ============================================================================ */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}

th {
  background: #fafafa !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding: 12px !important;
  text-align: left !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #aaa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

td {
  padding: 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  color: #111 !important;
}

tr:hover {
  background: #f8f8f8 !important;
}

/* ============================================================================
   BUTTONS — AGGRESSIVE color override
   The server uses inline blue backgrounds. We must override ALL buttons.
   Two styles: filled dark (primary) and outlined cyan (secondary).
   ============================================================================ */
button,
.btn,
input[type="submit"] {
  font-family: 'Source Code Pro', monospace !important;
  border-radius: 4px !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
}

/* PRIMARY filled buttons — dark navy background
   Catches: Create Campaign, Add to Queue, Search, Submit, Save, etc. */
button[style*="background"],
.btn-primary,
[class*="btn-primary"],
[class*="btn-create"],
.create-btn,
button[class*="create"],
button[class*="save"],
button[class*="add"],
button[class*="submit"],
input[type="submit"] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

button[style*="background"]:hover,
.btn-primary:hover,
[class*="btn-primary"]:hover,
[class*="btn-create"]:hover,
.create-btn:hover,
button[class*="create"]:hover,
button[class*="save"]:hover,
button[class*="add"]:hover,
button[class*="submit"]:hover,
input[type="submit"]:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

/* OUTLINED accent buttons — cyan border
   Catches: Import CSV, Upload, Export, Filter, etc. */
button[class*="import"],
button[class*="export"],
button[class*="upload"],
button[class*="filter"],
[class*="btn-outline"],
[class*="btn-secondary"] {
  background: transparent !important;
  color: #06B6D4 !important;
  border: 1.5px solid #06B6D4 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

button[class*="import"]:hover,
button[class*="export"]:hover,
button[class*="upload"]:hover,
button[class*="filter"]:hover,
[class*="btn-outline"]:hover,
[class*="btn-secondary"]:hover {
  background: rgba(6,182,212,0.08) !important;
}

/* SEARCH button — small cyan filled */
button[class*="search"],
.search-btn,
[class*="btn-search"] {
  background: #06B6D4 !important;
  color: #FFFFFF !important;
  border: 1px solid #06B6D4 !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

button[class*="search"]:hover,
.search-btn:hover,
[class*="btn-search"]:hover {
  background: #0891B2 !important;
  border-color: #0891B2 !important;
}

/* CATCH-ALL: Any remaining button with server's blue inline style */
#app button[style],
.content button[style],
main button[style],
section button[style] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ============================================================================
   FORM INPUTS
   ============================================================================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="password"],
select,
textarea {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ds-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.1) !important;
}

/* ============================================================================
   VOICEMAIL PAGE — Style the voicemail list items
   ============================================================================ */
[class*="voicemail-item"],
[class*="vm-item"],
[class*="voicemail"] li,
[class*="voicemail-list"] > div {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 14px 0 !important;
  font-family: 'Source Code Pro', monospace !important;
}

[class*="voicemail"] [class*="name"],
[class*="voicemail"] [class*="number"],
[class*="voicemail"] [class*="caller"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #111 !important;
}

[class*="voicemail"] [class*="date"],
[class*="voicemail"] [class*="time"],
[class*="voicemail"] [class*="ext"],
[class*="voicemail"] [class*="meta"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 11px !important;
  color: #888 !important;
}

/* ============================================================================
   ADMIN BADGE IN TOPBAR
   ============================================================================ */
.topbar [class*="badge"],
.header [class*="badge"],
.topbar .admin-badge,
.topbar [class*="role"] {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 9px !important;
  padding: 3px 8px !important;
  background: rgba(6,182,212,0.15) !important;
  color: #06B6D4 !important;
  border-radius: 3px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border: none !important;
}

/* ============================================================================
   STATUS DOTS
   ============================================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

[class*="status-dot"],
[class*="status-indicator"] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

[class*="status-dot"][class*="online"],
[class*="status-indicator"][class*="online"] {
  background: var(--ds-success) !important;
  animation: pulse 2s infinite !important;
}

[class*="status-dot"][class*="offline"],
[class*="status-indicator"][class*="offline"] {
  background: #999 !important;
}

[class*="status-dot"][class*="oncall"],
[class*="status-indicator"][class*="oncall"] {
  background: var(--ds-warning) !important;
}

/* ============================================================================
   PHONE ELEMENTS (within admin dashboard Phone tab)
   ============================================================================ */
.phone-frame,
.phone-widget,
.softphone {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
}

.dialpad-btn,
.dial-btn {
  background: #f5f5f5 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 4px !important;
  font-family: 'Source Code Pro', monospace !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.dialpad-btn:hover { border-color: var(--ds-accent) !important; }
.dialpad-btn:active { background: var(--ds-accent) !important; color: #fff !important; }

/* ============================================================================
   CARDS & PANELS — Generic white card styling
   v5: REMOVED [class*="card"] — it was too broad and put borders on
   every nested div inside cards, breaking the monitor page layout.
   Only target specific top-level containers now.
   ============================================================================ */
.card,
.panel,
.section-card,
.content-card {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
}

/* ============================================================================
   CATCH-ALL: Override any remaining server blue (#007bff, #0d6efd, etc.)
   The server uses Bootstrap-style blue on many elements. Nuke it.
   ============================================================================ */

/* Any anchor/link that the server colors blue */
a {
  color: var(--ds-accent) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--ds-accent-hover) !important;
}

/* Override Bootstrap blue background utilities */
[style*="background-color: rgb(13, 110, 253)"],
[style*="background-color: #007bff"],
[style*="background-color: #0d6efd"],
[style*="background: rgb(13, 110, 253)"],
[style*="background: #007bff"],
[style*="background: #0d6efd"] {
  background-color: #0A0A0A !important;
  background: #0A0A0A !important;
}

/* Override Bootstrap blue border */
[style*="border-color: #007bff"],
[style*="border-color: #0d6efd"] {
  border-color: var(--ds-accent) !important;
}

/* Override Bootstrap blue text */
[style*="color: #007bff"],
[style*="color: #0d6efd"] {
  color: var(--ds-accent) !important;
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ============================================================================
   LOGIN PAGE — Styles for /dialer/login
   ============================================================================ */
.login-card {
  border-radius: 12px !important;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25) !important;
}

.login-card .logo h1,
.logo h1 {
  font-family: 'Carrol', 'Space Grotesk', sans-serif !important;
  letter-spacing: 2px !important;
}

.login-card .logo p,
.logo p {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 12px !important;
  color: #888 !important;
}

.login-card .form-group label,
.form-group label {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #aaa !important;
}

.login-card .form-group input {
  font-family: 'Source Code Pro', monospace !important;
  border-radius: 6px !important;
}

.btn-login {
  font-family: 'Source Code Pro', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 6px !important;
}