/* StayNestor – Inhalts-Bausteine im Stil von shortlongx (/depot/ib/, slx.css).
   Sidebar, Topbar, Menü und Resizer kommen aus djangoBase (sidebar.css), die
   Farben aus theme.css (var(--…)) -> alles folgt dem aktiven Theme.
   Seiten füllen die volle Breite (kein max-width). */

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
}
.main-wrapper { background: transparent; }
.db-content { padding: 1.6rem 2rem; }
/* :where() hält die Spezifität bei einer Klasse: Farben der djangoBase-Seiten (.set-label …)
   gewinnen, sonst stand im Theme „blau“ dunkle Schrift auf deren dunkelblauen Karten. */
.db-content :where(p, li, span, label, td) { color: inherit; }

/* Eingeklappte Seitenleiste: djangoBase blendet nur <span>-Beschriftungen aus, die
   Menütexte stehen aber als nackter Text neben dem Symbol. font-size 0 nimmt den
   Text weg, die Symbole behalten ihre eigene Größe. */
body.sidebar-collapsed .sidebar .nav-link { font-size: 0; }
body.sidebar-collapsed .sidebar .nav-link i { font-size: 1.05rem; }
body.sidebar-collapsed .sidebar-header h4 { font-size: 0; }
body.sidebar-collapsed .sidebar-header h4 i { font-size: 1.25rem; margin: 0; }
body.sidebar-collapsed .sidebar-header h4 .sidebar-logo { margin: 0; }
/* Der Aufnahme-Bereich von djangoBase passt nicht in 56 px — zugeklappt ausblenden. */
body.sidebar-collapsed .sidebar .djb-aufz { display: none !important; }
body.sidebar-collapsed .sidebar-header { padding: 1rem .5rem; text-align: center; }

