/* ══════════════════════════════════════════════════════════════
   ProBroker Brand Theme — Command Center CRM
   Applied as override layer over style.css
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --navy:        #1B3A5C;
  --navy2:       #224672;
  --navy3:       #2a5285;
  --sky-blue:    #5DD4F0;
  --gold:        #D4B06A;
  --gold2:       #e0c080;
  --white:       #FFFFFF;
  --offwhite:    #F5F7FA;
  --light-gray:  #F5F7FA;
  --muted:       #6b7a95;
  --border:      #E0E6ED;
  --text-dark:   #1B3A5C;
  --text-body:   #444444;
  /* keep semantic colors */
  --red:         #e53e3e;
  --red-bg:      #fff5f5;
  --red-brd:     #fed7d7;
  --orange:      #dd6b20;
  --orange-bg:   #fffaf0;
  --orange-brd:  #fbd38d;
  --blue:        #2b6cb0;
  --blue-bg:     #ebf8ff;
  --blue-brd:    #bee3f8;
  --purple:      #6b46c1;
  --purple-bg:   #faf5ff;
  --purple-brd:  #d6bcfa;
  --green:       #38a169;
}

/* ── Base ──────────────────────────────────────────────────── */
html, body {
  background: var(--light-gray);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--sky-blue); }
a:hover { color: #3abdd8; }

/* ── Sidebar ───────────────────────────────────────────────── */
#sidebar {
  background: var(--navy);
  box-shadow: 3px 0 12px rgba(27, 58, 92, 0.12);
}

.sidebar-logo .brand { color: #fff; font-family: Georgia, serif; }
.sidebar-logo .tagline { color: rgba(255, 255, 255, 0.5); }

.nav-item {
  color: rgba(255, 255, 255, 0.7);
  border-left: 3px solid transparent;
}
.nav-item:hover {
  color: #fff;
  background: rgba(93, 212, 240, 0.08);
}
.nav-item.active {
  color: var(--sky-blue);
  border-left-color: var(--sky-blue);
  background: rgba(93, 212, 240, 0.1);
}
.nav-badge {
  background: var(--red);
}

.sidebar-footer { color: rgba(255, 255, 255, 0.3); }

/* ── Header ────────────────────────────────────────────────── */
#header {
  background: var(--navy);
  border-bottom: 1px solid rgba(27, 58, 92, 0.2);
}

.greeting          { color: #fff; font-family: Georgia, serif; }
.greeting span     { color: var(--sky-blue); }
.header-meta       { color: rgba(255, 255, 255, 0.6); }

/* ── Page background ───────────────────────────────────────── */
#content { background: var(--light-gray); }

/* ── Section titles ────────────────────────────────────────── */
.section-title {
  color: var(--navy);
  font-family: Georgia, serif;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: var(--sky-blue);
  color: var(--navy);
  font-weight: 700;
}
.btn-primary:hover { opacity: 1; background: #4ac5e3; }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); opacity: 1; }

/* ── Action cards ──────────────────────────────────────────── */
.action-card {
  background: var(--white);
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.08);
}
.action-card-name { color: var(--navy); }
.action-card-company { color: var(--muted); }

/* ── Dashboard stat cards ──────────────────────────────────── */
.digest-card {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.06);
}
.digest-card h3 {
  color: var(--navy);
  font-family: Georgia, serif;
}
.digest-num { color: var(--sky-blue); font-weight: 800; }
.digest-row { border-bottom-color: var(--border); }

/* ── Contact cards ─────────────────────────────────────────── */
.contact-card {
  background: var(--white);
  border-top: 3px solid var(--navy);
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.08);
}
.contact-card:hover { box-shadow: 0 4px 16px rgba(27, 58, 92, 0.12); }
.contact-name    { color: var(--navy); font-family: Georgia, serif; }
.contact-company { color: var(--muted); }
.contact-domain  { color: var(--sky-blue); }

