/* ============================================================
   Components — Buttons, Cards, Tables, Forms, Badges, Modals …
   Überschreibt Bootstrap-Defaults via höherer Specifity wo nötig.
   ============================================================ */

/* =========================================================
   BUTTONS
   ========================================================= */
.btn,
button.btn,
a.btn {
    --btn-bg: transparent;
    --btn-color: var(--color-text-primary);
    --btn-border: transparent;
    --btn-bg-hover: var(--color-surface-hover);
    --btn-color-hover: var(--color-text-primary);
    --btn-border-hover: transparent;
    --btn-padding-y: 0.4375rem;
    --btn-padding-x: var(--space-4);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.25;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    min-height: 36px;
}
.btn:hover:not(:disabled) { background: var(--btn-bg-hover); color: var(--btn-color-hover); border-color: var(--btn-border-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; }

.btn.btn-primary,
.btn-primary {
    --btn-bg: var(--color-brand-primary);
    --btn-color: var(--color-text-on-brand);
    --btn-border: var(--color-brand-primary);
    --btn-bg-hover: var(--color-brand-primary-hover);
    --btn-color-hover: var(--color-text-on-brand);
    --btn-border-hover: var(--color-brand-primary-hover);
    font-weight: var(--weight-semibold);
}
.btn-primary:active:not(:disabled) { background: var(--color-brand-primary-active); border-color: var(--color-brand-primary-active); }

.btn.btn-secondary,
.btn-secondary {
    --btn-bg: var(--color-surface-raised);
    --btn-color: var(--color-text-primary);
    --btn-border: var(--color-border-strong);
    --btn-bg-hover: var(--color-surface-hover);
    --btn-color-hover: var(--color-text-primary);
    --btn-border-hover: var(--color-border-strong);
}

.btn.btn-ghost,
.btn-ghost {
    --btn-bg: transparent;
    --btn-color: var(--color-text-secondary);
    --btn-border: transparent;
    --btn-bg-hover: var(--color-surface-hover);
    --btn-color-hover: var(--color-text-primary);
}

.btn.btn-danger,
.btn-danger {
    --btn-bg: var(--color-danger);
    --btn-color: #fff;
    --btn-border: var(--color-danger);
    --btn-bg-hover: #b91c1c;
    --btn-color-hover: #fff;
    --btn-border-hover: #b91c1c;
    font-weight: var(--weight-semibold);
}

.btn.btn-outline-primary,
.btn-outline-primary {
    --btn-bg: transparent;
    --btn-color: var(--color-brand-primary);
    --btn-border: var(--color-brand-primary);
    --btn-bg-hover: var(--color-brand-primary-tint);
    --btn-color-hover: var(--color-brand-primary-hover);
    --btn-border-hover: var(--color-brand-primary);
}
.btn.btn-outline-secondary,
.btn-outline-secondary {
    --btn-bg: transparent;
    --btn-color: var(--color-text-secondary);
    --btn-border: var(--color-border-strong);
    --btn-bg-hover: var(--color-surface-hover);
    --btn-color-hover: var(--color-text-primary);
    --btn-border-hover: var(--color-border-strong);
}
.btn.btn-outline-success,
.btn-outline-success {
    --btn-bg: transparent;
    --btn-color: var(--color-success);
    --btn-border: var(--color-success);
    --btn-bg-hover: var(--color-success-tint);
    --btn-color-hover: var(--color-success);
}
.btn.btn-outline-warning,
.btn-outline-warning {
    --btn-bg: transparent;
    --btn-color: var(--color-warning);
    --btn-border: var(--color-warning);
    --btn-bg-hover: var(--color-warning-tint);
    --btn-color-hover: var(--color-warning);
}
.btn.btn-outline-danger,
.btn-outline-danger {
    --btn-bg: transparent;
    --btn-color: var(--color-danger);
    --btn-border: var(--color-danger);
    --btn-bg-hover: var(--color-danger-tint);
    --btn-color-hover: var(--color-danger);
}
.btn.btn-outline-info,
.btn-outline-info {
    --btn-bg: transparent;
    --btn-color: var(--color-info);
    --btn-border: var(--color-info);
    --btn-bg-hover: var(--color-info-tint);
    --btn-color-hover: var(--color-info);
}
.btn.btn-success,
.btn-success {
    --btn-bg: var(--color-success);
    --btn-color: #fff;
    --btn-border: var(--color-success);
    --btn-bg-hover: #15803d;
    --btn-color-hover: #fff;
    font-weight: var(--weight-semibold);
}

/* Sizing */
.btn.btn-sm,
.btn-sm {
    --btn-padding-y: 0.25rem;
    --btn-padding-x: var(--space-3);
    font-size: var(--text-sm);
    min-height: 30px;
    border-radius: var(--radius-md);
}
.btn.btn-lg,
.btn-lg {
    --btn-padding-y: 0.625rem;
    --btn-padding-x: var(--space-5);
    font-size: var(--text-md);
    min-height: 44px;
}

/* Icon-only Button */
.btn-icon {
    padding: 0;
    width: 36px;
    min-height: 36px;
}
.btn-icon.btn-sm { width: 30px; min-height: 30px; }
.btn-icon.btn-lg { width: 44px; min-height: 44px; }

/* =========================================================
   CARDS
   ========================================================= */
.card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.card:hover { border-color: var(--color-border-strong); }
.card .card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
}
.card .card-body { padding: var(--space-5); }
.card .card-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); color: var(--color-text-primary); }
.card-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); }

