/* MessageBox - Ersatz für window.alert / confirm / prompt
   Baut auf den bestehenden Dialog-Styles (Override.dialog.css) auf,
   die Buttons nutzen weiterhin OKButton / CancelButton / DeleteBtn. */

.MessageBoxDialog.ui-widget.ui-widget-content.ui-dialog {
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

/* Override.dialog.css setzt padding-top:0 / padding-bottom:15px auf die Titelzeile.
   Der Titel sitzt dadurch 7px über deren Mitte, während das X mittig steht.
   Symmetrisches Padding richtet beide auf einer Linie aus.
   Der Selektor ist bewusst spezifischer als der in Override.dialog.css
   (.ui-dialog .ui-dialog-titlebar), weil diese Datei VOR Override.dialog.css geladen wird. */
.MessageBoxDialog.ui-dialog .ui-dialog-titlebar {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Ebenfalls bewusst mit .ui-dialog verkettet: sowohl jquery-ui.min.css (padding: .5em 1em)
   als auch Override.dialog.css (padding-top/bottom: 0) werden nach dieser Datei geladen
   und würden ein einfaches ".MessageBoxDialog .ui-dialog-content" vollständig überschreiben. */
.MessageBoxDialog.ui-dialog .ui-dialog-content {
    padding: 15px;
}

.MessageBoxContent .MessageBoxBody {
    display: flex;
    align-items: flex-start;
}

.MessageBoxContent .MessageBoxIcon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
}

/* min-height = Icon-Höhe: kurze Texte werden dadurch auf Icon-Höhe zentriert,
   längere Texte laufen wie gewohnt ab der Oberkante.
   "safe" ist zwingend: ohne den Zusatz wäre bei Überlauf (max-height) der obere
   Teil des Textes nicht mehr scrollbar. Kennt ein Browser "safe" nicht, verfällt
   die Regel und es bleibt beim bisherigen Verhalten. */
.MessageBoxContent .MessageBoxText {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    min-height: 32px;
    font-size: 14px;
    line-height: 1.45;
    color: rgb(60,60,60);
    word-break: break-word;
    max-height: 60vh;
    overflow-y: auto;
}

.MessageBoxContent .MessageBoxInputRow {
    margin-top: 12px;
    padding-left: 44px;
}

.MessageBoxContent.NoIcon .MessageBoxInputRow {
    padding-left: 0;
}

.MessageBoxContent .MessageBoxInput {
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgb(150,150,150);
    font-size: 14px;
    padding: 0 5px;
    height: 30px;
}

.MessageBoxContent textarea.MessageBoxInput {
    min-height: 90px;
    height: auto;
    padding: 5px;
    resize: vertical;
}

.MessageBoxContent .MessageBoxInput.input-validation-error {
    border-color: #C50408;
}

.MessageBoxContent .MessageBoxInputError {
    color: #C50408;
    font-size: 12px;
    margin-top: 4px;
}


/* Neutraler Abbrechen-Button für Löschabfragen.
   Override.dialog.css gibt CancelButton und DeleteBtn dieselbe Farbe #C50408 - bei
   ConfirmDelete stünden dadurch zwei gleich große, gleich rote Buttons nebeneinander und
   die zerstörende Aktion hübe sich nicht ab. CancelButton dort umzufärben verbietet sich,
   weil alle Flyout-Dialoge die Klasse mitbenutzen; deshalb eine eigene Klasse nur hier.
   Verkettung mit .ui-dialog ist nötig, weil Override.dialog.css nach dieser Datei geladen wird. */
.MessageBoxDialog.ui-dialog .ui-dialog-buttonpane button.NeutralButton {
    background-color: #6a6a6a;
    color: white;
    border: none;
}

.MessageBoxDialog.ui-dialog .ui-dialog-buttonpane button.NeutralButton:hover {
    background-color: #6a6a6a;
    box-shadow: 0 0 10px #6a6a6a;
    cursor: pointer;
}

/* Icons - als Data-URI, damit keine zusätzlichen Assets nötig sind */

.MessageBoxIcon-info {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%230069b4'/><text x='12' y='18' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='bold' text-anchor='middle' fill='white'>i</text></svg>");
}

.MessageBoxIcon-question {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%230069b4'/><text x='12' y='18' font-family='Arial,Helvetica,sans-serif' font-size='16' font-weight='bold' text-anchor='middle' fill='white'>?</text></svg>");
}

.MessageBoxIcon-warning {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 23 22H1z' fill='%23f0a500'/><text x='12' y='20' font-family='Arial,Helvetica,sans-serif' font-size='14' font-weight='bold' text-anchor='middle' fill='white'>!</text></svg>");
}

.MessageBoxIcon-error {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23C50408'/><path d='M7.5 7.5l9 9M16.5 7.5l-9 9' stroke='white' stroke-width='2.5' stroke-linecap='round'/></svg>");
}

.MessageBoxIcon-success {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%2371c700'/><path d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}