/**
 * Main CSS - Haupt-Datei
 * ======================================
 * Diese Datei importiert alle modularen CSS-Dateien.
 * Reihenfolge ist wichtig: Erst Variablen, dann Fonts, dann Komponenten.
 */

/* === 1. VARIABLEN & FONTS === */
@import 'module/variables.css';
@import 'module/fonts.css';

/* === 2. FARBEN === */
@import 'module/colors.css';

/* === 3. LAYOUT, TYPOGRAFIE & GRID === */
@import 'module/layout.css';
@import 'module/typography.css';
@import 'module/typography-helpers.css';
@import 'module/grid.css';

/* === 4. BASIS-KOMPONENTEN === */
@import 'module/avatars.css';
@import 'module/dropdowns.css';
@import 'module/icons.css';
@import 'module/breadcrumb.css';
@import 'module/pagination.css';
@import 'module/nav-pills.css';
@import 'module/nav-tabs.css';
@import 'module/forms.css';
@import 'module/buttons.css';
@import 'module/tags-input.css';
@import 'module/tooltips.css';
@import 'module/accordions.css';
@import 'module/cards.css';
@import 'module/tables.css';
@import 'module/list-group.css';
@import 'module/badges-alerts.css';
@import 'module/progress.css';
@import 'module/spinners.css';
@import 'module/offcanvas.css';

/* === 5. ANIMATIONEN & EFFEKTE === */
@import 'module/animations.css';
@import 'module/overlay-spinner.css';
@import 'module/text-shadow.css';
@import 'module/effects.css';

/* === 6. WEITERE KOMPONENTEN === */
@import 'module/collapse.css';
@import 'module/modals.css';
@import 'module/flip-cards.css';
@import 'module/swipes.css';
@import 'module/background-images.css';
@import 'module/borders.css';
@import 'module/kompetenzlandkarte.css';

/* === 7. LAYOUT-FEATURES === */
@import 'module/searchlist.css';
@import 'module/sidebar.css';
@import 'module/resizable.css';

/* === 8. INTEGRATIONEN === */
@import 'module/tinymce.css';

/* === 9. SPEZIELLE FEATURES === */
@import 'module/lebenslauf-generator.css';

/* === 10. UTILITIES === */
@import 'module/utilities-margins.css';
@import 'module/utilities-components.css';

/* === 11. RESPONSIVE === */
@import 'module/responsive.css';

/* === 12. HUB-FIXES (jüngste QA-Tickets) === */
/* HUB-241 — cursor: pointer wird in der Default-Reboot-CSS auf .btn nur per
   Hover-State gesetzt, fehlt aber an etlichen interaktiven Elementen (Custom-
   Cards, Listenzeilen, Toggle-Items, dropdown-toggle). Hier deshalb global per
   Selektor-Liste setzen — überschreibt nur `default` (auto), nicht spezifische
   Cursor-States (`not-allowed` bei :disabled, `grab` bei Drag-Handles, …). */
a,
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
label,
summary,
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="reset"],
input[type="file"],
.btn:not(:disabled),
.dropdown-toggle,
.list-group-item-action,
.nav-link,
.page-link,
.form-check-input,
.form-switch .form-check-input,
.flip-card,
.clickable {
  cursor: pointer;
}

/* HUB-218 — Statische Seiten Impressum/Datenschutz/AGB/Kontakt: Wrapper trägt
   das Mandanten-Hintergrundbild (Hero-Foto aus tenant.hero_images), die innere
   `.card` schwebt darüber. Min-Höhe sorgt dafür, dass das Bild bei kurzem
   Inhalt sichtbar bleibt. */
.content-page-bg {
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: calc(100vh - 240px);
}

/* HUB-225 — Baukasten-Button-Labels responsiv. `clamp(min, preferred, max)`
   skaliert mit dem Viewport (1.2vw), behält aber kleine/große Devices in
   lesbaren Grenzen. Ersetzt das bisherige `fs-6` (statisch 1 rem). */
.baustein-btn-label {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.25;
}

/* HUB-225 / HUB-296 — `.btn-responsive` setzt die Schriftgröße auf dem
   Bausteine-Button selbst (und vererbt sie an alle inneren Spans), damit
   sowohl Label als auch Icon-/Status-Text mit-skaliert. Werte deutlich
   großzügiger als `.baustein-btn-label` (min 0.95 rem, preferred 1.35 vw,
   max 1.35 rem), damit auf Desktop wie im Referenzsystem jobsdn.de die
   Buttons mit ~21 px Text statt 16 px Bootstrap-Default erscheinen. */
