/* Project specific styles that complement core.css */

/* Poppins Font-Deklarationen */
/* Regular */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Poppins-Regular.woff2') format('woff2'),
        url('/fonts/Poppins-Regular.ttf') format('truetype');
}

/* Italic (Regular Italic) */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Poppins-Italic.woff2') format('woff2'),
        url('/fonts/Poppins-Italic.ttf') format('truetype');
}

/* Medium */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Poppins-Medium.woff2') format('woff2'),
        url('/fonts/Poppins-Medium.ttf') format('truetype');
}

/* SemiBold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('/fonts/Poppins-SemiBold.ttf') format('truetype');
}

/* Bold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Poppins-Bold.woff2') format('woff2'),
        url('/fonts/Poppins-Bold.ttf') format('truetype');
}

/* Bold Italic */
@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Poppins-BoldItalic.woff2') format('woff2'),
        url('/fonts/Poppins-BoldItalic.ttf') format('truetype');
}

/* Poppins als Standard-Schriftart */
:root {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    /* Poppins unterstützt diese Features typischerweise */
}

/* HINZUGEFÜGT: Stärkere Regel für alle Elemente, um Inter Font global zu erzwingen */
* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Fokus-Stil (Nachzügler 3, 18.09.2026): Maus-/Touch-Klick bleibt unauffällig (kein Ring,
   Buttons geben stattdessen per :active-Skalierung Feedback), aber Tastatur-Navigation bekommt
   einen sichtbaren Ring — vorher killte ein pauschales `outline:none!important` auf
   `*:focus, *:focus-visible` (inkl. `box-shadow:none!important`) JEDEN Fokusring app-weit, auch
   für Tastatur-Nutzer:innen UND die vorhandenen Tailwind-`focus:ring-*`-Utilities (Avatar-/
   Benachrichtigungs-Button im Header). `outline` nimmt keinen Layout-Platz ein (kein Reflow),
   deshalb kein Layout-Sprung durch den Ring selbst. Farbe kommt aus `--ring` (pro Theme/Skin +
   Hell/Dunkel in project/public/css/themes/*.css gepflegt). */
*:focus {
    outline: none;
    box-shadow: none;
}

*:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* Form-Elemente behalten zusätzlich ihren Border-Fokus-Stil bei Tastatur-Fokus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    border-color: hsl(var(--ring));
}

::-moz-focus-inner {
    border: 0;
}

/* Spezifische Regel für Formulare und Listen, die oft eigene Schriftarten haben */
input,
button,
select,
textarea,
label,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    /* !important entfernt, da die globale Regel dies abdeckt */
}

/* .btn Komponenten-Klassen — wiederhergestellt 2026-09-18 (Mobil-Pass). `public/css/core.css`
   (die alte Auth-Stylesheet, die .btn/.btn-primary/.btn-secondary ursprünglich definierte) ist
   in main.ejs bewusst auskommentiert (kollidierende --background/--primary Custom Properties
   in Hex statt HSL-Triplet — hätte das aktuelle Theme-System gebrochen). Dadurch war .btn
   überall UNSTYLED: ohne `display:inline-flex` fallen Tailwinds Preflight-SVGs
   (`svg{display:block}`) auf eine eigene Zeile — Icon über statt neben dem Label (z.B.
   „Manuell"/„KI-Plan erstellen" im Planner). Betrifft 10 Views (crm, firmendaten,
   ingest-review, admin-dashboard, publishing-composer, template-list, article-detail,
   content-generator, planner, pwa-install-card). Neu mit den AKTUELLEN Design-Tokens
   (hsl(var(--…))) statt der alten core.css-Farben. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
.btn-label { font-weight: 500; }
.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid transparent;
}
.btn-primary:hover { background-color: hsl(var(--primary) / 0.9); }
.btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border: 1px solid transparent;
}
.btn-secondary:hover { background-color: hsl(var(--secondary) / 0.8); }
.btn-outline {
    background-color: transparent;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}
.btn-outline:hover { background-color: hsl(var(--accent)); }
.btn-ghost {
    background-color: transparent;
    color: hsl(var(--foreground));
    border: 1px solid transparent;
}
.btn-ghost:hover { background-color: hsl(var(--accent)); }

/* Refined hover states for a banking context */
.hover-elegant-UNUSED {
    transition: background-color 0.2s ease;
}

