/* Eigene Anpassungen des Admin-Panels; liegt ueber dem Theme der Vorlage. */

/* ------------------------------------------------------------------------------------------------
 * Design-Variablen (Refactoring UI, docs/11_refactoring_ui_notizen.md §9): feste Skalen statt Einzelwerte.
 * Abstaende und Schriftgroessen nicht linear (Nachbarn >= 25 % auseinander), Graus kuehl (Slate), eine
 * Primaerfarbe mit wenigen Stufen, Statusfarben als helle Toenung + dunkle Schrift, drei Schattenhoehen.
 * ------------------------------------------------------------------------------------------------ */
:root {
	--ap-s1: 4px; --ap-s2: 8px; --ap-s3: 12px; --ap-s4: 16px; --ap-s5: 24px; --ap-s6: 32px; --ap-s7: 48px; --ap-s8: 64px;
	--ap-f12: 13px; --ap-f13: 14px; --ap-f14: 14px; --ap-f16: 16px; --ap-f18: 18px; --ap-f20: 20px; --ap-f24: 24px; --ap-f30: 30px;
	--ap-grau-900: #0f172a; --ap-grau-800: #1e293b; --ap-grau-700: #334155; --ap-grau-600: #475569; --ap-grau-500: #64748b;
	--ap-grau-400: #94a3b8; --ap-grau-300: #cbd5e1; --ap-grau-200: #e2e8f0; --ap-grau-100: #f1f5f9; --ap-grau-50: #f8fafc;
	--ap-primaer-100: #e0ecfb; --ap-primaer-500: #2a78d6; --ap-primaer-700: #1d5aa8;
	--ap-ok-100: #dcfce7; --ap-ok-800: #166534;
	--ap-warn-100: #fef3c7; --ap-warn-800: #92400e;
	--ap-gefahr-100: #fee2e2; --ap-gefahr-800: #991b1b;
	--ap-info-100: #e0f2fe; --ap-info-800: #075985;
	--ap-neutral-100: #e2e8f0; --ap-neutral-800: #334155;
	--ap-radius-feld: .375rem; --ap-radius-karte: .75rem; --ap-radius-pille: 999px;
	--ap-schatten-1: 0 1px 3px hsla(0, 0%, 0%, .12);
	--ap-schatten-2: 0 5px 15px hsla(0, 0%, 0%, .12);
	--ap-schatten-3: 0 15px 35px hsla(0, 0%, 0%, .18);
}

/* Statuspillen: bestehende Bootstrap-Badges werden im Inhalt zu hellen Pillen mit dunkler Schrift
 * (Kontrast umgedreht, Refactoring UI S. 164). Templates und JS behalten ihre Klassen. */
.page-content .badge { font-weight: 600; font-size: var(--ap-f12); padding: .3em .65em; border-radius: var(--ap-radius-pille); letter-spacing: .01em; }
.page-content .badge.bg-success  { background-color: var(--ap-ok-100) !important; color: var(--ap-ok-800) !important; }
.page-content .badge.bg-danger   { background-color: var(--ap-gefahr-100) !important; color: var(--ap-gefahr-800) !important; }
.page-content .badge.bg-warning  { background-color: var(--ap-warn-100) !important; color: var(--ap-warn-800) !important; }
.page-content .badge.bg-info     { background-color: var(--ap-info-100) !important; color: var(--ap-info-800) !important; }
.page-content .badge.bg-primary  { background-color: var(--ap-primaer-100) !important; color: var(--ap-primaer-700) !important; }
.page-content .badge.bg-secondary, .page-content .badge.bg-dark { background-color: var(--ap-neutral-100) !important; color: var(--ap-neutral-800) !important; }

