/*
 * LeadHunter Pro v3 — Application CSS
 * Requires: tokens.css, Bootstrap 5.3, Bootstrap Icons
 */

/* ─── Base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background:  var(--lhp-bg);
  color:       var(--lhp-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size:   14px;
  margin:      0;
}

a {
  color: var(--lhp-accent);
}

/* ─── Sidebar ───────────────────────────────────────────────────────── */
.lhp-sidebar {
  position:   fixed;
  left:       0;
  top:        0;
  width:      var(--lhp-sidebar-w);
  height:     100vh;
  background: var(--lhp-surface);
  border-right: 1px solid var(--lhp-border);
  overflow-y: auto;
  z-index:    1000;
  display:    flex;
  flex-direction: column;
}

.lhp-logo {
  padding:     1rem;
  font-weight: 700;
  font-size:   16px;
  color:       var(--lhp-accent);
  flex-shrink: 0;
  user-select: none;
  letter-spacing: -0.01em;
}

.lhp-nav {
  list-style: none;
  padding:    0;
  margin:     0;
  flex: 1;
}

.lhp-nav-section {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--lhp-text-faint);
  padding:        12px 24px 4px;
}

.lhp-nav-item a {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 16px;
  color:           var(--lhp-text-muted);
  text-decoration: none;
  border-radius:   var(--lhp-radius-sm);
  margin:          2px 8px;
  font-size:       13px;
  transition:      background 0.15s, color 0.15s;
}

.lhp-nav-item a:hover,
.lhp-nav-item a.active {
  background:  var(--lhp-accent-muted);
  color:       var(--lhp-accent);
  font-weight: 500;
}

.lhp-nav-item a .bi {
  font-size: 15px;
  flex-shrink: 0;
}

/* ─── Main content area ─────────────────────────────────────────────── */
.lhp-main {
  margin-left: var(--lhp-sidebar-w);
  padding:     24px;
  min-height:  100vh;
}

/* ─── Top bar ───────────────────────────────────────────────────────── */
.lhp-topbar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   24px;
  padding-bottom:  16px;
  border-bottom:   1px solid var(--lhp-border);
  gap:             12px;
  flex-wrap:       wrap;
}

.lhp-page-title {
  font-size:   20px;
  font-weight: 700;
  color:       var(--lhp-text);
  margin:      0;
}

.lhp-topbar-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

/* ─── Cards ─────────────────────────────────────────────────────────── */
.lhp-card {
  background:    var(--lhp-surface);
  border:        1px solid var(--lhp-border);
  border-radius: var(--lhp-radius);
  padding:       16px 20px;
}

.lhp-card-header {
  font-weight:    600;
  font-size:      13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--lhp-text-muted);
  margin-bottom:  12px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--lhp-border);
}

/* ─── Table ─────────────────────────────────────────────────────────── */
.lhp-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}

.lhp-table th {
  background:     var(--lhp-surface-2);
  font-weight:    600;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          var(--lhp-text-muted);
  padding:        8px 12px;
  border-bottom:  2px solid var(--lhp-border);
  white-space:    nowrap;
}

.lhp-table td {
  padding:        8px 12px;
  border-bottom:  1px solid var(--lhp-border);
  vertical-align: middle;
}

.lhp-table tbody tr:hover {
  background: var(--lhp-surface-2);
}

.lhp-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Status badges ─────────────────────────────────────────────────── */
[class^="badge-status-"],
[class*=" badge-status-"] {
  display:       inline-block;
  font-size:     11px;
  padding:       2px 8px;
  border-radius: 99px;
  font-weight:   600;
  white-space:   nowrap;
  line-height:   1.6;
}

