/* Atlas Firmensystem – eigene Ergänzungen zum Metronic-Theme */

/* ---- Sidebar ---- */
.app-sidebar .menu-heading {
    letter-spacing: .5px;
    color: var(--bs-gray-500);
}
/* Farbige Icons in der Sidebar */
.app-sidebar .menu-item .menu-link .menu-icon i {
    color: var(--bs-primary);
    opacity: .85;
}
.app-sidebar .menu-item .menu-link.active .menu-icon i {
    color: var(--bs-primary);
    opacity: 1;
}

/* ---- Karten ---- */
.card {
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, .05);
}
a.card {
    transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, .12);
}

/* Farbiger Kopf-Akzent auf Formular-/Listen-Karten */
.card > .card-header .card-title h3 {
    display: flex;
    align-items: center;
}

/* ---- Ablaufleiste ----
   Waagerechte Schrittleiste mit Verbindungspfeilen. Sie bricht bei schmalen
   Fenstern um, statt eine waagerechte Bildlaufleiste zu erzwingen. */
.atlas-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem 0;
}
.atlas-flow-item {
    display: flex;
    align-items: center;
}
.atlas-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 104px;
    hyphens: auto;
}

/* ---- Tabs: innere Karten flach darstellen ----
   Die Detailseiten zeigen die Tabs in EINER Karte; die Inhaltsblöcke darin sind
   selbst Karten -> Karte-in-Karte mit störendem Schatten. Innerhalb von
   .tab-content werden die "normalen" Karten flach dargestellt (kein Schatten,
   kein Rahmen, bündige Innenabstände), sodass der Tab-Inhaltsbereich als eine
   Fläche wirkt. Umrandete Karten (.border) bleiben als eigene, hervorgehobene
   Box erhalten – seit der UX-Nachschärfung steht die einzige hervorgehobene
   Box („Jetzt zu erledigen") aber ÜBER den Tabs, nicht mehr darin. */
.tab-content .card {
    box-shadow: none;
}
.tab-content .card:not(.border) {
    border: 0;
    background: transparent;
}
.tab-content .card:not(.border) > .card-header,
.tab-content .card:not(.border) > .card-body {
    padding-left: 0;
    padding-right: 0;
}

/* ---- Tabellen: leicht getönter Kopf ---- */
.table thead tr th {
    background-color: var(--bs-light);
    border-radius: 0;
}
.table thead tr th:first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
.table thead tr th:last-child  { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }

/* ---- Toolbar / Seitentitel ---- */
.page-title .page-heading {
    position: relative;
    padding-left: .85rem;
}
.page-title .page-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.4rem;
    border-radius: 4px;
    background: var(--bs-primary);
}

/* ---- Bestell-Assistent (Stepper) ---- */
/* Metronic zeigt aktive Schritte per display:flex -> Karten würden nicht die
   volle Breite nutzen. Für den Bestell-Stepper auf Block-Layout umstellen. */
#order_stepper [data-kt-stepper-element="content"] { display: none; }
#order_stepper [data-kt-stepper-element="content"].current { display: block; }
#order_stepper .stepper-item { cursor: default; }

/* ---- Bestellformular ---- */
#order-items-table td,
#order-items-table th { vertical-align: middle; }
#order-items-table .form-control-sm,
#order-items-table .form-select-sm { min-width: 70px; }
#order-items-table tfoot tr td { background-color: var(--bs-light-primary); }

/* Pflichtfeld-Markierung */
.form-label.required::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

/* ---- Fixierter Header / Top-Bar ---- */
/* Oben transparent, beim Herunterscrollen weiß mit Schatten – so überlagert die
   Begrüßung ("Willkommen zurück …") nicht mehr den darunterliegenden Inhalt. */
#kt_app_header {
    transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
    background-color: transparent;
}
#kt_app_header.atlas-header-scrolled {
    background-color: #fff;
    box-shadow: 0 4px 16px rgba(76, 87, 125, .08);
    border-bottom: 1px solid var(--bs-gray-200);
}

