/* ================================================================
   STUNDENLEISTUNG / PLANANSICHT v8.0.0
   Clean SaaS Design — Kaufland CI

   Datei: fe-auslastungsmonitor/assets/stundenleistung.css
   Wird von Dash automatisch geladen.

   DESIGN-SYSTEM:
   - Nutzt globale Tokens aus style.css (--kf-red, --bg-page, etc.)
   - DM Sans als UI-Font, JetBrains Mono für Zahlen
   - Card-Based Layout mit 12px Radius, dezentem Shadow
   - Kaufland-Rot (#E10915) als Akzent
   - Zebra-Striping, Hover, Night-Dimming in der Matrix
   - Responsive: Desktop → Tablet → Mobile

   BREAKPOINTS:
     4K+      : 1600px+
     Desktop  : Standard
     Tablet   : ≤960px
     Mobile   : ≤768px
     Phone    : ≤480px
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');


/* ================================================================
   CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
    /* Prefix: sl- (stundenleistung) */
    --sl-font:           'DM Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --sl-font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --sl-accent:         #E10915;
    --sl-accent-rgb:     225, 9, 21;
    --sl-accent-hover:   #C40812;
    --sl-accent-soft:    rgba(225, 9, 21, 0.06);
    --sl-accent-glow:    rgba(225, 9, 21, 0.20);
    --sl-accent-surface: #FFF0F1;

    --sl-green:          #10B981;
    --sl-green-soft:     rgba(16, 185, 129, 0.08);
    --sl-green-border:   rgba(16, 185, 129, 0.20);

    --sl-orange:         #F59E0B;
    --sl-orange-soft:    rgba(245, 158, 11, 0.08);

    /* Page */
    --sl-bg:             var(--bg-page, #F4F7F6);
    --sl-card-bg:        var(--bg-card, #FFFFFF);
    --sl-card-border:    var(--border-card, rgba(0, 0, 0, 0.06));
    --sl-card-shadow:    var(--shadow-card, 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.03));
    --sl-card-radius:    12px;

    /* Text */
    --sl-text:           var(--text-primary, #1A1D23);
    --sl-text-secondary: var(--text-secondary, #4A5568);
    --sl-text-muted:     var(--text-muted, #94A3B8);
    --sl-text-dim:       #CBD5E1;

    /* Table */
    --sl-th-bg:          var(--table-header-bg, #F4F7F6);
    --sl-th-color:       var(--table-header-text, #64748B);
    --sl-row-stripe:     var(--table-stripe, #F8FAFB);
    --sl-row-hover:      rgba(225, 9, 21, 0.04);
    --sl-cell-border:    var(--table-border, #EDF0F3);
    --sl-zero-color:     var(--table-zero-color, #CBD5E1);

    /* Sticky Column */
    --sl-bsz-bg:         var(--bg-card, #FFFFFF);
    --sl-bsz-border:     var(--table-border, #EDF0F3);

    /* Input */
    --sl-input-bg:       transparent;
    --sl-input-border:   transparent;
    --sl-input-focus:    rgba(225, 9, 21, 0.5);
    --sl-input-glow:     0 0 0 3px rgba(225, 9, 21, 0.08);

    /* Chip */
    --sl-chip-bg:        var(--bg-subtle, #F0F2F4);
    --sl-chip-border:    var(--border-light, #E2E6EA);
    --sl-chip-color:     var(--text-muted, #94A3B8);
}


/* ── Dark Mode ── */
[data-mantine-color-scheme="dark"] {
    --sl-bg:             var(--bg-page, #1A1D23);
    --sl-card-bg:        var(--bg-card, #2B2D31);
    --sl-card-border:    var(--border-card, rgba(255, 255, 255, 0.06));
    --sl-card-shadow:    0 1px 3px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.15);

    --sl-text:           var(--text-primary, #E8EAED);
    --sl-text-secondary: var(--text-secondary, #B0B8C4);
    --sl-text-muted:     var(--text-muted, #6B7280);
    --sl-text-dim:       #4A5568;

    --sl-th-bg:          var(--table-header-bg, #313338);
    --sl-th-color:       var(--table-header-text, #94A3B8);
    --sl-row-stripe:     var(--table-stripe, rgba(255, 255, 255, 0.03));
    --sl-row-hover:      rgba(225, 9, 21, 0.06);
    --sl-cell-border:    var(--table-border, rgba(255, 255, 255, 0.06));
    --sl-zero-color:     var(--table-zero-color, #4A5568);

    --sl-bsz-bg:         var(--bg-card, #2B2D31);

    --sl-accent-soft:    rgba(225, 9, 21, 0.10);
    --sl-accent-surface: rgba(225, 9, 21, 0.08);
    --sl-green-soft:     rgba(16, 185, 129, 0.12);

    --sl-chip-bg:        var(--bg-subtle, #313338);
    --sl-chip-border:    var(--border-light, #3F4248);
}


/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes slPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.75); }
}

@keyframes slFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}


/* ================================================================
   PAGE CONTAINER
   ================================================================ */
.sl-page {
    font-family: var(--sl-font) !important;
    background: var(--sl-bg);
    min-height: 100vh;
}


/* ================================================================
   STICKY HEADER BAR
   ================================================================ */
.sl-header-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sl-card-bg);
    border-bottom: 1px solid var(--sl-card-border);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sl-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sl-header-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--sl-card-border);
    background: var(--sl-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--sl-text-muted);
}
.sl-header-back:hover {
    border-color: rgba(var(--sl-accent-rgb), 0.3);
    color: var(--sl-accent);
}

.sl-header-title {
    font-family: var(--sl-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--sl-text);
}

.sl-header-subtitle {
    font-size: 12px;
    color: var(--sl-text-muted);
    margin-top: 2px;
    font-weight: 500;
}

/* Live Indicator */
.sl-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--sl-green-soft);
    border: 1px solid var(--sl-green-border);
}

.sl-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sl-green);
    animation: slLivePulse 2s ease-in-out infinite;
}

.sl-live-text {
    font-size: 12px;
    color: var(--sl-green);
    font-weight: 600;
    font-family: var(--sl-font);
}


/* ================================================================
   CONTENT AREA
   ================================================================ */
.sl-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}


/* ================================================================
   TABS — Segmented Control Style
   ================================================================ */
.sl-page .mantine-Tabs-list {
    border-bottom: none !important;
    gap: 3px !important;
    background: var(--sl-chip-bg) !important;
    border: 1px solid var(--sl-card-border) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    flex-wrap: wrap !important;
}

.sl-page .mantine-Tabs-tab {
    font-family: var(--sl-font) !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 20px !important;
    color: var(--sl-text-muted) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
}

.sl-page .mantine-Tabs-tab:hover {
    color: var(--sl-text-secondary) !important;
    background: rgba(128, 128, 128, 0.06) !important;
}

.sl-page .mantine-Tabs-tab[data-active] {
    background: var(--sl-card-bg) !important;
    color: var(--sl-accent) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}


/* ================================================================
   GLASS CARD (Tab Panels)
   ================================================================ */
.sl-glass-card {
    background: var(--sl-card-bg);
    border: 1px solid var(--sl-card-border);
    border-radius: var(--sl-card-radius);
    box-shadow: var(--sl-card-shadow);
    overflow: hidden;
    animation: slFadeUp 0.3s ease both;
}


/* ================================================================
   INFO BAR (Chips + Buttons)
   ================================================================ */
.sl-info-bar {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--sl-card-border);
    background: var(--sl-th-bg);
}

.sl-info-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Chip / Badge */
.sl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sl-chip-bg);
    border: 1px solid var(--sl-chip-border);
    color: var(--sl-chip-color);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--sl-font);
}

/* Last-Updated Badge */
.sl-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sl-green-soft);
    border: 1px solid var(--sl-green-border);
    padding: 6px 14px;
    border-radius: 100px;
}

.sl-updated-badge span {
    font-size: 12px;
    color: var(--sl-green);
    font-weight: 600;
    font-family: var(--sl-font-mono);
}

/* Action Buttons Area */
.sl-action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Save Button — Kaufland Red */
.sl-save-btn {
    background: linear-gradient(135deg, var(--sl-accent) 0%, var(--sl-accent-hover) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px var(--sl-accent-glow) !important;
    font-weight: 700 !important;
    font-family: var(--sl-font) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}
.sl-save-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px var(--sl-accent-glow) !important;
}

/* Subtle Buttons */
.sl-page .mantine-Button-root[data-variant="subtle"] {
    font-family: var(--sl-font) !important;
    color: var(--sl-text-muted) !important;
    font-weight: 600 !important;
}
.sl-page .mantine-Button-root[data-variant="subtle"]:hover {
    background: var(--sl-chip-bg) !important;
    color: var(--sl-text-secondary) !important;
}


/* ================================================================
   MATRIX TABLE
   ================================================================ */

/* Wrapper: horizontal scroll */
.sl-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sl-table-wrapper table {
    border-collapse: collapse;
    width: 100%;
}

/* ── Table Header ── */
.sl-table-wrapper thead th {
    background: var(--sl-th-bg);
    color: var(--sl-th-color);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 8px;
    white-space: nowrap;
    font-family: var(--sl-font);
    border-bottom: 2px solid var(--sl-accent);
    border-right: 1px solid var(--sl-cell-border);
}

.sl-table-wrapper thead th:last-child {
    border-right: none;
}

.sl-table-wrapper thead th.sl-bsz-header {
    width: 56px;
    min-width: 56px;
    position: sticky;
    left: 0;
    z-index: 3;
    font-family: var(--sl-font-mono);
    font-size: 10px;
    color: var(--sl-text-muted);
    background: var(--sl-bsz-bg);
}

.sl-table-wrapper thead th .sl-th-day {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sl-table-wrapper thead th .sl-th-day-short {
    font-size: 10px;
    color: var(--sl-text-muted);
    font-weight: 400;
    margin-top: 2px;
    text-transform: none;
}


/* ── BSZ Column (Sticky) ── */
.sl-bsz-cell {
    font-weight: 700;
    text-align: center;
    font-size: 13px;
    color: var(--sl-text-muted);
    padding: 0 10px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sl-bsz-bg);
    border-right: 1px solid var(--sl-bsz-border);
    border-bottom: 1px solid var(--sl-cell-border);
    width: 56px;
    min-width: 56px;
    transition: all 0.15s ease;
}

.sl-bsz-cell span {
    font-family: var(--sl-font-mono);
}


/* ── Data Cells ── */
.sl-data-row td {
    transition: all 0.15s ease;
    position: relative;
}

.sl-data-row td.sl-input-cell {
    padding: 2px 3px;
    border-bottom: 1px solid var(--sl-cell-border);
    border-right: 1px solid var(--sl-cell-border);
}

.sl-data-row td.sl-input-cell:last-child {
    border-right: none;
}


/* ── Zebra Striping ── */
.sl-data-row:nth-child(even) td {
    background: var(--sl-row-stripe);
}
.sl-data-row:nth-child(even) .sl-bsz-cell {
    background: var(--sl-row-stripe);
}


/* ── Row Hover ── */
.sl-data-row:hover > td {
    background-color: var(--sl-row-hover) !important;
    background: var(--sl-row-hover) !important;
}

.sl-data-row:hover > .sl-bsz-cell {
    color: var(--sl-accent) !important;
    font-weight: 800 !important;
    background: rgba(var(--sl-accent-rgb), 0.10) !important;
    box-shadow: inset 3px 0 0 0 var(--sl-accent);
}

.sl-data-row:hover .mantine-NumberInput-input {
    color: var(--sl-text) !important;
}


/* ── Night Rows (BSZ 0-4, 22-23) — nur leicht abgesetzt ── */
.sl-night-row {
    opacity: 1;
}


/* ── Value Highlighting (JS-driven classes) ── */
.sl-has-value .mantine-NumberInput-input {
    color: var(--sl-accent) !important;
    font-weight: 600 !important;
}

.sl-zero-value .mantine-NumberInput-input {
    color: var(--sl-zero-color) !important;
    opacity: 0.45;
}


/* ================================================================
   NUMBER INPUT STYLING
   ================================================================ */
.sl-page .mantine-NumberInput-input {
    font-family: var(--sl-font-mono) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    color: var(--sl-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.sl-page .mantine-NumberInput-input:hover {
    border-color: rgba(var(--sl-accent-rgb), 0.2) !important;
    background: rgba(var(--sl-accent-rgb), 0.02) !important;
}

.sl-page .mantine-NumberInput-input:focus {
    border-color: var(--sl-input-focus) !important;
    box-shadow: var(--sl-input-glow) !important;
    background-color: var(--sl-card-bg) !important;
}

.sl-page .mantine-NumberInput-input::placeholder {
    color: var(--sl-text-muted) !important;
}


/* ================================================================
   SUMMARY ROW (Σ)
   ================================================================ */
.sl-page tfoot td {
    font-weight: 700 !important;
}

.sl-sum-bsz {
    font-weight: 800;
    text-align: center;
    color: var(--sl-accent);
    padding: 10px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sl-bsz-bg);
    border-right: 1px solid var(--sl-bsz-border);
    border-top: 2px solid var(--sl-accent);
    width: 56px;
    min-width: 56px;
}

.sl-sum-bsz span {
    font-family: var(--sl-font-mono);
    font-size: 14px;
}

.sl-sum-cell {
    text-align: center;
    padding: 10px 11px;
    border-top: 2px solid var(--sl-accent);
    border-right: 1px solid var(--sl-cell-border);
    color: var(--sl-text);
    background: var(--sl-card-bg);
}

.sl-sum-cell:last-child {
    border-right: none;
}

.sl-sum-cell span {
    font-family: var(--sl-font-mono);
    font-weight: 700;
    font-size: 13px;
}


/* ================================================================
   FOOTER BAR (below table)
   ================================================================ */
.sl-card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--sl-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--sl-th-bg);
    font-family: var(--sl-font);
    font-size: 12px;
    color: var(--sl-text-muted);
}

.sl-card-footer .sl-footer-count {
    font-family: var(--sl-font-mono);
    font-weight: 600;
}

.sl-card-footer .sl-footer-hint {
    color: var(--sl-text-dim);
}


/* ================================================================
   KEYBOARD SHORTCUTS BAR
   ================================================================ */
.sl-shortcuts-bar {
    margin-top: 14px;
    padding: 10px 20px;
    background: var(--sl-card-bg);
    border-radius: var(--sl-card-radius);
    border: 1px solid var(--sl-card-border);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sl-shortcuts-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--sl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

.sl-shortcut-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.sl-shortcut-key {
    background: var(--sl-chip-bg);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--sl-card-border);
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sl-text-muted);
}

.sl-shortcut-desc {
    color: var(--sl-text-muted);
    opacity: 0.7;
}


/* ================================================================
   CSV IMPORT TAB
   ================================================================ */
.sl-import-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--sl-card-border);
    display: flex;
    align-items: center;
    gap: 16px;
}

.sl-import-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--sl-accent) 0%, var(--sl-accent-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px var(--sl-accent-glow);
    flex-shrink: 0;
}

