/* layout.css — shared layout, grid, and utilities. NOTE: .app-header and .app-footer use position: fixed. Consumer projects MUST reserve room for them on : body { padding-top: var(--app-header-height); padding-bottom: var(--app-footer-height); } The two custom properties are declared on :root below. Override them in project-theme.css if the app's chrome is taller/shorter than the defaults. Full-viewport app shells (chat, kiosk, live dashboards) opt out of the body-padding reservation via — see rule §12a. */ :root { --app-header-height: 60px; --app-footer-height: 48px; } /* Full-viewport app-shell opt-in (rule §12a). The shell element owns the space between fixed header and fixed footer via inset — no 100vh math, no padding coupling, no mobile URL-bar hack. */ body.app-shell { padding: 0; overflow: hidden; } body.app-shell .app-shell-root { position: fixed; inset: var(--app-header-height) 0 var(--app-footer-height) 0; display: flex; flex-direction: column; } /* ── Containers ─────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1rem; } .container-fluid { width: 100%; padding-inline: 1rem; } .container-sm { width: 100%; max-width: 480px; margin-inline: auto; padding-inline: 1rem; } .container-md { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: 1rem; } .container-lg { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: 1rem; } .container-xl { width: 100%; max-width: 800px; margin-inline: auto; padding-inline: 1rem; } /* Reading-width wrapper for long-form text (help, impressum, docs). Rule §16. */ .page-reading { width: 100%; max-width: 720px; margin-inline: auto; padding: 1.5rem; } /* ── Grid ───────────────────────────────────────────────────────────────────── */ .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; } .col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } /* Mobile: everything full-width below 768px */ @media (max-width: 767px) { .col-md-8, .col-md-4, .col-md-6 { grid-column: span 12; } } @media (min-width: 768px) { .col-md-12 { grid-column: span 12; } .col-md-8 { grid-column: span 8; } .col-md-4 { grid-column: span 4; } .col-md-6 { grid-column: span 6; } } /* ── Page shell — sticky footer layout ──────────────────────────────────────── */ body { min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1; } /* ── App header ──────────────────────────────────────────────────────────────── */ .app-header { background: var(--color-surface); padding: 0.85rem 2rem; display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; border-bottom: 1px solid var(--color-border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .header-left, .header-right { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .header-right { justify-content: flex-end; } .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--color-text); flex-shrink: 0; } .brand:hover { text-decoration: none; color: var(--color-text); } .header-logo { display: block; flex-shrink: 0; } .header-appname { font-size: 1.1rem; font-weight: 600; color: var(--color-text); } /* ── Header nav ──────────────────────────────────────────────────────────────── */ .header-nav { display: flex; gap: 0.25rem; align-items: center; } .header-nav a { color: var(--color-muted); text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0.75rem; border-radius: 6px; transition: background .15s, color .15s; } .header-nav a:hover, .header-nav a.active { color: var(--color-text); background: var(--color-surface-alt); } /* ── User dropdown ───────────────────────────────────────────────────────────── */ .user-menu { position: relative; display: flex; align-items: center; margin-left: 0.5rem; } .user-btn { display: flex; align-items: center; gap: 0.45rem; background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 0.85rem; padding: 0.3rem 0.55rem; border-radius: 6px; transition: background .15s, color .15s; } .user-btn:hover { color: var(--color-text); background: var(--color-surface-alt); } .avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-surface-alt); } .chevron { opacity: 0.6; transition: transform .15s; } .user-menu.open .chevron { transform: rotate(180deg); } .user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; min-width: 160px; overflow: hidden; box-shadow: var(--shadow); z-index: 100; } .user-menu.open .user-dropdown { display: block; } .user-dropdown a, .dropdown-link-btn { display: block; width: 100%; padding: 0.55rem 1rem; background: none; border: none; text-align: left; cursor: pointer; color: var(--color-text); text-decoration: none; font-size: 0.85rem; transition: background .15s, color .15s; } .user-dropdown a:hover, .dropdown-link-btn:hover { background: var(--color-surface-alt); color: var(--color-text); } .dropdown-divider { border-top: 1px solid var(--color-border); margin: 0.25rem 0; } .dropdown-username { display: block; padding: 0.55rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text); } .theme-row { display: flex; justify-content: center; gap: 0.25rem; padding: 0.5rem 0.75rem; } .theme-btn { background: none; border: 1px solid transparent; border-radius: 6px; color: var(--color-muted); cursor: pointer; font-size: 1rem; padding: 0.2rem 0.5rem; transition: background .15s, color .15s, border-color .15s; } .theme-btn:hover { color: var(--color-text); background: var(--color-surface-alt); } .theme-btn.active { border-color: var(--color-accent); color: var(--color-text); } /* ── Alert tray (queued alerts above
) ─────────────────────────────────── */ .alert-tray { padding: 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } /* ── Navbar ─────────────────────────────────────────────────────────────────── */ .navbar { display: flex; align-items: center; background-color: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; position: sticky; top: 0; z-index: 100; } .navbar .container-fluid { display: flex; align-items: center; gap: 0.5rem; } .navbar-brand { font-size: 1.1rem; color: var(--color-nav-text); white-space: nowrap; text-decoration: none; } .navbar-brand:hover { text-decoration: none; color: var(--color-nav-text); } .navbar-nav { display: flex; align-items: center; gap: 0.25rem; } .nav-link { color: var(--color-nav-text); padding: 0.375rem 0.5rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; } .nav-link:hover { text-decoration: none; opacity: 0.8; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ .app-footer { display: flex; justify-content: center; align-items: center; gap: 1.25rem; padding: 0.4rem 1.5rem; font-size: 0.75rem; color: var(--color-muted); border-top: 1px solid var(--color-border); background-color: var(--color-surface); position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; } .app-footer a { color: var(--color-muted); text-decoration: none; } .app-footer a:hover { color: var(--color-text); } .wl-footer { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-surface); border-top: 1px solid var(--color-border); z-index: 100; } .fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; } .border-top { border-top: 1px solid var(--color-border); } /* ── Spacing utilities ──────────────────────────────────────────────────────── */ .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .ms-1 { margin-left: 0.25rem; } .ms-2 { margin-left: 0.5rem; } .ms-auto { margin-left: auto; } .me-1 { margin-right: 0.25rem; } .me-2 { margin-right: 0.5rem; } .p-2 { padding: 0.5rem; } .p-4 { padding: 1.5rem; } .py-1 { padding-block: 0.25rem; } .py-2 { padding-block: 0.5rem; } .px-2 { padding-inline: 0.5rem; } .mb-0 { margin-bottom: 0; } .me-0 { margin-right: 0; } /* ── Display utilities ──────────────────────────────────────────────────────── */ .d-flex { display: flex; } .d-grid { display: grid; } .d-block { display: block; } .d-none { display: none; } .d-inline { display: inline; } .flex-grow-1 { flex-grow: 1; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } .justify-content-center { justify-content: center; } .flex-column { flex-direction: column; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 1rem; } .w-100 { width: 100%; } .w-auto { width: auto; } .h-100 { height: 100%; } /* ── Text utilities ─────────────────────────────────────────────────────────── */ .text-muted { color: var(--color-muted); } .text-center { text-align: center; } .text-body { color: var(--color-text); } .text-nowrap { white-space: nowrap; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } /* ── Misc ───────────────────────────────────────────────────────────────────── */ .rounded-circle { border-radius: 50%; } .overflow-scroll { overflow: scroll; } .small { font-size: 0.875em; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Responsive display ─────────────────────────────────────────────────────── */ @media (max-width: 575px) { .d-sm-inline { display: none; } } @media (min-width: 576px) { .d-sm-inline { display: inline; } }