/* public/css/components.css */
/* ===================================================================
   UI FOUNDATION - wiederverwendbare Komponenten

   Primäre API: c-* Komponenten, u-* Utilities und is-/has-* Zustände.
   Alte Klassen werden unten nur noch als Legacy-Bridge unterstützt.
   Neue oder angefasste Views sollen ausschließlich die c-* API nutzen.
   =================================================================== */

/* --- 1. BUTTONS ---------------------------------------------------- */
.c-button {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-height: var(--button-height);
    padding: var(--button-padding-y) var(--button-padding-x);
    border: 1px solid var(--button-border, transparent);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-color);
    font: inherit;
    font-weight: var(--button-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease,
        opacity 0.15s ease;
}

.c-button:hover {
    background: var(--button-bg-hover);
    color: var(--button-color);
    text-decoration: none;
}

.c-button:focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

.c-button:active {
    transform: translateY(1px);
}

.c-button:disabled,
.c-button[aria-disabled="true"],
.c-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.c-button--primary {
    --button-bg: var(--brand-primary);
    --button-bg-hover: var(--brand-primary-hover);
    --button-border: var(--brand-primary);
    --button-color: var(--text-inverted);
}

.c-button--secondary,
.c-button--neutral {
    --button-bg: var(--surface-panel);
    --button-bg-hover: var(--surface-soft);
    --button-border: var(--border-subtle);
    --button-color: var(--text-default);
}

.c-button--muted {
    --button-bg: var(--surface-muted);
    --button-bg-hover: var(--surface-soft);
    --button-border: var(--border-subtle);
    --button-color: var(--text-default);
}

.c-button--danger {
    --button-bg: var(--status-error-strong);
    --button-bg-hover: var(--status-error);
    --button-border: var(--status-error-strong);
    --button-color: var(--text-inverted);
}

.c-button--success {
    --button-bg: var(--status-success);
    --button-bg-hover: color-mix(in srgb, var(--status-success) 85%, black);
    --button-border: var(--status-success);
    --button-color: var(--text-inverted);
}

.c-button--ghost,
.c-button--subtle {
    --button-bg: transparent;
    --button-bg-hover: var(--surface-soft);
    --button-border: var(--border-subtle);
    --button-color: var(--text-default);
}

.c-button--sm {
    min-height: var(--button-height-sm);
    padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
    font-size: 0.875rem;
}

.c-button--icon {
    width: var(--button-height);
    min-width: var(--button-height);
    padding-inline: 0;
}

.c-button--full {
    width: 100%;
    margin-bottom: 5px;
}

/* Einheitliche klickbare Icon-Aktionen.
   Diese Klasse ist bewusst kleiner als normale Icon-Buttons: Sie rendert
   das eigentliche Aktions-Icon ohne Button-Fläche, Border oder Hover-Hintergrund. */
.c-icon-action,
.c-button.c-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.c-icon-action:hover,
.c-button.c-icon-action:hover {
    background: transparent;
    opacity: 1;
    transform: translateY(-1px);
}

.c-icon-action:active,
.c-button.c-icon-action:active {
    transform: scale(0.96);
}

.c-icon-action img,
img.c-icon-action {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.c-icon-indicator,
img.c-icon-indicator {
    display: inline-block;
    width: 23px;
    height: 23px;
    object-fit: contain;
    vertical-align: middle;
    opacity: 0.8;
}


/* --- 2. CARDS / PANELS -------------------------------------------- */
.c-card,
.c-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
}

.c-card--compact,
.c-panel--compact {
    padding: var(--card-padding-compact);
}

.c-card--elevated,
.c-panel--elevated {
    box-shadow: var(--shadow-card-md);
}

.c-card__header,
.c-panel__header {
    padding: 1rem 1.5rem;
    background-color: var(--brand-primary-light);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    border-bottom: 1px solid var(--border-color);
}

