/* assets/css/jquery_ui_theme.css
   jQuery UI und Kontextmenüs im Design „Taktische Konsole" (docs/37_HUD_Bedienelemente_Konzept.md
   Kapitel 4, Mockup docs/mockups/jquery-ui/). Liegt über den Vendor-Themes
   (js/vendor/jqueryui/jquery-ui.min.css, js/vendor/jquerycontextmenu/jquery.contextMenu.min.css)
   und überschreibt nur deren Optik; Struktur und Verhalten bleiben bei den Bibliotheken, die
   Vendor-Dateien unverändert. Nur Tokens aus global.css.

   Spezifität: Das Vendor-Theme setzt `.ui-widget.ui-widget-content` (0,2,0). Regeln für die
   Container der Widgets schreiben deshalb `.ui-widget.ui-dialog`, `.ui-widget.ui-tabs` usw.

   Inhalt: Grundlagen · Knöpfe der Dialoge · Dialog · Reiter · Slider · Tooltip · Detail-Tooltip ·
   Kontextmenüs. Schalter und Scrollleisten stehen in global.css. */

/* =====================================================================
   Grundlagen: Schrift, Flächen, Zustände, keine Rundungen
   ===================================================================== */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--font-regular);
}

.ui-widget-content,
.ui-widget.ui-widget-content {
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-popup);
    color: var(--clr-text-primary);
}

.ui-widget-header {
    border: 0;
    background: transparent;
    color: var(--clr-text-primary);
    font-weight: 700;
}

.ui-widget-header a {
    color: inherit;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right,
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-corner-br {
    border-radius: 0;
}

.ui-state-error,
.ui-widget-content .ui-state-error {
    border: 1px solid var(--clr-status-danger);
    background: var(--clr-status-danger-subtle);
    color: var(--clr-status-danger-strong);
}

/* Fokus der Tastatur: Petrol-Rahmen statt des blauen Leuchtens von jQuery UI */
.ui-visual-focus {
    box-shadow: none;
    outline: 2px solid var(--clr-secondary-main);
    outline-offset: 2px;
}

/* Fläche hinter modalen Dialogen: durchsichtig, weder Abdunklung noch Unschärfe. Das Spielfeld
   dahinter muss lesbar bleiben, manche Dialoge öffnet man bei laufendem Spiel (Vorgabe des Autors,
   2026-10-09). Die Fläche selbst bleibt und fängt Klicks außerhalb des Dialogs ab; ohne diese
   Regel gälte das Grau des Vendor-Themes. */
.ui-widget-overlay {
    background: transparent;
    opacity: 1;
}

/* =====================================================================
   Knöpfe der Dialog-Fußleiste: Rahmen-Knopf für alles Nebensächliche, die Hauptaktion
   (`ui-priority-primary`, Guideline 3.2) orange mit abgeschrägter Ecke
   ===================================================================== */
.ui-dialog .ui-dialog-buttonpane .ui-button {
    min-width: 6.5rem;
    margin: 0 0 0 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
    color: var(--clr-text-primary);
    font-family: var(--font-narrow);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    transition: background-color 80ms linear, box-shadow 80ms linear;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:focus-visible {
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
    color: var(--clr-text-primary);
}

.ui-dialog .ui-dialog-buttonpane .ui-button.ui-priority-primary {
    border-color: var(--clr-primary-main);
    background: var(--clr-primary-main);
    color: var(--clr-text-light);
    clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 0.55rem, 100% 100%, 0 100%);
}

.ui-dialog .ui-dialog-buttonpane .ui-button.ui-priority-primary:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-priority-primary:focus-visible {
    border-color: var(--clr-primary-hover);
    background: var(--clr-primary-hover);
    box-shadow: none;
    color: var(--clr-text-light);
}

.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-disabled,
.ui-dialog .ui-dialog-buttonpane .ui-button:disabled {
    opacity: 0.4;
    box-shadow: none;
}

/* =====================================================================
   Dialog: helle Fläche, Titel in Petrol mit orangem Quadrat, Leitlinie unter dem Kopf.
   Kein `backdrop-filter` (Vorgabe des Autors, 2026-10-09): Er macht den Dialog außerdem zum
   Bezugsrahmen für `position: fixed` in seinem Inhalt, Aufklappfelder landeten dadurch versetzt.

   Ebene: über dem Ladebildschirm (Tokens in global.css) – mit den 100 des Vendor-Themes
   (`.ui-front`) lag eine Rückfrage oder Fehlermeldung während des Ladens unsichtbar dahinter.
   Der Wert ist nur die Grundebene: Weitere Dialoge stapelt jQuery UI von hier aus nach oben, und
   die Fläche hinter einem modalen Dialog setzt es beim Öffnen selbst eine Ebene unter ihn. Als
   feste Zahl im Token, weil jQuery UI mit dem gelesenen Wert rechnet. Kontextmenüs bleiben ganz
   oben (unten in dieser Datei).
   ===================================================================== */
.ui-widget.ui-dialog {
    z-index: var(--z-dialog);
    padding: 0;
    border: 1px solid var(--clr-surface-border);
    background: var(--clr-surface-popup);
    box-shadow: var(--shadow-popup-lg);
}

.ui-dialog .ui-dialog-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.6rem;
    padding: 0.8rem 3.2rem 0.75rem 1.1rem;
    border: 0;
    background: transparent;
}

