/* ─────────────────────────────────────────────────────────────
   Top Magazin Bonn — Portal styles
   Theme tokens lifted from Planner (planner.css) so the two
   apps share a visual identity. Planner-specific flatplan
   styles are dropped; portal-specific tokens are added below.
   ───────────────────────────────────────────────────────────── */

/* ── CSS Custom Properties — Light (default) ──────────────── */
:root {
    --bg-app:      #f5f5f3;
    --bg-surface:  #ffffff;
    --bg-elevated: #fafaf9;
    --bg-hover:    #f0f0ee;
    --bg-active:   #ebebea;

    --text-primary: #1a1a18;
    --text-muted:   #5F5E5A;
    --text-faint:   #888780;
    --text-whisper: #B4B2A9;

    --border:        rgba(0,0,0,0.10);
    --border-subtle: rgba(0,0,0,0.06);
    --border-input:  rgba(0,0,0,0.15);

    --shadow-card:  0 1px 3px rgba(0,0,0,0.05);
    --shadow-modal: 0 8px 40px rgba(0,0,0,0.18);
    --overlay:      rgba(0,0,0,0.45);

    --accent:               #B8985A;  /* Top Magazin gold */
    --accent-hover:         #a48548;
    --accent-soft:          rgba(184,152,90,0.12);
    --accent-green:         #3B6D11;
    --accent-green-bg:      #eaf3de;
    --accent-green-border:  #c0dd97;
    --accent-green-hover:   #d4eab0;
    --accent-red:           #c0392b;

    --status-new:        #378ADD;
    --status-progress:   #B8985A;
    --status-done:       #3B6D11;
    --status-archive:    #888780;

    --topbar-bg:      #1a1a18;
    --topbar-border:  rgba(255,255,255,0.06);
    --topbar-text:    #B4B2A9;
    --topbar-pill-bg: rgba(255,255,255,0.07);
}

/* ── Dark theme ───────────────────────────────────────────── */
html.dark {
    --bg-app:      #111110;
    --bg-surface:  #1a1a18;
    --bg-elevated: #212120;
    --bg-hover:    #282826;
    --bg-active:   #2f2f2d;

    --text-primary: #e5e3dc;
    --text-muted:   #9c9a93;
    --text-faint:   #6c6a64;
    --text-whisper: #484642;

    --border:        rgba(255,255,255,0.07);
    --border-subtle: rgba(255,255,255,0.04);
    --border-input:  rgba(255,255,255,0.12);

    --shadow-card:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-modal: 0 8px 40px rgba(0,0,0,0.7);
    --overlay:      rgba(0,0,0,0.70);

    --accent:               #d4b572;
    --accent-hover:         #e0c389;
    --accent-soft:          rgba(212,181,114,0.14);
    --accent-green:         #6aaa2a;
    --accent-green-bg:      #1a2e0a;
    --accent-green-border:  #3a5c15;
    --accent-green-hover:   #253f10;
    --accent-red:           #e57373;

    --status-new:        #5ba3eb;
    --status-progress:   #d4b572;
    --status-done:       #6aaa2a;
    --status-archive:    #6c6a64;

    --topbar-bg:      #0d0d0c;
    --topbar-border:  rgba(255,255,255,0.06);
    --topbar-text:    #6e6c66;
    --topbar-pill-bg: rgba(255,255,255,0.05);
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Tell the browser to pick light/dark native UI (date picker, scrollbars,
   select dropdown chrome, autofill) based on the active theme. */
html { color-scheme: light; }
html.dark { color-scheme: dark; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    background: var(--bg-app);
    color: var(--text-primary);
}

/* Date / time / month input calendar icons — `color-scheme` already
   makes the browser render the icon dark on light bg / light on dark bg.
   We just dial each side toward `--text-muted` so the icon matches the
   visual weight of select chevrons / sort carets.
     Light mode: native icon is near-black; use `invert(0.43)` to lift
                 it to ≈ #5F5E5A (--text-muted).
     Dark mode:  native icon is near-white; use `brightness(0.62)` to
                 dim it to ≈ #9c9a93 (--text-muted). NO invert here —
                 inverting the already-light icon would flip it black. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.43);
    transition: filter 0.12s;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator,
html.dark input[type="week"]::-webkit-calendar-picker-indicator {
    filter: brightness(0.62);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { filter: invert(0.20); }
html.dark input[type="date"]:hover::-webkit-calendar-picker-indicator,
html.dark input[type="time"]:hover::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator { filter: brightness(0.88); }
body.portal-body { overflow: hidden; }

a { color: inherit; text-decoration: none; }

/* ── App shell ────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 48px;
    background: var(--topbar-bg);
    border-bottom: 0.5px solid var(--topbar-border);
    flex-shrink: 0;
    z-index: 10;
}
.topbar-brand {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-shrink: 0;
    color: #fff;
}
.topbar-logo {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.topbar-by {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.04em;
}
.topbar-sep {
    width: 0.5px;
    height: 18px;
    background: var(--topbar-border);
    flex-shrink: 0;
    margin: 0 4px;
}
.topbar-page-title {
    font-size: 12px;
    color: var(--topbar-text);
    letter-spacing: 0.02em;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.icon-btn {
    background: none;
    border: 0.5px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--topbar-text);
    cursor: pointer;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-family: inherit;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.icon-btn i { font-size: 12px; }

.topbar-user { position: relative; }
.topbar-user-btn {
    background: none;
    border: 0.5px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--topbar-text);
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.topbar-user-btn:hover,
.topbar-user.open .topbar-user-btn { background: rgba(255,255,255,0.08); color: #fff; }
.topbar-user-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.topbar-user-name { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

.topbar-role-pill {
    font-size: 9px;
    background: var(--topbar-pill-bg);
    color: rgba(255,255,255,0.55);
    padding: 2px 7px;
    border-radius: 10px;
    border: 0.5px solid rgba(255,255,255,0.07);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.topbar-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-modal);
    z-index: 90;
    color: var(--text-primary);
}
.topbar-user.open .topbar-user-menu { display: flex; }
.topbar-user-menu-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.topbar-user-menu-email { font-size: 11px; color: var(--text-muted); padding-bottom: 6px; border-bottom: 0.5px solid var(--border-subtle); margin-bottom: 4px; }
.topbar-user-menu-link {
    font-size: 12px;
    padding: 6px 8px;
    margin: 0 -4px;
    border-radius: 5px;
    color: var(--text-primary);
    transition: background 0.12s;
}
.topbar-user-menu-link:hover { background: var(--bg-hover); color: var(--accent); }

.sidebar-toggle { padding: 5px 9px; }

/* ── Body row ─────────────────────────────────────────────── */
.body-row { display: flex; flex: 1; overflow: hidden; position: relative; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-surface);
    border-right: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, border-right-width 0.2s ease;
}
body.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    border-right-width: 0;
}
.sidebar-backdrop { display: none; }