.c-card__title,
.c-panel__title {
    margin: 0;
    color: var(--text-default);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.c-card__body,
.c-panel__body {
    min-width: 0;
    padding: 1.5rem
}

.c-section {
    display: grid;
    gap: var(--space-4);
}

/* --- 3. FORMS ------------------------------------------------------ */
.c-form-field {
    display: grid;
    gap: var(--form-field-gap);
}

.c-form-field--action {
    align-self: end;
}

.c-form-field--flex {
    flex: 1 1 0;
}

.c-label,
.c-form-field > label:first-child {
    color: var(--text-default);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.c-form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
    width: 100%;
    min-height: var(--form-control-height);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    border: 1px solid var(--form-control-border);
    border-radius: var(--form-control-radius);
    background: var(--form-control-bg);
    color: var(--text-default);
    font: inherit;
    line-height: 1.4;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

textarea,
.c-form-control--textarea {
    min-height: 7rem;
    padding-top: var(--space-3);
    resize: vertical;
}

.c-form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: var(--form-control-border-focus);
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 0;
}

.c-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.c-form-row--datetime {
    align-items: flex-start;
}

.c-form-row__end {
    margin-left: auto;
}

.c-form-field--basis-60 { flex-basis: 60%; }
.c-form-field--basis-50 { flex-basis: 50%; }
.c-form-field--basis-40 { flex-basis: 40%; }

.c-inline-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.c-inline-control {
    width: auto;
    min-height: auto;
}

.c-help-text,
.form-help-text {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.c-field-error,
.form-field-error {
    color: var(--status-error-strong);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* --- 4. TABLES ----------------------------------------------------- */
.c-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.c-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-default);
    font-size: 0.925rem;
}

.c-table th,
.c-table td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: 1px solid var(--table-border);
    text-align: left;
    vertical-align: middle;
}

.c-table th {
    color: var(--text-muted);
    background: var(--table-header-bg);
    font-weight: 700;
}

.c-table.branded th {
    background: var(--brand-primary-light);
}


.c-table tbody tr:hover {
    background: var(--table-row-hover-bg);
}

.c-table.branded tbody tr:hover {
    background: var(--brand-primary-lighter);
}

.c-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.c-table__actions form {
    display: inline-flex;
    justify-content: flex-end;
}

/* --- 5. BADGES / STATUS ------------------------------------------- */
.c-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--badge-height);
    padding: 0 var(--badge-padding-x);
    border: 1px solid transparent;
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.c-badge--neutral,
.status-badge--neutral {
    color: var(--text-muted);
    background: var(--surface-muted);
    border-color: var(--border-muted);
}

.c-badge--success,
.status-badge--success {
    color: var(--status-success);
    background: var(--status-success-bg);
    border-color: color-mix(in srgb, var(--status-success) 25%, transparent);
}

.c-badge--warning,
.status-badge--warning {
    color: var(--status-warning);
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent);
}

.c-badge--danger,
.status-badge--danger {
    color: var(--status-error-strong);
    background: var(--status-error-bg);
    border-color: color-mix(in srgb, var(--status-error-strong) 25%, transparent);
}

.c-badge--info,
.status-badge--info {
    color: var(--status-info);
    background: var(--status-info-bg);
    border-color: color-mix(in srgb, var(--status-info) 25%, transparent);
}

/* --- 6. EMPTY STATES / ALERTS ------------------------------------- */
.c-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--empty-state-padding);
    color: var(--text-muted);
    text-align: center;
    background: var(--empty-state-bg);
    border: 1px dashed var(--empty-state-border);
    border-radius: var(--empty-state-radius);
}

.c-empty-state__title {
    margin: 0;
    color: var(--text-default);
    font-weight: 700;
}

.c-empty-state__text {
    max-width: 36rem;
    margin: 0;
}

.c-alert {
    padding: var(--space-4);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-control);
    background: var(--surface-soft);
    color: var(--text-default);
}

.c-alert--success {
    color: var(--status-success);
    background: var(--status-success-bg);
    border-color: color-mix(in srgb, var(--status-success) 25%, transparent);
}

.c-alert--warning {
    color: var(--status-warning);
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent);
}

.c-alert--danger {
    color: var(--status-error-strong);
    background: var(--status-error-bg);
    border-color: color-mix(in srgb, var(--status-error-strong) 25%, transparent);
}