/* Tabellen: Zahlen rechtsbuendig mit Tabellenziffern, Links als dunkler fetter Text (Unterstrich erst bei Hover) */
.page-content table .text-end { font-variant-numeric: tabular-nums; }
.page-content table a:not(.btn):not(.badge) { color: var(--ap-grau-800); font-weight: 600; text-decoration: none; }
.page-content table a:not(.btn):not(.badge):hover { color: var(--ap-primaer-700); text-decoration: underline; }
.page-content table thead th { color: var(--ap-grau-600); font-size: var(--ap-f12); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Tabellendichte: Theme-Zellen sind sehr hoch; Listen im Panel sind Arbeitslisten (bewusst dichter), table-sm noch enger */
.page-content .table > :not(caption) > * > * { padding: .55rem .6rem; }
.page-content .table-sm > :not(caption) > * > * { padding: .3rem .5rem; }
/* Datatable-Kopf (jQuery UI): keine grauen Verlaeufe, Suchfelder und Titel auf ruhiger Flaeche */
.page-content .datatable thead th.ui-state-default { background: var(--ap-grau-50); border-color: var(--ap-grau-200); }
.page-content .datatable thead th.ui-state-default .form-control { background: #fff; }

/* Listen lesbar halten: Zebra statt harter Linien, Linien nur hauchduenn, Hover deutlich; breite Listen deckeln */
.page-content .table > :not(caption) > * > * { border-bottom-color: var(--ap-grau-100); }
.page-content .table:not(.mon-table) > tbody > tr:nth-child(even) > * { background-color: var(--ap-grau-50); }
.page-content .table.table-hover:not(.mon-table) > tbody > tr:hover > * { background-color: var(--ap-primaer-100); --bs-table-accent-bg: transparent; }
.page-content .table thead th { background: #fff; }
.ap-tabelle-schmal { max-width: 72rem; }
.page-content .table .ap-primaer { color: var(--ap-grau-900); font-weight: 600; }
.page-content .table .ap-sekundaer { color: var(--ap-grau-500); }

/* Kartentitel sind Beschriftungen, keine Ueberschriften: kleiner, dunkel, Icon weicher */
.page-content .card-title { font-size: var(--ap-f18); font-weight: 700; color: var(--ap-grau-900); }
.page-content .card-title .mdi, .page-content h5 .mdi { color: var(--ap-grau-500); }
.page-content .card-body > p.text-muted { max-width: 72ch; }

/* Aktiver Sidebar-Punkt: Akzentstrich links statt nur fett */
#sidebarnav .sidebar-item.active > .sidebar-link, #sidebarnav .sidebar-item > .sidebar-link.active { box-shadow: inset 3px 0 0 var(--ap-primaer-500); background: var(--ap-grau-50); }

/* Leerzustand: Icon, Satz, Aktion */
.ap-leer { display: flex; flex-direction: column; align-items: center; gap: var(--ap-s2); padding: var(--ap-s6) var(--ap-s4); color: var(--ap-grau-500); text-align: center; background: var(--ap-grau-50); border: 1px dashed var(--ap-grau-300); border-radius: var(--ap-radius-karte); }
.ap-leer .mdi { font-size: var(--ap-f30); color: var(--ap-grau-400); }
.ap-leer strong { color: var(--ap-grau-700); }

/* Formulare: Eingabebreite deckeln, Kopfzeile mit Titel und Hauptaktion */
.ap-formular { max-width: 60rem; }
.ap-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ap-s2) var(--ap-s4); margin-bottom: var(--ap-s4); }
.ap-kopf .ap-kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-s2); margin-left: auto; }

/* Formularabschnitte (Refactoring UI S. 80/81): links Titel und Erklaerung, rechts die Felder mit gedeckelter
   Breite. Jeder Abschnitt ist eine Zeile, der erste ohne Trennlinie; unter 992 px untereinander. */
.ap-abschnitt { display: grid; grid-template-columns: minmax(12rem, 24%) minmax(0, 1fr); gap: var(--ap-s4) var(--ap-s7); align-items: start; padding: var(--ap-s5) 0; border-top: 1px solid var(--ap-grau-200); }
.ap-abschnitt:first-of-type, .ap-abschnitt.ap-abschnitt-erster { padding-top: 0; border-top: 0; }
.ap-abschnitt-kopf h5 { margin: 0 0 var(--ap-s1); font-size: var(--ap-f16); font-weight: 700; color: var(--ap-grau-900); }
.ap-abschnitt-kopf p { margin: 0 0 var(--ap-s2); font-size: var(--ap-f13); line-height: 1.55; color: var(--ap-grau-600); }
.ap-abschnitt-kopf p:last-child { margin-bottom: 0; }
.ap-abschnitt-kopf .alert { margin: var(--ap-s3) 0 0; font-size: var(--ap-f13); }
.ap-abschnitt-felder { min-width: 0; max-width: 52rem; }
.ap-formfuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ap-s2); padding-top: var(--ap-s5); border-top: 1px solid var(--ap-grau-200); }
.page-content .form-label { margin-bottom: .3rem; font-size: var(--ap-f14); font-weight: 600; color: var(--ap-grau-700); }
.page-content .form-label .text-muted, .page-content .form-check-label .text-muted { font-weight: 400; }
.page-content .form-text { color: var(--ap-grau-600); font-size: var(--ap-f13); }
@media (max-width: 991.98px) { .ap-abschnitt { grid-template-columns: 1fr; gap: var(--ap-s3); } }

/* Kernseiten (Mein Konto): dunkle Kartenkoepfe werden zu ruhigen hellen Koepfen */
.page-content .card-header.bg-dark { background: var(--ap-grau-50) !important; border-bottom: 1px solid var(--ap-grau-200); }
.page-content .card-header.bg-dark .text-white { color: var(--ap-grau-900) !important; font-size: var(--ap-f16); font-weight: 700; }