.badge-status-new        { background: #E2E8F0; color: #475569; }
.badge-status-scanned    { background: #E0F2FE; color: #0369A1; }
.badge-status-qualified  { background: #DCFCE7; color: #15803D; }
.badge-status-drafted    { background: #EDE9FE; color: #7C3AED; }
.badge-status-approved   { background: #DCFCE7; color: #15803D; }
.badge-status-contacted  { background: #FFEDD5; color: #C2410C; }
.badge-status-replied    { background: #E0F2FE; color: #0369A1; }
.badge-status-meeting    { background: #D1FAE5; color: #059669; }
.badge-status-won        { background: #BBF7D0; color: #065F46; }
.badge-status-lost       { background: #FEE2E2; color: #B91C1C; }
.badge-status-suppressed { background: #FEE2E2; color: #B91C1C; }
.badge-status-disqualified { background: #E2E8F0; color: #475569; }

[data-bs-theme="dark"] .badge-status-new         { background: #334155; color: #94A3B8; }
[data-bs-theme="dark"] .badge-status-scanned      { background: #0C4A6E; color: #38BDF8; }
[data-bs-theme="dark"] .badge-status-qualified    { background: #14532D; color: #4ADE80; }
[data-bs-theme="dark"] .badge-status-drafted      { background: #3B0764; color: #C084FC; }
[data-bs-theme="dark"] .badge-status-approved     { background: #14532D; color: #4ADE80; }
[data-bs-theme="dark"] .badge-status-contacted    { background: #7C2D12; color: #FB923C; }
[data-bs-theme="dark"] .badge-status-replied      { background: #0C4A6E; color: #38BDF8; }
[data-bs-theme="dark"] .badge-status-meeting      { background: #064E3B; color: #34D399; }
[data-bs-theme="dark"] .badge-status-won          { background: #022C22; color: #6EE7B7; }
[data-bs-theme="dark"] .badge-status-lost         { background: #450A0A; color: #FCA5A5; }
[data-bs-theme="dark"] .badge-status-suppressed   { background: #450A0A; color: #FCA5A5; }
[data-bs-theme="dark"] .badge-status-disqualified { background: #334155; color: #94A3B8; }

/* ─── Signal severity badges ────────────────────────────────────────── */
.badge-critical,
.badge-high,
.badge-medium,
.badge-low {
  display:       inline-block;
  font-size:     11px;
  padding:       2px 8px;
  border-radius: 99px;
  font-weight:   600;
  white-space:   nowrap;
  line-height:   1.6;
  color:         #fff;
}

.badge-critical { background: var(--lhp-critical); }
.badge-high     { background: var(--lhp-high); }
.badge-medium   { background: var(--lhp-medium); }
.badge-low      { background: var(--lhp-low); }

/* ─── Stat cards ─────────────────────────────────────────────────────  */
.lhp-stat-card {
  background:    var(--lhp-surface);
  border:        1px solid var(--lhp-border);
  border-radius: var(--lhp-radius);
  padding:       16px 20px;
  text-align:    center;
}

.lhp-stat-number {
  font-size:   32px;
  font-weight: 700;
  color:       var(--lhp-accent);
  line-height: 1.1;
}

.lhp-stat-label {
  font-size:      12px;
  color:          var(--lhp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top:     4px;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.lhp-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       7px 14px;
  border-radius: var(--lhp-radius-sm);
  border:        1px solid transparent;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  text-decoration: none;
  transition:    background 0.15s, border-color 0.15s, color 0.15s;
  white-space:   nowrap;
  line-height:   1.4;
  font-family:   inherit;
}

.lhp-btn-primary {
  background: var(--lhp-accent);
  color:      #fff;
  border-color: var(--lhp-accent);
}

.lhp-btn-primary:hover {
  background:   var(--lhp-accent-hover);
  border-color: var(--lhp-accent-hover);
  color:        #fff;
}

.lhp-btn-outline {
  background:   transparent;
  color:        var(--lhp-text-muted);
  border-color: var(--lhp-border);
}

.lhp-btn-outline:hover {
  background: var(--lhp-surface-2);
  color:      var(--lhp-text);
}

.lhp-btn-danger {
  background:   #DC2626;
  color:        #fff;
  border-color: #DC2626;
}

.lhp-btn-danger:hover {
  background:   #B91C1C;
  border-color: #B91C1C;
  color:        #fff;
}

.lhp-btn-sm {
  padding:   4px 10px;
  font-size: 12px;
}

/* ─── Form labels ────────────────────────────────────────────────────── */
.lhp-form-label {
  display:        block;
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--lhp-text-muted);
  margin-bottom:  4px;
}

/* ─── Score indicator ────────────────────────────────────────────────── */
.lhp-score {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   13px;
  font-weight: 700;
}

.lhp-score.score-high { color: var(--lhp-low); }      /* 61+ green  */
.lhp-score.score-mid  { color: var(--lhp-medium); }   /* 31-60 amber */
.lhp-score.score-low  { color: var(--lhp-critical); } /* 0-30 red   */

/* ─── Approval queue two-pane ────────────────────────────────────────── */
.lhp-queue-wrap {
  display:               grid;
  grid-template-columns: 1fr 1.5fr;
  gap:                   16px;
  align-items:           start;
}

@media (max-width: 900px) {
  .lhp-queue-wrap {
    grid-template-columns: 1fr;
  }
}

/* ─── Draft body textarea ────────────────────────────────────────────── */
.lhp-draft-body {
  font-family:   monospace;
  font-size:     13px;
  background:    var(--lhp-surface-2);
  border:        1px solid var(--lhp-border);
  border-radius: var(--lhp-radius);
  padding:       12px;
  min-height:    120px;
  resize:        vertical;
  width:         100%;
  color:         var(--lhp-text);
  outline:       none;
  transition:    border-color 0.15s;
}

.lhp-draft-body:focus {
  border-color: var(--lhp-accent);
}

/* ─── Flash alerts ────────────────────────────────────────────────────── */
.lhp-flash {
  padding:       12px 16px;
  border-radius: var(--lhp-radius);
  font-size:     13px;
  margin-bottom: 16px;
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  transition:    opacity 0.4s ease;
}

.lhp-flash-success {
  background:   #DCFCE7;
  color:        #166534;
  border-left:  3px solid #16A34A;
}

.lhp-flash-error {
  background:   #FEE2E2;
  color:        #991B1B;
  border-left:  3px solid #DC2626;
}

.lhp-flash-warning {
  background:   #FFEDD5;
  color:        #9A3412;
  border-left:  3px solid #EA580C;
}

[data-bs-theme="dark"] .lhp-flash-success {
  background: #14532D;
  color:      #86EFAC;
  border-left-color: #4ADE80;
}

[data-bs-theme="dark"] .lhp-flash-error {
  background: #450A0A;
  color:      #FCA5A5;
  border-left-color: #F87171;
}

[data-bs-theme="dark"] .lhp-flash-warning {
  background: #431407;
  color:      #FED7AA;
  border-left-color: #FB923C;
}

/* ─── Empty state ────────────────────────────────────────────────────── */
.lhp-empty-state {
  text-align: center;
  padding:    48px 24px;
  color:      var(--lhp-text-muted);
}

.lhp-empty-icon {
  font-size:     48px;
  display:       block;
  margin-bottom: 12px;
  opacity:       0.5;
}

.lhp-empty-state h5 {
  font-size:   15px;
  font-weight: 600;
  color:       var(--lhp-text-muted);
  margin:      0 0 6px;
}

.lhp-empty-state p {
  font-size: 13px;
  margin:    0;
}

/* ─── Word count helper ──────────────────────────────────────────────── */
.wordcount-display {
  font-size:  11px;
  color:      var(--lhp-text-faint);
  margin-top: 4px;
  text-align: right;
}

/* ─── Mobile overlay ─────────────────────────────────────────────────── */
.lhp-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.4);
  z-index:    999;
}

.lhp-overlay.active {
  display: block;
}

/* ─── Mobile toggle button ───────────────────────────────────────────── */
.lhp-mobile-toggle {
  display:       none;
  position:      fixed;
  top:           12px;
  left:          12px;
  z-index:       1001;
  background:    var(--lhp-accent);
  color:         #fff;
  border:        none;
  border-radius: var(--lhp-radius-sm);
  padding:       6px 10px;
  cursor:        pointer;
  font-size:     18px;
  line-height:   1;
  align-items:   center;
  justify-content: center;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lhp-mobile-toggle {
    display: flex;
  }

  .lhp-sidebar {
    position:   fixed;
    transform:  translateX(-100%);
    transition: transform 0.2s ease;
  }

  .lhp-sidebar.open {
    transform: translateX(0);
  }

  .lhp-main {
    margin-left: 0;
    padding:     16px;
    padding-top: 56px; /* clear hamburger */
  }
}

/* ─── Ajax action row feedback ───────────────────────────────────────── */
.lhp-ajax-action.loading {
  opacity:        0.6;
  pointer-events: none;
}

tr.row-done {
  opacity: 0.45;
}

tr.row-done td {
  text-decoration: line-through;
}

/* ─── Misc utilities ─────────────────────────────────────────────────── */
.text-muted-sm {
  font-size: 12px;
  color:     var(--lhp-text-muted);
}

.lhp-divider {
  border:        none;
  border-top:    1px solid var(--lhp-border);
  margin:        16px 0;
}

.lhp-truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     200px;
}