/* Lead Engine — editorial theme aligned with itstartsnow.se */

:root {
    --bg: #f6f4ef;
    --bg-soft: #efece4;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-hover: #efece4;
    --input-bg: #ffffff;
    --text: #14181c;
    --text-soft: #5c584f;
    --text-muted: #7a746a;
    --text-body: #3a3831;
    --accent: #0f5f96;
    --accent-strong: #14181c;
    --accent-logo: #58b4f5;
    --accent-ink: #f6f4ef;
    --accent-purple: #0f5f96;
    --accent-purple-soft: #0f5f96;
    --danger: #c2372f;
    --success: #2f6b4a;
    --ink: #14181c;
    --border: #ddd8cd;
    --border-strong: #14181c;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow: none;
    --font-sans: "Archivo", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body.app-body {
    background: var(--bg) !important;
    font-family: var(--font-sans);
    color: var(--text);
}

a:hover {
    color: var(--text);
}

::placeholder {
    color: var(--text-muted);
}

select option {
    background: var(--surface);
    color: var(--text);
}

.app-sidebar {
    background: var(--bg);
    border-right: 1px solid var(--border);
}

.app-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.app-brand__now {
    color: var(--accent-logo);
}

.app-brand__name {
    font-size: 15px;
    letter-spacing: -0.02em;
}

.app-nav__item,
.app-nav__item:hover {
    border-radius: 0;
}

.app-nav__item.is-active {
    background: var(--bg-soft);
    border-color: var(--border-strong);
    color: var(--text);
}

.app-footer {
    color: var(--text-muted);
}

.hero,
.card-block,
.panel,
.kpi,
.table-card,
.login-card,
.outreach-modal__panel {
    box-shadow: none !important;
    border-radius: 0;
}

.kpi.is-active {
    background: var(--bg-soft);
    border-color: var(--border-strong);
}

.kpi.is-active .kpi__label {
    color: var(--text-muted);
}

.control,
.filters input[type="text"],
.filters input[type="number"],
.filters select,
.detail-notes textarea,
.note-composer__input,
.outreach-form textarea,
.outreach-form input[type="text"],
.outreach-form input[type="email"],
.outreach-form input[type="number"],
.outreach-preview-body {
    background: var(--input-bg) !important;
    border-color: var(--border);
    border-radius: 0;
    color: var(--text);
}

.pill {
    background: var(--input-bg);
    border-radius: 0;
}

.pill.is-on,
.pill:has(input:checked) {
    background: var(--bg-soft);
    color: var(--text);
    border-color: var(--border-strong);
}

.chip,
.btn-wide,
.btn-ghost {
    background: var(--bg-soft);
    border-radius: 0;
}

.score-bar {
    background: var(--border);
}

.sx {
    scrollbar-color: var(--border) transparent;
}

.btn-primary,
.btn-accent {
    background: var(--accent-strong);
    color: var(--accent-ink);
    border-radius: 0;
}

.btn-accent:hover {
    background: var(--accent);
    color: #ffffff;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-soft);
    color: var(--text);
}

.btn-review {
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0;
}

.btn-save {
    background: var(--accent-strong);
    color: var(--accent-ink);
    border: 1px solid var(--accent-strong);
    border-radius: 0;
}

.btn-save:hover {
    background: var(--accent);
    color: #ffffff;
}

.btn-quiet {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
}

.btn-quiet:hover {
    background: var(--bg-soft);
    border-color: var(--border-strong);
}

.btn-wide {
    border-radius: 0;
}

.hero__btns .btn-accent,
.hero__btns .btn-ghost,
.hero__btns .btn-review {
    border-radius: 0;
}

.detail-tabs {
    gap: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    border-radius: 0;
    width: 100%;
}

.detail-tab {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 600;
}

.detail-tab.is-active {
    background: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--border-strong);
}

.lead-table tbody tr.is-selected {
    background: var(--bg-soft) !important;
}