.hover-elegant-UNUSED:hover {
    background-color: #f8fafc;
    /* Super light gray */
}

/* Ensure background colors work correctly in dark mode */
.dark .bg-background {
    background-color: hsl(var(--background)) !important;
}

/* Make sure the background is enforced in case of conflicting styles */
.bg-background {
    background-color: hsl(var(--background)) !important;
}

/* Verbesserte Kontrastregeln für SVG-Elemente in der Pagination und Navigation */
.dark svg,
.dark .text-foreground svg {
    color: hsl(var(--foreground)) !important;
}

.light svg,
.light .text-foreground svg {
    color: hsl(var(--foreground)) !important;
}

/* Ausnahme von der Regel oben: Elemente, die bewusst die INVERTIERTE Textfarbe
   (text-background) nutzen — z.B. aktive Toggle-Buttons (bg-foreground + text-background,
   siehe planner.ejs Kalender/Liste-Umschalter). Ohne diese Ausnahme überschreibt die
   pauschale ".dark svg"-Regel jedes Icon auf --foreground, was bei bg-foreground-Buttons
   im Dark Mode zu unsichtbaren Icons führt (gleiche Farbe wie der eigene Hintergrund).
   Höhere Spezifität (2 Klassen statt 1) gewinnt gegenüber der Regel oben, obwohl beide
   !important nutzen. */
.dark .text-background svg,
.light .text-background svg {
    color: hsl(var(--background)) !important;
}

/* Custom Select ohne natives Dropdown-Icon */
.custom-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.custom-select::-ms-expand {
    display: none !important;
}

/* Styling für Modul-Überschriften - deutlich größer und fetter */
.module-headline {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: hsl(var(--foreground)) !important;
}

/* Hide border on empty search results container */
#search-results:empty {
    border: none;
    box-shadow: none;
    /* Auch Schatten ausblenden, wenn leer */
}

/* Optional: Style when HTMX is requesting */
#search-results.htmx-request {
    /* You might want to keep the border/shadow during loading */
    border-style: solid;
    /* Ensure border is shown if hidden by :empty */
}

/* Fix für Tabellen-Ränder: Stelle sicher, dass sie beim Dark-Mode-Wechsel synchron übergehen */
.divide-border>* {
    border-color: hsl(var(--border)) !important;
}

thead.border-b,
.border-t,
.border-border {
    border-color: hsl(var(--border)) !important;
}

/* Override sidebar hover states for a more elegant look */
/* Diese Styles wurden nach sidebar.css verschoben */

/* Stärkerer Font-Weight für aktive Sidebar-Links */
a[href].text-foreground.font-extrabold {
    font-weight: 900 !important;
}

.htmx-indicator {
    opacity: 0;
    pointer-events: none;
    /* Standardmäßig Klicks ignorieren */
    transition: opacity 200ms ease-in;
}

/* Macht den Indikator sichtbar, wenn das Element, auf das sich hx-indicator bezieht, */
/* oder ein Elternelement die htmx-request Klasse bekommt. */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    pointer-events: auto;
    /* Sichtbar -> Klicks wieder zulassen (falls nötig) */
}

/* Spezifische Regel nur für den Search-Indicator, falls nötig */
/* 
#search-input.htmx-request ~ #search-indicator,
#search-input.htmx-request + #search-results + #search-indicator { 
    opacity: 1;
    pointer-events: auto;
}
*/

