/* ============================================================================= theme.css - single source of truth for both colour modes. The element carries data-bs-theme="light"|"dark", stamped server-side from the signed-in user's Profile.dark_mode (see layouts/base.html). Every colour used anywhere in the app is one of the --app-* tokens below; nothing else in the codebase should hardcode a hex value. Bootstrap 5.3's own colour-mode variables are re-pointed at the same tokens so cards, buttons, forms, dropdowns, modals etc. theme themselves without !important. Anonymous pages are not stamped and follow the OS preference instead (see the prefers-color-scheme block below, which must stay byte-identical to the [data-bs-theme="dark"] block - tests/test_theme.py checks this). ============================================================================= */ /* --------------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------------- */ :root { --app-bg: #f5f7fa; --app-surface: #ffffff; --app-surface-2: #f1f4f8; --app-hover: #e9eef5; --app-border: #e2e8f0; --app-text: #0f172a; --app-text-muted: #5b6779; --app-input-bg: #ffffff; --app-link: #1d4ed8; --app-accent: #2563eb; --app-accent-text: #1d4ed8; --app-accent-soft: #dbeafe; --app-success-text: #15803d; --app-success-soft: #dcfce7; --app-warning-text: #a16207; --app-warning-soft: #fef3c7; --app-danger-text: #b91c1c; --app-danger-soft: #fee2e2; --app-info-text: #0e7490; --app-info-soft: #cffafe; --app-shadow: 0 1px 2px rgba(15, 23, 42, .06); --app-radius: 10px; --app-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --app-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } [data-bs-theme="dark"] { --app-bg: #0f1218; --app-surface: #161a22; --app-surface-2: #1d222c; --app-hover: #232935; --app-border: #262c38; --app-text: #e6e9ef; --app-text-muted: #9aa4b2; --app-input-bg: #12161d; --app-link: #8ab4f8; --app-accent: #2563eb; --app-accent-text: #93c5fd; --app-accent-soft: #1e2a44; --app-success-text: #4ade80; --app-success-soft: #12291b; --app-warning-text: #fbbf24; --app-warning-soft: #2e2410; --app-danger-text: #f87171; --app-danger-soft: #331616; --app-info-text: #67e8f9; --app-info-soft: #0f2a30; --app-shadow: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } /* Anonymous pages carry no data-bs-theme stamp, so they follow the OS. A page explicitly stamped "light" is excluded so a signed-in preference always wins. */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]):not([data-bs-theme="dark"]) { --app-bg: #0f1218; --app-surface: #161a22; --app-surface-2: #1d222c; --app-hover: #232935; --app-border: #262c38; --app-text: #e6e9ef; --app-text-muted: #9aa4b2; --app-input-bg: #12161d; --app-link: #8ab4f8; --app-accent: #2563eb; --app-accent-text: #93c5fd; --app-accent-soft: #1e2a44; --app-success-text: #4ade80; --app-success-soft: #12291b; --app-warning-text: #fbbf24; --app-warning-soft: #2e2410; --app-danger-text: #f87171; --app-danger-soft: #331616; --app-info-text: #67e8f9; --app-info-soft: #0f2a30; --app-shadow: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark; } } /* --------------------------------------------------------------------------- 2. Bootstrap variable mapping Component-level variables (--bs-card-bg and so on) read var(--app-*), so they resolve correctly wherever the cascade currently sits - no need to repeat this section per colour mode. --------------------------------------------------------------------------- */ :root { --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-secondary-color: var(--app-text-muted); --bs-tertiary-bg: var(--app-surface-2); --bs-secondary-bg: var(--app-surface-2); --bs-border-color: var(--app-border); --bs-link-color: var(--app-link); --bs-link-hover-color: var(--app-link); --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; --bs-body-font-family: var(--app-font); --bs-body-font-size: .875rem; --bs-border-radius: 8px; --bs-emphasis-color: var(--app-text); } .card, .list-group-item, .accordion-item { --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--app-text); --bs-card-color: var(--app-text); --bs-list-group-bg: var(--app-surface); --bs-list-group-border-color: var(--app-border); --bs-list-group-color: var(--app-text); --bs-list-group-action-hover-bg: var(--app-hover); --bs-accordion-bg: var(--app-surface); --bs-accordion-border-color: var(--app-border); --bs-accordion-active-bg: var(--app-surface-2); --bs-accordion-active-color: var(--app-text); --bs-accordion-btn-color: var(--app-text); } .dropdown-menu { --bs-dropdown-bg: var(--app-surface); --bs-dropdown-border-color: var(--app-border); --bs-dropdown-color: var(--app-text); --bs-dropdown-link-color: var(--app-text); --bs-dropdown-link-hover-bg: var(--app-hover); --bs-dropdown-link-hover-color: var(--app-text); --bs-dropdown-link-active-bg: var(--app-accent-soft); --bs-dropdown-link-active-color: var(--app-accent-text); --bs-dropdown-header-color: var(--app-text-muted); --bs-dropdown-divider-bg: var(--app-border); --bs-dropdown-box-shadow: var(--app-shadow); } .modal-content { --bs-modal-bg: var(--app-surface); --bs-modal-border-color: var(--app-border); --bs-modal-color: var(--app-text); --bs-modal-border-radius: 14px; } .popover { --bs-popover-bg: var(--app-surface); --bs-popover-border-color: var(--app-border); --bs-popover-body-color: var(--app-text); --bs-popover-header-bg: var(--app-surface-2); --bs-popover-header-color: var(--app-text); } .offcanvas { --bs-offcanvas-bg: var(--app-surface); --bs-offcanvas-color: var(--app-text); } .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: var(--app-hover); --bs-table-hover-color: var(--app-text); --bs-table-striped-bg: var(--app-surface-2); } .pagination { --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); --bs-pagination-color: var(--app-text); --bs-pagination-hover-bg: var(--app-hover); --bs-pagination-hover-color: var(--app-text); --bs-pagination-hover-border-color: var(--app-border); --bs-pagination-active-bg: var(--app-accent); --bs-pagination-active-border-color: var(--app-accent); --bs-pagination-disabled-bg: var(--app-surface); --bs-pagination-disabled-color: var(--app-text-muted); --bs-pagination-disabled-border-color: var(--app-border); } .nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-hover-border-color: var(--app-border); --bs-nav-tabs-link-active-border-color: var(--app-border) var(--app-border) var(--app-surface); } .nav-tabs .nav-link { color: var(--app-text-muted); } .nav-tabs .nav-link.active { background-color: var(--app-surface); color: var(--app-text); } /* --------------------------------------------------------------------------- 3. Base and typography --------------------------------------------------------------------------- */ html, body { background-color: var(--app-bg); } body { line-height: 1.5; } h1, .h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; } h2, .h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } h3, .h3 { font-size: 17px; font-weight: 600; } h4, .h4 { font-size: 15px; font-weight: 600; } .text-muted { color: var(--app-text-muted) !important; } /* Bootstrap sets its own !important on this utility */ hr { border-color: var(--app-border); opacity: 1; } code, kbd, pre, .font-monospace { font-family: var(--app-mono); } code { background-color: var(--app-surface-2); color: var(--app-text); border-radius: 4px; padding: .1rem .35rem; } pre { background-color: var(--app-surface-2); border: 1px solid var(--app-border); border-radius: 8px; padding: .75rem; color: var(--app-text); } ::-webkit-scrollbar { width: 10px; height: 10px; background-color: var(--app-bg); } ::-webkit-scrollbar-thumb { background-color: var(--app-border); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--app-hover); } * { scrollbar-color: var(--app-border) var(--app-bg); } /* --------------------------------------------------------------------------- 4. Cards and stat tiles --------------------------------------------------------------------------- */ .card { box-shadow: var(--app-shadow); } .card-header { border-bottom: 1px solid var(--app-border); padding: 16px 20px; } .card-body { padding: 20px; } .card-title { font-size: 15px; font-weight: 600; margin-bottom: 0; } /* .section-card, .summary-card, .info-section, .dashboard-card are aliases of .card - they may appear with or without the .card class in existing markup. */ .section-card, .summary-card, .info-section, .dashboard-card { background-color: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); } .summary-card { height: 100%; } .stat-label { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--app-text-muted); } .stat-value { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--app-text); } .icon-large { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; background-color: var(--app-surface-2); color: var(--app-text-muted); } .icon-large.icon-primary { background-color: var(--app-accent-soft); color: var(--app-accent-text); } .icon-large.icon-success { background-color: var(--app-success-soft); color: var(--app-success-text); } .icon-large.icon-warning { background-color: var(--app-warning-soft); color: var(--app-warning-text); } .icon-large.icon-danger { background-color: var(--app-danger-soft); color: var(--app-danger-text); } .icon-large.icon-info { background-color: var(--app-info-soft); color: var(--app-info-text); } /* Stat tile: the one KPI component (dashboard, zones, security, audit, organization). Horizontal: a 40px toned icon disc, then the label over a 24px value. The tile is its own surface; do not nest it in .card. Tone modifiers: is-primary/success/warning/danger/info. */ .stat-tile { display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; background-color: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); } a.stat-tile { text-decoration: none; } a.stat-tile:hover { border-color: var(--app-accent); color: var(--app-text); } .stat-tile-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; background-color: var(--app-surface-2); color: var(--app-text-muted); } .stat-tile-icon.is-primary { background-color: var(--app-accent-soft); color: var(--app-accent-text); } .stat-tile-icon.is-success { background-color: var(--app-success-soft); color: var(--app-success-text); } .stat-tile-icon.is-warning { background-color: var(--app-warning-soft); color: var(--app-warning-text); } .stat-tile-icon.is-danger { background-color: var(--app-danger-soft); color: var(--app-danger-text); } .stat-tile-icon.is-info { background-color: var(--app-info-soft); color: var(--app-info-text); } .stat-tile-body { flex: 1 1 auto; min-width: 0; } .stat-tile .stat-label { margin-bottom: 2px; } .stat-tile .stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .stat-value.is-primary { color: var(--app-accent-text); } .stat-value.is-success { color: var(--app-success-text); } .stat-value.is-warning { color: var(--app-warning-text); } .stat-value.is-danger { color: var(--app-danger-text); } .stat-unit { font-size: 13px; font-weight: 400; color: var(--app-text-muted); } .stat-tile-desc { margin-top: 4px; font-size: 13px; color: var(--app-text-muted); } .stat-label .fa-info-circle { color: var(--app-text-muted); cursor: help; } @media (max-width: 767.98px) { .stat-tile { padding: 14px 16px; } .stat-tile .stat-value { font-size: 20px; } } /* Card chrome shared by every page */ .card-title > i:first-child { margin-right: 8px; color: var(--app-text-muted); } .card-collapse-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; } .card-collapse-btn i { transition: transform .2s ease; } .card-collapse-btn[aria-expanded="true"] i { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .card-collapse-btn i { transition: none; } } /* --------------------------------------------------------------------------- 5. Tables and DataTables chrome --------------------------------------------------------------------------- */ .table thead th, .table > thead > tr > th { background-color: var(--app-surface-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--app-text-muted); border-bottom: 1px solid var(--app-border); } .table td, .table th { border-color: var(--app-border); vertical-align: middle; } .table thead th, .table .btn { white-space: nowrap; } .table-cell-link, a.table-cell-link:hover { color: inherit; text-decoration: none; } .table-cell-link:hover { text-decoration: underline; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: var(--app-input-bg); color: var(--app-text); border: 1px solid var(--app-border); border-radius: 8px; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_length label { color: var(--app-text-muted); } table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { color: var(--app-text-muted); } .dataTables_wrapper .paginate_button.page-item .page-link { border-radius: 8px; margin-inline: 2px; } /* Table card: the table runs edge to edge; the header, the DataTables controls and the first/last cells share the card's 20px inset so text lines up with the card title. */ .table-card > .card-body { padding: 0; } .table-card .table { margin-bottom: 0; } /* dataTables.bootstrap5.css forces 6px top/bottom margins with !important */ .table-card table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; } .table-card .table > :not(caption) > * > :first-child { padding-left: 20px; } .table-card .table > :not(caption) > * > :last-child { padding-right: 20px; } .table-card .table > tbody > tr:last-child > * { border-bottom: 0; } .table-card .table .badge { white-space: nowrap; } .table-card .dataTables_wrapper > .row { margin-inline: 0; } /* dataTables.bootstrap5.css zeroes the outer columns' padding inside .table-responsive with a (0,5,3) selector; these are written to outrank it. */ .table-card .dataTables_wrapper > .row > [class*="col-"], .table-card .table-responsive > .dataTables_wrapper > .row > [class*="col-"]:first-child, .table-card .table-responsive > .dataTables_wrapper > .row > [class*="col-"]:last-child { padding-inline: 20px; } .table-card .dataTables_wrapper > .row:first-child { padding-block: 14px 6px; } .table-card .dataTables_wrapper > .row:last-child { padding-block: 8px 14px; border-top: 1px solid var(--app-border); } .table-card .dataTables_wrapper > .row:nth-child(2) > [class*="col-"], .table-card .table-responsive > .dataTables_wrapper > .row:nth-child(2) > [class*="col-"]:first-child { padding-inline: 0; } /* A table initialised with paging/searching off still gets the two control rows; hide them when they hold nothing, otherwise they render as empty padded strips. */ .table-card .dataTables_wrapper > .row:not(:has(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate, table)) { display: none; } /* --------------------------------------------------------------------------- 6. Badges and status pills --------------------------------------------------------------------------- */ .badge-soft-primary, .badge-soft-success, .badge-soft-warning, .badge-soft-danger, .badge-soft-info, .badge-soft-neutral, .status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; font-size: 12px; font-weight: 500; border-radius: 6px; line-height: 1.4; } .badge-soft-primary { background-color: var(--app-accent-soft); color: var(--app-accent-text); } .badge-soft-success { background-color: var(--app-success-soft); color: var(--app-success-text); } .badge-soft-warning { background-color: var(--app-warning-soft); color: var(--app-warning-text); } .badge-soft-danger { background-color: var(--app-danger-soft); color: var(--app-danger-text); } .badge-soft-info { background-color: var(--app-info-soft); color: var(--app-info-text); } .badge-soft-neutral { background-color: var(--app-surface-2); color: var(--app-text-muted); } /* Neutral default only when no badge-soft-* colour is present; a soft class on the same element must keep its colour. */ .status-badge:not([class*="badge-soft-"]) { background-color: var(--app-surface-2); color: var(--app-text-muted); } .status-badge.status-active { background-color: var(--app-success-soft); color: var(--app-success-text); } .status-badge.status-trialing { background-color: var(--app-info-soft); color: var(--app-info-text); } .status-badge.status-inactive { background-color: var(--app-danger-soft); color: var(--app-danger-text); } /* Legacy solid bg-*/text-white badge markup degrades to the matching soft variant. Bootstrap's .bg-* and .text-white utilities ship with !important, so overriding them here needs it too. */ .badge.bg-primary { background-color: var(--app-accent-soft) !important; color: var(--app-accent-text) !important; } .badge.bg-success { background-color: var(--app-success-soft) !important; color: var(--app-success-text) !important; } .badge.bg-warning { background-color: var(--app-warning-soft) !important; color: var(--app-warning-text) !important; } .badge.bg-danger { background-color: var(--app-danger-soft) !important; color: var(--app-danger-text) !important; } .badge.bg-info { background-color: var(--app-info-soft) !important; color: var(--app-info-text) !important; } .badge.bg-secondary, .badge.bg-light { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; } /* --------------------------------------------------------------------------- 7. Buttons --------------------------------------------------------------------------- */ .btn { --bs-btn-border-radius: 8px; font-weight: 500; } .btn-sm { --bs-btn-border-radius: 6px; } .btn-primary, .btn-theme, .btn-create { --bs-btn-color: #fff; --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8; --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent); } .btn-secondary, .btn-light { --bs-btn-color: var(--app-text); --bs-btn-bg: var(--app-surface-2); --bs-btn-border-color: var(--app-border); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-bg: var(--app-hover); --bs-btn-hover-border-color: var(--app-border); --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: var(--app-hover); --bs-btn-active-border-color: var(--app-border); --bs-btn-disabled-bg: var(--app-surface-2); --bs-btn-disabled-border-color: var(--app-border); } .btn-outline-secondary { --bs-btn-color: var(--app-text); --bs-btn-border-color: var(--app-border); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-bg: var(--app-hover); --bs-btn-hover-border-color: var(--app-border); --bs-btn-active-color: var(--app-text); --bs-btn-active-bg: var(--app-hover); --bs-btn-active-border-color: var(--app-border); --bs-btn-disabled-color: var(--app-text-muted); } .btn:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } .btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; background-color: transparent; color: var(--app-text-muted); font-size: 0; /* hides any accompanying text label; the icon glyph resets its own size below */ line-height: 1; } .btn-icon .feather, .btn-icon i { font-size: 1rem; } .btn-icon:hover { background-color: var(--app-hover); color: var(--app-text); } .btn-icon:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; } /* --------------------------------------------------------------------------- 8. Forms --------------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--app-input-bg); color: var(--app-text); border-color: var(--app-border); border-radius: 8px; } .form-control::placeholder { color: var(--app-text-muted); opacity: 1; } .form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } .form-control:disabled, .form-control[readonly] { background-color: var(--app-surface-2); color: var(--app-text-muted); } .form-label, .col-form-label, .form-check-label { font-size: 13px; font-weight: 500; color: var(--app-text); } .form-text { color: var(--app-text-muted); } .form-check-input { --bs-form-check-bg: var(--app-input-bg); border-color: var(--app-border); } .input-group-text { background-color: var(--app-surface-2); color: var(--app-text-muted); border-color: var(--app-border); } /* --------------------------------------------------------------------------- 9. Alerts --------------------------------------------------------------------------- */ .alert { border-width: 1px; } .alert-success { --bs-alert-color: var(--app-success-text); --bs-alert-bg: var(--app-success-soft); --bs-alert-border-color: color-mix(in srgb, var(--app-success-text) 30%, transparent); --bs-alert-link-color: var(--app-success-text); } .alert-warning { --bs-alert-color: var(--app-warning-text); --bs-alert-bg: var(--app-warning-soft); --bs-alert-border-color: color-mix(in srgb, var(--app-warning-text) 30%, transparent); --bs-alert-link-color: var(--app-warning-text); } .alert-danger { --bs-alert-color: var(--app-danger-text); --bs-alert-bg: var(--app-danger-soft); --bs-alert-border-color: color-mix(in srgb, var(--app-danger-text) 30%, transparent); --bs-alert-link-color: var(--app-danger-text); } .alert-info { --bs-alert-color: var(--app-info-text); --bs-alert-bg: var(--app-info-soft); --bs-alert-border-color: color-mix(in srgb, var(--app-info-text) 30%, transparent); --bs-alert-link-color: var(--app-info-text); } .alert-secondary, .alert-light { --bs-alert-color: var(--app-text); --bs-alert-bg: var(--app-surface-2); --bs-alert-border-color: var(--app-border); } /* --------------------------------------------------------------------------- 10. Nav pills (page sub-navigation) --------------------------------------------------------------------------- */ .nav-pills { --bs-nav-pills-link-active-bg: var(--app-accent-soft); --bs-nav-pills-link-active-color: var(--app-accent-text); gap: .25rem; } .nav-pills .nav-link { color: var(--app-text-muted); border-radius: 8px; font-weight: 500; } .nav-pills .nav-link:hover { background-color: var(--app-hover); color: var(--app-text); } .nav-pills .nav-link.active:hover { background-color: var(--app-accent-soft); color: var(--app-accent-text); } /* --------------------------------------------------------------------------- 11. Choice cards (selectable tiles, e.g. notification channel picker) --------------------------------------------------------------------------- */ .choice-card { cursor: pointer; border: 1px solid var(--app-border); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .choice-card:hover { border-color: var(--app-accent); } .choice-card.is-selected, .choice-card.selected, .choice-card.active, .choice-card:has(input:checked) { border-color: var(--app-accent); background-color: var(--app-accent-soft); box-shadow: 0 0 0 1px var(--app-accent); } /* --------------------------------------------------------------------------- 12. Empty states --------------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--app-text-muted); } .empty-state > i, .empty-state > svg { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1rem; background-color: var(--app-surface-2); color: var(--app-text-muted); font-size: 1.5rem; } .empty-state h1, .empty-state h2, .empty-state h3, .empty-state h4 { color: var(--app-text); margin-bottom: .5rem; } .empty-state p { max-width: 32rem; margin: 0 auto 1.25rem; } /* --------------------------------------------------------------------------- 13. Application shell --------------------------------------------------------------------------- */ body.app-body { min-height: 100vh; } .app-sidebar { position: fixed; inset-block: 0; left: 0; z-index: 1030; width: 248px; display: flex; flex-direction: column; gap: 4px; background-color: var(--app-bg); border-right: 1px solid var(--app-border); overflow-y: auto; padding-bottom: 12px; } .app-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1020; background-color: rgba(15, 23, 42, .5); } .app-main { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; } .app-header { position: sticky; top: 0; z-index: 1010; height: 56px; display: flex; align-items: center; gap: 1rem; padding-inline: 24px; background-color: var(--app-bg); border-bottom: 1px solid var(--app-border); } .app-content { flex: 1 1 auto; width: 100%; max-width: 1440px; margin-inline: auto; padding: 24px; } .app-footer { border-top: 1px solid var(--app-border); padding: 16px 24px; color: var(--app-text-muted); font-size: 13px; text-align: center; } .app-footer a { color: inherit; } .sidebar-toggle { display: inline-flex; } @media (min-width: 1024px) { .sidebar-toggle { display: none; } } @media (max-width: 1023.98px) { .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 24px rgba(15, 23, 42, .25); } .app-sidebar.is-open { transform: translateX(0); } .app-main { margin-left: 0; } body.sidebar-open .app-sidebar-backdrop { display: block; } } @media (max-width: 767.98px) { .app-content { padding: 16px; } .app-header { padding-inline: 16px; } } /* Sidebar contents */ .sidebar-brand { display: flex; align-items: center; gap: .625rem; padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--app-text); text-decoration: none; } .sidebar-brand:hover { color: var(--app-text); } .brand-mark { width: 22px; height: 22px; border-radius: 6px; background-color: var(--app-accent); flex-shrink: 0; } .sidebar-org { margin: 0 12px 12px; padding: 12px; border-radius: 8px; background-color: var(--app-surface-2); display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .sidebar-org-name { font-size: 13px; font-weight: 600; color: var(--app-text); } .sidebar-nav { flex: 1 1 auto; padding: 0 12px; } .sidebar-section + .sidebar-section { margin-top: 8px; } .sidebar-section-title { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-muted); } .sidebar-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav-link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--app-text); text-decoration: none; } .sidebar-nav-link i { font-size: 18px; width: 18px; text-align: center; color: var(--app-text-muted); flex-shrink: 0; } .sidebar-nav-link .badge { margin-left: auto; } .sidebar-nav-link:hover { background-color: var(--app-hover); color: var(--app-text); } .sidebar-nav-link.active { background-color: var(--app-accent-soft); color: var(--app-accent-text); } .sidebar-nav-link.active i { color: var(--app-accent-text); } .sidebar-user { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 12px; border-top: 1px solid var(--app-border); } .sidebar-user-info { min-width: 0; flex: 1 1 auto; } .sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--app-text); } .sidebar-user-email { font-size: 12px; color: var(--app-text-muted); } .sidebar-user-logout { flex-shrink: 0; } .app-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: var(--app-accent-soft); color: var(--app-accent-text); font-size: 12px; font-weight: 600; } /* Header contents */ .app-header-title { font-size: 15px; font-weight: 600; color: var(--app-text); min-width: 0; } .app-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .user-menu-toggle { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 8px; background-color: transparent; color: var(--app-text); } .user-menu-toggle:hover { background-color: var(--app-hover); } .user-menu-toggle::after { color: var(--app-text-muted); } .user-menu-name { font-size: 13px; font-weight: 500; max-width: 12rem; } .user-menu .dropdown-menu { min-width: 15rem; } .dropdown-header { padding: 12px 16px 8px; } /* Page header (title, breadcrumbs, actions) inside the content area */ .page-header { margin-bottom: 20px; } .page-header:has(.page-title:empty):has(.page-breadcrumb:empty) { display: none; } .page-breadcrumb .breadcrumb { margin-bottom: 12px; font-size: 13px; } .page-breadcrumb .breadcrumb-item a { color: var(--app-text-muted); } .page-breadcrumb .breadcrumb-item.active { color: var(--app-text); } .page-header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; } .page-title:empty, .page-actions:empty { display: none; } .page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--app-text); } .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Toasts (Django messages) */ .app-toasts { position: fixed; top: 16px; right: 16px; z-index: 1090; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; } .app-toasts .alert { margin-bottom: 0; box-shadow: var(--app-shadow); } /* Cookie consent (CookieYes, hosted). Its config anchors the consent box and the revisit button bottom-left, on top of the sidebar; move both bottom-right. App shell only: auth pages have no sidebar, and the reCAPTCHA badge owns their bottom-right corner. CookieYes appends its