/*
 * INFOLOX Corporate Design 2026 für den Sylius-Admin (Quelle: 04_Redesign-2026, www.infolox.de),
 * Gegenstück zu ix/ezplatform-admin-bundle.
 * Ink #0a0a0a, Graphit #323230, Blau #3cbeff, Blau dunkel #2a7da7, Grau #c3c7c0;
 * abgeleitet: Blau tief #236c91 (Text/Icons auf Weiß >= 4,5:1).
 */

/* ---------- Login: Bildwelt 04 vollflächig, Formular als Glas-Karte ---------- */

body.centered {
    min-height: 100vh;
    background: #0a0a0a url(img/login-visual.webp) 30% center / cover no-repeat;
}

/* Semantic UI setzt body auf height: 100%; sonst endet das Bild vor dem Footer */
body.centered {
    position: relative;
    height: auto;
}

body.centered .grid {
    min-height: 100vh;
    margin: 0;
}

/* Ab 768 px wie die eZ-Anmeldung: Karte mittig in der rechten Hälfte, das Motiv bleibt links frei */
@media (min-width: 768px) {
    body.centered .grid {
        padding-left: 50%;
        /* Platz für den Footer, damit die Karte wie bei eZ über ihm zentriert ist */
        padding-bottom: 82px;
    }
}

/* Maße in px wie die eZ-Anmeldung (Basis 16 px); Semantic UI rechnet mit 14 px Grundschrift */
body.centered .column {
    max-width: 384px;
    padding: 40px !important;
    background: rgba(10, 10, 10, .72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 25px;
}

/* Systemkennung: Logo | Shop, darunter außerhalb von Production die Umgebung */
.ix-login__brand {
    margin-bottom: 40px;
    text-align: left;
}

.ix-login__lockup {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ix-login__logo {
    display: block;
    flex: 0 0 auto;
    width: 152px;
    height: auto;
}

.ix-login__system {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
    color: #3cbeff;
}

/* Gelb mit Ink-Text >= 11:1, damit Test und Live nicht verwechselt werden */
.ix-login__environment {
    display: inline-block;
    margin-top: 16px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #0a0a0a;
    background: #ffc94d;
    border-radius: 999px;
}

body.centered .ui.segment {
    padding: 0 !important;
    background: none;
    border: 0;
    box-shadow: none;
}

body.centered .ui.form .field > label {
    font-size: 14px;
    font-weight: 400;
    color: #c3c7c0;
}

body.centered .ui.form .field > input {
    height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 12px;
    /* Chrome färbt die Autofill-Vorschau mit FieldText, im hellen Schema schwarz */
    color-scheme: dark;
}

body.centered .ui.form .field > input:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: #3cbeff;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(60, 190, 255, .3);
}

/* Browser-Autofill: Semantic überdeckt das Feld sonst mit !important elfenbeinfarben (#fffff0) */
body.centered .ui.form .field > input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 100px #1f1f1e inset !important;
    border-color: rgba(255, 255, 255, .4) !important;
    caret-color: #fff;
}

body.centered .ui.form .field > input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #1f1f1e inset, 0 0 0 3px rgba(60, 190, 255, .3) !important;
    border-color: #3cbeff !important;
}

body.centered .ui.toggle.checkbox label,
body.centered .ui.toggle.checkbox input:checked ~ label,
body.centered .ui.toggle.checkbox input:focus:checked ~ label {
    color: #c3c7c0 !important;
}

body.centered .ui.toggle.checkbox label:before {
    background: rgba(255, 255, 255, .25);
}

body.centered .ui.toggle.checkbox input:checked ~ label:before,
body.centered .ui.toggle.checkbox input:focus:checked ~ label:before {
    background-color: #3cbeff !important;
}

body.centered .ui.primary.submit.button {
    margin-top: 20px;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
    color: #0a0a0a;
    background: #3cbeff;
    border-radius: 999px;
}

body.centered .ui.primary.submit.button:hover,
body.centered .ui.primary.submit.button:focus {
    color: #fff;
    background: #2a7da7;
}