.sidebar-header {
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    min-height: 46px;
    justify-content: center;
}
.sidebar-header h2 {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-group-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 10px 4px;
}


.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
    border: 0.5px solid transparent;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-item i {
    font-size: 13px;
    color: var(--text-faint);
    flex-shrink: 0;
    width: 16px;
}
.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.nav-item:hover i { color: var(--accent); }
.nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(184,152,90,0.22);
    font-weight: 500;
}
.nav-item.active i { color: var(--accent); }
.nav-item-muted { color: var(--text-faint); }
.nav-item-muted:hover { color: var(--accent-red); }
.nav-item-muted:hover i { color: var(--accent-red); }
.nav-item .nav-item-ext {
    margin-left: auto;
    font-size: 10px;
    width: auto;
    opacity: 0.55;
}

.sidebar-footer {
    padding: 8px;
    border-top: 0.5px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ── Sidebar footer: app version + local dev badge ──────────
   Ported from Planner (planner.css). The version reads from the
   repo-root VERSION file; the amber DEV pill renders only in the
   `preview` (local) environment. */
.sidebar-version {
    margin-top: 8px;
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--text-whisper);
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.sidebar-dev-pill {
    align-self: center;
    margin: 6px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a5a00;
    background: #fff6df;
    border: 1px dashed #e8b84a;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.sidebar-dev-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e8b84a;
    flex-shrink: 0;
}
.sidebar-dev-host {
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #a87a1a;
}
html.dark .sidebar-dev-pill {
    color: #f3cf7a;
    background: rgba(232, 184, 74, 0.08);
    border-color: rgba(232, 184, 74, 0.55);
}
html.dark .sidebar-dev-host { color: #d6b166; }

/* ── Main ─────────────────────────────────────────────────── */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-app);
}

.page-header {
    padding: 18px 24px 12px;
    background: var(--bg-surface);
    border-bottom: 0.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.page-subtitle {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 2px;
}
.page-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 40px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    padding: 8px 14px;
    font-size: 12px;
    border: 0.5px solid var(--border-input);
    border-radius: 7px;
    cursor: pointer;
    background: var(--bg-surface);
    color: var(--text-primary);
    white-space: nowrap;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    text-decoration: none;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-success {
    background: var(--accent-green-bg);
    color: var(--accent-green);
    border-color: var(--accent-green-border);
}
.btn-success:hover { background: var(--accent-green-hover); }
.btn-danger {
    background: transparent;
    color: var(--accent-red);
    border-color: rgba(220,50,50,0.3);
}
.btn-danger:hover { background: rgba(220,50,50,0.08); }
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Search bar ───────────────────────────────────────────── */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 0.5px solid var(--border-input);
    border-radius: 8px;
    padding: 6px 10px;
    flex: 1;
    max-width: 360px;
}
.search-bar i { color: var(--text-faint); font-size: 12px; }
.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}
.search-bar input::placeholder { color: var(--text-faint); }