.sl-import-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sl-text);
    font-family: var(--sl-font);
}

.sl-import-desc {
    font-size: 13px;
    color: var(--sl-text-muted);
    font-family: var(--sl-font);
    margin-top: 2px;
}

.sl-import-form {
    padding: 24px 28px;
}

.sl-import-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sl-import-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--sl-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-import-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sl-text);
    font-family: var(--sl-font);
}

.sl-import-section-desc {
    font-size: 12px;
    color: var(--sl-text-muted);
    margin-bottom: 10px;
    padding-left: 36px;
}

/* Upload Area */
.sl-page .dash-upload {
    transition: all 0.25s ease;
}
.sl-page .dash-upload:hover {
    border-color: rgba(var(--sl-accent-rgb), 0.4) !important;
    background: rgba(var(--sl-accent-rgb), 0.03) !important;
}

.sl-upload-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--sl-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.sl-upload-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-text-muted);
    font-family: var(--sl-font);
}

.sl-upload-hint {
    font-size: 11px;
    color: var(--sl-text-muted);
    opacity: 0.6;
    margin-top: 4px;
}

/* Format Hint */
.sl-format-hint {
    font-size: 12px;
    color: var(--sl-text-muted);
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sl-font);
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--sl-chip-bg);
    border: 1px solid var(--sl-chip-border);
}

