/* Editierbare Pivot-Tabelle — neutrale Optik über Filaments Farb-Variablen,
   damit Light-/Dark-Mode ohne Panel-spezifisches Styling funktionieren. */
.smake-pivot-grid {
    overflow-x: auto;
}

/* separate statt collapse: bei collapse gehören die geteilten Rahmen dem
   Tabellen-Layer und scrollen unter den Sticky-Zellen weg — die vertikale
   Trennlinie verschwindet und der Inhalt schimmert 1px durch. Mit separate
   trägt jede Zelle ihren eigenen Rahmen, der mit der Sticky-Spalte mitwandert. */
.smake-pivot-grid table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;

    /* Nur die Oberkante an der Tabelle; die linke Kante trägt die (sticky) linke
       Spalte selbst, damit sie beim horizontalen Scrollen nicht wegscrollt. */
    border-top: 1px solid var(--gray-300);
}

.dark .smake-pivot-grid table {
    border-top-color: var(--gray-700);
}

.smake-pivot-grid th,
.smake-pivot-grid td {
    /* nur rechts/unten — zusammen mit dem Tabellen-Rahmen oben/links ergibt das
       durchgehende 1px-Linien ohne Doppelrahmen. */
    border-right: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
    padding: 0.375rem 0.5rem;
    text-align: left;
    vertical-align: middle;
    min-width: 6rem;
}

.dark .smake-pivot-grid th,
.dark .smake-pivot-grid td {
    border-color: var(--gray-700);
}

.smake-pivot-grid thead th,
.smake-pivot-grid tbody th {
    background-color: var(--gray-50);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.dark .smake-pivot-grid thead th,
.dark .smake-pivot-grid tbody th {
    background-color: var(--gray-900);
    color: var(--gray-200);
}

.smake-pivot-grid-corner {
    color: var(--gray-400);
    font-weight: 500;
}

/* Editierbarkeits-Affordanz: weiße Zellen mit Input sind editierbar — Text-Cursor,
   dezentes Hover-Feedback und ein Fokus-Ring um die ganze Zelle. Graue Flächen
   (Köpfe, Füllzellen) sind nicht editierbar bzw. Achsen-Köpfe. */
.smake-pivot-grid td:has(.smake-pivot-grid-input:not(:disabled)),
.smake-pivot-grid th:has(.smake-pivot-grid-input:not(:disabled)) {
    cursor: text;
}

/* Primärfarben-Ton statt Grau — Grau ist für Köpfe/Füllflächen reserviert. */
.smake-pivot-grid td:has(.smake-pivot-grid-input:not(:disabled)):hover {
    background-color: color-mix(in srgb, var(--primary-500) 8%, transparent);
}

.smake-pivot-grid thead th:has(.smake-pivot-grid-input:not(:disabled)):hover,
.smake-pivot-grid tbody th:has(.smake-pivot-grid-input:not(:disabled)):hover {
    background-color: color-mix(in srgb, var(--primary-500) 12%, var(--gray-50));
}

/* Fehlerhafte Zellen (Client-Spiegel der Struktur-Regel): roter Ring + Tönung. */
.smake-pivot-grid td.smake-pivot-grid-invalid,
.smake-pivot-grid th.smake-pivot-grid-invalid {
    box-shadow: inset 0 0 0 2px var(--danger-500);
    background-color: color-mix(in srgb, var(--danger-500) 6%, transparent);
}

/* Nach der Fehler-Markierung definiert, damit der Fokus-Ring beim Korrigieren
   der Zelle gewinnt. */
.smake-pivot-grid td:focus-within,
.smake-pivot-grid th:focus-within {
    box-shadow: inset 0 0 0 2px var(--primary-500);
}

/* Nicht editierbare Füllflächen (z. B. neben „+ Neu") — grau wie die Köpfe,
   damit „weiß = editierbar" konsistent bleibt. */
.smake-pivot-grid-dead {
    background-color: var(--gray-50);
    cursor: default;
}

.dark .smake-pivot-grid-dead {
    background-color: var(--gray-900);
}

.smake-pivot-grid-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.smake-pivot-grid-input {
    width: 100%;
    min-width: 4rem;
    border: none;
    background: transparent;
    padding: 0.25rem;
    font-size: 0.875rem;
    color: inherit;
    outline: none;
}

.smake-pivot-grid-input::placeholder {
    color: var(--gray-400);
    opacity: 1;
}

/* Browser-Spinner ausblenden — die Zellen sollen ruhig wie Tabellenzellen wirken. */
.smake-pivot-grid-input::-webkit-outer-spin-button,
.smake-pivot-grid-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.smake-pivot-grid-input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.smake-pivot-grid-affix {
    color: var(--gray-400);
    font-size: 0.75rem;
    white-space: nowrap;
}

.smake-pivot-grid-remove {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    visibility: hidden;
}

/* Lösch-Kreuze erscheinen beim Hovern über eine beliebige Zelle der Zeile
   (tr:hover) bzw. Spalte (.…-remove-visible, via Alpine-hoverColumn) — nicht
   nur über der Kopf-/Aktionszelle selbst. */
.smake-pivot-grid th:hover .smake-pivot-grid-remove,
.smake-pivot-grid td:hover .smake-pivot-grid-remove,
.smake-pivot-grid tbody tr:hover .smake-pivot-grid-remove,
.smake-pivot-grid .smake-pivot-grid-remove-visible {
    visibility: visible;
}

.smake-pivot-grid-remove:hover {
    color: var(--danger-600);
}

.smake-pivot-grid-remove-icon {
    width: 1rem;
    height: 1rem;
}

.smake-pivot-grid-row-actions {
    border: none;
    min-width: 0;
    width: 2rem;
}

.smake-pivot-grid-add-column,
.smake-pivot-grid-add-row {
    white-space: nowrap;
}

/* „Neu"-Zellen: die ganze Zelle bzw. Zeile ist klickbar (nicht nur der Link). */
.smake-pivot-grid-add-column,
.smake-pivot-grid-add-row-tr,
.smake-pivot-grid-add-row-tr .smake-pivot-grid-dead {
    cursor: pointer;
}

.smake-pivot-grid-add-column:hover,
.smake-pivot-grid-add-row-tr:hover th,
.smake-pivot-grid-add-row-tr:hover td {
    background-color: color-mix(in srgb, var(--primary-500) 8%, transparent);
}

/* Linke Spalte (Achsen-Köpfe + „Neu"-Zeile) beim horizontalen Scrollen fixieren.
   Die Kopfzellen haben bereits einen deckenden Hintergrund, damit scrollende
   Wert-Zellen nicht durchscheinen. */
.smake-pivot-grid thead th.smake-pivot-grid-corner,
.smake-pivot-grid tbody th {
    position: sticky;
    left: 0;
    z-index: 2;

    /* Linke Kante an der Sticky-Spalte selbst, damit sie beim Scrollen bleibt. */
    border-left: 1px solid var(--gray-300);
}

.dark .smake-pivot-grid thead th.smake-pivot-grid-corner,
.dark .smake-pivot-grid tbody th {
    border-left-color: var(--gray-700);
}