.btn-responsive {
  font-size: clamp(0.95rem, 1.35vw, 1.35rem);
  line-height: 1.25;
}

/* HUB-375 (verallgemeinert HUB-228) — Die linke Icon-Navigation soll auf allen
   Unterseiten transparent über dem Mandanten-Hintergrundbild schweben (kein
   abgesetzter halbtransparenter weiß/grauer Kasten, analog jobsdn.de).
   `modules.css` setzt `#sidebar` generell `rgba(var(--bs-white-rgb), 0.5)
   !important` → auf Unterseiten ohne Hero wirkte das fremd. Vorher war der
   Transparenz-Override nur auf die PowerSuche (`body:has(.powersuche-page)`)
   beschränkt; jetzt gilt er für alle Seiten.

   Breakpoint-Trennung (HUB-375 verlangt Desktop UND Mobile geprüft):
   - Desktop (≥md, statische Sidebar): transparent → schwebt über dem Hero.
   - Mobile (<md, Offcanvas-Slide-in): deckender Panel-Hintergrund, damit das
     eingefahrene Menü lesbar bleibt und nicht der Seiteninhalt durchscheint. */
/* `body #sidebar` (Spezifität 1,0,1) ist nötig, weil `beraterkonto/modules.css`
   NACH dieser Datei geladen wird und dort `#sidebar` (1,0,0) !important den
   rgba(white,0.5)-Hintergrund setzt — ein gleichspezifischer Selektor hier
   verlöre per Quell-Reihenfolge. */
@media (min-width: 768px) {
  body #sidebar { background-color: transparent !important; }
}
@media (max-width: 767.98px) {
  body #sidebar { background-color: var(--bs-body-bg) !important; }
}

/* HUB-242 — Content-Bereich an Header-Maximalbreite koppeln. Der Header nutzt
   `w-xxxl-75 mx-auto`; der Hauptcontent (`.container-fluid` im Main-Layout)
   bekommt jetzt das gleiche Verhalten via Klassen-Liste. CSS-seitig hier nur
   den Bootstrap-Breakpoint sichtbar machen, falls Markup mal abweicht. */
@media (min-width: 1600px) {
  body > #root > div > .container-fluid.w-xxxl-75 {
    max-width: 75%;
  }
}

/* HUB-255 / HUB-290 — Schließ-Button (X) auf der Innen-Kante des Off-Canvas-
   Panels. Bei einem Panel, das von rechts in den Viewport schiebt
   (`.offcanvas-end`), liegt die Innen-Kante zum Hauptinhalt LINKS — dort
   muss das X für eine konsistente Schließ-Geste hingehen. Analog für
   Panels von links (`.offcanvas-start`): X auf rechte Innen-Kante.

   HUB-290-Refinement: `justify-content` muss explizit gesetzt sein. Unsere
   Header rendern aktuell nur den Close-Button (kein Title), Bootstrap-
   Default `justify-content: space-between` wird in unserem Layout
   tatsächlich nicht aktiv (computed = `normal`). Ohne `space-between`
   landet ein einzelnes Flex-Item bei `flex-direction: row-reverse` am
   Reverse-Start = visuell RECHTS — also außerhalb der Innen-Kante.
   Lösung: `flex-direction: row` + `space-between` für offcanvas-end
   (Close links), `flex-direction: row-reverse` + `space-between` für
   offcanvas-start (Close rechts). Funktioniert mit 1 Child (Close-only)
   und mit 2 Children (Close + Title) gleichermaßen. */
.offcanvas-end .offcanvas-header,
.offcanvas-header {
  flex-direction: row;
  justify-content: space-between;
}
.offcanvas-start .offcanvas-header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* HUB-235 — Schließ-Button-Bubble (X) in Offcanvas-Headern und Modal-Headern.
   36×36 px Kreis mit halb-deckendem Weiß-Hintergrund, deckungsgleich mit der
   bisherigen Inline-Style-Variante. */
/* HUB-273/HUB-371 — Touch-Target ≥44×44 (Apple HIG / WCAG 2.5.5). Vorher
   36×36 → unter dem Mindestmaß für Offcanvas-/Modal-Close-Buttons auf Touch. */
.btn-close-bubble {
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.9);
}

