/*
  Additive Ergaenzungen NUR fuers Backoffice (Tabellen, Badges, kleine Utilities).
  Nutzt ausschliesslich die kanonischen --schulivo-*-Tokens aus app.css. Keine Hex-Werte.
  Design nach harness/_uiux.md: ruhige Flaechen, sichtbarer Fokus, klare Zustaende, 44px-Targets.
*/

/* ---- Accessibility: sichtbarer Fokus fuer alle interaktiven Elemente ---- */
.shell-nav-link:focus-visible,
.bo-row-link:focus-visible,
.bo-chip:focus-visible,
.bo-tab:focus-visible,
.btn-primary-pill:focus-visible,
.btn-ghost-pill:focus-visible,
.btn-danger-pill:focus-visible,
.icon-btn:focus-visible,
.text-input:focus-visible,
.select-input:focus-visible,
.textarea:focus-visible,
.bo-btn:focus-visible {
    outline: 2px solid var(--schulivo-primary);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Skip-Link (Tastaturnavigation zum Inhalt) */
.bo-skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3rem;
    z-index: 1000;
    background: var(--schulivo-primary);
    color: var(--schulivo-primary-foreground);
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    font-weight: 600;
    transition: top 0.15s ease;
}
.bo-skip-link:focus {
    top: 0.75rem;
}

/* Mindest-Tap-Groesse (44px) fuer primaere Aktionen/Buttons */
.btn-primary-pill,
.btn-ghost-pill,
.btn-danger-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Sanftes Einblenden beim Seitenwechsel (erlaubt lt. _uiux; dezent) */
@media (prefers-reduced-motion: no-preference) {
    .bo-fade-in {
        animation: bo-fade-in 0.18s ease-out;
    }
}
@keyframes bo-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Alerts: konsistentes Feedback (Erfolg/Fehler/Info/Warnung) ---- */
.bo-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--schulivo-border);
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--schulivo-card);
    color: var(--schulivo-foreground);
}
.bo-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.bo-alert-success {
    background: color-mix(in srgb, var(--schulivo-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--schulivo-success) 35%, transparent);
    color: color-mix(in srgb, var(--schulivo-success) 82%, var(--schulivo-foreground));
}
.bo-alert-danger {
    background: color-mix(in srgb, var(--schulivo-accent-coral) 12%, transparent);
    border-color: color-mix(in srgb, var(--schulivo-accent-coral) 35%, transparent);
    color: color-mix(in srgb, var(--schulivo-accent-coral) 82%, var(--schulivo-foreground));
}
.bo-alert-info {
    background: color-mix(in srgb, var(--schulivo-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--schulivo-primary) 30%, transparent);
    color: color-mix(in srgb, var(--schulivo-primary) 82%, var(--schulivo-foreground));
}

/* ---- Spinner (Loading-Zustaende) ---- */
.bo-spinner {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bo-spin 0.6s linear infinite;
    vertical-align: -0.15em;
}
@keyframes bo-spin { to { transform: rotate(360deg); } }

.bo-loading-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--schulivo-muted-foreground);
    padding: 2rem 0;
    justify-content: center;
}

/* ---- Skeleton (initiales Laden von Listen) ---- */
.bo-skeleton {
    height: 0.9rem;
    border-radius: 0.4rem;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--schulivo-muted) 60%, transparent) 25%,
        color-mix(in srgb, var(--schulivo-muted) 30%, transparent) 37%,
        color-mix(in srgb, var(--schulivo-muted) 60%, transparent) 63%);
    background-size: 400% 100%;
    animation: bo-shimmer 1.2s ease-in-out infinite;
}
@keyframes bo-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- Leerzustand: dashed Border, zentriert, mit Aktion (lt. _uiux) ---- */
.bo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--schulivo-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--schulivo-muted) 25%, transparent);
}
.bo-empty svg { width: 30px; height: 30px; color: var(--schulivo-muted-foreground); }
.bo-empty-text { color: var(--schulivo-muted-foreground); max-width: 30rem; }

/* ---- Login ---- */
.bo-login-wrap {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--schulivo-primary) 10%, transparent), transparent),
        var(--schulivo-background);
}
.bo-login-card {
    width: 100%;
    max-width: 25rem;
    background: var(--schulivo-card);
    border: 1px solid var(--schulivo-border);
    border-radius: 1.1rem;
    padding: 2rem;
    box-shadow: 0 12px 40px -24px color-mix(in srgb, var(--schulivo-foreground) 40%, transparent);
}
.bo-login-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: var(--schulivo-primary);
    color: var(--schulivo-primary-foreground);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.1rem;
}
.bo-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.bo-field > label { font-size: 0.85rem; font-weight: 600; color: var(--schulivo-foreground); }