/* ---- Login ---- */
body.app-blank { background-color: #f5f8fa; }

/* ---- Rückmeldung ----
   Schaltfläche unten rechts, auf jeder Seite erreichbar. Sie liegt über dem
   Inhalt, aber UNTER Metronic-Dialogen (z-index der Modals: 1055), damit sie
   ein geöffnetes Fenster nicht überlagert. */
.atlas-feedback-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 100;
    border-radius: 2rem;
    padding: .7rem 1.1rem;
    display: flex;
    align-items: center;
}
.atlas-feedback-btn i { line-height: 1; }

/* ---- Entwickler-Prompt ----
   Zweite schwebende Schaltfläche, nur für Administratoren gerendert (siehe
   partials/devprompt.php). Sie sitzt eine Ebene über der Rückmeldung und
   tritt optisch zurück, bis man sie braucht.

   Es sind bewusst nur ZWEI schwebende Schaltflächen. Alles Weitere gehört in
   das Menü oder auf eine eigene Seite – gestapelte Schaltflächen am
   Bildschirmrand verdecken sich gegenseitig und den Inhalt darunter. */
.atlas-devprompt-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 4.75rem;
    z-index: 100;
    border-radius: 2rem;
    padding: .55rem 1rem;
    display: flex;
    align-items: center;
    opacity: .75;
}
.atlas-devprompt-btn:hover { opacity: 1; }
.atlas-devprompt-btn i { line-height: 1; }

/* Statuswahl: drei große Flächen statt dreier kleiner Punkte. Die Auswahl
   steuert, was darunter erscheint – sie muss auf einen Blick erkennbar sein. */