/* HUB-273/HUB-371 — Touch-Target-Mindesthöhe für sonst zu flache Buttons
   (z. B. die Tab-Buttons „Ihre Merkliste / Verlauf / JobRADAR", vorher 32px). */
.min-h-44 { min-height: 44px; }

/* HUB-371 — Unterer Freiraum, damit der schwebende „Karte"-Button (position-
   fixed, unten zentriert) die letzte Stellenkarte der Ergebnisliste nicht
   verdeckt (Screenshot 6). */
.pb-fab { padding-bottom: 5.5rem; }

/* HUB-384 (vorher HUB-371 #4a) — KI-Modal: Totraum zwischen Toggle und
   Eingabeblock auf Mobile. Ursprünglich kam der Body durch das Mobile-
   Fullscreen (modal-fullscreen-sm-down) auf volle Höhe → Inhalt oben, Footer
   unten, ~64 px Loch dazwischen + großer Leerraum unter dem Footer. flex-grow:0
   allein schloss das Loch nicht (gemessen weiterhin 64 px: Toggle-mb 16 +
   Body-pb 24 + Footer-pt 16 + Textarea-pt 8). Lösung: Modal auf Mobile NICHT
   mehr fullscreen (siehe `mobileFullscreen={false}` in ki-suche-page → kein
   Leerraum-Loch unten, zentrierte Karte) + Body-pb und Footer-pt straffen, der
   Eingabeblock rückt direkt unter den Toggle. Gemessen 64 px → ~28 px. */
@media (max-width: 576px) {
  /* !important nötig: der Modal-Body trägt Bootstrap-`py-4`, der Footer `py-3`
     — beide setzen padding mit !important und schlügen eine normale Regel. */
  .modal-body.modal-body-fit-sm { flex-grow: 0; padding-bottom: 0.75rem !important; }
  .modal-body.modal-body-fit-sm + .modal-footer { padding-top: 0.5rem !important; }
}

/* HUB-235 — Tenant-spezifische Cream-Hintergründe ohne Bootstrap-Pendant.
   `bg-cream-1` (#fdfaf5) für Offcanvas-Body, `bg-cream-2` (#fdf9f3) für
   Card-Insets/Hover-Backgrounds. Diese werden projektweit in mehreren
   Components gebraucht. */
