/* ===== Standplatz – globales Stylesheet ===== */

/* ============================================================================
   Marken-Farbpalette – Single Source of Truth
   ----------------------------------------------------------------------------
   Synchron halten mit Standplatz.WebUI/Theme/StandplatzTheme.cs
   (dort sind dieselben Hex-Werte als C#-Konstanten für das MudBlazor-Theme
   hinterlegt). Bei Branding-Änderungen NUR diese beiden Stellen anpassen.

   Verwendung:   color: var(--std-primary);
                 background: rgba(var(--std-primary-rgb), 0.1);
   ============================================================================ */
:root {
    --std-primary:        #14375E;            /* Marine, Header/Footer/Brand */
    --std-secondary:      #1F4E80;            /* Heller Marine-Akzent (Verlauf) */
    --std-light:          #E1E8F0;            /* Akzent-Hintergrund (Tabellen, Cards) */
    --std-border:         #9BAFC8;            /* Trennlinien in Akzent-Sektionen */
    --std-primary-rgb:    20, 55, 94;         /* RGB-Tripel für rgba(...) */
    --std-secondary-rgb:  31, 78, 128;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333333;
    background-color: #FFFFFF;
}

a {
    color: var(--std-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ===== Rechtliche Inhalte (Impressum, Datenschutz) =====
   Inhalt zentriert in lesbarer Breite (1280px). Der scrollbare Bereich
   (Outer-Container .std-content) liegt eine Ebene höher und ist voll-breit –
   siehe CLAUDE.md Pattern 6, Layout-Patterns ("Content-Scrollbar am
   Viewport-Rand"). */
.legal-content {
    flex: 1;
    /* Gleiche Breite wie die Welcome-Seite (MudContainer MaxWidth.Large = 1280px). */
    max-width: 1280px;
    width: 100%;
    margin: 32px auto;
    padding: 0 24px;
}

/* <code>-Tags innerhalb des Datenschutz-/Impressum-Texts erben die normale
   Body-Schrift, statt vom Browser auf Monospace umgestellt zu werden. */
.legal-content code {
    font-family: inherit;
    font-size: inherit;
}

.legal-content h1 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 25px;
    color: var(--std-primary);
}

.legal-content h2 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 25px;
    color: #333333;
}

.legal-content h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333333;
}

.legal-content p {
    color: #555555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-content ul {
    color: #555555;
    line-height: 1.7;
    margin-bottom: 12px;
    padding-left: 1.5rem;
    list-style: disc outside;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content strong {
    color: #333333;
}

.legal-section {
    margin-bottom: 25px;
}

.legal-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .legal-content {
        margin: 16px auto;
        padding: 0 16px;
    }
}

/* #1059: Themenübersicht der Hilfe. Seit die Hilfe ohne Themen-Parameter nur noch
   das Inhaltsverzeichnis zeigt, ist diese Liste die Einstiegsseite und keine
   Randnotiz mehr – deshalb als Kachelraster statt als Aufzählung. Die Klassen
   entstanden bereits mit #1058, blieben dort aber ohne Gestaltung. */
.std-help-toc {
    margin-bottom: 32px;
}

.std-help-toc-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #333333;
}

.std-help-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.std-help-toc li {
    margin: 0;
}

.std-help-toc-link {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--std-border);
    border-radius: 6px;
    color: var(--std-primary);
    text-decoration: none;
    line-height: 1.4;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.std-help-toc-link:hover {
    border-color: var(--std-primary);
    background-color: var(--std-light);
}

.std-help-toc-link:focus-visible {
    outline: 2px solid var(--std-primary);
    outline-offset: 2px;
}

.std-help-toc-link.active {
    border-color: var(--std-primary);
    background-color: var(--std-light);
    font-weight: 500;
}

/* #1059: Tabellen in Hilfe-Abschnitten (z. B. die sechs Einrichtungsschritte).
   Auf schmalen Fenstern rollt die Tabelle waagerecht, statt die Seite zu sprengen. */
.std-help-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    display: block;
    overflow-x: auto;
}