/* Stage badges */
.stage-Prospect       { background: #edf2f7; color: #718096; }
.stage-Contacted      { background: var(--blue-bg); color: var(--blue); }
.stage-Replied        { background: #f0fff4; color: var(--green); }
.stage-Negotiating    { background: var(--orange-bg); color: var(--orange); }
.stage-Under-Contract { background: var(--purple-bg); color: var(--purple); }
.stage-Closed         { background: var(--navy); color: var(--sky-blue); }

/* ── Pipeline / Kanban ─────────────────────────────────────── */
.kanban-col { background: #eef0f7; border-radius: 10px; }
.kanban-col-header { color: var(--navy); border-bottom-color: var(--border); }
.col-count  { background: var(--navy); color: #fff; }

.deal-card {
  background: var(--white);
  border-left: 3px solid var(--sky-blue);
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.08);
}
.deal-card:hover { box-shadow: 0 4px 20px rgba(27, 58, 92, 0.12); }
.deal-card.stale { border-left-color: var(--orange); }
.deal-domain { color: var(--navy); }
.deal-buyer  { color: var(--muted); }

/* ── Status indicators ─────────────────────────────────────── */
/* Active → Gold */
.badge-orange,
.action-group-badge.badge-orange { background: var(--gold); color: var(--white); }

/* New / active → Sky Blue */
.badge-blue,
.action-group-badge.badge-blue { background: var(--sky-blue); color: var(--navy); }

/* ── Inquiry cards ─────────────────────────────────────────── */
.inquiry-card {
  background: var(--white);
  border-left: 4px solid var(--sky-blue);
  box-shadow: 0 1px 4px rgba(27, 58, 92, 0.08);
}
.inquiry-domain { color: var(--navy); font-family: Georgia, serif; }
.inquiry-from   { color: var(--muted); }
.inquiry-offer  { color: var(--gold); }

/* ── Bridge stats ──────────────────────────────────────────── */
.bridge-stat {
  background: var(--light-gray);
  border: 1px solid var(--border);
}
.bridge-stat-label { color: var(--muted); }
.bridge-stat-value { color: var(--navy); }

.bridge-input:focus,
.bridge-select:focus {
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px rgba(93, 212, 240, 0.12);
}

/* ── Form fields ───────────────────────────────────────────── */
.form-field label { color: var(--navy); font-weight: 600; }
.form-field input,
.form-field select,
.form-field textarea {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-body);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px rgba(93, 212, 240, 0.12);
  outline: none;
}

.log-form select,
.log-form input,
.log-form textarea {
  border-color: var(--border);
  background: var(--white);
  color: var(--text-body);
}
.log-form select:focus,
.log-form input:focus,
.log-form textarea:focus {
  border-color: var(--sky-blue);
}

.search-input {
  background: var(--white);
  border-color: var(--border);
  color: var(--text-body);
}
.search-input:focus {
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px rgba(93, 212, 240, 0.12);
  outline: none;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal {
  background: var(--white);
  box-shadow: 0 20px 60px rgba(27, 58, 92, 0.2);
}
.modal-title { color: var(--navy); font-family: Georgia, serif; }
.modal-section-title { color: var(--muted); }
.activity-item { background: var(--light-gray); }
.field label { color: var(--muted); }

.stage-btn {
  background: var(--light-gray);
  border: 1px solid var(--border);
  color: var(--navy);
}
.stage-btn.active {
  background: var(--navy);
  color: var(--sky-blue);
  border-color: var(--navy);
}

/* ── Alert / success messages ──────────────────────────────── */
.live-call-overlay {
  background: var(--red-bg);
  border-color: var(--red-brd);
  border-left-color: var(--red);
}

/* ── Toast ─────────────────────────────────────────────────── */
#toast {
  background: var(--navy);
  color: #fff;
}
#toast.success { border-left-color: var(--green); }
#toast.error   { border-left-color: var(--red); }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c9d6; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

/* ── Table (if any) ────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
thead th {
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:nth-child(even) { background: var(--light-gray); }
tbody tr:hover { background: rgba(93, 212, 240, 0.05); }
tbody td { padding: 10px 14px; color: var(--text-body); }