/* NOX – ergänzendes CSS (Tailwind kommt per CDN) */

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

html { color-scheme: dark; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0F0F0F; }
::-webkit-scrollbar-thumb { background: #2D2D5E; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #4C1D95; }

/* Autofill an Dark-Mode anpassen */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F1F5F9;
  -webkit-box-shadow: 0 0 0 1000px #0F0F0F inset;
  caret-color: #F1F5F9;
}

/* Datepicker-Icon einfärben */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }

/* 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
   vom Play-CDN nicht 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 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #7C3AED; outline-offset: 1px;
}

/* Eingang-Animation für Hauptinhalt */
main { animation: nox-fade 0.25s ease; }
@keyframes nox-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: 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 erzeugt das Play-CDN nicht zuverlässig, daher echtes CSS. */
@media (min-width: 1024px) { .nox-detail-side { margin-top: 55px; } }