/*
 * Sponsorship Matrix — Design Layer
 * Purely presentational. No JS hooks, no data-attributes, no functional classes touched.
 * Functional classes used: .sponsorship-matrix-container, .sponsorship-matrix,
 *   .frontend-cell, .sticky-column, #sponsorship-dialog, #dialog-step1, #dialog-step2
 *
 * Price category colors — assign these hex values in the admin when creating categories:
 *   200 € → #7B2D00  (Dunkelkastanie)
 *   150 € → #A0522D  (Sienna)
 *   100 € → #C4831A  (Bernstein)
 *    75 € → #B8A000  (Goldocker)
 *    50 € → #4A7C59  (Moosgrün)
 *    40 € → #2E7D9A  (Stahlblau)
 *    30 € → #4A6FA5  (Mittelblau)
 *    20 € → #7B68AA  (Lavendel)
 *    10 € → #4E9A8F  (Schieferteal)   ← bewusst kein Grau (nicht vorhanden=#EDE9E0, nicht buchbar=#DDD7C9, reserviert=#D0CBBF, bezahlt=#7A7570)
 *     5 € → #A8C4A2  (Salbeigrün)
 */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */

:root {
    --sp-bg:            #F8F6F1;   /* warmes Cremweiß  */
    --sp-surface:       #FFFFFF;
    --sp-ink:           #2C2A26;   /* warmes Dunkelgrau */
    --sp-ink-muted:     #6B6860;
    --sp-border:        #D8D4CC;
    --sp-border-strong: #A09A90;
    --sp-reserved:      #D0CBBF;   /* belegt – neutrales Warmgrau */
    --sp-paid:          #7A7570;   /* bezahlt – dunkleres Warmgrau */
    --sp-nonexistent:   #E6E0D0;   /* nicht vorhanden – helles Warmgrau, deutlicher vom Weiß abgesetzt */
    --sp-unselectable:  #DDD7C9;   /* nicht buchbar – helles Warmgrau */
    --sp-custom-price:  #F5E9C8;   /* freier Preis (keine Preiskategorie) – Cremeton */
    --sp-cell-size:     26px;
    --sp-cell-gap:      2px;
    --sp-radius:        3px;
    --sp-font-ui:       'Inter', 'Segoe UI', system-ui, sans-serif;
    --sp-font-display:  'Cormorant Garamond', 'Palatino', 'Georgia', serif;
}

/* ─── Google Font Import ─────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Inter:wght@400;500&display=swap');

/* ─── Container ──────────────────────────────────────────────────────────── */

.sponsorship-matrix-container {
    background:    var(--sp-bg);
    border:        1px solid var(--sp-border-strong);
    border-radius: 6px;
    padding:       16px 16px 20px;
    overflow-x:    auto;
    -webkit-overflow-scrolling: touch;
    font-family:   var(--sp-font-ui);
}

/* ─── Legend ─────────────────────────────────────────────────────────────── */

.sp-legend {
    display:        flex;
    flex-wrap:      wrap;
    gap:            5px 6px;
    margin-bottom:  14px;
    padding-bottom: 12px;
    border-bottom:  1px solid var(--sp-border);
    align-items:    center;
}

/* Pill: coloured background, text colour set by JS (contrast algorithm) */
.sp-legend-pill {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         3px 9px;
    border-radius:   4px;
    font-family:     var(--sp-font-ui);
    font-size:       11px;
    font-weight:     500;
    line-height:     1;
    border:          1px solid rgba(0,0,0,.10);
    white-space:     nowrap;
    color:           #fff; /* default — overridden by JS contrast check */
}

/* Status pills use fixed colours matching the cell colours */
.sp-legend-reserved {
    background: var(--sp-reserved);
    color:      var(--sp-ink) !important;  /* always dark text on light grey */
}

.sp-legend-paid {
    background: var(--sp-paid);
    color:      #fff !important;           /* always light text on dark grey */
}

.sp-legend-nonexistent {
    background: var(--sp-nonexistent);
    color:      var(--sp-ink) !important;
}

