/*
 * Skin-Farb-Layer für die mBox-Library (Modal + Notice + Confirm).
 *
 * mBox bringt fest verdrahtete Farben mit (weißes Modal, schwarzer Notice-Toast),
 * die skin-unabhängig sind und z.B. mit dem dunklen Bombast-Skin brechen. Diese Datei
 * färbt mBox in ALLEN Viewports (Desktop + Mobil) anhand der globalen --mobile-*-Tokens
 * ein, die pro Skin in css/{skin}/antamarv41.css definiert sind. So wirken Modals/Notices
 * wie native Skin-Boxen.
 *
 * WICHTIG (Ladereihenfolge): Diese Datei wird in includes/html_head_css.inc.php NACH den
 * mBox-Asset-CSS (mBoxCore/Modal/Notice.css) eingebunden. Dadurch gewinnt sie bei gleicher
 * Spezifität per Quellreihenfolge — fast ohne !important.
 *
 * SCOPE: nur Farben/Rahmen. Position/Breite/Höhe schreibt mBox als Inline-Style (Notice-
 * Move-Tween) bzw. setzt antamarGeneralv57.css in den @media-Blöcken (Layout/Touch-Targets).
 * Diese Datei rührt Layout nicht an.
 */

/* ============================================================
 * Core (Basis-Theme, Fallback für reine new mBox(...)-Aufrufe)
 * ============================================================ */
.mBox.Core .mBoxContainer {
    background-color: var(--mobile-surface);
    border-color: var(--mobile-border);
}
.mBox.Core .mBoxContent,
.mBox.Core .mBoxTitle,
.mBox.Core .mBoxFooter {
    color: var(--mobile-text);
}

/* ============================================================
 * Modal
 * ============================================================ */
.mBox.Modal .mBoxContainer {
    background-color: var(--mobile-surface);
    border-color: var(--mobile-surface);   /* 6px-Passepartout in Skin-Fläche */
}
.mBox.Modal .mBoxContent {
    background-color: var(--mobile-surface);
    color: var(--mobile-text);
    /* mBox gibt dem Content eine eigene 1px-Umrandung (mBoxModal.css). Zusammen mit
       dem 6px-Passepartout des Containers ergibt das einen doppelten Rahmen — der
       innere Hairline-Rahmen wird unsichtbar gemacht; Titel/Footer (surface-2) heben
       sich tonal schon genug vom Content (surface) ab. */
    border-color: transparent;
}
.mBox.Modal .mBoxTitle {
    background-color: var(--mobile-surface-2);
    background-image: none;                 /* grauen Default-Verlauf killen */
    color: var(--mobile-text);
    border-color: var(--mobile-border);
    text-shadow: none;
}
.mBox.Modal .mBoxFooterContainer {
    background-color: var(--mobile-surface-2);
    border-color: var(--mobile-border);
}

/* Confirm-Dialog: Hintergrund einfärben, Notice-Icon (background-image) behalten. */
.mBox.Modal.Confirm .mBoxContent {
    background-color: var(--mobile-surface);
    color: var(--mobile-text);
}

/* ------------------------------------------------------------
 * Breiten-/Overflow-Fix (Layout-Ausnahme, analog zum box-sizing der Notice
 * weiter unten): mBox.Core berechnet die max-width des Inhalts als
 * (window.innerWidth - 100) und schreibt sie samt overflow:auto als
 * Inline-Style auf .mBoxContent. Die mBox-Assets nutzen aber
 * box-sizing:content-box, sodass das Padding ON TOP der max-width addiert
 * wird → auf schmalen Viewports ragt der Inhalt über Container/Viewport
 * hinaus und erzeugt eine horizontale Scrollbar (verstärkt durch width:90vw
 * aus mbox-mobile-defaults.js). border-box lässt das Padding in die
 * max-width einfließen → Inhalt bleibt im Rahmen.
 * ------------------------------------------------------------ */
.mBox.Modal .mBoxContainer,
.mBox.Modal .mBoxContent {
    box-sizing: border-box;
}

/* Formular-Modal (Rüstungskombination speichern): plain mBox.Modal — nutzt NICHT
   den Confirm-Wrapper (dessen Warn-Icon + 75px-Links-Padding würden das Eingabe-
   feld einengen). Diese Klasse zentriert nur die Footer-Buttons wie beim Confirm. */
.mBox.Modal.rkSaveModal .mBoxButtonContainer {
    text-align: center;
}

/* ------------------------------------------------------------
 * Close-Button: das mitgelieferte „×" ist ein dunkles Base64-GIF
 * und auf dunklen Skins unsichtbar. GIF ausblenden und ein skin-
 * gefärbtes CSS-„×" zeichnen.
 * ------------------------------------------------------------ */
