/* ══════════════════════════════════════════════════════════
   jaas-bridge.css – Tailwind auf die Jobtura-Token legen
   ══════════════════════════════════════════════════════════

   Die Verwaltung ist mit Tailwind-Klassen ausgezeichnet. Deren Werte kommen
   ab hier aus jaas-theme.css statt aus Tailwinds Standardpalette – dadurch
   sieht die Verwaltung wie das Jobtura-Frontend aus, ohne dass am Markup
   etwas geändert werden muss.

   Zwei Dinge dabei im Kopf behalten:

   1. Hell und dunkel schaltet das Theme über die Token selbst. Deshalb
      zeigen `text-gray-900` und `dark:text-white` hier auf DIESELBE Variable.
      Die Variante mit `dark:` bleibt trotzdem stehen: Tailwind erzeugt sie
      mit höherer Gewichtung, sie muss also mitgenommen werden.

   2. Diese Datei gehört NACH tailwind.css geladen, sonst greift sie nicht.

   Sobald die Tailwind-Werkzeugkette verfügbar ist, kann der Inhalt hier in
   tailwind.config.js wandern (dort bereits vorbereitet) und diese Datei
   schrumpfen. Bis dahin ist sie der Weg ohne Übersetzungsschritt.
   ══════════════════════════════════════════════════════════ */


/* ── Schrift ─────────────────────────────────────────────── */

@font-face {
    font-family: TitilliumWeb-Regular;
    src: url("../fonts/TitilliumWeb-Regular.ttf");
    font-display: swap;
}

@font-face {
    font-family: TitilliumWeb-SemiBold;
    src: url("../fonts/TitilliumWeb-SemiBold.ttf");
    font-display: swap;
}

html, body {
    font-family: TitilliumWeb-Regular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--jt-bg-page);
    color: var(--jt-fg-default);
}

h1, h2, h3, h4, h5, h6,
.font-bold, .font-semibold {
    font-family: TitilliumWeb-SemiBold, Arial, sans-serif;
}


/* ── Text ────────────────────────────────────────────────── */

.text-gray-900, .dark .dark\:text-white, .text-white.text-gray-900 {
    color: var(--jt-fg-default);
}

.text-gray-800, .dark .dark\:text-gray-100, .dark .dark\:text-gray-200 {
    color: var(--jt-fg-default);
}

.text-gray-700, .text-gray-600, .dark .dark\:text-gray-300 {
    color: var(--jt-fg-secondary);
}

.text-gray-500, .dark .dark\:text-gray-400 {
    color: var(--jt-fg-tertiary);
}

.text-gray-400, .dark .dark\:text-gray-500 {
    color: var(--jt-fg-muted);
}

.placeholder-gray-400::placeholder,
.placeholder-gray-500::placeholder {
    color: var(--jt-fg-placeholder);
}


/* ── Flächen ─────────────────────────────────────────────── */

.bg-white, .dark .dark\:bg-gray-800 {
    background-color: var(--jt-surface-card);
}

.bg-gray-50, .bg-gray-100, .dark .dark\:bg-gray-700 {
    background-color: var(--jt-bg-surface-2);
}

.bg-gray-200, .dark .dark\:bg-gray-600 {
    background-color: var(--jt-bg-surface-3);
}

.dark .dark\:bg-gray-900 {
    background-color: var(--jt-bg-page);
}

.bg-white\/95, .dark .dark\:bg-gray-800\/95 {
    background-color: var(--jt-surface-card);
}

.bg-white\/80, .dark .dark\:bg-gray-800\/80 {
    background-color: var(--jt-surface-card);
}

.hover\:bg-gray-100:hover, .dark .dark\:hover\:bg-gray-700:hover {
    background-color: var(--jt-bg-surface-hover);
}

.hover\:bg-gray-200:hover, .dark .dark\:hover\:bg-gray-600:hover {
    background-color: var(--jt-bg-surface-active);
}


/* ── Rahmen und Trennlinien ──────────────────────────────── */

.border-gray-200, .border-gray-300,
.dark .dark\:border-gray-600, .dark .dark\:border-gray-700 {
    border-color: var(--jt-border-default);
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--jt-border-light);
}


/* ── Markenfarbe ─────────────────────────────────────────── */

.bg-cyan-600, .bg-cyan-500, .bg-cyan-700 {
    background-color: var(--main-color);
}

.hover\:bg-cyan-700:hover, .hover\:bg-cyan-600:hover {
    background-color: var(--main-color);
    filter: brightness(0.93);
}

.text-cyan-600, .text-cyan-700, .text-cyan-500,
.dark .dark\:text-cyan-400 {
    color: var(--main-color);
}

.border-cyan-500, .border-cyan-600 {
    border-color: var(--main-color);
}

