/**
 * 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-228 — #sidebar auf der PowerSuche-Seite transparent. modules.css setzt
   für #sidebar generell `background-color: rgba(var(--bs-white-rgb), 0.5)
   !important`, das überlagert das Hero-Bild auf der PowerSuche unschön. Mit
   einer page-spezifischen Markerklasse `.powersuche-page` am Page-Root reicht
   ein passender Sibling-Selektor in der Layout-Struktur nicht, also targeten
   wir den Body der Route über die URL nicht — sondern setzen den Override für
   `#sidebar`, wenn ein `.powersuche-page` irgendwo im DOM existiert. Der
   `:has`-Selektor ist in allen Ziel-Browsern (Chrome 105+, Safari 15.4+,
   Firefox 121+) verfügbar. */
body:has(.powersuche-page) #sidebar {
  background-color: transparent !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. */
.btn-close-bubble {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.9);
}

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