body.centered .ui.primary.submit.button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Ladezustand nach dem Absenden (Login, Passwort zurücksetzen): Semantic legt sonst eine weiße Fläche über die dunkle Karte */
body.centered .ui.loading.form:before {
    background: rgba(10, 10, 10, .6);
    border-radius: 12px;
}

body.centered .ui.loading.form:after {
    border-color: #3cbeff rgba(255, 255, 255, .15) rgba(255, 255, 255, .15) rgba(255, 255, 255, .15);
}

body.centered .ui.basic.segment {
    margin-bottom: 1rem;
}

/* Fehlermeldung passend zur dunklen Karte statt Semantic-Rosa */
body.centered .ui.negative.message {
    color: #ff8a80;
    background: rgba(255, 138, 128, .1);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 138, 128, .5);
}

body.centered .ui.negative.message .header {
    color: #ff8a80;
}

/* Footer wie bei eZ: unten unter der Karte, hält 4,5:1 auch über helleren Bildstellen */
.ix-login__footer {
    padding: 0 16px 24px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
    text-align: center;
    text-shadow: 0 1px 2px rgba(10, 10, 10, .8);
}

@media (min-width: 768px) {
    .ix-login__footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 50%;
    }
}

@media (max-width: 767.98px) {
    /* Eigener Hochformat-Ausschnitt (520 px, 25 KB): Handys laden das 2000-px-Bild nicht */
    body.centered {
        background-image: url(img/login-visual-mobile.webp);
        background-position: center;
    }

    body.centered .column {
        padding: 32px 24px !important;
    }

    /* Karte mit 16 px Rand, Footer im Fluss unter der Karte, Bild über die ganze Höhe */
    body.centered {
        display: flex;
        flex-direction: column;
    }

    body.centered .grid {
        flex: 1 0 auto;
        min-height: 0;
        padding: 16px;
    }
}

/* ---------- Admin: Seitenleiste dunkel, CD-Blau für Aktionen ---------- */

#sidebar.ui.sidebar.inverted.menu {
    background: #0a0a0a;
}

#sidebar.ui.sidebar.vertical.menu .item.active {
    color: #0a0a0a !important;
    background: #3cbeff !important;
}

#sidebar.ui.sidebar.vertical.menu .item.active .icon {
    color: #0a0a0a;
}

#sidebar.ui.sidebar.vertical.menu a.item:not(.active):hover {
    background: rgba(255, 255, 255, .08);
}

/* Sylius 1.12: neues Layout ohne #sidebar, Seitenleiste und Menü unter .admin-layout */
.admin-layout .admin-layout__sidebar {
    background: #0a0a0a;
}

.admin-layout .admin-layout__nav .item.active {
    color: #0a0a0a !important;
    background: #3cbeff !important;
}

.admin-layout .admin-layout__nav .item.active .icon {
    color: #0a0a0a;
}

.ui.primary.button,
.ui.primary.buttons .button {
    color: #0a0a0a;
    background-color: #3cbeff;
}

.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.primary.button:active,
.ui.primary.buttons .button:hover,
.ui.primary.buttons .button:focus,
.ui.primary.buttons .button:active {
    color: #fff;
    background-color: #236c91;
}

a,
a:hover,
.ui.breadcrumb a:hover,
.sylius-grid-table-wrapper .ui.sortable.table thead th.sorted {
    color: #236c91;
}

.ui.header .circular.icon {
    color: #236c91;
    background: rgba(60, 190, 255, .15);
}

.ui.form .field > input:focus,
.ui.form .field > textarea:focus {
    border-color: #3cbeff;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before,
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
    background-color: #236c91 !important;
}

.stats .ui.basic.active.button {
    color: #236c91 !important;
}

/* Sylius-Türkis bei Status-Labels (z. B. "Aktiviert"): weiße Schrift erreichte nur 2,6:1 */
.ui.teal.label,
.ui.teal.labels .label {
    color: #fff !important;
    background-color: #236c91 !important;
    border-color: #236c91 !important;
}