/* ── Cards / list rows ────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.card {
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.12s, transform 0.12s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card:hover { border-color: var(--accent); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { transform: translateY(-1px); }

.card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
}
.card-sub {
    font-size: 11px;
    color: var(--text-faint);
}
.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 8px;
    border-top: 0.5px solid var(--border-subtle);
}
.card-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-app);
    margin: -14px -16px 4px;
    width: calc(100% + 32px);
    border-radius: 10px 10px 0 0;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-whisper);
    font-size: 11px;
}

/* ── Data table ───────────────────────────────────────────── */
.table-wrap {
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.tbl thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-bottom: 0.5px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.tbl thead th .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.tbl thead th .th-sort:hover { color: var(--text-primary); }
.tbl thead th .th-sort.active { color: var(--accent); }
.tbl thead th .th-sort i { font-size: 11px; }
.tbl thead th .sort-idle { opacity: 0.25; transition: opacity 0.12s; }
.tbl thead th .th-sort:hover .sort-idle { opacity: 0.6; }

.section-tag-status {
    padding: 22px 0 8px;
    gap: 10px;
}
.section-tag-status .status-pill {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.empty-hint-section {
    padding: 18px 16px !important;
    font-size: 11px !important;
    margin-bottom: 4px;
}
.tbl tbody td {
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-primary);
}
.tbl tbody tr { transition: background 0.1s; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl .tbl-actions { white-space: nowrap; text-align: right; }
.tbl .tbl-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl .tbl-muted { color: var(--text-faint); }
.tbl .tbl-notes { color: var(--text-muted); max-width: 280px; }

/* Thumbnail column (anzeigen list) — small image preview, fixed dimensions. */
.tbl .tbl-thumb-col { width: 72px; padding: 4px 8px; }
.tbl .tbl-thumb {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-app);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tbl .tbl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbl .tbl-thumb-empty { color: var(--text-faint); font-size: 14px; }

/* ── Status pills ─────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bg-app);
    color: var(--text-muted);
    border: 0.5px solid var(--border);
}
.status-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-faint);
}
.status-pill.status-new       { color: var(--status-new);      background: rgba(55,138,221,0.10); border-color: rgba(55,138,221,0.25); }
.status-pill.status-new::before       { background: var(--status-new); }
.status-pill.status-progress  { color: var(--status-progress); background: var(--accent-soft);   border-color: rgba(184,152,90,0.25); }
.status-pill.status-progress::before  { background: var(--status-progress); }
.status-pill.status-done      { color: var(--accent-green);    background: var(--accent-green-bg); border-color: var(--accent-green-border); }
.status-pill.status-done::before      { background: var(--status-done); }
.status-pill.status-archive   { color: var(--status-archive);  background: var(--bg-app); }
.status-pill.status-archive::before   { background: var(--status-archive); }

/* ── Stat tiles ───────────────────────────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.stat {
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stat-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.stat-sub { font-size: 11px; color: var(--text-muted); }
.stat-accent .stat-value { color: var(--accent); }

/* Compact per-issue tile row (orders page). Each tile links to a search
   filter on its issue id. Sized smaller than the main Neu/Bearbeitung row. */
.stat-row-issues {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.stat-row-issues .stat {
    padding: 10px 12px;
    gap: 2px;
    text-decoration: none;
}
.stat-row-issues .stat-label {
    font-size: 9px;
    letter-spacing: 0.07em;
    color: var(--text-faint);
}
.stat-row-issues .stat-value {
    font-size: 16px;
    color: var(--text-primary);
}
.stat-row-issues .stat-sub {
    font-size: 10px;
    color: var(--text-muted);
}
.stat-row-issues .stat-issue:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    transition: border-color 0.12s, transform 0.12s;
}

/* ── Section tags ─────────────────────────────────────────── */
.section-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 22px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-tag::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--border);
}
.section-tag:first-child { padding-top: 0; }

/* ── Empty / hint ─────────────────────────────────────────── */
.empty-hint {
    padding: 60px 40px;
    text-align: center;
    color: var(--text-whisper);
    font-size: 12px;
    background: var(--bg-surface);
    border: 0.5px dashed var(--border);
    border-radius: 10px;
}
.empty-hint i { font-size: 24px; display: block; margin: 0 auto 10px; color: var(--text-whisper); }

/* ── Form ─────────────────────────────────────────────────── */
.form-shell {
    background: var(--bg-surface);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
    width: 100%;
}
/* Wide variant for form pages that use TCMS's native formgrid layout
   (e.g. veroeffentlichungen) — the schema-driven grid needs more
   horizontal room than our 2-col forms. */
