/* ============================================================
   WORTHIT.AI — Dark Theme Overrides
   ============================================================ */

:root {
  --bg:      #001a18;
  --bg2: #002320;
  --bg3: #003330;
  --border:  rgba(51,195,117,.15);
  --border2: rgba(51,195,117,.28);
  --green:   #33C375;
  --green2:  #27a561;
  --gdim: rgba(51,195,117,.1);
  --text:    #fffaf1;
  --text2:   #9db8b5;
  --text3:   #5f8a86;
  --red: #EF4444;
}

/* Force dark theme on all elements */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Alert styles */
.alert {
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}

.alert-error, .alert-danger {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
  color: #EF4444;
}

.alert-success {
  background: rgba(51,195,117,.08);
  border-color: rgba(51,195,117,.25);
  color: var(--green);
}

.alert-info {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.25);
  color: #3B82F6;
}

.alert-warning {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.25);
  color: #F59E0B;
}

/* Links */
a {
  color: var(--green);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #4edb8e;
}

/* Button overrides */
.btn {
  transition: all 0.25s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green2)) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(51,195,117,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(51,195,117,0.4);
}

.btn-secondary {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.btn-secondary:hover {
  border-color: var(--green) !important;
  background: var(--bg2) !important;
}

.btn-ghost {
  background: transparent !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
}

.btn-ghost:hover {
  color: var(--text) !important;
  border-color: var(--border2) !important;
  background: rgba(51,195,117,.05) !important;
}

.btn-danger {
  background: rgba(239,68,68,0.15) !important;
  color: var(--red) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
}

/* Forms */
.form-label {
  color: var(--text2) !important;
}

.form-control, input, textarea, select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--green) !important;
  background: rgba(51,195,117,.04) !important;
  box-shadow: 0 0 0 3px rgba(51,195,117,.09) !important;
}

.form-control::placeholder, input::placeholder {
  color: var(--text3) !important;
}

/* Tables */
table {
  background: transparent !important;
  color: var(--text) !important;
}

table thead {
  background: rgba(0,0,0,.3) !important;
  border-bottom: 1px solid var(--border) !important;
}

table thead th {
  color: var(--text2) !important;
  font-weight: 600;
  padding: 12px;
}

table tbody tr {
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.2s;
}

table tbody tr:hover {
  background: rgba(51,195,117,.05) !important;
}

table tbody td {
  color: var(--text) !important;
  padding: 12px;
}

/* Cards */
.card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.card-glow {
  box-shadow: 0 0 24px rgba(51,195,117,.1) !important;
}

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 600;
}

.badge-green {
  background: rgba(51,195,117,0.15) !important;
  color: var(--green) !important;
}

.badge-red {
  background: rgba(239,68,68,0.12) !important;
  color: var(--red) !important;
}

.badge-yellow {
  background: rgba(245,158,11,0.12) !important;
  color: #F59E0B !important;
}

.badge-blue {
  background: rgba(59,130,246,0.12) !important;
  color: #3B82F6 !important;
}

.badge-neutral {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text2) !important;
}

