/* 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);

  /* 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);

  /* 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 */
}

/* 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; }

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

/* Formulare Dunkel */
label, .form-label, .form-text, .text-muted, .small, small { color: var(--kw-text) !important; opacity: 1; }
.form-control, .form-select, textarea,
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-text);
  background-color: var(--kw-input-bg) !important;
  border-color: var(--kw-input-border) !important;
}
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--kw-input-placeholder); }
.form-control:focus, .form-select:focus {
  color: var(--kw-text) !important;
  border-color: var(--kw-input-focus-border) !important;
  box-shadow: none;
}

/* Tabellen innerhalb Boxen */
.kw-box .table {
  --bs-table-bg: var(--kw-box-bg);
  --bs-table-color: var(--kw-text);
  --bs-table-border-color: var(--kw-border);
  --bs-table-striped-bg: var(--kw-table-striped-bg);
  --bs-table-striped-color: var(--kw-text);
  --bs-table-hover-bg: var(--kw-table-hover-bg);
  --bs-table-hover-color: var(--kw-text);
  color: var(--kw-text);
  background-color: var(--kw-box-bg);
}
.kw-box .table thead { background: var(--kw-box-header-bg); }
.kw-box .table thead th { color: var(--kw-text); }
.kw-box .table td, .kw-box .table th { color: var(--kw-text); }
.kw-box .table > :not(caption) > * > * { box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.00); }
/* Erzwinge weiße Schrift auf gestreiften/hover Reihen auf dunklem Hintergrund */
.kw-box .table.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--kw-table-striped-bg);
  color: var(--kw-text);
}
.kw-box .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--kw-text) !important;
}
.kw-box .table.table-hover > tbody > tr:hover > * {
  color: var(--kw-text) !important;
}

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

/* Glas-Effekt wie im alten Template */
.glass {
  background: 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);
}

/* 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; }
@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;
}
@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); }
}

/* 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;
}
@keyframes kw-globe-rot { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* 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: #0f0f10; opacity: 1; border-top: 1px solid var(--kw-border); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Links im dunklen Header gut sichtbar */
.kw-header .link-light { color: #fff !important; }
.text-light-50 { color: rgba(255,255,255,.6) !important; }

/* Werbeticker (optional) */
.kw-ticker-wrapper { position: relative; z-index: 1; }
.kw-ticker { position: relative; white-space: nowrap; overflow: hidden; }
.kw-ticker b { display: inline-block; padding-left: 100%; will-change: transform; animation: kw-ticker 28s linear infinite; }
.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; }

/* Hilfen */
.text-white { color: #fff !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 */
.pagination .page-link {
  background-color: var(--kw-box-bg, #151515);
  color: var(--kw-text, #ffffff);
  border-color: var(--kw-border, rgba(255, 255, 255, 0.08));
}
.pagination .page-link:hover {
  background-color: var(--kw-table-hover-bg, rgba(255, 255, 255, 0.04));
  color: var(--kw-link-hover, #cfe5ff);
  border-color: var(--kw-border-strong, rgba(255, 255, 255, 0.12));
}
.pagination .page-item.active .page-link {
  background-color: #0d6efd; /* Bootstrap Primary Blau beibehalten für Fokus */
  border-color: #0d6efd;
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--kw-box-bg, #151515);
  color: rgba(255, 255, 255, 0.3);
  border-color: var(--kw-border, rgba(255, 255, 255, 0.08));
}

/* DataTables spezifische Pagination-Anpassungen */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
  background-color: transparent;
  color: var(--kw-text, #ffffff) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  color: rgba(255, 255, 255, 0.3) !important;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  color: #fff !important;
}
.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;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 100%;
    display: inline-block; /* Wichtig für korrekte Hintergrund-Animation bei Text */
}

@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;
}