/*
 * 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);
    border-color: var(--mobile-border);
}
.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);
}

/* ------------------------------------------------------------
 * 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);
}