.sp-legend-unselectable {
    background: var(--sp-unselectable);
    color:      var(--sp-ink) !important;
}

/* Preiskategorien mit "comment": Pill darf umbrechen statt abgeschnitten
   zu werden, der Kommentartext wird optisch vom Preis abgesetzt. */
.sp-legend-pill.has-comment {
    white-space: normal;
    text-align:  center;
}

.sp-legend-comment {
    display:     block;
    margin-top:  2px;
    font-weight: 400;
    font-style:  italic;
    font-size:   10px;
    opacity:     0.85;
}


/* ─── Wrapper um jede Tabelle, um horizonten scrollbalken pro tabelle anzuzeigen ──────────────────────────────────────────────────────────── */
.sponsorship-matrix-wrapper {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 2em;
}

.sponsorship-matrix {
    width: max-content;  /* so breit wie der Inhalt */
    min-width: 100%;     /* aber mindestens so breit wie der Wrapper -
                            gilt für grosse Tabellen, damit ihre Zellen
                            nicht unnötig gestaucht werden */
    border-spacing: 0;
    border: 1px solid #c3c4c7;
}

/* Ausnahme: Gruppen mit wenigen Spalten (siehe $is_narrow in
   class-frontend-matrix.php, Schwelle < 10 Spalten) sollen nicht auf
   volle Breite gezogen werden, sondern nur so breit sein wie ihr Inhalt -
   und dabei grosszügiger dargestellt werden (nicht kleinstmöglich
   gequetscht), damit der Zusammenhang zwischen benachbarten Zellen
   erkennbar bleibt und der Tooltip Platz hat. */
.sponsorship-matrix-wrapper.sp-narrow-table {
    width: max-content;

    /* Tooltip darf über den (schmalen) Wrapper hinausragen, statt an
       dessen Rand abgeschnitten zu werden. */
    overflow: visible;

}

.sponsorship-matrix-wrapper.sp-narrow-table .sponsorship-matrix {
    min-width: 0;
}

.sponsorship-matrix-wrapper.sp-narrow-table td,
.sponsorship-matrix-wrapper.sp-narrow-table th {
    /* ca. 20% grosszügiger als die kleinstmögliche Darstellung */
    min-width: calc(var(--sp-cell-size) * 1.2);
    padding:   6px 8px;
}


/* ─── Narrow-Table-Overrides ─────────────────────────────────────────────
 * Betrifft nur .sp-narrow-table (< 10 Spalten): erste Spalte muss immer
 * vollständig lesbar sein, und Preise sollen direkt in der Zelle stehen.
 * ────────────────────────────────────────────────────────────────────── */

/* table-layout:fixed verhindert jegliches Mitwachsen an Inhalt — für
   narrow tables deaktivieren, damit die Spaltenbreite sich am Inhalt
   orientieren kann (Browser berechnet dann pro Spalte die nötige Breite). */
.sponsorship-matrix-wrapper.sp-narrow-table .sponsorship-matrix {
    table-layout: auto;
}

/* Erste Spalte (Zeilennamen): feste 120px + Ellipsis aus der Grundregel
   aufheben, Text darf die Spalte so breit machen wie nötig. */
.sponsorship-matrix-wrapper.sp-narrow-table .sponsorship-matrix th.sticky-column {
    width:         auto;
    min-width:     max-content;
    max-width:     none;
    white-space:   nowrap;
    overflow:      visible;
    text-overflow: clip;
}

/* Datenzellen dürfen breiter/höher sein, damit der Preistext reinpasst.
   Höhere Spezifität als ".sponsorship-matrix td.frontend-cell", daher
   ohne !important ausreichend. */
.sponsorship-matrix-wrapper.sp-narrow-table .sponsorship-matrix td.frontend-cell {
    width:       auto;
    min-width:   calc(var(--sp-cell-size) * 1.8);
    max-width:   none;
    height:      calc(var(--sp-cell-size) * 1.3);
    line-height: calc(var(--sp-cell-size) * 1.3);
}

/* Preis-Label: standardmäßig unsichtbar (font-size:0 auf der Zelle greift
   nicht auf den Span, da dieser eine eigene font-size setzt — daher
   zusätzlich explizit display:none). */