.atlas-phase-choice {
    cursor: pointer;
    border: 1px dashed var(--bs-gray-300, #e4e6ef);
    border-radius: .65rem;
    padding: .85rem 1rem;
    transition: border-color .15s, background-color .15s;
}
.atlas-phase-choice:hover { border-color: var(--bs-primary, #009ef7); }
.atlas-phase-choice.is-active {
    border-style: solid;
    border-color: var(--bs-primary, #009ef7);
    background: var(--bs-light-primary, #f1faff);
}
.atlas-phase-choice input { pointer-events: none; }

/* Ein erfasster Punkt innerhalb der Bewertung. */
.atlas-phase-item {
    border: 1px solid var(--bs-gray-200, #f1f1f2);
    border-radius: .65rem;
    padding: .85rem;
}

/* ---- „Phase bewerten" ----
   Schwebende Schaltfläche unten LINKS. Rechts sitzen Rückmeldung und
   Entwickler-Prompt; eine dritte in derselben Ecke hätte sich wieder mit ihnen
   gestapelt.

   Sie sitzt am Anfang des Inhaltsbereichs, nicht am Fensterrand:
   `--bs-app-sidebar-width` setzt Metronic je nach Layout (265px, 75px bei
   eingeklapptem Menü, 0px auf schmalen Bildschirmen). Damit wandert die
   Schaltfläche von selbst mit, statt unter dem Menü zu verschwinden.

   Gleiche Ebene wie die Schaltflächen rechts: über dem Inhalt, aber unter
   Metronic-Dialogen (1055). */
.atlas-phase-fab {
    position: fixed;
    left: calc(var(--bs-app-sidebar-width, 0px) + 1.25rem);
    bottom: 1.25rem;
    z-index: 100;
    border-radius: 2rem;
    padding: .7rem 1.1rem;
    display: flex;
    align-items: center;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
    transition: left .3s ease, transform .15s ease;
}
.atlas-phase-fab i { line-height: 1; }
.atlas-phase-fab:hover { transform: translateY(-2px); }

/* Wartet eine Bewertung, atmet der Schatten langsam.

   Bewusst nur der Schatten und keine Größenänderung: Ein wachsender Knopf
   verschiebt den Inhalt darunter optisch und zieht die Aufmerksamkeit
   dauerhaft ab. Der Puls ist lang (2,4 s) und schwach – er soll am Rand des
   Blickfelds auffallen, nicht blinken.

   Ist alles bewertet, fehlt `.is-waiting` und die Schaltfläche steht still. */
@keyframes atlas-phase-pulse {
    0%   { box-shadow: 0 .25rem .75rem rgba(0, 158, 247, .25); }
    50%  { box-shadow: 0 .25rem 1.5rem .35rem rgba(0, 158, 247, .45); }
    100% { box-shadow: 0 .25rem .75rem rgba(0, 158, 247, .25); }
}
.atlas-phase-fab.is-waiting {
    animation: atlas-phase-pulse 2.4s ease-in-out infinite;
}

/* Wer Bewegung abgestellt hat, bekommt keine. Der Hinweis geht dabei nicht
   verloren: der eingefärbte Schatten bleibt, nur ruhig. */
@media (prefers-reduced-motion: reduce) {
    .atlas-phase-fab { transition: none; }
    .atlas-phase-fab:hover { transform: none; }
    .atlas-phase-fab.is-waiting {
        animation: none;
        box-shadow: 0 .25rem 1.25rem .25rem rgba(0, 158, 247, .4);
    }
}

@media print {
    .atlas-feedback-btn,
    .atlas-devprompt-btn,
    .atlas-phase-fab { display: none !important; }
}

/* ---- Ampelpunkt der Leistungsumfang-Einordnung ----
   Ein gezeichneter Punkt statt einer Emoji-Kugel: Die Emoji werden je nach
   Schriftart des Systems verschieden dargestellt, sind unterschiedlich groß
   und treffen die Farben der Oberfläche nicht. Dieser Punkt sitzt auf der
   Schriftlinie und nimmt die Themefarbe. */
.atlas-scope-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: baseline;
    background: var(--bs-gray-400, #b5b5c3);
}
.atlas-scope-dot--success   { background: var(--bs-success, #50cd89); }
.atlas-scope-dot--warning   { background: var(--bs-warning, #ffc700); }
.atlas-scope-dot--danger    { background: var(--bs-danger,  #f1416c); }
/* Noch nicht bewertet: offener Kreis statt gefülltem Punkt – „hier fehlt
   etwas" liest sich anders als „hier steht etwas Graues". */
.atlas-scope-dot--secondary {
    background: transparent;
    border: 1px solid var(--bs-gray-400, #b5b5c3);
}

/* ---- Phasenwahl auf der Bewertungsseite ----
   Bewertet wird der Reihe nach; gesperrte Phasen bleiben sichtbar, damit der
   Ablauf erkennbar ist – aber sie sind nicht anklickbar. */
.atlas-phase-step {
    border: 1px solid var(--bs-gray-300, #e4e6ef);
    border-radius: .65rem;
    padding: .5rem .85rem;
    cursor: pointer;
    background: none;
    text-align: left;
    transition: border-color .15s, background-color .15s;
}
.atlas-phase-step:hover:not(:disabled) { border-color: var(--bs-primary, #009ef7); }
.atlas-phase-step.is-active {
    border-color: var(--bs-primary, #009ef7);
    background: var(--bs-light-primary, #f1faff);
}
.atlas-phase-step:disabled {
    cursor: not-allowed;
    opacity: .55;
    border-style: dashed;
}

/* Hinweisleiste während des Markierens einer Stelle */
.atlas-fb-picker-hint {
    position: fixed;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 2rem;
    padding: .6rem 1rem;
    font-size: .9rem;
    display: flex;
    align-items: center;
    color: var(--bs-gray-800);
}

/* Element, über dem beim Markieren gerade der Mauszeiger steht */
.atlas-fb-picking,
.atlas-fb-picking * { cursor: crosshair !important; }
.atlas-fb-hover {
    outline: 2px dashed var(--bs-primary) !important;
    outline-offset: 2px;
    background-color: rgba(var(--bs-primary-rgb), .06) !important;
}

/* ---- Rückmeldungen: Miniaturkarte der Seite ----
   Stellt die gemeldete Seite als kleines Rechteck dar (Seitenverhältnis grob
   wie ein Bildschirm im Hochformat) und zeigt darin maßstäblich, wo die
   angeklickte Stelle lag. Ersetzt kein Bildschirmfoto – beantwortet aber auf
   einen Blick "Kopf, Mitte oder Fuß der Seite?". */
.atlas-fb-map {
    position: relative;
    width: 108px;
    height: 148px;
    border: 1px solid var(--bs-gray-300);
    border-radius: .35rem;
    background: #fff;
    overflow: hidden;
}
.atlas-fb-map-head {
    position: absolute;
    inset: 0 0 auto 0;
    height: 10px;
    background: var(--bs-gray-200);
    border-bottom: 1px solid var(--bs-gray-300);
}
.atlas-fb-map-spot {
    position: absolute;
    background-color: rgba(var(--bs-danger-rgb), .35);
    border: 1px solid var(--bs-danger);
    border-radius: 2px;
    min-width: 3px;
    min-height: 3px;
}

/* ---- Gemeldete Stelle auf der echten Seite hervorheben ---- */
.atlas-fb-marked {
    outline: 3px solid var(--bs-danger) !important;
    outline-offset: 3px;
    border-radius: 3px;
    animation: atlas-fb-pulse 1.4s ease-in-out 3;
}
@keyframes atlas-fb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), .45); }
    50%      { box-shadow: 0 0 0 12px rgba(var(--bs-danger-rgb), 0); }
}
.atlas-fb-mark-note {
    position: fixed;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--bs-danger);
    border-radius: 2rem;
    padding: .6rem 1rem;
    font-size: .9rem;
    display: flex;
    align-items: center;
    color: var(--bs-gray-800);
}

/* ============================================================
   Wartung / Aktualisierung
   ============================================================
   Bildschirmfüllende Sperre, während eine Aktualisierung läuft. Geschaltet
   wird sie in der Datenbank (settings.maintenance_active), siehe
   App\Core\Maintenance.

   z-index bewusst über allem anderen: Metronic-Dialoge liegen bei 1055, die
   Hinweisleisten der Rückmeldung bei 1080, das Belegupload-Overlay bei 2000.
   Eine Sperre, die ein offener Dialog überdecken könnte, wäre keine.

   Sichtbar wird die Sperre über die Klasse .is-active, die bereits der Server
   setzt – sonst blitzte die bedienbare Oberfläche kurz auf. */
.atlas-maint {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
}
.atlas-maint.is-active {
    display: flex;
    animation: atlas-maint-in .35s ease both;
}
/* Ausblenden am Ende der Wartung – danach lädt die Seite neu. */
.atlas-maint.is-leaving {
    animation: atlas-maint-out .4s ease both;
}

.atlas-maint-card {
    width: 100%;
    max-width: 440px;
    text-align: center;
    padding: 2.5rem 2rem 2rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(76, 87, 125, .18);
    border: 1px solid var(--bs-gray-200);
}

/* ---- Ring mit Logo ---- */
.atlas-maint-ring {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 1.75rem;
}
.atlas-maint-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .10);
    animation: atlas-maint-pulse 2.2s ease-in-out infinite;
}
.atlas-maint-arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: atlas-maint-spin 2.4s linear infinite;
}
.atlas-maint-track {
    fill: none;
    stroke: rgba(var(--bs-primary-rgb), .14);
    stroke-width: 4;
}
.atlas-maint-sweep {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 4;
    stroke-linecap: round;
    /* Ohne transform-box drehen ältere Browser um die Ecke des Rahmens
       statt um die Mitte des viewBox. */
    transform-box: view-box;
    transform-origin: 50% 50%;
}
/* Umfang bei r=45 sind rund 283, bei r=38 rund 239 – die Lücke ergibt den
   sichtbaren Bogen. Zwei gegenläufige Bögen wirken lebendiger als einer. */
.atlas-maint-sweep-a {
    stroke-dasharray: 72 211;
    animation: atlas-maint-spin 1.2s cubic-bezier(.6, .05, .35, .95) infinite;
}
.atlas-maint-sweep-b {
    stroke-width: 3;
    stroke: rgba(var(--bs-primary-rgb), .45);
    stroke-dasharray: 40 199;
    animation: atlas-maint-spin-back 1.9s linear infinite;
}
.atlas-maint-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: auto;
    transform: translate(-50%, -50%);
    animation: atlas-maint-breathe 2.2s ease-in-out infinite;
}

/* ---- Text ---- */
.atlas-maint-headline {
    margin: 0 0 .6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-gray-900);
}
.atlas-maint-message {
    margin: 0 0 1.75rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--bs-gray-700);
}

/* ---- Unbestimmter Laufbalken ----
   Ohne Prozentzahl: der Server kennt den Fortschritt nicht. Ein Balken, der
   eine Zahl behauptet, wäre geraten. */
.atlas-maint-bar {
    position: relative;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--bs-primary-rgb), .12);
}
.atlas-maint-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(var(--bs-primary-rgb), 0) 0%,
        var(--bs-primary) 50%,
        rgba(var(--bs-primary-rgb), 0) 100%);
    animation: atlas-maint-flow 1.6s ease-in-out infinite;
}

/* ---- Fußzeile ---- */
.atlas-maint-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.4rem;
    font-size: .82rem;
    color: var(--bs-gray-600);
}
.atlas-maint-dots {
    display: inline-flex;
    gap: 4px;
    flex: none;
}
.atlas-maint-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-primary);
    animation: atlas-maint-blink 1.4s ease-in-out infinite;
}
.atlas-maint-dots i:nth-child(2) { animation-delay: .2s; }
.atlas-maint-dots i:nth-child(3) { animation-delay: .4s; }

