/* ===== Reset: keine ungewollten vertikalen Linien ===== */
tbody td,
thead th {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* ===== HEADER ===== */
thead th {
    border-top: 1px solid #e6e8ef;
    border-bottom: 1px solid #e6e8ef;
}

thead th:first-child {
    border-left: 1px solid #e6e8ef !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

thead th:last-child {
    border-right: 1px solid #e6e8ef !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* ===== BODY ROWS ===== */

/* Spacer: nix anwenden */
tbody tr.row-spacer td {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Row-Zellen: Background + nur oben/unten Border (keine vertikalen) */
tbody tr:not(.row-spacer) td {
    background: #fff;
    border-top: 1px solid #e6e8ef;
    border-bottom: 1px solid #e6e8ef;
}

/* Linker Rand + Radius */
tbody tr:not(.row-spacer) td:first-child {
    border-left: 1px solid #e6e8ef !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Rechter Rand + Radius */
tbody tr:not(.row-spacer) td:last-child {
    border-right: 1px solid #e6e8ef !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}



/* Farbcode Deklaration */
:root {
    /* Primärfarben */
    --color-primary: #5fc75d;
    /* var(--color-primary) */
    --color-primary-dark: #349b31;
    /* var(--color-primary-dark) */

    --color-primary-alpha: #5fc75dAD;
    /* var(--color-primary-alpha) */
    --color-primary-dark-alpha: #349b31AD;
    /* var(--color-primary-dark-alpha) */

    --text-on-primary: #FDFBF8;
    /* var(--text-on-primary) */


    /* Akzent für Primärfarben */
    --color-primary-accent: #203671;
    /* var(--color-primary-accent) */
    --color-primary-dark-accent: #112249;
    /* var(--color-primary-dark-accent) */

    --color-primary-accent-alpha: #203671AD;
    /* var(--color-primary-accent) */
    --color-primary-dark-accent-alpha: #112249AD;
    /* var(--color-primary-dark-accent) */

    --text-on-primary-accent: #FDFBF8;
    /* var(--text-on-primary-accent) */


    /* Sekundärfarben */
    --color-secondary: #525E5A;
    /* var(--color-secondary) */
    --color-secondary-dark: #2D3432;
    /* var(--color-secondary-dark) */

    --color-secondary-alpha: #525E5AAD;
    /* var(--color-secondary) */
    --color-secondary-dark-alpha: #2D3432AD;
    /* var(--color-secondary-dark) */

    --text-on-secondary: #FDFBF8;
    /* var(--text-on-secondary) */
}

/*  Standard-Font überschreiben
    benötigt neuen Ordner public/fonts - bestenfalls WOFF2-Format und hier ersetzen


@font-face {
    font-family: 'Acme';
    src: url('../fonts/acme-v26-latin-regular.woff2') format('woff2');
}

html,
body {
    font-family: 'Acme', system-ui, sans-serif;
}

*/

/*----------------------------------------------------------------*/
.rounded-md {
    border-radius: 0.2rem !important;
}

.rounded-lg {
    border-radius: 0.35rem !important;
}

.rounded-l-md {
    border-top-left-radius: 0.2rem !important;
    border-bottom-left-radius: 0.2rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rounded-r-md {
    border-top-right-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


/* Hintergrundfarbe Primär */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-alpha {
    background-color: var(--color-primary-alpha);
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}

.checked\:bg-primary:checked {
    background-color: var(--color-primary);
}

/*----------------------------------------------------------------*/

/* Akzentfarbe für Primärfarbe */
.bg-primary-accent {
    background-color: var(--color-primary-accent);
}

.bg-primary-accent-alpha {
    background-color: var(--color-primary-accent-alpha);
}

.hover\:bg-primary-accent:hover {
    background-color: var(--color-primary-accent);
}

.checked\:bg-primary-accent:checked {
    background-color: var(--color-primary-accent);
}

/*----------------------------------------------------------------*/

/* Akzentfarbe für Primärfarbe dunkel*/
.bg-primary-dark-accent {
    background-color: var(--color-primary-dark-accent);
}

.bg-primary-dark-accent-alpha {
    background-color: var(--color-primary-dark-accent-alpha);
}

.hover\:bg-primary-dark-accent:hover {
    background-color: var(--color-primary-accent);
}

.checked\:bg-primary-dark-accent:checked {
    background-color: var(--color-primary-accent);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Primär dunkel */
.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-primary-dark-alpha {
    background-color: var(--color-primary-dark-alpha);
}

.hover\:bg-primary-dark:hover {
    background-color: var(--color-primary-dark);
}

.checked\:bg-primary-dark:checked {
    background-color: var(--color-primary-dark);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Sekundär */
.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-secondary-alpha {
    background-color: var(--color-secondary-alpha);
}

.hover\:bg-secondary:hover {
    background-color: var(--color-secondary);
}

.checked\:bg-secondary:checked {
    background-color: var(--color-secondary);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Sekundär dunkel */
.bg-secondary-dark {
    background-color: var(--color-secondary-dark);
}

.bg-secondary-dark-alpha {
    background-color: var(--color-secondary-dark-alpha);
}

.hover\:bg-secondary-dark:hover {
    background-color: var(--color-secondary-dark);
}

.checked\:bg-secondary-dark:checked {
    background-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Text auf Primärfarbe */
.text-on-primary {
    color: var(--text-on-primary);
}

/* Text auf Primär-Akzentfarbe */
.text-on-primary-accent {
    color: var(--text-on-primary-accent);
}

/* Text auf Sekundärfarbe */
.text-on-secondary {
    color: var(--text-on-secondary);
}

/*----------------------------------------------------------------*/

/* Text in Primärfarbe */
.text-primary {
    color: var(--color-primary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

/* Text in dunkler Primärfarbe */
.text-primary-dark {
    color: var(--color-primary-dark);
}

.hover\:text-primary-dark:hover {
    color: var(--color-primary-dark);
}

/* Text in Akzentfarbe für Primär */
.text-primary-accent {
    color: var(--color-primary-accent);
}

.hover\:.text-primary-accent:hover {
    color: var(--color-primary-accent);
}

/* Text in Sekundärfarbe */
.text-secondary {
    color: var(--color-secondary);
}

.hover\:text-secondary:hover {
    color: var(--color-secondary);
}

/* Text in dunkler Sekundärfarbe */
.text-secondary-dark {
    color: var(--color-secondary-dark);
}

.hover\:text-secondary-dark:hover {
    color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Outlining für Inputs */
.outline-primary {
    outline-color: var(--color-primary);
}

.outline-primary-dark {
    outline-color: var(--color-primary-dark);
}

.outline-secondary {
    outline-color: var(--color-secondary);
}

.outline-secondary-dark {
    outline-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Fokus-Outlining für Inputs */
.focus\:outline-primary:focus {
    outline-color: var(--color-primary);
}

.focus\:outline-primary-dark:focus {
    outline-color: var(--color-primary-dark);
}

.focus\:outline-secondary:focus {
    outline-color: var(--color-secondary);
}

.focus\:outline-secondary-dark:focus {
    outline-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/


/* Generischer blurry-outline style für fokus-state von allen möglichen Elementen */
.focus\:custom-outline:focus {
    outline: none;
    box-shadow: 0 0 3px 2px var(--color-primary-alpha);
}

/* Outline-Style für Buttons in Sekundärfarbe */
.focus\:button-outline:focus {
    outline: 2px solid;
    outline-offset: 1px;
    outline-color: var(--color-primary);
}

/*-------------------------------------------------------------*/

/* Hover-Wiggle Animation */
.hover-wiggle:hover {
    animation: wiggle 0.35s ease-in-out;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(1deg);
    }

    60% {
        transform: rotate(-0.5deg);
    }

    80% {
        transform: rotate(0.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Dropdown Animation (für fliegende Dropdowns) */
.dropdown-animation {
    transform-origin: top right;
    will-change: transform, opacity;
}

.dropdown-animation.show {
    animation: dropdown-animation-show 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dropdown-animation.hide {
    animation: dropdown-animation-hide 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes dropdown-animation-show {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.02);
        /* kleiner bounce */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdown-animation-hide {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/*-------------------------------------------------------------*/

/* File-Input Überschreiben für hübschere Darstellung */
/* Input selbst */
input[type="file"] {
    height: 2.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    overflow: hidden;
    padding-left: 0.5rem;
}

input[type="file"]::file-selector-button {
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-on-primary);
    background: var(--color-primary);
    border: none;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    transform: translateX(-0.5rem);
}

/* Hover */
input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-dark);
}

/* Safari-Fallback */
input[type="file"]::-webkit-file-upload-button {
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-on-primary);
    background: var(--color-primary);
    border: none;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    transform: translateX(-0.5rem);
}

/* --------------------------------------------------------------------*/
/* Sortierbare Tabellenspalten */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
}

th[data-sortable] .sort-icons {
    margin-left: .25rem;
    font-size: .7rem;
    line-height: 1;
    display: inline-flex;
    gap: 2px;
}

/* Basis: beide Pfeile gedimmt */
th[data-sortable] .icon-up,
th[data-sortable] .icon-down {
    color: var(--color-secondary);
    opacity: .35;
    transition: color .15s ease, opacity .15s ease;
}

/* Hover: beide leicht stärker */
th[data-sortable]:hover .icon-up,
th[data-sortable]:hover .icon-down {
    opacity: .7;
}

/* Aktiv: markiere den aktuellen Pfeil */
th.sorted-asc .icon-up,
th.sorted-desc .icon-down {
    color: var(--color-primary-dark);
    opacity: 1;
}