/* ===========================================================
   SMFlow design system (Phase B)
   Dense, light, professional analytics tool — not a landing page.
   Class names are kept stable from the previous theme on purpose:
   every existing page's markup keeps working unchanged. Only the
   tokens and component styles change here.
   =========================================================== */
:root {
    --bg:            #F5F7FA;
    --surface:       #FFFFFF;
    --surface-alt:   #F8FAFC;
    --border:        #E2E7EE;
    --text:          #20242B;
    --text-dim:      #667085;
    --text-faint:    #98A2B3;

    --brand:         #C9161D;
    --brand-hover:   #A91218;
    --brand-tint:    #FDECEC;

    --positive:      #159A62;
    --positive-tint: #EAF7F1;
    --negative:      #D92D3A;
    --negative-tint: #FDECEC;
    --warning:       #F59E0B;
    --warning-tint:  #FEF6E7;

    /* Legacy token names some pages still reference — mapped onto the
       new palette so nothing silently loses its color. */
    --amber:         var(--warning);
    --surface-raised: var(--surface-alt);

    --radius-sm: 5px;
    --radius-md: 7px;
    --control-h: 34px;
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; }

/* ---------- App shell ---------- */
.app-shell {
    display: grid;
    grid-template-columns: 208px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 0;
    display: flex;
    flex-direction: column;
}

.sidebar__brand {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--text);
    padding: 0 18px 14px;
    margin-bottom: 8px;
}
.sidebar__brand span { color: var(--brand); }

.nav-group { margin-bottom: 14px; }
.nav-group__label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    padding: 0 18px 5px;
}
.nav-link {
    display: block;
    padding: 6px 18px;
    color: var(--text-dim);
    font-size: 12.5px;
    border-left: 2px solid transparent;
    line-height: 1.4;
}
.nav-link:hover { color: var(--text); text-decoration: none; background: var(--surface-alt); }
.nav-link.active {
    color: var(--brand);
    font-weight: 600;
    border-left-color: var(--brand);
    background: var(--brand-tint);
}

.main { display: flex; flex-direction: column; min-width: 0; }

/* Dark charcoal top header — the one deliberately dark surface in an
   otherwise light app, per the brand direction. */
