/* assets/css/utilities.css

   Wiederverwendbare Utility-Klassen für Menü, Editor und Asset-Editor (Guideline 3.3,
   Code Control 2026-09-17, Refactoring „Inline-Styles in großem Umfang").

   Namensschema der Abstände: Die Zahl nennt den Pixelwert bei 16 px Grundschrift, der Wert
   steht in rem (u-gap-8 = 0.5rem = 8 px). So bleibt beim Lesen des Markups klar, wie groß ein
   Abstand ist, und trotzdem skalieren alle Abstände mit der Grundschrift der Seite.
   Schriftgrößen stehen in em (u-fs-85 = 0.85em), weil sie bewusst relativ zur Umgebung sind.

   Für Einzelfälle, die sich nicht sinnvoll aus Utilities zusammensetzen, gibt es Komponenten-
   Klassen im Stylesheet des jeweiligen Bereichs (editor.css, asset_editor.css, …). */

/* ---------- Anzeige & Flex/Grid ---------- */
.u-block        { display: block; }
.u-inline-block { display: inline-block; }
.u-flex         { display: flex; }
.u-inline-flex  { display: inline-flex; }
.u-grid         { display: grid; }
.u-flex-col     { display: flex; flex-direction: column; }
.u-flex-row     { flex-direction: row; }
.u-wrap         { flex-wrap: wrap; }
.u-nowrap       { white-space: nowrap; }
.u-items-center { align-items: center; }
.u-items-start  { align-items: flex-start; }
.u-items-end    { align-items: flex-end; }
.u-items-stretch { align-items: stretch; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-start   { justify-content: flex-start; }
.u-self-center  { align-self: center; }
.u-flex-1       { flex: 1; }
.u-flex-2       { flex: 2; }
.u-flex-none    { flex: none; }
.u-shrink-0     { flex-shrink: 0; }
.u-grid-2       { display: grid; grid-template-columns: 1fr 1fr; }
.u-grid-3       { display: grid; grid-template-columns: 1fr 1fr 1fr; }

/* ---------- Abstände zwischen Elementen (gap) ---------- */
.u-gap-2  { gap: 0.125rem; }
.u-gap-4  { gap: 0.25rem; }
.u-gap-5  { gap: 0.3125rem; }
.u-gap-6  { gap: 0.375rem; }
.u-gap-8  { gap: 0.5rem; }
.u-gap-10 { gap: 0.625rem; }
.u-gap-12 { gap: 0.75rem; }
.u-gap-14 { gap: 0.875rem; }
.u-gap-16 { gap: 1rem; }
.u-gap-20 { gap: 1.25rem; }
.u-gap-24 { gap: 1.5rem; }

/* ---------- Außenabstände ---------- */
.u-m-0   { margin: 0; }
.u-mt-0  { margin-top: 0; }
.u-mt-2  { margin-top: 0.125rem; }
.u-mt-4  { margin-top: 0.25rem; }
.u-mt-6  { margin-top: 0.375rem; }
.u-mt-8  { margin-top: 0.5rem; }
.u-mt-10 { margin-top: 0.625rem; }
.u-mt-12 { margin-top: 0.75rem; }
.u-mt-16 { margin-top: 1rem; }
.u-mt-20 { margin-top: 1.25rem; }
.u-mb-0  { margin-bottom: 0; }
.u-mb-2  { margin-bottom: 0.125rem; }
.u-mb-4  { margin-bottom: 0.25rem; }
.u-mb-5  { margin-bottom: 0.3125rem; }
.u-mb-6  { margin-bottom: 0.375rem; }
.u-mb-8  { margin-bottom: 0.5rem; }
.u-mb-10 { margin-bottom: 0.625rem; }
.u-mb-12 { margin-bottom: 0.75rem; }
.u-mb-13 { margin-bottom: 0.8rem; }
.u-mb-16 { margin-bottom: 1rem; }
.u-mb-20 { margin-bottom: 1.25rem; }
.u-mr-2  { margin-right: 0.125rem; }
.u-mr-3  { margin-right: 0.1875rem; }
.u-mr-4  { margin-right: 0.25rem; }
.u-mr-5  { margin-right: 0.3125rem; }
.u-mr-6  { margin-right: 0.375rem; }
.u-mr-8  { margin-right: 0.5rem; }
.u-mr-10 { margin-right: 0.625rem; }
.u-ml-4  { margin-left: 0.25rem; }
.u-ml-6  { margin-left: 0.375rem; }
.u-ml-8  { margin-left: 0.5rem; }
.u-ml-auto { margin-left: auto; }

/* ---------- Innenabstände ---------- */
.u-p-0   { padding: 0; }
.u-p-4   { padding: 0.25rem; }
.u-p-6   { padding: 0.375rem; }
.u-p-8   { padding: 0.5rem; }
.u-p-10  { padding: 0.625rem; }
.u-p-12  { padding: 0.75rem; }
.u-p-16  { padding: 1rem; }
.u-p-20  { padding: 1.25rem; }
.u-p-32  { padding: 2rem; }
.u-pt-8  { padding-top: 0.5rem; }
.u-pt-12 { padding-top: 0.75rem; }
.u-pr-4  { padding-right: 0.25rem; }

/* ---------- Größen ---------- */
.u-w-full { width: 100%; box-sizing: border-box; }
.u-h-full { height: 100%; }
.u-min-w-0 { min-width: 0; }
/* Schmale Zahlenfelder (Koordinaten, Z-Index) und die Wertanzeige neben Schiebereglern */
.u-w-num  { width: 5rem; }
.u-w-num-sm { width: 4.5rem; }
.u-w-value { min-width: 2.8rem; }
.u-w-color { width: 10rem; }

/* ---------- Text ---------- */
.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }
.u-text-left    { text-align: left; }
.u-text-primary { color: var(--clr-text-primary); }
.u-text-muted   { color: var(--clr-text-muted); }
.u-text-light   { color: var(--clr-text-light); }
.u-text-accent  { color: var(--clr-primary-main); }
.u-text-secondary { color: var(--clr-secondary-main); }
.u-text-danger  { color: var(--clr-status-danger); }
.u-text-success { color: var(--clr-status-success); }
.u-text-warning { color: var(--clr-status-warning); }
.u-text-info    { color: var(--clr-accent-sky); }
.u-bold      { font-weight: bold; }
.u-semibold  { font-weight: 600; }
.u-normal    { font-weight: normal; }
.u-italic    { font-style: italic; }
.u-mono      { font-family: monospace; }
.u-tabular   { font-variant-numeric: tabular-nums; }
.u-uppercase { text-transform: uppercase; }
.u-ellipsis  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-lh-14     { line-height: 1.4; }
.u-fs-70  { font-size: 0.7em; }
.u-fs-75  { font-size: 0.75em; }
.u-fs-80  { font-size: 0.8em; }
.u-fs-85  { font-size: 0.85em; }
.u-fs-90  { font-size: 0.9em; }
.u-fs-95  { font-size: 0.95em; }
.u-fs-100 { font-size: 1em; }
.u-fs-110 { font-size: 1.1em; }
.u-fs-120 { font-size: 1.2em; }
.u-fs-150 { font-size: 1.5em; }