.form-shell-wide { padding: 22px 28px; }
.form-shell-wide .cms-form-host .totalform.formgrid { max-width: none; }
.edit-form { display: flex; flex-direction: column; gap: 12px; }
.ef-row { display: flex; flex-direction: column; gap: 4px; }
.ef-row.ef-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ef-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ef-input,
.ef-select,
.ef-ta {
    padding: 9px 11px;
    font-size: 13px;
    border: 0.5px solid var(--border-input);
    border-radius: 7px;
    background: var(--bg-surface);
    color: var(--text-primary);
    width: 100%;
    font-family: inherit;
    appearance: auto;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ef-input:focus, .ef-select:focus, .ef-ta:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.ef-ta { resize: vertical; min-height: 90px; }
.ef-actions {
    display: flex;
    gap: 8px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 0.5px solid var(--border-subtle);
    flex-wrap: wrap;
}

/* TCMS form.builder injects its own markup; tame it to fit our look.
   Real TCMS field structure (from src/Domain/Admin/FormField/*.php):

   Standard field:
     <div class="form-field text-field" data-type="text">
       <label for="field-X">Label</label>
       <div class="form-group">
         <input id="field-X" type="text" ...>
         <div class="form-group-icon"></div>   (if icon: true)
       </div>
     </div>

   Checkbox / toggle:
     <div class="form-field checkbox-field" data-type="checkbox">
       <div class="form-group">
         <input type="checkbox" id="field-X" ...>
         <label for="field-X">Label text</label>
       </div>
     </div>
*/

.cms-form-host {
    color: var(--text-primary);
}

/* Two-column layout (matches portal-old's grid-x medium-auto cells). */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.form-col { display: flex; flex-direction: column; gap: 14px; }
.form-col-hidden { display: none; }

@media (max-width: 800px) {
    .form-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Auftragsbestaetigung / Angebote layout:
     Top half  → two equal 50/50 columns (left = personal/contact, right = name/address)
     Bottom    → full-width detail column (Nachricht, deckTable, etc.) */
.form-grid-auftrags {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "left   right"
        "detail detail";
}
.form-grid-auftrags .form-col-left   { grid-area: left; }
.form-grid-auftrags .form-col-right  { grid-area: right; }
.form-grid-auftrags .form-col-detail { grid-area: detail; }

@media (max-width: 700px) {
    .form-grid-auftrags {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "right"
            "detail";
    }
}

/* Sales-portal new-record layout (angebot, auftragsbestaetigung):
   - 4 stacked column cells auto-flow into a 2×2 grid on desktop, matching
     the old portal-old/sales-forms layout (anrede/datum, name/phone,
     email/firma, address).
   - A wide `.form-col-detail` spans both columns underneath for the
     long-form fields (Nachricht, ausgabenwunsch, Rechnungsbetrag,
     besonderheiten, signature/upload, datenschutz, newsletter). */
.form-grid-sales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.form-grid-sales .form-col-detail { grid-column: 1 / -1; }
@media (max-width: 800px) {
    .form-grid-sales { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Signature pad (sales forms + accept page) ───────────────
   The TCMS deckTable / signature widget on this codebase is hand-rolled
   on top of a <canvas>. Style the canvas wrapper + undo/reset action
   buttons so they read cleanly inside the portal's `.cms-form-host`. */
.cms-form-host .signature-stack {
    width: 100%;
    position: relative;
    margin: 6px 0 10px;
}
.cms-form-host .signature-stack > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.cms-form-host .signature-wrap {
    position: relative;
    width: 100%;
    background: #ffffff;
    border: 2px dashed var(--border-input);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
html.dark .cms-form-host .signature-wrap { background: #f5f5f3; }
.cms-form-host .signature-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 150px;
    cursor: crosshair;
    touch-action: none;
    background: transparent;
}
.cms-form-host .signature-canvas.required ~ .signature-wrap,
.cms-form-host .signature-wrap:has(.signature-canvas.required) {
    border-color: rgba(192, 57, 43, 0.45);
}
.cms-form-host .signature-canvas.signed ~ .signature-wrap,
.cms-form-host .signature-wrap:has(.signature-canvas.signed) {
    border-color: var(--accent-green);
    border-style: solid;
}
.cms-form-host .signature-action {
    position: absolute;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #5F5E5A;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cms-form-host .signature-action:hover {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--accent);
}
.cms-form-host .signature-action-undo  { left: 8px; }
.cms-form-host .signature-action-clear { right: 8px; }
.cms-form-host .signature-action-clear:hover { color: var(--accent-red); border-color: var(--accent-red); }
.cms-form-host .signature-action i { font-size: 11px; }
.cms-form-host .signature-hint {
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 8px;
}
.cms-form-host .signature-hidden { display: none; }

/* DCS (document scanner) container — only an alternative-upload affordance,
   styled compactly to match the .btn-ghost aesthetic. */
.cms-form-host .dcs-container {
    margin-bottom: 10px;
}
.cms-form-host .dcs-container > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    cursor: pointer;
}
.cms-form-host .dcs-container > button:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* Each TCMS field wraps in its own block — stretch to fill the column.
   IMPORTANT: complex widget fields (gallery, image, depot, styledtext, file,
   deckTable) ship their own internal layout via admin.css. Don't override
   their .form-group display / input dimensions, or the widget chrome breaks
   (e.g. gallery's hidden <input> needs height:0, gallery's .form-group
   needs display:block + overflow:hidden). */
.cms-form-host .form-field {
    width: 100%;
    display: block;
}
.cms-form-host .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field):not(.checkbox-field):not(.toggle-field) > .form-group {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.cms-form-host .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group > input,
.cms-form-host .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group > select,
.cms-form-host .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group > textarea {
    flex: 1;
    min-width: 0;
}
/* Icon box next to input (renders when `icon: true` on form.field options).
   The icon glyph itself ships in TCMS's dashboard.css which we don't load
   (it would clobber the portal theme). Hide the empty box. */
.cms-form-host .form-group-icon {
    display: none !important;
}

.cms-form-host input,
.cms-form-host select,
.cms-form-host textarea {
    font-family: inherit !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 7px !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    line-height: 1.4;
    width: 100% !important;
    box-sizing: border-box;
    max-width: 100%;
}
/* Native select caret sits flush against the edge — replace with a custom
   SVG chevron and add right padding so it has breathing room. */
.cms-form-host select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23888780' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 11px 8px !important;
}
html.dark .cms-form-host select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239c9a93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
}
.cms-form-host input[type='checkbox'],
.cms-form-host input[type='radio'] {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    accent-color: var(--accent);
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
}
.cms-form-host input:focus,
.cms-form-host select:focus,
.cms-form-host textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.cms-form-host textarea {
    resize: vertical;
    min-height: 100px;
}

/* Labels — sentence-case, normal weight. Stacked above input. */
.cms-form-host label {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-primary) !important;
    margin-bottom: 5px !important;
    display: block;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3;
}

/* Checkbox / toggle: input + label inline (label after the input).
   TCMS structure: <div class="form-field checkbox-field"><div class="form-group"><input><label></div></div> */
.cms-form-host .checkbox-field > .form-group,
.cms-form-host .toggle-field > .form-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 6px 0;
}
.cms-form-host .checkbox-field > .form-group > label,
.cms-form-host .toggle-field > .form-group > label,
.cms-form-host .checkbox-field > .form-group > .form-group-icon,
.cms-form-host .toggle-field > .form-group > .form-group-icon {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    line-height: 1.3;
}
/* Hide the icon-box for checkbox/toggle — it's redundant with the input itself. */
.cms-form-host .checkbox-field .form-group-icon,
.cms-form-host .toggle-field .form-group-icon {
    display: none;
}

