@CHARSET "UTF-8";
/*
 * xAdmin Modern Theme - Formulare
 *
 * Masse und Verhalten entsprechen den Bootstrap-5-Klassen, die tmo-admin
 * benutzt (.form-control, .form-label, .btn, .invalid-feedback). Die
 * Werte fuer Rahmen, Radius und Fokusring sind aus
 * tmo-admin/frontend/src/styles/app.css (.tmo-date-input input) uebernommen.
 *
 * Die Feldanordnung bleibt, wie der xAdmin sie kennt: Label links, Feld
 * rechts. tmo setzt das Label ueber das Feld - das umzustellen waere eine
 * Aenderung an jeder View und nicht am Theme.
 */

/* ------------------------------------------------------------ form-control */

body.xtheme-modern input,
body.xtheme-modern select,
body.xtheme-modern textarea {
    background-color: var(--tmo-surface);
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius-sm);
    color: var(--x-text);
    font-family: var(--x-font);
    font-size: .875rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

body.xtheme-modern input:focus,
body.xtheme-modern select:focus,
body.xtheme-modern textarea:focus {
    border-color: var(--x-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--tmo-primary) 25%, transparent);
    outline: 0;
}

body.xtheme-modern input::placeholder,
body.xtheme-modern textarea::placeholder {
    color: var(--x-text-muted);
}

body.xtheme-modern input[type="checkbox"],
body.xtheme-modern input[type="radio"] {
    accent-color: var(--x-accent);
    padding: 0;
}

body.xtheme-modern input.error,
body.xtheme-modern textarea.error,
body.xtheme-modern select.error {
    border-color: var(--x-danger);
    background-color: var(--x-danger-soft);
    color: var(--x-danger);
}

/* ---------------------------------------------------------------- Buttons */

body.xtheme-modern button,
body.xtheme-modern input[type="submit"],
body.xtheme-modern input[type="button"],
body.xtheme-modern input.action {
    background: var(--x-accent);
    border: 1px solid var(--x-accent);
    border-radius: var(--x-radius-sm);
    color: var(--tmo-on-primary);
    cursor: pointer;
    font-family: var(--x-font);
    font-size: .875rem;
    line-height: 1.5;
    padding: .375rem .75rem;
}

body.xtheme-modern button:hover,
body.xtheme-modern input[type="submit"]:hover,
body.xtheme-modern input[type="button"]:hover,
body.xtheme-modern input.action:hover {
    background: var(--x-accent-hover);
    border-color: var(--x-accent-hover);
}

body.xtheme-modern button:disabled,
body.xtheme-modern input:disabled {
    opacity: .65;
    cursor: default;
}

/* ------------------------------------------------------------ table.xform */

body.xtheme-modern table.xform {
    background: transparent;
    border-spacing: 0;
}

body.xtheme-modern table.xform tr td:first-child,
body.xtheme-modern table.xform tr td.label {
    background: transparent;
    border-bottom: 1px solid var(--x-border);
    color: var(--tmo-strong);
    font-weight: 500;
    padding: .5rem .75rem .5rem 0;
    text-align: right;
    width: 190px;
}

body.xtheme-modern table.xform tr td:first-child label,
body.xtheme-modern table.xform tr td.label,
body.xtheme-modern table.xform tr td.label label {
    color: var(--tmo-strong);
}

body.xtheme-modern table.xform tr td,
body.xtheme-modern table.xform tr td.input {
    background: transparent;
    border-bottom: 1px solid var(--x-border);
    padding: .5rem .75rem;
}

/* Pflichtfeldmarkierung wie .ui-field-required */
body.xtheme-modern table.xform tr td label.required::after {
    color: var(--x-danger);
    content: " *";
}

body.xtheme-modern table.xform tr td label.required {
    font-weight: 500;
}

body.xtheme-modern table.xform tr.error {
    background: var(--x-danger-soft);
}

body.xtheme-modern table.inlinegrid {
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius-sm);
}

body.xtheme-modern table.inlinegrid thead tr td,
body.xtheme-modern table.inlinegrid thead tr td:first-child {
    background: var(--tmo-surface-active);
    color: var(--tmo-strong);
    font-weight: 600;
}

body.xtheme-modern table.inlinegrid tbody tr td,
body.xtheme-modern table.inlinegrid tbody tr td:first-child {
    background: var(--tmo-surface);
}

/* ------------------------------------------------------- Meldungsbaender */

body.xtheme-modern div.xform-error,
body.xtheme-modern div.infobox {
    border-radius: var(--x-radius-sm);
    border-width: 1px;
    border-style: solid;
    margin: 1rem;
    padding: .75rem 1rem;
}

body.xtheme-modern div.xform-error {
    background: var(--x-danger-soft);
    border-color: color-mix(in srgb, var(--tmo-error) 35%, transparent);
    color: var(--x-danger);
}

body.xtheme-modern div.infobox {
    background: var(--x-ok-soft);
    border-color: color-mix(in srgb, var(--tmo-success) 35%, transparent);
    color: var(--x-ok);
}