/* Zentrale Projekt-Styles für Blade-Templates
   - Enthält minimale Styles, die zuvor im großen template.blade.php lagen
   - Nutzt CSS-Variablen, die von Themes (dark/light) überschrieben werden können
*/

:root {
  /* Fallback-Werte – Themes können diese überschreiben */
  --kw-body-bg: #0b0b0b;
  --kw-text: #ffffff;
  --kw-link: #9ecbff;
  --kw-link-hover: #cfe5ff;
  --kw-border: rgba(255, 255, 255, 0.08);
  --kw-border-strong: rgba(255, 255, 255, 0.12);
  --kw-box-bg: #151515;
  --kw-box-header-bg: #101010;

  --kw-input-bg: #111213;
  --kw-input-border: rgba(255, 255, 255, 0.16);
  --kw-input-focus-border: #66b2ff;
  --kw-input-placeholder: rgba(255, 255, 255, 0.7);
  --kw-input-color: var(--kw-text);
  --kw-input-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  /* Sonne / Deko */
  --kw-sun-core: #ffd76b;
  --kw-sun-mid: #ffb300;
  --kw-sun-hot: #ff8a00;

  /* Tabellen */
  --kw-table-head-bg: #101010;
  --kw-table-striped-bg: rgba(255, 255, 255, 0.02);
  --kw-table-hover-bg: rgba(255, 255, 255, 0.04);
  --kw-muted: #888888;

  /* Medien */
  --kw-globe-texture-url: url('/images/background/earth.jpg');

  /* Positions-/Größen-Variablen für Sonne & Globe (leicht justierbar) */
  --kw-sun-top: -120px;     /* Sonne: vertikale Position (px) */
  --kw-sun-left: -120px;    /* Sonne: horizontale Position (px) – oben links */
  --kw-sun-size: 300px;     /* Durchmesser der Sonne */
  --kw-sun-opacity: 1;      /* Undurchsichtig */

  --kw-globe-size: 520px;   /* Durchmesser der Erde */
  --kw-globe-opacity: 1;    /* Undurchsichtig */
  --kw-globe-rotation-duration: 120s; /* ggf. anpassen/pausieren */
  --kw-footer-height: 64px; /* Höhe des fixierten Footers */
  --kw-footer-bg: #0f0f10;
}

/* Grundlayout */
body.kw-body { background: var(--kw-body-bg); color: var(--kw-text); min-height: 100vh; display: flex; flex-direction: column; padding-bottom: var(--kw-footer-height); }
a, a:visited { color: var(--kw-link); }
a:hover, a:focus { color: var(--kw-link-hover); }

/* Vollhöhe Layout */
body.kw-body, html { min-height: 100%; }

