/* NOX – ergänzendes CSS. Farben kommen als RGB-Tripel aus den CSS-Variablen
   (--nox-*, gesetzt in base.html aus den Design-Einstellungen) – dadurch
   funktionieren alle Regeln auch mit dem hellen Farb-Preset. */

[x-cloak] { display: none !important; }

/* Schmale, theme-folgende Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgb(var(--nox-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--nox-border)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--nox-primary-dark)); }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--nox-border)) rgb(var(--nox-bg)); }

/* Autofill an das Theme anpassen */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(var(--nox-text));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--nox-bg)) inset;
  caret-color: rgb(var(--nox-text));
}

/* Datepicker-Icon einfärben (nur bei dunklem Theme invertieren) */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
html.nox-dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }

/* iOS/Safari rendert date-Inputs als natives Control mit fester intrinsischer
   Breite, die width:100%/min-width:0 ignoriert → in schmalen Spalten (innere
   Grids) ragt das Feld über den Rand. appearance:none normalisiert das Box-Modell
   (der Tap-Picker bleibt erhalten). min-height gleicht die durch appearance:none
   verlorene native Höhe an die übrigen Felder (py-2 + text-sm ≈ 2.375rem) an. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.375rem;
}

/* Formularfelder dürfen in schmalen Grid-Spalten schrumpfen, statt sie zu sprengen.
   Ohne dies erzwingen v.a. native date-/number-Inputs (Safari/iPadOS) ihre
   intrinsische Mindestbreite → Spalten laufen über den rechten Rand (Tablet-Hochformat). */
input, select, textarea { min-width: 0; max-width: 100%; }

/* Das Asset-Formular ordnet Felder per CSS-`order` um. Zusammen mit den
   `col-span-2`-Feldern kann der Grid-Algorithmus eine implizite Spalte erzeugen,
   die standardmäßig `auto`-breit ist → die rechte Spalte läuft über den Rand
   (v.a. Tablet-Hochformat). Implizite Spalten ebenfalls auf schrumpfbar zwingen: */
form .grid { grid-auto-columns: minmax(0, 1fr); }

/* WICHTIG: Grid-Items müssen unter ihre intrinsische min-content schrumpfen dürfen,
   sonst zwingt ein `col-span-2`-Feld mit breitem Inhalt (z.B. <select> mit langen
   Optionen, die Safari nicht schrumpft) beide 1fr-Spalten breiter als der halbe
   Container → das ganze Grid läuft über. Die Tailwind-Klasse `[&>*]:min-w-0` wird
   nicht in jedem Build zuverlässig erzeugt, daher hier als echtes CSS: */
form .grid > * { min-width: 0; }

/* Sanfte Übergänge für Tabellenzeilen */
tbody tr { transition: background-color 0.12s ease; }

/* Fokus-Sichtbarkeit (Tastatur-Navigation) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgb(var(--nox-primary-light)); outline-offset: 1px;
}

/* Eingang-Animation für Hauptinhalt (reine Opacity – kein transform, um in Chrome
   keine Compositing-Ebene zu erzeugen, die beim Resize zu Hit-Test-/Maus-Versatz führt). */
main { animation: nox-fade 0.25s ease; }
@keyframes nox-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  tbody tr { transition: none; }
}

/* Asset-Detail: rechte Seitenleiste oben bündig mit dem Inhalt unter der Tab-Leiste
   (Tab-Leiste ≈ 38px Button + 1px Border + 16px mb-4 = 55px). Arbitrary-Tailwind-
   Werte werden nicht in jedem Build zuverlässig erzeugt, daher echtes CSS. */
@media (min-width: 1024px) { .nox-detail-side { margin-top: 55px; } }

/* Lucide-Icons (static/vendor/lucide.svg): erben Textfarbe, skalieren mit Schriftgröße */
.nox-icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }

/* ── Tabellendichte: „Kompakt" (Asset-Liste, Cookie asset_density) ─────────── */
table.nox-compact thead th { padding-top: 0.45rem; padding-bottom: 0.45rem; }
table.nox-compact tbody td { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 13px; }
/* Hersteller/Modell rutscht kompakt in die Namenszeile */
table.nox-compact .nox-name-sub { display: inline; margin-left: 0.4rem; }

/* ── Asset-Detail: Feldzeilen ab xl zweispaltig (halbe Scrollhöhe) ─────────── */
.nox-drows > div { border-bottom: 1px solid rgb(var(--nox-border) / 0.55); }
.nox-drows > div:last-child { border-bottom: 0; }
@media (min-width: 1280px) {
  .nox-drows { display: grid; grid-template-columns: 1fr 1fr; }
  .nox-drows > div:nth-child(odd) { border-right: 1px solid rgb(var(--nox-border) / 0.55); }
  .nox-drows > div:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── Grundriss-Vorschau: helles Plan-Papier dunkel einfassen ───────────────── */
.nox-plan-thumb { border-radius: 4px; filter: saturate(0.9) brightness(0.9); }