/* =========================================================
   TABLES
   ========================================================= */
.table,
table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    box-shadow: none;
}
.table thead th {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text-primary);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table tbody tr.selected { background: var(--color-brand-primary-tint); }

.table.table-sm thead th,
.table.table-sm tbody td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

.table.table-hover tbody tr:hover { background: var(--color-surface-hover); }
.table.table-striped tbody tr:nth-of-type(odd) { background: var(--color-surface-sunken); }
.table.table-striped tbody tr:nth-of-type(odd):hover { background: var(--color-surface-hover); }
.table.table-borderless tbody td,
.table.table-borderless thead th { border: none; }

.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

/* Massen-Auswahl */
.table .checkbox-cell { width: 40px; }

/* =========================================================
   FORMS
   ========================================================= */
.form-label,
label.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}
.form-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.form-control,
input.form-control,
select.form-select,
textarea.form-control {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    box-shadow: none;
}
.form-control:hover,
.form-select:hover { border-color: var(--color-neutral-400); }
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-focus);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:disabled,
.form-control[readonly] {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.form-control.form-control-sm,
.form-select.form-select-sm { min-height: 30px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

/* Checkbox & Radio */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    min-height: auto;
}
.form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 3px;
    background: var(--color-surface-raised);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
    appearance: none;
    flex-shrink: 0;
    position: relative;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}
.form-check-input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3.5,8.5 6.5,11.5 12.5,5"/></svg>') center/12px no-repeat;
}
.form-check-input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}
.form-check-input:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.form-check-label {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

/* Switch */
.form-switch .form-check-input {
    width: 32px; height: 18px;
    border-radius: var(--radius-full);
    background-color: var(--color-neutral-300);
    border-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out);
    position: relative;
}
.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--duration-fast) var(--ease-out);
}
.form-switch .form-check-input:checked { background-color: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.form-switch .form-check-input:checked::before { transform: translateX(14px); }
.form-switch .form-check-input::after { display: none; }

.invalid-feedback {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-1);
}
.form-control.is-invalid {
    border-color: var(--color-danger);
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}