/* Save / submit button */
.cms-form-host .form-inline-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--border-subtle);
}
.cms-form-host button[type='submit'],
.cms-form-host .cms-button-save,
.cms-form-host .cms-form-save,
.cms-form-host .cms-save {
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid var(--accent) !important;
    border-radius: 7px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit !important;
    transition: background 0.12s, border-color 0.12s;
}
.cms-form-host button[type='submit']:hover,
.cms-form-host .cms-save:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    opacity: 1;
}

/* Hidden id-field row (TCMS renders the ID field as `.id-field`). */
.cms-form-host .id-field { display: none !important; }
.cms-form-host .form-id-row { display: none; }

/* Wrap any field that should be present-but-not-shown
   (id, type, status, ansprechpartner on auftrags/angebote forms). */
.cms-form-host .form-hidden-row { display: none !important; }

/* ── admin.css scoped overrides ──────────────────────────────
   admin.css is loaded on form pages (gated by $portalLoadAdmin in bootstrap)
   so deckTable / signature pad / file upload / complex field widgets render.
   It also resets a lot of things — clamp the blast radius below. */

/* admin.css's own body / link / button base styles must not escape the form. */
.cms-form-host {
    /* Restore portal typography inside the form */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px;
}

/* admin.css uses Bootstrap-ish container widths; force full width inside our form. */
.cms-form-host .container,
.cms-form-host .container-fluid {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force the deck-table field to span its full container width.
   admin.css sets `.form-group { display: grid; gap: .5rem }` with no
   `grid-template-columns`, so when the form-group has 2 grid items
   (the hidden value-holder <input name="ausgabenwunsch"> AND the
   .deck-table div), the implicit grid puts them side-by-side and the
   table only gets ~half the width.

   Pin the form-group to a SINGLE-COLUMN grid so both items stack and
   each fills the container. Also `display: none` the placeholder input
   so it can't pi-mutate the layout (the value is still POSTed because
   the element stays in the DOM). */
.cms-form-host .form-field.deckTable-field,
.cms-form-host .form-field.deckTable-field .deck-table,
.cms-form-host .form-field.deckTable-field .deck-table-header,
.cms-form-host .form-field.deckTable-field .deck-table-body,
.cms-form-host .form-field.deckTable-field .deck-table-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    grid-column: 1 / -1 !important;
}
.cms-form-host .form-field.deckTable-field {
    display: block !important;
}
.cms-form-host .form-field.deckTable-field > .form-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 0 !important;
}
/* Hide the deckTable's hidden value-holder input. The simple bare
   selector wins regardless of any wrapping class — the input lives
   inside our portal forms only, so global match is safe. */
input[name="ausgabenwunsch"] {
    display: none !important;
}

/* Hide Choices.js's "Press to select" hint on highlighted dropdown items. */
.choices__item--selectable.is-highlighted::after {
    display: none !important;
}

/* Tame the deck-table when it lives inside our form. Style the actual TCMS
   markup (.deck-table) so the rows + header look like the rest of the portal. */
.cms-form-host .deck-table,
.cms-form-host .deck-table-wrap {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    margin: 6px 0;
}

/* Deck-table header — admin.css uses a near-white bg (oklch(--totalform-nearwhite));
   override to the portal's elevated surface so it adapts to dark mode. */
.cms-form-host .deck-table-header {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-faint) !important;
}
.cms-form-host .deck-table-header .deck-table-header-cell {
    color: var(--text-faint) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px !important;
}

/* Row hover — dark-mode-friendly */
.cms-form-host .deck-table-row:hover { background: var(--bg-hover) !important; }
.cms-form-host .deck-table-row { border-bottom: 1px solid var(--border-subtle) !important; }
.cms-form-host .deck-table-row:last-child { border-bottom: none !important; }

/* Delete (trash) button on each deck-table row — admin.css ties its color
   to oklch(var(--totalform-error)) which may not resolve here. Force a
   destructive red in both themes since this is a delete affordance. */
