/* Central-specific compatibility layer — loaded AFTER the ported instance app.css.
   Defines only what the instance design system doesn't already provide:
   the regulation-tree classes, a .badge, a danger button, raw form affordances
   (Tailwind preflight strips default input/button styling), and flash styles. */

/* raw form controls used by the legacy operator templates */
input[type=text], input[type=date], input[type=number], textarea, select {
    padding: .35rem .5rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    background: #fff;
}
textarea { width: 100%; }
.legacy button:not([class]):not(.dt-pop button) {
    cursor: pointer;
    padding: .35rem .7rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-sm);
    background: #fff;
}
.legacy button:not([class]):not(.dt-pop button):hover { background: var(--color-paper); }
form.inline { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }

.btn-danger { color: var(--color-red); border: 1px solid #e3bcbc; border-radius: var(--radius-sm); background: #fff; padding: .15rem .5rem; cursor: pointer; }
.btn-danger:hover { background: var(--color-red-soft); }

/* badges (operator list + node) */
.badge { display: inline-block; font-size: .7rem; padding: .08rem .45rem; border-radius: .6rem; background: #eef3f5; color: #4a626c; }
.badge.review { background: #fbe6c9; color: #8a5a14; }
/* SICODA Edition — bewusst anders als Select (dt-sel/ktag-eigen): Brand-Blau statt Mint */
.dt-edition { background: var(--color-brand-50, #f2f6f8); color: var(--color-brand-600, #2c4a73); box-shadow: inset 0 0 0 1px #c9d6e6; }
.ktag-edition { background: var(--color-brand-50, #f2f6f8); border-color: var(--color-brand-600, #2c4a73); color: var(--color-brand-600, #2c4a73); }

/* regulation tree */
.ft { font-size: .82rem; color: var(--color-ink-soft); white-space: pre-wrap; margin: .2rem 0; }
.comment { font-size: .82rem; background: #f3f8fa; padding: .3rem .5rem; border-radius: .3rem; }
.req { background: #fafcfd; border: 1px solid #e7eef1; border-radius: .3rem; padding: .4rem .6rem; margin: .3rem 0; }
/* Sprungziele (Vorlagen-Sprungliste) nicht unter der fixierten Kopfzeile verstecken, kurz hervorheben */
.req, [id^="norm-"] { scroll-margin-top: 4.5rem; }
.req:target { box-shadow: 0 0 0 2px var(--color-brand-600); }
/* Formularfenster: Tailwind-Preflight setzt den Dialog-Rand zurück → wieder zentrieren, Hintergrund abdunkeln */
dialog[open] { margin: auto; max-height: calc(100vh - 4rem); overflow: auto; }
dialog::backdrop { background: rgb(15 30 45 / .45); }

/* flashes */
.flash { padding: .6rem .85rem; border-radius: var(--radius-md); margin: .6rem 0; font-size: .9rem; }
.flash-success { background: var(--color-brand-soft); color: var(--color-link); }
.flash-warning { background: #fbe6c9; color: #8a5a14; }
.flash-apikey { background: #1b2a3a; color: var(--color-mint-100); font-family: var(--font-mono); word-break: break-all; }

/* ============================================================
   Regelwerke-Redaktionsliste — modernisierte Übersicht
   Signatur: die Status-Pipeline (Entwurf → Veröffentlicht /
   Zurückgezogen) als zählender Schnellfilter. Rest bleibt ruhig.
   ============================================================ */

.toolbar-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* Suche mit vorangestelltem Lupen-Icon */
.search-field { position: relative; }
.search-field svg {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-ink-faint);
    pointer-events: none;
}
.search-field input {
    width: 320px;
    max-width: 100%;
    padding-left: 2rem;
}

/* Status-Pipeline (Signatur) */
.pipe { display: flex; flex-wrap: wrap; gap: .4rem; }
.pipe-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink-soft);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .12s, background .12s, color .12s;
}
.pipe-tab:hover { border-color: var(--color-link); }
.pipe-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-faint); flex: none; }
.pipe-tab.is-entwurf .dot { background: var(--color-amber); }
.pipe-tab.is-veroeffentlicht .dot { background: var(--color-success); }
.pipe-tab.is-zurueckgezogen .dot { background: var(--color-red); }
.pipe-tab .n { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--color-ink-faint); }
.pipe-tab.active { border-color: transparent; background: var(--color-brand); color: #fff; }
.pipe-tab.active .n { color: rgba(255, 255, 255, .8); }

/* kompakte Filterleiste */
.filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.filterbar label { font-size: .8rem; }
.filterbar label > span {
    display: block;
    margin-bottom: .2rem;
    color: var(--color-ink-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .6rem;
}

/* aktive Filter als entfernbare Chips */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fchip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .25rem .2rem .7rem;
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    background: #fff;
    font-size: .78rem;
    color: var(--color-ink-soft);
}
.fchip b { font-weight: 600; color: var(--color-ink); }
.fchip a { color: var(--color-ink-faint); font-weight: 700; line-height: 1; padding: 0 .3rem; text-decoration: none; }
.fchip a:hover { color: var(--color-red); }

/* Regelwerk-Identität: Kurzbez als Aktenzeichen + Titel darunter */
.reg-id { display: block; text-decoration: none; }
.reg-abbr { font-family: var(--font-mono); font-weight: 700; font-size: .9rem; color: var(--color-brand); }
.reg-id:hover .reg-abbr { text-decoration: underline; text-underline-offset: 2px; }
.reg-title {
    display: block;
    margin-top: 1px;
    font-size: .8rem;
    color: var(--color-ink-soft);
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* klickbare Zeile */
.op-table tbody tr.row-link { cursor: pointer; }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; font-size: .85rem; }
.pager .range { color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.pager .pbtns { display: flex; align-items: center; gap: .6rem; }
.pager .pbtn { padding: .35rem .8rem; border: 1px solid var(--color-hairline); border-radius: var(--radius-sm); background: #fff; color: var(--color-link); text-decoration: none; }
.pager .pbtn:hover { background: var(--color-mint-100); }
.pager .pbtn.disabled { color: var(--color-ink-faint); background: var(--color-paper); pointer-events: none; }
.pager .pos { color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }

/* ============================================================
   Editor-Seiten (Einstellungen / Redaktion) — auf das Designsystem
   gehoben: Panels, klare Felder, Chip-Mehrfachauswahl.
   ============================================================ */

.backlink { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--color-link); text-decoration: none; }
.backlink:hover { text-decoration: underline; }

/* Formularfeld mit Label darüber */
.field { display: block; font-size: .85rem; }
.field > span { display: block; margin-bottom: .25rem; font-weight: 600; color: var(--color-ink-soft); }
.field > input, .field > select, .field > textarea { width: 100%; }
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row > .field { flex: 1 1 14rem; }

/* Mehrfachauswahl als Chips (Einklassifizierung / Lizenz-Sachgebiete) */
.checkgrid { display: flex; flex-wrap: wrap; gap: .5rem; }
.checkchip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    color: var(--color-ink-soft);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.checkchip:hover { border-color: var(--color-link); }
.checkchip input { margin: 0; accent-color: var(--color-brand); }
.checkchip:has(input:checked) { border-color: var(--color-link); background: var(--color-mint-100); color: var(--color-link); }

/* Aktionsleiste am Editor-Fuß */
.editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* schlichte Fassungs-/Listenzeilen */
.linelist { font-size: .85rem; }
.linelist li { padding: .35rem 0; border-bottom: 1px solid var(--color-hairline); color: var(--color-ink-soft); }
.linelist li:last-child { border-bottom: 0; }

/* Sachgebiets-Auswahl in der schwebenden Sammelaktionsleiste (dt-bulk, complyfy/core) */
.dt-bulk select { border: 0; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; background: rgba(255, 255, 255, .12); color: #fff; max-width: 14rem; }
.dt-bulk select option { color: #22344e; }