/* =====================================================================
   Corporate Font (Google Sans) + fixe Kopfbereiche im Admin.
   Wird global über UNFOLD["STYLES"] auf allen Admin-Seiten geladen.
   ===================================================================== */

/* --- Corporate Font: Google Sans -------------------------------------
   Pfade sind relativ zu dieser CSS-Datei (=> /static/pim/fonts/...). */
@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Corporate Font überall anwenden – Icon-Font (Material Symbols) bleibt
   ausgenommen, weil diese ihre eigene font-family per Klasse setzen. */
:root { --font-sans: "Google Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; }
html, body, button, input, select, textarea, optgroup,
.font-sans {
  font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }

/* =====================================================================
   Fixe Kopfbereiche – bleiben beim Scrollen oben stehen.
   ===================================================================== */

/* 1) Unfold-Kopfleiste (Sidebar-Toggle + Titel/Breadcrumb + Buttons) */
#main > div.border-b {
  position: sticky;
  top: 0;
  z-index: 50;
  /* mb-6 des Headers entfernen, damit die Suchleiste bündig andocken kann */
  margin-bottom: 0 !important;
}

/* 2) Listen-Werkzeugleiste (Suche + Filter) klebt direkt unter dem Header */
#changelist .changelist-form-container div:has(> #toolbar),
#changelist .changelist-form-container > div > div:has(#toolbar) {
  position: sticky;
  top: 64px;                 /* Höhe der Header-Leiste (h-16) */
  z-index: 40;
  background: #fff;
  padding-top: 10px;
  margin-top: 0;
}
.dark #changelist .changelist-form-container div:has(> #toolbar),
.dark #changelist .changelist-form-container > div > div:has(#toolbar) {
  background: rgb(9 9 11);   /* base-950 – passt zum dunklen Hintergrund */
}

/* Etwas Luft unter dem Header wiederherstellen (statt des entfernten mb-6) */
#main > div.border-b { padding-bottom: 0; }
#content { padding-top: 12px; }

/* 3) Spaltenüberschriften der Liste sichtbar halten: Die fixierte Such-/Filter-
   leiste (oben, z-index 40, deckender Hintergrund) überlagerte sonst die Kopf-
   zeile der Tabelle. Wir heben die Kopfzelle per z-index darüber. */
#result_list thead th { position: relative; z-index: 41; }

/* 4) Volle Bildschirmbreite: Unfold begrenzt den Inhalt über die Tailwind-Klasse
   „container" auf #content (max-width, per mx-auto zentriert) → große leere
   Ränder auf breiten Monitoren. Wir heben die Begrenzung auf, der Inhalt nutzt
   die gesamte verfügbare Breite neben der Sidebar. */
#content.container { max-width: none; }

/* =====================================================================
   6) Django-/Unfold-Meldungen als schwebendes OVERLAY (portalweit).
   Unfold rendert Meldungen als <ul> mit <li><div class="bg-*-100 …">.
   Wir lösen die Liste aus dem Fluss (position:fixed) → sie verschiebt den
   Inhalt nicht mehr (kein „Springen") und ist immer sichtbar. Das
   Auto-Ausblenden übernimmt messages.js (global via UNFOLD["SCRIPTS"]).
   ===================================================================== */
ul:has(> li > div[class*="bg-green-100"]),
ul:has(> li > div[class*="bg-red-100"]),
ul:has(> li > div[class*="bg-orange-100"]),
ul:has(> li > div[class*="bg-blue-100"]) {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 100000; margin: 0 !important; width: auto;
  max-width: min(92vw, 720px);
  box-shadow: 0 14px 40px rgba(0,0,0,.30); border-radius: 12px;
  transition: opacity .35s ease, transform .35s ease;
}
/* Klasse, die messages.js zum sanften Ausblenden setzt */
ul.tt-msg-hide { opacity: 0 !important; transform: translateX(-50%) translateY(-12px) !important; }

/* =====================================================================
   5) Speichern-Buttons portalweit einfärben:
        „Sichern" (_save)                → grün
        „Sichern und weiter bearbeiten" (_continue) → grün
        „Sichern und neu hinzufügen" (_addanother)  → blau
        „Löschen" (_delete)             → unverändert (rot)
   Ansprache über den name= der Buttons → unabhängig vom Unfold-Markup.
   ===================================================================== */
button[name="_save"], input[name="_save"],
button[name="_continue"], input[name="_continue"] {
  background-color: #059669 !important;   /* grün 600 */
  border-color: #059669 !important;
  color: #ffffff !important;
}
button[name="_save"]:hover, input[name="_save"]:hover,
button[name="_continue"]:hover, input[name="_continue"]:hover {
  background-color: #047857 !important;   /* grün 700 (Hover) */
  border-color: #047857 !important;
  color: #ffffff !important;
}
button[name="_addanother"], input[name="_addanother"] {
  background-color: #2563eb !important;   /* blau 600 */
  border-color: #2563eb !important;
  color: #ffffff !important;
}
button[name="_addanother"]:hover, input[name="_addanother"]:hover {
  background-color: #1d4ed8 !important;   /* blau 700 (Hover) */
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}
/* Icons/Text in den Buttons weiß */
button[name="_save"] *, button[name="_continue"] *, button[name="_addanother"] * {
  color: #ffffff !important;
}