@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* ===== Aturisierer Design System – Aura-Variablen-Mapping ===== */
/*
    Alle --atz-* Farben werden auf --mud-palette-* abgebildet.
    Dadurch übernehmen die DG-Seiten automatisch Auras Tenant-Theme und Dark-Mode.
*/
:root {
    --atz-primary:     var(--mud-palette-primary);
    --atz-primary-600: color-mix(in srgb, var(--mud-palette-primary) 80%, black 20%);
    --atz-accent:      var(--mud-palette-info);
    --atz-success:     var(--mud-palette-success);
    --atz-warning:     var(--mud-palette-warning);
    --atz-danger:      var(--mud-palette-error);

    --atz-text:    var(--mud-palette-text-primary);
    --atz-muted:   var(--mud-palette-text-secondary);
    --atz-soft:    color-mix(in srgb, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    --atz-surface: var(--mud-palette-surface);
    --atz-border:  var(--mud-palette-divider);

    --atz-radius-sm: 10px;
    --atz-radius:    12px;
    --atz-radius-lg: 16px;
    --atz-shadow-sm: 0 6px 16px rgba(0,0,0,.10);
    --atz-shadow:    0 10px 24px rgba(0,0,0,.12);
    --atz-shadow-lg: 0 18px 40px rgba(0,0,0,.16);

    /* Bootstrap-Variablen ebenfalls auf Aura-Theme mappen */
    --bs-primary:          var(--mud-palette-primary);
    --bs-primary-rgb:      var(--mud-palette-primary-rgb);
    --bs-link-color:       var(--mud-palette-primary);
    --bs-link-hover-color: var(--atz-primary-600);
}

/* ===== Dark Mode (Aura nutzt .mud-dark-theme statt [data-theme="dark"]) ===== */
.mud-dark-theme {
    --atz-shadow-sm: 0 6px 16px rgba(0,0,0,.35);
    --atz-shadow:    0 10px 24px rgba(0,0,0,.40);
    --atz-shadow-lg: 0 18px 40px rgba(0,0,0,.50);

    /* Bootstrap Dark Mode */
    --bs-body-bg:         var(--mud-palette-background);
    --bs-body-color:      var(--mud-palette-text-primary);
    --bs-border-color:    var(--mud-palette-divider);
    --bs-secondary-color: var(--mud-palette-text-secondary);
    --bs-secondary-bg:    var(--mud-palette-surface);
    --bs-tertiary-bg:     var(--mud-palette-background);
    --bs-emphasis-color:  var(--mud-palette-text-primary);
    --bs-table-color:         var(--mud-palette-text-primary);
    --bs-table-striped-color:  var(--mud-palette-text-primary);
    --bs-nav-tabs-link-active-bg:            var(--mud-palette-surface);
    --bs-nav-tabs-link-active-color:         var(--mud-palette-text-primary);
    --bs-nav-tabs-link-active-border-color:  var(--mud-palette-divider) var(--mud-palette-divider) var(--mud-palette-surface);
    --bs-nav-tabs-border-color:              var(--mud-palette-divider);
}

.mud-dark-theme .modal-content {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
}

.mud-dark-theme .modal-header,
.mud-dark-theme .modal-footer {
    border-color: var(--mud-palette-divider);
}

.mud-dark-theme .modal .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

.mud-dark-theme .u-card,
.mud-dark-theme .card,
.mud-dark-theme .u-panel {
    background: var(--atz-surface);
    border-color: var(--atz-border);
    color: var(--atz-text);
}

.mud-dark-theme .card-header,
.mud-dark-theme .card-footer {
    background: rgba(255,255,255,.04);
    border-color: var(--atz-border);
}

/* ===== Globale Basis ===== */
a, .btn-link {
    color: var(--atz-primary);
}

a:hover {
    color: var(--atz-primary-600);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--atz-success);
}

.invalid {
    outline: 1px solid var(--atz-danger);
}

.validation-message {
    color: var(--atz-danger);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--atz-border);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjY2LjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.progress-container {
    width: 60%;
    max-width: 600px;
    text-align: center;
}

.progress-container h5 { margin-bottom: 1rem; }
.progress-container p  { margin-bottom: .5rem; min-height: 1.5em; }

/* ===== Bootstrap-Komponentenfarben auf Design System mappen ===== */
.btn-primary {
    color: #fff;
    background-color: var(--atz-primary) !important;
    border-color: var(--atz-primary-600) !important;
}

.btn-primary:hover {
    background: var(--atz-primary-600) !important;
}

.btn-outline-primary {
    color: var(--atz-primary);
    border-color: var(--atz-primary);
}

.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--atz-primary) 10%, white);
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: #fff !important;
    background-color: var(--atz-primary) !important;
    border-color: var(--atz-primary-600) !important;
}

.btn-outline-secondary {
    color: var(--atz-text);
    border-color: var(--atz-border);
}

