/* ═══════════════════════════════════════════════
   CARNOT.AI — COMPONENTS
   Reusable UI atoms: cards, tables, pills/badges, buttons,
   spinner, modals, toast, search dropdown.
   Re-themed to the design reference. Rules of thumb applied
   throughout this pass:
   - `color:` (text) usages of a brand token now use the "-ink"
     (darker, contrast-safe) variant, never the bare/soft one.
   - Badge/pill/tag backgrounds pair a "-soft" pastel background
     with "-ink" text — that combination keeps AA-ish contrast.
   - Solid button fills (white text on top) use "-ink", not the
     soft pastel, for the same contrast reason.
   - Buttons, tags, badges, and pills now use --radius-pill.
   - Hardcoded brand-colour rgba() tints (old vivid iOS RGB
     triples) are converted to the new soft/ink tokens.
   - rgba(255,255,255,X) "glass state" overlays (hover/border
     opacity steps on translucent glass panels) are left as
     literal — they're a structural glass effect, not a brand
     colour, and the reference itself types these the same way.
═══════════════════════════════════════════════ */

/* CARDS */
.card{background:var(--glass-card);backdrop-filter:var(--blur);border:1px solid var(--glass-border-card);border-radius:var(--r);padding:var(--space-18);transition:all 0.15s ease;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.card::before{display:none;}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-1px);border-color:var(--gold);}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;}
.card-title{font-size:var(--text-10);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-8);}
.ct-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.card-act{font-size:var(--text-11);color:var(--blue-ink);cursor:pointer;font-weight:600;transition:var(--t);}
.card-act:hover{opacity:0.7;}

/* KPI CARDS */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:16px;}
.kpi{background:var(--glass-card);backdrop-filter:var(--blur);border:1px solid var(--glass-border-card);border-radius:var(--r);padding:18px 20px 20px;cursor:pointer;transition:all 0.15s ease;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.kpi::before{display:none;}
.kpi::after{display:none;}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--gold);}
.kpi-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--color-text-muted);margin-bottom:9px;}
.kpi-val{font-size:25px;font-weight:800;letter-spacing:-0.01em;line-height:1;margin-bottom:6px;color:var(--color-text);}
.kpi-delta{font-size:var(--text-11);display:flex;align-items:center;gap:var(--space-4);font-weight:600;}
.up{color:var(--green-ink);}.dn{color:var(--red-ink);}.wn{color:var(--orange-ink);}
.kpi-spark{margin-top:10px;height:32px;}
.live-badge{display:inline-flex;align-items:center;gap:var(--space-5);font-size:var(--text-8);color:var(--green-ink);background:var(--green-soft);border:1px solid var(--green-soft);border-radius:var(--radius-5);padding:2px 7px;margin-left:8px;}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:eblink 2s infinite;}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;padding:9px 12px;font-size:var(--text-9);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-muted);border-bottom:1px solid var(--ink-a07);background:var(--color-surface-alt-6);}
.tbl td{padding:10px 12px;font-size:var(--text-13);border-bottom:1px solid var(--border2);color:var(--color-text-secondary);vertical-align:middle;}
.tbl tr{cursor:pointer;transition:background 0.15s;}
.tbl tr:hover td{background:var(--color-surface-alt-6);}
.tbl tr:last-child td{border-bottom:none;}

/* PILLS / BADGES */
.pill{display:inline-flex;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--text-9);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.pg{background:var(--green-soft);color:var(--green-ink);}
.pr{background:var(--red-soft);color:var(--red-ink);}
.po{background:var(--orange-soft);color:var(--orange-ink);}
.pp{background:var(--purple-soft);color:var(--purple-ink);}
.pc{background:var(--teal-soft);color:var(--teal-ink);}
.erp-tag{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-8);letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-ink);background:var(--teal-soft);border:1px solid var(--teal-soft);border-radius:var(--radius-pill);padding:2px 7px;}

