:root { /* ---------- Design tokens ---------- Reception-desk software for a resort property: warm, tactile, calm - an ink-dark chrome against a sand-toned workspace, not another cold grey SaaS dashboard. --brand-accent stays the one color an admin can override (Admin > Company Settings > navbar_color); --lagoon is its default and everything else is fixed design language. */ --ink: #182b27; --ink-soft: #223b35; --ink-border: #32473f; --lagoon: #3e7d6e; --brand-dark: #182b27; --brand-accent: #3e7d6e; /* overridden inline per-request from settings.navbar_color */ --brand-gold: #b4874f; --bg-page: #f3eee4; --bg-card: #ffffff; --border-soft: #e6ddcc; --text-main: #22261f; --text-muted: #7c7566; --sidebar-w: 256px; --topbar-h: 64px; --radius-lg: 0; --radius-md: 0; --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Status-tinted surfaces (incident cards, etc) - swapped for dark mode below so a light warning/success tint doesn't stay eye-searing on a dark background. */ --status-danger-bg: #fbf3f1; --status-warning-bg: #fbf6ea; --status-success-bg: #f2f6ee; --scrollbar-thumb: #d6cbb3; /* Bootstrap component surfaces we override per-theme below (cards, tables, dropdowns, modals, inputs all default to white/black in Bootstrap and don't follow --bg-card/--text-main on their own). */ --input-bg: #ffffff; --input-border: #ded2b8; /* Square corners everywhere Bootstrap itself sets radius, rather than hunting down every component - these are the CSS vars Bootstrap 5.3's own component rules fall back to. */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-pill: 0; --bs-modal-border-radius: 0; --bs-dropdown-border-radius: 0; --bs-alert-border-radius: 0; --bs-toast-border-radius: 0; --bs-badge-border-radius: 0; --bs-nav-pills-border-radius: 0; --bs-progress-border-radius: 0; --bs-list-group-border-radius: 0; --bs-accordion-border-radius: 0; --bs-offcanvas-border-radius: 0; --bs-popover-border-radius: 0; --bs-tooltip-border-radius: 0; } /* ---------- Dark mode ---------- Toggled by setting data-theme="dark" on (see the inline script in of base.html/login.html, which applies it before first paint to avoid a light-mode flash, and the toggle button's click handler). Kept as a single override block so every component below just needs to read the same variables rather than duplicating rules per-theme. */ :root[data-theme="dark"] { --bg-page: #14161a; --bg-card: #1c1f26; --border-soft: #2b2f38; --text-main: #e8e9ed; --text-muted: #9799a6; --ink: #10201c; --ink-soft: #1a302a; --ink-border: #2a3f38; --status-danger-bg: #2a1a1c; --status-warning-bg: #2a2519; --status-success-bg: #182a1e; --scrollbar-thumb: #3a3f4a; --input-bg: #22252c; --input-border: #3a3f4a; } /* Icons (sidebar, topbar, KPI cards, buttons) skew muddy on a dark background if left at their light-mode color/opacity, so brighten every Bootstrap Icon glyph a bit as a single blanket fix rather than chasing every color source that feeds an icon individually. */ :root[data-theme="dark"] i.bi { filter: brightness(1.35) saturate(1.05); } * { box-sizing: border-box; } html { background-color: var(--bg-page); } body { background-color: var(--bg-page); color: var(--text-main); font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }/* ---------- Dark mode: Bootstrap component overrides ---------- Bootstrap's own components (cards, tables, dropdowns, modals, form controls, list groups) ship hardcoded light colors, so they need explicit overrides here rather than picking up the variables above automatically. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .offcanvas { background-color: var(--bg-card); color: var(--text-main); border-color: var(--border-soft); } :root[data-theme="dark"] .dropdown-item { color: var(--text-main); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: var(--bg-page); color: var(--text-main); } :root[data-theme="dark"] .dropdown-item-text { color: var(--text-muted); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-main); } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--input-bg); color: var(--text-main); } :root[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } :root[data-theme="dark"] .form-label, :root[data-theme="dark"] .form-text, :root[data-theme="dark"] label { color: var(--text-main); } :root[data-theme="dark"] .table { color: var(--text-main); border-color: var(--border-soft); } :root[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--bg-card); color: var(--text-main); border-bottom-color: var(--border-soft); } :root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--bg-page); } :root[data-theme="dark"] hr { border-color: var(--border-soft); opacity: 1; } :root[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } :root[data-theme="dark"] .btn-outline-secondary { color: var(--text-main); border-color: var(--input-border); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } :root[data-theme="dark"] .alert { border-color: var(--border-soft); } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-page); } /* ---------- Theme toggle button ---------- */ .theme-toggle-btn { border: none; background: transparent; color: var(--text-muted); font-size: 1.15rem; line-height: 1; padding: 4px 8px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-btn:hover { background: var(--bg-page); color: var(--text-main); } /* Swap which icon shows based on the active theme - both live in the markup and CSS picks one, so there's no icon-swap flash on click. */ :root[data-theme="dark"] .theme-toggle-btn .bi-moon-stars { display: none; } :root:not([data-theme="dark"]) .theme-toggle-btn .bi-sun { display: none; } /* ---------- App shell / sidebar layout ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--ink); border-right: 1px solid var(--ink-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 16px; } .brand-mark { width: 30px; height: 30px; border-radius: 0; background: var(--brand-accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 0.95rem; } .brand-mark img { width: 100%; height: 100%; object-fit: cover; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #f3eee4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav { padding: 6px 12px; flex: 1; } .nav-section-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: #8ea59c; padding: 16px 10px 6px; } .sidebar-nav .nav-link, .sidebar-admin-link .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 0; color: #d7ddd6; font-size: 0.88rem; font-weight: 450; margin-bottom: 2px; text-decoration: none; } .sidebar-nav .nav-link i { font-size: 1rem; width: 18px; text-align: center; color: #8ea59c; } .sidebar-nav .nav-link:hover { background: var(--ink-soft); color: #fff; } .sidebar-nav .nav-link.active { background: color-mix(in srgb, var(--brand-accent) 30%, var(--ink-soft)); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-accent); } .sidebar-nav .nav-link.active i { color: var(--brand-accent); } .sidebar-nav .nav-link.sub { padding-left: 34px; font-size: 0.83rem; font-weight: 400; justify-content: space-between; } .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 0; color: #d7ddd6; font-size: 0.88rem; font-weight: 450; cursor: pointer; user-select: none; } .nav-group-toggle:hover { background: var(--ink-soft); color: #fff; } .nav-group-toggle.active { color: #fff; } .nav-group-toggle i.bi-chevron-down { transition: transform 0.15s ease; } .nav-group-toggle[aria-expanded="true"] i.bi-chevron-down { transform: rotate(180deg); } .nav-badge { background: #b5533e; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 0; line-height: 1.4; } .sidebar-admin-link { padding: 10px 12px 16px; border-top: 1px solid var(--ink-border); } .main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg-card); border-bottom: 1px solid var(--border-soft); box-shadow: inset 0 3px 0 var(--brand-accent); position: sticky; top: 0; z-index: 20; } .topbar-breadcrumb { font-size: 0.9rem; color: var(--text-main); font-weight: 500; } .topbar-actions { display: flex; align-items: center; gap: 16px; } .topbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg-page); border: 1px solid var(--border-soft); border-radius: 0; padding: 6px 12px; color: var(--text-muted); } .topbar-search input { border: none; background: transparent; outline: none; font-size: 0.85rem; width: 200px; } .page-content { padding: 24px 28px 40px; } /* ---------- Login page ---------- Split layout: a fixed-height ink hero panel (brand, headline, layered decorative rings) with a white form card floating/overlapping on top of it on desktop, and stacking below it on narrow screens. */ .login-page { background-color: var(--bg-page); min-height: 100vh; display: flex; align-items: center; padding: 32px 16px; } .login-shell { width: 100%; max-width: 1080px; margin: 0 auto; } .login-hero { position: relative; background: var(--ink); border-radius: 0; overflow: hidden; padding: 40px 56px; min-height: 260px; display: flex; flex-direction: column; isolation: isolate; } .login-hero-rings { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .login-hero-rings span { position: absolute; border-radius: 50%; border: 1px solid rgba(243, 238, 228, 0.14); } .login-hero-rings span.r1 { width: 620px; height: 620px; right: -220px; top: -180px; background: radial-gradient(circle at 30% 30%, rgba(62, 125, 110, 0.35), transparent 65%); } .login-hero-rings span.r2 { width: 420px; height: 420px; right: -80px; bottom: -180px; background: radial-gradient(circle at 60% 60%, rgba(180, 135, 79, 0.22), transparent 65%); } .login-hero-rings span.r3 { width: 260px; height: 260px; left: 30%; bottom: -140px; border-color: rgba(243, 238, 228, 0.1); } .login-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; } .login-hero-top .brand-mark { width: 34px; height: 34px; border-radius: 0; } .login-hero-top .brand-name { color: #f6f3ea; font-size: 1.15rem; } .login-hero-copy { position: relative; z-index: 1; } .login-hero-copy h1 { font-family: var(--font-display); color: #ffffff; font-size: 2.1rem; font-weight: 600; line-height: 1.15; margin-bottom: 10px; } .login-hero-copy p { color: #b9c4bd; font-size: 0.95rem; max-width: 30ch; margin: 0; } .login-card-wrap { margin-top: -70px; margin-right: 6%; position: relative; z-index: 2; display: flex; justify-content: flex-end; } @media (max-width: 900px) { .login-card-wrap { margin-top: 24px; margin-right: 0; justify-content: center; } .login-hero { padding: 36px 28px; min-height: unset; } } .login-card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-soft); padding: 2.25rem; width: 100%; max-width: 380px; box-shadow: 0 18px 44px rgba(24, 43, 39, 0.16); } .login-card h4 { font-family: var(--font-display); font-weight: 600; } .login-vendor-credit { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); text-align: center; } .login-vendor-credit img { max-height: 18px; } .login-footer-credit { text-align: center; color: var(--text-muted); font-size: 0.78rem; margin-top: 20px; } .site-footer { padding: 14px 28px 20px; font-size: 0.75rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .site-footer img { max-height: 16px; } /* ---------- Cards / KPIs ---------- */ .card { border-radius: var(--radius-md); border: 1px solid var(--border-soft); box-shadow: none; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--kpi-accent, var(--brand-accent)); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 4px; height: 100%; } .kpi-card .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; } .kpi-card .kpi-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); } .kpi-card .kpi-value { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--text-main); line-height: 1.1; } .kpi-card .kpi-sub { font-size: 0.8rem; color: var(--text-muted); } .kpi-icon { width: 30px; height: 30px; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; background: transparent; } /* Each widget's registry color now just sets one accent variable, read by the card's left border and the icon glyph - a quiet ledger-tab marker instead of a filled pastel chip behind every icon. */ .kpi-icon.bg-purple { color: #7c6a9c; } .kpi-icon.bg-blue { color: #3d6a8a; } .kpi-icon.bg-green { color: #4a7c59; } .kpi-icon.bg-amber { color: #a87a2e; } .kpi-icon.bg-teal { color: #3e7d6e; } .kpi-icon.bg-pink { color: #a05270; } .kpi-icon.bg-red { color: #a94a3d; } .kpi-icon.bg-cyan { color: #3d7a86; } .kpi-card.bg-purple { --kpi-accent: #7c6a9c; } .kpi-card.bg-blue { --kpi-accent: #3d6a8a; } .kpi-card.bg-green { --kpi-accent: #4a7c59; } .kpi-card.bg-amber { --kpi-accent: #a87a2e; } .kpi-card.bg-teal { --kpi-accent: #3e7d6e; } .kpi-card.bg-pink { --kpi-accent: #a05270; } .kpi-card.bg-red { --kpi-accent: #a94a3d; } .kpi-card.bg-cyan { --kpi-accent: #3d7a86; } :root[data-theme="dark"] .kpi-icon.bg-purple { color: #b8a9d6; } :root[data-theme="dark"] .kpi-icon.bg-blue { color: #9cc0dc; } :root[data-theme="dark"] .kpi-icon.bg-green { color: #a3cbb0; } :root[data-theme="dark"] .kpi-icon.bg-amber { color: #e0b263; } :root[data-theme="dark"] .kpi-icon.bg-teal { color: #7fc4b2; } :root[data-theme="dark"] .kpi-icon.bg-pink { color: #dd9cb6; } :root[data-theme="dark"] .kpi-icon.bg-red { color: #e29089; } :root[data-theme="dark"] .kpi-icon.bg-cyan { color: #83c3d0; } /* ---------- Room cards ---------- */ .room-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 10px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.1s ease; min-width: 82px; } .room-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .room-card .room-card-number { font-weight: 700; font-size: 0.95rem; } .room-card.occupied { border-left: 4px solid var(--brand-gold); } .room-card.vacant { border-left: 4px solid #2e7d32; } .room-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; } .guest-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; } /* ---------- Command palette (Ctrl/Cmd+K) & global search ---------- */ #cmdkModal .modal-dialog { max-width: 600px; margin-top: 10vh; } #cmdkModal .modal-content { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; } #cmdkInput { border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: var(--bg-card); color: var(--text-main); font-size: 1.05rem; padding: 16px 18px; } #cmdkInput:focus { box-shadow: none; background: var(--bg-card); color: var(--text-main); } #cmdkResults { max-height: 55vh; overflow-y: auto; padding: 6px; } .cmdk-group-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 10px 2px; } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 0; cursor: pointer; color: var(--text-main); text-decoration: none; } .cmdk-item:hover, .cmdk-item.active { background: var(--bg-page); color: var(--text-main); } .cmdk-item i { color: var(--text-muted); width: 18px; text-align: center; } .cmdk-item .cmdk-sub { font-size: 0.76rem; color: var(--text-muted); } .cmdk-empty { padding: 24px 10px; text-align: center; color: var(--text-muted); font-size: 0.88rem; } .topbar-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 420px; overflow-y: auto; z-index: 1060; padding: 6px; display: none; } .topbar-search-results.show { display: block; } /* ---------- Buttons ---------- */ .btn-primary { background-color: var(--brand-accent); border-color: var(--brand-accent); } .btn-primary:hover { filter: brightness(0.9); background-color: var(--brand-accent); border-color: var(--brand-accent); } .btn-outline-primary { color: var(--brand-accent); border-color: var(--brand-accent); } .btn-outline-primary:hover { background-color: var(--brand-accent); border-color: var(--brand-accent); } /* ---------- Admin portal tiles (still used by Reports home) ---------- */ .admin-tile { display: block; padding: 1.1rem 1.3rem; border-radius: var(--radius-md); background: var(--bg-card); text-decoration: none; color: var(--text-main); border: 1px solid var(--border-soft); transition: border-color 0.15s ease; } .admin-tile:hover { border-color: var(--brand-accent); color: var(--text-main); } .admin-tile i { color: var(--brand-accent); } .admin-section-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); margin: 1.75rem 0 0.75rem; } .admin-section-label:first-of-type { margin-top: 0.5rem; } /* Admin panel now reuses the single global sidebar (see base.html's sidebar_nav/sidebar_footer blocks, overridden in admin/_shell.html) instead of nesting a second left rail inside the content area. */ /* ---------- Forms: consistent spacing so grouped fields read as one section rather than a cluster of same-sized boxes ---------- */ .card-header { background: transparent; border-bottom: 1px solid var(--border-soft); padding: 0.85rem 1.5rem; font-weight: 600; font-size: 0.92rem; color: var(--text-main); } .card-body { padding: 1.4rem 1.5rem; } form .row.g-3, form .row.g-2 { --bs-gutter-y: 1.15rem; } .form-label { font-size: 0.82rem; font-weight: 550; color: var(--text-muted); margin-bottom: 0.35rem; } .form-control, .form-select { padding: 0.5rem 0.75rem; border-color: var(--input-border); font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 16%, transparent); } .form-control-sm, .form-select-sm { padding: 0.32rem 0.6rem; } /* ---------- Comments & replies: step/thread layout ---------- Each comment is its own bordered card; replies nest underneath as a connected vertical sequence of steps rather than a cramped indented blob, so a busy stay's comment history stays easy to scan and tell apart while replying back and forth. */ .comment-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1rem 1.15rem; margin-bottom: 0.85rem; } .comment-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; } .comment-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .comment-card-text { font-size: 0.92rem; margin-bottom: 4px; } .comment-card-meta { font-size: 0.78rem; color: var(--text-muted); } .comment-replies { margin-top: 0.75rem; padding-left: 0.9rem; border-left: 2px solid var(--border-soft); display: flex; flex-direction: column; gap: 0.6rem; } .reply-step { position: relative; background: var(--bg-page); border: 1px solid var(--border-soft); border-radius: 0; padding: 0.55rem 0.75rem; font-size: 0.85rem; } .reply-step::before { content: ""; position: absolute; left: -1.24rem; top: 1.05rem; width: 8px; height: 2px; background: var(--border-soft); } .reply-step-meta { color: var(--text-muted); font-size: 0.76rem; margin-bottom: 2px; } .reply-form-row { display: flex; gap: 6px; margin-top: 0.6rem; } /* ---------- Card / table view toggle (My Incidents) ---------- */ .view-toggle { display: inline-flex; border: 1px solid var(--border-soft); border-radius: 0; overflow: hidden; } .view-toggle button { border: none; background: var(--bg-card); color: var(--text-muted); padding: 6px 12px; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; cursor: pointer; } .view-toggle button + button { border-left: 1px solid var(--border-soft); } .view-toggle button.active { background: var(--bg-page); color: var(--brand-accent); font-weight: 600; } .incident-table-row-open td:first-child { box-shadow: inset 3px 0 0 #a94a3d; } .incident-table-row-in_progress td:first-child { box-shadow: inset 3px 0 0 #a87a2e; } .incident-table-row-resolved td:first-child { box-shadow: inset 3px 0 0 #4a7c59; } /* ---------- Misc ---------- */ .user-avatar-circle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--brand-accent); color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; overflow: hidden; } .user-avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .circular-photo { border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-gold); } .incident-card { border-left: 5px solid #adb5bd; } .incident-card.incident-open { border-left-color: #dc3545; background-color: var(--status-danger-bg); } .incident-card.incident-in_progress { border-left-color: #ffc107; background-color: var(--status-warning-bg); } .incident-card.incident-resolved { border-left-color: #198754; background-color: var(--status-success-bg); } .special-request-photo { max-width: 220px; max-height: 160px; object-fit: cover; border-radius: 0; border: 1px solid var(--border-soft); } .attention-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .attention-list-item:last-child { border-bottom: none; } .attention-list-item:hover { background: var(--bg-page); } .attention-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--brand-accent); } @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } .sidebar.open { transform: translateX(0); } .topbar-search { display: none; } .page-content { padding: 18px 16px 32px; } } .sidebar-toggle-btn { border: none; background: transparent; font-size: 1.4rem; color: var(--text-main); line-height: 1; padding: 4px 6px; } .sidebar-backdrop { display: none; } @media (max-width: 900px) { .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 45; } } /* Needs Your Attention panel on the dashboard: capped to match the height of the charts + GSA-detail column beside it (see dashboard.html), with its own visible scrollbar rather than growing the page. */ .attention-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } .attention-scroll::-webkit-scrollbar { width: 6px; } .attention-scroll::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 0; } .attention-scroll::-webkit-scrollbar-track { background: transparent; }