/* Rufus web — on top of Bootstrap 5.3. Accent matches the desktop (#4f46e5). */
:root, [data-bs-theme="light"] {
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --rufus-bg: #f6f7fb;
  --rufus-group: #eef0f8;
  --rufus-edited: #fef3c7;
}
[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --rufus-bg: #12141a;
  --rufus-group: #1f2330;
  --rufus-edited: #4a3b10;
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: rgba(var(--bs-primary-rgb), .12); --bs-nav-pills-link-active-color: var(--bs-primary); }
.form-range::-webkit-slider-thumb { background: var(--bs-primary); }
.form-range::-moz-range-thumb { background: var(--bs-primary); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }

body { background: var(--rufus-bg); }
.rufus-brand { color: var(--bs-primary) !important; letter-spacing: -.02em; }
.rufus-topbar { height: 56px; }
.rufus-shell { display: flex; min-height: calc(100vh - 56px); }
.rufus-sidebar { width: 230px; flex: 0 0 230px; }
@media (min-width: 992px) {
  .rufus-sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
  .rufus-sidebar .offcanvas-body { height: 100%; flex-grow: 1; }
}
.rufus-sidebar .nav-link { color: var(--bs-body-color); display: flex; align-items: center; gap: .6rem; border-radius: .5rem; }
.rufus-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.rufus-main { flex: 1 1 auto; min-width: 0; padding: 1.25rem; }
@media (max-width: 575px) { .rufus-main { padding: 1rem; } }
.rufus-modes .btn { white-space: nowrap; }

.page-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }
.page-head .lead-sm { color: var(--bs-secondary-color); margin: 0; }

.card { border-color: var(--bs-border-color-translucent); }
.kpi-card .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.kpi-card .value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-card .sub { font-size: .8rem; color: var(--bs-secondary-color); }
.kpi-card { border-left: 4px solid var(--kpi-accent, var(--bs-primary)); }

.agent-card { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; height: 100%; }
.agent-card:hover { transform: translateY(-1px); box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }
.agent-card .agent-icon { font-size: 1.6rem; line-height: 1; }

.result-summary { white-space: pre-wrap; }
.table-results { font-size: .85rem; font-variant-numeric: tabular-nums; }
.table-results th { white-space: nowrap; cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); }
.table-results th .sort { opacity: .5; font-size: .7rem; }
.table-results td { white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.table-results tr.group-row td { background: var(--rufus-group); font-weight: 700; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; }
.table-results input.qty { width: 5.5rem; padding: .1rem .35rem; font-weight: 700; }
.table-results tr.edited input.qty { background: var(--rufus-edited); }
.table-wrap { max-height: 70vh; overflow: auto; }

.stat-chip { border: 1px solid var(--bs-border-color-translucent); border-radius: .6rem; padding: .45rem .75rem; background: var(--bs-body-bg); min-width: 120px; }
.stat-chip .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.stat-chip .value { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-chip.accent { border-left: 4px solid var(--chip, var(--bs-primary)); }

.progress-msg { font-size: .85rem; color: var(--bs-secondary-color); }

/* Chat */
.chat-wrap { display: flex; gap: 1rem; height: calc(100vh - 56px - 2.5rem); }
.chat-history { width: 240px; flex: 0 0 240px; overflow-y: auto; }
@media (max-width: 991px) { .chat-history { display: none; } .chat-wrap { height: calc(100vh - 56px - 2rem); } }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: .25rem .25rem 1rem; }
.msg-user { margin-left: auto; max-width: 75%; background: var(--bs-primary); color: #fff; border-radius: 1rem 1rem .25rem 1rem; padding: .6rem .9rem; white-space: pre-wrap; }
.msg-bot { max-width: 100%; }
.msg-bot .bubble { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem 1rem 1rem .25rem; padding: .8rem 1rem; }
.msg-bot .bubble p:last-child { margin-bottom: 0; }
.chip-btn { border-radius: 999px; }
.chat-step { font-size: .8rem; color: var(--bs-secondary-color); }
.chart-box { position: relative; height: 300px; }

/* Alerts */
.alert-item { cursor: pointer; border-left: 4px solid var(--alert-color, var(--bs-border-color)); }
.alert-item.active { outline: 2px solid var(--bs-primary); }
.alert-detail { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
.evidence-step { display: flex; gap: .6rem; }
.evidence-step .ic { width: 1.4rem; flex: 0 0 1.4rem; text-align: center; }

.pre-text { white-space: pre-wrap; font-size: .9rem; }
.signin-gate { position: fixed; inset: 0; z-index: 2000; background: var(--rufus-bg); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cursor-pointer { cursor: pointer; }
.link-cell { cursor: pointer; color: var(--bs-link-color); text-decoration: underline dotted; }