/* ADD / ACTION BUTTONS */
.add-btn{display:flex;align-items:center;gap:var(--space-6);background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-pill);padding:8px 14px;font-family:var(--font);font-size:var(--text-12);font-weight:600;cursor:pointer;box-shadow:0 4px 12px var(--ink-a20);transition:all 0.15s;}
.add-btn:hover{opacity:0.88;box-shadow:0 6px 18px var(--blue-ink-glow-a40);}
.add-btn svg{width:13px;height:13px;}
.btn-sm{padding:6px 11px;font-size:var(--text-11);}
.btn{padding:9px 18px;border-radius:var(--radius-pill);font-family:var(--font);font-size:var(--text-13);font-weight:600;cursor:pointer;transition:var(--t);border:none;}
.btn-primary{background:var(--blue-ink);color:var(--color-white);box-shadow:0 4px 12px var(--blue-ink-glow-a28);}
.btn-primary:hover{opacity:0.88;}
.btn-ghost{background:var(--color-surface-2);color:var(--color-text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg);}

/* LOADING SPINNER */
.loading-spinner{display:flex;align-items:center;justify-content:center;gap:var(--space-10);padding:var(--space-24);color:var(--color-text-muted);font-size:var(--text-11);}
.spinner{width:16px;height:16px;border:2px solid var(--blue-soft);border-top-color:var(--blue-ink);border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

/* MODALS */
.modal-bg{position:fixed;inset:0;z-index:8000;background:var(--ink-a35);display:none;align-items:center;justify-content:center;}
.modal-bg.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--ink-a10);border-radius:var(--radius-18);max-width:540px;width:94%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px var(--ink-a18);}
.form-modal{background:var(--panel);border:1px solid var(--ink-a10);border-radius:var(--radius-18);max-width:600px;width:94%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px var(--ink-a18);}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--ink-a07);}
.modal-title{font-size:var(--text-17);font-weight:800;color:var(--color-text);}
.modal-close{width:28px;height:28px;border-radius:var(--radius-pill);background:var(--color-surface-2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--text-13);transition:var(--t);color:var(--color-text-secondary);}
.modal-close:hover{background:var(--bg);}
.modal-body{padding:20px 24px;overflow-y:auto;flex:1;color:var(--color-text);}
.modal-body::-webkit-scrollbar{width:3px;}
.modal-body::-webkit-scrollbar-thumb{background:var(--ink-a10);border-radius:var(--radius-3);}
.form-footer{padding:16px 24px;border-top:1px solid var(--ink-a07);display:flex;gap:var(--space-10);justify-content:flex-end;}
.form-section{margin-bottom:20px;}
.form-section-title{font-size:var(--text-9);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--ink-a07);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-13);}
.form-group{display:flex;flex-direction:column;gap:var(--space-6);}
.form-group.span2{grid-column:1/-1;}
.form-label{font-size:var(--text-9);letter-spacing:0.10em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;}
.form-input,.form-select,.form-textarea{background:var(--color-surface-2);border:1px solid var(--ink-a10);border-radius:var(--radius-10);padding:10px 12px;font-family:var(--font);font-size:var(--text-13);color:var(--color-text);outline:none;transition:var(--t);appearance:none;-webkit-appearance:none;width:100%;}
.form-select option{background:var(--panel);color:var(--color-text);}
.form-textarea{min-height:80px;resize:vertical;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--tx-muted);}
.form-input:focus,.form-select:focus,.form-textarea:focus{background:var(--panel);border-color:var(--blue-ink);box-shadow:0 0 0 3px var(--blue-soft);}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;z-index:99999;background:var(--panel);border:1px solid var(--ink-a10);border-radius:var(--rs);padding:12px 18px;font-size:var(--text-13);color:var(--color-text);box-shadow:0 8px 28px var(--ink-a14);transform:translateY(80px);opacity:0;transition:all 0.32s ease;display:flex;align-items:center;gap:var(--space-10);}
.toast.show{transform:translateY(0);opacity:1;}
.toast-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* SEARCH DROPDOWN */
#searchDropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--ink-a10);border-radius:var(--radius-12);box-shadow:0 16px 40px var(--ink-a12);z-index:9000;max-height:320px;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:var(--space-10);padding:10px 14px;cursor:pointer;transition:var(--t);border-bottom:1px solid var(--border2);}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover{background:var(--color-surface-2);}
.sr-type{font-size:var(--text-9);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:2px 7px;border-radius:var(--radius-pill);background:var(--blue-soft);color:var(--blue-ink);flex-shrink:0;}

