/* Internal-tool-specific tweaks layered on top of the public stylesheet. */

/* ── Proportional scaling ───────────────────────────────────────────
   Everything below is sized in rem, so scaling the root font-size with the
   viewport width makes the whole UI keep the same *proportions* of the
   screen on any monitor: bigger screens get proportionally bigger text and
   controls instead of a small fixed-width column. */
html { font-size: clamp(13px, 0.55vw + 9px, 20px); }

/* Fluid layout — drop the public stylesheet's 1400px cap so the page always
   uses the same percentage of the window regardless of screen size. */
.container { max-width: none; }

/* ── Bright theme override (Kivra-inspired) ─────────────────────────
   Scoped to the internal tool only (this stylesheet is not loaded by the
   public site), so the public dark theme is untouched. */
:root {
    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface2: #eef1f7;
    --border: #dce1ea;
    --text: #1f2733;
    --text-muted: #5b6675;
    --primary: #2f6fed;
    --primary-hover: #2257c4;
    --accent: #0e9aa7;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
}

body { background: var(--bg); color: var(--text); }
header { box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
header h1 span { color: var(--primary); }

/* ── Top-nav dropdown menu (CSP-safe native <details>) ──────────────── */
.nav-menu { position: relative; }
.nav-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu-toggle {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.55rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}
.nav-menu-icon { font-size: 1.15rem; line-height: 1; }
.nav-menu-toggle:hover { background: var(--border); }
.nav-menu[open] .nav-menu-toggle { background: var(--primary); color: #fff; border-color: var(--primary); }
.nav-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    box-shadow: 0 10px 30px rgba(15,23,42,0.14);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    z-index: 300;
}
.nav-menu-dropdown a {
    padding: 0.6rem 0.8rem;
    border-radius: 0.45rem;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}
.nav-menu-dropdown a:hover { background: var(--surface2); color: var(--text); }

.internal-badge {
    background: var(--warning);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    letter-spacing: 0.05em;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}
.flash-info    { background: rgba(59,130,246,0.12); border-color: var(--primary); }
.flash-warning { background: rgba(245,158,11,0.12); border-color: var(--warning); }
.flash-error   { background: rgba(239,68,68,0.12);  border-color: var(--danger); }

.pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--surface2);
    font-size: 0.75rem;
    margin-right: 0.25rem;
    white-space: nowrap;
}
.pill-success  { background: rgba(22,163,74,0.14);   color: #15803d; }
.pill-danger   { background: rgba(220,38,38,0.12);    color: #b91c1c; }
.pill-muted    { background: var(--surface2);         color: var(--text-muted); }
.pill-warning  { background: rgba(245,158,11,0.18);   color: #b45309; }
.pill-info     { background: rgba(47,111,237,0.14);   color: #1d4ed8; }
.pill-new      { background: rgba(22,163,74,0.16);    color: #15803d; font-weight: 600; }

/* ── Column info tooltip ────────────────────────────────────────── */
.col-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 700;
    cursor: default;
    margin-left: 0.3rem;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}
/* Override shared style.css which uppercases all thead th */
thead th { text-transform: none; }

.col-info-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    transform: none;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    width: 230px;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    text-align: left;
}
.col-info:hover .col-info-tip,
.col-info:focus .col-info-tip { display: block; }

/* ── Truncated reasoning text under Steg 2 / Steg 3 pills ───────── */
.reasoning-text {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 0.25rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.reasoning-text.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
    overflow: visible;
}
.reasoning-toggle {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.2rem;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
}
.reasoning-toggle:hover { text-decoration: underline; }

/* ── Client form ────────────────────────────────────────────────── */
.form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.form-section-icon { font-size: 1.3rem; line-height: 1.2; }
.form-section-title { font-weight: 600; font-size: 0.95rem; }
.form-section-sub   { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.15rem; }

.profile-form label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
.profile-form label small {
    display: block;
    margin-top: 0.3rem;
    font-weight: 400;
    font-size: 0.77rem;
    color: var(--text-muted);
}
.profile-form label small kbd {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-size: 0.72rem;
}
.required { color: var(--danger); }

/* Tag input */
.tag-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.4rem;
    padding: 0.35rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    cursor: text;
    margin-top: 0.35rem;
    transition: border-color 0.15s;
}
.tag-input-wrap:focus-within { border-color: var(--primary); }
.tag-input {
    border: none !important;
    background: transparent !important;
    outline: none;
    color: var(--text);
    font-size: 0.875rem;
    min-width: 140px;
    flex: 1;
    padding: 0.1rem 0 !important;
    margin: 0 !important;
}
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(59,130,246,0.18);
    color: #93c5fd;
    border-radius: 999px;
    padding: 0.15rem 0.5rem 0.15rem 0.65rem;
    font-size: 0.78rem;
    white-space: nowrap;
}
.tag-remove {
    background: none;
    border: none;
    color: #93c5fd;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    opacity: 0.7;
}
.tag-remove:hover { opacity: 1; }
.tag-pill-or {
    background: rgba(245,158,11,0.18);
    color: #fcd34d;
}
.tag-pill-or .tag-remove { color: #fcd34d; }

/* Source checkboxes */
.source-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.source-check {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400 !important;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin: 0 !important;
}
.source-check:has(input:checked) {
    border-color: var(--primary);
    background: rgba(59,130,246,0.1);
}
.source-check input { margin: 0; accent-color: var(--primary); }

/* Input with suffix (MSEK, days) */
.input-suffix-wrap {
    display: flex;
    align-items: stretch;
    margin-top: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    overflow: hidden;
}
.input-suffix-wrap input {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex: 1;
}
.input-suffix-wrap:focus-within { border-color: var(--primary); }
.input-suffix {
    background: var(--surface2);
    border-left: 1px solid var(--border);
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Toast notifications ─────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    z-index: 9999;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s;
    max-width: 360px;
}
.toast.toast-show    { opacity: 1; transform: translateY(0); }
.toast.toast-info    { border-color: var(--primary); }
.toast.toast-warning { border-color: var(--warning); }
.toast.toast-error   { border-color: var(--danger); }
.toast-action {
    margin-left: 0.85rem;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    border-radius: 0.35rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.toast-action:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* ── Workflow view (master–detail) ─────────────────────────────── */
/* List/detail split: the list column width is the draggable percentage
   --wf-split (default 35%), the detail panel takes the rest. The middle
   `auto` track holds the drag handle. */
.workflow-split {
    display: grid;
    grid-template-columns: minmax(0, var(--wf-split, 35%)) auto minmax(0, 1fr);
    gap: 0.4rem;
    align-items: start;
}

/* Drag handle between the panes */
.workflow-splitter {
    width: 0.45rem;
    align-self: stretch;
    cursor: col-resize;
    border-radius: 999px;
    background: var(--border);
    touch-action: none;
    user-select: none;
    transition: background 0.15s;
}
.workflow-splitter:hover,
.workflow-splitter.is-dragging { background: var(--primary); }

/* Handling button group */
.handling-buttons { display: inline-flex; gap: 0.25rem; align-items: center; }
.handling-btn { padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid rgba(0,0,0,0.06); background: var(--surface2); cursor: pointer; font-size: 0.85rem; }
.handling-btn.is-active { box-shadow: 0 0 0 2px rgba(0,0,0,0.04) inset; font-weight: 600; }
.handling-btn-avslag { color: var(--danger); }
.handling-btn-inte_hanterad { color: var(--text-muted); }
.handling-btn-hanterad { color: #b47f00; }
.handling-btn-skickad { color: var(--success); }
.handling-btn-go { color: var(--success); font-weight:700; font-size:0.95rem; }

/* Wide tables scroll sideways inside their column instead of breaking the
   35/65 layout when the window is narrow. */
.workflow-clients-table { display: block; overflow-x: auto; }

/* Left: master list */
.workflow-master {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.workflow-master-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.workflow-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.workflow-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.workflow-sort-select {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.workflow-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.workflow-sort-dir {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.74rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.4rem;
    cursor: pointer;
    white-space: nowrap;
}
.workflow-sort-dir:hover { border-color: var(--text-muted); }
.workflow-search {
    margin-bottom: 0.65rem;
}
.wf-search-input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
}
.wf-search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.wf-search-input::placeholder {
    color: var(--text-muted);
}
.workflow-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.workflow-filters label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}
.workflow-filters input { cursor: pointer; accent-color: var(--primary); }
.workflow-filter-sep {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: -0.1rem 0.2rem;
}
.workflow-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-right: 0.25rem;
}
.workflow-list-empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.workflow-list-empty[hidden] { display: none; }

/* "Ladda fler omatchade" row at the bottom of the list */
.workflow-unmatched-loader {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0 0.6rem;
    flex-shrink: 0;
}
.workflow-unmatched-loader[hidden] { display: none; }
.workflow-unmatched-loader .wf-load-more { font-size: 0.78rem; padding: 0.35rem 0.9rem; }

/* Master cards */
.workflow-card {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 0.45rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.workflow-card:hover { box-shadow: 0 2px 10px rgba(20,40,80,0.08); }
.workflow-card[hidden] { display: none; }
.workflow-card:active { transform: scale(0.997); }
.workflow-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.workflow-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(47,111,237,0.18);
}

/* Icon-only quick actions (archive / mark unopened) on the card's left edge */
.wf-card-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
}
.wf-card-action {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.wf-card-action:hover { border-color: var(--primary); background: var(--surface); }
.wf-card-body { flex: 1 1 auto; min-width: 0; }
.wf-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.wf-card-title {
    /* Take all remaining width so the status/handling pills sit in fixed
       right-aligned columns instead of trailing the (variable-length) title. */
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* Fixed-width, right-aligned pill columns: the Öppnad/Oöppnad pill always
   sits at the same horizontal position, at a constant distance from the
   handling pill next to it. */
.wf-card-status {
    flex: 0 0 auto;
    min-width: 4.4rem;
    display: flex;
    justify-content: flex-end;
}
.wf-card-handling {
    flex: 0 0 auto;
    min-width: 5.2rem;
    display: flex;
    justify-content: flex-end;
}
.wf-card-status .pill { font-size: 0.62rem; padding: 0.05rem 0.4rem; }
.wf-card-meta {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.wf-card-org {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.wf-card-foot {
    margin-top: 0.15rem;
    display: flex;
    gap: 0.7rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

/* Per-status accent on the left border of cards (open state only —
   handling status tints the background instead, below) */
.workflow-card.workflow-status-ooppnad { border-left-color: var(--primary); }
.workflow-card.workflow-status-oppnad  { border-left-color: var(--border); }

/* Handling tint on cards */
.workflow-card.workflow-handling-skickad  { background: rgba(47,111,237,0.05); }
.workflow-card.workflow-handling-hanterad { background: rgba(245,158,11,0.06); }
.workflow-card.workflow-handling-avslag   { background: rgba(220,38,38,0.05); }
.workflow-card.workflow-handling-inte_hanterad { background: transparent; }
.workflow-card.workflow-handling-go { background: rgba(16,163,82,0.04); }

/* Unmatched cards (only visible with the "Visa omatchade" toggle) */
.workflow-card.workflow-unmatched { border-left-color: var(--warning); }

/* Archived cards (only visible with the "Visa arkiverade" toggle) */
.workflow-card.workflow-archived {
    opacity: 0.55;
    border-left-color: var(--text-muted);
}

/* GO pill: bold, slightly larger, green and consistent across UI */
.pill-go {
    background: rgba(22,163,74,0.16);
    color: #14532d;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

/* Right: detail panel */
.workflow-detail {
    position: sticky;
    top: 1rem;
    min-width: 0;
}
.workflow-detail-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1rem 1.1rem 1.1rem;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}
.wf-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.wf-detail-title {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    line-height: 1.3;
}
.wf-detail-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.wf-detail-toolbar {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.handling-select {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    cursor: pointer;
    min-width: 9rem;
}
.handling-select option { padding: 0.25rem; }

.handling-log {
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface2);
    border-radius: 0.4rem;
    font-size: 0.78rem;
}
.handling-log-title {
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.handling-log-list { list-style: none; margin: 0; padding: 0; }
/* Compact scroll window: show ~3 entries, scroll for the rest.
   Newest entries are rendered first (server orders changed_at DESC, JS prepends). */
.handling-log-list {
    max-height: 5.2rem;
    overflow-y: auto;
}
.handling-log-entry {
    padding: 0.15rem 0;
    color: var(--text);
    line-height: 1.4;
    border-bottom: 1px dashed var(--border);
}
.handling-log-entry:last-child { border-bottom: none; }
.handling-log-actor   { font-weight: 600; }
.handling-log-status  { font-weight: 600; }
.handling-log-time    { color: var(--text-muted); margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.handling-log-empty   { color: var(--text-muted); font-style: italic; }
.handling-log-hanterad .handling-log-status { color: var(--warning); }
.handling-log-skickad  .handling-log-status { color: var(--primary); }
.handling-log-avslag   .handling-log-status { color: var(--danger); }
.handling-log-inte_hanterad .handling-log-status { color: var(--text-muted); }

/* "Skickad av X" banner in the detail head */
.wf-detail-sentby {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #15803d;
    background: rgba(22,163,74,0.10);
    border-radius: 0.4rem;
    padding: 0.25rem 0.55rem;
}
.wf-detail-sentby[hidden] { display: none; }
.wf-detail-sentby span { color: var(--text-muted); margin-left: 0.35rem; }

/* Manual match row under the clients table */
.workflow-add-client {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}
.workflow-add-client-select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
}

.workflow-description {
    margin: 0.4rem 0 0.75rem 0;
}
.workflow-no-matches {
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: rgba(245,158,11,0.08);
    border: 1px dashed var(--warning);
    border-radius: 0.45rem;
    font-size: 0.83rem;
    color: var(--text-muted);
}
.workflow-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
.workflow-clients-table thead th {
    text-align: left;
    text-transform: none;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
.workflow-clients-table tbody td {
    padding: 0.55rem 0.6rem;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.workflow-clients-table tbody tr:last-child td { border-bottom: 0; }
.workflow-match-handled { opacity: 0.65; }

/* Mejl column: send status under the button */
.workflow-mejl-status .mejl-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
    line-height: 1.3;
    word-break: break-all;
}

/* Status column: GO/NOGO toggle per client */
.outcome-buttons { display: inline-flex; gap: 0.3rem; }
.outcome-btn {
    padding: 0.3rem 0.65rem;
    border-radius: 0.35rem;
    border: 1px solid var(--border);
    background: var(--surface2);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.outcome-btn-go:hover   { border-color: var(--success); color: var(--success); }
.outcome-btn-nogo:hover { border-color: var(--danger);  color: var(--danger); }
.outcome-btn-go.is-active {
    background: rgba(22,163,74,0.16);
    border-color: var(--success);
    color: #15803d;
}
.outcome-btn-nogo.is-active {
    background: rgba(220,38,38,0.12);
    border-color: var(--danger);
    color: #b91c1c;
}
.workflow-status-select {
    width: 100%;
    padding: 0.3rem 0.45rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--text);
    font-size: 0.78rem;
}

/* Email modal */
.workflow-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.workflow-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}
.workflow-modal-content {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 1.25rem;
    width: min(640px, 100%);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}