.focus\:border-cyan-500:focus {
    border-color: var(--main-color);
}

.focus\:ring-cyan-500:focus, .focus\:ring-cyan-200:focus {
    --tw-ring-color: var(--jt-input-focus-ring);
}

.text-cyan-600.hover\:text-cyan-700:hover {
    color: var(--main-color);
    filter: brightness(0.9);
}


/* ── Zustände ────────────────────────────────────────────── */

.bg-green-50, .bg-green-100, .dark .dark\:bg-green-900 {
    background-color: var(--jt-status-ok-bg);
}

.text-green-600, .text-green-700, .text-green-800,
.dark .dark\:text-green-200, .dark .dark\:text-green-400 {
    color: var(--jt-status-ok-fg);
}

.bg-green-500, .bg-green-600 {
    background-color: var(--jt-status-ok-fg);
}

.border-green-300, .dark .dark\:border-green-700 {
    border-color: var(--jt-status-ok-border);
}

.bg-red-50, .bg-red-100, .dark .dark\:bg-red-900, .dark .dark\:bg-red-900\/30 {
    background-color: var(--jt-status-danger-bg);
}

.text-red-500, .text-red-600, .text-red-700, .text-red-800,
.dark .dark\:text-red-200, .dark .dark\:text-red-400 {
    color: var(--jt-status-danger-fg);
}

.bg-red-600, .bg-red-500 {
    background-color: var(--jt-status-danger-fg);
}

.border-red-300, .dark .dark\:border-red-700 {
    border-color: var(--jt-status-danger-border);
}

.bg-amber-100, .bg-yellow-50, .bg-yellow-100, .dark .dark\:bg-yellow-900 {
    background-color: var(--jt-status-warn-bg);
}

.text-amber-800, .text-yellow-700, .text-yellow-800,
.dark .dark\:text-yellow-200 {
    color: var(--jt-status-warn-fg);
}

.bg-blue-50, .bg-blue-100, .dark .dark\:bg-blue-900 {
    background-color: var(--jt-status-info-bg);
}

.text-blue-600, .text-blue-700, .text-blue-800,
.dark .dark\:text-blue-200 {
    color: var(--jt-status-info-fg);
}

.bg-gray-300, .bg-gray-500 {
    background-color: var(--jt-bg-surface-3);
    color: var(--jt-fg-default);
}


/* ── Formen ──────────────────────────────────────────────── */

.rounded { border-radius: var(--jt-radius-sm); }
.rounded-md { border-radius: var(--jt-radius-sm); }
.rounded-lg { border-radius: var(--jt-radius-md); }
.rounded-xl { border-radius: var(--jt-radius-lg); }
.rounded-2xl { border-radius: var(--jt-radius-xl); }
.rounded-full { border-radius: var(--jt-radius-pill); }


/* ── Tiefe ───────────────────────────────────────────────── */

.shadow, .shadow-sm { box-shadow: var(--jt-shadow-sm); }
.shadow-md { box-shadow: var(--jt-shadow-md); }
.shadow-lg { box-shadow: var(--jt-shadow-lg); }
.shadow-xl { box-shadow: var(--jt-shadow-xl); }
.shadow-2xl { box-shadow: var(--jt-shadow-card); }

.hover\:shadow-sm:hover { box-shadow: var(--jt-shadow-sm); }
.hover\:shadow-lg:hover { box-shadow: var(--jt-shadow-md); }
.hover\:shadow-xl:hover { box-shadow: var(--jt-shadow-lg); }


/* ── Eingabefelder ───────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
input[type="tel"], input[type="url"], select, textarea {
    background-color: var(--jt-input-bg);
    color: var(--jt-input-text);
    border-color: var(--jt-input-border);
}

    input::placeholder, textarea::placeholder {
        color: var(--jt-input-placeholder);
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--main-color);
        box-shadow: 0 0 0 3px var(--jt-input-focus-ring);
    }

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--main-color);
}


/* ── Umschalter Erscheinungsbild ─────────────────────────── */

.jt-theme-toggle {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--jt-border-default);
    border-radius: var(--jt-radius-pill);
    background: var(--jt-surface-card);
    color: var(--jt-fg-secondary);
    font-size: 1.125rem;
    line-height: 1;
    box-shadow: var(--jt-shadow-md);
    cursor: pointer;
}

    .jt-theme-toggle:hover {
        color: var(--main-color);
        box-shadow: var(--jt-shadow-lg);
    }


/* ── Weiches Verhalten ───────────────────────────────────── */

button, a, .rounded, .rounded-md, .rounded-lg, .rounded-xl {
    transition: background-color var(--jt-transition),
                color var(--jt-transition),
                border-color var(--jt-transition),
                box-shadow var(--jt-transition);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}