html .cms-form-host .deck-table-row .deck-table-actions button,
html .cms-form-host .deck-table-row .deck-table-actions button.trash {
    background-color: #c0392b !important;
}
html .cms-form-host .deck-table-row .deck-table-actions button:hover,
html .cms-form-host .deck-table-row .deck-table-actions button.trash:hover {
    background-color: #a82a1f !important;
}
html.dark .cms-form-host .deck-table-row .deck-table-actions button,
html.dark .cms-form-host .deck-table-row .deck-table-actions button.trash {
    background-color: #e57373 !important;
}
html.dark .cms-form-host .deck-table-row .deck-table-actions button:hover,
html.dark .cms-form-host .deck-table-row .deck-table-actions button.trash:hover {
    background-color: #f08585 !important;
}
.cms-form-host .deck-table table,
.cms-form-host .deckTable table,
.cms-form-host table.deck-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent !important;
}
.cms-form-host .deck-table thead th,
.cms-form-host .deckTable thead th {
    background: var(--bg-elevated) !important;
    color: var(--text-faint) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px !important;
    text-align: left;
}
.cms-form-host .deck-table tbody td,
.cms-form-host .deckTable tbody td {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 6px 10px !important;
    font-size: 13px;
}
.cms-form-host .deck-table tbody tr:last-child td,
.cms-form-host .deckTable tbody tr:last-child td { border-bottom: none !important; }

/* Buttons admin.css renders for deck-table actions — adapt to portal accent. */
.cms-form-host .deck-table .btn,
.cms-form-host .deck-table button:not([type='submit']),
.cms-form-host .deckTable .btn {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    cursor: pointer;
}
.cms-form-host .deck-table .btn:hover,
.cms-form-host .deck-table button:not([type='submit']):hover { background: var(--bg-hover) !important; }

/* File upload field — admin.css ships its own visual; tone it down to match. */
.cms-form-host .file-field,
.cms-form-host .upload-field {
    background: var(--bg-elevated);
    border: 1px dashed var(--border-input);
    border-radius: 8px;
    padding: 12px;
}
.cms-form-host .file-field:hover { border-color: var(--accent); }

/* ── Gallery / image / depot widget theming ──────────────────────
   admin.css backgrounds use oklch(var(--totalform-nearwhite)) and
   borders use oklch(var(--totalform-purewhite)) — neither var resolves
   in our portal scope, so they fall back to white in dark mode. Replace
   with portal tokens, plus add a bit of breathing room around the
   thumbnail strip so the leftmost actionbar isn't flush against the
   form-shell edge. */
.cms-form-host .gallery-field,
.cms-form-host .image-field,
.cms-form-host .depot-field {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 4px;
}
.cms-form-host .gallery-field .total-preview {
    padding: 8px !important;
}
/* Each thumbnail wrapper — admin uses a 10px white border which clobbers
   dark mode. Use a thin border in our portal palette and a subtle bg. */
.cms-form-host .gallery-field .dz-preview,
.cms-form-host .image-field .dz-preview,
.cms-form-host .depot-field .dz-preview {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card) !important;
    border-radius: 6px !important;
}
/* Image-preview transparency grid — keep it but soften in dark mode. */
html.dark .cms-form-host .gallery-field .image-preview,
html.dark .cms-form-host .image-field .image-preview {
    background-color: var(--bg-app) !important;
}
/* Actionbar (link / star / edit / download / clear / trash / move icons)
   — tint icons to portal text color so they're visible on dark. */
html.dark .cms-form-host .gallery-field .actionbar button,
html.dark .cms-form-host .image-field .actionbar button,
html.dark .cms-form-host .depot-field .actionbar button {
    filter: invert(0.85);
}
/* Trash button stays red in both modes. */
.cms-form-host .gallery-field .actionbar .trash,
.cms-form-host .image-field .actionbar .trash {
    filter: none !important;
}

/* TCMS form's own action/save bar (admin.css) — let our `.form-inline-fields`
   styling take over. */
.cms-form-host .totalform-actions,
.cms-form-host .form-actions {
    border-top: 1px solid var(--border-subtle) !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    background: transparent !important;
}

/* admin.css clamps inputs/selects/textareas to height: 2.4375rem with
   padding: .5rem and line-height: 1.5 (assuming admin's larger font-size).
   With our smaller font-size + larger padding, that fixed height clips
   the text bottom. Force min-height with auto, kill the inset shadow,
   and restore our padding/line-height.
   IMPORTANT: scope to text-like inputs in STANDARD fields only — exclude
   checkbox/radio (compact 16px styling) AND the widgets (gallery, image,
   depot, file, styledtext) whose internal hidden <input> must stay
   height:0/opacity:0.
   We wrap the long :not() chain in :where() so this rule has LOW
   specificity (just the input/select/textarea match) — that lets our
   smaller scoped rules (deck-table-cell, etc.) cleanly win without
   needing matching specificity gymnastics. */
:where(.cms-form-host .totalform .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group) input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
:where(.cms-form-host .totalform .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group) select,
:where(.cms-form-host .totalform .form-field:not(.gallery-field):not(.image-field):not(.depot-field):not(.styledtext-field):not(.file-field):not(.deckTable-field) > .form-group) textarea {
    height: auto !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    border-radius: 7px !important;
}
.cms-form-host .totalform .textarea-field > .form-group textarea { min-height: 100px !important; }
.cms-form-host .totalform .select-field   > .form-group select   { padding-right: 36px !important; }

