/*
 * Halloween-Layout
 *
 * Übernimmt das Standard-Layout (style.css) und überschreibt nur Farben,
 * Schriften und Effekte. Bootstrap bleibt die Basis: angepasst werden
 * vor allem die CSS-Variablen der Bootstrap-Komponenten.
 */
@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Eater&display=swap");
@import url("style.css");

/* ------------------------------------------------------------------
 * Farbpalette
 * ------------------------------------------------------------------ */
:root {
    --spuk-nacht: #0c0810;
    --spuk-gruft: #17101d;
    --spuk-sarg: #221729;
    --spuk-nebel: #e9dfcf;
    --spuk-asche: #a99cb3;
    --spuk-kuerbis: #ff7518;
    --spuk-kuerbis-dunkel: #c4520a;
    --spuk-gift: #5cff2e;
    --spuk-gift-dunkel: #2f9e14;
    --spuk-hexe: #7b2cbf;
    --spuk-blut: #a10d0d;
    --spuk-blut-dunkel: #6b0505;

    /* Bootstrap-Grundfarben */
    --bs-body-bg: var(--spuk-nacht);
    --bs-body-color: var(--spuk-nebel);
    --bs-emphasis-color: #fff6e8;
    --bs-secondary-color: var(--spuk-asche);
    --bs-tertiary-color: var(--spuk-asche);
    --bs-secondary-bg: var(--spuk-sarg);
    --bs-tertiary-bg: var(--spuk-gruft);
    --bs-border-color: #3d2a4a;
    --bs-heading-color: var(--spuk-kuerbis);
    --bs-link-color: var(--spuk-kuerbis);
    --bs-link-color-rgb: 255, 117, 24;
    --bs-link-hover-color: var(--spuk-gift);
    --bs-link-hover-color-rgb: 92, 255, 46;
    --bs-primary-rgb: 255, 117, 24;
    --bs-secondary-rgb: 169, 156, 179;
    --bs-danger-rgb: 161, 13, 13;
    --bs-focus-ring-color: rgba(92, 255, 46, 0.35);
}

::selection {
    background: var(--spuk-kuerbis);
    color: var(--spuk-nacht);
}

/* ------------------------------------------------------------------
 * Hintergrund: Vollmond, Nebel und Spinnennetz
 * ------------------------------------------------------------------ */