/* Leitlinie Orange → Petrol wie unter der Kopfleiste des Menüs */
.ui-dialog .ui-dialog-titlebar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-primary-main), var(--clr-secondary-main));
}

.ui-dialog .ui-dialog-title {
    flex: 1;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-narrow);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.ui-dialog .ui-dialog-title::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.6rem;
    background: var(--clr-primary-main);
    vertical-align: 0.22rem;
}

/* Schließen: eckiger Rahmen-Knopf mit dem Font-Awesome-Kreuz statt des Sprite-Symbols */
.ui-dialog .ui-dialog-titlebar-close {
    right: 0.8rem;
    width: 1.9rem;
    height: 1.9rem;
    margin: -0.95rem 0 0;
    padding: 0;
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface-subcard);
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    border-color: var(--clr-border-light);
    background: var(--clr-surface-input);
    box-shadow: inset 0 0 0 2px var(--clr-primary-main);
}

/* Fokus der Tastatur (jQuery UI setzt ihn beim Öffnen auf den Knopf): Petrol statt des
   Browser-Rahmens */
.ui-dialog .ui-dialog-titlebar-close:focus {
    outline: none;
}

.ui-dialog .ui-dialog-titlebar-close:focus-visible {
    outline: 2px solid var(--clr-secondary-main);
    outline-offset: 1px;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    background-image: none;
    text-indent: 0;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before {
    content: '\f00d';
    display: block;
    font-family: 'Font Awesome 7 Free';
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1rem;
    text-align: center;
    color: var(--clr-secondary-main);
}

/* Zusatzknöpfe in der Titelleiste (Pause in den Modul-Dialogen, Split/Vollbild im Wave-Editor) sind
   eine dokumentierte Ausnahme (Guideline 3.2): Schlicht-Buttons in Petrol, beim Hover Orange */
.ui-dialog .ui-dialog-titlebar .btn-plain {
    flex-shrink: 0;
    min-width: 1.9rem;
    height: 1.9rem;
    color: var(--clr-secondary-main);
}

.ui-dialog .ui-dialog-titlebar .btn-plain:hover:not(:disabled),
.ui-dialog .ui-dialog-titlebar .btn-plain.is-active {
    color: var(--clr-primary-main);
}

.ui-dialog .ui-dialog-content {
    padding: 1rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--clr-text-primary);
}

.ui-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-top: 1px solid var(--clr-border-light);
    background: var(--clr-surface-dark);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem 0;
    float: none;
}