/* MODAL BG */
#modalBg{position:fixed;top:var(--th);left:var(--sw);right:0;bottom:0;z-index:9000;background:var(--modal-scrim-legacy);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;overflow-y:auto;padding:var(--space-20);}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-18);padding:36px 40px;width:100%;min-height:calc(100% - 40px);box-shadow:0 4px 24px var(--ink-a10);animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);}
.modal-header{font-size:var(--text-17);font-weight:700;margin-bottom:4px;color:var(--color-text);}

/* ALERTS */
.alerts-btn{display:flex;align-items:center;gap:var(--space-7);padding:7px 14px;border-radius:var(--radius-pill);border:1px solid;font-family:var(--font);font-size:var(--text-12);font-weight:700;cursor:pointer;transition:var(--t);margin-right:8px;}
.alerts-btn:hover{transform:translateY(-1px);}
.alert-tab-btn{background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 14px;font-family:var(--font);font-size:var(--text-12);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:var(--t);}
.alert-tab-btn:hover{background:var(--bg);color:var(--color-text);}
.alert-tab-btn.active{background:var(--blue-soft);color:var(--blue-ink);border-color:var(--blue-soft);}

/* ═══════════════════════════════════════════════
   FOLDED FROM: runtime-injected <style> block
   (previously index.html injectStyles() IIFE, appended to
   <head> at runtime — removed; these rules are relocated
   here verbatim so the cascade is explicit and file-based).
   Now re-themed in this pass, same rules as above. Where a
   rule already read entirely through tokens (e.g. .kpi-card,
   .glass-card — background/blur/border/shadow are all
   var()-based), it needed no edit: it inherited the new glass
   treatment automatically once tokens.css changed.
═══════════════════════════════════════════════ */
/* ── KPI GRID ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.kpi-card{background:var(--glass-card);backdrop-filter:var(--blur);border:1px solid var(--glass-border-card);border-radius:var(--r);padding:18px 20px 20px;box-shadow:var(--shadow-card);transition:var(--t);position:relative;overflow:hidden}
.kpi-card::before{display:none}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--gold)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--tx-secondary)}
.kpi-ico{color:var(--tx-tertiary)}
.kpi-val{font-size:25px;font-weight:800;letter-spacing:-0.01em;line-height:1}
.kpi-unit{font-size:var(--text-14);font-weight:500;color:var(--tx-secondary);margin-left:3px}
.kpi-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.kpi-spark{width:70px;height:32px}


/* ── GLASS CARD ── */
.glass-card{background:var(--glass-card);backdrop-filter:var(--blur);border:1px solid var(--glass-border-card);border-radius:var(--r);box-shadow:var(--shadow-card)}


/* ── DATA TABLE ── */
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{padding:10px 16px;font-size:var(--text-10);font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--tx-tertiary);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.data-table tbody tr{border-bottom:1px solid var(--border2);transition:var(--t)}
.data-table tbody tr:hover{background:var(--glass-a04)}
.data-table tbody td{padding:10px 16px;font-size:var(--text-13);color:var(--tx-secondary)}
.data-table tbody td strong{color:var(--tx-primary)}


/* ── GLASS INPUT ── */
.glass-input{width:100%;background:var(--color-surface-2);border:1px solid var(--border);border-radius:var(--rx);padding:9px 12px;font-family:var(--font);font-size:var(--text-13);color:var(--color-text);outline:none;transition:var(--t)}
.glass-input:focus{background:var(--panel);border-color:var(--blue-ink);box-shadow:0 0 0 3px var(--blue-soft)}
.glass-input:disabled{opacity:0.5;cursor:not-allowed}
.glass-input option{background:var(--panel);color:var(--color-text)}
select.glass-input{appearance:none;-webkit-appearance:none;cursor:pointer}
textarea.glass-input{min-height:42px}