/* --- 7. TOOLBARS / LAYOUT HELPERS --------------------------------- */
.c-toolbar,
.u-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.c-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.c-actions--end {
    justify-content: flex-end;
}

.u-stack-sm { display: grid; gap: var(--space-2); }
.u-stack-md { display: grid; gap: var(--space-4); }
.u-stack-lg { display: grid; gap: var(--space-6); }
.u-text-muted { color: var(--text-muted) !important; }
.u-text-danger { color: var(--status-error-strong) !important; }
.u-push-right { margin-left: auto !important; }
.u-hidden { display: none !important; }

/* --- 8. MODAL FOUNDATION ------------------------------------------ */
.c-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--modal-backdrop-bg);
}

.c-modal[hidden] {
    display: none !important;
}

.c-modal__panel {
    width: min(100%, var(--modal-width));
    max-height: min(90vh, var(--modal-max-height));
    overflow: auto;
    background: var(--surface-modal);
    border-radius: var(--modal-radius);
    box-shadow: var(--shadow-modal);
}

.c-modal__header,
.c-modal__body,
.c-modal__footer {
    padding: var(--space-5);
}

.c-modal__header {
    border-bottom: 1px solid var(--border-muted);
}

.c-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    border-top: 1px solid var(--border-muted);
}

/* --- 9. LEGACY-BRIDGE --------------------------------------------- */
/* Nur für nicht migrierte Alt-/Admin-Unterviews. Neue Views nutzen c-*. */
.btn,
a.btn,
.dialog-button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-height: var(--button-height);
    padding: var(--button-padding-y) var(--button-padding-x);
    border: 1px solid var(--button-border, transparent);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-color);
    font: inherit;
    font-weight: var(--button-font-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary,
.btn.primary,
.dialog-button.c-button--primary { --button-bg: var(--brand-primary); --button-bg-hover: var(--brand-primary-hover); --button-border: var(--brand-primary); --button-color: var(--text-inverted); }
.btn-secondary,
.dialog-button.c-button--secondary { --button-bg: var(--surface-panel); --button-bg-hover: var(--surface-soft); --button-border: var(--border-subtle); --button-color: var(--text-default); }
.btn-danger,
.dialog-button.c-button--danger { --button-bg: var(--status-error-strong); --button-bg-hover: var(--status-error); --button-border: var(--status-error-strong); --button-color: var(--text-inverted); }
.btn-success { --button-bg: var(--status-success); --button-bg-hover: color-mix(in srgb, var(--status-success) 85%, black); --button-border: var(--status-success); --button-color: var(--text-inverted); }
.btn.ghost { --button-bg: transparent; --button-bg-hover: var(--surface-soft); --button-border: var(--border-subtle); --button-color: var(--text-default); }
.btn-sm,
.btn.small { min-height: var(--button-height-sm); padding: var(--button-padding-y-sm) var(--button-padding-x-sm); font-size: 0.875rem; }
.btn-icon { width: var(--button-height); min-width: var(--button-height); padding-inline: 0; }
.btn-full { width: 100%; }
.action-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--admin-card-padding); }
.permission-table,
.settings-table,
.grade-matrix { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text-default); font-size: 0.925rem; }
.permission-table th,
.permission-table td,
.settings-table th,
.settings-table td,
.grade-matrix th,
.grade-matrix td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); border-bottom: 1px solid var(--table-border); text-align: left; vertical-align: middle; }
.permission-table th,
.settings-table th,
.grade-matrix th { color: var(--text-muted); background: var(--table-header-bg); font-weight: 700; }
.level-badge { display: inline-flex; align-items: center; min-height: var(--badge-height); padding: 0 var(--badge-padding-x); border-radius: var(--badge-radius); font-size: var(--badge-font-size); font-weight: 700; white-space: nowrap; }
.empty-state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--empty-state-padding); color: var(--text-muted); text-align: center; background: var(--empty-state-bg); border: 1px dashed var(--empty-state-border); border-radius: var(--empty-state-radius); }
.form-group { display: grid; gap: var(--form-field-gap); }