/* Hestiamin - eigenes Design, keine Bulma-Basis mehr. Designsprache: "flach + leicht
   verschwommenes Glas" - Radius-Skala fuer grosse Flaechen (Karten/Modal) getrennt von
   kompakten Controls (Buttons/Inputs bleiben bei eigenem, kleinerem Radius), ein
   gemeinsamer Transition-Takt, genereller Flat-Reset fuer button/select, currentColor-
   Icons. Akzentfarbe ist Hestiamins eigene, von der "Wizard"-Palette abgeleitete Lila
   (siehe :root unten).

   Typografie: IBM Plex (Sans/Serif/Mono) statt durchgaengig Cascadia Mono - eine
   zusammenpassende Familie mit drei Rollen statt Mono ueberall. Sans ist die
   Standardschrift fuer UI-Text, Mono bleibt fuer Zahlen/technische Werte (Kontingente,
   Domainnamen, Usernamen) - dort sorgt die feste Zeichenbreite fuer klar vergleichbare
   Werte, wie es Cascadia Mono vorher ueberall tat. Serif ist dezent fuer den Markennamen/
   Seitentitel reserviert, um der Marke etwas eigenen Charakter zu geben. */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/PlexSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/PlexSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/PlexSans-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/PlexSans-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("../fonts/PlexSerif-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("../fonts/PlexSerif-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("../fonts/PlexSerif-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("../fonts/PlexSerif-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/PlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/PlexMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/PlexMono-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/PlexMono-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Drei Rollen statt einer Mono-Schrift ueberall: Sans als Standard, Mono fuer
       Zahlen/technische Werte, Serif dezent fuer die Marke. */
    --font: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
    --font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;
    /* Petrol/Cyan als Akzent statt des vorherigen Warmrots ("kann ich mich nicht mit
       anfreunden") - wieder bewusst NUR der Akzent geaendert, Neutraltoene unveraendert
       neutral (siehe Kommentar bei der vorherigen Farbwechsel-Runde). */
    --accent: #0f7e8c;
    --accent-contrast: #ffffff;
    --accent-soft: #e1f2f3;
    --bg: #ffffff;
    --bg-elevated: #e9edf3;
    --text: #1f1729;
    --text-muted: #6d6b78;
    --border: #d2dae0;
    --danger: #d1435b;
    --danger-soft: #fbe4e8;
    --warning: #6b6b6b;
    --warning-soft: #e8e8e8;
    --success: #2f9e63;
    --success-soft: #e1f5ea;
    /* Radius-Sprache fuer grosse Flaechen (Karten, Modal) - kompakte Controls
       (Buttons/Inputs) bleiben bewusst bei ihrem eigenen, kleineren Wert (8px):
       eine andere Werkzeug-Ebene als der Inhalt. */
    --radius: 14px;
    /* Gemeinsamer Takt fuer alle durch Nutzeraktion ausgeloesten Zustandswechsel
       (Hover/Fokus/Aktiv) statt verstreuter Einzelwerte. */
    --transition: 0.18s ease;
    /* Leitet von --bg ab, funktioniert dadurch automatisch in Light UND Dark,
       ohne hier oder im Dark-Block gesondert definiert werden zu muessen. */
    --glass-bg: color-mix(in srgb, var(--bg) 75%, transparent);
    --glass-blur: 6px;
}

@media (prefers-color-scheme: dark) {
    /* Bewusst neutrales Grau fuer bg/bg-elevated/text/text-muted/border - nur
       --accent/--accent-contrast/--accent-soft tragen die neue Petrol/Cyan-Farbe.
       --accent wird im Dark Mode aufgehellt zu einem kraeftigeren Cyan (dunkles Petrol
       waere auf dunklem Grund kaum als Akzent lesbar), analog zu den frueheren
       Farbwechsel-Runden. */
    :root:not([data-theme="light"]) {
        --accent: #3dd6c9;
        --accent-contrast: #052e2b;
        --accent-soft: #123634;
        --bg: #17171b;
        --bg-elevated: #202024;
        --text: #f1f1f3;
        --text-muted: #9a9aa1;
        --border: #313136;
        --danger: #ef6b83;
        --danger-soft: #3a1f28;
        --warning: #a8a8a8;
        --warning-soft: #3a3a3a;
        --success: #4cc384;
        --success-soft: #1f3a2b;
    }
}

:root[data-theme="dark"] {
    --accent: #3dd6c9;
    --accent-contrast: #052e2b;
    --accent-soft: #123634;
    --bg: #17171b;
    --bg-elevated: #202024;
    --text: #f1f1f3;
    --text-muted: #9a9aa1;
    --border: #313136;
    --danger: #ef6b83;
    --danger-soft: #3a1f28;
    --warning: #a8a8a8;
    --warning-soft: #3a3a3a;
    --success: #4cc384;
    --success-soft: #1f3a2b;
}

* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

/* Erlaubt Transitions zu/von "auto"-Groessen (z.B. Hoehe eines Elements, dessen Inhalt
   sich aendert) statt nur zwischen zwei festen Werten - Grundlage fuer die
   Modal-Hoehenanimation weiter unten (.modal-box). */
:root {
    interpolate-size: allow-keywords;
}

/* Genereller Flach-Reset fuer alle Buttons/Selects statt pro Klasse einzeln -
   einzelne Klassen setzen bei Bedarf weiterhin ihre eigene border/border-radius/
   Fuellung, aber nicht mehr appearance/box-shadow/den Browser-Rahmen. */
button,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    box-shadow: none;
    background-image: none;
    font-family: inherit;
    cursor: pointer;
    /* Verhindert das blaue Antipp-Overlay auf Touch-Geraeten (Chrome/Safari
       Standardverhalten) - Fokus per Tastatur bleibt ueber :focus-visible sichtbar. */
    -webkit-tap-highlight-color: transparent;
}

/* Alle Icons einheitlich als SVG (Sprite in index.html) statt Emoji, standardmaessig
   in der Akzentfarbe - Ausnahmen (z.B. Warn-/Fehlerfarbe) ueberschreiben currentColor
   gezielt, siehe .metric-warning/.metric-danger weiter unten. */
.icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
    color: var(--accent);
}

/* Kraeftigere Linienstaerke gezielt fuer reine Icon-Buttons (Hinzufuegen/Schliessen/
   Loeschen/Menue/Theme-Wechsel) - diese Icons sind das einzige visuelle Element im
   Button und sollen aehnlich kraeftig wirken wie das "+" bei "Neuer User"; normale
   Icons neben Text (Sektions-Ueberschriften, Zeilen-Icons) bleiben beim duenneren
   Standardwert. */
.section-add-btn .icon,
.modal-close-btn .icon,
.modal-action-btn .icon,
.modal-delete-btn .icon,
.close-btn .icon,
.mobile-menu-fab .icon,
.theme-toggle-btn .icon {
    stroke-width: 2.5;
}

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    margin: 0;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar - auf Desktop dauerhaft sichtbar, traegt Navigation + Account-Uebersicht.
   Die Kopfzeile (Logo + Theme-Toggle) gehoert bewusst nur zur Sidebar, nicht zum
   Content - der Hauptbereich soll frei/luftig bleiben, ohne eigene Kopfzeile darueber. */
.sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Bleibt beim Scrollen der Seite oben fixiert, waehrend der Rest der Seite ganz
       normal mit dem Browser-Scrollbalken scrollt - siehe .main-content darunter. */
    position: sticky;
    top: 0;
}

.sidebar-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.brand-accent {
    color: var(--accent);
}

/* Logo (magische Flamme mit Funkeln) - liegt als eigenstaendige Datei unter
   assets/logo.svg, nicht als Inline-SVG im Quelltext dupliziert. Einfaerbung per
   CSS-Maske (Form kommt aus der Datei, Farbe aus background-color) statt Inline-SVG-
   fill, damit die Datei trotzdem auf var(--accent)/Light-Dark reagiert - der konkrete
   Fuellwert innerhalb der SVG-Datei selbst ist fuer eine Maske irrelevant, nur die
   Form/Alpha zaehlt. aspect-ratio haelt das Seitenverhaeltnis der Original-SVG
   (90.613693 x 109.44713), da ein maskiertes Element keine eigene intrinsische
   Groesse hat wie ein <svg viewBox> es haette. */
.brand-mark {
    height: 2rem;
    aspect-ratio: 90.613693 / 109.44713;
    flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask-image: url("../assets/logo.svg?v=3");
    mask-image: url("../assets/logo.svg?v=3");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Login-Maske: ersetzt komplett die Oberflaeche statt ein Overlay zu sein (siehe
   x-show="!loggedIn" in index.html) - eigener Vollbild-Hintergrund statt Modal-Optik,
   viel Weissraum wie der Rest des Panels (siehe Locked Design Decisions), keine Karte
   mit Schatten/Rahmen noetig. */
/* Neuer Wrapper um Sidebar+Main (fuer x-show="loggedIn", siehe index.html) hätte als
   normales <div> (Default-Display block) das Nebeneinander-Layout von .app-shell
   gebrochen - .sidebar/.main-content muessen dessen direkte Flex-/Grid-Kinder bleiben.
   display:contents macht den Wrapper layout-technisch unsichtbar (Kinder verhalten sich,
   als saessen sie direkt in .app-shell), bleibt aber ein echter DOM-Knoten, den Alpine
   ein-/ausblenden kann. Als Klasse statt Inline-Style aus demselben Grund wie bei
   .form-row/.switch-row weiter unten - x-show loescht ein inline gesetztes display beim
   Umschalten sonst wieder mit. */
.app-content {
    display: contents;
}

.login-screen {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg);
    padding: 1.5rem;
}

.login-theme-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2.25rem;
}

.login-brand .brand-mark {
    height: 2.3rem;
}

/* Umhuellt nur den brand-mark (nicht die ganze .login-brand-Zeile), damit die
   absolut positionierten Funken sich am Icon orientieren statt am ganzen Zeilenblock
   inkl. Schriftzug. inline-flex statt block, damit sich die Box exakt auf die Groesse
   des brand-mark schrumpft (einziges Flex-Kind) - die drei Funken-Icons darin werden
   deshalb per Prozent-Position/-Groesse relativ zu GENAU dieser Box platziert, was
   1:1 der viewBox von assets/logo.svg entspricht (siehe .login-sparkle-a/b/c unten). */
.login-sparkles {
    position: relative;
    display: inline-flex;
}

/* Maskiert nur noch die Flamme (assets/logo-flame.svg), nicht mehr das komplette Logo
   inkl. Funken - die drei Funken werden separat als .login-sparkle-a/b/c ueberlagert,
   damit sie fuer sich genommen animiert werden koennen. Nur fuer den Login-Screen, der
   normale .brand-mark in der Sidebar bleibt unveraendert (permanent sichtbare Funken,
   keine Dauerbewegung neben der eigentlichen Navigation). */
.login-flame {
    -webkit-mask-image: url("../assets/logo-flame.svg");
    mask-image: url("../assets/logo-flame.svg");
}

/* Jeder Funke ist derselbe Pfad wie im Original-Logo (siehe icon-sparkle-a/b/c in
   index.html), links/oben/Breite/Hoehe als Prozentwerte exakt aus den
   Original-Pfadkoordinaten von assets/logo.svg errechnet (relativ zu dessen viewBox
   90.613693 x 109.44713) - dadurch liegt jeder Funke pixelgenau an seiner
   urspruenglichen Position auf der Flamme, ganz ohne die Funken separat neu
   nachzeichnen/schaetzen zu muessen. Traegt nur noch das grosse Aufsteigen (translateY
   + Ein-/Ausblenden) - das kleine Dauer-Schwirren sitzt auf dem inneren
   .login-sparkle-icon (siehe unten), da beide sonst um dieselbe transform-Eigenschaft
   desselben Elements konkurrieren wuerden. */
.login-sparkle {
    position: absolute;
    opacity: 1;
    animation-name: login-sparkle-rise;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* CSS-Keyframes wiederholen sich immer exakt gleich - "echter" Zufall ist damit nicht
   moeglich. Stattdessen bewusst drei zueinander unpassende (nicht ganzzahlig-vielfache)
   Zyklusdauern/Verzoegerungen gewaehlt: die drei Aufstiege laufen dadurch nie im selben
   Rhythmus, das exakt gleiche Gesamtmuster wiederholt sich rechnerisch erst nach
   knapp 47 Minuten (kgV von 8.4s/11.2s/13.7s) - fuer das Auge praktisch nicht
   vorhersehbar/unregelmaessig, ganz ohne JavaScript-Zufallsgenerator. */
/* Negativer Delay statt 0s: laesst die Animation so starten, als liefe sie schon
   4.9s - die Ruhephase (0-62% von 8.4s = ca. 5.2s) ist dadurch beim Laden schon fast
   durch, der grosse Funke steigt also praktisch sofort sichtbar auf. Sinnvoll gerade
   fuer diesen, den auffaelligsten der drei Funken - die meisten Besucher:innen sind
   nicht lange genug auf dem Login-Screen, um sonst die erste Ruhephase abzuwarten. Die
   Zyklusdauer selbst (8.4s) bleibt unveraendert, nur der Einstiegspunkt verschiebt sich
   - alle folgenden Wiederholungen laufen im selben Rhythmus wie zuvor. */
.login-sparkle-a {
    left: 61.93%;
    top: 0%;
    width: 30.9%;
    height: 25.58%;
    animation-duration: 8.4s;
    animation-delay: -4.9s;
}

.login-sparkle-b {
    left: 0%;
    top: 30.61%;
    width: 17.66%;
    height: 14.62%;
    animation-duration: 11.2s;
    animation-delay: 2.6s;
}

.login-sparkle-c {
    left: 86.14%;
    top: 32.45%;
    width: 13.86%;
    height: 11.47%;
    animation-duration: 13.7s;
    animation-delay: 5.1s;
}

/* Die meiste Zeit einfach ruhig an der Originalposition (0-62%, "ab und zu" statt
   dauerhaft in Bewegung) - erst danach steigt der Funke sichtbar auf und verblasst
   (62-80%), springt dabei unsichtbar (opacity 0) auf die Ausgangsposition zurueck
   (81%) und faded dort wieder ein (81-100%), statt sichtbar wieder herunterzufallen.
   Leichte Rotation beim Aufsteigen (statt reiner Vertikalbewegung) fuer einen weniger
   mechanischen, mehr "davonschwebenden" Eindruck. */
@keyframes login-sparkle-rise {
    0%,
    62% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-1.6em) rotate(14deg) scale(1.25);
        opacity: 0;
    }
    81% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Kleines Dauer-Schwirren auf dem inneren Icon, unabhaengig vom grossen Aufsteigen
   aussen (siehe .login-sparkle oben) - wie das Flackern echter Funken nahe einer
   Flamme, nicht nur ein einzelner grosser Aufstieg. Unregelmaessige statt gleichmaessig
   verteilter Keyframe-Prozente (18/34/53/71/89 statt 20/40/60/80) sowie je Funke eine
   eigene, nicht synchrone Dauer (siehe .login-sparkle-a/b/c .login-sparkle-icon unten) -
   dadurch wirkt es nicht wie ein gleichmaessiger Puls. */