.atlas-maint-elapsed {
    margin-top: .5rem;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--bs-gray-500);
}

@keyframes atlas-maint-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes atlas-maint-out {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
}
@keyframes atlas-maint-spin {
    to { transform: rotate(360deg); }
}
@keyframes atlas-maint-spin-back {
    to { transform: rotate(-360deg); }
}
@keyframes atlas-maint-pulse {
    0%, 100% { transform: scale(.9);  opacity: .55; }
    50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes atlas-maint-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes atlas-maint-flow {
    0%   { left: -40%; }
    100% { left: 100%; }
}
@keyframes atlas-maint-blink {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* Wer Bewegung im System abgestellt hat, bekommt die Sperre ruhig: sichtbar
   bleibt sie trotzdem, nur eben ohne Drehen und Pulsieren. */
@media (prefers-reduced-motion: reduce) {
    .atlas-maint.is-active,
    .atlas-maint.is-leaving,
    .atlas-maint-halo,
    .atlas-maint-arcs,
    .atlas-maint-sweep,
    .atlas-maint-logo,
    .atlas-maint-bar-fill,
    .atlas-maint-dots i {
        animation: none !important;
    }
    .atlas-maint-bar-fill { left: 0; width: 100%; opacity: .5; }
}

@media print {
    .atlas-maint { display: none !important; }
}

/* ---- Auswertungen (Phase 6) ----
   Jede Filteränderung wertet sofort neu aus. Zwischen Klick und neuer Seite
   liegt eine Anfrage – ohne Rückmeldung wirkt die Seite in dieser Zeit tot,
   und es wird ein zweites Mal geklickt. Deshalb wird der Inhalt abgeblendet
   und für Eingaben gesperrt, sobald die Auswertung läuft.
   Die Filterleiste selbst bleibt lesbar: dort steht, worauf man wartet. */
.is-report-busy {
    opacity: .45;
    pointer-events: none;
    transition: opacity .12s ease-out;
}
.is-report-busy [data-report-filter] {
    opacity: 1;
}

/* Merkzettel der gesetzten Filter: das × soll erst beim Zeigen kräftig werden. */
.badge .ki-cross {
    opacity: .5;
}
.badge a:hover .ki-cross {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .is-report-busy { transition: none; }
}

/* ---- Lesbarkeit: alert-secondary ----
   Das Theme setzt hier eine sehr helle Schrift auf sehr hellem Grund – auf der
   Seite „Ablauf & Status" war der Text praktisch unsichtbar. Die Klasse ist
   dort jetzt nicht mehr im Einsatz; diese Regel steht als Absicherung, damit
   derselbe Kasten nicht beim nächsten Mal wieder unleserlich wird. */
.alert-secondary {
    --bs-alert-color: var(--bs-gray-800);
    color: var(--bs-gray-800);
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-300);
}

/* ---- Drucken ----
   Auf Papier gehören Menü, Kopfzeile und die schwebenden Schaltflächen nicht
   aufs Blatt: Sie kosten die halbe Seitenbreite und sagen im Ausdruck nichts.
   Betrifft nur das Hauptlayout – erzeugte Dokumente (Rechnung, Bestellung)
   haben ihr eigenes Layout und sind hiervon unberührt. */
@media print {
    .app-sidebar,
    #kt_app_header,
    #kt_app_toolbar,
    #kt_app_footer,
    .atlas-fb,
    .atlas-dp,
    .btn {
        display: none !important;
    }
    #kt_app_wrapper,
    #kt_app_main,
    #kt_app_content,
    #kt_app_content_container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #d0d0d0 !important;
        break-inside: avoid;
    }
    body { background: #fff !important; }
}