body {
    background:
        radial-gradient(circle at 80% 4.5rem, #fff4c9 0, #ffe18a 3.5rem, rgba(255, 200, 80, 0.25) 4.2rem, transparent 9rem),
        radial-gradient(ellipse at 20% 110%, rgba(123, 44, 191, 0.35), transparent 60%),
        radial-gradient(ellipse at 80% 120%, rgba(92, 255, 46, 0.12), transparent 55%),
        linear-gradient(180deg, #120a1a 0%, var(--spuk-nacht) 60%);
    background-attachment: fixed;
    color: var(--spuk-nebel);
}

/* Spinnennetz in der rechten oberen Ecke */
body::before {
    content: "\1F578\FE0F";
    position: fixed;
    top: -0.6rem;
    right: -0.4rem;
    font-size: 7rem;
    line-height: 1;
    opacity: 0.35;
    filter: grayscale(1) brightness(1.8);
    pointer-events: none;
    z-index: 1;
}

/* Spinne, die am Faden auf und ab schwingt */
body::after {
    content: "\1F577\FE0F";
    position: fixed;
    top: 0;
    right: 9rem;
    padding-top: 2rem;
    font-size: 2rem;
    line-height: 1;
    border-right: 1px solid rgba(233, 223, 207, 0.35);
    padding-right: 0.55rem;
    pointer-events: none;
    z-index: 1050;
    transform-origin: top right;
    animation: spuk-spinne 6s ease-in-out infinite;
}

/* ------------------------------------------------------------------
 * Kopfbereich und Menü
 * ------------------------------------------------------------------ */
.bg-header {
    position: relative;
    /* Halbtransparent, damit der Mond im Seitenhintergrund durchscheint */
    background:
        linear-gradient(180deg, rgba(5, 3, 7, 0.6) 0%, rgba(29, 15, 38, 0.25) 100%) !important;
    border-bottom: 2px solid var(--spuk-kuerbis);
    box-shadow: 0 0.5rem 1.5rem rgba(255, 117, 24, 0.15);
    overflow: hidden;
    /* body ist ein Flex-Container: mit overflow: hidden würde der Kopf sonst auf 0 schrumpfen */
    flex-shrink: 0;
}

/* Fledermäuse fliegen durch den Kopfbereich */
.bg-header::after {
    content: "\1F987   \1F987      \1F987";
    white-space: pre;
    position: absolute;
    top: 0.6rem;
    left: -20%;
    font-size: 1.4rem;
    pointer-events: none;
    animation: spuk-fledermaeuse 14s linear infinite;
}

.bg-header img {
    filter: drop-shadow(0 0 0.4rem var(--spuk-kuerbis)) sepia(1) saturate(4) hue-rotate(-15deg);
}

.navbar.bg-header {
    overflow: visible;
    border-top: 1px solid rgba(255, 117, 24, 0.25);
}

.navbar.bg-header::after {
    content: none;
}

.navbar .nav-link.text-white {
    color: var(--spuk-nebel) !important;
    transition: color 0.2s, text-shadow 0.2s;
}

.navbar .nav-link.text-white:hover {
    color: var(--spuk-gift) !important;
    text-shadow: 0 0 0.5rem var(--spuk-gift);
}

/* ------------------------------------------------------------------
 * Überschriften und Texte
 * ------------------------------------------------------------------ */
h1, h2, h3, .h1, .h2, .h3, .h5 {
    font-family: "Creepster", system-ui, sans-serif;
    letter-spacing: 0.06em;
    color: var(--spuk-kuerbis);
    text-shadow: 0 0 0.4rem rgba(255, 117, 24, 0.6), 0.1rem 0.1rem 0 #000;
}

.card-header .h3 {
    font-family: "Eater", system-ui, sans-serif;
    font-size: 2rem;
    animation: spuk-flackern 5s infinite;
}

.text-muted,
.text-secondary {
    color: var(--spuk-asche) !important;
}

.text-primary {
    color: var(--spuk-kuerbis) !important;
}

.text-danger {
    color: #ff3b3b !important;
    text-shadow: 0 0 0.4rem var(--spuk-blut);
}

a:hover {
    color: var(--spuk-gift);
}

/* ------------------------------------------------------------------
 * Karten (Boards, Spalten, Formulare)
 * ------------------------------------------------------------------ */
.card {
    --bs-card-bg: rgba(23, 16, 29, 0.92);
    --bs-card-color: var(--spuk-nebel);
    --bs-card-border-color: #3d2a4a;
    --bs-card-cap-bg: var(--spuk-sarg);
    --bs-card-cap-color: var(--spuk-kuerbis);
    --bs-card-title-color: var(--spuk-kuerbis);
    box-shadow: 0 0 1.2rem rgba(123, 44, 191, 0.35);
}

.card-header {
    border-bottom-color: #3d2a4a;
}

.card-header.bg-white,
.card-header.bg-light,
.bg-white,
.bg-light {
    background-color: var(--spuk-sarg) !important;
    color: var(--spuk-nebel);
    border-bottom: 1px solid var(--spuk-kuerbis-dunkel);
}

/* Task-Karten auf dem Board: Grabsteine mit Kürbis-Kante */
.taskkarte {
    background: linear-gradient(160deg, #2a1d33 0%, #1a1220 100%);
    border: 1px solid #4a3358;
    border-left: 4px solid var(--spuk-kuerbis);
    border-radius: 1.2rem 1.2rem 0.4rem 0.4rem;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.6);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.taskkarte:hover {
    border-left-color: var(--spuk-gift);
    box-shadow: 0 0 1rem rgba(92, 255, 46, 0.45);
    animation: spuk-wackeln 0.5s ease-in-out;
}

.taskkarte a {
    color: var(--spuk-nebel);
}

.taskkarte a:hover {
    color: var(--spuk-gift);
}

/* Beim Ziehen schwebt der Task wie ein Geist */
.gu-mirror {
    opacity: 0.75 !important;
    transform: rotate(-3deg);
    filter: drop-shadow(0 0 0.8rem var(--spuk-gift));
}

.personenkuerzel {
    box-shadow: 0 0 0.5rem rgba(255, 117, 24, 0.7);
}

/* ------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */
.btn-primary {
    --bs-btn-color: #1a0d00;
    --bs-btn-bg: var(--spuk-kuerbis);
    --bs-btn-border-color: var(--spuk-kuerbis-dunkel);
    --bs-btn-hover-color: #1a0d00;
    --bs-btn-hover-bg: #ff9447;
    --bs-btn-hover-border-color: var(--spuk-kuerbis);
    --bs-btn-active-color: #1a0d00;
    --bs-btn-active-bg: var(--spuk-kuerbis-dunkel);
    --bs-btn-active-border-color: var(--spuk-kuerbis-dunkel);
    --bs-btn-focus-shadow-rgb: 255, 117, 24;
    --bs-btn-disabled-bg: #6b4a33;
    --bs-btn-disabled-border-color: #6b4a33;
    font-weight: 600;
    box-shadow: 0 0 0.6rem rgba(255, 117, 24, 0.45);
}

.btn-primary:hover {
    box-shadow: 0 0 1rem rgba(255, 117, 24, 0.7);
}

.btn-success {
    --bs-btn-color: #062000;
    --bs-btn-bg: var(--spuk-gift);
    --bs-btn-border-color: var(--spuk-gift-dunkel);
    --bs-btn-hover-color: #062000;
    --bs-btn-hover-bg: #8bff6a;
    --bs-btn-hover-border-color: var(--spuk-gift);
    --bs-btn-active-color: #062000;
    --bs-btn-active-bg: var(--spuk-gift-dunkel);
    --bs-btn-active-border-color: var(--spuk-gift-dunkel);
    --bs-btn-focus-shadow-rgb: 92, 255, 46;
    font-weight: 600;
    box-shadow: 0 0 0.6rem rgba(92, 255, 46, 0.45);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--spuk-blut);
    --bs-btn-border-color: var(--spuk-blut-dunkel);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #c41414;
    --bs-btn-hover-border-color: var(--spuk-blut);
    --bs-btn-active-bg: var(--spuk-blut-dunkel);
    --bs-btn-focus-shadow-rgb: 161, 13, 13;
    /* Blutstropfen am unteren Rand */
    background-image: radial-gradient(circle at 20% 100%, var(--spuk-blut-dunkel) 0.25rem, transparent 0.3rem),
                      radial-gradient(circle at 70% 100%, var(--spuk-blut-dunkel) 0.2rem, transparent 0.25rem);
}

.btn-link {
    --bs-btn-color: var(--spuk-kuerbis);
    --bs-btn-hover-color: var(--spuk-gift);
}

.btn-close {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(-20deg);
}

/* ------------------------------------------------------------------
 * Formulare
 * ------------------------------------------------------------------ */
.form-control,
.form-select {
    background-color: #120c16;
    color: var(--spuk-nebel);
    border-color: #4a3358;
}

.form-label,
.col-form-label {
    color: var(--spuk-nebel);
}

.form-control::placeholder {
    color: #6f6178;
}

.form-control:focus,
.form-select:focus {
    background-color: #170f1c;
    color: #fff6e8;
    border-color: var(--spuk-gift);
    box-shadow: 0 0 0 0.2rem rgba(92, 255, 46, 0.25), 0 0 0.8rem rgba(92, 255, 46, 0.35);
}

.form-control:disabled,
fieldset:disabled .form-control {
    background-color: #1d1522;
    color: var(--spuk-asche);
}

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff7518' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.input-group-text {
    background-color: var(--spuk-sarg);
    color: var(--spuk-kuerbis);
    border-color: #4a3358;
}

.form-check-input {
    background-color: #120c16;
    border-color: var(--spuk-kuerbis);
}

.form-check-input:checked {
    background-color: var(--spuk-kuerbis);
    border-color: var(--spuk-kuerbis);
}

.invalid-feedback {
    color: #ff4d4d;
}

.form-control.is-invalid {
    border-color: var(--spuk-blut);
    box-shadow: 0 0 0.6rem rgba(161, 13, 13, 0.6);
}

/* ------------------------------------------------------------------
 * Dropdowns
 * ------------------------------------------------------------------ */
.dropdown-menu {
    --bs-dropdown-bg: var(--spuk-gruft);
    --bs-dropdown-color: var(--spuk-nebel);
    --bs-dropdown-border-color: var(--spuk-kuerbis-dunkel);
    --bs-dropdown-link-color: var(--spuk-nebel);
    --bs-dropdown-link-hover-color: var(--spuk-nacht);
    --bs-dropdown-link-hover-bg: var(--spuk-kuerbis);
    --bs-dropdown-link-active-color: var(--spuk-nacht);
    --bs-dropdown-link-active-bg: var(--spuk-gift);
    --bs-dropdown-divider-bg: #3d2a4a;
    box-shadow: 0 0 1rem rgba(255, 117, 24, 0.35);
}

/* ------------------------------------------------------------------
 * Tabellen (Bootstrap Table)
 * ------------------------------------------------------------------ */
.table {
    --bs-table-color: var(--spuk-nebel);
    --bs-table-bg: transparent;
    --bs-table-border-color: #3d2a4a;
    --bs-table-striped-color: var(--spuk-nebel);
    --bs-table-striped-bg: rgba(255, 117, 24, 0.06);
    --bs-table-hover-color: #fff6e8;
    --bs-table-hover-bg: rgba(92, 255, 46, 0.1);
}

.table thead th {
    color: var(--spuk-kuerbis);
    border-bottom: 2px solid var(--spuk-kuerbis-dunkel);
}

.bootstrap-table .fixed-table-container .table thead th .both {
    filter: invert(1);
}

.page-link {
    --bs-pagination-color: var(--spuk-kuerbis);
    --bs-pagination-bg: var(--spuk-gruft);
    --bs-pagination-border-color: #3d2a4a;
    --bs-pagination-hover-color: var(--spuk-nacht);
    --bs-pagination-hover-bg: var(--spuk-kuerbis);
    --bs-pagination-active-bg: var(--spuk-kuerbis);
    --bs-pagination-active-border-color: var(--spuk-kuerbis);
}

/* ------------------------------------------------------------------
 * Datepicker (Air Datepicker)
 * ------------------------------------------------------------------ */
.air-datepicker {
    --adp-background-color: var(--spuk-gruft);
    --adp-background-color-hover: #3a2547;
    --adp-background-color-active: #4a3358;
    --adp-color: var(--spuk-nebel);
    --adp-color-secondary: var(--spuk-asche);
    --adp-color-other-month: #5d4f66;
    --adp-color-current-date: var(--spuk-gift);
    --adp-accent-color: var(--spuk-kuerbis);
    --adp-day-name-color: var(--spuk-kuerbis);
    --adp-cell-background-color-selected: var(--spuk-kuerbis);
    --adp-cell-background-color-selected-hover: #ff9447;
    --adp-cell-background-color-hover: #3a2547;
    --adp-border-color: var(--spuk-kuerbis-dunkel);
    --adp-border-color-inner: #3d2a4a;
    --adp-pointer-color: var(--spuk-gruft);
    --adp-nav-color-secondary: var(--spuk-asche);
    --adp-time-track-color: #4a3358;
    --adp-time-thumb-background-color: var(--spuk-kuerbis);
    --adp-btn-color: var(--spuk-kuerbis);
    --adp-btn-background-color-hover: #3a2547;
    box-shadow: 0 0 1rem rgba(255, 117, 24, 0.4);
}

/* ------------------------------------------------------------------
 * Fußbereich: Friedhof bei Nacht, giftiger Schleim tropft herab
 * ------------------------------------------------------------------ */
.bg-footer {
    position: relative;
    /* Kurzschreibweise, damit auch der Farbverlauf aus style.css ersetzt wird */
    background:
        radial-gradient(ellipse 60% 120% at 15% 130%, rgba(123, 44, 191, 0.45), transparent 70%),
        radial-gradient(ellipse 50% 110% at 85% 130%, rgba(92, 255, 46, 0.18), transparent 70%),
        linear-gradient(180deg, #120a18 0%, #050307 100%);
    border-top: 3px solid var(--spuk-gift);
    box-shadow: 0 -0.3rem 1.2rem rgba(92, 255, 46, 0.35);
    padding-top: 1.1rem !important;
}

/* Grabsteine mit Kürbis in der Mitte */
.bg-footer::after {
    content: "\1FAA6  \1F383  \1FAA6";
    white-space: pre;
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    transform: translateX(-50%);
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 0 0.35rem rgba(255, 117, 24, 0.6));
    pointer-events: none;
    animation: spuk-kuerbis-leuchten 3s ease-in-out infinite;
}

@media (max-width: 767.98px) {
    .bg-footer::after {
        content: none;
    }
}

.bg-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.9rem;
    background:
        radial-gradient(circle at 50% 0, var(--spuk-gift) 0.35rem, transparent 0.4rem) 0 0 / 4.5rem 0.9rem repeat-x,
        radial-gradient(ellipse at 50% 0, var(--spuk-gift) 0.25rem, transparent 0.3rem) 2.2rem 0 / 6.5rem 1.4rem repeat-x;
    pointer-events: none;
}

