/*
 * Mail Gateway – Ergänzungen zum Intranet-CSS-Paket (intranet-ui.css, unverändert 1:1).
 *
 * Enthält ausschließlich Layoutregeln für Gateway-Bausteine, für die das Intranet
 * kein Gegenstück hat (zweispaltige Formularraster, Versanddiagramm, Detailraster,
 * DEV/PROD-Schalter). Farben, Abstände, Radien und Schrift stammen nur aus den
 * Intranet-Variablen. Keine Überschreibung von Intranet-Komponenten.
 */
.notice:empty {
    display: none;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.form-grid > .span2,
.form-grid > fieldset,
.form-grid > h3,
.form-grid > .notice,
.form-grid > .field-help,
.form-grid > .settings-actions {
    grid-column: 1 / -1;
}

.form-grid fieldset {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 17px;
}

.form-grid legend {
    font-size: 11px;
    font-weight: 720;
    padding: 0 6px;
}

.panel-body {
    padding: 20px 22px;
}

.panel:not(.padded) > form.dynamic-form:not(.toolbar) {
    padding: 0 22px 22px;
}

.panel > .panel-header + .table-scroll,
.panel > .panel-header + .empty-state {
    margin: 0;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px 20px;
    margin: 16px 0;
    font-size: 13px;
}

.detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
    overflow-wrap: anywhere;
}

.connection-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.connection-label small {
    display: block;
    color: var(--muted-strong);
    font-size: 11px;
    margin-top: 4px;
}

.chart-wrap {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    height: 170px;
}

.chart-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    font-size: 10px;
    color: var(--muted-strong);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex: 1;
    width: 100%;
    justify-content: center;
}

.chart-bar {
    width: 12px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
}

.chart-bar.submitted {
    background: var(--tone-teal);
    border-color: var(--accent-teal);
}

.chart-legend,
.chart-note {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted-strong);
}

.chart-note {
    justify-content: space-between;
    margin-top: 14px;
}

.queued-dot,
.submitted-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--primary);
}

.submitted-dot {
    background: var(--accent-teal);
}

.environment-switch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 14px;
}

.environment-switch {
    position: relative;
    display: inline-flex;
}

.environment-switch input {
    position: absolute;
    opacity: 0;
}

.environment-switch-track {
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background: var(--line-strong);
    position: relative;
    cursor: pointer;
}

.environment-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    transition: transform .16s;
}

.environment-switch input:checked + .environment-switch-track {
    background: var(--primary);
}

.environment-switch input:checked + .environment-switch-track::after {
    transform: translateX(22px);
}

.source-navigation,
.schedule-day-actions,
.directory-card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.functional-parameters,
.template-schedule,
.attempt {
    margin-top: 12px;
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Balkenhöhen ohne Inline-Styles (CSP style-src 'self'). */
.chart-bar.h0{height:0%}.chart-bar.h1{height:1%}.chart-bar.h2{height:2%}.chart-bar.h3{height:3%}.chart-bar.h4{height:4%}.chart-bar.h5{height:5%}.chart-bar.h6{height:6%}.chart-bar.h7{height:7%}.chart-bar.h8{height:8%}.chart-bar.h9{height:9%}.chart-bar.h10{height:10%}.chart-bar.h11{height:11%}.chart-bar.h12{height:12%}.chart-bar.h13{height:13%}.chart-bar.h14{height:14%}.chart-bar.h15{height:15%}.chart-bar.h16{height:16%}.chart-bar.h17{height:17%}.chart-bar.h18{height:18%}.chart-bar.h19{height:19%}.chart-bar.h20{height:20%}.chart-bar.h21{height:21%}.chart-bar.h22{height:22%}.chart-bar.h23{height:23%}.chart-bar.h24{height:24%}.chart-bar.h25{height:25%}.chart-bar.h26{height:26%}.chart-bar.h27{height:27%}.chart-bar.h28{height:28%}.chart-bar.h29{height:29%}.chart-bar.h30{height:30%}.chart-bar.h31{height:31%}.chart-bar.h32{height:32%}.chart-bar.h33{height:33%}.chart-bar.h34{height:34%}.chart-bar.h35{height:35%}.chart-bar.h36{height:36%}.chart-bar.h37{height:37%}.chart-bar.h38{height:38%}.chart-bar.h39{height:39%}.chart-bar.h40{height:40%}.chart-bar.h41{height:41%}.chart-bar.h42{height:42%}.chart-bar.h43{height:43%}.chart-bar.h44{height:44%}.chart-bar.h45{height:45%}.chart-bar.h46{height:46%}.chart-bar.h47{height:47%}.chart-bar.h48{height:48%}.chart-bar.h49{height:49%}.chart-bar.h50{height:50%}.chart-bar.h51{height:51%}.chart-bar.h52{height:52%}.chart-bar.h53{height:53%}.chart-bar.h54{height:54%}.chart-bar.h55{height:55%}.chart-bar.h56{height:56%}.chart-bar.h57{height:57%}.chart-bar.h58{height:58%}.chart-bar.h59{height:59%}.chart-bar.h60{height:60%}.chart-bar.h61{height:61%}.chart-bar.h62{height:62%}.chart-bar.h63{height:63%}.chart-bar.h64{height:64%}.chart-bar.h65{height:65%}.chart-bar.h66{height:66%}.chart-bar.h67{height:67%}.chart-bar.h68{height:68%}.chart-bar.h69{height:69%}.chart-bar.h70{height:70%}.chart-bar.h71{height:71%}.chart-bar.h72{height:72%}.chart-bar.h73{height:73%}.chart-bar.h74{height:74%}.chart-bar.h75{height:75%}.chart-bar.h76{height:76%}.chart-bar.h77{height:77%}.chart-bar.h78{height:78%}.chart-bar.h79{height:79%}.chart-bar.h80{height:80%}.chart-bar.h81{height:81%}.chart-bar.h82{height:82%}.chart-bar.h83{height:83%}.chart-bar.h84{height:84%}.chart-bar.h85{height:85%}.chart-bar.h86{height:86%}.chart-bar.h87{height:87%}.chart-bar.h88{height:88%}.chart-bar.h89{height:89%}.chart-bar.h90{height:90%}.chart-bar.h91{height:91%}.chart-bar.h92{height:92%}.chart-bar.h93{height:93%}.chart-bar.h94{height:94%}.chart-bar.h95{height:95%}.chart-bar.h96{height:96%}.chart-bar.h97{height:97%}.chart-bar.h98{height:98%}.chart-bar.h99{height:99%}.chart-bar.h100{height:100%}