/** * shell-ipad.css — App-Shell im iPad-App-Stil: linke Gruppen-Sidebar + helle Topbar. * Lädt nach main.css/theme-ipad.css → überschreibt die alte Top-Tab-Leiste. * Visual-only. Nav-Logik (Permission-Filter, loadTab, .tab-btn.active) bleibt in app.js. */ /* Globale Sidebar-Breite — auch für Modale, die an hängen (außerhalb .app-container, z.B. der dynamische Service-Modal-Dialog). Wird per JS mit der echten Breite aktualisiert. */ :root { --sidebar-w: 248px; } /* ---- Grundlayout: Sidebar links, Hauptspalte rechts ---- */ .app-container { flex-direction: row; align-items: stretch; background: var(--page-bg); --sidebar-w: 248px; /* aktuelle Sidebar-Breite — für Modale, die zur Content-Fläche zentrieren */ } .app-container.sidebar-collapsed { --sidebar-w: 64px; } /* ============================================================ SIDEBAR ============================================================ */ .app-sidebar { flex: 0 0 248px; width: 248px; align-self: flex-start; position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--card-bg); border-right: 1px solid var(--hairline); z-index: 90; transition: flex-basis var(--transition-normal), width var(--transition-normal); } /* Brand (Logo-Kachel + Name) */ .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--hairline); min-height: 64px; } .brand-logo { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--brand-gold); /* Marken-Gold, immer voll deckend */ border-radius: var(--radius-logo); overflow: hidden; } .brand-logo-img { width: 30px; height: 30px; object-fit: contain; display: block; } .brand-name { font-size: var(--fs-headline); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav-Bereich (scrollt) */ .app-sidebar .tab-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 16px; } .nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .nav-group:first-child { margin-top: 0; } .nav-group-label { font-size: var(--fs-caption); font-weight: 600; color: var(--color-text-muted); padding: 10px 12px 4px; } /* Nav-Buttons (überschreibt die alte horizontale .tab-btn-Optik vollständig) */ .app-sidebar .tab-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: none; border-radius: var(--radius-nested); background: transparent; color: var(--color-text); font-size: var(--fs-subheadline); font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; position: relative; transition: background var(--transition-fast), color var(--transition-fast); } .app-sidebar .tab-btn .nav-icon { flex: 0 0 22px; font-size: 16px; line-height: 1; text-align: center; } .app-sidebar .tab-btn .nav-label { overflow: hidden; text-overflow: ellipsis; } .app-sidebar .tab-btn:hover { background: rgba(120,120,128,.10); /* iOS systemFill grau */ } /* Active: dezenter grauer Pill + goldenes Label (iPad-Standard); Icons bleiben farbig */ .app-sidebar .tab-btn.active { background: rgba(120,120,128,.14); color: var(--brand-gold); font-weight: 600; box-shadow: none; } /* Sign Out — oben rechts in der Topbar, neben der Online-Anzeige */ .app-topbar .btn-logout { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-nested); background: var(--nested-bg); color: var(--slate); font-size: var(--fs-subheadline); font-weight: 500; border: 1px solid var(--hairline); } .app-topbar .btn-logout:hover { background: var(--color-error-bg); color: var(--red); border-color: transparent; } /* ---- Collapsed (nur Icons) ---- */ .app-container.sidebar-collapsed .app-sidebar { flex-basis: 64px; width: 64px; } .app-container.sidebar-collapsed .brand-name, .app-container.sidebar-collapsed .nav-group-label, .app-container.sidebar-collapsed .nav-label, .app-container.sidebar-collapsed .sidebar-footer .btn-logout span { display: none; } .app-container.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } .app-container.sidebar-collapsed .app-sidebar .tab-btn { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .app-container.sidebar-collapsed .sidebar-footer .btn-logout { padding-left: 0; padding-right: 0; } /* ============================================================ HAUPTSPALTE + TOPBAR ============================================================ */ .app-main { flex: 1; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--page-bg); } /* Topbar — hell statt navy (überschreibt die alte .app-header-Optik) */ .app-header.app-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 20px; min-height: 58px; background: var(--card-bg); color: var(--navy); border-bottom: 1px solid var(--hairline); box-shadow: none; position: sticky; top: 0; z-index: 80; } .sidebar-toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-chip); background: transparent; color: var(--slate); cursor: pointer; transition: background var(--transition-fast); } .sidebar-toggle:hover { background: var(--nested-bg); color: var(--navy); } .topbar-title { flex: 1; min-width: 0; font-size: var(--fs-title); font-weight: var(--fw-title); color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header.app-topbar .header-actions { margin: 0; } /* Reminders-Glocke: lesbarer (war ausgegraut #6b7280), Akzent in Gold statt Indigo */ .app-topbar .reminders-bell { color: var(--slate); border-color: var(--hairline); } .app-topbar .reminders-bell:hover { background: var(--nested-bg); color: var(--navy); } .app-topbar .reminders-bell.has-unread { color: var(--brand-gold); border-color: var(--brand-gold); } .reminders-dropdown .reminder-item-title { color: var(--navy); } .reminders-dropdown .reminder-item-body { color: var(--slate); } /* Content */ .app-main .tab-content { flex: 1; padding: var(--pad-content); background: var(--page-bg); overflow-x: hidden; } /* Hub-Module mit eigener Sidebar: randlos + voll-höhe → Modul-Sidebar klebt bündig an der Icon-Rail, Content füllt alles (Modul managt eigenes internes Scrollen). */ .app-container.module-fills .app-main { height: 100vh; height: 100dvh; min-height: 0; } .app-container.module-fills .tab-content { padding: 0; min-height: 0; overflow: hidden; } /* ============================================================ LADESCREEN (Preload nach Login) — Marken-Farben, hell ============================================================ */ .loading-overlay { background: var(--page-bg) !important; /* alten Navy-Gradient ersetzen */ } .loading-content { color: var(--navy); } .loading-logo { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 auto var(--space-lg); background: var(--brand-gold); border-radius: 20px; box-shadow: var(--shadow-md); } .loading-logo img { width: 68px; height: 68px; object-fit: contain; display: block; } .loading-content h2 { color: var(--navy); } .loading-content p { color: var(--slate); } .loading-spinner { border-color: var(--brand-gold-18); border-top-color: var(--brand-gold); } .progress-bar { background: rgba(120,120,128,.18); } .progress-fill { background: var(--brand-gold) !important; } .progress-text { color: var(--slate); } /* ============================================================ LOGIN — gleicher iPad-Stil (heller Hintergrund, Gold-Logo-Kachel) ============================================================ */ .login-page { background: var(--page-bg) !important; /* alten Navy-Gradient ersetzen */ } .login-card { border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); } .login-logo { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto var(--space-md); background: var(--brand-gold); /* Marken-Gold, voll deckend */ border-radius: 22px; box-shadow: var(--shadow-md); } .login-logo img { width: 76px; height: 76px; object-fit: contain; display: block; } .login-header h1 { color: var(--navy); } /* Login-Submit + alle primären Buttons in Gold (iPad §5.9) */ .btn-primary { background: var(--brand-gold) !important; color: #fff !important; box-shadow: var(--shadow-sm) !important; } .btn-primary:hover:not(:disabled) { background: var(--brand-gold-86) !important; transform: none !important; } #forgot-password-link { color: var(--brand-gold) !important; } /* Inputs/Focus auf Gold statt Navy */ input:focus, textarea:focus, select:focus { border-color: var(--brand-gold) !important; box-shadow: 0 0 0 4px var(--brand-gold-18) !important; } /* ============================================================ RESPONSIVE — schmale Viewports: Sidebar als Icon-Rail ============================================================ */ @media (max-width: 860px) { .app-container { --sidebar-w: 64px; } .app-container.sidebar-collapsed { --sidebar-w: 220px; } .app-sidebar { flex-basis: 64px; width: 64px; } .brand-name, .nav-group-label, .nav-label, .sidebar-footer .btn-logout span { display: none; } .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; } .app-sidebar .tab-btn { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* Auf schmal expandiert der Toggle die Sidebar temporär wieder */ .app-container.sidebar-collapsed .app-sidebar { flex-basis: 220px; width: 220px; } .app-container.sidebar-collapsed .brand-name, .app-container.sidebar-collapsed .nav-group-label, .app-container.sidebar-collapsed .nav-label, .app-container.sidebar-collapsed .sidebar-footer .btn-logout span { display: revert; } .app-container.sidebar-collapsed .app-sidebar .tab-btn { justify-content: flex-start; gap: 12px; padding: 9px 12px; } }