/* ---------- Verhalten ---------- */
.u-pointer     { cursor: pointer; }
.u-overflow-auto { overflow-y: auto; }
.u-overflow-hidden { overflow: hidden; }
.u-relative    { position: relative; }
.u-opacity-60  { opacity: 0.6; }
.u-opacity-80  { opacity: 0.8; }

/* ---------- Ergänzt beim Umbau der Inline-Styles (2026-09-18) ----------
   Reihenfolge: Kurzformen (u-m-*, u-p-*) → Achsen (u-mx/my, u-px/py) → Einzelseiten, damit
   eine Einzelseite eine Kurzform am selben Element überschreibt. */
.u-absolute { position: absolute; }
.u-bg-accent { background: var(--clr-primary-main); }
.u-bg-accent-subtle { background: var(--clr-primary-subtle); }
.u-bg-border { background: var(--clr-border-light); }
.u-bg-danger-subtle { background: var(--clr-status-danger-subtle); }
.u-bg-dark { background: var(--clr-surface-dark); }
.u-bg-input { background: var(--clr-surface-input); }
.u-bg-none { background: none; }
.u-bg-pink { background: var(--clr-accent-pink); }
.u-bg-secondary { background: var(--clr-secondary-main); }
.u-bg-secondary-subtle { background: var(--clr-secondary-subtle); }
.u-bg-shade-15 { background: var(--clr-shade-15); }
.u-bg-shade-20 { background: var(--clr-shade-20); }
.u-bg-sky { background: var(--clr-accent-sky); }
.u-bg-subcard { background: var(--clr-surface-subcard); }
.u-bg-surface { background: var(--clr-surface-main); }
.u-bg-transparent { background: transparent; }
.u-blur-12 { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.u-border { border: 1px solid var(--clr-border-light); }
.u-border-accent { border: 1px solid var(--clr-primary-main); }
.u-border-b { border-bottom: 1px solid var(--clr-border-light); }
.u-border-b-surface-border { border-bottom: 1px solid var(--clr-surface-border); }
.u-border-box { box-sizing: border-box; }
.u-border-color-pink { border-color: var(--clr-accent-pink); }
.u-border-danger { border: 1px solid var(--clr-status-danger); }
.u-border-dashed-secondary { border: 1px dashed var(--clr-secondary-main); }
.u-border-none { border: none; }
.u-border-r { border-right: 1px solid var(--clr-border-light); }
.u-border-surface-border { border: 1px solid var(--clr-surface-border); }
.u-border-t { border-top: 1px solid var(--clr-border-light); }
.u-border-t-dashed-surface-border { border-top: 1px dashed var(--clr-surface-border); }
.u-bottom-0 { bottom: 0; }
.u-col-span-2 { grid-column: span 2; }
.u-cols-1-140-180 { grid-template-columns: 1fr 8.75rem 11.25rem; }
.u-cols-1-auto { grid-template-columns: 1fr auto; }
.u-cols-2 { grid-template-columns: 1fr 1fr; }
.u-cols-2-1 { grid-template-columns: 2fr 1fr; }
.u-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.u-cols-4 { grid-template-columns: repeat(4, 1fr); }
.u-cols-fill-200 { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.u-cols-label-100 { grid-template-columns: 6.25rem 1fr 3.125rem; }
.u-cols-label-110 { grid-template-columns: 6.875rem 1fr 3.125rem; }
.u-events-none { pointer-events: none; }
.u-flex-1p5 { flex: 1.5; }
.u-flex-3 { flex: 3; }
.u-flex-auto { flex: 1 1 auto; }
.u-flex-fixed-360 { flex: 0 0 22.5rem; }
.u-flex-full { flex: 1 1 100%; }
.u-font-regular { font-family: var(--font-regular); }
.u-fs-78 { font-size: 0.78em; }
.u-fs-82 { font-size: 0.82em; }
.u-fs-88 { font-size: 0.88em; }
.u-fs-105 { font-size: 1.05em; }
.u-fs-115 { font-size: 1.15em; }
.u-fs-125 { font-size: 1.25em; }
.u-fs-300 { font-size: 3em; }
.u-fs-r11 { font-size: 0.6875rem; }
.u-gap-3 { gap: 0.1875rem; }
.u-gap-10-16 { gap: 0.625rem 1rem; }
.u-gap-13 { gap: 0.8125rem; }
.u-gap-18 { gap: 1.125rem; }
.u-glow-sky { box-shadow: var(--shadow-glow-sky); }
.u-h-1px { height: 1px; }
.u-h-8 { height: 0.5rem; }
.u-h-16 { height: 1rem; }
.u-h-18 { height: 1.125rem; }
.u-h-28 { height: 1.75rem; }
.u-h-30 { height: 1.875rem; }
.u-h-34 { height: 2.125rem; }
.u-h-36 { height: 2.25rem; }
.u-h-40 { height: 2.5rem; }
.u-left-0 { left: 0; }
.u-left-14 { left: 0.875rem; }
.u-left-50p { left: 50%; }
.u-lh-125 { line-height: 1.25; }
.u-lh-r18 { line-height: 1.125rem; }
.u-m-auto { margin: auto; }
.u-max-h-70vh { max-height: 70vh; }
.u-max-h-72vh { max-height: 72vh; }
.u-max-h-140 { max-height: 8.75rem; }
.u-max-h-160 { max-height: 10rem; }
.u-max-h-180 { max-height: 11.25rem; }
.u-max-h-220 { max-height: 13.75rem; }
.u-max-h-480 { max-height: 30rem; }
.u-max-h-520 { max-height: 32.5rem; }
.u-max-w-100p { max-width: 100%; }
.u-max-w-140 { max-width: 8.75rem; }
.u-max-w-150 { max-width: 9.375rem; }
.u-max-w-320 { max-width: 20rem; }
.u-min-h-1p2em { min-height: 1.2em; }
.u-min-h-150 { min-height: 9.375rem; }
.u-min-h-350 { min-height: 21.875rem; }
.u-min-w-12em { min-width: 12em; }
.u-min-w-16 { min-width: 1rem; }
.u-min-w-32 { min-width: 2rem; }
.u-min-w-45 { min-width: 2.8125rem; }
.u-min-w-55 { min-width: 3.4375rem; }
.u-min-w-60 { min-width: 3.75rem; }
.u-min-w-80 { min-width: 5rem; }
.u-min-w-110 { min-width: 6.875rem; }
.u-not-allowed { cursor: not-allowed; }
.u-opacity-70 { opacity: 0.7; }
.u-opacity-85 { opacity: 0.85; }
.u-overflow-x-auto { overflow-x: auto; }
.u-p-1px { padding: 1px; }
.u-p-2 { padding: 0.125rem; }
.u-p-13 { padding: 0.8125rem; }
.u-p-14 { padding: 0.875rem; }
.u-p-24 { padding: 1.5rem; }
.u-p-30 { padding: 1.875rem; }
.u-resize-y { resize: vertical; }
.u-right-0 { right: 0; }
.u-select-none { user-select: none; }
.u-shadow-popup { box-shadow: var(--shadow-popup); }
.u-shadow-popup-lg { box-shadow: var(--shadow-popup-lg); }
.u-text-accent-text { color: var(--clr-primary-text); }
.u-text-cyan { color: var(--clr-accent-cyan); }
.u-text-ellipsis { text-overflow: ellipsis; }
.u-text-pink { color: var(--clr-accent-pink); }
.u-text-sky { color: var(--clr-accent-sky); }
.u-text-slate { color: var(--clr-accent-slate); }
.u-text-violet { color: var(--clr-accent-violet-border); }
.u-top-0 { top: 0; }
.u-top-50p { top: 50%; }
.u-top-below-4 { top: calc(100% + 0.25rem); }
.u-tracking-half { letter-spacing: 0.5px; }
.u-transition-all { transition: all 0.15s ease; }
.u-transition-bg { transition: background 0.2s; }
.u-transition-opacity { transition: opacity 0.2s ease; }
.u-transition-width { transition: width 0.1s linear; }
.u-translate-center { transform: translate(-50%, -50%); }
.u-w-0p { width: 0%; }
.u-w-1p7em { width: 1.7em; }
.u-w-1px { width: 1px; }
.u-w-2 { width: 0.125rem; }
.u-w-4 { width: 0.25rem; }
.u-w-5em { width: 5em; }
.u-w-30 { width: 1.875rem; }
.u-w-36 { width: 2.25rem; }
.u-w-44 { width: 2.75rem; }
.u-w-50p { width: 50%; }
.u-w-55 { width: 3.4375rem; }
.u-w-70 { width: 4.375rem; }
.u-w-75 { width: 4.6875rem; }
.u-w-80 { width: 5rem; }
.u-w-90 { width: 5.625rem; }
.u-w-100 { width: 6.25rem; }
.u-w-120 { width: 7.5rem; }
.u-w-140 { width: 8.75rem; }
.u-w-220 { width: 13.75rem; }
.u-z-50 { z-index: 50; }
.u-z-10000 { z-index: 10000; }
.u-z-10001 { z-index: 10001; }
.u-z-99999 { z-index: 99999; }
.u-mx-0 { margin-left: 0; margin-right: 0; }
.u-mx-4 { margin-left: 0.25rem; margin-right: 0.25rem; }
.u-mx-8 { margin-left: 0.5rem; margin-right: 0.5rem; }
.u-my-0 { margin-top: 0; margin-bottom: 0; }
.u-my-6 { margin-top: 0.375rem; margin-bottom: 0.375rem; }
.u-my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.u-my-12 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.u-px-0 { padding-left: 0; padding-right: 0; }
.u-px-4 { padding-left: 0.25rem; padding-right: 0.25rem; }
.u-px-5 { padding-left: 0.3125rem; padding-right: 0.3125rem; }
.u-px-6 { padding-left: 0.375rem; padding-right: 0.375rem; }
.u-px-8 { padding-left: 0.5rem; padding-right: 0.5rem; }
.u-px-10 { padding-left: 0.625rem; padding-right: 0.625rem; }
.u-px-11 { padding-left: 0.6875rem; padding-right: 0.6875rem; }
.u-px-12 { padding-left: 0.75rem; padding-right: 0.75rem; }
.u-px-14 { padding-left: 0.875rem; padding-right: 0.875rem; }
.u-px-16 { padding-left: 1rem; padding-right: 1rem; }
.u-px-19 { padding-left: 1.1875rem; padding-right: 1.1875rem; }
.u-py-0 { padding-top: 0; padding-bottom: 0; }
.u-py-1px { padding-top: 1px; padding-bottom: 1px; }
.u-py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.u-py-3 { padding-top: 0.1875rem; padding-bottom: 0.1875rem; }
.u-py-4 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.u-py-5 { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
.u-py-6 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.u-py-7 { padding-top: 0.4375rem; padding-bottom: 0.4375rem; }
.u-py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.u-py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.u-mb-14 { margin-bottom: 0.875rem; }
.u-ml-10 { margin-left: 0.625rem; }
.u-mt-1px { margin-top: 1px; }
.u-mt-3 { margin-top: 0.1875rem; }
.u-mt-13 { margin-top: 0.8125rem; }
.u-pb-6 { padding-bottom: 0.375rem; }
.u-pb-8 { padding-bottom: 0.5rem; }
.u-pl-4 { padding-left: 0.25rem; }
.u-pr-2 { padding-right: 0.125rem; }
.u-pr-6 { padding-right: 0.375rem; }
.u-pr-14 { padding-right: 0.875rem; }
.u-pt-13 { padding-top: 0.8125rem; }


/* ---------- Wiederkehrende Bausteine ---------- */

/* Beschriftung über einem Formularfeld */
.u-label-block {
    display: block;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

/* Leerzustand einer Liste oder eines Bereichs */
.u-empty-state {
    color: var(--clr-text-muted);
    text-align: center;
    padding: 2rem;
}

/* Kleiner, kursiver Hinweis in einer leeren Liste */
.u-empty-note {
    color: var(--clr-text-muted);
    font-size: 0.85em;
    font-style: italic;
    text-align: center;
    padding: 1.25rem;
}

/* Erklärender Hinweistext unter einer Überschrift */
.u-hint {
    font-size: 0.82em;
    color: var(--clr-text-muted);
    margin-bottom: 0.6rem;
}

/* Fehlermeldung eines Formulars */
.u-error-text {
    color: var(--clr-status-danger);
    font-size: 0.85em;
}

/* Eingabefeld im Glas-Stil über die volle Breite (Musik- und Wave-Dialoge) */
.u-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-input);
    color: var(--clr-text-primary);
    box-sizing: border-box;
}

/* Trennlinie über einer Aktionszeile */
.u-divider-top {
    border-top: 1px solid var(--clr-border-light);
    padding-top: 0.75rem;
}

.u-divider-top-dashed {
    border-top: 1px dashed var(--clr-surface-border);
    padding-top: 0.5rem;
}