:root {
    color-scheme: light;

    /* Memex-Consulting-Markenfarben (memex-consulting.de), 1:1 aus deren CSS
       übernommen: --memex-darkblue, --memex-contrastblau, --memex-lightblue,
       --memex-red/-red-hover, --memex-grau/-lightgrey, --memex-softblack. */
    --ink: #0e3770;
    --ink-soft: #14458c;
    --ink-softer: #307abb;
    --paper: #f1f0f5;
    --surface: #ffffff;
    --border: #e5e4eb;
    --border-soft: #edecf1;
    --text: #2b2a29;
    --text-muted: #6d7078;

    --accent: #d50539;
    --accent-hover: #f00640;
    --accent-soft: #fbe3ea;
    --accent-ink: #7a0329;

    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --status-synced-bg: #e3f4e9;
    --status-synced-text: #1f7a43;
    --status-pending-bg: #eceef2;
    --status-pending-text: #4b5563;
    --status-retry-bg: #e2edfc;
    --status-retry-text: #2758a6;
    --status-mapping_error-bg: #fcefd7;
    --status-mapping_error-text: #9a5b06;
    --status-moco_locked-bg: #f1e5fb;
    --status-moco_locked-text: #7238ab;
    --status-auth_error-bg: #fbe2e1;
    --status-auth_error-text: #b3261e;
    --status-failed-bg: #fbe2e1;
    --status-failed-text: #b3261e;
    --status-deleted-bg: #eceef2;
    --status-deleted-text: #6b7280;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* ---------- Login ---------- */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(107, 165, 217, 0.22), transparent 45%),
        var(--ink);
}

.login-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 40px 36px;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}

.login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 51px;
}

.login-mark svg {
    width: 100%;
    height: 100%;
}

.login-form h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 4px 0 0;
}

.login-form p.sub {
    margin: -10px 0 4px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.error {
    color: var(--status-failed-text);
    background: var(--status-failed-bg);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin: 0;
}

/* ---------- App shell ---------- */

.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 216px;
    flex-shrink: 0;
    background: var(--ink);
    color: #dcdde2;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ffffff;
    flex-shrink: 0;
    padding: 5px;
}

.brand-mark svg {
    width: 100%;
    height: 100%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-text strong {
    font-size: 13.5px;
    color: #fff;
    font-weight: 600;
}

.brand-text span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: #7fb0dd;
    letter-spacing: 0.02em;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.nav-link {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    color: #accbe8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.nav-link:hover {
    background: var(--ink-soft);
    color: #fff;
}

.nav-link.is-active {
    background: var(--ink-softer);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--accent);
}

.nav-logout {
    display: block;
    padding: 9px 12px;
    border-radius: 7px;
    color: #7fb0dd;
    text-decoration: none;
    font-size: 12.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
    padding-top: 14px;
}

.nav-logout:hover {
    color: #fff;
}

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

.topbar {
    padding: 26px 32px 18px;
}

.topbar h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.topbar-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-family: var(--font-mono);
}

main {
    padding: 0 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1760px;
}

/* ---------- Cards & sections ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 22px;
}

.card-title {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card + .card {
    margin-top: 0;
}

/* ---------- 2/3-1/3 Zeilen (z. B. Mapping + zugehörige Ausschlussliste) ---------- */

.split-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: start;
}

.split-row > .split-main {
    flex: 2 1 480px;
    min-width: 0;
}

.split-row > .split-side {
    flex: 1 1 320px;
    min-width: 0;
}

/* ---------- KPI tiles ---------- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.kpi .kpi-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.kpi .kpi-label {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Tables ---------- */

.table-wrap {
    overflow-x: auto;
}

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

th, td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

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

td.mono, th.mono {
    font-family: var(--font-mono);
}

.empty-row td {
    color: var(--text-muted);
    font-style: italic;
    white-space: normal;
}

.cell-primary {
    font-weight: 500;
    white-space: normal;
}

.cell-secondary {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Zwei gleichwertige Zeilen ohne Name/ID-Hierarchie (z. B. Jira-/MOCO-Projektname
   in der Logs-Spalte "Projekt") — gleiche Schriftart und -größe für beide. */
.cell-line {
    font-size: 13px;
    white-space: normal;
}

.cell-line + .cell-line {
    margin-top: 1px;
}

td.wrap {
    white-space: normal;
    max-width: 320px;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--status-pending-bg);
    color: var(--status-pending-text);
}

.badge-synced { background: var(--status-synced-bg); color: var(--status-synced-text); }
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
.badge-retry { background: var(--status-retry-bg); color: var(--status-retry-text); }
.badge-mapping_error { background: var(--status-mapping_error-bg); color: var(--status-mapping_error-text); }
.badge-moco_locked { background: var(--status-moco_locked-bg); color: var(--status-moco_locked-text); }
.badge-auth_error { background: var(--status-auth_error-bg); color: var(--status-auth_error-text); }
.badge-failed { background: var(--status-failed-bg); color: var(--status-failed-text); }
.badge-deleted { background: var(--status-deleted-bg); color: var(--status-deleted-text); }

/* ---------- Forms ---------- */

form.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* start statt end: ein längerer Hinweistext unter einem Feld darf nur
       dieses eine Feld nach unten wachsen lassen, ohne die Eingabefelder der
       Nachbarspalten zu verschieben (bei "end" richten sich alle Felder an
       der Unterkante aus, wodurch kürzere Felder mitsamt Input nach oben
       rutschen, sobald ein Nachbarfeld einen Hinweis bekommt). */
    align-items: start;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Hält den "Anlegen/Speichern"-Button auf gleicher Höhe mit den Eingabefeldern,
   obwohl das Formular jetzt an der Oberkante statt der Unterkante ausrichtet
   (siehe form.inline-form) — der unsichtbare Spacer hat dieselbe Höhe wie eine
   Feld-Beschriftung darüber. */
.form-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-actions .spacer {
    visibility: hidden;
    font-size: 12px;
    line-height: 1.3;
}

input, select {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--text);
    min-width: 160px;
}

input:focus, select:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
    border-color: var(--accent);
}

select option[hidden] {
    display: none;
}

button {
    padding: 8px 16px;
    border: none;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    transition: background 0.12s ease;
}

button:hover {
    background: var(--accent-hover);
}

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

button.btn-ghost:hover {
    background: var(--paper);
    color: var(--text);
}

.btn-ghost-link {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}

.btn-ghost-link:hover {
    background: var(--paper);
    color: var(--text);
}

.btn-ghost-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.row-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: none;
}

/* ---------- Flash & hints ---------- */

.flash {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent-ink);
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 13px;
}

.hint {
    display: block;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.3;
    margin-top: 4px;
    max-width: 220px;
}

.fetch-warning {
    background: var(--status-mapping_error-bg);
    color: var(--status-mapping_error-text);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 12.5px;
    margin-bottom: 14px;
}