.std-help-table th,
.std-help-table td {
    border: 1px solid var(--std-border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    color: #555555;
    line-height: 1.6;
}

.std-help-table th {
    background-color: var(--std-light);
    color: #333333;
    font-weight: 500;
}

/* Admin-Übersichtskarten – Hover-Highlight + Cursor */
.std-admin-card {
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.std-admin-card:hover {
    border-color: var(--std-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--std-primary-rgb), 0.18);
}

.std-admin-card:focus-visible {
    outline: 2px solid var(--std-primary);
    outline-offset: 2px;
}

/* Einheitlicher Kachel-Hover für alle Karten/Panels (Dashboard-Widgets,
   Hub-Kacheln, KPI-, Feature- und Event-Karten). Optik wie im Homepage-
   Projekt: dezenter Rahmen im Ruhezustand, beim Hover Anheben + kräftiger
   Marken-Schatten + Rahmen in Marine. Damit der Schatten voll sichtbar ist,
   müssen die Kacheln flach sein (MudCard Elevation=0). Marken-Farben
   ausschließlich über die :root-Variablen. */
.std-tile-hover {
    border: 1px solid var(--std-border);
    border-radius: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.std-tile-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--std-primary-rgb), 0.18);
    border-color: var(--std-primary);
}

/* Klickbare Kachel (z. B. Hub-Kacheln) – Zeiger + Tastatur-Fokusrahmen. */
.std-tile-hover.std-tile-clickable {
    cursor: pointer;
}

.std-tile-hover:focus-visible {
    border-color: var(--std-primary);
    box-shadow: 0 0 0 2px var(--std-light);
    outline: none;
}

/* Gesperrte Kachel: sichtbar (gestrichelt, gedämpft), aber ohne Hover-Anhebung. */
.std-tile-hover.std-tile-locked {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
}

.std-tile-hover.std-tile-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--std-border);
}

/* #874: Warn-Zustand einer Hub-Kachel (z. B. erkannte Terminkollision). Der Zustand ist
   bewusst nicht allein über Farbe erkennbar – die Kachel trägt zusätzlich ein Warn-Symbol
   und einen Klartext. Warnfarbe aus dem MudBlazor-Theme, keine Marken-Hexwerte. */
.std-tile-hover.std-tile-warning {
    border-color: var(--mud-palette-warning);
    border-width: 2px;
}

/* „Jetzt dran"-Betonung der als Nächstes fälligen Kachel. */
.std-tile-hover.std-tile-next {
    border-color: var(--std-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--std-light);
}

@media (prefers-reduced-motion: reduce) {
    .std-tile-hover,
    .std-tile-hover:hover {
        transition: none;
        transform: none;
    }
}

/* StandplatzActionMenu in MudTable-Zeilen: das absolut positionierte
   Dropdown-Panel wird sonst vom MudBlazor-Tabellen-Container abgeschnitten
   (.mud-table-container hat overflow-x:auto, wodurch overflow-y zu auto
   berechnet wird ⇒ vertikales Clipping + Scrollbar). Solange ein Menü
   geöffnet ist, geben wir den Overflow des Containers frei, damit das Panel
   vollständig sichtbar ist. Horizontales Scrollen bleibt im geschlossenen
   Zustand unverändert. */
.mud-table-container:has(.std-action-menu.open) {
    overflow: visible;
}

/* Führender Leerzustand (StandplatzEmptyState, #238): einheitlicher, zentrierter
   Empty State für Listen-/Tabellenseiten. Marken-Farben ausschließlich über die
   var(--std-*)-Variablen bzw. MudBlazor Color.Primary (Icon) – kein Hardcoding. */
.std-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
}

.std-empty-state-icon {
    font-size: 3rem !important;
    width: 3rem;
    height: 3rem;
    opacity: 0.7;
}

.std-empty-state-title {
    margin-top: 0.25rem;
}

.std-empty-state-description {
    max-width: 32rem;
}

.std-empty-state-actions {
    margin-top: 0.75rem;
}