.sl-format-hint code {
    background: var(--sl-accent-soft);
    padding: 3px 10px;
    border-radius: 6px;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    border: 1px solid rgba(var(--sl-accent-rgb), 0.12);
    color: var(--sl-accent);
    font-weight: 600;
}


/* ================================================================
   SELECT DROPDOWN
   ================================================================ */
.sl-page .mantine-Select-input {
    background-color: var(--sl-card-bg) !important;
    border: 1px solid var(--sl-card-border) !important;
    color: var(--sl-text) !important;
    border-radius: 10px !important;
}
.sl-page .mantine-Select-input:focus {
    border-color: var(--sl-input-focus) !important;
    box-shadow: var(--sl-input-glow) !important;
}
.sl-page .mantine-Select-dropdown {
    background-color: var(--sl-card-bg) !important;
    border-color: var(--sl-card-border) !important;
}


/* ================================================================
   MODAL
   ================================================================ */
.sl-page .mantine-Modal-content {
    border-radius: 16px !important;
    background: var(--sl-card-bg) !important;
}
.sl-page .mantine-Modal-header {
    background: var(--sl-card-bg) !important;
}
.sl-page .mantine-Checkbox-label {
    color: var(--sl-text) !important;
}


/* ================================================================
   KACHEL AUSWAHL (kein kachel_uid)
   ================================================================ */