/* ── BUTTONS ── */
.btn-primary{background:var(--ga-purple);color:var(--color-white);border:none;border-radius:var(--radius-pill);padding:9px 18px;font-family:var(--font);font-size:var(--text-13);font-weight:600;cursor:pointer;transition:var(--t);box-shadow:0 0 18px var(--purple-ink-glow-a30)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 28px var(--purple-ink-glow-a50)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-ghost{background:var(--glass-a08);color:var(--tx-primary);border:1px solid var(--glass-a16);border-radius:var(--radius-pill);padding:8px 16px;font-family:var(--font);font-size:var(--text-13);font-weight:500;cursor:pointer;transition:var(--t)}
.btn-ghost:hover{background:var(--glass-a14)}
.btn-sm{background:var(--glass-a08);color:var(--tx-secondary);border:1px solid var(--glass-a12);border-radius:var(--radius-pill);padding:4px 10px;font-size:var(--text-11);font-weight:500;cursor:pointer;transition:var(--t);white-space:nowrap}
.btn-sm:hover{background:var(--glass-a14);color:var(--tx-primary)}


/* ── MODAL ── */
#modalBg{position:fixed;inset:0;z-index:9000;background:var(--ink-a60);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-20);padding:28px 32px;width:94%;max-width:920px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px var(--ink-a18),0 8px 24px var(--ink-a10);}
.modal-header{font-size:var(--text-17);font-weight:700;margin-bottom:4px;color:var(--color-text)}


/* ── TOAST ── */
#toastEl{position:fixed;bottom:28px;right:28px;z-index:9999;padding:12px 20px;border-radius:var(--radius-12);color:var(--color-white);font-size:var(--text-13);font-weight:600;opacity:0;transform:translateY(12px);transition:0.3s;pointer-events:none;max-width:320px}
#toastEl.show{opacity:1;transform:translateY(0)}


/* ── FORM LABEL ── */
.form-label{display:block;font-size:var(--text-10);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--color-text-muted);margin-bottom:5px}


/* ── PIPELINE CARD ── */
.pipe-card{background:var(--glass-a06);border:1px solid var(--glass-a10);border-radius:var(--radius-10);padding:var(--space-12);margin-bottom:8px;cursor:pointer;transition:var(--t)}
.pipe-card:hover{background:var(--glass-a10)}
.pipe-card.stalled{border-color:var(--red-ink);background:var(--red-soft)}


/* ── TASK ITEM ── */
.task-item{background:var(--glass-a05);border:1px solid var(--glass-a10);border-radius:var(--radius-12);padding:14px 16px;margin-bottom:10px;transition:var(--t)}
.task-item:hover{background:var(--glass-a08)}
.task-item.done{opacity:0.55}


/* ── AI CHAT ── */
.ai-msg{display:flex;gap:var(--space-10);align-items:flex-start}
.ai-msg-user{flex-direction:row-reverse}
.ai-avatar{width:32px;height:32px;border-radius:var(--radius-10);background:var(--ga-purple);display:flex;align-items:center;justify-content:center;font-size:var(--text-11);font-weight:700;flex-shrink:0}
.ai-avatar-user{background:var(--ga-cyan)}
.ai-bubble{background:var(--glass-a08);border:1px solid var(--glass-a12);border-radius:var(--radius-14);padding:12px 16px;font-size:var(--text-13);line-height:1.6;color:var(--tx-secondary);max-width:80%}
.ai-bubble-user{background:var(--purple-soft);border-color:var(--purple-soft);color:var(--tx-primary)}
.typing-dots{display:flex;gap:var(--space-5);align-items:center}
.typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:ldot 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}


/* ── ALERT BANNER ── */
.alert-banner{display:flex;align-items:center;gap:var(--space-12);padding:12px 16px;border:1px solid;border-radius:var(--radius-10);margin-bottom:12px}


/* ── LOADING STATE ── */
.loading-state{padding:var(--space-40);text-align:center;color:var(--tx-tertiary);font-size:var(--text-13)}