@keyframes login-spark-flicker {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    18% {
        transform: translate(0.05em, -0.03em) scale(1.08);
        opacity: 0.85;
    }
    34% {
        transform: translate(-0.04em, 0.02em) scale(0.95);
        opacity: 1;
    }
    53% {
        transform: translate(0.03em, 0.04em) scale(1.05);
        opacity: 0.88;
    }
    71% {
        transform: translate(-0.05em, -0.02em) scale(0.97);
        opacity: 1;
    }
    89% {
        transform: translate(0.02em, -0.04em) scale(1.03);
        opacity: 0.92;
    }
}

.login-sparkle-icon {
    display: block;
    width: 100%;
    height: 100%;
    animation-name: login-spark-flicker;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.login-sparkle-a .login-sparkle-icon {
    animation-duration: 1.7s;
}

.login-sparkle-b .login-sparkle-icon {
    animation-duration: 2.3s;
}

.login-sparkle-c .login-sparkle-icon {
    animation-duration: 1.95s;
}

@media (prefers-reduced-motion: reduce) {
    .login-sparkle {
        animation: none;
        opacity: 1;
    }

    .login-sparkle-icon {
        animation: none;
    }
}

.login-brand .brand-name {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Bewusst kein eigener Abstand zum Passwortfeld darueber (dessen margin-bottom in
   index.html traegt das) - direkt darunter statt als eigene Zeile mit Luft, damit sie
   sich klar dem Passwortfeld zuordnet statt wie ein separater Block zu wirken. */
.login-forgot-link {
    display: block;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    cursor: not-allowed;
    opacity: 0.7;
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text);
    transition: border-color var(--transition);
}

.theme-toggle-btn:hover {
    border-color: var(--accent);
}

.account-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Ladezustand (Sidebar-Kacheln + Startseiten-Dashboard, siehe index.html): pulsierende
   Platzhalterbalken statt eines leeren Bereichs, waehrend die neun parallelen API-Aufrufe
   aus init() noch laufen - verhindert den Effekt, dass zuerst nur die Footer-Buttons
   isoliert sichtbar sind und der restliche Inhalt erst ploetzlich "hineinspringt". */
@keyframes skeleton-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.skeleton-bar {
    background: var(--border);
    border-radius: 6px;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-bar {
        animation: none;
        opacity: 0.8;
    }
}

.skeleton-tile {
    display: block;
    cursor: default;
}

/* Account-Kachel: 2-zeilig, Kennzahlen per Icon direkt sichtbar, kein Klick noetig.
   Radius wie Karten/Modal (grosse Flaeche), nicht wie kompakte Buttons. */
.account-tile {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition), background-color var(--transition);
}

.account-tile:hover {
    border-color: var(--accent);
}

.account-tile.is-active {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

/* Bandbreiten-Sparkline im Kachel-Hintergrund: liegt als erstes Kind im DOM, dadurch
   automatisch hinter Zeile 1/2 (spaetere Geschwister ueberdecken frueher gemalte) - kein
   z-index noetig. mask-image blendet sie nach links (hinter den Text) aus statt sie per
   Deckkraft-Gradient je Punkt zu berechnen; rechts (aktuellster Tag, meist textfrei) bleibt
   sie voll sichtbar. */
.tile-spark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, black 0%, black 35%, transparent 80%);
    mask-image: linear-gradient(to left, black 0%, black 35%, transparent 80%);
}

.tile-spark-area {
    fill: var(--accent);
    fill-opacity: 0.14;
    stroke: none;
}

.tile-spark-line {
    fill: none;
    stroke: var(--accent);
    stroke-opacity: 0.6;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.account-tile-line1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-tile-line2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.6rem;
    margin-top: 0.3rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tile-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-warning {
    color: var(--warning);
}

.metric-danger {
    color: var(--danger);
}

/* Ausnahme von der generellen Icon-Akzentfarbe: hier traegt das Icon eine Bedeutung
   (Speicher nahe am Limit) und soll mit dem Text mitfaerben statt starr Akzent zu bleiben. */
.metric-warning .icon,
.metric-danger .icon {
    color: inherit;
}

/* Ausnahme vom Strich-Stil des restlichen Sprites: fuer Marken-Logos (z.B. das
   offizielle WordPress-Icon), die als gefuellte Flaeche statt als Linienzeichnung
   vorliegen. */
.icon.is-filled {
    fill: currentColor;
    stroke: none;
}

.sidebar-footer {
    padding: 0.6rem;
    display: flex;
    /* Bewusst kein align-items:center - Standard-"stretch" sorgt dafuer, dass der
       Icon-Button exakt dieselbe Hoehe wie "+ Neuer User" bekommt (dessen Hoehe sich
       aus Padding/Zeilenhoehe ergibt, nicht aus einem festen Wert). */
    gap: 0.5rem;
}

.sidebar-footer .btn-accent {
    flex: 1;
}

/* Kompakter Icon-Button fuer den WordPress Wizard neben "+ Neuer User" - gleiche
   Fläche/Akzent-Sprache wie .section-add-btn, Breite fest/Hoehe gestreckt (siehe
   .sidebar-footer) damit beide Buttons exakt gleich hoch sind. */
.wp-wizard-btn {
    flex-shrink: 0;
    width: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent);
    transition: filter var(--transition);
}

.wp-wizard-btn:hover {
    filter: brightness(1.07);
}

.wp-wizard-btn .icon {
    color: var(--accent-contrast);
    width: 1.5rem;
    height: 1.5rem;
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-weight: 600;
    font-size: 0.88rem;
    transition: filter var(--transition);
}

.btn-accent:hover {
    filter: brightness(1.07);
}