/* ---- Bestaetigungs-Dialog (destruktive Aktionen) ---- */
.bo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--schulivo-foreground) 45%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: bo-fade-in 0.12s ease-out;
}
.bo-modal {
    width: 100%;
    max-width: 26rem;
    background: var(--schulivo-card);
    border: 1px solid var(--schulivo-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 60px -30px color-mix(in srgb, var(--schulivo-foreground) 60%, transparent);
}
.bo-modal-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--schulivo-foreground); }
.bo-modal-text { color: var(--schulivo-muted-foreground); margin: 0 0 1.5rem; line-height: 1.55; }
.bo-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Globale Aufwertung geteilter Zustands-Klassen (greift auf allen Seiten) ---- */

/* Leerzustand: gestrichelt, zentriert, ruhig */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--schulivo-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--schulivo-muted) 22%, transparent);
    color: var(--schulivo-muted-foreground);
    font-size: 0.92rem;
}

/* Feedback-Hinweise als Alert-Boxen; role="alert" = Fehler (Farbe + Rolle, nicht nur Farbe) */
.hint {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--schulivo-primary) 28%, transparent);
    background: color-mix(in srgb, var(--schulivo-primary) 9%, transparent);
    color: color-mix(in srgb, var(--schulivo-primary) 82%, var(--schulivo-foreground));
    font-size: 0.9rem;
    line-height: 1.5;
}
.hint[role="alert"] {
    border-color: color-mix(in srgb, var(--schulivo-accent-coral) 32%, transparent);
    background: color-mix(in srgb, var(--schulivo-accent-coral) 11%, transparent);
    color: color-mix(in srgb, var(--schulivo-accent-coral) 82%, var(--schulivo-foreground));
}
.hint code {
    background: color-mix(in srgb, var(--schulivo-foreground) 8%, transparent);
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    font-size: 0.85em;
}

.bo-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--schulivo-border);
    border-radius: 0.75rem;
    background: var(--schulivo-card);
}

.bo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bo-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--schulivo-muted-foreground);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--schulivo-border);
    white-space: nowrap;
}

.bo-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--schulivo-border);
    color: var(--schulivo-foreground);
    vertical-align: middle;
}

.bo-table tbody tr:last-child td {
    border-bottom: none;
}

.bo-table tbody tr:hover {
    background: color-mix(in srgb, var(--schulivo-primary) 6%, transparent);
}

.bo-row-link {
    color: var(--schulivo-primary);
    font-weight: 600;
    text-decoration: none;
}

.bo-row-link:hover {
    text-decoration: underline;
}

.bo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.bo-badge-neutral {
    background: var(--schulivo-muted);
    color: var(--schulivo-muted-foreground);
}

.bo-badge-progress {
    background: color-mix(in srgb, var(--schulivo-primary) 14%, transparent);
    color: var(--schulivo-primary);
}

.bo-badge-success {
    background: color-mix(in srgb, var(--schulivo-success) 18%, transparent);
    color: var(--schulivo-success);
}

.bo-badge-danger {
    background: color-mix(in srgb, var(--schulivo-accent-coral) 18%, transparent);
    color: var(--schulivo-accent-coral);
}

.bo-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.bo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.bo-toolbar .text-input,
.bo-toolbar .select-input {
    max-width: 22rem;
}

.bo-spacer {
    flex: 1 1 auto;
}

.bo-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--schulivo-border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.bo-tab {
    padding: 0.6rem 1rem;
    border: none;
    background: none;
    color: var(--schulivo-muted-foreground);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.bo-tab.bo-tab-active {
    color: var(--schulivo-primary);
    border-bottom-color: var(--schulivo-primary);
}

.bo-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 2rem;
}

.bo-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bo-detail-label {
    font-size: 0.78rem;
    color: var(--schulivo-muted-foreground);
    font-weight: 600;
}

.bo-detail-value {
    color: var(--schulivo-foreground);
    word-break: break-word;
}

.bo-inline-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- E-Mail-Editor --- */
.bo-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 960px) {
    .bo-editor-grid { grid-template-columns: 1fr; }
}

.bo-editor-pane {
    display: flex;
    flex-direction: column;
    min-height: 32rem;
}

.bo-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.bo-chip {
    border: 1px solid var(--schulivo-border);
    background: var(--schulivo-card);
    color: var(--schulivo-foreground);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.bo-chip:hover {
    border-color: var(--schulivo-primary);
    color: var(--schulivo-primary);
}

.bo-editor-textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 28rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}

.bo-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 28rem;
    border: 1px solid var(--schulivo-border);
    border-radius: 0.75rem;
    background: #ffffff;
}

.bo-pane-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--schulivo-muted-foreground);
    margin-bottom: 0.4rem;
}