/* Spezifische Regel für das Suchfeld - KEINE Änderung bei Focus/Active */
#search:focus,
#search:active,
#search:focus-visible,
#mobile-search:focus,
#mobile-search:active,
#mobile-search:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    ring-width: 0 !important;
    ring-offset-width: 0 !important;
    border-color: hsl(var(--input)) !important;
}

/* === Fix: Karten- & Tabellen-Border Dark-Mode = gleiche Farbe wie Light === */
.dark .border,
.dark .border-t,
.dark .border-b,
.dark .divide-border>* {
    border-color: hsl(var(--border)) !important;
}

/* NEU: Rand der Dashboard-Kacheln im Dark Mode entfernen */
.dark .bg-card.border {
    border-color: transparent !important;
}

/* Sidebar mobile: Links und Icons im Lightmode schwarz, außer active Link */
.sidebar-link.text-black {
    color: #111 !important;
}

.sidebar-icon.text-black {
    color: #111 !important;
}

/* Box Shadow für mobile Header Icons Container */
.mobile-icons-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Dark Mode - Mehrere Schatten für mehr Dimension */
.dark .mobile-icons-shadow {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Provider-Guthaben: direkt kompiliertes CSS, da der Tailwind-Build derzeit nicht verlässlich ist. */
.provider-budget-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 180ms ease-out;
}

.provider-budget-overlay[hidden] {
    display: none;
}

.provider-budget-overlay.is-visible {
    opacity: 1;
}

.provider-budget-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(5px);
    cursor: default;
}

.provider-budget-dialog {
    position: relative;
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 28px;
    border: 1px solid hsl(var(--border));
    border-radius: 22px;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3), 0 8px 24px rgba(15, 23, 42, 0.16);
    transform: translateY(12px) scale(0.985);
    transition: transform 180ms ease-out;
    outline: none;
}

.provider-budget-overlay.is-visible .provider-budget-dialog {
    transform: translateY(0) scale(1);
}

.provider-budget-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(217, 119, 6, 0.12);
    color: rgb(180, 83, 9);
}

.provider-budget-icon svg {
    width: 25px;
    height: 25px;
}

.provider-budget-copy h2 {
    margin: 2px 0 10px;
    font-size: 22px;
    line-height: 1.24;
    font-weight: 720;
    letter-spacing: -0.02em;
}

.provider-budget-copy > p:not(.provider-budget-kicker) {
    margin: 0;
    font-size: 15px;
    line-height: 1.58;
}

.provider-budget-kicker {
    margin: 0 0 7px;
    color: rgb(180, 83, 9);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.provider-budget-context {
    margin-top: 12px !important;
    color: hsl(var(--muted-foreground));
    font-size: 13px !important;
}

.provider-budget-credit-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    padding: 10px 12px;
    border-radius: 11px;
    background: hsl(var(--muted));
    font-size: 13px;
    font-weight: 600;
}

.provider-budget-credit-note svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgb(22, 163, 74);
}

.provider-budget-close {
    min-width: 120px;
    min-height: 44px;
    margin-top: 20px;
    padding: 10px 18px;
    border: 0;
    border-radius: 11px;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}

.provider-budget-close:hover {
    filter: brightness(0.96);
}

.provider-budget-close:focus-visible {
    outline: 3px solid hsl(var(--ring) / 0.35);
    outline-offset: 3px;
}

.dark .provider-budget-icon {
    background: rgba(245, 158, 11, 0.16);
    color: rgb(251, 191, 36);
}

.dark .provider-budget-kicker {
    color: rgb(251, 191, 36);
}

@media (max-width: 520px) {
    .provider-budget-overlay {
        align-items: end;
        padding: 12px;
    }

    .provider-budget-dialog {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 13px;
        padding: 22px 18px 18px;
        border-radius: 20px;
    }

    .provider-budget-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .provider-budget-copy h2 {
        font-size: 19px;
    }

    .provider-budget-close {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .provider-budget-overlay,
    .provider-budget-dialog {
        transition: none;
    }
}