.sponsorship-matrix td.frontend-cell .sp-cell-label {
    display: none;
}

.sponsorship-matrix-wrapper.sp-narrow-table .sponsorship-matrix td.frontend-cell .sp-cell-label {
    display:     inline;
    font-family: var(--sp-font-ui);
    font-size:   11px;
    font-weight: 600;
    color:       var(--sp-ink); /* Fallback, bis JS-Kontrastcheck greift */
}

/* ─── TEMPORÄRER HACK ────────────────────────────────────────────────────
 * Matrizen mit weniger Spalten als die breiteste Gruppe (z.B. "Pedal")
 * nicht auf volle Breite ziehen. Siehe $needs_width_cap in
 * class-frontend-matrix.php.
 * Der Prozentwert steuert direkt die sichtbare Breite der Tabelle
 * (Wert nach Belieben anpassen, z.B. 75–95%).
 * Zum Deaktivieren: einfach diesen Block auskommentieren.
 * ────────────────────────────────────────────────────────────────────── */
.sponsorship-matrix-wrapper.sp-width-cap .sponsorship-matrix {
    width:     58%;    /* <- diesen Wert anpassen, um Pedal größer/kleiner zu machen */
    min-width: 0;
    max-width: none;
}


/* ─── Table Shell ────────────────────────────────────────────────────────── */

.sponsorship-matrix {
    border-collapse: separate;
    border-spacing:  var(--sp-cell-gap);
    table-layout:    fixed;
    margin:          0;
    /* override WP widefat styles */
    border:          none !important;
    background:      transparent !important;
    box-shadow:      none !important;
}

.sponsorship-matrix th,
.sponsorship-matrix td {
    padding: 0;
    border:  none !important;
    background: transparent;
}

/* ─── Column Headers (Tone Names) ───────────────────────────────────────── */

.sponsorship-matrix thead th {
    width:          var(--sp-cell-size);
    min-width:      var(--sp-cell-size);
    max-width:      var(--sp-cell-size);
    height:         36px;
    vertical-align: bottom;
    text-align:     center;
    font-family:    var(--sp-font-display);
    font-size:      11px;
    font-weight:    600;
    color:          var(--sp-ink);
    letter-spacing: 0;
    line-height:    1;
    white-space:    nowrap;
    overflow:       visible;
    padding-bottom: 4px !important;
}