/* Tabs */
.tab-btn {
  background: transparent;
  border: none;
  color: var(--text2);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* Section headers */
.ph-title, .page-title {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 24px;
}

.ph-sub, .page-subtitle {
  color: var(--text2) !important;
  font-size: 14px;
}

/* Stat cards */
.stat-card {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.stat-value {
  color: var(--text) !important;
  font-weight: 700;
  font-size: 28px;
}

.stat-label {
  color: var(--text2) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(51,195,117,.3);
}

/* Ensure no white/light backgrounds anywhere */
.modal, .dropdown, .menu, .popup {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Input focus states */
input:focus, textarea:focus, select:focus, button:focus {
  outline: none;
}

/* Remove any light backgrounds from utility classes */
.bg-white, .bg-light, .bg-primary {
  background: var(--bg2) !important;
  color: var(--text) !important;
}

/* Text colors */
.text-dark, .text-muted {
  color: var(--text2) !important;
}

.text-light {
  color: var(--text) !important;
}


/* ============================================================
   LEADS PAGES — Dark theme overrides
   ============================================================ */

/* Form card backgrounds */
.form-card {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}
.form-card-hd {
  border-bottom-color: rgba(51,195,117,0.1) !important;
}
.form-card-ft {
  border-top-color: rgba(51,195,117,0.1) !important;
}

/* Field inputs inside leads forms */
.field-wrap input,
.field-wrap select,
.field-textarea {
  background: var(--bg2) !important;
  border-color: rgba(51,195,117,0.18) !important;
  color: var(--text) !important;
}
.field-wrap input:focus,
.field-wrap select:focus,
.field-textarea:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(51,195,117,0.1) !important;
  background: var(--bg2) !important;
}
.field-wrap input::placeholder,
.field-textarea::placeholder { color: var(--text3) !important; }
.field-wrap select { background-color: var(--bg2) !important; }

/* Sidebar info/meta cards */
.side-card {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

/* Detail card (show page) */
.detail-card {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}
.detail-card-hd {
  border-bottom-color: rgba(51,195,117,0.1) !important;
  color: var(--text) !important;
}
.notes-box {
  background: var(--bg2) !important;
  border-color: rgba(51,195,117,0.15) !important;
  color: var(--text2) !important;
}

/* Lead hero */
.lead-hero {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

/* Stats strip */
.stats-strip {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}
.stats-strip .stat-item + .stat-item {
  border-left-color: rgba(51,195,117,0.12) !important;
}

/* Lead card (card grid view) */
.lead-card {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}
.lead-card:hover {
  border-color: var(--border2) !important;
}
.lc-foot {
  border-top-color: rgba(51,195,117,0.1) !important;
}

/* Table footer */
.tfoot {
  border-top-color: rgba(51,195,117,0.1) !important;
}

/* Filter selects in toolbar */
.f-sel {
  background-color: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.f-sel:focus { border-color: var(--green) !important; }

/* Search input */
.lsearch input {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.lsearch input:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(51,195,117,0.1) !important;
}

/* View toggle */
.vtoggle        { border-color: var(--border) !important; }
.vtoggle-btn    { background: var(--bg3) !important; color: var(--text3) !important; }
.vtoggle-btn.is-active { background: var(--green) !important; color: var(--bg) !important; }

/* Row action buttons */
.row-act a,
.row-act button { background: rgba(255,255,255,0.05) !important; color: var(--text3) !important; }
.row-act a:hover,
.row-act button:hover { background: rgba(51,195,117,0.12) !important; color: var(--green) !important; }
.row-act .del:hover   { background: rgba(239,68,68,0.1) !important;   color: var(--red) !important; }

/* Pagination */
.tpag-btn {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.tpag-btn.is-active {
  background: var(--green) !important;
  color: var(--bg) !important;
  border-color: var(--green) !important;
}

/* Danger zone */
.danger-zone {
  background: rgba(239,68,68,0.05) !important;
  border-color: rgba(239,68,68,0.18) !important;
}

/* btn-p and btn-s dark tweaks */
.btn-p { color: var(--bg) !important; }
.btn-p:hover { color: var(--bg) !important; }
.btn-s { color: var(--text2) !important; }
.btn-s:hover { color: var(--text) !important; }
/* ── Pipeline / Kanban ─────────────────────────────────── */
.pipe-stats {
  display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.pipe-stat {
  flex: 1; min-width: 100px; background: var(--card-bg, rgba(0,35,32,.6));
  border: 1px solid var(--border-color, rgba(51,195,117,.12));
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.ps-num { font-size: 24px; font-weight: 700; color: var(--text-primary, #fffaf1); }
.ps-lbl { font-size: 11px; color: var(--text-muted, #9db8b5); margin-top: 4px; }

.pipe-board {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px;
  align-items: flex-start; min-height: 400px;
}
.pipe-col {
  min-width: 240px; max-width: 260px; flex-shrink: 0;
  background: rgba(0,35,32,.4);
  border: 1px solid rgba(51,195,117,.1);
  border-radius: 14px; overflow: hidden;
}
.pipe-col-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(51,195,117,.08);
}
.pipe-col-title { font-size: 12px; font-weight: 600; color: #fffaf1; }
.pipe-col-count {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; min-width: 22px; text-align: center;
}
.pipe-cards {
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  min-height: 60px; transition: background .15s;
}
.pipe-cards.drag-over { background: rgba(51,195,117,.06); }

/* ── Pipeline Card ─────────────────────────────────────── */
.pipe-card {
  background: rgba(0,45,40,.7);
  border: 1px solid rgba(51,195,117,.15);
  border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: .15s; user-select: none;
}
.pipe-card:hover {
  border-color: rgba(51,195,117,.4);
  background: rgba(51,195,117,.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.pc-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.pc-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(51,195,117,.2); color: #33C375;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.pc-info { flex: 1; min-width: 0; }
.pc-name {
  font-size: 13px; font-weight: 600; color: #fffaf1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-meta {
  font-size: 11px; color: #9db8b5; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: #9db8b5;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px; padding: 2px 8px; margin-bottom: 6px;
}
.pc-date { font-size: 10px; color: #5f8a86; }

/* ── Drawer ────────────────────────────────────────────── */
.pipe-drawer-bg {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  display: none; align-items: flex-end; justify-content: flex-end;
}
.pipe-drawer-bg.open { display: flex; }
.pipe-drawer {
  width: 380px; height: 100vh; max-width: 100vw;
  background: #001a18; border-left: 1px solid rgba(51,195,117,.15);
  display: flex; flex-direction: column; animation: slideIn .2s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.pipe-drawer-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(51,195,117,.1);
}
.pipe-drawer-hd h4 { font-size: 16px; font-weight: 700; color: #fffaf1; }
.pipe-drawer-close {
  background: none; border: none; color: #9db8b5;
  font-size: 16px; cursor: pointer; padding: 4px;
}
.pipe-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.pipe-drawer-ft {
  display: flex; gap: 8px; padding: 16px 24px;
  border-top: 1px solid rgba(51,195,117,.1);
}
.drawer-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(51,195,117,.06);
  font-size: 13px; color: #fffaf1;
}
.dr-lbl { font-size: 11px; color: #9db8b5; font-weight: 600; }
.drawer-notes {
  margin-top: 14px; padding: 12px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(51,195,117,.1); border-radius: 8px;
  font-size: 12px; color: #9db8b5; line-height: 1.6;
}
.drawer-move { margin-top: 16px; }
.move-btn {
  display: inline-block; margin: 4px 4px 0 0;
  padding: 5px 12px; border-radius: 20px; font-size: 11px;
  font-weight: 600; cursor: pointer; background: transparent;
  border: 1px solid; transition: .15s; font-family: 'Sora', sans-serif;
}
.move-btn:hover { opacity: .8; }

/* ── Integrations ──────────────────────────────────────── */
.int-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px; }
.int-stat { background:rgba(0,35,32,.6);border:1px solid rgba(51,195,117,.12);border-radius:12px;padding:16px 18px; }
.int-stat-ic { width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:10px; }
.int-stat-n { font-size:26px;font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:4px; }
.int-stat-l { font-size:11px;color:var(--text-muted); }

.cat-row { display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;align-items:center; }
.cat-chip { padding:6px 14px;border-radius:20px;border:1px solid rgba(51,195,117,.15);background:transparent;color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer;transition:.15s; }
.cat-chip:hover { border-color:rgba(51,195,117,.3);color:var(--text-primary); }
.cat-chip.on { border-color:#33C375;background:rgba(51,195,117,.1);color:#33C375;font-weight:600; }
.search-wrap { position:relative; }
.search-wrap i { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#5f8a86;font-size:12px;pointer-events:none; }
.search-wrap input { padding:8px 12px 8px 33px;background:rgba(255,255,255,.04);border:1px solid rgba(51,195,117,.15);border-radius:8px;font-size:12.5px;color:var(--text-primary);outline:none;transition:.2s;width:220px; }
.search-wrap input:focus { border-color:#33C375; }

.section-label { font-size:11px;font-weight:700;color:#5f8a86;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.section-label::after { content:'';flex:1;height:1px;background:rgba(51,195,117,.08); }

.int-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:28px; }
.int-card { background:rgba(0,35,32,.6);border:1px solid rgba(51,195,117,.15);border-radius:14px;padding:20px;transition:.2s;position:relative;overflow:hidden; }
.int-card:hover { border-color:rgba(51,195,117,.28);box-shadow:0 6px 24px rgba(0,0,0,.25); }
.int-card.connected { border-color:rgba(51,195,117,.3); }
.int-card.connected::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#33C375,#27a561); }
.ic-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px; }
.ic-logo { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.ic-badges { display:flex;flex-direction:column;align-items:flex-end;gap:5px; }
.status-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700; }
.sb-connected { background:rgba(51,195,117,.12);color:#33C375; }
.sb-connected::before { content:'';width:5px;height:5px;border-radius:50%;background:#33C375;display:inline-block; }
.sb-disconnected { background:rgba(255,255,255,.06);color:#7aada8; }
.sb-popular { background:rgba(245,158,11,.12);color:#F59E0B;font-size:9.5px; }
.sb-new { background:rgba(59,130,246,.12);color:#3B82F6;font-size:9.5px; }
.ic-name { font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:4px; }
.ic-desc { font-size:12px;color:#7aada8;line-height:1.5;margin-bottom:14px; }
.ic-meta { display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap; }
.ic-meta-tag { display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:#5f8a86;background:rgba(255,255,255,.04);padding:3px 8px;border-radius:5px; }
.ic-footer { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.btn-danger { display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:8px;color:#EF4444;font-size:12px;font-weight:500;cursor:pointer;transition:.2s; }
.btn-danger:hover { background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4); }

.api-section { background:rgba(0,35,32,.6);border:1px solid rgba(51,195,117,.15);border-radius:14px;padding:22px;margin-bottom:28px; }
.api-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.api-title { font-size:15px;font-weight:700;color:var(--text-primary); }
.api-sub { font-size:12px;color:#7aada8;margin-top:3px; }
.webhook-row { display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(51,195,117,.06); }
.webhook-row:last-child { border-bottom:none; }
.wh-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.wh-info { flex:1;min-width:0; }
.wh-name { font-size:13px;font-weight:600;color:var(--text-primary); }
.wh-url { font-size:11px;color:#5f8a86;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px; }
.wh-actions { display:flex;gap:5px; }
.wh-btn { width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:none;border-radius:6px;color:#7aada8;cursor:pointer;font-size:11px;transition:.15s; }
.wh-btn:hover { background:rgba(51,195,117,.1);color:#33C375; }
.wh-btn.del:hover { background:rgba(239,68,68,.1);color:#EF4444; }

/* Modal */
.modal-bg { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;align-items:center;justify-content:center;padding:20px; }
.modal-bg.open { display:flex; }
.modal-box { background:#002320;border:1px solid rgba(51,195,117,.2);border-radius:16px;width:100%;max-width:500px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;max-height:90vh;display:flex;flex-direction:column; }
.modal-hd { display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid rgba(51,195,117,.12);flex-shrink:0; }
.modal-logo { width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.modal-hd-info { flex:1; }
.modal-hd-title { font-size:15px;font-weight:700;color:var(--text-primary); }
.modal-hd-sub { font-size:12px;color:#7aada8;margin-top:2px; }
.modal-x { width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:none;border-radius:7px;color:#7aada8;cursor:pointer;font-size:13px;transition:.15s; }
.modal-x:hover { background:rgba(239,68,68,.12);color:#EF4444; }
.modal-body { padding:22px;overflow-y:auto;flex:1; }
.modal-ft { display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid rgba(51,195,117,.1);flex-shrink:0; }
.form-grp { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.form-grp label { font-size:11.5px;font-weight:600;color:#7aada8; }
.form-grp input,.form-grp select { padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(51,195,117,.15);border-radius:8px;font-size:13px;color:var(--text-primary);font-family:'Sora',sans-serif;outline:none;transition:.2s; }
.form-grp input:focus,.form-grp select:focus { border-color:#33C375; }
.form-grp input::placeholder { color:#4e7a76; }
.form-hint { font-size:11px;color:#5f8a86;margin-top:4px;line-height:1.5; }