.bg-footer .text-white,
.bg-footer a.text-white {
    color: var(--spuk-asche) !important;
}

.bg-footer a.text-white {
    opacity: 1;
}

.bg-footer a.text-white:hover {
    color: var(--spuk-gift) !important;
    text-shadow: 0 0 0.5rem var(--spuk-gift);
}

/* ------------------------------------------------------------------
 * Bildlaufleisten
 * ------------------------------------------------------------------ */
* {
    scrollbar-color: var(--spuk-kuerbis) var(--spuk-gruft);
}

/* ------------------------------------------------------------------
 * Animationen
 * ------------------------------------------------------------------ */
@keyframes spuk-flackern {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 0 0 0.4rem rgba(255, 117, 24, 0.8), 0 0 1.2rem rgba(255, 117, 24, 0.5);
    }
    20%, 24%, 55% {
        opacity: 0.45;
        text-shadow: none;
    }
}

@keyframes spuk-spinne {
    0%, 100% {
        padding-top: 1.5rem;
    }
    50% {
        padding-top: 4.5rem;
    }
}

@keyframes spuk-fledermaeuse {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(35vw, 1.2rem);
    }
    50% {
        transform: translate(70vw, -0.4rem);
    }
    75% {
        transform: translate(105vw, 1rem);
    }
    100% {
        transform: translate(140vw, 0);
    }
}

@keyframes spuk-kuerbis-leuchten {
    0%, 100% {
        filter: drop-shadow(0 0 0.25rem rgba(255, 117, 24, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 0.8rem rgba(255, 117, 24, 0.9));
    }
}

@keyframes spuk-wackeln {
    0%, 100% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(-1.2deg);
    }
    75% {
        transform: rotate(1.2deg);
    }
}

/* Keine Animationen, wenn das System reduzierte Bewegung wünscht */
@media (prefers-reduced-motion: reduce) {
    body::after,
    .bg-header::after,
    .bg-footer::after,
    .card-header .h3,
    .taskkarte:hover {
        animation: none;
    }
}