.lead-table td {
    border-bottom-color: var(--border);
}

.status-badge {
    border-radius: 0;
}

.status-badge--review {
    background: var(--bg-soft);
    color: var(--accent);
}

.status-badge--approved {
    background: #e8f3fb;
    color: var(--accent);
}

.status-badge--contacted {
    background: #e7f3ec;
    color: var(--success);
}

.status-badge--responded {
    background: #dcefe4;
    color: var(--success);
}

.status-badge--deferred {
    background: #f5eed8;
    color: #8a6d1d;
}

.alert-ok {
    background: #e7f3ec;
    border-color: #c5dccf;
    color: var(--success);
}

.alert-danger,
.outreach-callout--danger {
    background: #fceceb;
    border-color: #e8b4b0;
    color: var(--danger);
}

.outreach-callout--warn {
    background: #f5eed8;
    border-color: #ddd8cd;
    color: var(--text-body);
}

.login-body {
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(88, 180, 245, 0.12), transparent 65%),
        var(--bg) !important;
    font-family: var(--font-sans);
    color: var(--text);
}

.login-card {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login-brand {
    flex-wrap: wrap;
    gap: 14px;
}

.login-brand__mark {
    width: auto !important;
    height: auto !important;
    padding: 10px 14px;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.35em;
    background: #0b1117 !important;
    color: var(--accent-ink) !important;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: lowercase;
}

.login-brand__now {
    color: var(--accent-logo);
    text-shadow: 0 0 16px rgba(88, 180, 245, 0.34);
}

.login-brand__name {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.login-title {
    font-weight: 600;
    letter-spacing: -0.03em;
}

.login-field input {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}

.login-field input:focus {
    border-color: var(--border-strong) !important;
    background: var(--input-bg) !important;
}

.login-submit {
    border-radius: 0 !important;
}

.menu-toggle {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 0;
}

/* —— Lead detail: qualification segments —— */
.seg {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 2px !important;
}

.seg span {
    border-radius: 0 !important;
    color: var(--text-muted) !important;
}

.seg input:checked + span,
.seg label:has(input:checked) span {
    background: var(--accent-strong) !important;
    color: var(--accent-ink) !important;
}

.need-pills span {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text-soft) !important;
}

.need-pills input:checked + span,
.need-pills label:has(input:checked) span {
    background: var(--bg-soft) !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}

/* —— Score reasons —— */
.reason__pts {
    color: var(--text) !important;
}

.reason__bar {
    border-radius: 0 !important;
    background: var(--accent) !important;
}

/* —— Outcome actions (Flöde) —— */
.btn-outcome {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
}

.btn-outcome--yes {
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.btn-outcome--later {
    border-color: #8a6d1d !important;
    color: #8a6d1d !important;
}

.btn-outcome--no {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

.btn-outcome--won {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    color: var(--accent-ink) !important;
}

.btn-outcome:hover {
    background: var(--bg-soft) !important;
}

.btn-outcome--won:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

/* —— Note composer —— */
.note-composer {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.note-composer__input {
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    color-scheme: light !important;
}

.note-composer__input::placeholder {
    color: var(--text-muted) !important;
}

.note-composer__input:focus {
    border-color: var(--border-strong) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}

.note-composer__submit {
    border-radius: 0 !important;
}

/* —— Activity feed —— */
.activity-item {
    border-top-color: var(--border) !important;
}

.activity-item__rail {
    border-radius: 0 !important;
    background: var(--border) !important;
    box-shadow: none !important;
}

.activity-item--approved .activity-item__rail,
.activity-item--won .activity-item__rail {
    background: var(--accent) !important;
    box-shadow: none !important;
}

.activity-item--email .activity-item__rail,
.activity-item--responded .activity-item__rail {
    background: var(--success) !important;
    box-shadow: none !important;
}

.activity-item--deferred .activity-item__rail {
    background: #8a6d1d !important;
    box-shadow: none !important;
}

.activity-item--lost .activity-item__rail,
.activity-item--ignored .activity-item__rail {
    background: var(--danger) !important;
    box-shadow: none !important;
}

.activity-item--note .activity-item__rail {
    background: var(--text-muted) !important;
    box-shadow: none !important;
}

.activity-item--review .activity-item__rail {
    background: var(--accent-strong) !important;
    box-shadow: none !important;
}

/* —— Hero / score —— */
.score-ring__inner {
    background: var(--surface) !important;
}

.chip {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-soft) !important;
}

.soft {
    color: var(--text-soft) !important;
    background: transparent !important;
}

/* —— Campaigns —— */
.kpi-grid--campaign {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .kpi-grid--campaign {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .kpi-grid--campaign {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.campaign-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    background: transparent;
}

.campaign-email {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    background: transparent;
}

.hero .lede {
    margin: 10px 0 0;
    max-width: 52ch;
    background: transparent;
}

.status-badge:not([class*="status-badge--"]) {
    background: var(--bg-soft);
    color: var(--text-soft);
    border: 1px solid var(--border);
}

/* —— Outreach —— */
.outreach-callout {
    border-radius: 0 !important;
}

.outreach-callout--warn {
    background: #f5eed8 !important;
    border: 1px solid #e0d4b0 !important;
}

.outreach-callout--warn .outreach-callout__title {
    color: #8a6d1d !important;
}

.outreach-callout--warn .outreach-callout__text,
.outreach-callout--warn .outreach-callout__foot {
    color: var(--text-body) !important;
}

.outreach-callout__foot {
    border-top-color: #e0d4b0 !important;
}

.outreach-recipients__actual {
    color: var(--text) !important;
    font-weight: 600 !important;
}

.outreach-alert--ok {
    background: #e7f3ec !important;
    border-color: #c5dccf !important;
    color: var(--success) !important;
}

.outreach-alert--danger {
    background: #fceceb !important;
    border-color: #e8b4b0 !important;
    color: var(--danger) !important;
}

.outreach-form__section,
.outreach-form input,
.outreach-form textarea,
.outreach-form select {
    border-radius: 0 !important;
}

.facts .alert-ok,
.facts dd.alert-ok {
    background: transparent !important;
    border: 0 !important;
    color: var(--success) !important;
    padding: 0 !important;
}

/* —— Onboarding card —— */
.ob-tabs {
    background: var(--bg-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

.ob-tab {
    border-radius: 0 !important;
}

.ob-tab.is-active {
    background: var(--accent-strong) !important;
    color: var(--accent-ink) !important;
}

.ob-brief {
    background: var(--input-bg) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: var(--font-mono) !important;
}

/* —— Outreach form extras —— */
.outreach-form .control.is-readonly {
    background: var(--bg-soft) !important;
    color: var(--text-soft) !important;
}

.outreach-form__optional {
    background: var(--bg-soft) !important;
    border-radius: 0 !important;
}

.app-user__avatar {
    background: var(--bg-soft) !important;
    border-color: var(--border) !important;
    color: var(--accent) !important;
    border-radius: 0 !important;
}

/* —— Settings hub —— */
.settings-hub__item {
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 160ms ease, background 160ms ease;
}

.settings-hub__item:hover,
.settings-hub__item:focus-visible {
    text-decoration: none !important;
    background: var(--bg-soft) !important;
    border-color: var(--border-strong) !important;
    color: inherit !important;
}

.settings-hub__item:hover .settings-hub__kicker,
.settings-hub__item:hover strong,
.settings-hub__item:hover p,
.settings-hub__item:focus-visible .settings-hub__kicker,
.settings-hub__item:focus-visible strong,
.settings-hub__item:focus-visible p {
    text-decoration: none !important;
    color: inherit;
}

.settings-hub__item:hover .settings-hub__kicker,
.settings-hub__item:focus-visible .settings-hub__kicker {
    color: var(--text) !important;
}

.settings-hub__item p {
    color: var(--text-muted);
}