.sl-kachel-card {
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--sl-card-border);
    background: var(--sl-card-bg);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--sl-card-shadow);
    transition: all 0.2s ease;
}
.sl-kachel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--sl-accent-rgb), 0.15);
}

.sl-kachel-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--sl-text);
    font-family: var(--sl-font);
}

.sl-kachel-count {
    font-size: 13px;
    color: var(--sl-text-muted);
    margin-top: 2px;
    font-family: var(--sl-font);
}

.sl-kachel-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sl-chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.sl-kachel-card:hover .sl-kachel-arrow {
    background: var(--sl-accent-soft);
    color: var(--sl-accent);
}


/* ================================================================
   SCROLLBAR
   ================================================================ */
.sl-page ::-webkit-scrollbar { width: 6px; height: 6px; }
.sl-page ::-webkit-scrollbar-track { background: transparent; }
.sl-page ::-webkit-scrollbar-thumb { background: var(--sl-card-border); border-radius: 3px; }
.sl-page ::-webkit-scrollbar-thumb:hover { background: var(--sl-text-muted); }


/* ================================================================
   DEBUG PANEL
   ================================================================ */
.sl-debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 50vh;
    overflow-y: auto;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: #c0c0cc;
}

.sl-debug-panel summary {
    padding: 8px 20px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #808090;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: rgba(26, 26, 46, 0.98);
    z-index: 1;
}