.kw-container { max-width: 1800px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
/* Override Bootstrap .container limits when used together with .kw-container
   Wunsch: nahezu volle Breite auf großen Screens, aber leicht eingerückt */
.kw-container.container { max-width: 97vw !important; }

/* Boxen */
.kw-box { border: 1px solid var(--kw-border); border-radius: .5rem; overflow: hidden; background: var(--kw-box-bg); }
.kw-box-header { background: var(--kw-box-header-bg); border-bottom: 1px solid var(--kw-border-strong); padding: .75rem 1rem; }
.kw-box-body { padding: 1rem; }

/* Cards / Quiz-Admin Sidebar */
.kw-card { background: var(--kw-box-bg) !important; border: 1px solid var(--kw-border) !important; color: var(--kw-text) !important; }
.kw-card-header { background: var(--kw-box-header-bg) !important; border-bottom: 1px solid var(--kw-border-strong) !important; color: var(--kw-text) !important; }
.kw-card-header.bg-primary { background: var(--bs-primary, #0d6efd) !important; color: #fff !important; }
.kw-card-header.bg-success { background: var(--bs-success, #198754) !important; color: #fff !important; }
.kw-card-header.bg-danger { background: var(--bs-danger, #dc3545) !important; color: #fff !important; }
.kw-card-header.bg-warning { background: var(--bs-warning, #ffc107) !important; color: #000 !important; }
.kw-card-header.bg-info { background: var(--bs-info, #0dcaf0) !important; color: #000 !important; }
.kw-card-header.bg-secondary { background: var(--bs-secondary, #6c757d) !important; color: #fff !important; }
.kw-card-body { background: var(--kw-box-bg) !important; color: var(--kw-text) !important; }
.kw-card-footer { background: var(--kw-box-header-bg) !important; border-top: 1px solid var(--kw-border-strong) !important; color: var(--kw-muted) !important; }

.kw-list-group .list-group-item { background: transparent !important; color: var(--kw-text) !important; border-color: var(--kw-border) !important; }
.kw-list-group .list-group-item:hover { background: var(--kw-table-hover-bg) !important; color: var(--kw-link-hover) !important; }
.kw-list-group .list-group-item.active { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }

.kw-breadcrumb { background: var(--kw-box-header-bg) !important; border: 1px solid var(--kw-border) !important; color: var(--kw-text) !important; }
.kw-breadcrumb .breadcrumb-item, .kw-breadcrumb .breadcrumb-item a { color: var(--kw-link) !important; }
.kw-breadcrumb .breadcrumb-item.active { color: var(--kw-text) !important; }
.kw-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--kw-muted) !important; }

/* Stack-Abstände */
.kw-stack > * + * { margin-top: 1rem; }
.cursor-pointer { cursor: pointer; }

/* Formulare Dunkel */
label, .form-label, :not(.btn).small, :not(.btn)small { color: var(--kw-text) !important; opacity: 1; }
.form-text, .text-muted { color: var(--kw-muted) !important; opacity: 1; }
strong, b { color: var(--kw-text) !important; }
.form-control, .form-select, textarea, option,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"] {
  color: var(--kw-input-color) !important;
  background-color: var(--kw-input-bg) !important;
  border-color: var(--kw-input-border) !important;
}
.form-select:not(.kw-box) {
  background-image: var(--kw-input-icon) !important;
}
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--kw-input-placeholder); }
.form-control:focus, .form-select:focus {
  color: var(--kw-input-color) !important;
  border-color: var(--kw-input-focus-border) !important;
  box-shadow: none;
}
.input-group-text {
  background-color: var(--kw-box-header-bg) !important;
  color: var(--kw-text) !important;
  border-color: var(--kw-input-border) !important;
}

/* Tabellen innerhalb Boxen / Cards */
.kw-box .table,
.kw-card .table,
.kw-card-body .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--kw-text) !important;
  --bs-table-border-color: var(--kw-border) !important;
  --bs-table-striped-bg: var(--kw-table-striped-bg) !important;
  --bs-table-striped-color: var(--kw-text) !important;
  --bs-table-hover-bg: var(--kw-table-hover-bg) !important;
  --bs-table-hover-color: var(--kw-text) !important;
  color: var(--kw-text) !important;
}
.kw-box .table thead,
.kw-card .table thead {
  background-color: var(--kw-box-header-bg) !important;
}
.kw-box .table thead th,
.kw-card .table thead th {
  color: var(--kw-text) !important;
  background-color: var(--kw-box-header-bg) !important;
}
.kw-box .table td, .kw-box .table th,
.kw-card .table td, .kw-card .table th {
  color: var(--kw-text) !important;
  background-color: transparent !important;
}
.kw-box .table > :not(caption) > * > *,
.kw-card .table > :not(caption) > * > * {
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00) !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* Erzwinge helle Schrift auf gestreiften/hover Reihen */
.kw-box .table.table-striped > tbody > tr:nth-of-type(odd) > *,
.kw-card .table.table-striped > tbody > tr:nth-of-type(odd) > *,
.kw-box .table.table-hover > tbody > tr:hover > *,
.kw-card .table.table-hover > tbody > tr:hover > * {
  color: var(--kw-text) !important;
}

/* Modals im Theme-Stil */
.modal-content {
    background-color: var(--kw-box-bg, #1b1b1b) !important;
    color: var(--kw-text, #ffffff) !important;
    border: 1px solid var(--kw-border-strong, rgba(255,255,255,0.12)) !important;
}
.modal-header {
    border-bottom: 1px solid var(--kw-border, rgba(255,255,255,0.08)) !important;
    background-color: var(--kw-box-header-bg, #111111) !important;
    color: var(--kw-text, #ffffff) !important;
}
.modal-header .modal-title {
    color: var(--kw-text, #ffffff) !important;
}
.modal-footer {
    border-top: 1px solid var(--kw-border, rgba(255,255,255,0.08)) !important;
    background-color: var(--kw-box-header-bg, #111111) !important;
}
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Header/Footer Grundgerüst */
.kw-header, .kw-footer { background: transparent; color: var(--kw-text); }
.kw-header .btn-primary, .kw-footer .btn-primary { color: #fff !important; }

/* Glas-Effekt wie im alten Template */
.glass {
  background: var(--kw-glass-bg, rgba(15, 15, 15, 0.45)) !important;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--kw-border);
}

/* Dropdown Anpassungen für Themes */
.dropdown-menu {
    --bs-dropdown-color: var(--kw-text);
    --bs-dropdown-bg: var(--kw-box-bg);
    --bs-dropdown-link-color: var(--kw-text);
    --bs-dropdown-link-hover-color: var(--kw-text);
    --bs-dropdown-link-hover-bg: var(--kw-table-hover-bg);
    --bs-dropdown-divider-bg: var(--kw-border);
    --bs-dropdown-border-color: var(--kw-border-strong);

    background-color: var(--bs-dropdown-bg);
    border: 1px solid var(--bs-dropdown-border-color);
    color: var(--bs-dropdown-color);
}
.dropdown-item {
    color: var(--bs-dropdown-link-color);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}
.dropdown-divider {
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    opacity: 1;
}

/* Hintergrund: Sternenfeld */
#kw-starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#kw-starfield .kw-star, .kw-star { position: absolute; background: #fff; border-radius: 50%; opacity: var(--o, .75); animation-name: kw-twinkle; animation-iteration-count: infinite; animation-direction: alternate; }
body[data-effects="off"] #kw-starfield .kw-star { animation: none; }
@keyframes kw-twinkle { from { opacity: calc(var(--o, .75) * .6); } to { opacity: calc(var(--o, .75) * 1); } }

/* Hintergrund: Sonne */
#kw-sun { position: fixed; top: var(--kw-sun-top); left: var(--kw-sun-left); width: var(--kw-sun-size); height: var(--kw-sun-size); border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--kw-sun-core), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--kw-sun-mid), transparent 75%),
    radial-gradient(circle at 50% 50%, var(--kw-sun-hot), transparent 90%);
  filter: blur(1px) saturate(120%);
  opacity: var(--kw-sun-opacity);
  box-shadow: 0 0 60px 20px rgba(255, 200, 80, .55), 0 0 120px 40px rgba(255, 140, 0, .35);
  animation: kw-sun-pulse 3.5s ease-in-out infinite;
}
body[data-effects="off"] #kw-sun { animation: none; }
@keyframes kw-sun-pulse {
  0%   { transform: scale(1); filter: blur(1px) saturate(120%) brightness(1); }
  50%  { transform: scale(1.03); filter: blur(1.2px) saturate(125%) brightness(1.08); }
  100% { transform: scale(1); filter: blur(1px) saturate(120%) brightness(1); }
}

/* Custom Animations */
@keyframes kw-bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
.animate-bounce {
    animation: kw-bounce 2s infinite;
}

/* Hintergrund: Erdkugel */
#kw-globe { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--kw-globe-size); height: var(--kw-globe-size); z-index: 0; border-radius: 50%;
  background-image: var(--kw-globe-texture-url);
  background-size: cover; background-position: 0% 50%; background-repeat: repeat-x; opacity: var(--kw-globe-opacity); filter: saturate(110%) contrast(105%);
  animation: kw-globe-rot var(--kw-globe-rotation-duration) linear infinite;
}
body[data-effects="off"] #kw-globe { animation: none; }
@keyframes kw-globe-rot { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

body[data-effects="off"] .animate__animated,
body[data-effects="off"] .animate-bounce,
body[data-effects="off"] .rainbow_text_animated,
body[data-effects="off"] .kw-premium-star,
body[data-effects="off"] .progress-bar-animated {
  animation: none !important;
}
body[data-effects="off"] .kw-pm-nav .list-group-item,
body[data-effects="off"] .kw-pm-list .list-group-item {
  transition: none !important;
}

/* Schnee-Deko (deaktiv, aber Element vorhanden) */
#kw-snow { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
/* Schneeflocken + Animationen (Dez/Jan per JS aktiviert) */
#kw-snow .kw-snowflake {
  position: absolute;
  top: -2vh;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));
  opacity: 0.7;
  animation-name: kw-snow-fall, kw-snow-drift;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  will-change: transform, opacity;
}
@keyframes kw-snow-fall { 0% { transform: translate3d(0, 0vh, 0);} 100% { transform: translate3d(0, 105vh, 0);} }
@keyframes kw-snow-drift { 0% { translate: 0 0;} 50% { translate: 12px 0;} 100% { translate: 0 0;} }
@media (prefers-reduced-motion: reduce) { #kw-snow .kw-snowflake { animation: none; } }

/* Layering: Content über Hintergrund, Header vorne */
.kw-header { position: sticky; top: 0; z-index: 1030; }
main, .kw-main { position: relative; z-index: 1; flex: 1 0 auto; }
.kw-footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--kw-footer-height); z-index: 1020; background-color: var(--kw-footer-bg); opacity: 1; border-top: 1px solid var(--kw-border); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Buttons theme-aware machen */
.btn-outline-light {
    color: var(--kw-text) !important;
    border-color: var(--kw-border-strong) !important;
}
.btn-outline-light:hover, .btn-outline-light:focus {
    background-color: var(--kw-table-hover-bg) !important;
    color: var(--kw-text) !important;
}

/* Links im Header/Footer gut sichtbar und theme-aware */
.kw-header .link-light, .kw-footer .link-light,
.kw-header .dropdown-toggle, .kw-footer .dropdown-toggle { color: var(--kw-text) !important; }
.text-light-50 { color: var(--kw-muted) !important; opacity: 0.6; }

/* Werbeticker (immer weiß, auch im hellen Design) */
.kw-ticker-wrapper { position: relative; z-index: 1; background: rgba(0, 0, 0, 0.7) !important; }
.kw-ticker { position: relative; white-space: nowrap; overflow: hidden; color: #ffffff !important; }
.kw-ticker b { display: inline-block; padding-left: 100%; will-change: transform; animation: kw-ticker 28s linear infinite; color: #ffffff !important; }
.kw-ticker a, .kw-ticker-link { color: #ffffff !important; text-decoration: none; }
.kw-ticker a:hover, .kw-ticker-link:hover { color: #ffffff !important; text-decoration: underline; }
.kw-ticker:hover b, .kw-ticker-wrapper:hover b { animation-play-state: paused; }
@keyframes kw-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.kw-ticker .spiegeln { transform: scaleX(-1); display: inline-block; }
body[data-effects="off"] .kw-ticker-wrapper { overflow: hidden; }
body[data-effects="off"] .kw-ticker {
  overflow: hidden;
  text-align: center;
  white-space: normal;
  max-width: 100%;
}
body[data-effects="off"] .kw-ticker b {
  display: block;
  white-space: normal;
}
body[data-effects="off"] .kw-ticker a,
body[data-effects="off"] .kw-ticker-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body[data-effects="off"] .kw-ticker b { display: inline; padding-left: 0; animation: none; }

/* Hilfen */
.text-white:not(.btn) { color: var(--kw-text) !important; }
.border { border-color: var(--kw-border) !important; }
.border-top { border-top-color: var(--kw-border) !important; }
.border-bottom { border-bottom-color: var(--kw-border) !important; }

/* Globale Pagination (Bootstrap 5) für dunkles Theme - Verstärkt um DataTables Overrides zu verhindern */
.pagination .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
  background-color: var(--kw-box-bg, #151515) !important;
  color: var(--kw-text, #ffffff) !important;
  border-color: var(--kw-border, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: none !important;
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
}

.pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
  background-color: var(--kw-table-hover-bg, rgba(255, 255, 255, 0.04)) !important;
  color: var(--kw-link-hover, #cfe5ff) !important;
  border-color: var(--kw-border-strong, rgba(255, 255, 255, 0.12)) !important;
}

.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  z-index: 3;
}

.pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background-color: var(--kw-box-bg, #151515) !important;
  color: var(--kw-muted, #888) !important;
  opacity: 0.5 !important;
  border-color: var(--kw-border, rgba(255, 255, 255, 0.08)) !important;
  pointer-events: none;
}

/* Entferne alte DataTables spezifische Pagination-Anpassungen, da oben kombiniert */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--kw-text, #ffffff);
}

/* Rainbow Text Effect */
.rainbow {
    font-weight: bold;
}

.rainbow_text_animated {
    background: linear-gradient(
        to right,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 100%;
    display: inline-block; /* Wichtig für korrekte Hintergrund-Animation bei Text */
}

.rainbow_text_animated * {
    color: inherit !important;
}

@keyframes rainbow_animation {
    0%, 100% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 0;
    }
}

.col-xl-2-4 {
    flex: 0 0 auto;
    width: 20%;
}

@media (max-width: 1199.98px) {
    .col-xl-2-4 {
        width: 33.333333%;
    }
}

@media (max-width: 991.98px) {
    .col-xl-2-4 {
        width: 50%;
    }
}

@media (max-width: 575.98px) {
    .col-xl-2-4 {
        width: 100%;
    }
}

/* Premium User Styling */
@keyframes kw-star-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.kw-premium-star {
    color: #FFD700;
    display: inline-block;
    animation: kw-star-spin 4s linear infinite;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* PN Center Styles */
.kw-pm-nav .list-group-item {
    background-color: transparent;
    border: none;
    color: var(--kw-text);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
}
.kw-pm-nav .list-group-item:hover {
    background-color: var(--kw-table-hover-bg);
    padding-left: 1.25rem;
}
.kw-pm-nav .list-group-item.active {
    background-color: var(--kw-border-strong);
    color: var(--kw-link);
    font-weight: bold;
    border-left: 3px solid var(--kw-link);
    padding-left: 1.25rem;
}

.kw-pm-list .list-group-item {
    background-color: transparent;
    border-bottom: 1px solid var(--kw-border);
    transition: background-color 0.2s;
}
.kw-pm-list .list-group-item:hover {
    background-color: var(--kw-table-hover-bg);
}
.kw-pm-list .list-group-item:last-child {
    border-bottom: none;
}
.kw-pm-unread {
    background-color: rgba(13, 110, 253, 0.05) !important;
}
.kw-pm-unread:hover {
    background-color: rgba(13, 110, 253, 0.1) !important;
}