.bg-cream-1 { background-color: #fdfaf5; }
.bg-cream-2 { background-color: #fdf9f3; }
.bg-white-soft { background-color: rgba(255, 255, 255, 0.9); }
.bg-black-soft-06 { background-color: rgba(0, 0, 0, 0.06); }

/* HUB-235 — Pixel-genaue Border-Radii ohne Bootstrap-Pendant. Bootstrap-
   `rounded-1` (4px) und `rounded-2` (6px wäre — ist aber 7px). */
.rounded-px-6 { border-radius: 6px; }

/* HUB-235 — Custom Font-Sizes für UI-Highlights. Bootstrap `fs-5` ist
   1.25rem; `fs-px-18` (1.1rem ≈ 18px) schließt die Lücke zu `fs-6` (1rem). */
.fs-px-15 { font-size: 0.95rem; line-height: 1; }
.fs-px-17 { font-size: 1.05rem; }
.fs-px-18 { font-size: 1.1rem; }
.fs-px-20 { font-size: 1.25rem; }
.fs-px-21 { font-size: 1.3rem; }
.fs-px-24 { font-size: 1.5rem; }
.fs-px-48 { font-size: 3rem; }
.fs-px-56 { font-size: 3.5rem; line-height: 1; }

/* HUB-235 — Designerische Schriftgrößen kleiner als Bootstrap-Default `small`
   (0.875rem). Bootstrap-`fs-*` springt von `fs-6` (1rem) direkt nach `text-xs`
   gibt es nicht — diese drei Helper schließen die Lücke. */
.fs-xs    { font-size: 0.8rem; }
.fs-xxs   { font-size: 0.7rem; }
.fs-xxxs  { font-size: 0.65rem; }

/* HUB-235 — min-width:0 in einem Flex-Item, damit overflow-Truncation greift
   (Bootstrap 5.3 hat hierfür keine eigene Utility). */
.min-w-0 { min-width: 0; }

/* HUB-235 — Newlines aus Markdown/Backend-Text als Zeilenumbrüche rendern,
   aber benachbarte Whitespace-Zeichen kollabieren. */
.white-space-pre-line { white-space: pre-line; }

/* HUB-235 — Pixel-genaue Höhen/Breiten ohne Bootstrap-Klassen-Pendant.
   Verwendet für slim-Progress-Bars, Icon-Bubbles, kompakte Avatar-Kreise. */
.h-px-4   { height: 4px; }
.h-px-6   { height: 6px; }
.h-px-16  { height: 1rem; }
.wh-px-36 { width: 36px; height: 36px; }

/* HUB-235 — Projektspezifische Off-White-Beige-Töne (Hero-/Offcanvas-Background,
   Footer-Background). Kein Bootstrap-Token-Pendant. */
.bg-beige-1 { background-color: #fdfaf5; }
.bg-beige-2 { background-color: #fcf8f1; }
.bg-primary-soft { background-color: rgba(var(--bs-primary-rgb), 0.08); }

/* HUB-235 — Card-/Sidebar-Mindestbreiten/-höhen ohne Bootstrap-Klassen-Pendant. */
.min-w-220   { min-width: 220px; }
.mh-px-140   { min-height: 140px; }
.mh-px-180   { min-height: 180px; }
.mh-px-120   { min-height: 120px; }
.mh-px-500   { min-height: 500px; }
.mh-calc-hero { min-height: calc(100vh - 220px); }
.min-h-0     { min-height: 0; }
.wh-px-32    { width: 32px; height: 32px; }
.w-px-80     { width: 80px; }

/* HUB-235 — negative-margin Top, weil Bootstrap-Spacing keine
   negativen Werte als Utility ausliefert ohne customisiertes Sass-Build. */
.mt-n1 { margin-top: -0.25rem; }

/* HUB-235 — wiederkehrende Karten-/Modal-/Container-MaxBreiten. */
.mw-px-440   { max-width: 440px; }
.mw-px-480   { max-width: 480px; }
.mw-px-700   { max-width: 700px; }
.mw-px-1100  { max-width: 1100px; }
.wh-px-50    { width: 50px; height: 50px; }
.w-px-60     { width: 60px; }

/* HUB-235 — Rotate/Top-Offset für das „Promo"-Sticker-Element (Jobradar-Promo). */
.rot-n15  { rotate: -15deg; }
.top-n-10 { top: -10px; }

/* HUB-235 — Notiz-Box (User-Notes, Verlaufseinträge): beiger Hintergrund mit
   Primary-Border links, pre-wrap für Backend-Newlines. */
.note-box {
  background-color: #f9f6f1;
  border-radius: 6px;
  border-left: 3px solid var(--bs-primary);
  white-space: pre-wrap;
}

/* HUB-235 — Eingabefeld mit explizitem Border, falls Site-CSS `.form-control`
   borderless macht (HUB-256). Lokale Helper-Klasse statt 2× Inline-Style. */
.input-clear {
  border: 1px solid #ced4da;
  background-color: #fff;
  padding: 0.5rem 0.75rem;
}

/* HUB-235 — Hero-Titel über Header-Bild (PowerSuche, JobRADAR): responsiv mit
   clamp, leichter Text-Shadow für Lesbarkeit auf Foto-Background. */
.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* HUB-235 — Drop-Shadow für floating Icons über Hero-Bildern. */
.drop-shadow { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }

/* HUB-235 — z-Index-Layer über den Bootstrap-Defaults für Autocomplete-Popovers
   und Hero-Backdrops. */
.z-10    { z-index: 10; }
.z-1000  { z-index: 1000; }
.z-9999  { z-index: 9999; }

/* HUB-296 — `.btn-responsive` + `.btn-anim` als globale Plattform-Utilities.
   Die ursprünglichen Definitionen liegen in 251017-theme.css, die aber nicht
   im Build geladen wird. Damit die Klassen aus der jobsdn.de-Referenz greifen,
   hier dieselben Regeln in der geladenen main.css duplizieren. clamp() ist
   schlanker als die Original-Media-Query-Variante und deckt den Referenzwert
   21,6 px (= 1,35 rem) auf großen Viewports ab. */
.btn-responsive {
  font-size: clamp(0.875rem, 1.3vw, 1.35rem);
  --bs-btn-font-size: clamp(0.875rem, 1.3vw, 1.35rem);
}

/* HUB-316 — Hover-Verhalten der Auswahl-Kachel-Buttons (Bausteine, Modal-
   Tiles, sonstige tile-artige `.btn-light .btn-anim`-Komponenten):
   geschmeidige 0.15 s-Transition für `transform` + `box-shadow`. Hover und
   Tastatur-`:focus-visible` zeigen identisches Feedback (Lift + Schatten,
   plus heller werdende Mandanten-Hintergrundfarbe via Bootstrap's
   `--bs-btn-hover-bg`). `:active` nimmt den Lift zurück und gibt taktiles
   Press-Feedback. WCAG 2.4.7-konform durch focus-visible-Spiegelung.
   Werte aus jobsdn.de-Cross-Referenzmessung. */
.btn-anim {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-anim:hover,
.btn-anim:focus-visible {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 .25rem .5rem rgba(var(--bs-dark-rgb), .12);
}
.btn-anim:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 .125rem .25rem rgba(var(--bs-dark-rgb), .08);
}

/* HUB-235 — Autocomplete-Popover-Höhen und QR-Code-Quadrate. */
.mh-px-200  { max-height: 200px; }
.mh-px-300  { max-height: 300px; }
.mh-px-420  { max-height: 420px; }
.wh-px-128  { width: 128px; height: 128px; }
.w-px-20    { width: 20px; }
.h-px-24    { height: 24px; }

/* HUB-235 — Responsive Modal-/Sheet-Breiten mit min(px, vw)-Pattern. */
.w-min-560  { width: min(560px, 92vw); }
.w-min-1200 { width: min(1200px, 92vw); }
.z-2000     { z-index: 2000; }

/* HUB-235 — Sidebar-Tile (96×96 rounded card) und User-Avatar-Badge (32×32). */
.sidebar-tile {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 0;
}

/* HUB-371 — Mobile-Hauptnav (Burger-Offcanvas). Auf <md rendert #sidebar als
   Slide-in (offcanvas-md). Die Desktop-Hover-Flyout-Labels (.sidebar-info:
   position:absolute, left:100%+0.5rem, min-width:18rem) ragen aus dem 140px-
   Panel → auf echten Geräten (iPhone 16 Pro) abgeschnittene Labels + Durchsicht
   auf die Seite (HUB-371 Screenshot 3). Auf <md daher: breiteres Panel, Labels
   INLINE neben dem Icon, Tiles als volle Touch-Reihen. !important schlägt die
   Theme-Regeln und den Inline-`width:140`. */
@media (max-width: 767.98px) {
  #sidebar.offcanvas-md {
    width: min(330px, 86vw) !important;
    padding-left: 0 !important;
  }
  #sidebar.offcanvas-md .offcanvas-body {
    display: block !important;
    width: 100%;
    padding: 0.5rem;
  }
  #sidebar.offcanvas-md .offcanvas-body > .d-flex {
    width: 100%;
  }
  #sidebar.offcanvas-md .sidebar-tile {
    width: 100% !important;
    height: auto !important;
    min-height: 56px;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 0.85rem;
    padding: 0.55rem 0.85rem !important;
    text-align: left;
  }
  #sidebar.offcanvas-md .sidebar-tile > i {
    order: 1;
    flex: 0 0 auto;
    font-size: 1.9rem !important;
    line-height: 1;
  }
  /* Label inline statt absolutem Flyout */
  #sidebar.offcanvas-md .sidebar-info {
    order: 2;
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto;
    flex: 1 1 auto;
  }
}
/* HUB-371 — Nav-Kachel-Labels (Flip-Cards auf der Suchportal-Startseite).
   Lange Labels wie „Ausbildungsstellen" brachen auf dem echten Gerät mitten
   im Wort um und überlagerten das Icon (Screenshot 2). Responsive font-size +
   saubere Silbentrennung halten das Label in der quadratischen Kachel. */
.flip-card-front > span {
  font-size: clamp(0.7rem, 2.6vw, 1rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.user-avatar-32 {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* HUB-235 — Letter-Spacing für generierte Passwörter / Codes. */
.letter-spacing-1 { letter-spacing: 1px; }

/* HUB-235 — PowerSuche-Bausteine: Card-Style + Icon-Bubble + Icon. */
.baustein-card {
  background-color: #fff;
  border: none;
  border-radius: 12px;
  text-align: left;
}
.baustein-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f3ece1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.baustein-icon {
  font-size: 1.4rem;
  color: #666;
}

/* HUB-235 — Modal-/Lightbox-Backdrops mit projektspezifischen Stacking-Werten
   über Bootstrap-Defaults (Bootstrap-Modal hat z-1055). */
.backdrop-light {
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1999;
}
.backdrop-mid {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3000;
}
.backdrop-dark {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3500;
}