/* Untertitel, Breadcrumb und Footer: #9a9a9a erreichte nur 2,7:1 */
.ui.header .content .sub.header,
.ui.breadcrumb a,
.ui.breadcrumb .active,
#wrapper.full.height .sylius-footer {
    color: #5c5c5c;
}

/* Weitere Status-Labels (z. B. "Neu", "Erwarte Zahlung", "Bezahlt"): weiße Schrift erreichte auf den
   Semantic-UI-Farben Blau 3,9:1, Oliv 1,8:1, Grün 2,6:1, Orange 2,9:1, Gelb 1,7:1 und Pink 4,0:1 */
.ui.blue.label,
.ui.blue.labels .label {
    color: #fff !important;
    background-color: #1d5f94 !important;
    border-color: #1d5f94 !important;
}

.ui.olive.label,
.ui.olive.labels .label {
    color: #fff !important;
    background-color: #5b6a0c !important;
    border-color: #5b6a0c !important;
}

.ui.green.label,
.ui.green.labels .label {
    color: #fff !important;
    background-color: #1d7a35 !important;
    border-color: #1d7a35 !important;
}

.ui.orange.label,
.ui.orange.labels .label {
    color: #fff !important;
    background-color: #b5480b !important;
    border-color: #b5480b !important;
}

.ui.yellow.label,
.ui.yellow.labels .label {
    color: #fff !important;
    background-color: #8a6400 !important;
    border-color: #8a6400 !important;
}

.ui.pink.label,
.ui.pink.labels .label {
    color: #fff !important;
    background-color: #b8236f !important;
    border-color: #b8236f !important;
}

/* Blaue Knöpfe (z. B. "Filter"): weiße Schrift erreichte auf Semantic-Blau nur 3,9:1 */
.ui.blue.button,
.ui.blue.buttons .button {
    color: #fff;
    background-color: #1d5f94;
}

.ui.blue.button:hover,
.ui.blue.buttons .button:hover,
.ui.blue.button:focus,
.ui.blue.buttons .button:focus {
    color: #fff;
    background-color: #174c77;
}

/* Filter-Titel über den Listen: rgba(0, 0, 0, .4) erreichte nur 2,9:1 */
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
    color: rgba(0, 0, 0, .7);
}

/* "Alle umschalten" im Kategorie-Baum: #999 erreichte nur 2,8:1 */
.sylius-tree .sylius-tree__toggle-all {
    color: #5c5c5c;
}

/* Breite Listen: Aktionsknöpfe untereinander und umbrechende Spaltenköpfe, sonst wird die Aktionsspalte abgeschnitten
   (Tabellen-Container bis 1.11 .sylius-grid-table-wrapper, ab 1.12 .overflow-x-auto) */
.sylius-grid-table-wrapper .ui.table thead th,
.overflow-x-auto > .ui.table thead th {
    white-space: normal !important;
}

.sylius-grid-table-wrapper td .ui.buttons,
.overflow-x-auto > .ui.table td .ui.buttons {
    flex-wrap: wrap;
    gap: 4px;
}

.sylius-grid-table-wrapper td .ui.buttons > .button,
.sylius-grid-table-wrapper td .ui.buttons > form,
.overflow-x-auto > .ui.table td .ui.buttons > .button,
.overflow-x-auto > .ui.table td .ui.buttons > form {
    flex: 1 0 auto;
}

.sylius-grid-table-wrapper td .ui.buttons > .button,
.sylius-grid-table-wrapper td .ui.buttons > form > .button,
.overflow-x-auto > .ui.table td .ui.buttons > .button,
.overflow-x-auto > .ui.table td .ui.buttons > form > .button {
    border-radius: .28571429rem !important;
}

.sylius-grid-table-wrapper td .ui.buttons > form > .button,
.overflow-x-auto > .ui.table td .ui.buttons > form > .button {
    width: 100%;
}