/* ===================================================================== PATAS — Design system (minimalist "Linear/Vercel" + light & dark) --------------------------------------------------------------------- Loaded LAST (after vendor.css + app.css). Overrides the legacy maroon / green / teal states baked into the static app.css build and layers a clean, token-driven, dual-theme skin on top of Bootstrap 4. How theming works ----------------- • Every colour is a CSS custom property (a "token"). • :root holds the LIGHT theme. html[data-theme="dark"] re-declares the PRIMITIVE tokens; semantic aliases resolve through them automatically. • The active theme is set on by an early inline script (partials/pwa-head) so there is no flash of the wrong theme. • Legacy variable names used by inline blade styles (--brand, --ink, --line, --muted, --radius-lg, --shadow-sm, --brand-tint-2, …) are kept and made theme-aware, so older markup flips automatically. ===================================================================== */ /* --------------------------------------------------------------------- 0. Typeface — self-hosted Inter (variable). Falls back to the system stack offline / on the first paint before the font loads. --------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../webfonts/InterVariable.woff2?v=4.1') format('woff2'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../webfonts/InterVariable-Italic.woff2?v=4.1') format('woff2'); } /* ===================================================================== 1. DESIGN TOKENS — LIGHT (default) ===================================================================== */ :root { /* Brand (cyan) — the single accent, used sparingly */ --brand: #18c1db; --brand-hover: #12aac2; --brand-active: #0f8ba0; --brand-rgb: 24, 193, 219; --brand-strong: #0e7490; /* accessible cyan for text/links on light */ --brand-strong-hover:#0b5e75; --brand-tint: #e9f9fc; /* subtle cyan wash (active nav, hovers) */ --brand-tint-2: #d3f3f8; --on-brand: #ffffff; --brand-focus: rgba(24, 193, 219, .45); --brand-focus-soft: rgba(24, 193, 219, .22); /* Neutral surfaces */ --page-bg: #f6f7f9; /* app background (content gutter) */ --surface: #ffffff; /* cards, navbar, sidebar */ --surface-raised: #ffffff; /* dropdowns / modals / popovers */ --surface-sunken: #f1f3f5; /* insets, code, muted chips */ --card-bg: #ffffff; --popover-bg: #ffffff; --rail-bg: #fafbfc; /* conversation lists, secondary rails */ /* Borders */ --border: #e7e9ee; --border-strong: #d6dae1; /* Text */ --text: #1a1d23; --heading: #111318; --text-muted: #5c6570; --text-faint: #99a2ac; /* Form controls */ --input-bg: #ffffff; --input-border: #dcdfe6; --input-focus: var(--brand); --input-placeholder:#7c8590; /* Chat bubbles (shared by widget + messenger + forum) */ --bubble-me-bg: var(--brand); --bubble-me-text: #ffffff; --bubble-them-bg: #f1f3f5; --bubble-them-text: #1a1d23; /* Semantic status (theme-aware tints) */ --success: #12a150; --success-bg: #e7f7ee; --success-text: #0b7a3b; --danger: #e5484d; --danger-bg: #fdeaea; --danger-text: #c02a2f; --warning: #e8930c; --warning-bg: #fdf3e2; --warning-text: #97600d; --info: #18c1db; --info-bg: #e9f9fc; --info-text: #0e7490; --highlight: #fff3cd; /* row-flash / new-item pulse */ /* Agenda kinds — alias existing semantic tokens (which already have dark variants), so these flip automatically in dark mode. */ --agenda-public: var(--info); --agenda-public-bg: var(--info-bg); --agenda-public-text: var(--info-text); --agenda-private: var(--warning); --agenda-private-bg: var(--warning-bg); --agenda-private-text: var(--warning-text); /* Elevation — restrained; cards lean on borders, not shadow */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 3px rgba(17, 24, 39, .06); --shadow-md: 0 4px 16px rgba(17, 24, 39, .08); --shadow-lg: 0 18px 48px rgba(17, 24, 39, .16); /* Radius & scrollbars */ --radius: .6rem; --radius-sm: .4rem; --radius-lg: .85rem; --radius-pill: 2em; --scrollbar-thumb: #cdd3db; --scrollbar-track: transparent; /* Chrome: navbar */ --navbar-bg: #ffffff; --navbar-border: var(--border); --navbar-fg: #1a1d23; /* Chrome: sidebar (light in the light theme — Vercel/Linear feel) */ --sidebar-bg: #ffffff; --sidebar-border: var(--border); --sidebar-fg: #4a535f; --sidebar-fg-strong: #14181f; --sidebar-icon: #8b95a1; --sidebar-icon-active:var(--brand-strong); --sidebar-active-bg: var(--brand-tint); --sidebar-active-fg: var(--brand-strong); --sidebar-hover-bg: #f3f5f7; /* Legacy aliases (kept theme-aware for inline blade markup) */ --ink: var(--text); --muted: var(--text-muted); --line: var(--border); --slate: #12313a; --slate-2: #103f4c; } /* ===================================================================== 1b. DESIGN TOKENS — DARK Only PRIMITIVE tokens are re-declared; semantic aliases inherit. ===================================================================== */ html[data-theme="dark"] { --brand: #18c1db; --brand-hover: #3dd2e8; --brand-active: #59d8ea; --brand-strong: #4fd4e8; /* light cyan text/links on dark */ --brand-strong-hover:#7ee0f0; --brand-tint: rgba(24, 193, 219, .14); --brand-tint-2: rgba(24, 193, 219, .22); --on-brand: #ffffff; --brand-focus: rgba(24, 193, 219, .55); --brand-focus-soft: rgba(24, 193, 219, .30); --page-bg: #0d0f13; --surface: #16191f; --surface-raised: #1c1f27; --surface-sunken: #101318; --card-bg: #16191f; --popover-bg: #1c1f27; --rail-bg: #121419; --border: #282c34; --border-strong: #3a3f49; --text: #e6e8ec; --heading: #f3f5f8; --text-muted: #9aa2ad; --text-faint: #6b727d; --input-bg: #1a1d24; --input-border: #333844; --input-placeholder:#6b727d; --bubble-me-bg: var(--brand); --bubble-me-text: #ffffff; --bubble-them-bg: #242832; --bubble-them-text: #e6e8ec; --success:#3fb950; --success-bg: rgba(63,185,80,.14); --success-text:#56d364; --danger: #f0686d; --danger-bg: rgba(240,104,109,.15);--danger-text: #ff8085; --warning:#e3a008; --warning-bg: rgba(227,160,8,.15); --warning-text:#e3b341; --info: #18c1db; --info-bg: rgba(24,193,219,.14); --info-text: #4fd4e8; --highlight: rgba(255, 214, 102, .16); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 20px 50px rgba(0,0,0,.6); --scrollbar-thumb: #3a3f49; --navbar-bg: #121419; --navbar-border: #22262e; --navbar-fg: #e6e8ec; --sidebar-bg: #101318; --sidebar-border: #22262e; --sidebar-fg: #a7aeb9; --sidebar-fg-strong: #f3f5f8; --sidebar-icon: #7a828d; --sidebar-icon-active:var(--brand); --sidebar-active-bg: rgba(24, 193, 219, .16); --sidebar-active-fg: #7ee0f0; --sidebar-hover-bg: rgba(255, 255, 255, .045); color-scheme: dark; } /* ===================================================================== 2. GLOBAL BASE ===================================================================== */ html { -webkit-text-size-adjust: 100%; } body, .container { min-width: 0 !important; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text); background-color: var(--page-bg); letter-spacing: -0.006em; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--heading); letter-spacing: -0.018em; font-weight: 700; } /* Smooth, non-janky theme cross-fade (only the surfaces that recolour). */ body, .card, .card-header, .card-footer, .sidebar, .navbar.fixed-top, .dropdown-menu, .modal-content, .list-group-item, .table, .form-control, .custom-select, .nav-tabs, .alert { transition: background-color .22s ease, border-color .22s ease, color .22s ease; } /* Custom scrollbars (subtle, theme-aware) */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; } /* ===================================================================== 3. BRAND RECOLOUR — every Bootstrap *-primary group → cyan. custom.css loads after app.css, so equal-specificity + !important wins. ===================================================================== */ .btn-primary { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; } .btn-primary:hover { background-color: var(--brand-hover) !important; border-color: var(--brand-hover) !important; color: var(--on-brand) !important; } .btn-primary.focus, .btn-primary:focus { box-shadow: 0 0 0 .2rem var(--brand-focus) !important; } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--brand) !important; border-color: var(--brand) !important; } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background-color: var(--brand-active) !important; border-color: var(--brand-active) !important; color: var(--on-brand) !important; } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem var(--brand-focus) !important; } .btn.focus, .btn:focus { box-shadow: 0 0 0 .2rem var(--brand-focus-soft) !important; } .btn-outline-primary { color: var(--brand-strong) !important; border-color: var(--brand) !important; } .btn-outline-primary:hover { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; } .btn-outline-primary.focus, .btn-outline-primary:focus { box-shadow: 0 0 0 .2rem var(--brand-focus) !important; } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--brand-strong) !important; background-color: transparent !important; } .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; } .btn-link { color: var(--brand-strong) !important; } .btn-link:hover { color: var(--brand-strong-hover) !important; } .bg-primary { background-color: var(--brand) !important; } a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: var(--brand-hover) !important; } .text-primary { color: var(--brand-strong) !important; } a.text-primary:focus, a.text-primary:hover { color: var(--brand-strong-hover) !important; } .border-primary { border-color: var(--brand) !important; } .badge-primary { background-color: var(--brand) !important; color: var(--on-brand) !important; } .badge-primary[href]:focus, .badge-primary[href]:hover { background-color: var(--brand-hover) !important; } .alert-primary { color: var(--info-text) !important; background-color: var(--info-bg) !important; border-color: transparent !important; } .alert-primary .alert-link { color: var(--brand-strong-hover) !important; } .list-group-item-primary { color: var(--info-text) !important; background-color: var(--brand-tint-2) !important; } .list-group-item.active { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; } a { color: var(--brand-strong); } a:hover { color: var(--brand-strong-hover); } .page-link { color: var(--brand-strong); background-color: var(--surface); border-color: var(--border); } .page-link:hover { color: var(--brand-strong-hover); background-color: var(--surface-sunken); border-color: var(--border); } .page-link:focus { box-shadow: 0 0 0 .2rem var(--brand-focus-soft) !important; } .page-item.active .page-link { background-color: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; } .page-item.disabled .page-link { background-color: var(--surface); border-color: var(--border); color: var(--text-faint); } /* Form focus + custom controls */ .form-control:focus, .custom-select:focus { border-color: var(--input-focus) !important; box-shadow: 0 0 0 .2rem var(--brand-focus-soft) !important; } .custom-file-input:focus ~ .custom-file-label { border-color: var(--brand) !important; box-shadow: 0 0 0 .2rem var(--brand-focus-soft) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand) !important; border-color: var(--brand) !important; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 1px var(--surface), 0 0 0 .2rem var(--brand-focus-soft) !important; } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--brand) !important; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand) !important; } .custom-range::-webkit-slider-thumb { background-color: var(--brand) !important; } .custom-range::-moz-range-thumb { background-color: var(--brand) !important; } .custom-range::-ms-thumb { background-color: var(--brand) !important; } .switch input:checked + label::before { background-color: var(--brand) !important; } .switch input:focus + label::before { box-shadow: 0 0 0 .2rem var(--brand-focus-soft) !important; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--brand) !important; color: var(--on-brand) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--brand-strong) !important; border-bottom-color: var(--brand) !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--brand) !important; color: var(--on-brand) !important; } .progress-bar { background-color: var(--brand) !important; } .datepicker thead th.datepicker-switch:hover, .datepicker thead th.next:hover, .datepicker thead th.prev:hover { background: var(--brand) !important; color: var(--on-brand) !important; } .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover, .datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover, .datepicker tbody tr > td span.month.active, .datepicker tbody tr > td span.year.active { background-color: var(--brand) !important; background-image: none !important; color: var(--on-brand) !important; } .avatar-source div:hover, .avatar-source img:hover { border: 2px solid var(--brand) !important; } /* ===================================================================== 4. COMPONENTS — minimalist (borders over shadows, calm surfaces) ===================================================================== */ .card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background-color: var(--card-bg); color: var(--text); } .card + .card { margin-top: 1rem; } .card .card-header { background-color: transparent; border-bottom: 1px solid var(--border); color: var(--heading); font-weight: 700; padding: 1rem 1.25rem; } .card .card-footer { background-color: transparent; border-top: 1px solid var(--border); } .card .card-body { padding: 1.25rem 1.5rem; } .card .card-title { font-weight: 700; color: var(--heading); } .btn { border-radius: var(--radius); font-weight: 600; letter-spacing: -0.01em; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease; } .btn:active { transform: translateY(1px); } .btn-rounded { border-radius: var(--radius-pill); } .btn-sm { border-radius: var(--radius-sm); } .btn-lg { border-radius: var(--radius); } /* Neutral / secondary buttons flip cleanly in dark */ .btn-light, .btn-outline-secondary, .btn-default { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-light:hover, .btn-outline-secondary:hover, .btn-default:hover { background-color: var(--surface-sunken); border-color: var(--border-strong); color: var(--text); } /* Secondary = neutral surface button (Bootstrap's solid grey fails on dark). */ .btn-secondary { background-color: var(--surface-sunken); border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:focus { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .form-control, .custom-select, .input-solid { border-radius: var(--radius); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, background-color .22s ease; } .form-control:disabled, .form-control[readonly] { background-color: var(--surface-sunken); } .input-solid { background-color: var(--surface-sunken); } .form-control::placeholder { color: var(--input-placeholder); } .custom-select { background-color: var(--input-bg); } .input-group-text { background-color: var(--surface-sunken); border-color: var(--input-border); color: var(--text-muted); } .custom-file-label { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); } .custom-file-label::after { background-color: var(--surface-sunken); color: var(--text); } label { font-weight: 600; color: var(--text); } .form-text, small.text-muted { color: var(--text-muted) !important; } .table { color: var(--text); } .table thead th { border-top: 0; border-bottom: 1px solid var(--border); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .table td, .table th { vertical-align: middle; border-top: 1px solid var(--border); } .table-hover tbody tr:hover, .table-striped tbody tr:hover { background-color: var(--brand-tint); color: var(--text); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-sunken); } .table-responsive { border-radius: var(--radius); } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border); } .alert { border-radius: var(--radius); border: 1px solid transparent; } .alert-success { color: var(--success-text); background-color: var(--success-bg); border-color: transparent; } .alert-danger { color: var(--danger-text); background-color: var(--danger-bg); border-color: transparent; } .alert-warning { color: var(--warning-text); background-color: var(--warning-bg); border-color: transparent; } .alert-info { color: var(--info-text); background-color: var(--info-bg); border-color: transparent; } .alert-secondary, .alert-light { color: var(--text); background-color: var(--surface-sunken); border-color: var(--border); } .badge { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .01em; } .badge-pill { border-radius: var(--radius-pill); } .badge-success { background-color: var(--success-bg); color: var(--success-text); } .badge-danger { background-color: var(--danger-bg); color: var(--danger-text); } .badge-warning { background-color: var(--warning-bg); color: var(--warning-text); } .badge-info { background-color: var(--info-bg); color: var(--info-text); } .badge-light { background-color: var(--surface-sunken); color: var(--text-muted); } .badge-secondary { background-color: var(--surface-sunken); color: var(--text-muted); } .modal-content { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background-color: var(--surface-raised); color: var(--text); } .modal-header, .modal-footer { border-color: var(--border); } .modal-title { color: var(--heading); } .close { color: var(--text); text-shadow: none; opacity: .6; } .close:hover { color: var(--text); opacity: 1; } .dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); background-color: var(--surface-raised); color: var(--text); padding: .35rem; } .dropdown-item { color: var(--text); border-radius: var(--radius-sm); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-sunken); color: var(--text); } .dropdown-divider { border-color: var(--border); } .dropdown-header { color: var(--text-muted); } .list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--surface-sunken); color: var(--text); } /* Tabs — minimalist underline style (drops Bootstrap's boxy light borders, so nothing leaks light in dark and the active tab reads as a clean underline). */ .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { color: var(--text-muted); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--text); border-color: transparent transparent var(--border-strong); } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--brand-strong) !important; background-color: transparent; border: 0; border-bottom: 2px solid var(--brand) !important; font-weight: 600; } /* Contextual table rows + list-group items → theme-aware tints (both modes). */ .table-success, .table-success > td, .table-success > th { background-color: var(--success-bg); color: var(--success-text); } .table-danger, .table-danger > td, .table-danger > th { background-color: var(--danger-bg); color: var(--danger-text); } .table-warning, .table-warning > td, .table-warning > th { background-color: var(--warning-bg); color: var(--warning-text); } .table-info, .table-info > td, .table-info > th { background-color: var(--info-bg); color: var(--info-text); } .table-active, .table-active > td, .table-active > th { background-color: var(--surface-sunken); } .list-group-item-success { color: var(--success-text); background-color: var(--success-bg); } .list-group-item-danger { color: var(--danger-text); background-color: var(--danger-bg); } .list-group-item-warning { color: var(--warning-text); background-color: var(--warning-bg); } .list-group-item-info { color: var(--info-text); background-color: var(--info-bg); } .jumbotron { background-color: var(--surface-sunken); color: var(--text); } .breadcrumb { background-color: transparent; padding-left: 0; padding-right: 0; } .breadcrumb-item, .breadcrumb-item a { color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-faint); } .popover { background-color: var(--popover-bg); border-color: var(--border); box-shadow: var(--shadow-md); color: var(--text); } .popover .popover-body { color: var(--text); } .tooltip-inner { background-color: #111318; } hr { border-top-color: var(--border); } code { color: var(--brand-strong); background-color: var(--surface-sunken); border-radius: var(--radius-sm); padding: .1em .35em; } pre { color: var(--text); } kbd { background-color: var(--surface-sunken); color: var(--text); } /* Common surface / text utilities that must flip in dark */ .bg-white { background-color: var(--surface) !important; } .bg-light { background-color: var(--surface-sunken) !important; } .bg-body { background-color: var(--page-bg) !important; } .text-dark { color: var(--text) !important; } .text-body { color: var(--text) !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-muted) !important; } .text-black-50 { color: var(--text-muted) !important; } .text-black-100, .text-gray-900 { color: var(--text) !important; } .border { border-color: var(--border) !important; } .border-top { border-top-color: var(--border) !important; } .border-bottom { border-bottom-color: var(--border) !important; } .border-left { border-left-color: var(--border) !important; } .border-right { border-right-color: var(--border) !important; } .text-success { color: var(--success-text) !important; } .text-danger { color: var(--danger-text) !important; } .text-warning { color: var(--warning-text) !important; } .text-info { color: var(--info-text) !important; } .img-thumbnail { background-color: var(--surface); border-color: var(--border); } .progress { background-color: var(--surface-sunken); } /* ===================================================================== 5. NAVBAR (top bar) — clean white, hairline bottom border ===================================================================== */ .navbar.fixed-top { background: var(--navbar-bg) !important; border-top: 0 !important; border-bottom: 1px solid var(--navbar-border) !important; box-shadow: none; height: 70px !important; } /* app.css paints the .navbar-collapse wrapper (#top-navigation) white; let it inherit the bar's surface so the header area matches the navbar in dark mode. */ .navbar.fixed-top .navbar-collapse { background: transparent; } .navbar .page-header { color: var(--heading); font-weight: 700; letter-spacing: -0.02em; } .navbar .breadcrumb { margin-bottom: 0; } .navbar .nav-link { color: var(--navbar-fg); } .navbar-brand-wrapper { height: 69px !important; background: transparent; } .navbar-brand-wrapper .logo-lg { height: 48px !important; width: auto; } [role="main"] { padding-top: 78px !important; padding-bottom: 1.5rem; } /* Navbar icon buttons (bell, install, theme, avatar) share one calm style */ .navbar .navbar-nav .nav-link, .navbar #theme-toggle, .navbar #pwa-install-btn { color: var(--text-muted); } .navbar .navbar-nav .nav-link:hover, .navbar #theme-toggle:hover { color: var(--text); } #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: transparent; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; } #theme-toggle:hover { background: var(--surface-sunken); } #theme-toggle i { font-size: 1.05rem; } .navbar-nav .nav-item.dropdown .rounded-circle.img-thumbnail { padding: 2px; } /* ===================================================================== 6. SIDEBAR — light rail (light theme) / dark rail (dark theme) ===================================================================== */ .sidebar { background: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border); } .sidebar .nav-link { color: var(--sidebar-fg) !important; border-radius: var(--radius); margin: 2px .5rem; padding: .6rem .85rem; font-weight: 500; transition: background-color .15s ease, color .15s ease; } .sidebar .nav-link:hover { color: var(--sidebar-fg-strong) !important; background: var(--sidebar-hover-bg) !important; } .sidebar .nav-link.active { color: var(--sidebar-active-fg) !important; background: var(--sidebar-active-bg) !important; font-weight: 600; position: relative; } .sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 60%; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); } .sidebar .nav-link i { color: var(--sidebar-icon); width: 1.2rem; text-align: center; } .sidebar .nav-link.active i, .sidebar .nav-link:hover i { color: var(--sidebar-icon-active); } .sidebar .sub-menu .nav-link { font-size: .85rem; padding-left: 2.6rem; } .sidebar .sub-menu .nav-link.active::before { display: none; } .sidebar .user-box { border-bottom: 1px solid var(--sidebar-border); } .sidebar .user-box h5 a, .sidebar .user-box ul li a { color: var(--sidebar-fg-strong) !important; } .sidebar .user-box h5 a:hover, .sidebar .user-box ul li a:hover { color: var(--brand-strong) !important; } .sidebar .user-box .user-img img { border-color: var(--sidebar-border) !important; background: var(--surface); } /* Single scrollbar + correct height (keep the app.css double-scrollbar fix). */ .sidebar { overflow-y: auto !important; height: auto !important; } .sidebar .sidebar-sticky { height: auto !important; overflow: visible !important; } .sidebar-collapsed .sidebar { overflow: visible !important; } .sidebar-collapsed .sidebar .sidebar-sticky { overflow: visible !important; } /* ===================================================================== 6b. COLLAPSIBLE SIDEBAR (desktop icon-rail) ===================================================================== */ .content-page { transition: margin-left .3s ease; } @media (min-width: 992px) { #sidebar-toggle { display: inline-flex !important; align-items: center; justify-content: center; margin: .35rem .25rem 0 .75rem; padding: .4rem .55rem; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; transition: background-color .15s ease; } #sidebar-toggle:hover { background: var(--surface-sunken); } #sidebar-toggle i { color: var(--text-muted); font-size: 1.15rem; } } .sidebar-collapsed .sidebar .nav-link { margin-left: 0 !important; margin-right: 0 !important; } .sidebar-collapsed .sidebar .nav-link.active::before { display: none; } .sidebar-collapsed .sidebar li:hover, .sidebar-collapsed .sidebar li:hover > a, .sidebar-collapsed .sidebar li:hover ul { background-color: var(--sidebar-hover-bg) !important; } .sidebar-collapsed .sidebar li:hover ul { box-shadow: var(--shadow-md); border: 1px solid var(--border); } .sidebar-collapsed .sidebar .nav-link.active { background: var(--sidebar-active-bg) !important; } /* ===================================================================== 7. MOBILE-FIRST: off-canvas drawer (<992px) ===================================================================== */ @media (max-width: 991.98px) { .sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: 270px; min-width: 270px; max-width: 85vw; height: 100% !important; z-index: 1045; margin-left: -290px; transition: margin-left .3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top); } .sidebar.expanded { margin-left: 0 !important; box-shadow: var(--shadow-lg); } .content-page { margin-left: 0 !important; } [role="main"] { padding-top: 76px; } .navbar.fixed-top { height: 64px !important; justify-content: center !important; } .navbar-brand-wrapper { width: auto !important; height: 63px !important; padding-left: .75rem; padding-right: .75rem; } .navbar-brand-wrapper .logo-lg { display: none !important; } .navbar-brand-wrapper .logo-sm { display: inline-block !important; height: 44px !important; width: auto; } .navbar.fixed-top > div:not(.navbar-brand-wrapper):not(.collapse) { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: .15rem; } .navbar .page-header { font-size: 1rem; } .navbar .navbar-toggler { margin: 0 !important; padding: .4rem .55rem; border: 0 !important; border-radius: var(--radius); -webkit-tap-highlight-color: transparent; } .navbar .navbar-toggler:focus { outline: 0; box-shadow: none; } .navbar .navbar-toggler i { font-size: 1.25rem; color: var(--text-muted) !important; } .navbar .navbar-toggler:active { background: var(--surface-sunken); } .navbar .breadcrumb { display: none !important; } .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 1044; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .mobile-nav-backdrop.show { opacity: 1; visibility: visible; } body.mobile-nav-open { overflow: hidden; } body.mobile-nav-open .cowork-chat-launcher, body.mobile-nav-open .cowork-chat-panel, body.mobile-nav-open #catatan-float-layer { z-index: 1043 !important; } } /* ===================================================================== 7b. MOBILE-PORTRAIT BACK BUTTON ===================================================================== */ #mobile-back-btn { display: none; } @media (max-width: 991.98px) and (orientation: portrait) { #mobile-back-btn { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-sunken); color: var(--brand-strong); box-shadow: var(--shadow-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; } #mobile-back-btn i { color: var(--brand-strong); font-size: 1.05rem; line-height: 1; } #mobile-back-btn:hover { background: var(--brand-tint); } #mobile-back-btn:active { background: var(--brand-tint-2); transform: translateY(-50%) scale(.92); } } /* ===================================================================== 8. THEME TOGGLE — floating variant (pages without a navbar: auth, etc.) ===================================================================== */ .theme-toggle-float { position: fixed; top: 1rem; right: 1rem; z-index: 1050; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .05s ease; } .theme-toggle-float:hover { color: var(--text); background: var(--surface-sunken); } .theme-toggle-float:active { transform: scale(.94); } .theme-toggle-float i { font-size: 1.05rem; } /* Toggle glyph follows the theme in pure CSS (markup stays fa-moon), so the first paint is already correct — no moon→sun flash before JS runs. Light = moon (click to go dark); dark = sun (click to go light). */ html[data-theme="dark"] [data-theme-icon]::before { content: "\f185"; } /* ===================================================================== 9. DARK-THEME — surfaces the base app.css hardcodes light. Tokens already cover most components above; these catch app.css spots that set explicit light colours the token rules don't reach. ===================================================================== */ html[data-theme="dark"] body { background-color: var(--page-bg); color: var(--text); } html[data-theme="dark"] .content-page, html[data-theme="dark"] .container-fluid { background-color: transparent; } html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .popover { background-color: var(--card-bg); } html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .modal-content { background-color: var(--surface-raised); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] textarea.form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); } html[data-theme="dark"] .form-control:focus { background-color: var(--input-bg); color: var(--text); } /* Any leftover pure-white / near-white utility backgrounds in dark. */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; } /* Bootstrap "light" table/well/thumbnail leftovers. */ html[data-theme="dark"] .table { color: var(--text); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--border); } html[data-theme="dark"] .thead-light th { background-color: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); } /* Avatar thumbnails: soften the bright white ring. */ html[data-theme="dark"] .img-thumbnail { background-color: var(--surface); border-color: var(--border); } /* Unchecked checkbox / radio / switch box (app.css hardcodes #dee2e6 → a pale box on dark). Recolour the track; the switch knob (::after) stays light. */ html[data-theme="dark"] .custom-control-label::before { background-color: var(--input-bg); border-color: var(--input-border); } html[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before, html[data-theme="dark"] .custom-control-input[disabled] ~ .custom-control-label::before { background-color: var(--surface-sunken); } /* Custom-select chevron: Bootstrap embeds a dark (#343a40) SVG arrow that vanishes on a dark field — swap it for a light-stroke one. */ html[data-theme="dark"] .custom-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%239aa2ad' d='M2 0L0 2h4zm0 3L0 5h4z'/%3e%3c/svg%3e"); } /* Popover arrow (app.css hardcodes the inner arrow to #fff → white triangle). */ html[data-theme="dark"] .bs-popover-top > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--popover-bg); } html[data-theme="dark"] .bs-popover-right > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--popover-bg); } html[data-theme="dark"] .bs-popover-bottom > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--popover-bg); } html[data-theme="dark"] .bs-popover-left > .arrow::after, html[data-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--popover-bg); } /* Focus visibility for keyboard users (both themes). */ .btn:focus-visible, a:focus-visible, .form-control:focus-visible, .dropdown-item:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 1px; } /* ===================================================================== 10. JS-INJECTED MENUS — coloured here (not inline in JS) so they follow the theme. The forum @mention typeahead builds items with an inline background:transparent, hence !important on the highlight below. ===================================================================== */ #forum-mention-menu { background: var(--popover-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--text); } #forum-mention-menu .fm-item { color: var(--text); } #forum-mention-menu .fm-item:hover, #forum-mention-menu .fm-item.active { background: var(--surface-sunken) !important; } /* Lencana ID pengguna di forum — hanya dirender untuk moderator, dipakai untuk membedakan dua penulis bernama sama. Sengaja kecil dan pudar agar tidak mengganggu bacaan. */ .forum-author-id { font-size: .72em; line-height: 1.4; padding: .1em .4em; vertical-align: middle; color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border) !important; cursor: help; } /* ===================================================================== 11. AGENDA CALENDAR EVENTS — undangan (public) vs pribadi (private). Token-only (dark-safe): drives FullCalendar's own event CSS variables so month/week block events and the list-view dot all pick up the accent. ===================================================================== */ #agenda-calendar .fc-event.agenda-event-public { --fc-event-bg-color: var(--agenda-public-bg); --fc-event-border-color: var(--agenda-public); --fc-event-text-color: var(--agenda-public-text); } #agenda-calendar .fc-event.agenda-event-private { --fc-event-bg-color: var(--agenda-private-bg); --fc-event-border-color: var(--agenda-private); --fc-event-text-color: var(--agenda-private-text); } /* A firmer left rule so the two kinds read apart at a glance. */ #agenda-calendar .fc-daygrid-event.agenda-event-public, #agenda-calendar .fc-daygrid-event.agenda-event-private { border-left-width: 3px; }