/* Griff zum Ändern der Größe: schraffierte Ecke statt Sprite */
.ui-dialog .ui-resizable-se {
    right: 2px;
    bottom: 2px;
    width: 0.75rem;
    height: 0.75rem;
    background: repeating-linear-gradient(135deg, transparent 0 3px, var(--clr-text-muted) 3px 4px);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* =====================================================================
   Reiter: wie die Bereichsreiter des Menüs (`.menu-nav-item`) – Schmalschrift, aktiver Reiter mit
   orangem Grund und Balken
   ===================================================================== */
.ui-widget.ui-tabs {
    padding: 0;
    border: 0;
    background: transparent;
}

.ui-tabs .ui-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--clr-border-light);
    background: transparent;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem 0.45rem;
    color: var(--clr-text-muted);
    font-family: var(--font-narrow);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    outline: none;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor i {
    color: var(--clr-secondary-main);
}

.ui-tabs .ui-tabs-nav li.ui-state-hover,
.ui-tabs .ui-tabs-nav li.ui-state-focus {
    background: var(--clr-surface-dark);
}

.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-focus .ui-tabs-anchor {
    color: var(--clr-text-primary);
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor:focus-visible {
    outline: 2px solid var(--clr-secondary-main);
    outline-offset: -2px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 0;
    background: var(--clr-primary-subtle);
    box-shadow: inset 0 -3px 0 var(--clr-primary-main);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    color: var(--clr-text-primary);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor i,
.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor i {
    color: var(--clr-primary-main);
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor {
    cursor: not-allowed;
}

.ui-tabs .ui-tabs-panel {
    padding: 0.9rem 0 0;
    background: transparent;
}

/* =====================================================================
   Slider: schmale Schiene, Füllung in Petrol bis zum Griff, rechteckiger Griff in Orange (wie im
   HUD). Die Füllung braucht `range: 'min'`; frontend/footer.php setzt das als Vorgabe für alle
   Slider, Slider mit zwei Griffen setzen `range: true`.
   ===================================================================== */
.ui-widget.ui-slider {
    position: relative;
    border: 0;
    background: var(--clr-shade-15);
}

/* Größere Trefferfläche als die 0.3rem schmale Schiene */
.ui-slider::before {
    content: '';
    position: absolute;
    inset: -0.55rem 0;
}

.ui-slider-vertical::before {
    inset: 0 -0.55rem;
}

.ui-slider-horizontal {
    height: 0.3rem;
}

.ui-slider-vertical {
    width: 0.3rem;
}

.ui-slider .ui-slider-range {
    border: 0;
    background: var(--clr-secondary-main);
}

.ui-slider .ui-slider-handle,
.ui-slider .ui-slider-handle.ui-state-default,
.ui-slider .ui-slider-handle.ui-state-focus {
    z-index: 2;
    border: 0;
    background: var(--clr-primary-main);
    cursor: grab;
    outline: none;
    transition: box-shadow 80ms linear;
}

.ui-slider-horizontal .ui-slider-handle {
    top: 50%;
    width: 0.6rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.3rem;
}

.ui-slider-vertical .ui-slider-handle {
    left: 50%;
    width: 1rem;
    height: 0.6rem;
    margin: 0 0 -0.3rem -0.5rem;
}

.ui-slider .ui-slider-handle.ui-state-hover {
    background: var(--clr-primary-hover);
}

.ui-slider .ui-slider-handle.ui-state-active {
    background: var(--clr-primary-hover);
    box-shadow: 0 0 0 4px var(--clr-primary-subtle);
    cursor: grabbing;
}

.ui-slider .ui-slider-handle:focus-visible {
    box-shadow: 0 0 0 2px var(--clr-surface-popup), 0 0 0 4px var(--clr-secondary-main);
}

.ui-widget.ui-slider.ui-state-disabled {
    opacity: 0.45;
}

.ui-slider.ui-state-disabled .ui-slider-handle {
    background: var(--clr-text-muted);
    cursor: not-allowed;
}

.ui-slider.ui-state-disabled .ui-slider-range {
    background: var(--clr-text-muted);
}

/* =====================================================================
   Tooltip: helle Fläche, oranger Rand links, Schatten – lesbar über Glas und Spielfeld
   ===================================================================== */
.ui-tooltip,
.ui-tooltip.ui-widget-content {
    max-width: 22rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--clr-border-light);
    border-left: 3px solid var(--clr-primary-main);
    background: var(--clr-surface-popup);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-popup);
    color: var(--clr-text-primary);
    font-size: 0.82rem;
    line-height: 1.35;
}

/* =====================================================================
   Detail-Tooltip (`DetailTooltip`, js/editor/ui/): Balancing im Level-Manager und im Wellen-Editor,
   Clips und Spur-Info der Timeline. Titel in Schmalschrift, Abschnitte mit Beschriftung wie im HUD,
   Zahlen rechtsbündig; Raster (Türme, Squads), gedämpfte Hinweise.
   ===================================================================== */
.ui-tooltip.detail-tooltip {
    max-width: 30rem;
    padding: 0.6rem 0.75rem;
}

.detail-tip {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--clr-text-primary);
}

