/* =============================================================
   SkopGO Dashboard – Cleaned & Complete CSS (regrouped v3)
   All original rules preserved verbatim – only ordering changed
   ============================================================= */

/* ---------- 1. Root & Reset ---------- */
:root{--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:monospace;--fs-base:14px;--bg-page:#f0f0f3;--bg-sidebar:#343541;--bg-main:#fff;--text-primary:#111827;--text-secondary:#6b7280;--accent:#10a37f;--border:#e5e7eb;--shadow:rgba(0,0,0,.1);--radius:8px;--transition:.2s ease;--sidebar-width:200px;--sidebar-collapsed-width:60px;--panel-width:480px}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs-base)}
body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text-primary);display:flex;min-height:100vh;line-height:1.5}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-page)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

/* ---------- 2. Layout (Sidebar + Main) ---------- */
#app{display:flex;width:100%}
.sidebar{position:fixed;top:0;left:0;height:100%;width:var(--sidebar-width);background:var(--bg-sidebar);color:#fff;display:flex;flex-direction:column;overflow-y:auto;transition:width var(--transition);z-index:1000;font-size:.9rem}
.sidebar.collapsed{width:var(--sidebar-collapsed-width)}
.sidebar .logo{display:flex;align-items:center;gap:8px;padding:16px 20px;font-weight:600;font-size:1rem;margin-bottom:20px}
.hamburger{background:none;border:none;font-size:24px;color:#fff;cursor:pointer}
.logo-text{font-weight:600;font-size:1.1rem;white-space:nowrap}
.sidebar nav{flex:1}
.sidebar nav a{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;color:#d1d5db;text-decoration:none;margin-bottom:4px;white-space:nowrap;transition:background var(--transition),color var(--transition)}
.sidebar nav a:hover,.sidebar nav a.active{background:var(--accent);color:#fff}
.menu-icon{width:24px;height:24px}
.label{white-space:nowrap}
.sidebar.collapsed .label,.sidebar.collapsed .logo-text{display:none}
.main{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;transition:margin-left var(--transition);background:var(--bg-page)}
.sidebar.collapsed~.main{margin-left:var(--sidebar-collapsed-width)}
.content{flex:1;overflow:auto;padding:16px}
.content>*{background:var(--bg-main);padding:16px;border-radius:var(--radius);box-shadow:0 1px 3px var(--shadow)}

/* ---------- 3. Typography ---------- */
h2{font-size:1.5rem;margin-bottom:16px}
h3{font-size:1.125rem;margin-bottom:8px}

/* ---------- 4. Buttons ---------- */
.btn,.btn-primary,.btn-secondary,.btn-icon{font-size:.875rem;padding:8px 12px;border-radius:var(--radius);cursor:pointer;transition:background var(--transition)}
.btn-primary{background:var(--accent);color:#fff;border:none}.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--bg-main);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:#f3f4f6}
.btn-icon{background:none;border:none;font-size:1rem;padding:4px 8px}.btn-icon:hover{background:#f3f4f6}
.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{opacity:.9}

/* ---------- 5. Forms ---------- */
input,select,textarea{font-family:var(--font-sans);font-size:.875rem;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}

/* ---------- 6. Tables ---------- */
.custom-history-table,.call-history-table{width:100%;border-collapse:collapse;font-size:.875rem;table-layout:fixed}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
th{background:var(--bg-page);font-weight:600;cursor:pointer}
tbody tr:hover{background:#f9fafb}
.selected-row{background:#e6f4ea!important}
.custom-history-table tbody tr:nth-child(odd){background:#fafafa}
.duration-col{text-align:center}.duration-cell .minutes{font-size:1rem}.duration-cell .colon-secs{font-size:.75rem;margin-left:2px}
.custom-history-table, #leadsTable, .call-history-container table {font-family: "Arial Narrow", sans-serif !important;}
#leadsTable { table-layout: auto !important; }
#leadsTable th:nth-child(2), #leadsTable td:nth-child(2) { min-width: 140px; white-space: normal; overflow: visible; text-overflow: clip; }
.call-history-container table { table-layout: auto !important; }
.call-history-container table th:nth-child(2), .call-history-container table td:nth-child(2) { min-width: 150px; white-space: normal; overflow: visible; text-overflow: clip; }

/* ── Prevent flicker on tbody swap ────────────────────────── */

/* 1) Contain layout & paint so the table doesn’t repaint its surroundings */
#leadsTable {
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 2) Kill any transitions on the table or its children */
#leadsTable,
#leadsTable * {
  transition: none !important;
}


/* ── 1) No more panel or table transitions ───────────────────────── */
.content,
.content > *,
#leadsTable,
#leadsTable * {
  transition: none !important;
}

/* ── 2) Force GPU‐layer & stable paint ───────────────────────────── */
#leadsTable {
  opacity: 0.99;           /* corner‐case GPU trigger */
  transform: translateZ(0);
  will-change: transform;
}

/* ── 3) Use auto layout so column widths don’t reflow ───────────── */
#leadsTable,
.call-history-container table {
  table-layout: auto !important;
}


/* ---------- 7. Flags & Indicators ---------- */
.flags-container{display:inline-flex;gap:4px}
.flag-circle{width:14px;height:14px;border-radius:50%;background:lightgray}
.sentiment-positive-bg{background:#d4edda}
.sentiment-negative-bg{background:#f8d7da}
.sentiment-neutral-bg{background:#fff}
.critical-checked-bg{background:#f8d7da}
.critical-notchecked-bg{background:#fff}
.urgent-row td{font-weight:700}
.urgent-flag{color:#e53935;margin-right:3px}

/* ---------- 8. Toggles ---------- */
.switch,.urgent-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.switch input,.urgent-toggle input{display:none}
.slider-switch,.urgent-toggle .slider{position:relative;width:42px;height:22px;border-radius:22px;background:#ccc;transition:background .25s}
.slider-switch:before,.urgent-toggle .slider:before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s}
.switch input:checked+.slider-switch{background:#ff2e2e}
.switch input:checked+.slider-switch:before{transform:translateX(20px)}
.urgent-toggle input:checked+.slider{background:#ff2e2e}
.urgent-toggle input:checked+.slider:before{transform:translateX(20px)}
.urgent-text{font-weight:600}

/* ── 9. Detail Panels (with WhatsApp) ───────────────────────────────────── */
.details-panel,#detailsPanel{font-family: "ArialNarrow";position:fixed;top:0;right:0;width:var(--panel-width);height:100%;background:var(--bg-main);box-shadow:-2px 0 6px var(--shadow);transform:translateX(100%);transition:transform var(--transition);z-index:1000;display:flex;flex-direction:column}
.details-panel.open,#detailsPanel.open{transform:translateX(0)}
.panel-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#f3f4f6;border-bottom:1px solid var(--border)}
.panel-body{overflow-y:auto; max-height: 100%; display:flex;flex-direction:column;flex:1;min-height:0}
.tabs{display:flex;position:sticky;top:0;background:#f3f4f6;border-bottom:1px solid var(--border);z-index:1100}
.tab-link{flex:1;padding:8px 12px;text-align:center;font-size:.875rem;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:background var(--transition)}
.tab-link:hover{background:#e9e9e9}
.tab-link.active{background:#fff;border-bottom-color:var(--accent)}
.tab-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.tab-pane{flex:1;overflow:hidden;display:none;padding:4px}
.tab-pane.active{display:flex;flex-direction:column}
.tab-pane#tab-whatsapp .wa-chat{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:0;padding:4px 8px}


/* ---------- 10. Filter Panels ---------- */
.filter-panel{background:var(--bg-main);border:1px solid var(--border);padding:10px;margin-bottom:20px}
.filter-panel input,.filter-panel select{margin:5px}
.filter-actions{margin-top:16px;display:flex;gap:8px}

/* ---------- 11. Pagination ---------- */
.page-button{background:#ccc;color:#000;padding:6px 10px;margin:0 3px;border-radius:4px;font-size:.875rem;text-decoration:none;transition:background var(--transition)}
.page-button:hover{filter:brightness(.9)}
.page-button.current{background:var(--accent);color:#fff}
.page-button.disabled{background:#aaa;color:#eee;cursor:default}

/* ---------- 12. Analytics Dashboard ---------- */
.analytics-top-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.analytics-top-bar input[type=date]{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius)}
.charts-grid{display:grid;gap:16px;padding:0 16px 16px;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.chart-card{background:var(--bg-main);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 3px var(--shadow);padding:16px;text-align:center}
.chart-card h3{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;font-size:1rem}
.chart-card p{font-size:.8125rem;color:var(--text-secondary);margin-bottom:12px}
.chart-wrapper{position:relative;width:100%;padding-top:56.25%}
.chart-wrapper canvas,.chart-wrapper-heat>div{position:absolute;top:0;left:0;width:100%!important;height:100%!important}

/* ---------- 13. Config Page ---------- */
.config-controls{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.config-controls select{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius)}
.config-textarea{width:100%;height:calc(100vh - 160px);resize:none;font-family:var(--font-mono);font-size:.75rem;border:1px solid var(--border);background:var(--bg-main);color:var(--text-primary);padding:8px}
.modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:2000}
.modal.hidden{display:none}
.modal-content{position:relative;background:var(--bg-main);padding:16px;width:90%;max-width:600px;max-height:90%;overflow-y:auto;border-radius:var(--radius);box-shadow:0 4px 12px var(--shadow)}
.modal-content.large{max-width:90%;width:80%}
.close-btn{position:absolute;top:8px;right:12px;font-size:1.25rem;cursor:pointer;background:none;border:none}
.diff-box{background:#f7f7f7;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:var(--font-mono);font-size:.75rem;white-space:pre-wrap;max-height:70vh;overflow:auto}
.added{color:green}.removed{color:red}.unchanged{color:#000}

/* ---------- 14. Live Log ---------- */
#status-panel{position:absolute;top:16px;right:16px;display:flex;gap:8px;padding:8px;border-radius:var(--radius);transition:background var(--transition);z-index:10}
#status-panel.running{background:rgba(16,163,127,.2)}
#status-panel.stopped{background:rgba(220,53,69,.2)}
.log-box{background:var(--bg-main);border-radius:var(--radius);box-shadow:0 1px 3px var(--shadow);padding:12px;font-family:var(--font-mono);font-size:.65rem;height:calc(100vh - 100px);overflow:auto}
/* live-page WA panel blue tint */
.bg-wa.running{background:rgba(16,163,127,.2)}
.bg-wa.stopped{background:rgba(220,53,69,.2)}
.log-box,
.config-textarea { max-height: calc(100vh - 220px); }

/* ---------- 15. Login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;background:var(--bg-page)}
.login-container{background:var(--bg-main);padding:32px;border-radius:var(--radius);box-shadow:0 4px 12px var(--shadow);width:320px;position:relative;text-align:center}
.login-logo{width:60px;height:60px;margin:0 auto 20px}
.input-group{display:flex;margin-bottom:16px;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.input-group .icon{background:#333;padding:0 12px;display:flex;align-items:center;justify-content:center}
.input-group input{border:none;flex:1;padding:12px;font-size:1rem}
.options-row{display:flex;align-items:center;gap:6px;margin:20px 0 24px 44px;font-size:.8rem}
.btn-signin{width:100%;background:#333;color:#fff;border:none;padding:12px;font-size:1.1rem;border-radius:4px}.btn-signin:hover{background:#000}
.login-footer{position:absolute;bottom:10px;right:10px;font-style:italic;color:#888;font-size:.75rem}

/* ---------- 16. Call-History Overrides ---------- */
.content:has(.call-history-container)>h2,.content:has(.call-history-container)>.top-bar{background:var(--accent);color:#fff}
.content:has(.call-history-container) .call-history-container{background:var(--accent);padding:8px}
.content:has(.call-history-container) .call-history-container thead th{background:var(--accent);color:#fff;border-color:var(--accent)}
.content:has(.call-history-container) .call-history-container tbody tr:nth-child(odd){background:#f5f5f5}
.content:has(.call-history-container) .call-history-container tbody tr:nth-child(even){background:#dcdcdc}
.content:has(.call-history-container) .page-button.current{background:#fff!important;color:var(--accent)!important;border-color:var(--accent)!important}

.call-history-table,
.call-history-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  table-layout: fixed;
  font-family: "Arial Narrow", sans-serif !important;
}
.call-history-container table th:nth-child(2),
.call-history-container table td:nth-child(2) {
  min-width: 150px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#detailsPanel .launch-line {
  color: darkgreen;
  font-weight: bold;
}
#detailsPanel .client-line {
  color: #000;
}
.transcript-box {
  height: 150px;
  overflow: auto;
  white-space: pre-wrap;
}
.transcript-box,
#followupBox {
  width: 100%;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
}
.followup-section label,
.transcript-section label,
.incorrect-info label,
.agent-flaws label {
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}

.detail-summary-table {
  width: 100%;
  table-layout: auto;  /* antes = fixed; */
  border-collapse: collapse;
  /* margin-bottom: 8px; */
}

.detail-summary-table td {
  padding: 4px 8px;
  /* font-size: 0.85rem; */
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}

.detail-summary-table td:nth-child(odd) {
  font-weight: bold;
  text-align: right;
  width: 20%;
}

.detail-summary-table td:nth-child(even) {
  text-align: left;
  width: 30%;
}

/* Make the second column (the “value” for each label) wider so “Name” fits on one line */
.detail-summary-table td:nth-child(2) {
  width: 30%;               /* adjust this percentage as needed */
}

.detail-summary-table input {
  font-family: "Arial Narrow", sans-serif !important;
  font-size: 0.85rem;
  padding: 2px 4px;
  box-sizing: border-box;
}
#detailsPanel {
  overflow-y: auto;
  /* Keep position/flex behavior as-is; header remains at top */
}

.panel-top.detail-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.left-summary, .right-summary {
  width: 48%;
}
#detailsPanel .flags-summary-table {
  width: 100%;
  table-layout: fixed;
  overflow: hidden;
}
#detailsPanel .flags-summary-table th,
#detailsPanel .flags-summary-table td {
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  text-align: center;
}
#detailsPanel .flags-summary-table th:last-child,
#detailsPanel .flags-summary-table td:last-child {
  max-width: 40px;
}
.detail-flags-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.detail-flags-table th,
.detail-flags-table td {
  border: 1px solid var(--border);
  padding: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- 17. Utility ---------- */
.hidden{display:none!important}
.ai-summary{color:#66bb6a}
.lc-none{background:#fff2ac}.lc-1{background:#fffbee}.lc-2{background:#fff8e1}.lc-3{background:#fff6d1}.lc-4{background:#fff4c2}.lc-5{background:#fff4c2}
.quality-below-60{background:#f8d7da}
.quality-60-80{background:#fff3cd}
.quality-80-90{background:#fff}
.quality-above-90{background:#d4edda}

/* ---------- 18. Patch Lines (duplicates preserved) ---------- */
/* 1 ▸ Sidebar menu icons – prevent image stretching */
.menu-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0}

/* 3 ▸ CRM detail form grid (duplicate block) */
.detail-grid{display:grid;grid-template-columns:140px 1fr;grid-gap:8px;margin-bottom:10px}
.detail-grid label{font-weight:600;text-align:right;padding-right:5px;white-space:nowrap}
.detail-grid input,.detail-grid select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius)}

/* 4 ▸ Spam slider (duplicate block) */
.spam-slider{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.spam-slider input{display:none}
.slider-switch{width:42px;height:22px;background:#ccc;border-radius:22px;position:relative;transition:background .25s}
.slider-switch::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .25s}
.spam-slider input:checked+.slider-switch{background:#ff2e2e}
.spam-slider input:checked+.slider-switch::before{transform:translateX(20px)}
.slider-label{font-size:.875rem}

/* 5 ▸ Analytics heat-map container (duplicate block) */
.chart-wrapper-heat{position:relative;width:100%;height:100%}

/* Bottom-row list boxes (duplicate block) */
.list-section{background:#fafafa;border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;font-size:.8125rem;line-height:1.25}
.list-section ul{margin:0;padding-left:18px}
.list-section li{margin:2px 0}
#incorrectInfoList,#agentFlawsList{max-height:120px;overflow:auto}
.narrow-font{font-family:"Arial Narrow","Roboto Condensed",sans-serif}
.flag-checked-bg{background:#d4edda}
.flag-notchecked-bg{background:#fff}