/* Design base copied from /var/www/dev/veloxfactory-dev/public/css/custom-style.css (commit 3be826d), synced 2026-09-21.
   Keep verbatim. Update with tools/sync-design.sh. */

/* ==========================================================================
   VeloxFactory - custom-style.css

   1. THEME COLORS      <- edit here to rebrand the application
        1.1 Brand colors        primary, primary accent, secondary
        1.2 Surface, text, border colors (light mode)
        1.3 Fixed colors        knob, dividers, dark mode ring
        1.4 Dark mode values    overrides of 1.2
   2. TABLES            list/grid table look
   3. DARK MODE         tailwind utility remapping onto the variables above
   4. BASE              body, icon toggle, font override hint
   5. COMPONENTS        radius, brand utilities, animations, file input, ...

   Note: the mail theme (MailFunctions::getThemeTokens) reads the FIRST root
   variable block of this file, so keep it in sections 1.1 - 1.3 and free of
   closing braces inside comments. Only hex colors are picked up from there.
   ========================================================================== */


/* ==========================================================================
   1. THEME COLORS
   ========================================================================== */

:root {

    /* ----- 1.1 Brand colors ------------------------------------------- */

    /* Primary (green) */
    --color-primary: #5fc75d;
    --color-primary-dark: #349b31;
    --color-primary-alpha: #5fc75dAD;
    --color-primary-dark-alpha: #349b31AD;
    --text-on-primary: #FDFBF8;

    /* Primary accent (blue) */
    --color-primary-accent: #203671;
    --color-primary-dark-accent: #112249;
    --color-primary-accent-alpha: #203671AD;
    --color-primary-dark-accent-alpha: #112249AD;
    --text-on-primary-accent: #FDFBF8;

    /* Secondary (grey-green) */
    --color-secondary: #525E5A;
    --color-secondary-dark: #2D3432;
    --color-secondary-alpha: #525E5AAD;
    --color-secondary-dark-alpha: #2D3432AD;
    --text-on-secondary: #FDFBF8;


    /* ----- 1.2 Surface, text and border colors (light mode) ----------- */

    --color-bg-page: #f3f4f6;
    --color-bg-surface: #ffffff;
    --color-bg-surface-alt: #f9fafb;
    --color-bg-muted: #e5e7eb;

    --color-text-primary: #111827;
    --color-text-heading: #374151;
    --color-text-strong: #4b5563;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;

    --color-border-subtle: #e6e8ef;
    --color-border-default: #d1d5db;

    --color-overlay: rgba(107, 114, 128, 0.75);


    /* ----- 1.3 Fixed colors (same in light and dark mode) ------------- */

    /* radio dot / toggle knob stay white in both themes */
    --color-control-knob: #ffffff;

    /* line between the file input button and its label */
    --color-file-button-divider: #e5e7eb;

    /* ring-black/5 is invisible in dark mode, this replaces it there */
    --color-ring-dark: rgba(255, 255, 255, 0.08);
}


/* ----- 1.4 Dark mode values, override 1.2 while html carries "dark" ---- */

html.dark {
    --color-bg-page: #1b1f1e;
    --color-bg-surface: #242928;
    --color-bg-surface-alt: #2d3331;
    --color-bg-muted: #3a413f;

    --color-text-primary: #f3f4f4;
    --color-text-heading: #d7dbda;
    --color-text-strong: #c7cdcb;
    --color-text-secondary: #b4bab8;
    --color-text-tertiary: #8a908d;

    --color-border-subtle: #394140;
    --color-border-default: #454e4c;

    --color-overlay: rgba(0, 0, 0, 0.6);
}


/* ==========================================================================
   2. TABLES
   ========================================================================== */

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

/* ===== HEADER ===== */
thead th {
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}

thead th:first-child {
    border-left: 1px solid var(--color-border-subtle) !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

thead th:last-child {
    border-right: 1px solid var(--color-border-subtle) !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: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Linker Rand + Radius */
tbody tr:not(.row-spacer) td:first-child {
    border-left: 1px solid var(--color-border-subtle) !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 var(--color-border-subtle) !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* ==========================================================================
   3. DARK MODE
   ========================================================================== */

/* html carries "bg-gray-100" and "dark" itself, so descendant selectors below don't match it */
html.dark {
    background-color: var(--color-bg-page);
    /* native controls (date picker etc.) follow dark mode too */
    color-scheme: dark;
}

/* ".dark .class" (not "html.dark .class") keeps specificity below this file's own checked:/hover: rules so those still win */
.dark .bg-white { background-color: var(--color-bg-surface); }
.dark .bg-gray-50 { background-color: var(--color-bg-surface-alt); }
.dark .bg-gray-100 { background-color: var(--color-bg-page); }
.dark .bg-gray-200 { background-color: var(--color-bg-muted); }
.dark .bg-gray-500 { background-color: var(--color-overlay); }

.dark .text-gray-400 { color: var(--color-text-tertiary); }
.dark .text-gray-500 { color: var(--color-text-secondary); }
.dark .text-gray-600 { color: var(--color-text-strong); }
.dark .text-gray-700 { color: var(--color-text-heading); }
.dark .text-gray-800 { color: var(--color-text-heading); }
.dark .text-gray-900 { color: var(--color-text-primary); }

.dark .border-gray-300 { border-color: var(--color-border-default); }
.dark .border-gray-600 { border-color: var(--color-border-default); }
.dark .ring-gray-300 { --tw-ring-color: var(--color-border-default); }
.dark .outline-gray-300 { outline-color: var(--color-border-default); }

/* hover/disabled/checked variants compile to their own selector, not covered above */
.dark .hover\:bg-gray-50:hover { background-color: var(--color-bg-surface-alt); }
.dark .hover\:bg-gray-100:hover { background-color: var(--color-bg-page); }
.dark .hover\:text-gray-500:hover { color: var(--color-text-secondary); }
.dark .hover\:text-gray-600:hover { color: var(--color-text-strong); }
.dark .hover\:text-gray-900:hover { color: var(--color-text-primary); }
.dark .disabled\:bg-gray-200:disabled { background-color: var(--color-bg-muted); }
.dark .disabled\:outline-gray-300:disabled { outline-color: var(--color-border-default); }
.dark .checked\:border-gray-600:checked { border-color: var(--color-border-default); }

/* ring-black/5 is invisible in dark mode, lighten it */
.dark .ring-black\/5 { --tw-ring-color: var(--color-ring-dark); }


/* ==========================================================================
   4. BASE
   ========================================================================== */

/* radio dot / toggle knob need to stay white in both themes */
.bg-control-knob {
    background-color: var(--color-control-knob);
}

/* fallback for elements without an explicit text-gray-* class (e.g. h1-h3) */
body {
    color: var(--color-text-primary);
}

/* Dark mode toggle: only show the icon matching the current state */
html.dark .icon-dark { display: none; }
html:not(.dark) .icon-light { display: none; }

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

*/


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/*----------------------------------------------------------------*/
.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-dark-accent);
}

.checked\:bg-primary-dark-accent:checked {
    background-color: var(--color-primary-dark-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 var(--color-file-button-divider);
    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 var(--color-file-button-divider);
    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;
}