.sl-debug-content {
    padding: 16px 20px;
}


/* ================================================================
   RESPONSIVE — Tablet (≤960px)
   ================================================================ */
@media (max-width: 960px) {
    .sl-header-bar {
        padding: 0 20px;
    }
    .sl-content {
        padding: 20px 16px 80px;
    }
}


/* ================================================================
   RESPONSIVE — Mobile (≤768px)
   ================================================================ */
@media (max-width: 768px) {
    .sl-page .mantine-Tabs-list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sl-page .mantine-Tabs-list::-webkit-scrollbar {
        display: none;
    }
    .sl-page .mantine-Tabs-tab {
        padding: 8px 14px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    .sl-header-bar {
        padding: 0 16px !important;
    }
    .sl-content {
        padding: 16px 12px 80px !important;
    }
    .sl-info-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .sl-info-chips {
        flex-direction: column !important;
    }
    .sl-action-buttons {
        justify-content: stretch !important;
        flex-wrap: wrap !important;
    }
    .sl-action-buttons > button {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .sl-shortcuts-bar {
        display: none !important;
    }
}


/* ================================================================
   RESPONSIVE — Phone (≤480px)
   ================================================================ */
@media (max-width: 480px) {
    .sl-header-title {
        font-size: 14px !important;
    }
    .sl-live-badge {
        padding: 4px 10px;
    }
    .sl-live-text {
        font-size: 11px;
    }
}