.detail-tip-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-narrow);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-secondary-main);
}

.detail-tip-section,
.detail-tip-footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--clr-border-light);
}

.detail-tip-heading {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.detail-tip-rows {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.5rem;
    row-gap: 0.1rem;
}

.detail-tip-value,
.detail-tip-grid .is-number {
    font-family: var(--font-narrow);
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.detail-tip-value.is-strong {
    color: var(--clr-primary-text);
}

.detail-tip-grid {
    display: grid;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    margin-top: 0.25rem;
}

.detail-tip-cols-2 { grid-template-columns: 1fr auto; }
.detail-tip-cols-3 { grid-template-columns: 1fr auto auto; }
.detail-tip-cols-4 { grid-template-columns: 1fr auto auto auto; }

.detail-tip-grid-head {
    padding-bottom: 0.1rem;
    border-bottom: 1px solid var(--clr-border-light);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.detail-tip-list {
    margin: 0;
    padding-left: 1rem;
}

.detail-tip-note {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* =====================================================================
   Kontextmenüs (jquery.contextMenu, Editoren): helle Fläche wie der Tooltip, Einträge mit
   orangem Balken beim Hover, Symbole in Petrol. Die Größen und Ebenen von früher bleiben.
   ===================================================================== */
.context-menu-list {
    min-width: 150px;
    padding: 0.3rem 0;
    border: 1px solid var(--clr-border-light);
    border-radius: 0;
    background: var(--clr-surface-popup);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-popup);
    font-family: var(--font-regular);
    font-size: var(--fs-label);
    z-index: 100000 !important;
}

/* Untermenüs: keine wachsende em-Schrift, etwas breiter als das Hauptmenü */
.context-menu-list .context-menu-list,
.context-menu-item > .context-menu-list,
.context-menu-submenu > .context-menu-list {
    font-size: 1em !important;
    min-width: 230px !important;
    max-width: 340px !important;
}

.context-menu-list.context-menu-detached {
    font-size: var(--fs-label) !important;
    min-width: 230px !important;
    max-width: 340px !important;
}

#context-menu-layer {
    z-index: 99999 !important;
}

.context-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.45rem 1.6rem 0.45rem 0.9rem;
    background-color: transparent;
    color: var(--clr-text-primary);
    font-size: 1em !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 80ms linear, box-shadow 80ms linear;
}

.context-menu-item span,
.context-menu-item i {
    font-size: inherit;
}

.context-menu-item i {
    color: var(--clr-secondary-main);
}

.context-menu-item.context-menu-hover {
    background-color: var(--clr-primary-subtle);
    box-shadow: inset 3px 0 0 var(--clr-primary-main);
    color: var(--clr-text-primary);
}

.context-menu-item.context-menu-hover i {
    color: var(--clr-primary-main);
}

.context-menu-item.context-menu-disabled {
    background-color: transparent;
    box-shadow: none;
    color: var(--clr-text-muted);
    opacity: 0.5;
    cursor: default;
}

.context-menu-separator {
    margin: 0.3rem 0;
    padding: 0;
    border-bottom: 1px solid var(--clr-border-light);
}

.context-menu-submenu::after {
    right: 0.6rem;
    border-color: transparent transparent transparent var(--clr-secondary-main);
}

.context-menu-submenu.context-menu-hover::after {
    border-color: transparent transparent transparent var(--clr-primary-main);
}