/* Re-assert portal checkbox / radio styling over admin.css.
   admin.css draws a fake checkbox via `:before` (border box) and `:after`
   (overlay covering the native input) — we need to disable those pseudos
   so the native checkbox renders again and picks up `accent-color`. */
.cms-form-host .totalform input[type='checkbox'],
.cms-form-host .totalform input[type='radio'],
.cms-form-host .checkbox-field input[type='checkbox'],
.cms-form-host .toggle-field input[type='checkbox'],
.cms-form-host input[type='checkbox'],
.cms-form-host input[type='radio'] {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    accent-color: var(--accent);
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
    box-shadow: none !important;
    border: none !important;
    border-radius: 3px !important;
    background: transparent !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    position: static !important;
}

/* Kill admin.css's checkbox/radio pseudo-element overlays. */
.cms-form-host .checkbox-field input[type='checkbox']::before,
.cms-form-host .checkbox-field input[type='checkbox']::after,
.cms-form-host .toggle-field input[type='checkbox']::before,
.cms-form-host .toggle-field input[type='checkbox']::after,
.cms-form-host .totalform input[type='checkbox']::before,
.cms-form-host .totalform input[type='checkbox']::after,
.cms-form-host .totalform input[type='radio']::before,
.cms-form-host .totalform input[type='radio']::after,
.cms-form-host input[type='checkbox']::before,
.cms-form-host input[type='checkbox']::after {
    content: none !important;
    display: none !important;
}

/* Restore portal label sizing after admin.css bumps it to 1.1rem. */
.cms-form-host .checkbox-field input[type='checkbox'] + label,
.cms-form-host .toggle-field input[type='checkbox'] + label {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Hide admin.css's "X" clear button on selects — conflicts with our chevron
   and cramps the text area. The native browser clear-on-empty is fine. */
.cms-form-host .select-clear-button { display: none !important; }

/* ── Choices.js (searchable selects for TCMS list fields) ───── */
.cms-form-host .choices {
    margin-bottom: 0 !important;
    width: 100%;
    font-size: 13px;
}
.cms-form-host .choices__inner {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    min-height: 40px;
    color: var(--text-primary);
    font-size: 13px;
}
.cms-form-host .choices.is-focused .choices__inner,
.cms-form-host .choices.is-open .choices__inner {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none;
}
.cms-form-host .choices__input {
    background: transparent !important;
    color: var(--text-primary) !important;
    margin-bottom: 0;
    font-size: 13px;
    padding: 2px 4px !important;
}
.cms-form-host .choices__placeholder { opacity: 0.5; }

/* Selected items (multi-select chips) */
.cms-form-host .choices__list--multiple .choices__item {
    background: var(--accent-soft) !important;
    border: 1px solid rgba(184,152,90,0.35) !important;
    color: var(--accent) !important;
    border-radius: 5px !important;
    padding: 3px 8px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
}
html.dark .cms-form-host .choices__list--multiple .choices__item {
    color: var(--accent-hover) !important;
    border-color: rgba(212,181,114,0.35) !important;
}
/* X (remove-item) button on multi-select chips.
   admin.css gives this a 20×20 absolute-positioned pill — override to a
   tiny inline cross next to the chip text. The button has `text-indent:
   -9999px` so the visible glyph is the background-image. */
.cms-form-host .choices__list--multiple .choices__button,
.cms-form-host .choices[data-type*='select-multiple'] .choices__button {
    position: static !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B8985A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") !important;
    background-size: 10px 10px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.7;
    filter: none !important;
    box-shadow: none !important;
    vertical-align: middle;
    cursor: pointer;
}
.cms-form-host .choices__list--multiple .choices__button:hover {
    opacity: 1;
    background-color: transparent !important;
}
.cms-form-host .choices__list--multiple .choices__button:focus {
    outline: none !important;
    box-shadow: none !important;
    opacity: 1;
}
html.dark .cms-form-host .choices__list--multiple .choices__button,
html.dark .cms-form-host .choices[data-type*='select-multiple'] .choices__button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23d4b572' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") !important;
}

/* Single-select selected item */
.cms-form-host .choices__list--single .choices__item {
    color: var(--text-primary);
    padding: 2px 0;
}

/* Dropdown menu */
.cms-form-host .choices__list--dropdown,
.cms-form-host .choices__list[aria-expanded] {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 7px !important;
    box-shadow: var(--shadow-modal) !important;
    margin-top: 4px;
    color: var(--text-primary);
    z-index: 50;
}
.cms-form-host .choices__list--dropdown .choices__item {
    color: var(--text-primary) !important;
    padding: 8px 12px;
    font-size: 13px;
}
.cms-form-host .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
}
.cms-form-host .choices__list--dropdown .choices__placeholder { color: var(--text-faint); }
.cms-form-host .choices__no-results,
.cms-form-host .choices__no-choices {
    color: var(--text-faint);
    font-size: 12px;
    padding: 10px 12px;
}

/* Caret on the right edge */
.cms-form-host .choices[data-type*='select-one']::after {
    border-color: var(--text-muted) transparent transparent !important;
    right: 14px;
}
.cms-form-host .choices[data-type*='select-one'].is-open::after {
    border-color: transparent transparent var(--text-muted) !important;
}

