/*
 * REXAGO 360 – Markenfarben (dezente Anpassung des Tabler-Themes).
 * Quelle: shop.rexago.de / rexago.com
 *   Primärrot  #b70e0c   (Buttons, Links, aktive Navigation, Akzente)
 *   Gold       #cba241   (sparsamer Zweitakzent)
 *
 * Bewusst minimal: es wird nur die Tabler-Primärfarbe umdefiniert. Alle neutralen
 * Flächen (Karten, Text, Hintergründe) bleiben Tabler-Standard -> Dark-Mode bleibt
 * vollständig funktionsfähig (die Variablen greifen in Light und Dark).
 */

:root {
    --tblr-primary: #b70e0c;
    --tblr-primary-rgb: 183, 14, 12;

    /* Zweitakzent (frei nutzbar via .text-rexago-gold / .bg-rexago-gold) */
    --rexago-gold: #cba241;
    --rexago-gold-rgb: 203, 162, 65;
}

/* Im Dunkelmodus ein leicht helleres Rot für bessere Lesbarkeit auf dunklem Grund. */
[data-bs-theme="dark"] {
    --tblr-primary: #e11d1a;
    --tblr-primary-rgb: 225, 29, 26;
}

/* Gold-Akzent-Utilities (analog zu Tablers Farb-Utilities inkl. -lt-Tönung). */
.text-rexago-gold  { color: var(--rexago-gold) !important; }
.bg-rexago-gold    { background-color: var(--rexago-gold) !important; color: #fff !important; }
.bg-rexago-gold-lt { background-color: rgba(var(--rexago-gold-rgb), .14) !important; color: #9c7a22 !important; }
[data-bs-theme="dark"] .bg-rexago-gold-lt { color: var(--rexago-gold) !important; }

/* =========================================================================
 * Moderne Sidebar: helle, ruhige Fläche mit weicher, abgerundeter Aktiv-„Pille".
 * Nur scrollen wenn nötig (sonst überdeckt die Dauer-Scrollleiste den Rand).
 * ========================================================================= */
.navbar-vertical.navbar-expand-lg { overflow-y: auto; }

/* Hintergrund je Theme */
html:not([data-bs-theme="dark"]) .navbar-vertical {
    background-color: #ffffff;
    border-right: 1px solid rgba(0, 0, 0, .06);
}

/* Etwas Luft + abgerundete Einträge */
.navbar-vertical .navbar-nav { gap: 3px; padding-top: .25rem; }
.navbar-vertical .navbar-nav .nav-item { margin-inline: .5rem; }
.navbar-vertical .nav-link {
    min-width: 0;
    border-radius: 10px;
    padding: .55rem .7rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-vertical .nav-link-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tablers Standard-Aktiv-Markierung (linker Balken) aus – wir nutzen die Pille */
.navbar-vertical .navbar-nav > .nav-item.active::after,
.navbar-vertical .navbar-nav > .nav-item > .nav-link::after { display: none !important; }

/* Hover + Aktiv (Marken-Rot, funktioniert in beiden Themes via Primary-RGB) */
.navbar-vertical .nav-link:hover {
    background-color: rgba(var(--tblr-primary-rgb), .08);
    color: var(--tblr-primary);
}
.navbar-vertical .nav-item.active > .nav-link {
    background-color: rgba(var(--tblr-primary-rgb), .12);
    color: var(--tblr-primary);
    font-weight: 600;
}
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon { color: var(--tblr-primary); }

/* „Bald verfügbar" dezent ausgrauen statt wiederholtem Badge-Text */
.navbar-vertical .nav-link.is-soon { opacity: .4; }
.navbar-vertical .nav-link.is-soon:hover { background-color: transparent; color: inherit; opacity: .55; cursor: default; }

/* Logo-Umschaltung wasserdicht: farbig im Hell-, weiß im Dunkelmodus (auch ohne gesetztes Theme-Attribut). */
html:not([data-bs-theme="dark"]) .navbar-brand .hide-theme-light { display: none !important; }
html[data-bs-theme="dark"] .navbar-brand .hide-theme-dark { display: none !important; }

/* =========================================================================
 * Karten: etwas mehr Rundung + zarter Schatten -> „fresh"/modern.
 * ========================================================================= */
.card {
    border-radius: 14px;
    border-color: rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .03);
}
[data-bs-theme="dark"] .card {
    box-shadow: none;
    border-color: rgba(255, 255, 255, .07);
}

/* =========================================================================
 * Empfang als „Widget": liegt frei auf der Fläche (keine Karte), füllt die
 * Höhe, große fette Typo, Name im Marken-Verlauf (Rot -> Gold), Wochen-Streifen
 * mit hervorgehobenem Heute und prominenter Live-Uhr. Power, aber professionell.
 * ========================================================================= */
.welcome-hero { padding: .5rem .25rem .5rem .25rem; min-height: 220px; }
.welcome-time {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600;
    color: var(--tblr-secondary);
}
.welcome-greeting {
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    margin: .35rem 0 .3rem;
}
.welcome-name {
    background: linear-gradient(95deg, var(--tblr-primary), var(--rexago-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.welcome-sub {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--tblr-secondary);
}

/* Fußzeile des Widgets: Wochen-Streifen links, große Uhr rechts */
.welcome-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}
.week-strip { display: flex; gap: .4rem; }
.week-day {
    display: flex; flex-direction: column; align-items: center;
    width: 2.6rem; padding: .4rem 0;
    border-radius: 14px;
    transition: background-color .15s ease;
}
.week-day-name { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tblr-secondary); }
.week-day-num  { font-size: 1.05rem; font-weight: 700; margin-top: .1rem; }
.week-day.is-today {
    background: linear-gradient(160deg, var(--tblr-primary), #8f0a08);
    box-shadow: 0 6px 16px rgba(var(--tblr-primary-rgb), .35);
}
.week-day.is-today .week-day-name,
.week-day.is-today .week-day-num { color: #fff; }

.welcome-clock {
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* =========================================================================
 * Video-Bibliothek (Modul videos)
 * ========================================================================= */
.cursor-pointer { cursor: pointer; }
.video-card { transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; }
.video-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #2a2f36, #11141a);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2.2rem; opacity: .85; transition: opacity .12s ease, transform .12s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.video-card:hover .video-play { opacity: 1; transform: scale(1.08); }
.video-state { position: absolute; top: .4rem; right: .4rem; }

/* =========================================================================
 * Download-Übersicht: Monats-Strip mit Mini-Balken (statt „weirdem" Chart).
 * ========================================================================= */
.dl-strip { display: flex; gap: .5rem; align-items: flex-end; }
.dl-cell {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.dl-bar-wrap { height: 120px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dl-bar {
    width: 60%; max-width: 26px; min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: rgba(var(--tblr-primary-rgb), .30);
    transition: height .3s ease;
}
.dl-cell.is-current .dl-bar { background: var(--tblr-primary); }
.dl-value { font-size: .72rem; font-weight: 600; margin-top: .4rem; white-space: nowrap; }
.dl-month { font-size: .68rem; color: var(--tblr-secondary); text-transform: uppercase; letter-spacing: .02em; }
.dl-cell.is-current .dl-value, .dl-cell.is-current .dl-month { color: var(--tblr-primary); }
@media (max-width: 768px) {
    .dl-strip { overflow-x: auto; padding-bottom: .25rem; }
    .dl-cell { min-width: 48px; }
}