/* Bisher keine eigene disabled-Optik (Browser-Default liess "Anlegen"-Buttons trotz
   disabled normal aussehen) - fuer den Login-Button jetzt sichtbar, da der hier echt
   reaktiv ist (leere Felder = kein Klick moeglich) statt dauerhaft/absichtlich disabled
   wie die Anlegen-Buttons. Wirkt dort als Nebeneffekt gleich mit, kein Nachteil. */
.btn-accent:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-accent:disabled:hover {
    filter: none;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-weight: 600;
    font-size: 0.88rem;
    transition: border-color var(--transition), color var(--transition);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Hauptbereich - Onepager pro ausgewaehltem Account, keine Tab-Navigation.
   Bewusst grosszuegiger Weissraum, keine Kopfzeile davor - soll frei/luftig wirken. */
/* Kein eigener Scroll-Container mehr (siehe .sidebar: position:sticky) - dadurch
   scrollt immer die ganze Seite mit dem normalen Browser-Scrollbalken am Fensterrand,
   statt eines eigenen Balkens mitten im Weissraum bei max-width-begrenzter Breite. */
.main-content {
    flex: 1;
    padding: 3rem 3.5rem;
    max-width: 1040px;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

/* Titel + Loeschen-Icon in einer Zeile statt eines eigenen Text-Links ueber den
   Buttons - Loeschen ist damit raeumlich vom Abbrechen/Speichern-Paar getrennt
   (weniger Fehlklick-Risiko) und nimmt keine eigene Zeile Platz weg. */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.modal-delete-btn,
.modal-close-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color var(--transition);
}

.modal-delete-btn {
    background: var(--danger-soft);
}

.modal-delete-btn:hover {
    background: color-mix(in srgb, var(--danger) 18%, var(--danger-soft));
}

.modal-delete-btn .icon {
    color: var(--danger);
}

.modal-close-btn {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.modal-close-btn:hover {
    background: color-mix(in srgb, var(--text) 12%, transparent);
}

.modal-close-btn .icon {
    color: var(--text-muted);
}

/* Funktions-Icon-Buttons im Modal-Header (phpMyAdmin/Datei-Manager oeffnen) - bewusst
   eigenes, akzentfarbenes Farbschema statt des neutral-grauen .modal-close-btn, damit
   sich "hier passiert etwas" (externes Werkzeug oeffnen) optisch von "nur schliessen"
   abhebt. Gleiche Groesse/Form wie .modal-close-btn, gleiches Muster wie
   .section-add-btn (accent-soft Flaeche, akzentfarbenes Icon). */
.modal-action-btn {
    background: var(--accent-soft);
}

.modal-action-btn:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft));
}

.modal-action-btn .icon {
    color: var(--accent);
}

/* Fusszeile aller Modals: Loeschen (falls vorhanden) ganz links, Abbrechen/Speichern
   als eigene Gruppe rechts (.modal-footer-actions traegt margin-left:auto) - so bleibt
   sichtbarer Weissraum zwischen Loeschen und dem Abbrechen/Speichern-Paar, unabhaengig
   davon ob der Loeschen-Button per x-show ueberhaupt im Layout ist. */
.modal-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* .btn-accent ist sonst bewusst volle Breite (z.B. "+ Neuer User" in der Sidebar) -
   hier stattdessen eine bewusste Mindestbreite, damit Speichern/Anlegen praesent
   bleibt, statt sich eng an den Text zu schmiegen wie das schmalere Abbrechen. */
.modal-footer-actions .btn-accent {
    width: auto;
    min-width: 9rem;
}

/* Onepager-Abschnitte (Domains, spaeter Mail/Datenbanken/Cronjobs/Backups): Titel mit
   Icon, optionale Meta-Info (z.B. Kontingent), "+"-Button rechts fuer die Neuanlage -
   ein wiederverwendbares Muster fuer alle Bereiche aus der HestiaRE-Hauptnavigation. */
.content-section {
    margin-bottom: 1.75rem;
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.section-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-left: 0.25rem;
    overflow-wrap: break-word;
}

/* Fuer Abschnitte mit zusaetzlichem Steuerelement neben dem "+"-Button (z.B. der
   Cronjobs-Benachrichtigungs-Schalter) - traegt statt .section-add-btn selbst das
   margin-left:auto, damit beide als Gruppe zusammen rechts stehen. */
.section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.section-header-actions .section-add-btn {
    margin-left: 0;
}

.switch-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.section-add-btn {
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    transition: background-color var(--transition);
}

.section-add-btn:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft));
}

.section-add-btn .icon {
    color: var(--accent);
}