/* -- Seiten-Kopf ------------------------------------------------------------ */
.sn-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.sn-kopf h1 { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.sn-kopf .sn-unterzeile { color: rgba(var(--fg-rgb), 0.55); font-size: .9rem; margin-top: .15rem; }
h2.sec { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 .7rem; color: rgba(var(--fg-rgb), 0.92); }

/* -- Reiter (wie .fnz-tab in shortlongx) ------------------------------------ */
.sn-tabs { display: flex; gap: .4rem; border-bottom: 1px solid rgba(var(--fg-rgb), 0.12); margin-bottom: 1.2rem; flex-wrap: wrap; align-items: center; }
.sn-tab { padding: .65rem 1.2rem; border: none; background: transparent; color: rgba(var(--fg-rgb), 0.6);
    font-size: .96rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.sn-tab:hover { color: var(--text-primary); }
.sn-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* -- Karten, Kacheln, Boxen ------------------------------------------------- */
.sn-karte { background: rgba(var(--fg-rgb), 0.04); border: 1px solid rgba(var(--fg-rgb), 0.09); border-radius: 14px;
    padding: 1rem 1.2rem; margin-bottom: 1rem; color: rgba(var(--fg-rgb), 0.9); }
body:is([data-theme="weiss"], [data-theme="blau"]) .sn-karte { background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.sn-karte .sn-karte-titel { font-weight: 700; margin-bottom: .6rem; color: rgba(var(--fg-rgb), 0.92); }
.tilerow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.tile .lbl { font-size: .74rem; color: rgba(var(--fg-rgb), 0.55); text-transform: uppercase; letter-spacing: .03em; }
.tile .val { font-size: 1.25rem; font-weight: 700; margin-top: .15rem; }
.subtle { color: rgba(var(--fg-rgb), 0.55); font-size: .85rem; }
.okbox, .errbox, .warnbox { border-radius: 10px; padding: .7rem 1rem; margin: .5rem 0; color: var(--text-primary); }
.okbox { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.3); }
.errbox { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--sn-fehler, #b91c1c); }
.warnbox { background: rgba(245, 158, 11, 0.09); border: 1px solid rgba(245, 158, 11, 0.3); }
/* Suchtreffer im Text (html_text.js markiert): rot und fett, ohne den gelben Grund von <mark>. */
mark.sn-treffer { background: none; color: var(--sn-treffer, #dc2626); font-weight: 700; padding: 0; }

/* -- Tabellen (wie table.data in shortlongx) -------------------------------- */
.tbl-wrap { overflow-x: auto; border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: 12px; }
table.data { width: 100%; border-collapse: collapse; font-size: .87rem; margin: 0; }
table.data th, table.data td { padding: .5rem .6rem; border: 1px solid rgba(var(--fg-rgb), 0.16); text-align: left; white-space: nowrap; }
table.data td { color: rgba(var(--fg-rgb), 0.92); }
table.data th { color: var(--accent); font-size: .76rem; text-transform: uppercase; }
/* Tabellenüberschriften hellgrau statt weiß (Edgar, 30.10.2026), einstellbar unter Einstellungen → UI
   (--sn-tabellenkopf aus basis.html); ohne Einstellung ein Grauton aus dem Farbschema. Deckend, damit die
   Überschrift auch als klebende Kopfzeile trägt. */
table.data thead th {
    background: var(--sn-tabellenkopf, linear-gradient(rgba(var(--fg-rgb), 0.07), rgba(var(--fg-rgb), 0.07)) var(--surface));
}

/* -- Knöpfe ----------------------------------------------------------------- */
.sn-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 10px; border: none;
    font-weight: 600; cursor: pointer; font-size: .88rem; text-decoration: none; }
.sn-btn-primaer { background: var(--accent); color: #fff; }
.sn-btn-geist { background: rgba(var(--fg-rgb), 0.08); color: var(--text-primary); }
.tbtn { padding: .3rem .7rem; border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent); border-radius: 7px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.tbtn:disabled { opacity: .6; cursor: default; }

/* HOVER ALLER KNÖPFE — wie in shortlongx (slx.css, Ansage 07.08.2026): hellblauer Grund,
   weiße Schrift. Gesperrte Knöpfe bleiben in Ruhe. */
button:hover:not(:disabled):not(.sn-ohne-hover),
.sn-btn:hover:not(:disabled),
a.tbtn:hover {
    background: #4da3ff !important;
    color: #fff !important;
    border-color: #4da3ff !important;
}
button:disabled { cursor: default; }
/* Gesperrt = ausgegraut, z. B. „Speichern“ ohne Änderung (Edgar 31.10.2026). */
.sn-btn:disabled { background: rgba(var(--fg-rgb), 0.1); color: rgba(var(--fg-rgb), 0.4); }

/* -- Formularfelder: native Elemente erben kein Theme (Regel kontrast-lesbarkeit) -- */
.db-content input[type="text"], .db-content input[type="email"], .db-content input[type="password"],
.db-content input[type="search"], .db-content input[type="date"], .db-content input[type="number"],
.db-content input[type="time"], .db-content input[type="url"], .db-content input[type="tel"],
.db-content select, .db-content textarea {
    background: rgba(var(--fg-rgb), 0.06); color: var(--text-primary);
    border: 1px solid rgba(var(--fg-rgb), 0.18); border-radius: 8px; padding: .4rem .65rem; font-size: .88rem;
}
/* Ohne Häkchen und Schalter: deren Bild (Knopf, Haken) steckt in background-image. */
body:is([data-theme="weiss"], [data-theme="blau"]) .db-content input:not([type="checkbox"]):not([type="radio"]), body:is([data-theme="weiss"], [data-theme="blau"]) .db-content select,
body:is([data-theme="weiss"], [data-theme="blau"]) .db-content textarea { background: #fff; }
.db-content option { background: var(--surface); color: var(--text-primary); }
body:not([data-theme="weiss"]):not([data-theme="blau"]) .db-content input[type="date"] { color-scheme: dark; }
.db-content ::placeholder { color: rgba(var(--fg-rgb), 0.45); }

/* -- Kopfzeile rechts: Sprache und Benutzer ---------------------------------- */
.sn-kopfleiste { display: flex; align-items: center; gap: .6rem; }
/* Ticket · Hilfe · Sprache wie bei Smoobu: Symbol + Text, dünne Trennstriche (staynestor/_kopf_hilfe.html, _sprache.html). */
.sn-kopf-link { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .35rem; border-radius: 8px;
    color: #fff; text-decoration: none; font-size: .88rem; cursor: pointer; list-style: none; white-space: nowrap; }
.sn-kopf-link::-webkit-details-marker { display: none; }
.sn-kopf-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sn-kopf-link > i { font-size: 1.05rem; }
.sn-kopf-link > .sn-kopf-pfeil { font-size: .7rem; opacity: .7; }
.sn-kopf-strich { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.3); }
.sn-kopf-hinweis { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .4rem; z-index: 3000; background: var(--surface); color: var(--text-primary);
    border: 1px solid rgba(var(--fg-rgb), 0.15); border-radius: 8px; padding: .4rem .7rem; font-size: .8rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); white-space: nowrap; }
.sn-sprache { position: relative; }
.sn-sprache-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3000; min-width: 170px; padding: .35rem;
    background: var(--surface); border: 1px solid rgba(var(--fg-rgb), 0.12); border-radius: 12px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18); }
.sn-sprache-liste a { display: flex; gap: .6rem; align-items: center; padding: .4rem .6rem; border-radius: 8px;
    color: var(--text-primary); text-decoration: none; font-size: .88rem; }
.sn-sprache-liste a b { min-width: 1.8rem; font-size: .76rem; opacity: .7; }
.sn-sprache-liste a:hover, .sn-sprache-liste a.aktiv { background: rgba(var(--fg-rgb), 0.06); }
.sn-sprache-liste a.aktiv { font-weight: 600; }
@media (max-width: 900px) { .sn-kopf-link > span { display: none; } }
.sn-kopfleiste .sprachen-menue summary { color: #fff; }
.sn-benutzer { position: relative; }
.sn-benutzer-knopf { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: none;
    color: #fff; padding: .2rem .4rem; border-radius: 999px; cursor: pointer; font-size: .9rem; }
.sn-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.sn-benutzer-name { font-weight: 600; }
.sn-benutzer .dropdown-menu { min-width: 230px; border-radius: 12px; padding: .4rem; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
    background: var(--surface); border: 1px solid rgba(var(--fg-rgb), 0.12); }
.sn-benutzer .dropdown-item { border-radius: 8px; color: var(--text-primary); font-size: .9rem; padding: .45rem .7rem; }
.sn-benutzer .dropdown-item i { width: 1.2rem; margin-right: .4rem; color: var(--accent); }
.sn-benutzer .dropdown-item:hover, .sn-benutzer .dropdown-item:focus { background: rgba(var(--accent-rgb), 0.12) !important; color: var(--text-primary) !important; }
.sn-benutzer .dropdown-header { color: rgba(var(--fg-rgb), 0.6); font-size: .75rem; }
.sn-benutzer .dropdown-divider { border-color: rgba(var(--fg-rgb), 0.12); }
.sn-benutzer form button.dropdown-item { width: 100%; text-align: left; background: transparent; border: none; }
/* Weiß: weiße Kopfzeile -> dunkle Schrift. Bei „blau“ bleibt sie dunkelblau mit weißer Schrift. */
body[data-theme="weiss"] .sn-kopfleiste .sprachen-menue summary,
body[data-theme="weiss"] .sn-benutzer-knopf,
body[data-theme="weiss"] .sn-kopf-link, body[data-theme="weiss"] .sn-kopf-link:hover { color: var(--text-primary); }
body[data-theme="weiss"] .sn-kopf-link:hover { background: rgba(var(--fg-rgb), 0.06); }
body[data-theme="weiss"] .sn-kopf-strich { background: rgba(var(--fg-rgb), 0.15); }

/* -- Einstellungen: Theme-Wahl (UI) und Schalter (Allgemein) ------------------ */
.sn-theme-leiste { display: flex; gap: .5rem; flex-wrap: wrap; }
.sn-theme-wahl { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 10px;
    border: 1px solid rgba(var(--fg-rgb), 0.18); background: var(--surface); color: var(--text-primary);
    font-weight: 600; font-size: .9rem; cursor: pointer; }
.sn-theme-wahl.aktiv { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.sn-schalter { padding: .55rem 0 .55rem 2.6em; }
.sn-schalter + .sn-schalter { border-top: 1px solid rgba(var(--fg-rgb), 0.08); }
.sn-schalter .form-check-input { width: 2.2em; height: 1.15em; margin-left: -2.6em; cursor: pointer; }
.sn-schalter .form-check-label { font-weight: 600; cursor: pointer; }
.sn-abgleich-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
/* Einstellungen → Channel Manager: Tabelle Lesen/Schreiben (abgleich/channel_manager.html). */
table.sn-cm-tabelle { width: 100%; }
table.sn-cm-tabelle td { vertical-align: top; white-space: normal; }
table.sn-cm-tabelle td:not(:first-child), table.sn-cm-tabelle th:not(:first-child) { width: 1%; white-space: nowrap; text-align: center; }
.sn-cm-haken { display: flex; gap: .55rem; align-items: flex-start; margin: 0; cursor: pointer; }
.sn-cm-haken .form-check-input { flex: none; width: 1.15em; height: 1.15em; margin-top: .1rem; }
.sn-cm-hinweise { margin: .6rem 0; padding-left: 1.2rem; }
.sn-cm-hinweise li { margin: .2rem 0; }
/* Warteschlange an die Channel Manager (abgleich/_warteschlange.html) */
.sn-ws-ok, .sn-ws-gesendet { color: #16a34a; }
.sn-ws-fehler { color: var(--sn-ueberbucht); font-weight: 600; }
.sn-ws-wartet, .sn-ws-laeuft { color: #d97706; }
table.data td.sn-ws-text { white-space: normal; min-width: 20rem; }
.sn-ws-titel { font-size: 1rem; font-weight: 600; margin: 1rem 0 .4rem; }
.sn-abgleich-zugang { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.sn-abgleich-zugang input { min-width: 22rem; }
.sn-abgleich-zugang .subtle { flex-basis: 100%; }

/* -- Anmeldeseite ------------------------------------------------------------ */
.sn-anmelden { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.sn-anmelden .sn-karte { width: 100%; max-width: 380px; padding: 1.8rem; }
.sn-anmelden h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.2rem; display: flex; gap: .5rem; align-items: center; }
.sn-anmelden h1 i { color: var(--accent); }
.sn-anmelden-logo { width: 44px; height: 44px; }
.sn-anmelden label { display: block; font-size: .85rem; margin: .7rem 0 .25rem; color: rgba(var(--fg-rgb), 0.75); }
.sn-anmelden input { width: 100%; background: rgba(var(--fg-rgb), 0.06); color: var(--text-primary);
    border: 1px solid rgba(var(--fg-rgb), 0.18); border-radius: 8px; padding: .55rem .7rem; }
body:is([data-theme="weiss"], [data-theme="blau"]) .sn-anmelden input { background: #fff; }
.sn-anmelden .sn-btn { width: 100%; justify-content: center; margin-top: 1.2rem; }

@media (max-width: 768px) {
    .db-content { padding: 1rem; }
    .sn-benutzer-name { display: none; }
}
/* Rückfrage im Fenster statt window.confirm (staynestor/js/rueckfrage.js). */
.sn-rueckfrage-knoepfe { display: flex; gap: .5rem; margin-top: .5rem; }