/* sticky-column header cell (top-left corner) */
.sponsorship-matrix thead th.sticky-column {
    width:       120px;
    min-width:   120px;
    max-width:   120px;
    text-align:  left;
    font-family: var(--sp-font-ui);
    font-size:   10px;
    font-weight: 500;
    color:       var(--sp-ink-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-left: 4px !important;
}

/* Sub/sup for tone notation: c#1 renders as c + sup(#) + sub(1) */
.sponsorship-matrix thead th .sp-tone sup {
    font-size:      75%;
    vertical-align: super;
    line-height:    0;
}

.sponsorship-matrix thead th .sp-tone sub {
    font-size:      75%;
    vertical-align: sub;
    line-height:    0;
}

/* ─── Row Headers (Register Names) ──────────────────────────────────────── */

.sponsorship-matrix tbody th.sticky-column {
    width:       160px;
    min-width:   160px;
    max-width:   160px;
    height:      var(--sp-cell-size);
    text-align:  left;
    vertical-align: middle;
    font-family: var(--sp-font-display);
    font-size:   16px;
    font-weight: 600;
    color:       var(--sp-ink);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    padding-right: 8px !important;
    padding-left:  2px !important;
}

/* ─── Sticky Column (both header and row labels) ─────────────────────────── */

.sponsorship-matrix .sticky-column {
    position:   sticky;
    left:       0;
    z-index:    2;
    background: var(--sp-bg) !important;
}

/* ─── Cells ──────────────────────────────────────────────────────────────── */

.sponsorship-matrix td.frontend-cell {
    width:         var(--sp-cell-size);
    min-width:     var(--sp-cell-size);
    max-width:     var(--sp-cell-size);
    height:        var(--sp-cell-size);
    border-radius: var(--sp-radius) !important;
    cursor:        default;
    transition:    filter .12s ease, box-shadow .12s ease, transform .1s ease;
    font-size:     0;          /* hide label text by default */
    line-height:   var(--sp-cell-size);
    text-align:    center;
    overflow:      hidden;
    position:      relative;
    border:        1px solid rgba(0,0,0,.08) !important;
    box-sizing:    border-box;
}

/* Free cell (has a category color set inline) — show pointer, hover effect */
.sponsorship-matrix td.frontend-cell[data-status="free"] {
    cursor: pointer;
}

.sponsorship-matrix td.frontend-cell[data-status="free"]:hover {
    filter:     brightness(1.12) saturate(1.1);
    box-shadow: 0 0 0 2px var(--sp-ink), 0 2px 6px rgba(0,0,0,.18);
    transform:  scale(1.18);
    z-index:    10;
}

/* Reserved */
.sponsorship-matrix td.frontend-cell[data-status="reserved"] {
    background: var(--sp-reserved) !important;
    cursor:     not-allowed;
}

/* Paid */
.sponsorship-matrix td.frontend-cell[data-status="paid"] {
    background: var(--sp-paid) !important;
    cursor:     not-allowed;
}

/* Nonexistent: bekommt nie eine Preiskategorie, daher immer fest eingefärbt */
.sponsorship-matrix td.frontend-cell[data-status="nonexistent"] {
    background: var(--sp-nonexistent) !important;
    cursor:     not-allowed;
}

/* Unselectable: kann eine Preiskategorie haben (informativ, nicht online buchbar) —
   Hintergrund kommt daher aus dem Inline-Style (PHP), hier nur der Cursor */
.sponsorship-matrix td.frontend-cell[data-status="unselectable"] {
    cursor: not-allowed;
}

/* Empty cells (no object assigned) */
.sponsorship-matrix td.frontend-cell[data-status="empty"],
.sponsorship-matrix td.frontend-cell:not([data-status]) {
    background: transparent !important;
    border-color: transparent !important;
    cursor: default;
}





/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sponsorship-matrix td.frontend-cell,
    .sp-tooltip,
    #sponsorship-dialog .button {
        transition: none !important;
    }
    .sponsorship-matrix td.frontend-cell[data-status="free"]:hover {
        transform: none;
    }
}

		.frontend-disabled
		{
			cursor: not-allowed;
			opacity: 0.75;
		}

/* ─── Animierter Spinner, um das Laden der Seite anzuzeigen ─────────────────────────────────────────────────────── */
        .sp-spinner {
    display:       inline-block;
    width:         48px;
    height:        48px;
    border:        5px solid #e0e0e0;
    border-top:    5px solid #555;
    border-radius: 50%;
    animation:     sp-spin 0.8s linear infinite;
    margin:        0 auto;
}

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

/* ─── um tooltip (servergeneriert) anzuzeigen ─────────────────────────────────────────────────────── */
.sponsorship-matrix td.frontend-cell {
    position: relative;
    overflow: visible !important;
}

/* Tooltip in der ersten Datenzeile unterhalb statt oberhalb anzeigen */
.sponsorship-matrix tbody tr:first-child .sp-tooltip {
    bottom: auto;
    top: calc(100% + 6px);
}

.sponsorship-matrix tbody tr:first-child .sp-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--sp-ink);
}

/* Tooltip in der ersten/letzten Spalte am Zellenrand statt zentriert
   ausrichten, damit er nicht seitlich über die Tabelle (und bei schmalen
   Tabellen über den Bildschirmrand) hinausragt. */
.sponsorship-matrix td:first-child .sp-tooltip {
    left:      0;
    transform: none;
}

.sponsorship-matrix td:first-child .sp-tooltip::after {
    left:      12px;
    transform: none;
}

.sponsorship-matrix td:last-child .sp-tooltip {
    left:      auto;
    right:     0;
    transform: none;
}

.sponsorship-matrix td:last-child .sp-tooltip::after {
    left:      auto;
    right:     12px;
    transform: none;
}