/* ── Choices inside deck-table cells ─────────────────────────
   The deck-table-row already supplies its own visual frame, so the
   Choices wrapper should sit FLUSH inside the cell — no border, no
   rounded corners, no extra padding stealing horizontal space.
   These rules win over our `.cms-form-host .choices__inner` defaults
   via the deeper `.deck-table-cell` selector. */
.cms-form-host .deck-table-cell .choices,
.cms-form-host .deck-table-row .choices {
    margin-bottom: 0 !important;
    width: 100%;
}
.cms-form-host .deck-table-cell .choices__inner,
.cms-form-host .deck-table-row .choices__inner {
    background: var(--bg-app) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    min-height: 32px !important;
    font-size: 12px;
}
.cms-form-host .deck-table-cell .choices.is-focused .choices__inner,
.cms-form-host .deck-table-cell .choices.is-open .choices__inner,
.cms-form-host .deck-table-row .choices.is-focused .choices__inner,
.cms-form-host .deck-table-row .choices.is-open .choices__inner {
    background: var(--bg-app) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}
/* Cell needs visible overflow when its dropdown is open. */
.cms-form-host .deck-table-cell { overflow: visible; }
.cms-form-host .deck-table:has(.choices.is-open) { overflow: visible !important; }

/* Plain <input>/<select>/<textarea> inside a deck-table cell — slightly
   darker bg + thin border so the click target is obvious in both themes. */
.cms-form-host .deck-table-cell input:not([type='checkbox']):not([type='radio']),
.cms-form-host .deck-table-cell select,
.cms-form-host .deck-table-cell textarea {
    border: 1px solid var(--border) !important;
    background: var(--bg-app) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}
.cms-form-host .deck-table-cell input:focus,
.cms-form-host .deck-table-cell select:focus,
.cms-form-host .deck-table-cell textarea:focus {
    background: var(--bg-app) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}

/* Drop the per-cell label TCMS form-field renders above the input —
   the deck-table header already labels each column. */
.cms-form-host .deck-table-cell .form-field > label,
.cms-form-host .deck-table-row .form-field > label { display: none !important; }

/* Pi show/hide states (powered by /rw_common/plugins/stacks/pi.min.js). */
.pi-showhide { transition: opacity 0.15s; }
.pi-hide { display: none !important; }
.pi-show { display: block; }

/* ── Toast ────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a18;
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 999;
    pointer-events: none;
    white-space: nowrap;
    border: 0.5px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-modal);
}
.toast.show { opacity: 1; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-input); }

/* ── Mobile (≤800px) ──────────────────────────────────────── */
@media (max-width: 800px) {
    .topbar-page-title { display: none; }
    .topbar-user-inline { display: none; }
    .topbar-user-btn { padding: 4px 8px; }

    .body-row { position: relative; }
    .sidebar {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 260px; min-width: 260px;
        z-index: 80;
        box-shadow: 6px 0 24px rgba(0,0,0,0.25);
        transition: transform 0.22s ease;
    }
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
        width: 260px;
        min-width: 260px;
        border-right-width: 0.5px;
    }
    /* FOUC suppression: header.php's pre-paint script stamps this class on
       <html> before the body parses, so the sidebar paints offscreen on first
       mobile load (no visible open → close jump). `transition: none` prevents
       the slide animation during this initial paint; portal.js then migrates
       the state to `body.sidebar-collapsed` and removes this class so future
       toggles animate normally. */
    html.sidebar-init-collapsed .sidebar {
        transform: translateX(-100%);
        transition: none;
    }
    body:not(.sidebar-collapsed) .sidebar-backdrop {
        display: block;
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 79;
    }

    .page-header { padding: 14px 16px 10px; flex-wrap: wrap; }
    .page-body { padding: 16px; }
    .ef-row.ef-row-grid { grid-template-columns: 1fr; }
    .form-shell { padding: 18px; }
}

/* ── Mobile (≤640px) — narrow-phone overrides ─────────────── */
@media (max-width: 640px) {
    /* Topbar density: drop the "/ Bonn" subtitle (keep TOP MAGAZIN as the
       brand anchor) and tighten the action row so lang/theme/user don't wrap. */
    .topbar-by { display: none; }
    .topbar { padding: 0 12px; }
    .topbar-actions { gap: 4px; }
}

/* ── iOS zoom prevention — sitewide editable form controls ───────────
   iOS Safari auto-zooms any focusable field whose computed font-size is
   < 16px when focused. Fire on every touch device in ANY orientation
   (pointer:coarse catches iPhone/iPad landscape, which a width query
   misses) PLUS narrow viewports, and force >=16px on every editable
   control. Scoped to .portal-body, which every PWA surface carries
   (portal, sales-portal, /login, /accept all link this stylesheet and
   set body.portal-body). !important is required to beat the base
   `.cms-form-host input { font-size: 13px !important }` rule and the
   deck-table Choices rules. Checkbox/radio/hidden are excluded — they
   don't take a text cursor and don't trigger zoom. */
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
    .portal-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
    .portal-body select,
    .portal-body textarea,
    .portal-body .choices__inner,
    .portal-body .choices__input {
        font-size: 16px !important;
    }
}