/* =============================================================
   components.css – Wiederverwendbare UI-Komponenten
   NWI-Portal
   BEM-Naming: .block__element--modifier
   ============================================================= */

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    line-height: 1.4;
}

.btn:disabled,
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary */
.btn--primary {
    background: var(--gradient-primary);
    color: var(--color-primary-text);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    opacity: 0.92;
    box-shadow: var(--shadow-md);
}

.btn--primary:active {
    transform: scale(0.98);
    opacity: 1;
}

/* Ghost (transparent mit Rahmen) */
.btn--ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-outline-variant);
}

.btn--ghost:hover {
    background-color: var(--color-surface-container);
    border-color: var(--color-outline);
}

/* Ghost auf dunklem Hintergrund */
.btn--ghost-white {
    background-color: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}

/* Danger */
.btn--danger {
    background-color: var(--color-error);
    color: #FFFFFF;
    border-color: var(--color-error);
}

.btn--danger:hover {
    background-color: #D32F2F;
    border-color: #D32F2F;
}

/* Sizes */
.btn--small {
    padding: 3px var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.btn--large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* ── Cards ─────────────────────────────────────────────────── */

.card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card__header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.card__body {
    padding: var(--spacing-lg);
}

.card__footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-gray-50);
}

/* ── Form-Elemente ─────────────────────────────────────────── */

.input {
    display: block;
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-on-surface);
    background-color: var(--color-surface-container-lowest);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: var(--line-height-base);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 63, 135, 0.2);
}

.input::placeholder {
    color: var(--color-text-placeholder);
}

select.input {
    cursor: pointer;
    color-scheme: light;
}

select.input:not(.select) {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: normal;
}

select.input option,
.select option {
    color: var(--color-on-surface);
    background-color: var(--color-surface-container-lowest);
}

.input--error {
    border-color: var(--color-error);
}

.input--error:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.15);
}

/* Form-Gruppe */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group__label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-xs);
}

.form-group__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.form-group__error {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-top: var(--spacing-xs);
}

/* ── Tabellen ──────────────────────────────────────────────── */

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background-color: var(--color-gray-50);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

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

.table tbody tr:hover {
    background-color: var(--color-gray-50);
}

/* Aktionen-Zelle: Buttons nebeneinander */
.table__actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: nowrap;
}

/* Adresse-Zelle: bei wenig Platz abschneiden */
.table__address {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Badges ────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.badge--success {
    background-color: rgba(76, 175, 80, 0.15);
    color: #2E7D32;
}

.badge--warning {
    background-color: rgba(255, 152, 0, 0.15);
    color: #E65100;
}

.badge--error {
    background-color: rgba(244, 67, 54, 0.15);
    color: #C62828;
}

.badge--neutral {
    background-color: var(--color-gray-200);
    color: var(--color-gray-700);
}

.badge--info {
    background-color: rgba(33, 150, 243, 0.15);
    color: #0D47A1;
}

.badge--muted {
    background-color: var(--color-gray-200);
    color: var(--color-gray-500);
}

/* Farbpunkt für Status-Anzeige */
.status-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
}

/* ── Alert-Boxen ───────────────────────────────────────────── */

.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

.alert--success {
    background-color: rgba(76, 175, 80, 0.08);
    border-color: var(--color-success);
    color: #2E7D32;
}

.alert--error {
    background-color: rgba(244, 67, 54, 0.08);
    border-color: var(--color-error);
    color: #C62828;
}

.alert--warning {
    background-color: rgba(255, 152, 0, 0.08);
    border-color: var(--color-warning);
    color: #E65100;
}

.alert--info {
    background-color: rgba(33, 150, 243, 0.08);
    border-color: var(--color-info);
    color: #0D47A1;
}

/* ── Dropdowns ─────────────────────────────────────────────── */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-dropdown);
    overflow: hidden;
    display: none;
}

.dropdown__menu--open {
    display: block;
}

.dropdown__item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background var(--transition-fast);
}

.dropdown__item:hover {
    background-color: var(--color-gray-100);
}

.dropdown__divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-xs) 0;
}

/* ── Select ────────────────────────────────────────────────── */

.select {
    display: block;
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: var(--line-height-base);
    cursor: pointer;
    height: calc(2 * var(--spacing-sm) + var(--line-height-base) * var(--font-size-base) + 2px);
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: calc(var(--spacing-md) + 16px);
}

