/* Decidr design system — shared tokens + base styles
   Noi Grotesk weights: 400 regular / 500 medium / 600 semibold
   Violet #8E57FB = the ONE accent. Hairlines not shadows. */

@font-face {
    font-family: 'Noi Grotesk';
    src: url('/static/fonts/NoiGrotesk-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noi Grotesk';
    src: url('/static/fonts/NoiGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noi Grotesk';
    src: url('/static/fonts/NoiGrotesk-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
    /* Raw palette */
    --c-black:        #0a0a0a;
    --c-white:        #ffffff;
    --c-violet:       #8e57fb;
    --c-violet-light: #eee8ff;
    --c-coral:        #f36744;
    --c-success:      #11a969;
    --c-warning:      #ecb206;
    --c-error:        #ff3234;

    /* Greyscale */
    --c-grey-50:  #f7f8f8;
    --c-grey-100: #eef0f0;
    --c-grey-200: #d9dede;
    --c-grey-300: #b0bcbc;
    --c-grey-400: #90a0a0;
    --c-grey-500: #728585;
    --c-grey-600: #5c6c6d;
    --c-grey-700: #4b5959;
    --c-grey-800: #414b4b;
    --c-grey-900: #394141;
    --c-grey-950: #262b2b;

    /* Semantic */
    --bg-page:      var(--c-grey-50);
    --bg-surface:   var(--c-white);
    --bg-inverted:  var(--c-grey-950);
    --border:       0.5px solid var(--c-grey-100);
    --text-default: var(--c-black);
    --text-muted:   var(--c-grey-500);
    --text-subdued: var(--c-grey-700);

    /* Spacing scale: 8 / 12 / 16 / 20 / 24 / 32 */
    --sp-1: 8px;
    --sp-2: 12px;
    --sp-3: 16px;
    --sp-4: 20px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Radius */
    --r-chip: 4px;
    --r-btn:  8px;
    --r-card: 8px;

    /* Sidebar width */
    --sb-w: 220px;

    /* Type */
    --font: 'Noi Grotesk', 'Inter', -apple-system, sans-serif;
}

/* ── Base reset ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: var(--font);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-default);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    padding-left: var(--sb-w);
}

a { color: inherit; text-decoration: none; }

/* ── Page shell ────────────────────────────────────────────────────────── */

.d-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--sp-5);
}

.d-page-header {
    padding: var(--sp-5) 0 var(--sp-4);
    border-bottom: var(--border);
    margin-bottom: var(--sp-5);
}

.d-page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-default);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.d-page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Stat cards ────────────────────────────────────────────────────────── */

.d-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.d-stat-card {
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-4);
}

.d-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-1);
}

.d-stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-default);
    letter-spacing: -0.03em;
    line-height: 1;
}

.d-stat-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── Chart / content cards ─────────────────────────────────────────────── */

.d-card {
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--r-card);
    padding: var(--sp-5);
}

.d-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-default);
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-4);
}

.d-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

/* ── Tables ────────────────────────────────────────────────────────────── */

.d-table-wrap {
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--r-card);
    overflow-x: auto;
}

.d-table-head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th {
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--c-grey-50);
    border-bottom: var(--border);
}

td {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--border);
    color: var(--text-default);
    vertical-align: top;
}

td:last-child, th:last-child { }

tr:last-child td { border-bottom: none; }

tbody tr { cursor: pointer; transition: background 0.1s; }
tbody tr:hover { background: var(--c-grey-50); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.d-tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--border);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    margin-bottom: var(--sp-4);
}

.d-tab {
    padding: 10px var(--sp-4);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s;
}

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

.d-tab.active {
    color: var(--c-violet);
    border-bottom-color: var(--c-violet);
}

.d-tab-content { display: none; }
.d-tab-content.active { display: block; }

/* ── Badges / tags ─────────────────────────────────────────────────────── */

