/**
 * T26 Genesis Toolbar - Frontend CSS (Bulletproof Layout)
 */
/* ==========================================================
   GLOBALE SCROLLBAR-ANPASSUNG (Für alle Themes & Dark-Mode)
   ========================================================== */

/* Firefox Support (Die neuen Standards) */
html {
    scrollbar-color: var(--t26-primary-base, #1a66ff) var(--t26-bg-surface, #f8fafc);
    scrollbar-width: thin;
}

/* Chrome, Edge, Safari (Webkit) */
::-webkit-scrollbar {
    width: 14px; /* Breite der Scrollbar */
}

/* Der Hintergrund der Scrollbar (Schiene) */
::-webkit-scrollbar-track {
    background: var(--t26-bg-surface, #f8fafc);
}

/* Der eigentliche Anfasser (Daumen) */
::-webkit-scrollbar-thumb {
    background-color: var(--t26-primary-base, #1a66ff);
    border-radius: 10px; /* Schöne runde Ecken */
    border: 3px solid var(--t26-bg-surface, #f8fafc); /* Erzeugt einen edlen "Freischwebe"-Effekt */
}

/* Hover-Effekt für den Anfasser */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--t26-text-main, #333);
}
.t26-core-frontend-wrapper { display: block; width: 100%; }
body { padding-top: 50px; }

/* ==========================================================
   T26 Toolbar - Hauptcontainer
   ========================================================== */
.t26-frontend-toolbar {
    position: fixed; top: 0; left: 0; right: 0; height: 50px;

    /* Hintergrund & Rahmen-Variable */
    background-color: var(--t26-bg-surface, #ffffff);
    border-bottom: 3px solid var(--t26-primary-base, #007bff);
    color: var(--t26-text-main, #333333);

    z-index: 999999;
    display: flex; justify-content: space-between; align-items: center;
    font-family: system-ui, -apple-system, sans-serif;
    padding: 0 20px; box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ==========================================================
   Flexbox-Zonen (Verhindern das Quetschen!)
   ========================================================== */
.t26-tb-left {
    display: flex; align-items: center; gap: 15px;
    flex: 0 0 auto; /* Keine automatische Größenänderung */
}

.t26-tb-center {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0 20px; /* Saubere Abstände nach links und rechts */
}

.t26-tb-right {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    flex: 0 0 auto; /* Verhindert das Quetschen der rechten Tools! */
}

/* ==========================================================
   Dropdowns
   ========================================================== */
.t26-domain-select,
.t26-theme-select {
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;

    /* Farbe erbt von der Toolbar, damit es immer passt */
    background: var(--t26-bg-surface, #f9f9f9);
    color: var(--t26-text-main, #333333);
    border: 1px solid var(--t26-text-main, #cccccc);

    transition: all 0.3s ease;
    max-width: 180px; /* Damit lange Namen das Layout nicht sprengen */
}

.t26-domain-select:hover,
.t26-domain-select:focus,
.t26-theme-select:hover,
.t26-theme-select:focus {
    border-color: var(--t26-primary-base, #007bff);
    outline: none;
}

/* ==========================================================
   Platzhalter-Boxen (Absolut festgenagelt)
   ========================================================== */
.t26-placeholder-box {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    border: 2px dashed var(--t26-primary-base, #94a3b8) !important;
    border-radius: 4px !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    opacity: 0.8 !important;
}

/* ==========================================================
   Frontend Toolbar: Laufschrift (Ticker) Animation & Styling
   ========================================================== */

/* Der äußere Container (versteckt alles, was über den Rand ragt) */
.t26-frontend-toolbar .t26-ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 8px; /* Schöne runde Ecken! */
    padding: 4px 0; /* Etwas Luft oben und unten */
    display: flex;
    align-items: center;

    /* Nimmt die Ticker-Farbe. Wenn nicht da (z.B. Core-Theme), nimmt er die Primärfarbe */
    background-color: var(--t26-ticker-bg, var(--t26-primary-base, #0a1128));
}

/* Der eigentliche Text, der animiert wird */
.t26-frontend-toolbar .t26-ticker-text {
    display: inline-block;
    padding-left: 100%; /* Startet komplett unsichtbar am rechten Rand */
    font-size: 14px;

    /* Nimmt die Ticker-Schriftfarbe. Wenn nicht da, nimmt er invertierten Text */
    color: var(--t26-ticker-text, var(--t26-text-invert, #ffffff));

    /* Animation verknüpft mit deinem Speed-Slider aus dem Backend! */
    animation: t26-ticker linear infinite;
    animation-duration: var(--t26-ticker-speed, 50s);
}

/* Links innerhalb des Tickers anpassen (falls jemand einen HTML Link setzt) */
.t26-frontend-toolbar .t26-ticker-text a {
    color: inherit;
    text-decoration: underline;
    font-weight: bold;
}

/* UX-Bonus: Hover to Pause! */
.t26-frontend-toolbar .t26-ticker-wrap:hover .t26-ticker-text {
    animation-play-state: paused;
}

/* Die Keyframes, die den Text von rechts nach links schieben */
@keyframes t26-ticker {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
/* ==========================================================
   Frontend Toolbar: Dropdowns (Domain & Theme) abrunden
   ========================================================== */
.t26-frontend-toolbar .t26-domain-select,
.t26-frontend-toolbar .t26-theme-select {
    border-radius: 8px !important; /* 8px für weiche Kanten, 50px für "Pillenform" */
    border: 1px solid var(--t26-border-color, rgba(255,255,255,0.2));
    padding: 6px 30px 6px 15px; /* Platz für den Pfeil lassen */
    outline: none;
    /* Optional: Pfeil aufhübschen */
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* ==========================================================
   Frontend Toolbar: Layout-Struktur (Verhindert Platzraub)
   ========================================================== */
.t26-frontend-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* Ein bisschen Sicherheitsabstand zwischen den Bereichen */
}

/* Linke Seite (Domain-Dropdown) */
.t26-frontend-toolbar .t26-tb-left {
    flex: 1; /* Reserviert fest 1 Teil des Platzes */
    display: flex;
    justify-content: flex-start;
}

/* Mitte (Ticker) */
.t26-frontend-toolbar .t26-tb-center {
    flex: 2; /* Kriegt genau den doppelten Platz für die Laufschrift */
    min-width: 0; /* WICHTIG: Verhindert, dass der Ticker das Layout sprengt, wenn er zu lang ist! */
}

/* Rechte Seite (Theme-Switch, A11Y, Darkmode) */
.t26-frontend-toolbar .t26-tb-right {
    flex: 1; /* Symmetrisches Gegengewicht zur linken Seite (auch 1 Teil) */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px; /* Schöner Abstand zwischen den Buttons/Dropdowns */
}