.select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 63, 135, 0.2);
}

.select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-gray-100);
}

.select--error {
    border-color: var(--color-error);
}

/* ── Textarea ──────────────────────────────────────────────── */

.textarea {
    display: block;
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: var(--line-height-base);
    resize: vertical;
    min-height: 80px;
}

.textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 63, 135, 0.2);
}

.textarea::placeholder {
    color: var(--color-gray-400);
}

/* ── Checkbox & Radio ──────────────────────────────────────── */

.check-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
}

.check-group__input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.check-group__label {
    font-size: var(--font-size-base);
    color: var(--color-text);
    cursor: pointer;
}

.check-group--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.check-group--disabled .check-group__input,
.check-group--disabled .check-group__label {
    cursor: not-allowed;
}

/* ── Input-Group (Input + Button kombiniert) ───────────────── */

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
    flex: 1;
    min-width: 0;
}

.input-group .input:focus {
    position: relative;
    z-index: 1;
}

.input-group .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    flex-shrink: 0;
}

/* ── Pagination ────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    background: var(--color-bg-white);
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
    user-select: none;
}

.pagination__item:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.pagination__item--active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
    font-weight: var(--font-weight-medium);
}

.pagination__item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination__info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-left: var(--spacing-xs);
}

/* ── Empty State ───────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state__icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.4;
}

.empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.empty-state__text {
    font-size: var(--font-size-base);
    max-width: 400px;
    margin-bottom: var(--spacing-lg);
}

/* ── Spinner / Ladeindikator ───────────────────────────────── */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

.spinner--sm {
    width: 14px;
    height: 14px;
}

.spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Divider ───────────────────────────────────────────────── */

.divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-md) 0;
}

/* ── Tooltip (CSS-only) ────────────────────────────────────── */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-800);
    color: #FFFFFF;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: var(--z-toast);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* ── Material Symbols Outlined ─────────────────────────────── */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Ligatur-Rendering aktivieren – ohne das können Symbole nicht korrekt
       angezeigt werden, da Material Symbols Icons über OpenType-Ligaturen
       (liga) aus dem Icon-Namen erzeugt werden. */
    -moz-font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    /* vertical-align: middle richtet an baseline + ½ x-Höhe aus – das sitzt
       zu hoch. Ein negativer em-Versatz bringt das Icon auf Augenhöhe mit
       dem umgebenden Text. */
    vertical-align: -0.125em;
    user-select: none;
}

/* ── Headline-Font-Klasse ───────────────────────────────────── */

.font-headline {
    font-family: var(--font-family-headline);
}

/* ── Section-Card ──────────────────────────────────────────── */
/* Informations-Sektion innerhalb von Formularen / Modals */

.section-card {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
}

.section-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.section-card__icon {
    color: var(--color-primary);
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    flex-shrink: 0;
}

.section-card__title {
    font-family: var(--font-family-headline);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-surface);
    margin: 0;
}

/* ── Data-Field ────────────────────────────────────────────── */
/* Label + Wert-Paar für read-only Datenanzeige */

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md) var(--spacing-xl);
}

.data-grid--1col { grid-template-columns: 1fr; }

.data-field {}

.data-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-on-surface-variant);
    opacity: 0.7;
    margin-bottom: 2px;
}

.data-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-on-surface);
}

/* ── Input mit Icon links ───────────────────────────────────── */

.input-icon-wrap {
    position: relative;
    display: block;
}

.input-icon-wrap .input {
    padding-left: 40px;
}

.input-icon-wrap .input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 18px;
    color: var(--color-primary);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.input-icon-wrap .input-icon--muted {
    color: var(--color-on-surface-variant);
}


/* ── Lease-Selector (Vertrags-Tabs) ─────────────────────────── */
.lease-selector { display: flex; gap: 2px; border-bottom: 2px solid var(--color-border); }
.lease-selector__tab {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.lease-selector__tab:hover { color: var(--color-primary); }
.lease-selector__tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ── Data-Table ──────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table thead th {
    font-size: var(--font-size-xs, .75rem);
    font-weight: var(--font-weight-medium, 600);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f8f9fa);
    white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-surface-hover, rgba(0,0,0,.02)); }
.data-table__actions {
    white-space: nowrap;
    text-align: right;
    width: 1%;
}