.d-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-1);
    border-radius: var(--r-chip);
    font-size: 11px;
    font-weight: 500;
    border: var(--border);
    background: var(--c-grey-50);
    color: var(--text-subdued);
}

.d-badge-violet { background: var(--c-violet-light); color: var(--c-violet); border-color: transparent; }
.d-badge-green  { background: #e6f7ef; color: #11a969; border-color: transparent; }
.d-badge-amber  { background: #fef9e6; color: #b58a00; border-color: transparent; }
.d-badge-red    { background: #fff0f0; color: #cc1214; border-color: transparent; }
.d-badge-coral  { background: #fef0ea; color: #c04b24; border-color: transparent; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.d-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 7px var(--sp-3);
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: var(--border);
    background: var(--bg-surface);
    color: var(--text-default);
    transition: background 0.15s;
    white-space: nowrap;
}

.d-btn:hover { background: var(--c-grey-50); }

.d-btn-primary {
    background: var(--c-black);
    color: var(--c-white);
    border-color: var(--c-black);
}
.d-btn-primary:hover { background: var(--c-grey-950); }

.d-btn-violet {
    background: var(--c-violet);
    color: var(--c-white);
    border-color: var(--c-violet);
}
.d-btn-violet:hover { background: #7a44e8; }

/* ── Inputs ────────────────────────────────────────────────────────────── */

.d-input {
    width: 100%;
    padding: 8px var(--sp-3);
    border: var(--border);
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-default);
    background: var(--bg-surface);
    outline: none;
    transition: border-color 0.15s;
}

.d-input:focus { border-color: var(--c-violet); }
.d-input::placeholder { color: var(--text-muted); }

/* ── Expandable rows ───────────────────────────────────────────────────── */

.d-expanded-row { background: var(--c-grey-50) !important; }

.d-detail-row { display: none; background: var(--c-grey-50); }
.d-detail-row.show { display: table-row; }

.d-detail-content {
    padding: var(--sp-4) var(--sp-5);
    border-left: 2px solid var(--c-violet);
}

.d-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-2);
}

.d-detail-item {
    background: var(--bg-surface);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-card);
    border: var(--border);
}

.d-detail-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.d-detail-value {
    font-size: 13px;
    color: var(--text-default);
    word-break: break-word;
    white-space: pre-wrap;
}

/* ── Progress bar ──────────────────────────────────────────────────────── */

.d-progress {
    width: 100%;
    height: 4px;
    background: var(--c-grey-100);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.d-progress-fill {
    height: 100%;
    background: var(--c-violet);
    transition: width 0.3s;
}

/* ── Filter bar ────────────────────────────────────────────────────────── */

.d-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--r-card);
    margin-bottom: var(--sp-4);
}

.d-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px var(--sp-1);
    background: var(--c-violet-light);
    color: var(--c-violet);
    border-radius: var(--r-chip);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.d-filter-chip .remove { opacity: 0.6; }
.d-filter-chip .remove:hover { opacity: 1; }

/* ── Loading / empty ───────────────────────────────────────────────────── */

.d-loading {
    text-align: center;
    padding: var(--sp-6);
    color: var(--text-muted);
    font-size: 13px;
}

.d-empty {
    text-align: center;
    padding: var(--sp-6);
    color: var(--text-muted);
    font-size: 13px;
    border: var(--border);
    border-radius: var(--r-card);
    background: var(--bg-surface);
}

/* ── Sentiment ─────────────────────────────────────────────────────────── */