.btn-outline-secondary:hover { background: rgba(0,0,0,.04); }

.btn        { border-radius: var(--atz-radius); box-shadow: var(--atz-shadow-sm); }
.btn-ghost  { background: transparent; border: 1px solid var(--atz-border); border-radius: var(--atz-radius); }
.btn-ghost:hover { background: rgba(0,0,0,.04); }
.btn-sm     { border-radius: var(--atz-radius); }

.form-check-input:checked {
    background-color: var(--atz-primary) !important;
    border-color: var(--atz-primary) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--atz-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--atz-primary) 22%, transparent) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem var(--atz-primary) !important;
}

.form-control, .form-select, textarea.form-control {
    border: 1px solid var(--atz-border);
    border-radius: var(--atz-radius);
}

/* ===== Design System Utility-Klassen ===== */
.u-title    { font-weight: 800; letter-spacing: .2px; color: var(--atz-text); }
.u-subtitle { color: var(--atz-muted); }

.u-card {
    background: var(--atz-surface);
    border: 1px solid var(--atz-border);
    border-radius: var(--atz-radius-lg);
    box-shadow: var(--atz-shadow);
}

.u-panel {
    background: var(--atz-surface);
    border: 1px solid var(--atz-border);
    border-radius: var(--atz-radius);
    padding: 12px 14px;
}

.u-tag  { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--atz-primary) 10%, var(--atz-surface)); color: var(--atz-primary); font-size: .82rem; }
.u-tag.muted { background: var(--atz-soft); color: var(--atz-muted); }
.u-chip { display: inline-flex; align-items: center; border: 1px solid var(--atz-border); border-radius: 999px; padding: 2px 8px; gap: .5rem; background: var(--atz-surface); }

.u-input { border: 1px solid var(--atz-border); border-radius: var(--atz-radius); padding: .55rem .7rem; }
.u-input:focus { border-color: var(--atz-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atz-primary) 22%, transparent); outline: none; }

.u-gap-1 { gap: .25rem; } .u-gap-2 { gap: .5rem; } .u-gap-3 { gap: .75rem; } .u-gap-4 { gap: 1rem; }
.u-rounded    { border-radius: var(--atz-radius); }
.u-rounded-lg { border-radius: var(--atz-radius-lg); }

/* ===== Globale Element-Overrides ===== */
.card         { border: 1px solid var(--atz-border); border-radius: var(--atz-radius-lg); box-shadow: var(--atz-shadow); }
.modal-content { border-radius: var(--atz-radius-lg); border: 1px solid var(--atz-border); }

/* ===== Mobile (<= 640px) ===== */
:where([data-aura-view="mobile"]) main,
:where([data-aura-view="mobile"]) .content,
:where([data-aura-view="mobile"]) .container,
:where([data-aura-view="mobile"]) .container-fluid { padding-left: 12px; padding-right: 12px; }
:where([data-aura-view="mobile"]) h1 { font-size: clamp(1.25rem, 5vw, 1.6rem); }
:where([data-aura-view="mobile"]) h2 { font-size: clamp(1.1rem, 4.6vw, 1.4rem); }
:where([data-aura-view="mobile"]) h3 { font-size: clamp(1rem, 4vw, 1.2rem); }
:where([data-aura-view="mobile"]) .u-card,
:where([data-aura-view="mobile"]) .card,
:where([data-aura-view="mobile"]) .u-panel { margin: 10px 0; padding: 12px; border-radius: var(--atz-radius); }
/* `:not(.btn-icon-square)` schliesst dezidiert quadratische Icon-Buttons (z.B. Anleitung im
   Section-Header) vom Touch-Min-Height aus — sonst werden 36×36-px-Icon-Buttons auf 36×44-px
   gezerrt und sind nicht mehr quadratisch. */
:where([data-aura-view="mobile"]) .btn:not(.btn-icon-square) { min-height: 44px; }
:where([data-aura-view="mobile"]) .form-control,
:where([data-aura-view="mobile"]) .form-select,
:where([data-aura-view="mobile"]) textarea.form-control { min-height: 44px; font-size: 1rem; }

/* Quadratische Icon-Buttons (.btn-icon-square): 36 px × 36 px, Icon vertikal + horizontal mittig
   via inline-flex (sonst sitzt das Icon am Baseline der Button-Zeile und verrutscht). */
:where([data-aura-view="mobile"]) .btn.btn-icon-square {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:where([data-aura-view="mobile"]) .btn.btn-icon-square > i {
    font-size: 1.15rem;
    line-height: 1;
}
:where([data-aura-view="mobile"]) img,
:where([data-aura-view="mobile"]) video { max-width: 100%; height: auto; }
:where([data-aura-view="mobile"]) .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where([data-aura-view="mobile"]) .modal-dialog { margin: .5rem; }