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