/* public/assets/css/okto-components.css
 * =============================================================================
 * Gestalt der gemeinsamen Bausteine (Etappe 2, 10.10.2026): Leerzustand,
 * Reiter, Lade-Zustand und der Schließen-Knopf der Fenster.
 *
 * NICHT hier: Fläche, Rand, Rundung und Schleier der Fenster - die stehen
 * ausschließlich in okto-popup.css (Projektregel seit 07.10.2026).
 *
 * Gegenstücke: templates/components/*.php (PHP) und okto_components.js
 * (OW.empty, OW.tabs, OW.loading, OW.modal). Eingebunden für jede Seite in
 * includes/components/page_shell.php.
 * ============================================================================= */

/* ---- Fenster: Schließen-Knopf im Kopf (vorher als style-Attribut an jedem Knopf) */
.okto-modal-close {
    border: none;
    padding: 8px;
    background: transparent;
}

/* ---- Leerzustand ---------------------------------------------------------- */
.okto-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted, #94a3b8);
}
.okto-empty-icon {
    display: block;
    font-size: 28px;
    opacity: 0.55;
    margin-bottom: 10px;
}
.okto-empty-text {
    margin: 0;
    font-weight: 600;
}
.okto-empty-hint {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: 0.85;
}
.okto-empty-action {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---- Reiter (Standard-Aussehen; Seiten mit eigener Klasse behalten ihres) -- */
.okto-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: none;
}
.okto-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted, #94a3b8);
    padding: 12px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.okto-tab:hover { color: #fff; }
.okto-tab.active {
    color: var(--primary-color, #4CAF50);
    border-bottom-color: currentColor;
}
.okto-tab-pane:not(.active) { display: none; }

/* Tastaturfokus sichtbar - für alle Reiter, auch die mit eigener Klasse. */
[data-okto-tabs] [role="tab"]:focus-visible {
    outline: 2px solid var(--primary-color, #4CAF50);
    outline-offset: 2px;
}

/* ---- Lade-Zustand (OW.loading) --------------------------------------------- */
.okto-busy { cursor: progress; }