/* Input-Group */
.input-group {
    display: flex;
    align-items: stretch;
}
.input-group .form-control,
.input-group .form-select {
    border-radius: 0;
}
.input-group > :first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.input-group > :last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.input-group > * + * { margin-left: -1px; }
.input-group-text {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* =========================================================
   BADGES & CHIPS
   ========================================================= */
.badge,
span.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}
.badge.bg-primary,
.badge.bg-brand { background: var(--color-brand-primary-tint); color: var(--color-brand-primary-hover); border-color: transparent; }
.badge.bg-success { background: var(--color-success-tint); color: #0f7a38; border-color: transparent; }
.badge.bg-warning { background: var(--color-warning-tint); color: #9a5502; border-color: transparent; }
.badge.bg-danger { background: var(--color-danger-tint); color: #a81d1d; border-color: transparent; }
.badge.bg-info { background: var(--color-info-tint); color: #03608e; border-color: transparent; }
.badge.bg-secondary { background: var(--color-surface-sunken); color: var(--color-text-secondary); border-color: var(--color-border); }
.badge.bg-light { background: var(--color-surface-sunken); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.badge.bg-outline-primary { background: transparent; color: var(--color-brand-primary); border-color: var(--color-brand-primary); }

/* Status-Dot */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.status-dot::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-400);
    flex-shrink: 0;
}
.status-dot.status-success::before { background: var(--color-success); }
.status-dot.status-warning::before { background: var(--color-warning); }
.status-dot.status-danger::before { background: var(--color-danger); }
.status-dot.status-info::before { background: var(--color-info); }

/* =========================================================
   ALERTS (als ruhige Info-Panels)
   ========================================================= */
.alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.alert.alert-info { background: var(--color-info-tint); border-color: transparent; color: #03608e; }
.alert.alert-success { background: var(--color-success-tint); color: #0f7a38; }
.alert.alert-warning { background: var(--color-warning-tint); color: #9a5502; }
.alert.alert-danger { background: var(--color-danger-tint); color: #a81d1d; }

/* =========================================================
   NAV-TABS (für Module-Detail, Form-Designer, etc.)
   ========================================================= */
.nav-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}
.nav-tabs .nav-item { list-style: none; }
.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    border-radius: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--color-text-primary); }
.nav-tabs .nav-link.active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
    font-weight: var(--weight-semibold);
}

/* =========================================================
   MODAL / DIALOG
   ========================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 28, 0.52);
    z-index: var(--z-backdrop);
    backdrop-filter: blur(2px);
}
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    overflow: auto;
}
.modal-dialog {
    max-width: 560px;
    margin: var(--space-10) auto;
    padding: 0 var(--space-4);
}
.modal-dialog.modal-lg { max-width: 800px; }
.modal-dialog.modal-xl { max-width: 1140px; }
.modal-content {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
.modal-body { padding: var(--space-5); }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
}
.btn-close {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
    opacity: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" stroke="%236B7487" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}
.btn-close:hover { background: var(--color-surface-hover); }

/* =========================================================
   DROPDOWN
   ========================================================= */
.dropdown-menu {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    margin-top: 4px;
    min-width: 200px;
    z-index: var(--z-dropdown);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-surface-hover); }
.dropdown-item.active { background: var(--color-brand-primary-tint); color: var(--color-brand-primary); }
.dropdown-divider { border-top: 1px solid var(--color-border); margin: var(--space-1) 0; }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state {
    padding: var(--space-12) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
}
.empty-state-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-xl);
    background: var(--color-surface-sunken);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}
.empty-state-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.empty-state-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.empty-state-description { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 420px; margin: 0 auto var(--space-4); }

/* =========================================================
   KPI Cards (Dashboard)
   ========================================================= */
.kpi-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.kpi-card:hover { border-color: var(--color-border-strong); }
.kpi-card-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}
.kpi-card-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-primary);
}
.kpi-card-delta {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.kpi-card-delta.up { color: var(--color-success); }
.kpi-card-delta.down { color: var(--color-danger); }

/* =========================================================
   Data-List-Header (Filterleiste / Toolbar über Tabellen)
   ========================================================= */
.data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.data-toolbar-left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.data-toolbar-right { display: flex; align-items: center; gap: var(--space-2); }

/* Entry-Count */
.entry-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Monospace für IDs, Timestamps, Codes */
.mono { font-family: var(--font-mono); font-size: 0.92em; }

/* ============================================================
   Command Palette (⌘K) — globale Schnellnavigation
   ============================================================ */
.cmdp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 28, 0.45);
    backdrop-filter: blur(2px);
    z-index: 1080;
    animation: cmdp-fade-in var(--duration-base, 180ms) var(--ease-out, ease);
}
.cmdp-wrap {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 92vw);
    z-index: 1085;
    animation: cmdp-slide-in var(--duration-base, 180ms) var(--ease-out, ease);
}
@keyframes cmdp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmdp-slide-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.cmdp-shell {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(10,15,28,0.25));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.cmdp-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}
.cmdp-search-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.cmdp-input {
    flex: 1;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    background: transparent;
    color: var(--color-text-primary);
    padding: 2px 0;
}
.cmdp-input::placeholder { color: var(--color-text-muted); }