.d-positive { background: #e6f7ef; color: #0a7a4e; }
.d-neutral  { background: var(--c-grey-50); color: var(--text-subdued); }
.d-negative { background: #fff0f0; color: #a81214; }

/* BrainMark */
@keyframes brain-pulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
@keyframes brain-flow  { to { stroke-dashoffset: -24; } }
@keyframes brain-glow  { 0%,100%{opacity:.25} 50%{opacity:.6} }
.brain-node { transform-box: fill-box; transform-origin: center; opacity:.4; }
.brain-spark { stroke-dasharray: 4 20; stroke-dashoffset: 0; opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .brain-live .brain-node  { animation: brain-pulse var(--brain-speed,2.2s) ease-in-out infinite; }
  .brain-live .brain-spark { opacity:1; animation: brain-flow 1.6s linear infinite; }
  .brain-live .brain-edges { animation: brain-glow 3s ease-in-out infinite; }
}

/* Brain hub */
.brain-hero { display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; margin:22px 0 26px; }
.brain-hero h1 { font-size:30px; font-weight:650; margin:0; letter-spacing:-0.01em; }
.brain-hero .brain-mark { color: var(--c-accent, #4b3ff0); filter: drop-shadow(0 0 10px rgba(75,63,240,.35)); }
.brain-hero-state { font-size:13px; color:var(--text-muted); }
.brain-suggest { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.brain-chip { border:var(--border); background:var(--c-grey-50,#f6f7f9); border-radius:999px;
  padding:6px 13px; font-size:13px; color:var(--text-subdued); cursor:pointer; transition:all .12s; }
.brain-chip:hover { background:#eceafd; border-color:#c9c2f7; color:#3a30c4; }
.insight-card { display:flex; gap:12px; align-items:flex-start; border:var(--border);
  border-radius:var(--r-card); padding:12px 14px; margin-bottom:8px; background:#fff; }
.insight-card:hover { box-shadow:0 1px 6px rgba(0,0,0,.06); }
.insight-badge { flex:0 0 auto; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 8px; border-radius:6px; background:#eceafd; color:#4b3ff0; }
.insight-body { flex:1 1 auto; min-width:0; }
.insight-title { font-size:14px; font-weight:550; margin:0 0 2px; }
.insight-detail { font-size:13px; color:var(--text-muted); margin:0;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.insight-time { flex:0 0 auto; font-size:12px; color:var(--text-subdued); white-space:nowrap; }

/* Brain chat bubbles + rendered markdown */
.chat-user { display:inline-block; max-width:100%; margin:10px 0 4px; padding:8px 13px;
  background:#eceafd; color:#2f2a6b; border-radius:12px 12px 12px 3px; font-size:14px; }
.chat-assistant { margin:4px 0 14px; padding:2px 2px; font-size:14px; line-height:1.55; color:var(--text-default); }
.chat-assistant p { margin:0 0 9px; }
.chat-assistant p:last-child { margin-bottom:0; }
.chat-assistant ul, .chat-assistant ol { margin:6px 0 11px; padding-left:20px; }
.chat-assistant li { margin:3px 0; }
.chat-assistant .chat-h { font-size:13px; font-weight:600; margin:13px 0 6px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--text-subdued); }
.chat-assistant strong { font-weight:650; }
.chat-assistant code { background:var(--c-grey-50); padding:1px 5px; border-radius:4px;
  font-size:12.5px; font-family:ui-monospace,Menlo,monospace; }
.chat-assistant a { color:#4b3ff0; }
.chat-table { overflow-x:auto; margin:8px 0 12px; border:var(--border);
  border-radius:var(--r-card); }
.chat-table table { font-size:13px; margin:0; }
.chat-table th { white-space:nowrap; }
.chat-table tbody tr { cursor:default; }
.chat-table tbody tr:hover { background:var(--c-grey-50); }
.chat-tool { font-size:12px; color:var(--text-subdued); margin:4px 0; font-style:italic; }
.chat-confirm { margin:12px 0; padding:14px 16px; border:1px solid #c9c2f7;
  background:#f7f6fe; border-radius:var(--r-card); }
.chat-confirm.resolved { opacity:.65; }
.chat-confirm-title { font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:#4b3ff0; margin-bottom:6px; }
.chat-confirm-body { font-size:14px; line-height:1.5; color:var(--text-default); }
.chat-confirm-body p { margin:0; }
.chat-confirm-cost { font-size:12px; color:var(--text-muted); margin-top:6px; }
.chat-confirm-actions { display:flex; gap:8px; margin-top:12px; }
.chat-confirm-go { padding:7px 18px; border:none; border-radius:var(--r-card);
  background:#4b3ff0; color:#fff; font-size:13px; font-weight:550; cursor:pointer; }
.chat-confirm-go:hover { background:#3a30c4; }
.chat-confirm-go:disabled, .chat-confirm-no:disabled { cursor:default; opacity:.6; }
.chat-confirm-no { padding:7px 16px; border:var(--border); border-radius:var(--r-card);
  background:#fff; color:var(--text-subdued); font-size:13px; cursor:pointer; }
.chat-confirm-no:hover { background:var(--c-grey-50); }

/* Brain chat panel (distinct, self-contained conversation area) */
.brain-chat { display:flex; flex-direction:column; height:460px; border:var(--border);
  border-radius:var(--r-card); background:#fff; box-shadow:0 1px 10px rgba(0,0,0,.05);
  overflow:hidden; margin-bottom:30px; }
.brain-chat-head { display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:var(--border); background:var(--c-grey-50); }
.brain-chat-title { font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-subdued); }
.brain-chat-actions { display:flex; gap:6px; }
.chat-act { font-size:12px; padding:5px 12px; border:var(--border); border-radius:999px;
  background:#fff; color:var(--text-subdued); cursor:pointer; transition:all .12s; }
.chat-act:hover { background:#eceafd; border-color:#c9c2f7; color:#3a30c4; }
.brain-chat-log { flex:1 1 auto; overflow-y:auto; padding:16px 18px; }
.brain-chat-input { display:flex; gap:8px; padding:12px 14px; border-top:var(--border);
  background:#fafafb; }
.chat-send { padding:0 22px; border:none; border-radius:var(--r-card); background:#4b3ff0;
  color:#fff; font-size:14px; font-weight:550; cursor:pointer; transition:background .12s; }
.chat-send:hover { background:#3a30c4; }
.chat-empty { text-align:center; color:var(--text-muted); padding:28px 10px; }
.chat-empty-lead { font-size:14px; margin-bottom:14px; }
.chat-empty .brain-suggest { justify-content:center; }
/* saved-chats dropdown */
.saved-panel { border-bottom:var(--border); background:#fff; max-height:240px; overflow-y:auto; }
.saved-item { display:flex; align-items:center; border-bottom:var(--border); background:#fff; }
.saved-item:hover { background:var(--c-grey-50); }
.saved-open { flex:1 1 auto; min-width:0; display:flex; justify-content:space-between;
  align-items:center; gap:12px; text-align:left; padding:10px 8px 10px 16px;
  border:none; background:transparent; cursor:pointer; font-size:13.5px; }
.saved-title { color:var(--text-default); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-time { color:var(--text-subdued); font-size:12px; white-space:nowrap; }
.saved-actions { display:flex; gap:2px; padding-right:10px; opacity:0; transition:opacity .12s; }
.saved-item:hover .saved-actions { opacity:1; }
.saved-act { border:none; background:transparent; color:var(--text-subdued); cursor:pointer;
  font-size:13px; line-height:1; padding:5px 7px; border-radius:6px; }
.saved-act:hover { background:#eceafd; color:#3a30c4; }
.saved-del:hover { background:#fff0f0; color:#a81214; }
.saved-rename-input { flex:1 1 auto; min-width:0; font-size:13.5px; padding:4px 8px;
  border:1px solid #c9c2f7; border-radius:6px; outline:none; }
.saved-empty { padding:14px 16px; color:var(--text-muted); font-size:13px; }
/* per-table CSV toolbar */
.chat-table-bar { display:flex; justify-content:flex-end; padding:6px 8px 0; }
.chat-csv { font-size:11px; padding:3px 10px; border:var(--border); border-radius:6px;
  background:#fff; color:var(--text-subdued); cursor:pointer; }
.chat-csv:hover { background:#eceafd; color:#3a30c4; border-color:#c9c2f7; }