.domain-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Server-Dashboard auf der Startseite: Kennzahlen-Kacheln in einem Raster mit fester statt
   fliessender Spaltenzahl je Breakpoint (bewusst KEIN auto-fit mehr - das liess je nach
   verfuegbarer Breite beliebige Zwischenwerte wie 5 oder 4 Spalten zu, wodurch einzelne
   Kacheln vereinzelt in eine neue Zeile "gefallen" sind, statt sauber zwischen zwei festen
   Layouts umzuspringen). Drei feste Stufen: 6 Spalten (1 Zeile) breit, 3 Spalten (2 Zeilen)
   ab diesem Breakpoint, 2 Spalten (3 Zeilen) auf Mobile (Override existiert bereits weiter
   unten in der Datei) - jeder Wechsel ist ein harter Sprung zwischen zwei vollstaendigen
   Rasterformen, nie ein Zwischenschritt mit einzelnen verwaisten Elementen. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (max-width: 1180px) {
    .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Icon neben statt ueber der Zahl (eigene Zeile .stat-card-top), Label darunter - eine
   Zeile weniger als zuvor (Icon/Zahl/Label je eigene Zeile), macht die Kacheln spuerbar
   flacher/kompakter. */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.7rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-card-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-card-top .icon {
    width: 1.15rem;
    height: 1.15rem;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Breites Verlaufsdiagramm (Load, RAM - je eine eigene Karte statt kombiniert, siehe
   Kommentar in index.html): gleiche Kartenoptik wie .stat-card, aber volle Breite statt
   Raster-Zelle, mit Kopfzeile (Label links, aktueller Wert rechts) ueber der Grafik.
   Nutzt .tile-spark-area/.tile-spark-line fuer Flaeche/Linie weiter, "im Stil der
   User-Kacheln" wie gewuenscht - nur ohne deren Links-Ausblendung, da hier kein Text ueber
   der Grafik liegt. Hintergrund bewusst --bg statt --bg-elevated ("die diagramme weiss
   hinterlegen") - im Light Mode reines Weiss, im Dark Mode die (dunkle) Seiten-Grundfarbe
   statt der sonst fuer Karten ueblichen leicht angehobenen Flaeche. */
/* Raster statt reinem Untereinander-Stapel: bei genug Breite stehen die Diagramme
   nebeneinander (2-3 je Zeile), auf Mobile faellt es von selbst auf 1 Spalte (analog zu
   .stat-grid/.news-grid) - drei volle Stapel-Karten untereinander waeren zu hoch. */
.wide-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.wide-chart {
    padding: 0.9rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wide-chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.6rem;
}

.wide-chart-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.wide-chart-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.wide-chart-svg {
    display: block;
    width: 100%;
    height: 70px;
}

.wide-chart-grid {
    stroke: var(--border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Zeitachsen-Beschriftung unter der Grafik, damit sich Ausschlaege zeitlich einordnen
   lassen - reiner Text, keine Tick-Striche (die Gitterlinien im Diagramm selbst reichen
   als visuelle Referenz). */
.wide-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* "Was gibt es Neues?"-Feed als vertikale Timeline statt Karten-Raster: eine
   durchgehende Linie (::before, an der Mitte der Marker-Kreise ausgerichtet) verbindet
   alle Eintraege, Icon-Kreis links pro Eintrag, Text rechts daneben. Bewusst links-
   buendig statt mittig/zickzack (waere bei variabler Text-/Titel-Laenge pro Zeile deutlich
   fragiler und haette responsive/Mobile zusaetzliche Sonderfaelle gebraucht). */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* left = Breite der Datums-Spalte + Abstand + halbe Marker-Breite, damit die Linie exakt
   durch die Mitte der Marker-Kreise laeuft (4.4rem + 0.85rem + 1.1rem). Bei Aenderung an
   .timeline-date-col/.timeline-item-Abstand/.timeline-marker-Breite muss dieser Wert
   mit angepasst werden. */
.timeline::before {
    content: "";
    position: absolute;
    left: 6.35rem;
    top: 1.1rem;
    bottom: 1.1rem;
    width: 1px;
    background: var(--border);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Datums-Spalte links von der Timeline, ueber alle Zeilen gleich breit (Monospace +
   feste Breite + numerisches statt ausgeschriebenes Format, siehe formatDateShort()) -
   dadurch stehen die Daten sauber untereinander statt je nach Wochentagslaenge zu
   springen. Nur Datum, keine Uhrzeit (siehe Kommentar in index.html). */
.timeline-date-col {
    flex-shrink: 0;
    width: 4.4rem;
    padding-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
}

/* Marker-Kreis: Icon-Platzhalter liegt IMMER darunter, das <img> liegt per
   position:absolute darueber - schlaegt das Laden fehl (siehe @error in index.html, noch
   kein Foto fuer den Typ unter assets/news/ vorhanden), wird nur das <img> ausgeblendet
   und der Icon-Platzhalter bleibt sichtbar, statt eines kaputten Bild-Symbols. z-index
   haelt den Marker ueber der Verbindungslinie aus .timeline::before. */
.timeline-marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-marker-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--accent);
}

.timeline-marker img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Keine eigene Ueberschrift mehr - der Kurztext traegt jetzt die Hauptaussage der Zeile
   (schwarz/textfarben statt gedaempft, groesser, aber bewusst nicht fett - reine
   Textfarben-/Groessen-Betonung statt Gewicht). */
.timeline-text {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text);
}

.timeline-name {
    font-weight: 700;
}

.timeline-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.9rem;
}

.timeline-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.timeline-link:hover {
    text-decoration: underline;
}

.timeline-item:hover .timeline-text {
    color: var(--accent);
}

/* Feste Spalten statt frei fliessender Badges - jede Zeile hat exakt dieselbe
   Breitenaufteilung, dadurch stehen SSL/Groesse/Modus bei jeder Domain an derselben
   Position untereinander statt je nach Textlaenge zu springen (weniger "unruhig").
   Gemeinsame Basis fuer alle Listenzeilen (Domains, Mail-Domains, Mail-Accounts) -
   nur grid-template-columns unterscheidet sich je Zeilentyp. */
.list-row {
    display: grid;
    align-items: center;
    column-gap: 0.85rem;
    width: 100%;
    text-align: left;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition);
}

.list-row:hover {
    border-color: var(--accent);
}

/* Gesperrt/suspendiert ist der seltene Ausnahmefall (in der Praxis laesst kaum jemand
   ein gesperrtes Objekt sichtbar im Panel stehen) - deshalb kein staendiger gruener
   Aktiv-Punkt mehr fuer den Normalfall, sondern nur im Ausnahmefall eine leicht
   abgeblendete Zeile/Kachel (kein Durchstreichen - Inhalt soll weiterhin gut lesbar
   bleiben). Gilt fuer alle .list-row-Varianten UND .account-tile gemeinsam, daher hier
   zentral statt pro Variante definiert. */
/* Opacity/grayscale bewusst auf den direkten Kindern statt auf .list-row/.account-tile
   selbst: opacity auf dem Element selbst mischt dessen eigenen Hintergrund
   (var(--bg-elevated), ein kuehler Blaugrauton) mit dem Seitenhintergrund dahinter -
   dadurch verschiebt sich der Hintergrund zu einem sichtbar ANDEREN Farbton statt nur
   heller/blasser zu wirken (der Seitenhintergrund ist reines Weiss ohne den Blaustich).
   Werden Filter/Opacity stattdessen auf die Kinder angewandt, bleibt der Zeilen-/
   Kachel-Hintergrund selbst unveraendert (exakt wie bei normalen Zeilen) und nur der
   Inhalt darueber wird abgeblendet. */
.list-row.is-suspended > *,
.account-tile.is-suspended > * {
    opacity: 0.6;
    filter: grayscale(1);
}

/* Einheitliches 4-Spalten-Raster ueber alle Listenzeilen mit Groessenangabe (Domains,
   Mail-Domains, Datenbanken) - Titel | Info (IP/Kontenzahl/Typ) | Groesse (Balken+Wert
   als ein Element) | Icon (Status bzw. Aufklappen). Gleiche Spaltenbreiten fuer alle drei,
   damit die Abschnitte auch untereinander auf der Seite vertikal fluchten. Datenbank-
   Zeilen haben aktuell kein Icon, behalten aber die vierte Spalte als reservierte
   Leerflaeche bei (kein zusaetzliches Markup noetig) - genau dafuer die gemeinsame Regel
   statt eigener Breite pro Zeilentyp. */
.domain-row,
.mail-domain-row,
.database-row {
    grid-template-columns: minmax(0, 1fr) 7.5rem 6.5rem 1.4rem;
}

.domain-name-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

/* Sans statt Serif: Serif war fuer alle fetten Titel (Domains/Mail-Domains/Datenbanken)
   letztlich nur ein Zwischenschritt weg von Mono - Sans passt besser zu den uebrigen
   fetten UI-Ueberschriften im Panel. Cronjob-Befehle bleiben serif (siehe
   .cron-row .domain-name unten) - dort passt Serif laut Nutzer gerade zum technischen
   Kontext (Shell-Befehle/Pfade). min-width:0 noetig, damit das Element in seinem
   Flex-Eltern (.domain-name-group) ueberhaupt schrumpfen und die Ellipsis greifen kann,
   jetzt wo ein zweites Kind (SSL-Icon) dazukommen kann. */
.domain-name {
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Eine Ebene "tiefer" als Domains (Mail-Accounts unter ihrer Domain, einzelne
   Cronjob-Befehle) - bewusst nicht fett, um die Hierarchie auch typografisch statt
   nur durch Einrueckung/Radius abzubilden. */
.mail-account-row .domain-name,
.cron-row .domain-name {
    font-weight: 400;
}

/* Einzige verbleibende Serif-Stelle im Panel: Cronjob-Befehlszeilen (siehe Kommentar bei
   .domain-name oben) - bewusst NICHT Teil der gemeinsamen Regel oben, gilt nur hier. */
.cron-row .domain-name {
    font-family: var(--font-serif);
}

/* Der Postfach-Name (vor dem @) ist der eigentlich identifizierende Teil und soll auf
   schmalen Bildschirmen nie abgeschnitten werden - anders als das generische .domain-name
   sonst nicht schrumpfen, stattdessen schrumpft/kuerzt bei Platzmangel die Domain danach
   (siehe .mail-account-domain). */
.mail-account-row .domain-name {
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
}

/* "@domain.tld" ist bei jedem Account derselben aufgeklappten Mail-Domain identisch
   (durch den Kontext bereits klar) - abgeblendet statt in voller Lesbarkeit, damit der
   eigentliche Postfach-Name davor staerker heraussticht. Schrumpft/kuerzt bei
   Platzmangel zuerst (siehe .mail-account-row .domain-name oben), statt umgekehrt. */
.mail-account-domain {
    font-family: var(--font);
    font-size: 0.92rem;
    color: var(--text);
    opacity: 0.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.domain-ip {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kein Icon mehr fuer den SSL-aktiv-Normalfall - heute betreibt man ohnehin praktisch
   nichts mehr ohne SSL, ein staendiges "OK"-Icon pro Zeile war reine Redundanz. Nur noch
   eine Warnung, wenn tatsaechlich KEIN SSL eingerichtet ist (x-show="!d.ssl" im Markup),
   entsprechend in --warning statt Akzentfarbe. Sitzt direkt hinter dem Titel in
   .domain-name-group (kein eigener Grid-Spalte mehr) - dadurch bleibt die Info/Groesse/
   Icon-Spaltenaufteilung fuer alle Zeilen gleich, unabhaengig davon ob SSL fehlt oder
   nicht. flex-shrink:0 haelt das Icon in fester Groesse, waehrend .domain-name daneben
   bei Platzmangel per Ellipsis kuerzt. */
.domain-ssl-icon {
    flex-shrink: 0;
    color: var(--warning);
}

/* Zeilentyp-Icon (Weltkugel/Umschlag/Datenbank/Uhr, dieselben wie die jeweiligen
   Abschnitts-Header) links vor dem Titel jeder einzelnen Zeile - reiner Scan-Anker ohne
   eigene Bedeutung, deshalb bewusst gedaempft (--text-muted) statt Akzentfarbe: bei vielen
   gleichfoermigen Zeilen (z.B. sechs Datenbanken) soll das Auge schneller den Zeilentyp
   erfassen koennen, ohne dass die Akzentfarbe durch Wiederholung an Wirkung verliert. */
.row-type-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.disk-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.disk-bar {
    display: block;
    flex: 1;
    min-width: 0;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.disk-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
}

/* Feste Breite + rechtsbuendig statt nur flex-shrink:0: sonst nimmt sich der Balken
   (flex:1) bei kurzem Text (z.B. "5 MB") mehr Platz als bei langem ("17.5 GB") - Balken
   wirkten dadurch je Zeile unterschiedlich lang statt eine einheitliche Breite/Skala zu
   teilen, und die Zahlen standen nicht in einer Spalte. */
.disk-value {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    width: 3rem;
    text-align: right;
}

/* Modus-Icon (Online/Weiterleitung/Offline) einheitlich in Akzentfarbe (siehe .icon) -
   Bedeutung kommt ueber die Icon-Form selbst plus title-Tooltip, nicht ueber Farbe. */
.domain-mode-icon {
    justify-self: center;
}

/* Mail-Domain-Zeile: Kontenzahl statt IP/SSL, Chevron statt Modus-Icon (klappt die
   zugehoerigen Accounts auf statt ein Bearbeiten-Modal zu oeffnen). */
.mail-account-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Kleiner, inline neben einem Titel sitzender Icon-Button (z.B. Mail-Domain-Edit-
   Zugang in .domain-name-group) - eigene, transparente Buttonflaeche statt eines
   reinen <svg>, damit @click.stop sauber funktioniert und ein eigenes Hover
   moeglich ist, ohne die umgebende Zeile mitzufaerben. Bewusst <span role="button">
   im Markup statt <button>: sitzt innerhalb einer Zeile, die selbst schon ein
   <button class="list-row"> ist - ein <button> im <button> ist ungueltiges HTML,
   der Browser bricht das Element dann mitten in der Zeile auf (brach den kompletten
   Mail-Domain-Zeilenaufbau, bevor das hier gefunden wurde). Deshalb kein
   automatisches cursor:pointer/appearance-Reset vom globalen `button, select`-Block
   - beides hier explizit nachgezogen. */
.icon-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);
}

.icon-inline-btn:hover {
    color: var(--accent);
}

.icon-inline-btn .icon {
    color: inherit;
}

.mail-expand-icon {
    justify-self: center;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.mail-expand-icon.is-open {
    transform: rotate(180deg);
}

/* Aufgeklappte Accounts einer Mail-Domain: eingerueckt, kompaktere Zeilen als die
   Domain-Ebene (hardcoded kleinerer Radius statt --radius, gleiche Konvention wie bei
   Buttons/Inputs - eine Werkzeug-Ebene "tiefer" als die Kartenebene). */
/* padding-top statt margin-top: x-collapse (siehe index.html) animiert Hoehe/Padding,
   aber keine Margin - sonst wuerde der obere Abstand ohne Uebergang "springen", bevor
   die eigentliche Hoehen-Animation beginnt. */
.mail-account-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0 1.5rem;
    padding: 0.4rem 0 0 0.75rem;
    border-left: 2px solid var(--border);
}

/* Von Schaltern eingeblendete Zusatzfelder (z.B. Passwortschutz/FTP/Docker im
   Domain-Modal) - gleiches "eingerueckt mit Trennlinie"-Muster wie .mail-account-list
   oben, nur schmaler eingerueckt (die Felder gehoeren zu genau einem Schalter direkt
   darueber, nicht zu einer ganzen Zeilen-Liste). Anders als .mail-account-list bewusst
   OHNE x-collapse in index.html (siehe Kommentar dort) - innerhalb eines Modals
   animiert nur die .modal-box selbst ihre Hoehe. */
.field-reveal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0 0.2rem;
    padding: 0.5rem 0 0.75rem 0.75rem;
    border-left: 2px solid var(--border);
}

.mail-account-row {
    grid-template-columns: minmax(0, 1fr) 6.5rem 1.4rem;
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
}

.mail-fwd-icon {
    justify-self: center;
    color: var(--accent);
}

.mail-add-account-btn {
    align-self: flex-start;
    background: transparent;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.2rem;
}

/* Cronjob-Zeile: nur Befehl + zugaengliche Zeitplan-Beschreibung, keine weiteren
   Spalten noetig (kein SSL/Groesse/Modus wie bei Domains). Zeitplan-Spalte bewusst
   max-content statt einer festen Breite (die musste fuer den laengsten moeglichen Text,
   "Monatlich am 31. um 23:59", bemessen sein und war dadurch fuer die meisten kuerzeren
   Zeitplaene, z.B. "Alle 15 Minuten", unnoetig breit - der Befehl truncatete dadurch viel
   frueher als noetig). Da die Spalte rechtsbuendig UND die letzte Spalte der Zeile ist,
   bleibt ihr rechter Rand trotzdem an derselben Position wie bei anderen Zeilen, nur die
   tatsaechlich genutzte Breite variiert je Zeile mit der Textlaenge. */
.cron-row {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.cron-schedule {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* mysql/pgsql ist rein informativ (keine gut/schlecht-Wertung wie SSL) - deshalb immer
   sichtbar statt nur im Ausnahmefall. Kein justify-self mehr - links ausgerichtet wie
   .domain-ip/.mail-account-count, damit die Info-Spalte ueber alle Zeilentypen hinweg
   gleich ausgerichtet ist. */
.database-type {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Flacher Toggle-Switch, wiederverwendbar fuer jeden zukuenftigen globalen Schalter
   (z.B. Backups-Benachrichtigungen). */
.switch {
    flex-shrink: 0;
    width: 2.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: var(--border);
    position: relative;
    transition: background-color var(--transition);
}

.switch.is-on {
    background: var(--accent);
}

.switch-thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--bg);
    transform: translateY(-50%);
    transition: transform var(--transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Reisedistanz exakt errechnet statt geschaetztem 1rem: Track (2.4rem) minus Thumb
   (1rem) minus 2x Rand (2px links + 2px rechts) = 1.15rem - vorher blieb der Thumb im
   "an"-Zustand sichtbar naeher an der Mitte als im "aus"-Zustand am linken Rand
   (4.4px statt 2px Abstand zum Rand), wirkte dadurch horizontal nicht mittig genug. */
.switch.is-on .switch-thumb {
    transform: translateY(-50%) translateX(1.15rem);
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    color: var(--text-muted);
}

.empty-state p {
    margin: 0 0 0.9rem;
}

/* Live-Vorschau der automatisch abgeleiteten Werte im WordPress-Assistenten (Benutzer-
   name, Datenbank) - gleiche flache Flaeche wie .empty-state, aber linksbuendig und als
   Zeilenliste statt Fliesstext. Technische Werte in Mono, gleiche Konvention wie ueberall. */
.wp-wizard-preview {
    padding: 0.9rem 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.wp-wizard-preview div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.wp-wizard-preview strong {
    font-weight: 600;
    color: var(--text);
}

/* Fortschritts-Simulation im WordPress-Assistenten (Schritt 2): eine Zeile je
   Befehlsschritt aus der Plan-Befehlskette, mit Status pending/active/done/error. */
.wizard-steps {
    margin-bottom: 0.5rem;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: color var(--transition);
}

.wizard-step.is-done,
.wizard-step.is-active {
    color: var(--text);
}

.wizard-step.is-active {
    font-weight: 600;
}

.wizard-step.is-error {
    color: var(--danger);
    font-weight: 600;
}

.wizard-step-icon {
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wizard-step-icon .icon {
    color: var(--success);
}

.wizard-step-icon .icon.is-error-icon {
    color: var(--danger);
}

.wizard-step-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--border);
}

/* Reiner CSS-Spinner statt SVG-Icon-Animation - dreht sich, solange der Schritt aktiv
   simuliert wird. */
.wizard-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: wizard-spin 0.7s linear infinite;
}

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

.wizard-step-error {
    margin: -0.2rem 0 0.5rem 1.85rem;
    font-size: 0.78rem;
    color: var(--danger);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: var(--success-soft);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
}

/* Fuer Zustaende ohne eigene Signalfarbe (z.B. Domain-Modus "Normal"/"Weiterleitung") -
   gleiches Chip-Gewicht wie die anderen Badges, aber neutral statt semantisch gefaerbt. */
/* Normal/Weiterleitung/Offline - Segmented Control fuer den Domain-Modus im
   Bearbeiten-Modal. Border-right pro Button statt Gaps, damit die Trennlinien
   wie ein durchgehender Rahmen wirken. */
.mode-switch {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.mode-switch button {
    flex: 1;
    /* Ohne das hier ueberschreibt der laengste Text (Weiterleitung) die implizite
       min-width:auto von Flex-Kindern und wird trotz flex:1 breiter als die anderen
       beiden - klassische Flexbox-Falle bei ungleich langen Button-Beschriftungen. */
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--bg);
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    transition: background-color var(--transition), color var(--transition);
}

.mode-switch button:last-child {
    border-right: none;
}

.mode-switch button.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Zwei nebeneinander stehende Felder (z.B. Wochentag+Uhrzeit im Cronjob-Modal) - als
   Klasse statt Inline-`display:flex`, weil Alpines `x-show` (ohne x-transition/
   x-collapse) beim Wiedereinblenden `style.display` komplett zuruecksetzt und dabei ein
   inline gesetztes `display:flex` mit loescht, nicht nur ein zuvor selbst gesetztes
   `display:none` entfernt - nach dem ersten Aus-/Einblenden fielen die Felder dadurch
   untereinander statt nebeneinander. Als Klasse in der Stylesheet-Kaskade uebersteht das
   Zuruecksetzen des Inline-Styles unbeschadet. */
.form-row {
    display: flex;
    gap: 0.6rem;
}

/* Label-links/Kontrolle-rechts-Zeile (Schiebeschalter, Modus-Auswahl) - selber Grund
   wie bei .form-row: bewusst als Klasse statt Inline-`display:flex`, weil dasselbe
   Alpine-x-show-Verhalten sonst nach dem ersten Aus-/Einblenden das inline gesetzte
   `display:flex` mitloescht (kam hier ebenfalls vor - Label und Schalter fielen
   uebereinander statt nebeneinander zu stehen, obwohl das Markup korrekt war). */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Formularelemente durchgestylt statt native Browser-Optik (fuer das "Neuer User"-Modal) */
.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    display: block;
}

.styled-input,
.styled-select {
    width: 100%;
    /* --bg-elevated statt --bg: die Modal-Box ist selbst --bg (weiss in Light) - ohne
       eigenen Ton verschwimmen Felder mit dem Hintergrund und wirken "nicht eingefaerbt". */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    color: var(--text);
    font-size: 0.9rem;
}

/* Mono weitgehend aus dem Panel entfernt (Nutzerentscheidung) - Eingabefeld-Inhalt
   jetzt in Serif statt Mono, passend zur Cronjob-Zeile (einzige verbleibende
   Serif-Stelle vorher, siehe .cron-row .domain-name) statt einer dritten,
   inkonsistenten Textrolle. */
.styled-input {
    font-family: var(--font-serif);
}

.styled-input:focus,
.styled-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Glass-Overlay-Muster: color-mix()-Transluzenz + Blur statt fester rgba-Abdunkelung -
   funktioniert automatisch in Light und Dark ueber --glass-bg. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

/* Nur die Box selbst animiert ihre Hoehe, wenn sich der Inhalt aendert (z.B.
   Haeufigkeit-Picker bei Cronjobs, WordPress-Wizard-Schrittwechsel) - Inhalte darin
   (Felder, Footer-Buttons) erscheinen/verschwinden dafuer bewusst ohne eigene
   Collapse-/Fade-Animation (kein x-collapse mehr auf einzelnen Elementen), damit nicht
   mehrere Teile gleichzeitig und unabhaengig voneinander animieren. height:auto +
   interpolate-size (siehe [x-cloak]-Regel oben) macht diese Transition erst moeglich. */
.modal-box {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 1.4rem;
    width: 100%;
    /* War 420px - wirkte wie eine mobil gedachte Kartenbreite, obwohl Mobile laengst
       eine eigene Vollbild-Regel hat (siehe @media max-width:768px unten) und davon gar
       nicht betroffen ist. Etwas mehr Luft fuer Desktop/Tablet, u.a. fuer Mehrfeld-Zeilen
       wie den neuen FTP-Block im Domain-Modal. */
    max-width: 480px;
    height: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    /* Eigener, langsamerer Wert statt --transition (0.18s) - eine Hoehenaenderung des
       gesamten Modal-Inhalts (z.B. beim Ein-/Ausblenden der Passwortschutz/FTP/Docker-
       Felder) braucht mehr Zeit als ein kurzer Farb-/Fokus-Wechsel, sonst wirkt es
       trotz Animation noch abrupt. */
    transition: height 0.32s ease;
}

/* Schwebender Menue-Button: nur auf Mobile, ersetzt eine volle Kopfzeile ueber dem
   Content - der Content soll bis auf diesen einen kleinen Button frei/luftig bleiben.
   Desktop braucht ihn nicht, die Sidebar ist dort immer offen. Unten rechts als
   klassischer Floating Action Button, nicht oben links im Weg der Kopfzeile/des Titels. */
.mobile-menu-fab {
    display: none;
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    width: 3.2rem;
    height: 3.2rem;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    font-size: 1.25rem;
    z-index: 40;
}

/* Gleiche Masken-Technik wie .brand-mark (siehe dort) - Form aus assets/logo.svg, Farbe
   ueber background-color statt Inline-SVG-Fill. Kontrastfarbe statt Akzentfarbe, weil der
   FAB selbst schon akzentfarben gefuellt ist (sonst waere das Logo unsichtbar). */
.mobile-menu-fab-logo {
    width: 1.5rem;
    aspect-ratio: 90.613693 / 109.44713;
    background-color: var(--accent-contrast);
    -webkit-mask-image: url("../assets/logo.svg?v=3");
    mask-image: url("../assets/logo.svg?v=3");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.close-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 2.2rem;
    height: 2.2rem;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--text);
    flex-shrink: 0;
}

/* opacity+pointer-events statt display:none/block: display kann nicht animiert werden
   (springt hart von 0 auf 1), dadurch blendete der Blur-Hintergrund bisher abrupt ein
   statt weich. pointer-events:none haelt das unsichtbare Backdrop bei geschlossener
   Sidebar aus dem Klickweg, genau wie display:none es vorher tat. */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    /* Verhindert, dass die Seite dahinter noch scrollt, waehrend die Off-Canvas-Sidebar
       offen ist (per x-effect auf sidebarOpen umgeschaltet, siehe .app-shell) - sonst
       liess sich der Hintergrund durch das Backdrop hindurch weiterscrollen. */
    html.sidebar-locked,
    body.sidebar-locked {
        overflow: hidden;
    }

    .mobile-menu-fab {
        display: flex;
    }

    .close-btn {
        display: inline-flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        /* Ueberschreibt das height:100vh der Basis-Regel (die sonst per CSS-
           Ueberbestimmung gegenueber "bottom" gewinnt) - 100vh zaehlt auf vielen Mobil-
           Browsern die Flaeche hinter der (ein-/ausblendbaren) Adressleiste mit, wodurch
           die Sidebar hoeher als der sichtbare Bereich wird und die Fusszeile ausserhalb
           des sichtbaren Viewports landet. "auto" mit top+bottom passt sich dagegen
           dynamisch an die tatsaechlich sichtbare Hoehe an. */
        height: auto;
        width: 82vw;
        max-width: 320px;
        transform: translateX(-100%);
        /* Bewusst eigener, etwas laengerer Wert statt --transition: eine ganze
           Panel-Bewegung braucht mehr Zeit als ein kurzer Farb-/Fokus-Wechsel. */
        transition: transform 0.25s ease;
        z-index: 50;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .main-content {
        padding: 1.2rem 1.2rem 5.5rem;
        max-width: 100%;
    }

    /* Nie weniger als 2 Spalten, auch auf schmalen Mobilgeraeten - im Gegensatz zu den
       uebrigen Mobile-Grids (.news-grid/.wide-charts), die bewusst auf 1 Spalte fallen
       duerfen, weil sie Karten mit Fliesstext/Diagrammen enthalten. Die Stat-Kacheln
       sind dagegen kurz und kompakt (Zahl+Label) und wirken einspaltig zu "aufgeblasen"/
       luftig statt eine kompakte Uebersicht zu bleiben. */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Info-Spalte (IP/Kontenzahl/Typ) auf Mobile weglassen statt zu quetschen - Titel/
       Groesse/Icon bleiben, die Info steht beim Antippen ohnehin im Bearbeiten-Modal
       bzw. (Mail-Domains) als Zeilenzahl beim Aufklappen. Einheitliche 3-Spalten-Breite
       fuer alle vier Zeilentypen, aus demselben Grund wie auf Desktop (siehe die
       gemeinsame Regel dort) - Datenbank-Zeilen behalten die dritte Spalte als
       reservierte Leerflaeche, obwohl sie kein Icon haben. */
    .domain-row,
    .mail-domain-row,
    .mail-account-row,
    .database-row {
        grid-template-columns: minmax(0, 1fr) 5.5rem 1.4rem;
    }

    .domain-ip,
    .mail-account-count,
    .database-type {
        display: none;
    }

    /* Modal stoesst auf Mobile (durch width:100% ohne Backdrop-Padding) ohnehin schon
       links/rechts an - dann konsequent ganz fullscreen statt einer schwebenden Karte
       mit Luft oben/unten. .modal-backdrop zentriert nicht mehr, .modal-box fuellt die
       komplette (per position:fixed + inset:0 tatsaechlich sichtbare) Flaeche und scrollt
       selbst, falls der Inhalt nicht passt. */
    .modal-backdrop {
        align-items: stretch;
        justify-content: stretch;
    }

    .modal-box {
        max-width: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        overflow-y: auto;
        box-shadow: none;
    }
}