.cmdp-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 8px;
    min-height: 120px;
}

.cmdp-empty {
    padding: 24px 20px;
    color: var(--color-text-muted);
    font-size: 13.5px;
    text-align: center;
}

.cmdp-group-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 10px 16px 4px;
}

.cmdp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 13.5px;
    line-height: 1.4;
}
.cmdp-item.active,
.cmdp-item:hover {
    background: var(--color-brand-primary-tint);
    color: var(--color-text-primary);
}
.cmdp-item-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.cmdp-item.active .cmdp-item-icon,
.cmdp-item:hover .cmdp-item-icon {
    color: var(--color-brand-primary);
}
.cmdp-item-title {
    font-weight: 500;
}
.cmdp-item-sub {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-left: auto;
    padding-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.cmdp-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-size: 11.5px;
    color: var(--color-text-muted);
}
.cmdp-foot-grow { flex: 1; }

.cmdp-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-text-muted);
    margin: 0 2px;
}
.cmdp-search .cmdp-kbd {
    margin-left: 6px;
}

/* ============================================================
   Toast Notifications — oben rechts, stapelbar, auto-dismiss
   ============================================================ */
.toast-host {
    position: fixed;
    top: calc(var(--layout-topbar-height, 56px) + 12px);
    right: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(10,15,28,0.15));
    font-size: 13.5px;
    color: var(--color-text-primary);
    animation: toast-enter 200ms var(--ease-out, ease);
}
@keyframes toast-enter {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.toast-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}
.toast-body {
    flex: 1;
    min-width: 0;
}
.toast-title {
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
}
.toast-message {
    color: var(--color-text-secondary);
    font-size: 12.5px;
    margin-top: 2px;
    line-height: 1.4;
    word-wrap: break-word;
}
.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 2px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 3px;
    margin-top: 1px;
}
.toast-close:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.toast-info { border-left-color: var(--color-info, #0284C7); }
.toast-info .toast-icon { color: var(--color-info, #0284C7); }
.toast-success { border-left-color: var(--color-success, #16A34A); }
.toast-success .toast-icon { color: var(--color-success, #16A34A); }
.toast-warning { border-left-color: var(--color-warning, #D97706); }
.toast-warning .toast-icon { color: var(--color-warning, #D97706); }
.toast-error { border-left-color: var(--color-danger, #DC2626); }
.toast-error .toast-icon { color: var(--color-danger, #DC2626); }

/* ============================================================
   Drawer — rechts-slide Panel fuer Detailansichten
   ============================================================ */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 28, 0.35);
    z-index: 1050;
    animation: drawer-fade-in 200ms var(--ease-out, ease);
}
@keyframes drawer-fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: var(--color-surface-raised);
    border-left: 1px solid var(--color-border);
    box-shadow: -12px 0 32px rgba(10,15,28,0.18);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    animation: drawer-slide-in 220ms var(--ease-out, ease);
}
.drawer-panel.drawer-size-sm { width: min(360px, 100vw); }
.drawer-panel.drawer-size-lg { width: min(640px, 100vw); }
.drawer-panel.drawer-size-xl { width: min(840px, 100vw); }
@keyframes drawer-slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.drawer-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.drawer-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}
.drawer-subtitle {
    color: var(--color-text-muted);
    font-size: 12.5px;
    margin-top: 2px;
}
.drawer-close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
}
.drawer-close:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}

.drawer-foot {
    flex-shrink: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    background: var(--color-surface-sunken);
}

/* ============================================================
   Error-Seiten (404 / 403 / 500) — zentrierte Minimal-Clean-Card
   ============================================================ */
.error-page {
    min-height: calc(100vh - var(--layout-topbar-height, 56px) - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.error-card {
    max-width: 520px;
    width: 100%;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl, 12px);
    padding: 48px 40px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.error-illu {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}
.error-illu-info {
    background: var(--color-info-tint, #E6F3FB);
    color: var(--color-info, #0284C7);
}
.error-illu-warning {
    background: var(--color-warning-tint, #FDF3E0);
    color: var(--color-warning, #D97706);
}
.error-illu-danger {
    background: var(--color-danger-tint, #FDECEC);
    color: var(--color-danger, #DC2626);
}
.error-code {
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    line-height: 1;
    margin-bottom: 8px;
}
.error-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}
.error-message {
    color: var(--color-text-secondary);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 28px;
}
.error-detail {
    text-align: left;
    margin-bottom: 20px;
    font-size: 12.5px;
}
.error-detail summary {
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 6px 0;
}
.error-detail summary:hover {
    color: var(--color-text-primary);
}
.error-detail pre {
    margin-top: 8px;
    max-height: 200px;
    overflow: auto;
}
.error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.error-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   Form Group Card — Minimal/Clean
   Group-Layout rendert immer als Card mit Titel + optionalem Subtitel.
   Basiert auf den Tokens aus tokens.css und ist Dark-Mode-ready.
   Referenz: wwwroot/design-mockups/01-minimal.html
   ============================================================ */
.form-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.form-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
}
.form-card-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
}
.form-card-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
}
.form-card-body {
    padding: var(--space-5);
}
/* Wenn Card-Header direkt vor dem Body liegt, kleinerer Top-Padding (Phase 8). */
.form-card-header + .form-card-body {
    padding-top: var(--space-2, 8px);
}
/* Im Designer: Drop-Zone bleibt minimalhoeh sichtbar, auch wenn Gruppe leer ist */
.designer-form-card .form-card-body.designer-drop-zone {
    min-height: 60px;
}

/* ============================================================
   Teaser-Hero (Summary-Card oberhalb der Status-Pill)
   Rendert im ModuleFormView, wenn JsonFormDesign.TeaserHero aktiviert ist.
   ============================================================ */
.teaser-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.teaser-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-accent) 100%);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-weight: var(--weight-bold);
    font-size: 20px;
}
.teaser-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.teaser-avatar-initials {
    letter-spacing: 0.02em;
}
.teaser-info {
    flex: 1;
    min-width: 0;
}
.teaser-name {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 4px;
    line-height: var(--leading-snug);
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: baseline;
}
.teaser-name-sep {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}
.teaser-name-secondary {
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}
.teaser-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.teaser-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.teaser-meta-item i {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Revision-Chip rechts im Teaser-Hero */
.teaser-rev {
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.teaser-rev-value {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
}

/* ============================================================
   Cross-Modul-Relation (FormElement-Typ "relation"): Tabelle mit
   Add/Remove + Inline-Select-Picker im Live-Formular.
   ============================================================ */
.form-relation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-4);
}
.form-relation-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}
.form-relation-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.form-relation-tablewrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-raised);
}
.form-relation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.form-relation-table thead {
    background: var(--color-surface-sunken);
}
.form-relation-table th {
    padding: 8px 12px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.form-relation-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}
.form-relation-table tbody tr:last-child td {
    border-bottom: none;
}
.form-relation-actions-col {
    width: 40px;
    text-align: center;
}
.form-relation-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 14px 12px;
}
.form-relation-add {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}
.form-relation-add select {
    flex: 1;
    min-width: 0;
}
.form-relation-counter {
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ============================================================
   System-Controls-Row: Status-Pills links + Typ-Pill-Row rechts.
   Sitzt in .form-main-header (aus Phase 6 ausserhalb des Scroll-Bereichs).
   ============================================================ */
.form-sys-controls-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 12px;
}
.form-sys-controls-row .status-workflow-pills {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
.form-sys-controls-row .type-selector-row {
    margin-left: auto;
    margin-bottom: 0;
}

/* ============================================================
   Typ-Selector-Pill-Row (System-Control zwischen Status-Pill und Formular)
   Wird gerendert, wenn das Modul eine Sub-Entity „type" mit >= 2 Eintraegen
   hat. Ersetzt das frueher im Formular eingebettete Typ-Dropdown.
   ============================================================ */
.type-selector-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.type-selector-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.type-pill-row {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}
.type-pill {
    padding: 7px 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}
.type-pill:last-child {
    border-right: none;
}
.type-pill:hover:not(.active) {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}
.type-pill.active {
    background: var(--color-brand-accent);
    color: var(--color-text-on-brand);
    font-weight: var(--weight-semibold);
}
.type-pill:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-brand-primary-ring);
}

/* ============================================================
   „Verknuepfte Daten"-Panel im Live-Formular (ModuleFormView)
   ============================================================ */
/* form-main-panel ist seit Phase 6 IMMER flex-column: form-main-header (fix oben),
   form-main-scroll (flex:1), optional linked-data-splitter + linked-data-panel (fix unten).
   Die has-linked-data-Klasse wird weiterhin gesetzt, damit Panel-spezifische Styles
   (unten) greifen koennen. */
.form-main-panel.has-linked-data > .linked-data-splitter {
    flex-shrink: 0;
}
.form-main-panel.has-linked-data > .linked-data-panel {
    flex-shrink: 0;
}

/* Linked-Data-Splitter ist IMMER drag-faehig. Der Lock-Toggle steuert nur das
   Auto-Expand-Verhalten bei Tab-Klick (unlocked = auto-expand + collapse-outside,
   locked = kein Auto-Expand). Die Klasse `splitter-unlocked` wird weiterhin
   gesetzt, hat aktuell aber kein eigenes Styling. */
.linked-data-quick-toggle.locked {
    background: var(--color-brand-primary-tint, #E7F3FD);
    color: var(--color-brand-primary, #1A7FD0);
    box-shadow: inset 0 1px 3px rgba(10, 15, 28, 0.1);
}

.linked-data-splitter {
    height: 6px;
    background: var(--color-border, #e5e7eb);
    cursor: row-resize;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.linked-data-splitter::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 2px;
    background: var(--color-text-muted, #6b7280);
    opacity: 0.4;
    border-radius: 1px;
}
.linked-data-splitter:hover {
    background: var(--color-brand-primary-tint, #e7f3fd);
}
.linked-data-quick-group {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    z-index: 2;
}
.linked-data-quick-toggle {
    background: var(--color-surface-raised, #fff);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.linked-data-quick-toggle:hover {
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}
/* Click-to-Edit in ModuleDataListView (Tabelle/Raster/Kartei/Kalender).
   Aktiv wenn CanEditItem == true. Hover-Feedback + Cursor. */
.row-clickable {
    cursor: pointer;
}
.row-clickable:hover {
    background: var(--color-surface-hover, #f1f4f9);
}
.title-clickable {
    cursor: pointer;
    transition: color var(--duration-fast, 120ms) var(--ease-out, ease);
}
.title-clickable:hover {
    color: var(--color-brand-primary, #1A7FD0);
    text-decoration: underline;
}

.linked-data-panel {
    display: flex;
    flex-direction: column;
    min-height: 60px;
    background: var(--color-surface-raised, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    margin-bottom: var(--space-4, 1rem);
    overflow: hidden;
}
.linked-data-tabs-head {
    display: flex;
    gap: 0;
    background: var(--color-surface-muted, #f4f6f8);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    padding: 0 8px;
    flex-shrink: 0;    /* Tab-Bar darf beim Splitter-Zuziehen nicht verdraengt werden */
    min-height: 42px;  /* garantiert Platz fuer eine Tab-Reihe */
}
.linked-data-tab {
    background: transparent;
    border: 0;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.15s;
}
.linked-data-tab:hover { color: var(--color-text-primary); }
.linked-data-tab.active {
    color: var(--color-brand-primary);
    border-bottom-color: var(--color-brand-primary);
    font-weight: 600;
}
.linked-data-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 20px;
    background: var(--color-surface, #F7F9FC);
}
.linked-data-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Preview-Modal mit LinkedData: fixe Gesamthoehe + geteiltes Layout
   (oberer Scroll-Bereich, Splitter, unten fixiertes Panel). */
.preview-modal-with-linked {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    height: 90vh;
    overflow: hidden;
}
.preview-modal-with-linked .modal-header {
    flex-shrink: 0;
}
.preview-split-layout {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.preview-split-layout .preview-main-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.preview-split-layout .linked-data-splitter {
    flex-shrink: 0;
}
.preview-split-layout .linked-data-panel {
    flex-shrink: 0;
}