/* * Support Center — Design tokens & form system * Light/Dark theme (native Bootstrap `data-bs-theme` pattern) + White Label * via CSS custom properties. * * Brand colors (--primary-color, --secondary-color) are injected at runtime * from CustomerBranding in base.html.twig and stay IDENTICAL in both themes. * Only the surface/border/text tokens change per theme so the corporate * palette keeps enough contrast in Light and Dark mode alike. * * Theme resolution: * - `:root` below holds the Dark theme values (current default look). * - `[data-bs-theme="light"]` overrides the surface/text/border tokens. * - The element receives `data-bs-theme="light|dark"`, set by * be2/js/theme-switcher.js and persisted in localStorage. */ :root { /* ── White-label (Twig overrides these) — identical in both themes ── */ --primary-color: #00A2E8; --secondary-color: #f7941e; /* Semantic aliases */ --accent-color: var(--primary-color); --accent-hover: var(--secondary-color); --accent-muted: color-mix(in srgb, var(--primary-color) 18%, transparent); /* Accessible variants for text/icons drawn directly on a surface (raw brand colors don't always reach 4.5:1 contrast on light surfaces). Dark theme keeps the raw brand color; the light theme block below overrides these with darkened, higher-contrast versions. */ --accent-color-contrast: var(--accent-color); --accent-hover-contrast: var(--accent-hover); /* ── Surfaces (dark theme) ──────────────────────────────────────── */ --bg-main: #000000; --bg-surface: rgb(25, 25, 25); --bg-elevated: #1e1e1e; --bg-overlay: rgba(15, 15, 15, 0.65); --bg-input: #101012; --bg-input-hover: #161618; --bg-input-disabled: #2a2a2c; --bg-readonly: rgba(255, 255, 255, 0.04); /* ── Borders ────────────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); --border-accent: var(--primary-color); /* ── Typography ─────────────────────────────────────────────────── */ --text-primary: #f1f1f1; --text-secondary: rgba(255, 255, 255, 0.65); --text-muted: rgba(255, 255, 255, 0.45); --text-label: rgba(255, 255, 255, 0.5); --text-on-accent: #ffffff; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-lg: 1rem; /* ── Shape ──────────────────────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px; /* ── Focus & elevation ──────────────────────────────────────────── */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 28%, transparent); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.55); --transition-fast: 0.15s ease; /* ── WYSIWYG (Summernote) ───────────────────────────────────────── */ --editor-toolbar-bg: #1a1a1c; --editor-toolbar-border: var(--border-default); --editor-content-bg: #fafafa; --editor-content-text: #1a1a1a; /* ── Feedback ───────────────────────────────────────────────────── */ --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #f59e0b; --color-success-bg: color-mix(in srgb, var(--color-success) 15%, transparent); --color-danger-bg: color-mix(in srgb, var(--color-danger) 15%, transparent); } /* ── Light theme overrides ──────────────────────────────────────────── * Same brand colors, different surfaces. Applied whenever the * element carries data-bs-theme="light" (see be2/js/theme-switcher.js). * ─────────────────────────────────────────────────────────────────── */ [data-bs-theme="light"] { /* Surfaces: page bg is a soft neutral gray, panels/sidebar/topbar are white ("elevated" surfaces stay lighter than the page, same relation used in dark mode). */ --bg-main: #eef1f4; --bg-surface: #ffffff; --bg-elevated: #f2f4f7; --bg-overlay: rgba(255, 255, 255, 0.7); --bg-input: #ffffff; --bg-input-hover: #f7f8fa; --bg-input-disabled: #e9ecef; --bg-readonly: rgba(0, 0, 0, 0.035); /* Borders */ --border-subtle: rgba(15, 17, 20, 0.08); --border-default: rgba(15, 17, 20, 0.14); --border-strong: rgba(15, 17, 20, 0.24); /* Typography */ --text-primary: #16181b; --text-secondary: rgba(15, 17, 20, 0.68); --text-muted: rgba(15, 17, 20, 0.48); --text-label: rgba(15, 17, 20, 0.55); /* Focus & elevation: a touch more opaque so the ring reads clearly against white surfaces, and a softer shadow than the dark theme. */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 35%, transparent); --shadow-modal: 0 20px 40px rgba(15, 17, 20, 0.14); /* WYSIWYG toolbar follows the light chrome (editor content stays a fixed "paper" look in both themes, so it is not overridden here). */ --editor-toolbar-bg: #eef1f4; /* Accessible, darkened brand variants for text/icons placed directly on a light surface (raw brand hexes drop below 4.5:1 on white). */ --accent-color-contrast: color-mix(in srgb, var(--primary-color) 75%, black 25%); --accent-hover-contrast: color-mix(in srgb, var(--secondary-color) 65%, black 35%); } /* ── Layout primitives ──────────────────────────────────────────────── */ .sc-panel { margin: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background-color: var(--bg-surface); color: var(--text-primary); } .sc-panel__title { display: flex; align-items: center; gap: 10px; margin: 0 0 1rem; font-size: var(--font-size-lg); font-weight: 600; } .sc-panel__title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background-color: var(--accent-color); } /* ── Form system ────────────────────────────────────────────────────── */ .sc-form { display: flex; flex-direction: column; gap: 1rem; } .sc-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .sc-field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .sc-field__label { color: var(--text-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .sc-field__hint { color: var(--text-muted); font-size: 0.75rem; } .sc-field__error { color: var(--color-danger); font-size: 0.75rem; } /* Shared control styles: input, select, textarea */ .sc-control, .sc-form .form-control, .sc-form .form-select { width: 100%; min-height: 42px; padding: 0.55rem 0.85rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg-input); color: var(--text-primary); font-size: var(--font-size-base); line-height: 1.4; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .sc-control::placeholder, .sc-form .form-control::placeholder { color: var(--text-muted); } .sc-control:hover:not(:disabled):not([readonly]), .sc-form .form-control:hover:not(:disabled):not([readonly]), .sc-form .form-select:hover:not(:disabled) { background-color: var(--bg-input-hover); border-color: var(--border-strong); } .sc-control:focus, .sc-form .form-control:focus, .sc-form .form-select:focus { outline: none; border-color: var(--border-accent); box-shadow: var(--focus-ring); background-color: var(--bg-input); color: var(--text-primary); } .sc-control:disabled, .sc-control[readonly], .sc-form .form-control:disabled, .sc-form .form-control[readonly] { background-color: var(--bg-input-disabled); color: var(--text-secondary); cursor: not-allowed; opacity: 0.85; } .sc-control--readonly { background-color: var(--bg-readonly); } textarea.sc-control, .sc-form textarea.form-control { min-height: 100px; resize: vertical; } /* Input group with prefix label (My Account pattern) */ .sc-input-group { display: flex; align-items: stretch; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background-color: var(--bg-input); } .sc-input-group__prefix { display: flex; align-items: center; padding: 0 0.85rem; border-right: 1px solid var(--border-subtle); background-color: var(--bg-elevated); color: var(--text-label); font-size: var(--font-size-sm); white-space: nowrap; } .sc-input-group .sc-control, .sc-input-group .form-control { border: none; border-radius: 0; box-shadow: none; } .sc-input-group:focus-within { border-color: var(--border-accent); box-shadow: var(--focus-ring); } /* Readonly fields inside sc-input-group — override legacy sc.css */ .sc-input-group .sc-control[readonly], .sc-input-group .form-control[readonly], .sc-input-group .sc-control--readonly { background-color: var(--bg-readonly); color: var(--text-secondary); opacity: 1; cursor: default; } /* Password field with toggle */ .sc-password { position: relative; } .sc-password .sc-control { padding-right: 2.75rem; } .sc-password__toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; line-height: 1; } .sc-password__toggle:hover { color: var(--accent-color); } /* ── Buttons ────────────────────────────────────────────────────────── */ .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-base); font-weight: 500; line-height: 1; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .sc-btn--primary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--text-on-accent); } .sc-btn--primary:hover:not(:disabled) { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); } .sc-btn--secondary { background-color: transparent; border-color: var(--border-default); color: var(--text-secondary); } .sc-btn--secondary:hover:not(:disabled) { border-color: var(--border-accent); color: var(--text-primary); } .sc-btn:disabled { opacity: 0.55; cursor: not-allowed; } .sc-btn__spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: sc-spin 0.7s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } } /* ── Alerts (AJAX feedback) ─────────────────────────────────────────── */ .sc-alert { padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: var(--font-size-sm); } .sc-alert--success { background-color: var(--color-success-bg); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); color: var(--color-success); } .sc-alert--error { background-color: var(--color-danger-bg); border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); color: var(--color-danger); } /* ── Modal (Create Ticket) ──────────────────────────────────────────── */ .sc-modal .modal-content { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background-color: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-modal); overflow: hidden; } .sc-modal .modal-content > .sc-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .sc-modal .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-subtle); background-color: var(--bg-elevated); } .sc-modal .modal-title { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-lg); font-weight: 600; } .sc-modal .modal-title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background-color: var(--accent-color); } .sc-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.5rem; } .sc-modal .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-subtle); background-color: var(--bg-elevated); gap: 10px; } .sc-modal .btn-close { filter: invert(1) grayscale(1); opacity: 0.6; } [data-bs-theme="light"] .sc-modal .btn-close { filter: none; opacity: 0.65; } .sc-modal .btn-close:hover { opacity: 1; } .sc-modal__divider { height: 1px; margin: 0.25rem 0; background-color: var(--border-subtle); } .sc-dropzone { min-height: 128px; padding: 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background-color: var(--bg-input); color: var(--text-secondary); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .sc-dropzone:hover, .sc-dropzone.dz-drag-hover { border-color: var(--accent-color-contrast); background-color: var(--bg-input-hover); } .sc-dropzone.is-disabled { opacity: 0.65; pointer-events: none; } .sc-dropzone .dz-message { margin: 1.75rem 0; font-size: var(--font-size-base); font-weight: 600; text-align: center; color: var(--text-primary); } .sc-dropzone .dz-message span { display: block; margin-top: 0.35rem; font-size: var(--font-size-sm); font-weight: 400; color: var(--text-muted); } .sc-dropzone .dz-preview { margin: 0.5rem; } .sc-dropzone .dz-preview .dz-image { border-radius: var(--radius-sm); background: var(--bg-elevated); } .sc-dropzone .dz-preview .dz-details, .sc-dropzone .dz-preview .dz-error-message { color: var(--text-primary); } .sc-dropzone .dz-preview .dz-remove { margin-top: 0.35rem; color: var(--accent-color-contrast); font-size: var(--font-size-sm); } /* ── Summernote dark chrome ─────────────────────────────────────────── */ .sc-wysiwyg .note-editor.note-frame, .sc-wysiwyg .note-editor.note-airframe { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; } .sc-wysiwyg .note-toolbar { background-color: var(--editor-toolbar-bg) !important; border-bottom: 1px solid var(--editor-toolbar-border) !important; } .sc-wysiwyg .note-btn { background-color: transparent; border-color: var(--border-subtle); color: var(--text-secondary); } .sc-wysiwyg .note-btn:hover, .sc-wysiwyg .note-btn.active { background-color: var(--accent-muted); color: var(--text-primary); } .sc-wysiwyg .note-editing-area .note-editable { background-color: var(--editor-content-bg) !important; color: var(--editor-content-text) !important; min-height: 140px; } .sc-modal .note-editor .note-toolbar .dropdown-menu, .sc-modal .note-popover { z-index: 1060; } /* ── Select2 dark theme (Create Ticket project/user) ────────────────── */ .sc-form .select2-container { width: 100% !important; } .sc-form .select2-container--default .select2-selection--single { min-height: 42px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg-input); } .sc-form .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0.85rem; line-height: 40px; color: var(--text-primary); } .sc-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; } .sc-form .select2-dropdown { border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg-elevated); } .sc-form .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--accent-color); } .sc-form .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--border-default); border-radius: var(--radius-sm); background-color: var(--bg-input); color: var(--text-primary); } /* ── Legacy Bootstrap overrides (sc.css migration path) ─────────────── */ body { background-color: var(--bg-main); color: var(--text-primary); } .bg-black-light { background-color: var(--bg-surface) !important; } .btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); } .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } .border-white { border-color: var(--border-accent) !important; } /* ── App shell (sidebar + topbar + page) ────────────────────────────── */ #wrapper { height: 100vh; overflow: hidden; } .sc-layout__main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-main); } #sidebar-wrapper.sc-sidebar { height: 100vh; flex-shrink: 0; width: 264px; display: flex; flex-direction: column; overflow-y: auto; margin-left: 0; transition: width 0.25s ease; background-color: var(--bg-surface); border-right: 1px solid var(--border-subtle); } .sc-sidebar-backdrop { position: fixed; inset: 0; z-index: 1040; background: var(--bg-overlay); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #sidebar-wrapper.sc-sidebar .sidebar-heading, .sc-sidebar__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); } .sc-sidebar__brand a { display: inline-flex; align-items: center; line-height: 0; } .sc-sidebar__version { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.02em; } .sc-sidebar__nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; gap: 2px; padding: 0.5rem 0.75rem 1.25rem; } .sc-sidebar__section { padding: 0.85rem 0.75rem 0.35rem; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sc-sidebar__section:first-child { padding-top: 0.35rem; } .sc-sidebar__link { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.85rem; border-left: 3px solid transparent; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--font-size-base); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .sc-sidebar__link:hover { background-color: var(--bg-elevated); color: var(--text-primary); } .sc-sidebar__link.is-active { background-color: var(--accent-muted); border-left-color: var(--accent-color); color: var(--text-primary); } .sc-sidebar__icon { width: 18px; height: 18px; flex-shrink: 0; } .sc-sidebar__label { flex: 1; min-width: 0; } .sc-sidebar__badge { margin-left: auto; padding: 0.15rem 0.45rem; border-radius: var(--radius-full); background-color: var(--accent-color); color: var(--text-on-accent); font-size: 0.6875rem; font-weight: 600; line-height: 1.2; } .sc-topbar { flex: 0 0 auto; z-index: 1030; padding: 0.55rem 1rem; border-bottom: 1px solid var(--border-subtle); background-color: var(--bg-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .sc-topbar .navbar-nav .nav-link { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--font-size-base); transition: background-color var(--transition-fast), color var(--transition-fast); } .sc-topbar .navbar-nav .nav-link:hover, .sc-topbar .navbar-nav .nav-link:focus, .sc-topbar .navbar-nav .show > .nav-link { color: var(--text-primary); background-color: var(--bg-elevated); } .sc-topbar__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0.4rem; } .sc-topbar__toggle svg { width: 22px; height: 22px; } .sc-topbar__create-ticket-item { margin-right: 0.35rem; } .sc-topbar__create-ticket { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-weight: 600; } .sc-topbar__create-ticket svg { width: 16px; height: 16px; } .sc-topbar__notif-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .sc-topbar__notif-wrap svg { width: 18px; height: 18px; } #notificationsCount:not(:empty) { position: absolute; top: -6px; right: -8px; min-width: 1.1rem; padding: 0.1rem 0.35rem; border-radius: var(--radius-full); background-color: var(--color-danger); color: var(--text-on-accent); font-size: 0.625rem; font-weight: 700; line-height: 1.2; text-align: center; } .sc-topbar__dropdown { min-width: 300px; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--bg-elevated); box-shadow: var(--shadow-modal); } #detail_notification.sc-topbar__dropdown { min-width: 320px; max-width: min(380px, calc(100vw - 1.5rem)); padding: 0; border-radius: var(--radius-lg); overflow: hidden; } .sc-topbar__dropdown .dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-primary); background-color: transparent; } .sc-topbar__dropdown .dropdown-item:hover, .sc-topbar__dropdown .dropdown-item:focus { background-color: var(--accent-muted); color: var(--text-primary); } .sc-topbar__dropdown .dropdown-item.active, .sc-topbar__dropdown .dropdown-item:active { background-color: var(--accent-muted); color: var(--text-primary); } .sc-topbar__dropdown .dropdown-divider { border-color: var(--border-subtle); margin: 0.35rem 0; } /* ── Notifications dropdown ─────────────────────────────────────────── */ .sc-notifications { display: flex; flex-direction: column; max-height: min(420px, 70vh); } .sc-notifications__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-subtle); background-color: var(--bg-surface); } .sc-notifications__title { color: var(--text-primary); font-size: var(--font-size-base); font-weight: 600; } .sc-notifications__action { color: var(--accent-color-contrast); font-size: 0.75rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .sc-notifications__action:hover { color: var(--accent-hover-contrast); text-decoration: underline; } .sc-notifications__list { flex: 1 1 auto; min-height: 0; max-height: min(300px, 50vh); overflow-y: auto; overflow-x: hidden; padding: 0.5rem; background-color: var(--bg-elevated); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sc-notifications__list::-webkit-scrollbar { width: 6px; } .sc-notifications__list::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: var(--radius-full); } .sc-notifications__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.85rem; margin-bottom: 0.4rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background-color: var(--bg-surface); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .sc-notifications__item:last-child { margin-bottom: 0; } .sc-notifications__item:hover { border-color: var(--border-default); background-color: var(--bg-input-hover); } .sc-notifications__body { min-width: 0; flex: 1; } .sc-notifications__detail { margin: 0 0 0.35rem; color: var(--text-primary); font-size: var(--font-size-sm); line-height: 1.35; } .sc-notifications__date { display: block; color: var(--text-muted); font-size: 0.72rem; } .sc-notifications__read { flex-shrink: 0; border-color: var(--border-default) !important; background-color: var(--bg-input) !important; color: var(--text-primary) !important; font-size: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.35rem 0.65rem; } .sc-notifications__read:hover { border-color: var(--border-accent) !important; background-color: var(--accent-muted) !important; color: var(--text-primary) !important; } .sc-notifications__empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); font-size: var(--font-size-sm); } .sc-notifications__empty p { margin: 0; } .sc-notifications__footer { padding: 0.65rem 1rem; border-top: 1px solid var(--border-subtle); background-color: var(--bg-surface); text-align: center; } .sc-notifications__footer-link { color: var(--accent-color-contrast); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; } .sc-notifications__footer-link:hover { color: var(--accent-hover-contrast); text-decoration: underline; } .sc-topbar .navbar-toggler { border-color: var(--border-default); } .sc-topbar .navbar-toggler:focus { box-shadow: var(--focus-ring); } /* The topbar keeps Bootstrap's navbar-dark helper class for baseline contrast, but the hamburger icon needs a dark variant once the surface behind it turns light (mobile navbar-toggler). */ [data-bs-theme="light"] .sc-topbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .sc-page { flex: 1; width: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sc-page::-webkit-scrollbar { width: 6px; } .sc-page::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: var(--radius-full); } /* ── App shell responsive behavior (mobile off-canvas / desktop collapse) ── */ @media (max-width: 767.98px) { #sidebar-wrapper.sc-sidebar { position: fixed; top: 0; left: 0; z-index: 1045; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-modal); } body.sb-sidenav-toggled #sidebar-wrapper.sc-sidebar { transform: translateX(0); } body.sb-sidenav-toggled .sc-sidebar-backdrop { opacity: 1; pointer-events: auto; } #page-content-wrapper.sc-layout__main { width: 100%; } } @media (min-width: 768px) { body.sb-sidenav-toggled #sidebar-wrapper.sc-sidebar { width: 0; padding: 0; border: 0; overflow: hidden; } } .sc-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 1rem 0; padding: 0.25rem 0; } .sc-page-header__title { display: flex; align-items: center; gap: 0.65rem; margin: 0; color: var(--text-primary); font-size: 1.125rem; font-weight: 600; } .sc-page-header__title svg { width: 24px; height: 24px; color: var(--accent-color); } .bg-black { background-color: var(--bg-main) !important; } /* ── Theme toggle (navbar) ───────────────────────────────────────────── */ .sc-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-full); background-color: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .sc-theme-toggle:hover { border-color: var(--border-accent); color: var(--text-primary); background-color: var(--bg-input-hover); } .sc-theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } .sc-theme-toggle__icon { position: absolute; width: 18px; height: 18px; transition: opacity var(--transition-fast), transform var(--transition-fast); } .sc-theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.4); color: var(--accent-hover-contrast); } .sc-theme-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); color: var(--accent-color-contrast); } [data-bs-theme="light"] .sc-theme-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } [data-bs-theme="light"] .sc-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.4); }