/* admin-shell.css — UI-Shell fuer die gesamte Admin-Sicht (teamwerk-intern.org-Look). Wird NACH admin.tailwind.css geladen -> ueberschreibt Tokens + tw-*-Komponenten. Zwei Sektionen: 1. Gemeinsamer Admin-Theme ([data-shell]) — greift auf jeder Seite, deren ein data-shell-Attribut traegt (tenant UND admin). 2. Nur Tenant ([data-shell="tenant"]) — tenant-spezifische Regeln, die den internen Superadmin NICHT treffen duerfen (interne Breadcrumbs ausblenden). Scope-Guard-Test: tests/test_admin_shell_scope.py. */ /* === Gemeinsamer Admin-Theme ([data-shell]) === */ body[data-shell]{ /* intern-Palette ueber die bestehenden tw-*-Tokens */ --tw-primary:#0E4E81; --tw-primary-deep:#072E4E; --tw-primary-tint:#E8F0F7; --tw-primary-veil:#F3F7FB; --tw-tuerkis:#15BE8B; --tw-tuerkis-tint:#E4F7F0; --tw-accent:#0E4E81; /* sichtbarer Akzent (Akquise/Wettbewerb-Text-Links); primary-Blau, NICHT Tuerkis (Kontrast auf Weiss) */ --tw-ink:#16263A; --tw-ink-soft:#5E7184; --tw-ink-mute:#8294A4; --tw-line:#DCE4ED; --tw-line-soft:#EAEFF5; --tw-card:#FFFFFF; --tw-tint:#F3F7FB; --tw-success:#15A36E; --tw-warn:#D9902B; --tw-danger:#C8453B; --tw-radius:14px; --tw-radius-sm:10px; font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; background: radial-gradient(1100px 420px at 12% -8%, rgba(14,78,129,.06), transparent 60%), radial-gradient(900px 380px at 100% 0%, rgba(21,190,139,.07), transparent 55%), #EEF3F8; color:#16263A; } /* ============================================================ Topbar-Shell — horizontale Topbar statt Sidebar. Jedes Komma-Segment einzeln [data-shell]-gescopt (Scope-Guard). ============================================================ */ [data-shell] .tw-sidebar{display:none;} /* falls im DOM, sicher aus */ [data-shell] .tw-topbar{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid #DCE4ED;} [data-shell] .tw-topbar-inner{max-width:1120px; margin:0 auto; height:62px; display:flex; align-items:center; gap:22px; padding:0 26px;} [data-shell] .tw-topbrand{display:flex; align-items:center; gap:13px; text-decoration:none;} [data-shell] .tw-topbrand-mark{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(135deg,#0E4E81,#0A3E68); color:#fff; font-weight:700; font-size:15px; letter-spacing:.5px;} [data-shell] .tw-topbrand-sep{width:1px; height:24px; background:#DCE4ED;} [data-shell] .tw-topbrand-name{font-weight:600; color:#0E4E81; font-size:15px;} [data-shell] .tw-topnav{display:flex; align-items:center; gap:4px; margin-left:8px;} [data-shell] .tw-topnav a, [data-shell] .tw-topnav-disabled{ position:relative; padding:9px 15px; border-radius:10px; font-size:14px; font-weight:500; color:#5E7184; text-decoration:none;} [data-shell] .tw-topnav a:hover{background:#E8F0F7; color:#0E4E81;} [data-shell] .tw-topnav a.is-active{color:#0E4E81; background:#E8F0F7; font-weight:600;} [data-shell] .tw-topnav a.is-active::after{content:""; position:absolute; left:15px; right:15px; bottom:-16px; height:3px; border-radius:3px; background:#15BE8B;} [data-shell] .tw-topnav-disabled{color:#8294A4; opacity:.6; cursor:default; display:flex; gap:7px; align-items:center;} [data-shell] .tw-topnav-lock{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; background:#EAEFF5; color:#8294A4; padding:2px 6px; border-radius:999px;} [data-shell] .tw-topuser{margin-left:auto; display:flex; align-items:center; gap:12px;} [data-shell] .tw-topuser-email{font-size:13px; color:#5E7184;} [data-shell] .tw-topbtn{font-size:13px; font-weight:600; color:#0E4E81; background:#fff; border:1px solid #DCE4ED; padding:7px 14px; border-radius:10px; text-decoration:none;} [data-shell] .tw-topbtn:hover{background:#E8F0F7; border-color:#E8F0F7;} /* Content zentrieren, Sidebar-Offset neutralisieren */ [data-shell] .tw-main{margin-left:auto !important; margin-right:auto !important; max-width:1120px !important; padding-left:26px; padding-right:26px;} /* Footer zentrieren, Sidebar-Offset (.tw-footer--with-sidebar margin-left:220px) neutralisieren */ [data-shell] .tw-footer{margin-left:auto; margin-right:auto; max-width:1120px; padding-left:26px; padding-right:26px;} /* ============================================================ Komponenten-Re-Theming — weiche "kachel"-Formsprache ueber die bestehenden tw-*-Klassen + Hilfsklassen fuers Dashboard-Template. Werte aus scratchpad/azv-dashboard-mockup.html (Referenz-Look). Jedes Komma-Segment einzeln [data-shell]-gescopt (Scope-Guard). Semantik (ok #15A36E / warn #D9902B / danger #C8453B) bleibt getrennt vom Tuerkis-Akzent #15BE8B (Akzent != Semantik). ============================================================ */ /* Karten / Stat-Tiles / Sektionen: weicher kachel-Look (Radius 14, blau-getoente Schatten) */ [data-shell] .tw-card, [data-shell] .tw-stat, [data-shell] .tw-section{ background:#fff; border:1px solid #DCE4ED; border-radius:14px; box-shadow:0 1px 2px rgba(14,78,129,.06),0 2px 4px rgba(14,78,129,.06); transition:transform .16s ease, box-shadow .16s ease;} [data-shell] .tw-card:hover, [data-shell] .tw-stat:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(14,78,129,.10),0 2px 6px rgba(14,78,129,.05);} /* Farbiger Links-Akzent der SaaS-Optik weg. Er ist in base.html ein ::before- Pseudoelement, KEIN border-left -> nur ::before neutralisieren, damit der Akzent wirklich verschwindet (kachel hat rundum den neutralen 1px-Rahmen). */ [data-shell] .tw-stat::before{display:none;} /* Pills vollrund, Buttons weich gerundet */ [data-shell] .tw-pill{border-radius:999px !important;} [data-shell] .btn, [data-shell] .btn-primary{border-radius:10px;} /* Tabellenkopf: heller Ton, Versalien */ [data-shell] .tw-table thead th{background:#F3F7FB; text-transform:uppercase; letter-spacing:.5px;} /* --- Neue Hilfsklassen (Dashboard-Template) --- */ /* Chip: Trend-/Delta-Badge unter der Kennzahl */ [data-shell] .chip{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; margin-top:10px;} [data-shell] .chip.up{color:#0e7a58; background:#E4F7F0;} [data-shell] .chip.down{color:#9c352c; background:#FBEBE9;} [data-shell] .chip.flat{color:#5E7184; background:#EAEFF5;} /* Caveat: dezenter Hinweis-Kasten mit warn-Akzent links */ [data-shell] .caveat{font-size:12px; color:#5E7184; background:#F3F7FB; border-left:3px solid #D9902B; padding:9px 12px; border-radius:8px; margin-top:12px; line-height:1.5;} /* Sparkline-SVG */ [data-shell] .spark{width:100%; height:120px; display:block; margin-top:6px;} [data-shell] .spark .grid{stroke:#DCE4ED; stroke-width:1; stroke-dasharray:2 4;} /* Balken-Reihen (horizontales Ranking) */ [data-shell] .bar-row{display:grid; grid-template-columns:82px 1fr 42px; align-items:center; gap:10px; font-size:13px;} [data-shell] .bar-row .lab{color:#5E7184; font-weight:500;} [data-shell] .bar-track{height:9px; background:#F3F7FB; border-radius:999px; overflow:hidden;} [data-shell] .bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#0E4E81,#2f7ab0);} [data-shell] .bar-row .val{text-align:right; font-weight:600; color:#16263A; font-variant-numeric:tabular-nums;} /* CSAT-Grosszahl (Tuerkis-Akzent) */ [data-shell] .csat-big{display:flex; align-items:baseline; gap:12px;} [data-shell] .csat-big .pct{font-size:44px; font-weight:700; color:#15BE8B; line-height:1; font-variant-numeric:tabular-nums;} [data-shell] .csat-big .thumbs{font-size:20px;} /* Quali-Score */ [data-shell] .quali{display:flex; align-items:center; gap:26px; flex-wrap:wrap;} [data-shell] .quali .score{font-size:38px; font-weight:700; color:#072E4E; font-variant-numeric:tabular-nums;} [data-shell] .quali .score small{font-size:18px; color:#8294A4; font-weight:600;} /* ============================================================ Auth-Seiten — Login + erzwungener Passwortwechsel als zentrierte weiche Karte. Body-Grund (#EEF3F8 + Radial-Veils) und Montserrat kommen aus body[data-shell] oben. Primaer #0E4E81, Tuerkis-Akzent #15BE8B, Karte Radius 14px + weicher blau-getoenter Schatten, Button blau-solid Radius 10px (aus dem .btn-Re-Theming oben). Jedes Komma-Segment einzeln [data-shell]-gescopt (Scope-Guard). ============================================================ */ [data-shell] .tw-authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:44px 20px;} [data-shell] .tw-authcard{width:100%; max-width:430px; background:#fff; border:1px solid #DCE4ED; border-radius:14px; padding:36px 36px 30px; box-shadow:0 1px 2px rgba(14,78,129,.06), 0 18px 44px rgba(14,78,129,.10);} /* Tuerkis-Akzentstrich oben in der Karte (Akzent != Semantik) */ [data-shell] .tw-authcard::before{content:""; display:block; width:38px; height:3px; border-radius:3px; background:#15BE8B; margin:0 0 22px;} [data-shell] .tw-authbrand{display:flex; align-items:center; gap:13px; margin-bottom:26px;} [data-shell] .tw-authbrand-mark{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#0E4E81,#0A3E68); color:#fff; font-weight:700; font-size:18px; letter-spacing:.5px; flex-shrink:0;} [data-shell] .tw-authbrand-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;} [data-shell] .tw-authbrand-title{font-weight:700; font-size:15px; color:#0E4E81; letter-spacing:.3px;} [data-shell] .tw-authbrand-sub{font-size:11px; color:#8294A4; text-transform:uppercase; letter-spacing:1px; margin-top:3px;} [data-shell] .tw-authhead{font-size:24px; font-weight:700; color:#16263A; margin:0 0 6px; letter-spacing:-.2px;} [data-shell] .tw-authlede{font-size:14px; color:#5E7184; margin:0 0 26px; line-height:1.55;} [data-shell] .tw-authnote{font-size:12.5px; color:#8294A4; line-height:1.55; margin:22px 0 0; padding-top:18px; border-top:1px solid #EAEFF5;} /* --- DaisyUI-Inseln an den intern-Look angleichen (Task 3) --- Nur Optik (Font/Farbe/Radius ueber die tw-Tokens), Struktur/Verhalten der DaisyUI-Klassen bleibt. Jedes Segment [data-shell]-gescopt (Scope-Guard). */ [data-shell] .stat, [data-shell] .stats{border-radius:var(--tw-radius); font-family:'Montserrat',system-ui,sans-serif;} [data-shell] .stat-title{color:var(--tw-ink-soft);} [data-shell] .stat-value{color:var(--tw-ink); font-variant-numeric:tabular-nums;} [data-shell] .badge{border-radius:999px; font-weight:600;} [data-shell] .badge-primary{background:var(--tw-primary); border-color:var(--tw-primary); color:#fff;} [data-shell] .badge-secondary{background:var(--tw-tuerkis); border-color:var(--tw-tuerkis); color:var(--tw-ink);} [data-shell] .badge-accent{background:var(--tw-accent); border-color:var(--tw-accent); color:#fff;} [data-shell] .collapse{border-radius:var(--tw-radius);} [data-shell] .tabs .tab{font-family:'Montserrat',system-ui,sans-serif; color:var(--tw-ink-soft);} [data-shell] .tabs .tab-active{color:var(--tw-primary); border-color:var(--tw-primary);} [data-shell] .radio:checked{background-color:var(--tw-primary); border-color:var(--tw-primary);} [data-shell] .textarea{border-radius:var(--tw-radius-sm); font-family:inherit;} [data-shell] .modal-box{border-radius:var(--tw-radius);} /* === Nur Tenant ([data-shell="tenant"]) === */ /* --- Chats-Seiten: interne Breadcrumb + Back-Link fuer Tenants ausblenden. Sie verlinken in den Superadmin-Bereich (Mandanten-Uebersicht / Mandant- Detail) -> fuer den ausgesperrten Tenant tote 403-Links. Der Superadmin MUSS sie behalten, darum bleiben diese beiden Regeln [data-shell="tenant"]-gescopt (NICHT auf [data-shell] generalisieren). Reine Praesentation; die server- seitigen Route-Guards bleiben die eigentliche Sperre. --- */ [data-shell="tenant"] .tw-crumb{display:none;} [data-shell="tenant"] .tw-crumb-back{display:none;}