.topbar {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #1A1D24;
    color: #E4E6EA;
    flex-shrink: 0;
}
.topbar__daterange {
    font-size: 12px;
    color: #E4E6EA;
    background: #262A33;
    border: 1px solid #363B47;
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    height: var(--control-h);
}
.topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #B8BCC4;
    margin-left: 14px;
}
.topbar__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); display: inline-block; }
.topbar__status .dot.warn { background: var(--warning); }
.topbar__status .dot.bad { background: var(--negative); }
.topbar__tools { color: #B8BCC4; margin-left: 10px; font-size: 12.5px; }
.topbar__tools a { color: #B8BCC4; }
.topbar__tools a:hover { color: #fff; }
.topbar__user { color: #B8BCC4; font-size: 12.5px; }
.topbar__user a { color: #B8BCC4; margin-left: 12px; }
.topbar__user a:hover { color: #fff; }
.topbar__left { display: flex; align-items: center; }

.content { padding: 20px 22px; flex: 1; }

/* ---------- KPI cards ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.kpi-card__label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.kpi-card__value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
}
.kpi-card__delta { font-family: var(--font-mono); font-size: 11px; margin-top: 5px; }
.kpi-card__delta.up { color: var(--positive); }
.kpi-card__delta.down { color: var(--negative); }
.kpi-card__delta.flat { color: var(--text-faint); }

/* ---------- Panels ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.panel__header {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel__title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.panel__body { padding: 0; }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.03em;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
    position: sticky; top: 0;
}
table.data-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    color: var(--text);
    white-space: nowrap;
}
table.data-table td.text { font-family: var(--font-ui); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--surface-alt); }
.num-positive { color: var(--positive); font-weight: 600; }
.num-negative { color: var(--negative); font-weight: 600; }

/* Subtle full-row profitability tint — never saturated. */
tr.row-positive td { background: var(--positive-tint); }
tr.row-negative td { background: var(--negative-tint); }
tr.row-positive:hover td, tr.row-negative:hover td { filter: brightness(0.98); }

.empty-state {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-dim);
}
.empty-state__title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.empty-state__body { font-size: 12.5px; color: var(--text-faint); max-width: 420px; margin: 0 auto; }

/* ---------- System health ---------- */
.health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.health-item {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.health-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.health-dot.ok { background: var(--positive); }
.health-dot.warn { background: var(--warning); }
.health-dot.bad { background: var(--negative); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; box-shadow: 0 1px 3px rgba(20,24,32,0.06); }
.login-card__brand { font-weight: 700; font-size: 16px; margin-bottom: 18px; }
.login-card__brand span { color: var(--brand); }

/* ---------- Form controls ---------- */
/* Outlined/floating label: the label sits ON the input's top border
   rather than above it, matching the reference screenshots. .field
   already wraps <label> + the control everywhere in the app, so this
   is a pure CSS change — no markup changes needed on any page. */
.field { margin-bottom: 15px; position: relative; }
.field label {
    position: absolute;
    top: -7px; left: 9px;
    max-width: calc(100% - 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface);
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-faint);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}
.field input, .field select, .field textarea {
    width: 100%;
    height: var(--control-h);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    color: var(--text);
    font-size: 12.5px;
    font-family: var(--font-ui);
}
.field textarea { height: auto; padding: 12px 10px 8px; font-family: var(--font-mono); font-size: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.field__hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.4; }

/* Segmented control — a row of mutually-exclusive buttons sharing one
   bordered group, e.g. Lander Type. Wrap real radios so it degrades
   to something usable without JS; style hides the radio itself. */
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.segmented input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented label {
    position: static; background: none; padding: 0 16px; height: var(--control-h);
    display: flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-faint); cursor: pointer; border-right: 1px solid var(--border);
}
.segmented label:last-child { border-right: none; }
.segmented input[type="radio"]:checked + label { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.btn:hover { background: var(--brand-hover); }
.btn-inline { width: auto; }
.form-error {
    background: var(--negative-tint);
    border: 1px solid #F6C6CA;
    color: var(--negative);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    font-size: 12px;
    margin-bottom: 13px;
}
.form-success {
    background: var(--positive-tint);
    border: 1px solid #B7E4CF;
    color: var(--positive);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    font-size: 12px;
    margin-bottom: 13px;
}
.form-info {
    background: #EAF2FE;
    border: 1px solid #C7DCFB;
    color: #1E4C8C;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 13px;
}
.form-info ul { margin: 4px 0 0 18px; padding: 0; }

/* ---------- Generic CRUD forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; padding: 14px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-actions { padding: 11px 14px; border-top: 1px solid var(--border); display: flex; gap: 9px; }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; height: var(--control-h);
    background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0 14px; font-size: 12.5px; cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { color: var(--text); border-color: var(--text-faint); text-decoration: none; background: var(--surface-alt); }
.btn-danger-link { color: var(--negative); background: none; border: none; padding: 0; font-size: 12px; cursor: pointer; }
.btn-danger-link:hover { text-decoration: underline; }

.row-actions a, .row-actions button { margin-right: 10px; font-size: 12px; }

.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.badge.active { background: var(--positive-tint); color: var(--positive); }
.badge.paused { background: var(--warning-tint); color: #92620A; }
.badge.archived { background: var(--surface-alt); color: var(--text-faint); border: 1px solid var(--border); }
.badge.error { background: var(--negative-tint); color: var(--negative); }
.badge.pending { background: var(--surface-alt); color: var(--text-dim); border: 1px solid var(--border); }

.copy-url {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 9px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.copy-url[data-url] { cursor: pointer; }
.copy-url[data-url]:hover { border-color: var(--text-faint); background: var(--surface); }
.copy-url__icon {
    flex-shrink: 0; width: 14px; height: 14px; color: var(--text-faint);
    display: inline-flex; align-items: center; justify-content: center;
}
.copy-url__icon svg { width: 100%; height: 100%; }
.copy-url[data-url]:hover .copy-url__icon { color: var(--brand); }
.copy-url--copied .copy-url__icon { color: var(--positive); }
.copy-url__feedback {
    display: none; font-family: var(--font-ui); font-weight: 600; font-size: 11px; color: var(--positive);
}
.copy-url--copied .copy-url__feedback { display: inline; }
.copy-url--copied .copy-url__text { display: none; }
.copy-url button { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 11px; font-family: var(--font-ui); font-weight: 600; }

/* ---------- Tabs (reused by tool pages, modal forms, log viewer) ---------- */
.tabbar { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.tab-link {
    display: inline-block;
    border-left: none;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tab-link:hover { color: var(--text); text-decoration: none; }
.tab-link.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }

/* ---------- Tooltip ---------- */
.tt { position: relative; display: inline-flex; align-items: center; cursor: help; color: var(--text-faint); }
.tt .tt-bubble {
    display: none;
    position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
    background: #1A1D24; color: #fff; font-size: 11px; font-weight: 400;
    padding: 6px 9px; border-radius: var(--radius-sm); white-space: normal; width: 220px; z-index: 40;
    line-height: 1.4;
}
.tt:hover .tt-bubble { display: block; }

/* ---------- Reusable modal / drawer system ----------
   Same overlay markup and classes for every entity's create/edit form.
   Backdrop + panel; sticky header and footer, scrollable body. No page
   using this needs its own bespoke modal CSS. */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(20,24,32,0.42);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px; z-index: 100; overflow-y: auto;
}
.modal {
    background: var(--surface);
    border-radius: var(--radius-md);
    width: 100%; max-width: 1180px;
    box-shadow: 0 4px 18px rgba(20,24,32,0.14);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 60px);
}
.modal--narrow { max-width: 760px; }
.modal--wide { max-width: 1400px; }
.modal__header {
    position: sticky; top: 0; background: var(--surface);
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.modal__title { font-size: 14px; font-weight: 600; }
.modal__header-actions { display: flex; gap: 8px; align-items: center; }
.modal__close { background: none; border: none; color: var(--text-faint); font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1; }
.modal__close:hover { color: var(--text); }
.modal__tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.modal__body { overflow-y: auto; flex: 1; }
.modal__section-label { font-size: 11.5px; font-weight: 600; color: var(--text-dim); padding: 14px 14px 0; }
.modal__footer {
    position: sticky; bottom: 0; background: var(--surface);
    padding: 12px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 9px; justify-content: flex-end;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.modal__footer .btn, .modal__footer .btn-secondary { width: auto; }

/* Macro chips (URL macro pickers on Offers/Landers) */
.macro-chip {
    display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 999px; padding: 3px 9px; margin: 2px 3px 2px 0; cursor: pointer;
}
.macro-chip:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; background: var(--brand-tint); }

.saving-indicator { font-size: 11.5px; color: var(--text-faint); margin-left: 8px; }

/* ---------------- Dashboard hero KPI cards ---------------- */
.hero-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.hero-kpi { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.hero-kpi__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.hero-kpi__icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-kpi__icon svg { width: 17px; height: 17px; }
.hero-kpi__title { font-size: 14px; font-weight: 700; color: var(--text); }
.hero-kpi__body { background: var(--surface); padding: 14px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.hero-kpi__period { font-size: 11px; color: var(--text-faint); margin-bottom: 3px; }
.hero-kpi__value { font-size: 18px; font-weight: 700; color: var(--text); }
.hero-kpi__value--sub { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.hero-kpi--blue .hero-kpi__head { background: #EAF0FE; }
.hero-kpi--blue .hero-kpi__icon { background: #3D6FE0; color: #fff; }
.hero-kpi--green .hero-kpi__head { background: #EAF7EE; }
.hero-kpi--green .hero-kpi__icon { background: #2E9E52; color: #fff; }
.hero-kpi--orange .hero-kpi__head { background: #FDF1E4; }
.hero-kpi--orange .hero-kpi__icon { background: #E08A2E; color: #fff; }

/* ---------------- Best performing panels ---------------- */
.best-performing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.best-perf-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 10px 0 6px; }
.best-perf-label:first-child { margin-top: 0; }
.best-perf-empty { font-size: 12px; color: var(--text-faint); padding-bottom: 8px; }
.best-perf-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.best-perf-table td { padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
.best-perf-table tr:last-child td { border-bottom: none; }
.best-perf-table__name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 1px; width: 60%; }
.best-perf-table td:not(.best-perf-table__name) { text-align: right; color: var(--text-dim); }

@media (max-width: 1100px) {
    .hero-kpi-grid, .best-performing-grid { grid-template-columns: 1fr; }
}

/* ---------------- Reports table toolbar (Phase I) ----------------
   Scoped to .report-table / .report-toolbar so this never changes
   the look of any other page's tables. */
.report-table td:not(.text) { text-align: right; }
.report-table.compact th, .report-table.compact td { padding: 4px 10px; }

.report-toolbar { display: flex; gap: 8px; align-items: center; }
.report-toolbar .btn-secondary { position: relative; }
.columns-panel {
    display: none;
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(20,24,32,0.12);
    padding: 8px; min-width: 180px; z-index: 30;
    max-height: 320px; overflow-y: auto;
}
.columns-panel.open { display: block; }
.columns-panel label { display: flex; align-items: center; gap: 7px; padding: 4px 6px; font-size: 12px; font-weight: 400; color: var(--text); cursor: pointer; }
.columns-panel label:hover { background: var(--surface-alt); border-radius: 4px; }
.density-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.density-toggle button {
    background: var(--surface); border: none; color: var(--text-dim); font-size: 11.5px; padding: 0 10px; height: var(--control-h); cursor: pointer;
}
.density-toggle button.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.density-toggle button + button { border-left: 1px solid var(--border); }