/* Gemeinsame Oberflaeche: ruhige Arbeitsflaeche, klarere Karten und gut lesbare Datenansichten. */
.page-wrapper { background: #f8fafc; }
/* Seitenkopf: Titel links, Breadcrumbs rechts, ohne Hintergrund (Betreiber 2026-11-01) */
.page-breadcrumb.ap-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ap-s1) var(--ap-s4); background: transparent; box-shadow: none; }
.page-breadcrumb.ap-seitenkopf #breadcrumbs nav { margin-top: 0 !important; }
.page-breadcrumb.ap-seitenkopf .breadcrumb { background: transparent; margin: 0; padding: 0; font-size: var(--ap-f13); }
.page-breadcrumb.ap-seitenkopf .breadcrumb .breadcrumb-item, .page-breadcrumb.ap-seitenkopf .breadcrumb .breadcrumb-item > a { color: var(--ap-grau-500); }
.page-breadcrumb.ap-seitenkopf .breadcrumb .breadcrumb-item > a:hover { color: var(--ap-grau-800); }
@media (max-width: 767.98px) { .page-breadcrumb.ap-seitenkopf { flex-direction: column; align-items: flex-start; } } /* mobil untereinander, beides linksbündig */
@media (min-width: 768px) { body { overflow-x: clip; } #main-wrapper { overflow: clip; } .page-wrapper > .breadcrumb-hidden { position: sticky; top: 60px; z-index: 1010; background: #f8fafc; } } /* body (overflow-x:hidden) und #main-wrapper (overflow:hidden) waeren Scroll-Container, in denen sticky nie greift; clip schneidet gleich ab, ohne Scroll-Container zu sein. Sticky liegt auf dem Wrapper .breadcrumb-hidden, weil .page-breadcrumb sonst in einem gleich hohen Elternteil keinen Spielraum haette */ /* Desktop: Leiste bleibt beim Scrollen oben stehen (Betreiber 2026-11-01); top 60px = Hoehe der Topbar */
.page-content .card { border: 1px solid #e2e8f0; border-radius: .7rem; box-shadow: 0 3px 14px rgba(15, 23, 42, .045); }
.page-content .card-title { color: #0f172a; font-weight: 700; }
.page-content .table > :not(caption) > * > * { border-color: #e8eef5; }
.page-content .table > thead > tr > th { color: #475569; background: #f8fafc; font-size: .78rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.page-content .form-control, .page-content .form-select { border-color: #cbd5e1; border-radius: .45rem; }
.page-content .form-control:focus, .page-content .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59,130,246,.13); }
.page-content .btn { border-radius: .45rem; font-weight: 600; }
.page-content .btn-primary { box-shadow: 0 2px 6px rgba(37,99,235,.22); }

/* Abschnittsueberschriften der hellen Sidebar (skin6): das Theme setzt sie weiss. */
.sidebar-nav ul .nav-small-cap {
    color: #64748b;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 12px 13px 4px;
    margin-top: 6px;
}
.sidebar-nav ul .nav-small-cap i {
    display: none;
}

/* Noch nicht portierte Menuepunkte bleiben sichtbar, aber ohne Funktion. */
#sidebarnav .sidebar-item.disabled > .sidebar-link {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* Profilmenue unten in der Sidebar (wie GebietsManager / Franchiseverzeichnis), klappt nach oben auf. */
.ap-profilfuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #fff; border-top: 1px solid rgba(0,0,0,.10); padding: 8px; }
.ap-profilknopf { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #334155; text-decoration: none; }
.ap-profilknopf:hover, .ap-profilknopf:focus-visible { background: rgba(0,0,0,.05); color: #0f172a; }
.ap-profilbild { flex: none; object-fit: cover; }
.ap-profiltext { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ap-profilname { font-weight: 600; font-size: 13px; }
.ap-profilmail { font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-profilpfeil { margin-left: auto; color: #94a3b8; }
.ap-profilmenue { min-width: 240px; }
.ap-profilmenue .dropdown-item i { width: 22px; color: #64748b; }
.left-sidebar .scroll-sidebar { padding-bottom: 64px; }
#main-wrapper[data-sidebartype="mini-sidebar"] .ap-profilknopf { justify-content: center; }

/* Monitoring: kompakte Tabelle, keine Umbrueche, dunkle Trennlinien, zweite Zeile klein */
.mon-table > :not(caption) > * > * { padding: .1rem .2rem; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid #8a8f98; line-height: 1.2em;}
.mon-table thead th { border-bottom: 2px solid #4b5563; }
.mon-table .mon-zweit { font-size: .8em; color: #555; }
.mon-table tr[class^="mon-"] .mon-zweit { color: #333; }
.mon-table a.text-reset { text-decoration: none; }
.mon-table a.text-reset:hover { text-decoration: underline; }
/* Monitoring: Ampelfarben der Zeilen (Legacy: gelb neu, rot Fehler, rot2 MUTE, blau Kasse/geschlossen, gruen erledigt) */
/* Zeilenfarben gedaempft (Refactoring UI: Toenung ~95 % Helligkeit, Status zusaetzlich als Akzentstrich links und
 * als Text in der Statuspille, nie nur Farbe). Die Legacy-Volltoene (#ffffaa, #ffaaaa, …) waren zu grell. */
.mon-table tr[class^="mon-"] > td { --mon-tint: transparent; --mon-akzent: transparent; background-color: var(--mon-tint); }
.mon-table tr[class^="mon-"] > td:first-child { box-shadow: inset 4px 0 0 var(--mon-akzent); }
.mon-table tr.mon-gelb  > td { --mon-tint: hsl(48, 100%, 94%);  --mon-akzent: hsl(42, 95%, 50%); }
.mon-table tr.mon-rot   > td { --mon-tint: hsl(0, 85%, 95%);    --mon-akzent: hsl(0, 72%, 52%); }
.mon-table tr.mon-mute  > td { --mon-tint: hsl(28, 95%, 93%);   --mon-akzent: hsl(28, 90%, 52%); }
.mon-table tr.mon-blau  > td { --mon-tint: hsl(220, 90%, 95%);  --mon-akzent: hsl(220, 75%, 58%); }
.mon-table tr.mon-gruen > td { --mon-tint: hsl(140, 55%, 94%);  --mon-akzent: hsl(142, 55%, 42%); }
.mon-table.table-hover tr[class^="mon-"]:hover > td { filter: brightness(.97); --bs-table-accent-bg: transparent; }
.mon-table .mon-aktionen .btn { margin-right: 2px; padding: .15rem .4rem; }
.mon-table .mon-status { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
/* Monitoring: Tabellenkoerper scrollt in sich (Hoehe setzt monitoring.js auf den freien Platz bis zum Fensterrand),
   damit die waagerechte Scrollleiste immer erreichbar bleibt; der Kopf bleibt dabei stehen. */
.mon-scroll { overflow: auto; max-height: calc(100vh - 260px); }
.mon-scroll .mon-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 0; box-shadow: inset 0 -2px 0 #4b5563; }

/* Benutzerliste: Aktionsknoepfe eng */
.ap-aktionen .btn { margin-right: 2px; }

/* Kennzeichnung der Sandbox, damit Dev und Prod nicht verwechselt werden. */
body.env-sandbox .topbar {
    box-shadow: inset 0 3px 0 #f0ad4e;
}

/* Shopliste: Livefilter-Feld, dauerhaft geschlossene Shops rosa wie im Altbestand */
.sl-suche { width: 360px; max-width: 100%; }
.sl-table tr.sl-geschlossen > td { background-color: #ffd2d2; }
.sl-table.table-hover tr.sl-geschlossen:hover > td { background-color: #ffc2c2; --bs-table-accent-bg: transparent; }

/* Benutzer: Shop-Zuordnung im Rechte-Popup */
.rs-liste { max-height: 320px; overflow-y: auto; }
.rs-zeile { display: flex; align-items: center; gap: .6rem; padding: .25rem .6rem; margin: 0; border-bottom: 1px solid #eee; cursor: pointer; font-size: .9rem; }
.rs-zeile:hover { background: #f5f7fa; }
.rs-zeile.rs-aktiv { background: #e8f5e9; }
.rs-zeile.rs-geschlossen .rs-name { color: #a33; }
.rs-zeile .form-check-input { margin: 0; flex: none; }
.rs-zeile .rs-id { flex: none; width: 3rem; color: #64748b; font-variant-numeric: tabular-nums; }
.rs-zeile .rs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-zeile .rs-db { flex: none; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fehler-SMS-Empfaenger in der Sidebar (blocks/fehlersms) */
.ap-sms .ap-sms-feld { padding: 0 20px 8px; }
.ap-sms .ap-sms-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.ap-sms .ap-sms-label i { margin-right: 2px; }
.ap-sms select { font-size: 13px; }

/* Shop-Stammdaten: je Zeile nur der passende Google-Food-Knopf (wie Legacy activate_google_x) */
.sd-aktionen.sd-google-1 .sd-aktivieren, .sd-aktionen.sd-google-0 .sd-deaktivieren { display: none; }
.sd-spezialitaeten .form-check-label { font-size: .9rem; }
/* Geo-Tool: Google-Vorschlagsliste ueber dem Modal, Trefferfeld klein */
.pac-container { z-index: 1100; }
.sd-geo-treffer { font-size: .8rem; }
.sd-place-id { font-family: monospace; font-size: .85em; }

/* Shopanlage / Domains: Pruef- und Protokolllisten */
.ap-protokoll li { padding: .15rem 0; }
.ap-protokoll li .mdi { font-size: 1.1em; vertical-align: -1px; margin-right: .25rem; }
.sa-vorschau code, .dm-vorschau code { word-break: break-all; }

/* Rueckmeldungen: helle Flaechen mit dunklem Text bleiben auf allen Themes lesbar. Insbesondere
 * darf ein gelber Hinweis nie weisse Schrift tragen. */
.ap-notice { border-width: 1px; box-shadow: 0 5px 16px rgba(15, 23, 42, .07); }
.ap-notice .feather-sm { flex: none; width: 18px; height: 18px; }
.ap-notice-success { color: #14532d; background: #ecfdf3; border-color: #86efac; }
.ap-notice-info { color: #0c4a6e; background: #f0f9ff; border-color: #7dd3fc; }
.ap-notice-danger { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.page-content .alert-warning,
#main-wrapper .alert-warning { color: #713f12; background-color: #fffbeb; border-color: #fcd34d; }
.page-content .alert-warning.text-white,
#main-wrapper .alert-warning.text-white { color: #713f12 !important; }
.page-content .alert-warning .text-white,
#main-wrapper .alert-warning .text-white { color: inherit !important; }

/* Das Select2-Dropdown wird standardmaessig am body angehaengt. Es darf deshalb nicht vor der
 * feststehenden Topbar bzw. dem Mega-Menue liegen. */
.select2-container--open { z-index: 99 !important; }
/* Das Theme gibt jedem .select2-container z-index 9999 (style.css), damit lag die Shop-Auswahl im Inhalt ueber dem
   Megamenue der Topbar (100). Im Inhalt normal stapeln; nur geoeffnet (Dropdown am body) 99, unter der Topbar. */
.page-content .select2-container:not(.select2-container--open) { z-index: auto; }

/* Topbar mit Megamenü immer über dem Inhalt: das Theme gibt .alert z-index 99, .topbar nur 50,
 * dadurch lagen Hinweiskästen und Select2-Dropdowns im Inhalt über dem aufgeklappten Admin-Menü. */
.topbar { z-index: 1020; } /* ueber Leaflet (Panes 400, Controls 1000) und der Sticky-Leiste (1010), unter Modal-Backdrop (1050) */
.page-wrapper .alert { z-index: auto; }

/* Login: Das Markenlogo darf nie aus dem Viewport laufen. */
.ap-login-brand { padding-inline: 1rem; }
.ap-login-logo { display: inline-block; max-width: 80%; width: auto; object-fit: contain; }

/* Bestelluebersicht: Shop-Auswahl (select2) */
.mon-shopwahl .select2-container { min-width: 320px; max-width: 100%; }
.mon-shopwahl .select2-container--default .select2-selection--single { height: 31px; border-color: #ced4da; border-radius: 4px; }
.mon-shopwahl .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px; font-size: .875rem; }
.mon-shopwahl .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; }

/* API-Keys / Header-Bilder */
.ak-secret { letter-spacing: .5px; }
.hb-galerie .card-img-top { aspect-ratio: 16 / 5; object-fit: cover; background: #eee; }
.hb-vorschau { position: relative; display: block; }
.hb-fehlt { position: absolute; top: 6px; left: 6px; }
.hb-mini { width: 80px; height: 25px; object-fit: cover; border-radius: 3px; }

/* select2: lange Eintraege (Shoplisten) abschneiden statt umbrechen */
.select2-container .select2-results__option,
.select2-container--default .select2-selection--single .select2-selection__rendered { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select2-container .select2-results__option { max-width: 100%; }
.select2-container--open .select2-dropdown { max-width: 480px; }
/* API-Keys: Ziel-Spalte begrenzen, voller Text im title */
.ak-tabelle .ak-ziel { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rechnungslauf */
.rl-tabelle td, .rl-tabelle th { vertical-align: middle; }
#rl-protokoll li { padding: .1rem 0; }

/* Statistik */
.st-kacheln .st-wert { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.st-chart { position: relative; height: 300px; }
.st-chart-klein { height: 220px; }
.st-chart-shops { height: 420px; }
/* Shopliste unter dem Vergleich: feste Hoehe mit eigener Scrollleiste, Kopf bleibt stehen */
.st-shops-scroll { max-height: 440px; overflow: auto; }
.st-shops-scroll thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 #dee2e6; }
.st-shops-scroll td, .st-shops-scroll th { white-space: nowrap; }
.st-legende td { padding: .15rem .25rem; border-top: 0; }
.st-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
/* Drehendes Icon (mdi-spin fehlt in der eingebundenen Font-Version) */
@keyframes mdi-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mdi-spin:before { display: inline-block; animation: mdi-spin 1s linear infinite; }

/* Mobil: Karten bis an den Bildschirmrand und kleinerer Innenabstand. Das Theme gibt 15 px Seitenabstand
 * plus 25 px Karten-Innenabstand und 30 px Spaltengutter, auf dem Handy bleibt dann kaum Platz fuer Inhalt.
 * Seiten ohne Karte (Monitoring, Shopliste) behalten die 10 px Seitenabstand, Inhalte liegen so buendig. */
@media (max-width: 767.98px) {
    .page-wrapper > .page-content { padding: 10px; }
    .page-content > .row { --bs-gutter-x: 0; }
    .page-content > .card,
    .page-content > .row > [class*="col"] > .card { margin-left: -10px; margin-right: -10px; margin-bottom: 10px; }
    .card-body { padding: 12px 10px; }
    .page-breadcrumb { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Shopadministration: Umschalter und Shopkopf in der Sidebar (an der Stelle der Fehler-SMS) */
.ap-wechsel { background: #f4f7fb; border-bottom: 1px solid #e3e8ee; padding: 8px 0 6px; }
.ap-wechsel .ap-wechsel-feld { padding: 0 12px; }
.ap-wechsel .ap-wechsel-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.ap-wechsel .select2-container { width: 100% !important; }
.ap-wechsel .select2-container--default .select2-selection--single { height: 31px; border-color: #ced4da; border-radius: 4px; }
.ap-wechsel .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px; font-size: 13px; padding-right: 24px; }
.ap-wechsel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; }
.ap-shopkopf .ap-shopkopf-feld { display: flex; flex-direction: column; padding: 10px 13px 4px; min-width: 0; }
.ap-shopkopf .ap-shopkopf-name { font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-shopkopf .ap-shopkopf-info { font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-shop-zurueck { border-top: 1px solid #e3e8ee; margin-top: 6px; padding-top: 4px; }
.ap-shop-zurueck.ap-ohne-linie { border-top: 0; margin-top: 0; padding-top: 0; } /* kein Rahmen-Eintrag: der feste Trennstrich darueber reicht */
.select2-container .select2-results__option[aria-selected] { font-size: 13px; }

/* Oeffnungszeiten: schmale Zeitfelder, Kopiermenue */
.oz-tabelle .oz-zeit, .oz-sonder .oz-zeit { width: 5.2em; text-align: center; }
.oz-tabelle .form-select-sm, .oz-sonder .form-select-sm { min-width: 11em; }
.oz-sonder .oz-datum { width: 8.5em; }
.oz-kopie-menue { min-width: 14rem; }

/* Profil: klar gegliederte Bearbeitungsansicht statt einer langen Feldwand. */
.sp-formbar { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; background: linear-gradient(120deg, #fff 0%, #f3f8ff 100%); border: 1px solid #dbeafe; border-radius: .75rem; box-shadow: 0 5px 18px rgba(15, 23, 42, .05); }
.sp-eyebrow { display: block; margin-bottom: .15rem; color: #2563eb; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-formbar h4 { color: #0f172a; }
.sp-form-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.sp-dirty { font-size: .8rem; font-weight: 600; color: #b45309; white-space: nowrap; }
.sp-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: .75rem; box-shadow: 0 3px 12px rgba(15, 23, 42, .04); }
.sp-card .card-body { padding: 1.25rem; }
/* Die Einordnung steht auf breiten Ansichten neben den Eingaben. So bleiben die Felder gut
 * erfassbar, statt sich über die gesamte verfügbare Seitenbreite zu ziehen. */
.sp-card-layout { display: grid; grid-template-columns: minmax(12.5rem, 23%) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.sp-card-aside { padding: .15rem .25rem 0 .1rem; }
.sp-card-content { min-width: 0; max-width: 56rem; padding-left: 1.75rem; border-left: 1px solid #e2e8f0; }
.sp-section-title { display: flex; align-items: center; gap: .6rem; margin: -.1rem 0 .8rem; color: #0f172a; font-size: 1rem; font-weight: 700; }
.sp-section-title .mdi { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: #2563eb; background: var(--ap-primaer-100); font-size: 1.1rem; }
.sp-section-hint { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.55; }
.sp-section-note { margin: 1.15rem 0 0; padding: .7rem .75rem; color: #64748b; background: #f8fafc; border-left: 3px solid #bfdbfe; border-radius: 0 .4rem .4rem 0; font-size: .78rem; line-height: 1.5; }
.sp-subtitle { flex: 0 0 100%; width: 100%; padding-top: .5rem; margin-top: .35rem; border-top: 1px solid #edf2f7; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sp-subtitle:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.sp-form .form-label { margin-bottom: .3rem; color: #334155; font-size: .84rem; font-weight: 600; }
.sp-form .form-control, .sp-form .form-select { border-color: #cbd5e1; }
.sp-form .form-control:focus, .sp-form .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .14); }
.sp-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; padding: .75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .5rem; }
.sp-checks .form-check { min-width: 0; margin: 0; }
.sp-checks .form-check-label { color: #475569; font-size: .88rem; }
.sp-zw-kopf { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.sp-zw-kopf .mdi { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .55rem; color: #7c3aed; background: #f5f3ff; font-size: 1.1rem; }
.sp-zw-kopf h5 { margin: 0 0 .2rem; color: #0f172a; font-size: 1rem; font-weight: 700; }
.sp-zw-kopf p { margin: 0; color: #64748b; font-size: .82rem; }
.sp-admin-details { overflow: hidden; border: 1px solid #dbe3ee; border-radius: .75rem; background: #fff; box-shadow: 0 3px 12px rgba(15, 23, 42, .035); }
.sp-admin-details summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; color: #1e293b; background: #f8fafc; cursor: pointer; font-weight: 700; list-style: none; }
.sp-admin-details summary::-webkit-details-marker { display: none; }
.sp-admin-details summary > .mdi { color: #475569; font-size: 1.15rem; }
.sp-admin-details summary small { display: block; margin-top: .08rem; color: #64748b; font-size: .76rem; font-weight: 400; }
.sp-admin-details summary .badge { margin-left: auto; font-size: .68rem; font-weight: 600; }
.sp-admin-details summary::after { content: "⌄"; margin-left: auto; font-size: 1.2rem; transition: transform .15s ease; }
.sp-admin-details[open] summary::after { transform: rotate(180deg); }
.sp-admin-inhalt { padding: 1.25rem; border-top: 1px solid #e2e8f0; }
.sp-admin-hinweis { display: flex; align-items: flex-start; gap: .45rem; max-width: 62rem; margin: 0 0 1rem; padding: .65rem .75rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .45rem; font-size: .8rem; line-height: 1.45; }
.sp-admin-hinweis .mdi { flex: none; margin-top: .05rem; color: #2563eb; font-size: 1rem; }
.sp-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: .85rem; align-items: start; }
.sp-admin-gruppe { padding: 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; }
.sp-admin-breit { grid-column: 1 / -1; }
.sp-admin-zwischentitel { margin: 1.25rem 0 .6rem; font-weight: 600; }
.sp-admin-zwischentitel small { color: var(--ap-grau-600); font-weight: 400; margin-left: .35rem; }
.sp-admin-gruppe h6 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding-bottom: .7rem; color: #334155; border-bottom: 1px solid #edf2f7; font-size: .86rem; font-weight: 700; }
.sp-admin-gruppe h6 .mdi { color: #2563eb; font-size: 1rem; }
.sp-admin-gruppe .form-label { color: #64748b; font-size: .73rem; font-weight: 600; }
.sp-admin-gruppe .form-control, .sp-admin-gruppe .form-select { background: #fbfdff; }
.sp-admin-untergruppe + .sp-admin-untergruppe { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #dbe3ee; }
.sp-admin-untergruppe > span { display: block; margin-bottom: .45rem; color: #64748b; font-size: .69rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sp-footer-actions { position: sticky; bottom: 0; z-index: 3; display: flex; gap: .5rem; padding: .75rem; background: rgba(255,255,255,.94); border-top: 1px solid #e2e8f0; backdrop-filter: blur(8px); }

/* Profil: Zahlweisen-Tabelle */
.sp-zw .sp-zw-zahl { width: 6em; text-align: right; }
.sp-zw .sp-zw-artnr { width: 8em; }
.sp-zw .form-select-sm { min-width: 7em; }

@media (max-width: 767.98px) {
    .ap-login-logo { max-width: 80%; max-height: 72px; }
    .sp-formbar { align-items: flex-start; padding: 1rem; }
    .sp-form-actions { width: 100%; margin-left: 0; justify-content: space-between; }
    .sp-form-actions .btn { flex: 1 1 auto; }
    .sp-dirty { white-space: normal; }
    .sp-card .card-body { padding: 1rem; }
    .sp-checks { grid-template-columns: 1fr; }
    .sp-section-hint { margin-left: 0; }
    .sp-footer-actions { margin: 0 -10px; padding: .75rem 10px; }
    .sp-admin-inhalt { padding: .9rem; }
    .sp-admin-details summary { align-items: flex-start; padding: .9rem; }
    .sp-admin-details summary .badge { display: none; }
}

@media (max-width: 991.98px) {
    .sp-card-layout { display: block; }
    .sp-card-aside { padding: 0; margin-bottom: 1.15rem; }
    .sp-card-content { max-width: none; padding: 1.15rem 0 0; border-top: 1px solid #e2e8f0; border-left: 0; }
    .sp-section-note { display: none; }
}

/* Stammdaten-Bloecke (Zusatzstoffe, Groessen, Zutatengruppen) */
.sd-tabelle td { vertical-align: middle; }
.sd-sp-kurz { width: 7rem; }
.sd-sp-preis { width: 8rem; }
.sd-geltung-liste { max-height: 16rem; overflow: auto; }

/* Sofortspeichern je Zeile (res/js/autosave.js): Rueckmeldung ueber die Zeilenfarbe */
.ap-autosave tr.ap-save-laeuft > td { opacity: .6; }
.ap-autosave tr.ap-save-ok > td { background: var(--ap-ok-100) !important; transition: background .3s; }
.ap-autosave tr.ap-save-fehler > td { background: var(--ap-gefahr-100) !important; }
.ap-save-ok:not(tr) { box-shadow: 0 0 0 .2rem var(--ap-ok-100); }
.ap-save-fehler:not(tr) { box-shadow: 0 0 0 .2rem var(--ap-gefahr-100); }
/* Dezente Info-Box fuer Hinweise (z. B. Sofortspeichern) */
.ap-info { display: flex; align-items: flex-start; gap: var(--ap-s2); max-width: 72ch; margin: 0 0 var(--ap-s3); padding: var(--ap-s2) var(--ap-s3); font-size: var(--ap-f13); line-height: 1.5; color: var(--ap-grau-700); background: var(--ap-grau-50); border: 1px solid var(--ap-grau-200); border-left: 3px solid var(--ap-primaer-500); border-radius: var(--ap-radius-feld); }
.ap-info .mdi { flex: none; margin-top: .1rem; font-size: var(--ap-f16); color: var(--ap-primaer-500); }

/* Lesbarkeit (Betreiber 2026-11-02, "das Grau ist zu hell, die Schrift zu klein"): gedaempfter Text dunkler, Kleinschrift groesser */
.page-content .text-muted { color: var(--ap-grau-600) !important; }
.page-content small, .page-content .small { font-size: .92em; }
.page-content .badge.bg-light { color: var(--ap-grau-700) !important; background-color: var(--ap-grau-100) !important; }
.page-content .form-check-label { color: var(--ap-grau-800); }
.page-content .breadcrumb .breadcrumb-item, .page-content .breadcrumb a { color: var(--ap-grau-600); }
.page-content button.badge.sd-geteilt { cursor: pointer; font: inherit; font-size: var(--ap-f12); font-weight: 600; line-height: inherit; }
.page-content button.badge.sd-geteilt:hover { filter: brightness(.95); }
.ap-trenner { height: 0; margin: .5rem 1.25rem; border-top: 1px solid var(--ap-grau-300); list-style: none; }

/* Schlanker HTML-Editor (Quill, res/js/editor.js): Produktbeschreibung, Beschreibung der Öffnungszeiten */
.ap-editor-wrap .ql-toolbar.ql-snow { border-color: var(--ap-grau-300); border-radius: var(--ap-radius-feld) var(--ap-radius-feld) 0 0; background: var(--ap-grau-50); }
.ap-editor-wrap .ql-container.ql-snow { border-color: var(--ap-grau-300); border-radius: 0 0 var(--ap-radius-feld) var(--ap-radius-feld); font-size: var(--ap-f14); font-family: inherit; }
.ap-editor-wrap .ql-editor { min-height: 9rem; }
.ap-editor-wrap.ap-editor-klein .ql-editor { min-height: 5rem; }
.ap-editor-wrap .ql-editor p { margin-bottom: .4rem; }
.ap-editor-wrap .ql-quelltext { width: auto !important; padding: 0 .35rem !important; font-family: monospace; font-size: 12px; font-weight: 700; color: var(--ap-grau-600); }
.ap-editor-wrap .ql-quelltext.ql-active { color: var(--ap-primaer-700); }
.ap-editor-wrap .ap-editor-quelle { font-family: monospace; font-size: 13px; min-height: 12rem; border-top-left-radius: 0; border-top-right-radius: 0; }
.ap-editor-wrap.ap-editor-klein .ap-editor-quelle { min-height: 7rem; }

/* Profil: Zahlweisen per Griff sortieren */
.sp-zw-griff-zelle { width: 1.5rem; padding-right: 0 !important; }
.sp-zw-griff { color: var(--ap-grau-400); cursor: grab; font-size: var(--ap-f18); line-height: 1; touch-action: none; }
.sp-zw-griff:active { cursor: grabbing; }
.sp-zw-geist > td { background: var(--ap-primaer-100); }
.sp-zw-gewaehlt > td { background: var(--ap-grau-100); }

/* Benutzer: Debitoren-Suche mit Vorschlaegen und Auswahl-Chips */
.bn-debitoren .db-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 1060; max-height: 16rem; overflow-y: auto; background: #fff; }
.bn-debitoren .db-chip { font-size: var(--ap-f13); font-weight: 500; padding: .35em .6em; color: var(--ap-grau-800); background: var(--ap-grau-100); border-color: var(--ap-grau-300) !important; }
.bn-debitoren .btn-close-sm { width: .5em; height: .5em; vertical-align: middle; }

/* Tabellen mit Hierarchie in der Zelle (Refactoring UI, Betreiber 02.11.2026): Hauptwert, darunter Nebenzeile gedämpft */
.page-content .table .ap-nebenzeile { display: block; font-size: var(--ap-f13); font-weight: 400; color: var(--ap-grau-600); line-height: 1.3; margin-top: .1rem; }
.kr-gruppe { scroll-margin-top: 5rem; }
.kr-sprungleiste { scroll-margin-top: 5rem; }

/* Benutzerliste: sortierbare Spaltenköpfe */
.bn-tabelle th.bn-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.bn-tabelle th.bn-sort .bn-sort-pfeil { color: var(--ap-grau-400); font-size: 1rem; vertical-align: middle; }
.bn-tabelle th.bn-sort.bn-sort-auf .bn-sort-pfeil, .bn-tabelle th.bn-sort.bn-sort-ab .bn-sort-pfeil { color: var(--ap-primaer-700); }

/* Globaler "Nach oben"-Knopf (res/js/nach-oben.js), ab 500 px Scrolltiefe */
.ap-nach-oben { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 2.75rem; height: 2.75rem; border: 1px solid var(--ap-grau-300, #cbd5e1); border-radius: 50%; background: #fff; color: var(--ap-grau-700); box-shadow: 0 4px 14px rgba(15, 23, 42, .18); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s, transform .2s, visibility .2s; }
.ap-nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.ap-nach-oben:hover { background: var(--ap-grau-100); color: var(--ap-grau-900); }

/* Drag-&-Drop-Upload (res/js/ap-upload.js): Zone ersetzt optisch jedes input[type=file] */
.ap-drop-input { position: absolute !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.ap-drop { border: 2px dashed var(--ap-grau-300); border-radius: var(--ap-radius-feld); background: var(--ap-grau-50, #f8fafc); padding: .6rem .8rem; cursor: pointer; transition: border-color .15s, background .15s; outline: none; }
.ap-drop:hover, .ap-drop:focus { border-color: var(--ap-grau-500); }
.ap-drop.ist-ueber { border-color: var(--ap-primaer-500); background: var(--ap-primaer-100); }
.ap-drop-leer { display: flex; align-items: center; gap: .5rem; color: var(--ap-grau-600); font-size: var(--ap-f14); }
.ap-drop-leer i { font-size: 1.5rem; line-height: 1; }
.ap-drop.hat-dateien .ap-drop-leer { font-size: var(--ap-f13); opacity: .8; }
.ap-drop-gross { padding: 1.6rem 1rem; text-align: center; }
.ap-drop-gross .ap-drop-leer { flex-direction: column; justify-content: center; font-size: 15px; }
.ap-drop-gross .ap-drop-leer i { font-size: 2.6rem; }
.ap-drop-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; text-align: left; }
.ap-drop.hat-dateien .ap-drop-liste { margin-top: .5rem; }
.ap-drop-liste li { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .4rem .3rem .5rem; border: 1px solid var(--ap-grau-200); border-radius: .4rem; background: #fff; font-size: var(--ap-f13); max-width: 100%; }
.ap-drop-liste img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: .3rem; }
.ap-drop-liste li > i { font-size: 1.5rem; color: var(--ap-grau-600); }
.ap-drop-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ap-grau-800); }
.ap-drop-groesse { color: var(--ap-grau-600); white-space: nowrap; }
.ap-drop-weg { border: 0; background: transparent; color: var(--ap-grau-600); padding: 0 .1rem; line-height: 1; font-size: 1.1rem; cursor: pointer; }
.ap-drop-weg:hover { color: var(--ap-gefahr-800, #b91c1c); }