.mBox.Modal .mBoxClose {
    background-color: var(--mobile-surface-2);
    border-color: var(--mobile-border);
}
.mBox.Modal .mBoxClose > div {
    background: none;
}
.mBox.Modal .mBoxClose::before {
    content: "\00d7";                       /* × */
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 11px;                      /* zentriert im 13px-Kästchen */
    font-size: 15px;
    color: var(--mobile-text);
}
.mBox.Modal .mBoxClose:hover::before {
    color: var(--mobile-accent);
}

/* ============================================================
 * Buttons (alle gerenderten Klassen abgedeckt, unter .mBox gescopt)
 * Primär zuerst, Abbrechen danach → Abbrechen gewinnt per Quellreihenfolge.
 * ============================================================ */
.mBox .mBoxButton,
.mBox button.Confirm,
.mBox .mBoxConfirmButtonSubmit,
.mBox .button_green {
    background-color: var(--mobile-accent-strong);
    background-image: none;
    color: var(--mobile-accent-contrast);
    border-color: var(--mobile-accent);
    text-shadow: none;
}
.mBox .mBoxButton:hover,
.mBox button.Confirm:hover,
.mBox .mBoxConfirmButtonSubmit:hover,
.mBox .button_green:hover {
    background-color: var(--mobile-accent);
}

.mBox button.Cancel,
.mBox .mBoxButton.Cancel,
.mBox .mBoxButtonCancel,
.mBox .mBoxConfirmButtonCancel {
    background-color: var(--mobile-chip-bg);
    background-image: none;
    color: var(--mobile-text);
    border-color: var(--mobile-border);
    text-shadow: none;
}

/* ============================================================
 * Notice (Toast) — Variante „Skin-Oberfläche"
 * ============================================================ */
/* background-COLOR (nicht das background-Shorthand!) — sonst würde das Typ-Icon
   (background-image aus mBoxNotice.css am selben Element) zurückgesetzt. */
.mBox.Notice .mBoxContainer {
    background-color: var(--mobile-surface);
    color: var(--mobile-text);
    border: 1px solid var(--mobile-border);
    text-shadow: none;                      /* schwarzen Schatten entfernen */
}

/* Typ-Akzentstreifen am linken Rand (Semantik bleibt, auch falls Icon kontrastarm).
   box-sizing, damit der 4px-Streifen die Box auf schmalen Screens nicht verbreitert. */
.mBox.Notice .mBoxNoticeOk,
.mBox.Notice .mBoxNoticeSuccess,
.mBox.Notice .mBoxNoticeError,
.mBox.Notice .mBoxNoticeCancel,
.mBox.Notice .mBoxNoticeInfo,
.mBox.Notice .mBoxNoticeNotice,
.mBox.Notice .mBoxNoticeAttention {
    box-sizing: border-box;
    border-left: 4px solid var(--mobile-accent);
}
.mBox.Notice .mBoxNoticeOk,
.mBox.Notice .mBoxNoticeSuccess {
    border-left-color: var(--mobile-action-border);
}
.mBox.Notice .mBoxNoticeError,
.mBox.Notice .mBoxNoticeCancel {
    border-left-color: var(--mobile-warn-border);
}
.mBox.Notice .mBoxNoticeInfo {
    border-left-color: var(--bar-asp-color);
}

/* ------------------------------------------------------------
 * Verkaufen-/Transfer-Dialog (div.auswahlbox > table.warentausch / p).
 * Manche Skins (bombast) setzen die Tabellen-/Absatztexte hart auf eine
 * dunkle Farbe ("dunkel auf hellem mBox-Grund") — Relikt aus der Zeit des
 * weissen mBox; auf der jetzt skin-dunklen Flaeche unlesbar. Auf --mobile-text
 * zurueckfuehren; hoehere Spezifitaet als die skin-eigene div.auswahlbox-Regel.
 * ------------------------------------------------------------ */
.mBox.Modal .auswahlbox table.warentausch td,
.mBox.Modal .auswahlbox table.warentausch th,
.mBox.Modal .auswahlbox p {
    color: var(--mobile-text);
}

/* ------------------------------------------------------------
 * Sticky-Notices (delayClose sehr hoch, Schliessen per Klick — z. B.
 * lange Tempel-Prosa): dezenter Bedienhinweis am Content-Ende.
 * ------------------------------------------------------------ */
.mBox.Notice .mbox_sticky_hinweis {
    margin-top: 6px;
    font-size: 0.8em;
    opacity: 0.7;
    text-align: right;
}