/* ============================================================ BusOva combined CSS - generated at 2026-10-07T05:26:42+00:00 ============================================================ */ /* === core/variables.css === */ /** * CSS Variables - Core (Theme-Neutral) * * Contains base variables that are shared across all themes: * - Spacing & sizing * - Transitions & animations * - Box shadows * - Border radius * - Z-index layers * * Color variables are defined in theme files: * - /css/themes/light.css * - /css/themes/dark.css */ :root { /* ----------------------------------------------------------------------------- SPACING & SIZING ----------------------------------------------------------------------------- */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; --container-max-width: 1400px; --content-max-width: 900px; /* ----------------------------------------------------------------------------- TRANSITIONS & ANIMATIONS ----------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* ----------------------------------------------------------------------------- BOX SHADOWS ----------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* ----------------------------------------------------------------------------- BORDER RADIUS ----------------------------------------------------------------------------- */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* ----------------------------------------------------------------------------- Z-INDEX LAYERS ----------------------------------------------------------------------------- */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ----------------------------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------------------------- */ --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ----------------------------------------------------------------------------- LAYOUT ----------------------------------------------------------------------------- */ --header-height: 60px; --footer-height: auto; --sidebar-width: 250px; } /* === core/base.css === */ /* ========================================================= BASE STYLES BusOva Platform - Core element resets and defaults ========================================================= */ /* ------------------------------------------------- BOX MODEL RESET ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------- BODY DEFAULTS ------------------------------------------------- */ body { background: var(--bg-body); color: var(--text-main); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Sticky footer: flexbox layout */ display: flex; flex-direction: column; min-height: 100vh; } /* ------------------------------------------------- MAIN CONTAINER - Sticky Footer Support ------------------------------------------------- */ main.container { padding-bottom: 3rem; flex: 1 0 auto; /* Grow to fill available space, push footer down */ } body.admin-area main.container { max-width: 1200px; } /* Footer should not grow */ .site-footer { flex-shrink: 0; } /* ------------------------------------------------- LINKS ------------------------------------------------- */ a { color: var(--link-color); text-decoration: none; transition: color 0.15s ease, box-shadow 0.15s ease; } a:hover, a:focus { color: var(--link-hover); text-decoration: none; box-shadow: inset 0 -1px 0 var(--link-hover); } /* Remove underline effect for buttons and specific elements */ a.btn, a.nav-link, a.dropdown-item, a.badge { box-shadow: none; } /* Registration-plate links: the plate is its own visual element, so the hover underline just looks like a stray line under it. Drop it. */ a:has(.uk-number-plate):hover, a:has(.uk-number-plate):focus, a.uk-number-plate:hover, a.uk-number-plate:focus { box-shadow: none; } /* "Photo Unavailable" placeholder (bus_photo_html) - shown instead of stretching the default bus image when a bus has no photo. Fills its slot; per-page CSS sets the slot's dimensions. */ .bus-photo-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; padding: 4px; background: #f0f0f0; color: #8a94a6; font-size: 0.72rem; font-weight: 600; line-height: 1.1; text-align: center; overflow: hidden; } .bus-photo-unavailable i { font-size: 1.3rem; opacity: 0.55; } .theme-dark .bus-photo-unavailable { background: #2d3748; color: #94a3b8; } a.btn:hover, a.btn:focus, a.nav-link:hover, a.nav-link:focus, a.dropdown-item:hover, a.dropdown-item:focus, a.badge:hover, a.badge:focus { box-shadow: none; } /* === core/utilities.css === */ /* ========================================================= UTILITY CLASSES BusOva Platform - Reusable helper classes ========================================================= */ /* ------------------------------------------------- SITE BRANDING ------------------------------------------------- */ .site-tagline { font-size: 1.0rem; letter-spacing: 0.3px; color: #ffffff; } /* ------------------------------------------------- BACKGROUND COLOURS ------------------------------------------------- */ .bg-purple { background: #6f42c1 !important; } .bg-orange { background: #fd7e14 !important; color: #fff !important; } /* ------------------------------------------------- STAT ICONS ------------------------------------------------- */ .stat-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .stat-icon i { font-size: 1.1rem; } /* ========================================================= BREADCRUMBS - CLEAN & MODERN ========================================================= */ .breadcrumb { --bs-breadcrumb-divider: ''; margin-bottom: 1rem; background: transparent; } .breadcrumb .fa-house { font-size: 0.85rem; } .breadcrumb-item { font-size: 0.85rem; } /* Linked breadcrumb */ .breadcrumb-item a { color: var(--link-color); font-weight: 500; } /* Hover breadcrumb */ .breadcrumb-item a:hover { color: var(--link-hover); } /* Active breadcrumb (current page) */ .breadcrumb-item.active { color: var(--text-muted); font-weight: 600; } /* Separator */ .breadcrumb-item + .breadcrumb-item::before { content: '\203A'; /* Right-pointing single angle quotation mark */ color: var(--text-muted); padding: 0 0.5rem; } /* ========================================================= AVATARS - STANDARDISED & SAFE ========================================================= */ .avatar { display: inline-block; object-fit: cover; border-radius: 50%; flex-shrink: 0; } /* Size variants */ .avatar-xs { width: 32px; height: 32px; } .avatar-sm { width: 48px; height: 48px; } .avatar-md { width: 96px; height: 96px; } .avatar-lg { width: 128px; height: 128px; } /* ========================================================= TEXT UTILITIES ========================================================= */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= VISIBILITY UTILITIES ========================================================= */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Card masonry ----------------------------------------------------------------------------- Lay a set of stacked cards out in balanced columns instead of a fixed grid split that leaves wasted space under the shorter side. The browser keeps the columns close in height and never splits a card across a break. Put the cards directly inside an element with .card-masonry (no col-* wrappers) and they flow into two columns on desktop, one on mobile. Reusable on any page with the same two-column-of-cards pattern. */ .card-masonry { column-gap: 1.5rem; } @media (min-width: 992px) { .card-masonry { column-count: 2; } } .card-masonry > .card { width: 100%; margin-bottom: 1.5rem; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } /* === core/theme-overrides.css === */ /** * Theme Overrides * * Ensures Bootstrap components properly use theme CSS variables. * This file is loaded AFTER themes to apply proper overrides. */ /* ----------------------------------------------------------------------------- FORMS - Light Theme Overrides ----------------------------------------------------------------------------- */ .theme-light .form-control, .theme-light .form-select { background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-primary); } .theme-light .form-control:focus, .theme-light .form-select:focus { background-color: var(--input-focus-bg); border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); } .theme-light .form-control:disabled, .theme-light .form-select:disabled { background-color: var(--input-disabled-bg); color: var(--input-disabled-text); } .theme-light .form-control::placeholder { color: var(--input-placeholder); } /* Form check inputs */ .theme-light .form-check-input { background-color: #ffffff; border: 2px solid var(--border-color-dark); } .theme-light .form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .theme-light .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .theme-light .form-check-input:disabled { background-color: var(--input-disabled-bg); border-color: var(--border-color); opacity: 0.5; } .theme-light .form-check-input:checked:disabled { background-color: var(--color-primary); opacity: 0.5; } /* ----------------------------------------------------------------------------- BUTTONS - Light Theme Overrides ----------------------------------------------------------------------------- */ .theme-light .btn-primary { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-text); } .theme-light .btn-primary:hover, .theme-light .btn-primary:focus, .theme-light .btn-primary:active { background-color: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-border); color: var(--btn-primary-text); } .theme-light .btn-secondary { background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text); } .theme-light .btn-secondary:hover, .theme-light .btn-secondary:focus, .theme-light .btn-secondary:active { background-color: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-text); } .theme-light .btn-outline-primary { border-color: var(--btn-outline-border); color: var(--btn-outline-text); background-color: transparent; } .theme-light .btn-outline-primary:hover, .theme-light .btn-outline-primary:focus, .theme-light .btn-outline-primary:active { background-color: var(--btn-outline-hover-bg); border-color: var(--btn-outline-border); color: var(--btn-outline-hover-text); } .theme-light .btn-outline-secondary { border-color: var(--border-color); color: var(--text-primary); background-color: transparent; } .theme-light .btn-outline-secondary:hover, .theme-light .btn-outline-secondary:focus, .theme-light .btn-outline-secondary:active { background-color: var(--bg-surface); border-color: var(--border-color-dark); color: var(--text-primary); } .theme-light .btn-outline-light { border-color: var(--border-color); color: var(--text-primary); background-color: transparent; } .theme-light .btn-outline-light:hover, .theme-light .btn-outline-light:focus, .theme-light .btn-outline-light:active { background-color: var(--bg-surface); border-color: var(--border-color-dark); color: var(--text-primary); } /* Danger button */ .theme-light .btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); color: #ffffff; } .theme-light .btn-danger:hover, .theme-light .btn-danger:focus, .theme-light .btn-danger:active { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #ffffff; } /* Success button */ .theme-light .btn-success { background-color: var(--color-success); border-color: var(--color-success); color: #ffffff; } .theme-light .btn-success:hover, .theme-light .btn-success:focus, .theme-light .btn-success:active { background-color: var(--color-success-hover); border-color: var(--color-success-hover); color: #ffffff; } /* Info button */ .theme-light .btn-info { background-color: var(--color-info); border-color: var(--color-info); color: #000000; } .theme-light .btn-info:hover, .theme-light .btn-info:focus, .theme-light .btn-info:active { background-color: var(--color-info-hover); border-color: var(--color-info-hover); color: #000000; } /* Warning button */ .theme-light .btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: #000000; } .theme-light .btn-warning:hover, .theme-light .btn-warning:focus, .theme-light .btn-warning:active { background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); color: #000000; } /* ----------------------------------------------------------------------------- CARDS ----------------------------------------------------------------------------- */ .theme-light .card { background-color: var(--bg-card); border-color: var(--border-color); } .theme-light .card-header { background-color: var(--bg-card-header); border-bottom-color: var(--border-color); } .theme-light .card-footer { background-color: var(--bg-card-header); border-top-color: var(--border-color); } /* ----------------------------------------------------------------------------- TABLES ----------------------------------------------------------------------------- */ .theme-light .table { color: var(--text-primary); border-color: var(--table-border); } .theme-light .table > :not(caption) > * > * { border-bottom-color: var(--table-border); } .theme-light .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe-bg); } .theme-light .table-hover > tbody > tr:hover > * { background-color: var(--table-hover-bg); } .theme-light .table thead { border-bottom: 2px solid var(--table-border); } /* ----------------------------------------------------------------------------- MODALS ----------------------------------------------------------------------------- */ .theme-light .modal-content { background-color: var(--modal-bg); border-color: var(--modal-border); } .theme-light .modal-header { background-color: var(--modal-header-bg); border-bottom-color: var(--modal-header-border); } .theme-light .modal-footer { background-color: var(--modal-footer-bg); border-top-color: var(--modal-footer-border); } /* ----------------------------------------------------------------------------- PAGINATION ----------------------------------------------------------------------------- */ .theme-light .page-link { background-color: var(--pagination-bg); border-color: var(--pagination-border); color: var(--pagination-text); } .theme-light .page-link:hover { background-color: var(--pagination-hover-bg); color: var(--pagination-hover-text); border-color: var(--pagination-border); } .theme-light .page-item.active .page-link { background-color: var(--pagination-active-bg); border-color: var(--pagination-active-bg); color: var(--pagination-active-text); } .theme-light .page-item.disabled .page-link { background-color: var(--pagination-disabled-bg); color: var(--pagination-disabled-text); border-color: var(--pagination-border); } /* ----------------------------------------------------------------------------- ALERTS ----------------------------------------------------------------------------- */ .theme-light .alert-success { background-color: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); } .theme-light .alert-danger { background-color: var(--alert-danger-bg); border-color: var(--alert-danger-border); color: var(--alert-danger-text); } .theme-light .alert-warning { background-color: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); } .theme-light .alert-info { background-color: var(--alert-info-bg); border-color: var(--alert-info-border); color: var(--alert-info-text); } /* ----------------------------------------------------------------------------- BADGES ----------------------------------------------------------------------------- */ .theme-light .badge { background-color: var(--badge-bg); color: var(--badge-text); } /* ----------------------------------------------------------------------------- BORDERS ----------------------------------------------------------------------------- */ .theme-light .border { border-color: var(--border-color) !important; } .theme-light .border-top { border-top-color: var(--border-color) !important; } .theme-light .border-bottom { border-bottom-color: var(--border-color) !important; } .theme-light .border-start { border-left-color: var(--border-color) !important; } .theme-light .border-end { border-right-color: var(--border-color) !important; } .theme-light hr { border-top-color: var(--divider); opacity: 1; } /* ----------------------------------------------------------------------------- TEXT UTILITIES ----------------------------------------------------------------------------- */ .theme-light .text-muted { color: var(--text-muted) !important; } .theme-light .text-secondary { color: var(--text-secondary) !important; } /* ----------------------------------------------------------------------------- DROPDOWNS ----------------------------------------------------------------------------- */ .theme-light .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); } .theme-light .dropdown-item { color: var(--text-primary); } .theme-light .dropdown-item:hover, .theme-light .dropdown-item:focus { background-color: var(--bg-surface); color: var(--text-primary); } .theme-light .dropdown-divider { border-top-color: var(--border-color); } /* ----------------------------------------------------------------------------- NAVIGATION - Dark navbar override for light theme ----------------------------------------------------------------------------- */ .theme-light .navbar-dark .nav-link.active { color: #ffffff !important; font-weight: 500; } .theme-light .navbar-dark .nav-link { color: rgba(255, 255, 255, 0.75); } .theme-light .navbar-dark .nav-link:hover, .theme-light .navbar-dark .nav-link:focus { color: rgba(255, 255, 255, 0.95); } /* ----------------------------------------------------------------------------- INPUT GROUPS ----------------------------------------------------------------------------- */ .theme-light .input-group-text { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } /* ----------------------------------------------------------------------------- LIST GROUPS ----------------------------------------------------------------------------- */ .theme-light .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } .theme-light .list-group-item:hover { background-color: var(--bg-card-hover); } /* ========================================================= DARK THEME OVERRIDES ========================================================= */ /* ----------------------------------------------------------------------------- FORMS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .form-control, .theme-dark .form-select { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); } .theme-dark .form-control:focus, .theme-dark .form-select:focus { background-color: var(--input-focus); border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); color: var(--input-text); } .theme-dark .form-control:disabled, .theme-dark .form-select:disabled { background-color: var(--input-disabled-bg); color: var(--input-disabled-text); } .theme-dark .form-control::placeholder { color: var(--input-placeholder); } /* Form check inputs */ .theme-dark .form-check-input { background-color: var(--input-bg); border: 2px solid var(--input-border); } .theme-dark .form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.25rem rgba(14, 155, 255, 0.25); } .theme-dark .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .theme-dark .form-check-input:disabled { background-color: var(--input-disabled-bg); border-color: var(--input-border); opacity: 0.5; } .theme-dark .form-check-input:checked:disabled { background-color: var(--color-primary); opacity: 0.5; } /* ----------------------------------------------------------------------------- BUTTONS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .btn-primary { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-text); } .theme-dark .btn-primary:hover, .theme-dark .btn-primary:focus, .theme-dark .btn-primary:active { background-color: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-border); color: var(--btn-primary-text); } .theme-dark .btn-secondary { background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text); } .theme-dark .btn-secondary:hover, .theme-dark .btn-secondary:focus, .theme-dark .btn-secondary:active { background-color: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-text); } .theme-dark .btn-outline-primary { border-color: var(--btn-outline-border); color: var(--btn-outline-text); background-color: transparent; } .theme-dark .btn-outline-primary:hover, .theme-dark .btn-outline-primary:focus, .theme-dark .btn-outline-primary:active { background-color: var(--btn-outline-hover-bg); border-color: var(--btn-outline-border); color: var(--btn-outline-hover-text); } .theme-dark .btn-outline-secondary { border-color: var(--border-color); color: var(--text-primary); background-color: transparent; } .theme-dark .btn-outline-secondary:hover, .theme-dark .btn-outline-secondary:focus, .theme-dark .btn-outline-secondary:active { background-color: var(--bg-surface); border-color: var(--border-color-dark); color: var(--text-primary); } .theme-dark .btn-outline-light { border-color: var(--border-color); color: var(--text-primary); background-color: transparent; } .theme-dark .btn-outline-light:hover, .theme-dark .btn-outline-light:focus, .theme-dark .btn-outline-light:active { background-color: var(--bg-surface); border-color: var(--border-color-dark); color: var(--text-primary); } /* Danger button */ .theme-dark .btn-danger { background-color: var(--color-danger); border-color: var(--color-danger); color: #ffffff; } .theme-dark .btn-danger:hover, .theme-dark .btn-danger:focus, .theme-dark .btn-danger:active { background-color: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #ffffff; } /* Success button */ .theme-dark .btn-success { background-color: var(--color-success); border-color: var(--color-success); color: #ffffff; } .theme-dark .btn-success:hover, .theme-dark .btn-success:focus, .theme-dark .btn-success:active { background-color: var(--color-success-hover); border-color: var(--color-success-hover); color: #ffffff; } /* Info button */ .theme-dark .btn-info { background-color: var(--color-info); border-color: var(--color-info); color: #000000; } .theme-dark .btn-info:hover, .theme-dark .btn-info:focus, .theme-dark .btn-info:active { background-color: var(--color-info-hover); border-color: var(--color-info-hover); color: #000000; } /* Warning button */ .theme-dark .btn-warning { background-color: var(--color-warning); border-color: var(--color-warning); color: #000000; } .theme-dark .btn-warning:hover, .theme-dark .btn-warning:focus, .theme-dark .btn-warning:active { background-color: var(--color-warning-hover); border-color: var(--color-warning-hover); color: #000000; } /* ----------------------------------------------------------------------------- CARDS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .card { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-main); } .theme-dark .card-header { background-color: var(--bg-card-header); border-bottom-color: var(--border-color); color: var(--text-main); } .theme-dark .card-footer { background-color: var(--bg-card-header); border-top-color: var(--border-color); color: var(--text-main); } /* ----------------------------------------------------------------------------- TABLES - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .table { color: var(--text-primary); border-color: var(--table-border); } .theme-dark .table > :not(caption) > * > * { border-bottom-color: var(--table-border); } .theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe-bg); } .theme-dark .table-hover > tbody > tr:hover > * { background-color: var(--table-hover-bg); } .theme-dark .table thead { border-bottom: 2px solid var(--table-border); } /* ----------------------------------------------------------------------------- MODALS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .modal-content { background-color: var(--modal-bg); border-color: var(--modal-border); color: var(--text-main); } .theme-dark .modal-header { background-color: var(--modal-header-bg); border-bottom-color: var(--modal-header-border); color: var(--text-main); } .theme-dark .modal-footer { background-color: var(--modal-footer-bg); border-top-color: var(--modal-footer-border); color: var(--text-main); } /* ----------------------------------------------------------------------------- PAGINATION - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .page-link { background-color: var(--pagination-bg); border-color: var(--pagination-border); color: var(--pagination-text); } .theme-dark .page-link:hover { background-color: var(--pagination-hover-bg); color: var(--pagination-hover-text); border-color: var(--pagination-border); } .theme-dark .page-item.active .page-link { background-color: var(--pagination-active-bg); border-color: var(--pagination-active-bg); color: var(--pagination-active-text); } .theme-dark .page-item.disabled .page-link { background-color: var(--pagination-disabled-bg); color: var(--pagination-disabled-text); border-color: var(--pagination-border); } /* ----------------------------------------------------------------------------- ALERTS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .alert-success { background-color: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); } .theme-dark .alert-danger { background-color: var(--alert-danger-bg); border-color: var(--alert-danger-border); color: var(--alert-danger-text); } .theme-dark .alert-warning { background-color: var(--alert-warning-bg); border-color: var(--alert-warning-border); color: var(--alert-warning-text); } .theme-dark .alert-info { background-color: var(--alert-info-bg); border-color: var(--alert-info-border); color: var(--alert-info-text); } /* ----------------------------------------------------------------------------- BADGES - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .badge { background-color: var(--badge-bg); color: var(--badge-text); } /* ----------------------------------------------------------------------------- BORDERS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .border { border-color: var(--border-color) !important; } .theme-dark .border-top { border-top-color: var(--border-color) !important; } .theme-dark .border-bottom { border-bottom-color: var(--border-color) !important; } .theme-dark .border-start { border-left-color: var(--border-color) !important; } .theme-dark .border-end { border-right-color: var(--border-color) !important; } .theme-dark hr { border-top-color: var(--divider); opacity: 1; } /* ----------------------------------------------------------------------------- TEXT UTILITIES - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .text-muted { color: var(--text-muted) !important; } .theme-dark .text-secondary { color: var(--text-secondary) !important; } /* ----------------------------------------------------------------------------- DROPDOWNS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); } .theme-dark .dropdown-item { color: var(--text-primary); } .theme-dark .dropdown-item:hover, .theme-dark .dropdown-item:focus { background-color: var(--bg-surface); color: var(--text-primary); } .theme-dark .dropdown-divider { border-top-color: var(--border-color); } /* ----------------------------------------------------------------------------- INPUT GROUPS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .input-group-text { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } /* ----------------------------------------------------------------------------- LIST GROUPS - Dark Theme Overrides ----------------------------------------------------------------------------- */ .theme-dark .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } .theme-dark .list-group-item:hover { background-color: var(--bg-card-hover); } /* === layout/header.css === */ /* ========================================================= HEADER / NAVIGATION STYLES BusOva - Bus Hub Central ========================================================= */ /* --------------------------------------------------------- Main Navigation Bar --------------------------------------------------------- */ header.navbar { background-color: #0b1d2d; box-shadow: var(--shadow-soft); } /* ------------------------------------------------- HEADER TAGLINE ------------------------------------------------- */ .site-header .text-center.small { color: #ffffff; } /* --------------------------------------------------------- Brand & Navigation Links Base --------------------------------------------------------- */ header.navbar .navbar-brand, header.navbar .nav-link { color: var(--text-inverse); } /* --------------------------------------------------------- Header Logo --------------------------------------------------------- */ /* The "Built for Bus Enthusiasts" band is 40px of the 406px logo, so it renders at just under 10% of whatever is set here. Measured at 1:1: 9.5px at 96px, 9.7px at 98px, 10.3px at 104px, 11.1px at 112px. 112px was the point where that small print reads comfortably; this was then brought down by eye for the look of the header, so the tagline is now at the edge of legible rather than clearly readable. That was a deliberate trade, not an oversight. Go back up towards 104-112px if it ever needs to be read rather than recognised. 98px makes the logo 247px wide, near enough what the old square logo plus its separate tagline text occupied, so the navbar width is unchanged. Below the lg breakpoint the logo has to come down further and the small print is decorative. That is unavoidable with the tagline baked into the image. */ .header-logo { max-height: 98px; width: auto; } /* --------------------------------------------------------- Navigation Link States --------------------------------------------------------- */ header.navbar .nav-link { position: relative; padding: 0.5rem 0.85rem; border-radius: 0.5rem; font-weight: 500; transition: color 0.15s ease, background-color 0.15s ease; } /* Hover state (non-active only) */ header.navbar .nav-link:not(.active):hover { background-color: rgba(255, 255, 255, 0.08); } /* Focus state for accessibility */ header.navbar .nav-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* --------------------------------------------------------- Active Navigation State --------------------------------------------------------- */ header.navbar .nav-link.active, header.navbar .nav-link[aria-current="page"] { color: var(--nav-active-color); background-color: var(--nav-active-bg); font-weight: 600; } /* Icon inside active link inherits color */ header.navbar .nav-link.active i, header.navbar .nav-link[aria-current="page"] i { color: inherit; } /* --------------------------------------------------------- Mobile Navigation Toggle --------------------------------------------------------- */ header.navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.3); padding: 0.25rem 0.5rem; } header.navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } header.navbar .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%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* --------------------------------------------------------- Dropdown Menus - Base Styles --------------------------------------------------------- */ .navbar .dropdown-menu { border: 1px solid var(--bs-border-color, #dee2e6); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 6px; min-width: 180px; } /* --------------------------------------------------------- Dropdown Menus - Light Theme --------------------------------------------------------- */ [data-bs-theme="light"] .navbar .dropdown-menu { background-color: #ffffff; border-color: #e2e5e9; } [data-bs-theme="light"] .navbar .dropdown-item { color: #212529; border-radius: 5px; padding: 8px 12px; font-size: 0.9rem; transition: all 0.15s ease; } [data-bs-theme="light"] .navbar .dropdown-item:hover, [data-bs-theme="light"] .navbar .dropdown-item:focus { background-color: #f1f3f5; color: #212529; } [data-bs-theme="light"] .navbar .dropdown-item.active, [data-bs-theme="light"] .navbar .dropdown-item:active { background-color: #0d6efd; color: #ffffff; } [data-bs-theme="light"] .navbar .dropdown-item.text-muted { color: #6c757d !important; } [data-bs-theme="light"] .navbar .dropdown-item.text-muted:hover { background-color: transparent; color: #6c757d !important; } [data-bs-theme="light"] .navbar .dropdown-divider { border-color: #e9ecef; margin: 6px 0; } /* --------------------------------------------------------- Dropdown Menus - Dark Theme --------------------------------------------------------- */ [data-bs-theme="dark"] .navbar .dropdown-menu { background-color: #2b3035; border-color: #3d4349; } [data-bs-theme="dark"] .navbar .dropdown-item { color: #e9ecef; border-radius: 5px; padding: 8px 12px; font-size: 0.9rem; transition: all 0.15s ease; } [data-bs-theme="dark"] .navbar .dropdown-item:hover, [data-bs-theme="dark"] .navbar .dropdown-item:focus { background-color: #343a40; color: #ffffff; } [data-bs-theme="dark"] .navbar .dropdown-item.active, [data-bs-theme="dark"] .navbar .dropdown-item:active { background-color: #0d6efd; color: #ffffff; } [data-bs-theme="dark"] .navbar .dropdown-item.text-muted { color: #9ca3af !important; } [data-bs-theme="dark"] .navbar .dropdown-item.text-muted:hover { background-color: transparent; color: #9ca3af !important; } [data-bs-theme="dark"] .navbar .dropdown-divider { border-color: #4b5563; margin: 6px 0; } /* --------------------------------------------------------- Dropdown - Icon & Badge Styling --------------------------------------------------------- */ .navbar .dropdown-item i { width: 18px; text-align: center; opacity: 0.7; } .navbar .dropdown-item:hover i { opacity: 1; } .navbar .dropdown-item .badge { font-size: 0.65rem; padding: 0.2em 0.5em; vertical-align: middle; } /* --------------------------------------------------------- Dropdown - Hover to Open (Desktop) --------------------------------------------------------- */ @media (min-width: 992px) { header.navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } header.navbar .nav-item.dropdown > .dropdown-toggle:active { pointer-events: none; } } /* --------------------------------------------------------- User Avatar in Navigation --------------------------------------------------------- */ .nav-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); transition: border-color 0.15s ease; } .nav-avatar:hover { border-color: rgba(255, 255, 255, 0.6); } /* --------------------------------------------------------- Responsive Adjustments --------------------------------------------------------- */ @media (max-width: 991.98px) { header.navbar .navbar-collapse { padding: 1rem 0; } header.navbar .nav-link { padding: 0.75rem 1rem; border-radius: 0.375rem; } .header-logo { max-height: 78px; } } @media (max-width: 575.98px) { .header-logo { max-height: 60px; } } /* ---------------------------------------------------------- SITE BANNER (maintenance/announcement) ---------------------------------------------------------- */ .site-banner { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; position: sticky; top: 0; z-index: 1060; } .site-banner-content { flex: 1; text-align: center; min-width: 0; } /* The optional call to action on the site banner. Its colours are set inline from the banner's own palette (the text colour becomes the pill background), so it reads on every banner colour without a rule per colour. */ .site-banner-cta { display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.7rem; border-radius: 50rem; font-weight: 700; font-size: 0.8rem; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } .site-banner-cta:hover, .site-banner-cta:focus { opacity: 0.85; text-decoration: none; } .site-banner-close { background: rgba(0,0,0,0.15); border: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8; font-size: 0.8rem; flex-shrink: 0; transition: opacity 0.2s, background 0.2s; padding: 0; } .site-banner-close:hover { opacity: 1; background: rgba(0,0,0,0.25); } /* ========================================================= MEMBER MENUS: notification bell + grouped Account menu ========================================================= */ /* The bell is an icon, so it does not want the dropdown caret. */ header.navbar .dropdown-toggle.no-caret::after { display: none; } /* Count on the bell: sits on the top-right of the icon on desktop, inline in the collapsed mobile menu. */ header.navbar .notif-badge { font-size: 0.6rem; padding: 0.2em 0.45em; } @media (min-width: 992px) { header.navbar .notif-badge { position: absolute; top: 2px; right: 0; } } @media (max-width: 991.98px) { header.navbar .notif-badge { margin-left: 0.5rem; } } /* Section titles inside the Account menu. Greys chosen to pass on both menu backgrounds (the same pair as .dropdown-item.text-muted above). */ .navbar .dropdown-header { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px 2px; } [data-bs-theme="light"] .navbar .dropdown-header { color: #6c757d; } [data-bs-theme="dark"] .navbar .dropdown-header { color: #9ca3af; } .navbar .account-menu { min-width: 230px; } .navbar .account-menu .account-menu-who { text-transform: none; letter-spacing: normal; font-size: 0.9rem; padding: 8px 12px; } [data-bs-theme="light"] .navbar .account-menu .account-menu-who strong { color: #212529; } [data-bs-theme="dark"] .navbar .account-menu .account-menu-who strong { color: #ffffff; } /* ---- Notification dropdown ---- */ .navbar .notif-menu { width: 360px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; } .notif-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid; } [data-bs-theme="light"] .notif-menu-head { border-color: #e9ecef; color: #212529; } [data-bs-theme="dark"] .notif-menu-head { border-color: #4b5563; color: #ffffff; } .notif-empty { padding: 22px 16px; text-align: center; font-size: 0.85rem; } [data-bs-theme="light"] .notif-empty { color: #6c757d; } [data-bs-theme="dark"] .notif-empty { color: #9ca3af; } .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid; transition: background-color 0.15s ease; } .notif-item:last-child { border-bottom: 0; } [data-bs-theme="light"] .notif-item { color: #212529; border-color: #f1f3f5; } [data-bs-theme="dark"] .notif-item { color: #e9ecef; border-color: #3d4349; } [data-bs-theme="light"] .notif-item:hover { background-color: #f1f3f5; color: #212529; } [data-bs-theme="dark"] .notif-item:hover { background-color: #343a40; color: #ffffff; } /* Unread: a tint and a bar down the left edge, so it does not rely on bold. */ .notif-item.is-unread { box-shadow: inset 3px 0 0 #0d6efd; } [data-bs-theme="light"] .notif-item.is-unread { background-color: #eef4ff; } [data-bs-theme="dark"] .notif-item.is-unread { background-color: #1f2a3a; } .notif-icon { margin-top: 3px; width: 16px; text-align: center; flex-shrink: 0; } [data-bs-theme="light"] .notif-accepted { color: #198754; } [data-bs-theme="light"] .notif-partial { color: #b45309; } [data-bs-theme="light"] .notif-rejected { color: #dc3545; } [data-bs-theme="light"] .notif-hidden { color: #6c757d; } [data-bs-theme="dark"] .notif-accepted { color: #4ade80; } [data-bs-theme="dark"] .notif-partial { color: #fbbf24; } [data-bs-theme="dark"] .notif-rejected { color: #f87171; } [data-bs-theme="dark"] .notif-hidden { color: #9ca3af; } .notif-body { display: flex; flex-direction: column; min-width: 0; } .notif-title { font-size: 0.85rem; font-weight: 600; line-height: 1.3; white-space: normal; } .notif-reason { font-size: 0.8rem; line-height: 1.3; white-space: normal; margin-top: 2px; } .notif-time { font-size: 0.72rem; margin-top: 3px; } [data-bs-theme="light"] .notif-reason, [data-bs-theme="light"] .notif-time { color: #6c757d; } [data-bs-theme="dark"] .notif-reason, [data-bs-theme="dark"] .notif-time { color: #9ca3af; } /* ========================================================= EXPLORE MEGA MENU + PHONE TOP BAR ========================================================= */ /* ---- Mega menu (desktop) ---- */ .navbar .mega-menu { width: 780px; max-width: calc(100vw - 2rem); padding: 14px; } .mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; } .mega-col { min-width: 0; } .mega-col-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; padding: 0 10px 6px; border-bottom: 1px solid; } [data-bs-theme="light"] .mega-col-title { color: #6c757d; border-color: #e9ecef; } [data-bs-theme="dark"] .mega-col-title { color: #9ca3af; border-color: #4b5563; } .navbar .mega-menu .mega-link { display: flex; gap: 10px; align-items: flex-start; white-space: normal; padding: 8px 10px; } .mega-icon { flex: 0 0 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .navbar .mega-menu .mega-link .mega-icon i { opacity: 1; width: auto; } [data-bs-theme="light"] .mega-icon { background: #e7f0ff; color: #0d6efd; } [data-bs-theme="dark"] .mega-icon { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; } /* On the active link the whole row is solid blue, so the icon chip must not be too. */ .navbar .mega-menu .mega-link.active .mega-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; } .mega-text { display: flex; flex-direction: column; min-width: 0; } .mega-title { font-weight: 600; line-height: 1.25; } .mega-desc { font-size: 0.78rem; line-height: 1.3; margin-top: 1px; } [data-bs-theme="light"] .mega-desc { color: #6c757d; } [data-bs-theme="dark"] .mega-desc { color: #9ca3af; } .navbar .mega-menu .mega-link.active .mega-desc { color: rgba(255, 255, 255, 0.85); } /* Between lg and a wide screen the panel narrows to two columns rather than squeezing three. */ @media (min-width: 992px) and (max-width: 1199.98px) { .navbar .mega-menu { width: 520px; } .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Phone ---- */ @media (max-width: 991.98px) { /* In the collapsed menu the panel is just a stacked list; the descriptions come out so it stays short. */ .navbar .mega-menu { width: 100%; max-width: none; padding: 6px; box-shadow: none; } .mega-grid { grid-template-columns: 1fr; gap: 4px; } .mega-desc { display: none; } .mega-icon { flex-basis: 26px; height: 26px; } /* Phone top bar: Add and the bell sit beside the hamburger. */ .header-quick .nav-link { padding: 0.5rem 0.7rem; font-size: 1.05rem; } .header-quick .header-quick-add { background: #0d6efd; color: #ffffff; border-radius: 50%; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-right: 0.35rem; } /* The bell sits near the right edge, so a menu hung off the bell itself runs off the left of a phone. Hang it off the header bar instead (the navbar is the positioned ancestor once the bell's wrapper stops being one) and let it span the screen with a margin either side. */ .header-quick .dropdown { position: static; } header.navbar .header-quick .notif-menu { position: absolute; top: 100%; left: 0.75rem; right: 0.75rem; width: auto; max-width: none; } } /* Right-align the "-end" menus even when they are opened by hover. Bootstrap only applies right:0 once its own click handler has run (it adds data-bs-popper then), so a menu opened by the hover rule above stayed left-aligned and ran off the right edge of the page. The wide panels (mega menu, notifications) made it obvious. */ @media (min-width: 992px) { header.navbar .dropdown-menu.dropdown-menu-end { right: 0; left: auto; } } /* The | between Account and the bell. */ header.navbar .nav-sep { color: rgba(255, 255, 255, 0.35); font-weight: 300; padding: 0 0.1rem; user-select: none; } /* === layout/footer.css === */ /* ========================================================= FOOTER STYLES BusOva - Bus Hub Central ========================================================= */ /* Force-remove underlines in footer (override Bootstrap) */ .site-footer a, .site-footer a:hover, .site-footer a:focus, .site-footer a:active { text-decoration: none !important; } /* --------------------------------------------------------- Site Footer Container --------------------------------------------------------- */ .site-footer { background-color: #0b1d2d; padding: 1rem 0 2rem; text-align: center; box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.4); } .site-footer a { color: rgba(255,255,255,0.85); } .footer-legal-links a:not(:last-child)::after { content: " | "; color: rgba(255, 255, 255, 0.4); /* separator colour */ margin: 0 0.40rem; } /* ------------------------------------------------- FOOTER TAGLINE ------------------------------------------------- */ .site-footer .text-center.small { color: #ffffff; } /* Data source credit under the copyright line (inc/footer-attribution.php) */ .site-footer .footer-attribution { max-width: 700px; margin: 0 auto; padding: 0 1rem; font-size: 0.75rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } .site-footer .footer-attribution a { color: rgba(255, 255, 255, 0.85); border-bottom: 1px dotted rgba(255, 255, 255, 0.35); } .site-footer .footer-attribution a:hover { color: #ffffff; } .site-footer .footer-attribution-more { white-space: nowrap; margin-left: 0.25rem; } /* --------------------------------------------------------- Footer Divider --------------------------------------------------------- */ .footer-divider { height: 2px; background: linear-gradient(to right, #2c3e50, #0d6efd, #2c3e50); opacity: 0.6; border-radius: 2px; } /* --------------------------------------------------------- Newsletter Banner --------------------------------------------------------- */ .newsletter-banner { max-width: 360px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.5rem; box-shadow: var(--shadow-soft); } .newsletter-input { min-width: 60%; } /* Newsletter text in footer - override dark text */ .site-footer .newsletter-box h6 { color: #ffffff; } .site-footer .newsletter-box .text-muted { color: rgba(255, 255, 255, 0.85) !important; } /* --------------------------------------------------------- Social Links --------------------------------------------------------- */ .social-link { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.4rem; color: var(--text-inverse); background: rgba(255, 255, 255, 0.08); text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease; } .social-link:hover, .social-link:focus { transform: translateY(-4px); background: rgba(255, 255, 255, 0.15); color: var(--text-inverse); outline: none; } .social-link:focus-visible { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.5); } /* --------------------------------------------------------- Footer Links --------------------------------------------------------- */ .footer-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; } .footer-link:hover, .footer-link:focus { color: var(--text-inverse); } .footer-heading { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--text-muted); } .footer-links li { margin-bottom: 0.25rem; } .footer-links a { text-decoration: none; } .footer-links a:hover { text-decoration: underline; } /* --------------------------------------------------------- Footer Copyright --------------------------------------------------------- */ .footer-copyright { color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; } /* === components/page-title.css === */ /* ============================================================ PAGE TITLE The single heading component every page uses. Before this existed each page picked its own Bootstrap heading class, so the same kind of page came out at .h3 in one place and .h5 in another, and the icon beside it changed size with it. One class, one size, everywhere. Markup:

Page Name

The icon needs no me-2: the flex gap spaces it. Vertical spacing is left to the usual mb-* utility so a heading can sit tight above a lead paragraph or loose above a table. ============================================================ */ :root { /* One number for every page heading on the site. Steady on a phone, full size from about a tablet up. Sections that keep their own heading class still pull their size from here. */ --page-title-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); /* And one number for the line underneath it. Pages used to pick their own, so the same sentence came out at .9rem on one page and 1rem on the next. */ --page-subtitle-size: 1rem; } .page-title, .admin-page-title { display: flex; align-items: center; gap: .75rem; font-size: var(--page-title-size); font-weight: 700; line-height: 1.25; margin-bottom: 0; } /* Long titles wrap under the icon rather than squashing it. */ .page-title > i, .admin-page-title > i { color: var(--bs-primary); font-size: 1em; flex-shrink: 0; line-height: 1; } /* A heading that carries a badge or a plate next to the text keeps them on the same baseline instead of stacking. */ .page-title { flex-wrap: wrap; } /* A flex heading ignores text-align, so centring has to be said in flex terms. Covers both the class on the heading and a centred wrapper around it, which is how the empty and not-found states are built. */ .page-title.text-center, .text-center .page-title, .admin-page-title.text-center { justify-content: center; text-align: center; } /* Subheadings inside a page: one step down, same icon treatment, so a card heading never competes with the page heading. */ .section-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin-bottom: 0; } .section-title > i { color: var(--bs-primary); font-size: 1em; flex-shrink: 0; } /* The lead line that follows a page title. Size as well as colour: a subtitle is a subtitle, and .small or .lead on one page was the whole reason they did not match. Set on the element rather than inherited so it beats a .small sitting alongside it. */ .page-subtitle { color: var(--text-muted, #6c757d); font-size: var(--page-subtitle-size); font-weight: 400; font-style: normal; line-height: 1.55; } /* === components/cards.css === */ /* ========================================================================= CARDS - Card Component Styles ========================================================================= */ /** * Card components for content containers, profile displays, and data grouping. * Built on Bootstrap cards with BusOva theming. */ /* --------------------------------------------------------------------- Base Card Style --------------------------------------------------------------------- */ .card { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.75rem; box-shadow: var(--shadow-soft); color: var(--text-main); transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-1px); } /* Disable hover effect for static cards */ .card.card-static:hover { transform: none; } /* --------------------------------------------------------------------- Card Header --------------------------------------------------------------------- */ .card-header { background-color: var(--bg-card-soft); color: var(--text-main); font-weight: 600; font-size: 0.9rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-subtle); border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px); } /* Icon inside header */ .card-header i, .card-header svg { color: var(--accent); margin-right: 0.5rem; } /* Header with actions (e.g., dropdown, buttons) */ .card-header-actions { display: flex; align-items: center; justify-content: space-between; } .card-header-actions .card-title { margin: 0; } /* --------------------------------------------------------------------- Card Body --------------------------------------------------------------------- */ .card-body { padding: 1rem; } /* Reduced top padding when following header */ .card-header + .card-body { padding-top: 0.85rem; } /* --------------------------------------------------------------------- Card Footer --------------------------------------------------------------------- */ .card-footer { background-color: var(--bg-card-soft); border-top: 1px solid var(--border-subtle); padding: 0.65rem 0.85rem; border-bottom-left-radius: calc(0.75rem - 1px); border-bottom-right-radius: calc(0.75rem - 1px); } /* --------------------------------------------------------------------- Card Title & Text --------------------------------------------------------------------- */ .card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-main); } .card-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: -0.25rem; margin-bottom: 0.5rem; } .card-text { font-size: 0.9rem; color: var(--text-main); } .card-text:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------- Card Image --------------------------------------------------------------------- */ .card-img-top { border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px); } .card-img-bottom { border-bottom-left-radius: calc(0.75rem - 1px); border-bottom-right-radius: calc(0.75rem - 1px); } /* Image overlay cards */ .card-img-overlay { border-radius: calc(0.75rem - 1px); } /* --------------------------------------------------------------------- Card Links --------------------------------------------------------------------- */ .card-link { color: var(--accent); font-weight: 500; } .card-link:hover { color: var(--accent-hover); } .card-link + .card-link { margin-left: 1rem; } /* --------------------------------------------------------------------- Clickable Cards --------------------------------------------------------------------- */ .card-clickable { cursor: pointer; } .card-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .card-clickable:active { transform: translateY(0); } /* --------------------------------------------------------------------- Card Variants --------------------------------------------------------------------- */ /* Borderless card */ .card-borderless { border: none; } /* Flat card (no shadow) */ .card-flat { box-shadow: none; } .card-flat:hover { transform: none; } /* Highlighted card */ .card-highlight { border-left: 3px solid var(--accent); } /* Success card */ .card-success { border-color: #198754; } .card-success .card-header { background-color: rgba(25, 135, 84, 0.1); border-bottom-color: rgba(25, 135, 84, 0.2); } /* Danger card */ .card-danger { border-color: #dc3545; } .card-danger .card-header { background-color: rgba(220, 53, 69, 0.1); border-bottom-color: rgba(220, 53, 69, 0.2); } /* Warning card */ .card-warning { border-color: #ffc107; } .card-warning .card-header { background-color: rgba(255, 193, 7, 0.1); border-bottom-color: rgba(255, 193, 7, 0.2); } /* --------------------------------------------------------------------- Stat Cards (Dashboard) --------------------------------------------------------------------- */ .stat-card { text-align: center; } .stat-card .stat-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; margin-bottom: 0.75rem; } .stat-card .stat-icon i { font-size: 1.25rem; line-height: 1; } .stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; } .stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* --------------------------------------------------------------------- Members Page Avatar Override --------------------------------------------------------------------- */ .members-page .avatar-sm { width: 96px !important; height: 96px !important; } /* --------------------------------------------------------------------- Volunteer Card Float (Index Page) --------------------------------------------------------------------- */ .volunteer-float { float: right; max-width: 340px; margin: 0 0 1.5rem 1.5rem; } @media (max-width: 768px) { .volunteer-float { float: none; display: block; max-width: 100%; margin: 0 auto 1.5rem auto; } } /* --------------------------------------------------------------------- Card Groups --------------------------------------------------------------------- */ .card-group > .card { border-radius: 0; } .card-group > .card:first-child { border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } .card-group > .card:last-child { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .card { background-color: var(--bg-card); border-color: var(--border-subtle); color: var(--text-main); } body.theme-dark .card-header { background-color: var(--bg-card-soft); color: #fff; border-bottom-color: var(--border-subtle); } body.theme-dark .card-footer { background-color: var(--bg-card-soft); border-top-color: var(--border-subtle); } body.theme-dark .card-title { color: #fff; } body.theme-dark .card-subtitle { color: var(--text-muted); } body.theme-dark .card-clickable:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } /* Dark theme stat cards */ body.theme-dark .stat-card .stat-value { color: #fff; } /* Dark theme card variants */ body.theme-dark .card-success { border-color: #198754; } body.theme-dark .card-success .card-header { background-color: rgba(25, 135, 84, 0.15); } body.theme-dark .card-danger { border-color: #dc3545; } body.theme-dark .card-danger .card-header { background-color: rgba(220, 53, 69, 0.15); } body.theme-dark .card-warning { border-color: #ffc107; } body.theme-dark .card-warning .card-header { background-color: rgba(255, 193, 7, 0.15); } /* === components/forms.css === */ /* ========================================================================= FORMS - Form Input & Control Styles ========================================================================= */ /** * Form styles for inputs, selects, textareas, and form layouts. * Built on Bootstrap forms with BusOva theming. */ /* --------------------------------------------------------------------- Base Input Styles --------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--bg-card-soft); border: 1px solid var(--border-subtle); border-radius: 0.45rem; color: var(--text-main); font-size: 0.9rem; padding: 0.5rem 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .form-control::placeholder { color: var(--text-muted); opacity: 0.8; } textarea.form-control { min-height: 100px; resize: vertical; } /* --------------------------------------------------------------------- Focus State --------------------------------------------------------------------- */ .form-control:focus, .form-select:focus { border-color: var(--accent); background-color: var(--bg-card); box-shadow: 0 0 0 0.2rem var(--accent-soft); outline: none; } /* --------------------------------------------------------------------- Disabled & Readonly States --------------------------------------------------------------------- */ .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--bg-card-soft); opacity: 0.65; cursor: not-allowed; } .form-control-plaintext { padding-left: 0; padding-right: 0; border-color: transparent; background-color: transparent; } /* --------------------------------------------------------------------- Validation States - Success --------------------------------------------------------------------- */ .form-control.is-valid, .form-select.is-valid { border-color: #198754; background-image: none; } .form-control.is-valid:focus, .form-select.is-valid:focus { border-color: #198754; box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.2); } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 500; color: #198754; } .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip { display: block; } /* --------------------------------------------------------------------- Validation States - Error --------------------------------------------------------------------- */ .form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; background-image: none; } .form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.85rem; font-weight: 500; color: #dc3545; } .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block; } /* --------------------------------------------------------------------- Input Sizes --------------------------------------------------------------------- */ .form-control-sm, .form-select-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; border-radius: 0.35rem; } .form-control-lg, .form-select-lg { padding: 0.65rem 1rem; font-size: 1rem; border-radius: 0.5rem; } /* --------------------------------------------------------------------- Labels --------------------------------------------------------------------- */ .form-label { font-weight: 500; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--text-main); } .form-label.required::after { content: ' *'; color: #dc3545; } /* --------------------------------------------------------------------- Help Text --------------------------------------------------------------------- */ .form-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } /* --------------------------------------------------------------------- Input Groups --------------------------------------------------------------------- */ .input-group-text { background-color: var(--bg-card-soft); border-color: var(--border-subtle); color: var(--text-muted); font-size: 0.9rem; } .input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; } /* --------------------------------------------------------------------- Checkboxes & Radios --------------------------------------------------------------------- */ .form-check-input { width: 1.1em; height: 1.1em; margin-top: 0.2em; background-color: var(--bg-card-soft); border: 1px solid var(--border-subtle); transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); } .form-check-label { font-size: 0.9rem; color: var(--text-main); cursor: pointer; } /* Inline checkboxes/radios */ .form-check-inline { margin-right: 1rem; } /* Switch toggle */ .form-switch .form-check-input { width: 2.5em; border-radius: 2em; } /* --------------------------------------------------------------------- Select Dropdown Arrow --------------------------------------------------------------------- */ .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; padding-right: 2.25rem; appearance: none; } /* --------------------------------------------------------------------- File Input --------------------------------------------------------------------- */ .form-control[type="file"] { padding: 0.375rem 0.75rem; } .form-control[type="file"]::file-selector-button { padding: 0.375rem 0.75rem; margin: -0.375rem 0.75rem -0.375rem -0.75rem; border: 0; border-right: 1px solid var(--border-subtle); background-color: var(--bg-card-soft); color: var(--text-main); cursor: pointer; transition: background-color 0.15s ease; } .form-control[type="file"]::file-selector-button:hover { background-color: var(--border-subtle); } /* --------------------------------------------------------------------- Range Input --------------------------------------------------------------------- */ .form-range { width: 100%; height: 1.5rem; padding: 0; background-color: transparent; } .form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; background-color: var(--accent); border: 0; border-radius: 50%; cursor: pointer; transition: background-color 0.15s ease; } .form-range::-webkit-slider-thumb:hover { background-color: var(--accent-hover); } .form-range::-webkit-slider-runnable-track { height: 0.5rem; background-color: var(--bg-card-soft); border-radius: 0.25rem; } /* --------------------------------------------------------------------- Floating Labels --------------------------------------------------------------------- */ .form-floating > .form-control, .form-floating > .form-select { height: calc(3.5rem + 2px); padding: 1rem 0.75rem; } .form-floating > label { padding: 1rem 0.75rem; color: var(--text-muted); } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--accent); transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .form-control, body.theme-dark .form-select, body.theme-dark textarea { background-color: var(--bg-card-soft); border-color: var(--border-subtle); color: #fff; } body.theme-dark .form-control::placeholder, body.theme-dark textarea::placeholder { color: #9aa3bf; opacity: 1; } body.theme-dark .form-control:focus, body.theme-dark .form-select:focus, body.theme-dark textarea:focus { background-color: var(--bg-card); border-color: var(--accent); color: #fff; } body.theme-dark .form-label { color: var(--text-main); } body.theme-dark .form-text { color: #cfd5e6; } body.theme-dark .input-group-text { background-color: var(--bg-card-soft); border-color: var(--border-subtle); color: #9aa3bf; } body.theme-dark .form-check-input { background-color: var(--bg-card-soft); border-color: var(--border-subtle); } body.theme-dark .form-check-label { color: var(--text-main); } body.theme-dark .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa3bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } body.theme-dark .form-control[type="file"]::file-selector-button { background-color: var(--bg-card); border-color: var(--border-subtle); color: var(--text-main); } body.theme-dark .form-control[type="file"]::file-selector-button:hover { background-color: var(--border-subtle); } body.theme-dark .form-control-plaintext { color: var(--text-main); } body.theme-dark .valid-feedback { color: #75d9a3; } body.theme-dark .invalid-feedback { color: #f5a3ab; } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 576px) { .form-control, .form-select { font-size: 16px; /* Prevents iOS zoom on focus */ } } /* === components/tables.css === */ /* ========================================================================= TABLES - Data Table Styles ========================================================================= */ /** * Table styles for data display, admin areas, and listing pages. * Built on Bootstrap tables with BusOva theming. */ /* --------------------------------------------------------------------- Base Table Style --------------------------------------------------------------------- */ .table { width: 100%; margin-bottom: 1rem; color: var(--text-main); vertical-align: middle; border-color: var(--border-subtle); border-collapse: separate; border-spacing: 0 0.75rem; } .table > :not(caption) > * > * { padding: 0.75rem; background-color: var(--bg-card); border-bottom: 1px solid var(--border-subtle); } .table thead th { padding-bottom: 0.75rem; } .table tbody tr { margin-bottom: 0.75rem; } .table tbody tr td { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Rounded corners for table rows */ .table tbody tr { border-radius: 0.5rem; overflow: hidden; } .table tbody tr td:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .table tbody tr td:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .table thead tr th:first-child { border-top-left-radius: 0.5rem; } .table thead tr th:last-child { border-top-right-radius: 0.5rem; } /* --------------------------------------------------------------------- Table Header --------------------------------------------------------------------- */ .table thead th { font-weight: 600; font-size: 0.85rem; color: var(--text-main); background-color: var(--bg-card-soft); border-bottom: 2px solid var(--border-subtle); white-space: nowrap; border-radius: 0; } .table thead th:first-child { border-top-left-radius: 0.5rem; } .table thead th:last-child { border-top-right-radius: 0.5rem; } /* Sortable headers */ .table thead th[data-sort], .table thead th.sortable { cursor: pointer; user-select: none; transition: background-color 0.15s ease; } .theme-light .table thead th[data-sort]:hover, .theme-light .table thead th.sortable:hover { background-color: rgba(0, 0, 0, 0.05); } /* Active sort column */ .table thead th.sort-active { color: var(--accent); background-color: rgba(14, 155, 255, 0.08); } .table thead th.sort-active i, .table thead th.sort-active svg { color: var(--accent); } /* Sort icons */ .table thead th .sort-icon { margin-left: 0.35rem; opacity: 0.4; font-size: 0.75rem; } .table thead th:hover .sort-icon { opacity: 0.7; } .table thead th.sort-active .sort-icon { opacity: 1; } /* --------------------------------------------------------------------- Table Body --------------------------------------------------------------------- */ .table tbody tr { transition: background-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid transparent; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .theme-light .table tbody tr { border: 1px solid var(--border-color-light); } .theme-light .table tbody tr td { border-right: 1px solid var(--border-color-light); } .theme-light .table tbody tr td:last-child { border-right: none; } .theme-light .table tbody tr:hover { background-color: rgba(13, 110, 253, 0.06); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } /* Clickable rows */ .table tbody tr.clickable { cursor: pointer; } .theme-light .table tbody tr.clickable:hover { background-color: rgba(13, 110, 253, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } body.theme-dark .table tbody tr.clickable:hover { background-color: var(--table-hover-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), -2px 0 0 var(--accent); } /* Selected row */ .theme-light .table tbody tr.selected { background-color: rgba(13, 110, 253, 0.12); } body.theme-dark .table tbody tr.selected { background-color: var(--table-active-bg); box-shadow: -3px 0 0 var(--accent); } /* --------------------------------------------------------------------- Striped Tables --------------------------------------------------------------------- */ .theme-light .table-striped tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.03); border: 1px solid var(--border-color-light); } .theme-light .table-striped tbody tr:nth-child(even):hover { background-color: rgba(13, 110, 253, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .theme-light .table-striped tbody tr:nth-child(odd) { border: 1px solid var(--border-color-light); } /* --------------------------------------------------------------------- Bordered Tables --------------------------------------------------------------------- */ .table-bordered > :not(caption) > * > * { border: 1px solid var(--border-subtle); } /* --------------------------------------------------------------------- Borderless Tables --------------------------------------------------------------------- */ .table-borderless > :not(caption) > * > * { border-bottom-width: 0; } /* --------------------------------------------------------------------- Compact/Dense Tables --------------------------------------------------------------------- */ .table-sm > :not(caption) > * > * { padding: 0.4rem 0.5rem; } /* Admin area table density */ body.admin-area .table th, body.admin-area .table td { padding: 0.45rem 0.65rem; vertical-align: middle; font-size: 0.85rem; } body.admin-area .table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* --------------------------------------------------------------------- Sticky Header --------------------------------------------------------------------- */ .table-sticky thead th { position: sticky; top: 0; z-index: 3; background-color: var(--bg-card-soft); } /* With offset for fixed navbar */ .table-sticky-offset thead th { top: 60px; /* Adjust based on navbar height */ } /* --------------------------------------------------------------------- Responsive Tables --------------------------------------------------------------------- */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Hide scrollbars visually; content remains scrollable via wheel/touch/trackpad */ scrollbar-width: none; /* Firefox */ } .table-responsive::-webkit-scrollbar { height: 0; /* effectively hides the horizontal scrollbar track */ } /* --------------------------------------------------------------------- Table Variants (Row Colors) --------------------------------------------------------------------- */ .table-primary { --bs-table-bg: rgba(13, 110, 253, 0.1); --bs-table-hover-bg: rgba(13, 110, 253, 0.15); } .table-success { --bs-table-bg: rgba(25, 135, 84, 0.1); --bs-table-hover-bg: rgba(25, 135, 84, 0.15); } .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.1); --bs-table-hover-bg: rgba(220, 53, 69, 0.15); } .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.1); --bs-table-hover-bg: rgba(255, 193, 7, 0.15); } .table-info { --bs-table-bg: rgba(13, 202, 240, 0.1); --bs-table-hover-bg: rgba(13, 202, 240, 0.15); } /* --------------------------------------------------------------------- Table Actions Column --------------------------------------------------------------------- */ .table .actions-cell { white-space: nowrap; text-align: right; width: 1%; } .table .actions-cell .btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; } .table .actions-cell .btn + .btn { margin-left: 0.25rem; } /* --------------------------------------------------------------------- Empty State --------------------------------------------------------------------- */ .table-empty { text-align: center; padding: 2rem 1rem; color: var(--text-muted); } .table-empty i, .table-empty svg { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; } .table-empty p { margin: 0; } body.theme-dark .table-empty { color: var(--text-muted); } body.theme-dark .table-empty i, body.theme-dark .table-empty svg { opacity: 0.4; color: var(--text-muted); } /* --------------------------------------------------------------------- Dark Theme - Bootstrap Variable Overrides --------------------------------------------------------------------- */ body.theme-dark .table { --bs-table-bg: var(--bg-card); --bs-table-striped-bg: var(--bg-card-soft); --bs-table-hover-bg: rgba(14, 155, 255, 0.14); --bs-table-active-bg: rgba(14, 155, 255, 0.18); --bs-table-color: var(--text-main); --bs-table-striped-color: var(--text-main); --bs-table-hover-color: var(--text-main); --bs-table-active-color: var(--text-main); --bs-table-border-color: var(--border-subtle); color: var(--text-main); border-collapse: separate; border-spacing: 0 0.75rem; } body.theme-dark .table thead th { padding-bottom: 0.75rem; } body.theme-dark .table tbody tr { margin-bottom: 0.75rem; } body.theme-dark .table tbody tr td { padding-top: 0.75rem; padding-bottom: 0.75rem; } body.theme-dark .table tbody tr { border-radius: 0.5rem; overflow: hidden; } body.theme-dark .table tbody tr td:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } body.theme-dark .table tbody tr td:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } body.theme-dark .table thead tr th:first-child { border-top-left-radius: 0.5rem; } body.theme-dark .table thead tr th:last-child { border-top-right-radius: 0.5rem; } body.theme-dark .table > :not(caption) > * > * { background-color: var(--bs-table-bg); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } body.theme-dark .table thead th { background-color: var(--bg-card-soft); color: var(--text-inverse); border-bottom-color: var(--border-subtle); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } body.theme-dark .table tbody tr { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.5rem; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } body.theme-dark .table tbody tr:last-child { border-bottom: 1px solid var(--border-subtle); } body.theme-dark .table tbody tr td { border: none; border-right: 1px solid var(--border-subtle); } body.theme-dark .table tbody tr td:last-child { border-right: none; } body.theme-dark .table tbody tr:nth-child(even) { background-color: var(--bg-card-soft); } body.theme-dark .table tbody tr:hover { background-color: var(--table-hover-bg); transform: translateX(2px) translateY(-1px); box-shadow: -2px 0 0 var(--accent), 0 2px 8px rgba(0, 0, 0, 0.3); } body.theme-dark .table tbody tr.clickable:hover { background-color: var(--table-hover-bg); cursor: pointer; } body.theme-dark .table tbody tr.selected { background-color: var(--table-active-bg); box-shadow: -3px 0 0 var(--accent); } body.theme-dark .table tbody td { color: var(--text-main); border-color: var(--border-subtle); padding: 0.75rem; } body.theme-dark .table tbody td strong, body.theme-dark .table tbody td b { color: var(--text-inverse); font-weight: 600; } /* Style plain text links inside tables, but leave button-styled s alone so the View button (and any other .btn link) keeps its white text. */ body.theme-dark .table a:not(.btn) { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } body.theme-dark .table a:not(.btn):hover { color: var(--accent-hover); text-decoration: underline; } /* Dark theme sortable headers */ body.theme-dark .table thead th[data-sort]:hover, body.theme-dark .table thead th.sortable:hover { background-color: var(--accent-soft); color: var(--accent); } body.theme-dark .table thead th.sort-active { background-color: var(--accent-soft); color: var(--accent); border-bottom-color: var(--accent); } body.theme-dark .table thead th.sort-active i, body.theme-dark .table thead th.sort-active svg { color: var(--accent); } /* Dark theme sticky header */ body.theme-dark .table-sticky thead th { background-color: var(--bg-card-soft); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-bottom: 2px solid var(--accent); } body.theme-dark .table-bordered { border: none; border-spacing: 0 0.5rem; } body.theme-dark .table-bordered tbody tr { border: 1px solid var(--border-subtle); border-radius: 0.5rem; } body.theme-dark .table-bordered tbody tr td { border-right: 1px solid var(--border-subtle); } body.theme-dark .table-bordered tbody tr td:last-child { border-right: none; } .theme-light .table-bordered { border: none; border-spacing: 0 0.5rem; } .theme-light .table-bordered tbody tr { border: 1px solid var(--border-color); border-radius: 0.5rem; } .theme-light .table-bordered tbody tr td { border-right: 1px solid var(--border-color); } .theme-light .table-bordered tbody tr td:last-child { border-right: none; } /* Dark theme striped */ body.theme-dark .table-striped tbody tr:nth-child(even) { background-color: var(--table-stripe-bg); border: 1px solid var(--border-subtle); } body.theme-dark .table-striped tbody tr:nth-child(even):hover { background-color: var(--table-hover-bg); } body.theme-dark .table-striped tbody tr:nth-child(odd) { background-color: var(--bg-card); border: 1px solid var(--border-subtle); } body.theme-dark .table-striped tbody tr:nth-child(odd):hover { background-color: var(--table-hover-bg); } /* --------------------------------------------------------------------- Dark Theme - Inline Forms Inside Tables --------------------------------------------------------------------- */ body.theme-dark .table .form-control, body.theme-dark .table .form-select, body.theme-dark .table .form-control-sm, body.theme-dark .table .form-select-sm, body.theme-dark .table .form-control-plaintext, body.theme-dark .table input, body.theme-dark .table select, body.theme-dark .table textarea { background-color: var(--bg-card-soft); color: var(--text-main); border-color: var(--border-subtle); } body.theme-dark .table .form-control-plaintext { background-color: transparent; color: var(--text-main); } body.theme-dark .table input::placeholder, body.theme-dark .table textarea::placeholder { color: var(--text-muted); opacity: 0.7; } body.theme-dark .table .form-control:focus, body.theme-dark .table .form-select:focus, body.theme-dark .table input:focus, body.theme-dark .table select:focus, body.theme-dark .table textarea:focus { background-color: var(--bg-card); color: var(--text-main); border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); } /* --------------------------------------------------------------------- Dark Theme - Table Variants --------------------------------------------------------------------- */ body.theme-dark .table-primary { --bs-table-bg: rgba(13, 110, 253, 0.15); --bs-table-hover-bg: rgba(13, 110, 253, 0.2); } body.theme-dark .table-success { --bs-table-bg: rgba(25, 135, 84, 0.15); --bs-table-hover-bg: rgba(25, 135, 84, 0.2); } body.theme-dark .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.15); --bs-table-hover-bg: rgba(220, 53, 69, 0.2); } body.theme-dark .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.15); --bs-table-hover-bg: rgba(255, 193, 7, 0.2); } body.theme-dark .table-info { --bs-table-bg: rgba(13, 202, 240, 0.15); --bs-table-hover-bg: rgba(13, 202, 240, 0.2); } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 768px) { .table > :not(caption) > * > * { padding: 0.5rem; } .table thead th { font-size: 0.8rem; } /* Hide less important columns on mobile */ .table .d-mobile-none { display: none; } } /* === components/registration.css === */ /* Base UK Number Plate Style */ .uk-number-plate { display: inline-block; color: #000; border: 2px solid #000; border-radius: 8px; padding: 4px 10px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; line-height: 1; white-space: nowrap; transform: scaleX(0.95); transition: all 0.2s ease; } /* Light Theme - Yellow Plate (Traditional UK Rear Plate) */ .theme-light .uk-number-plate { background: #FFD400; color: #000; border-color: #000; } /* Dark Theme - White Plate (Modern UK Front Plate) */ .theme-dark .uk-number-plate { background: #ffffff; color: #000; border-color: #000; } @media (max-width: 576px) { .uk-number-plate { padding: 3px 8px; letter-spacing: 1.5px; transform: scaleX(0.97); } } /* ---------------------------------------------------------------- .reg-link Inline plate-as-link used by the auto-linker in comments and timeline event descriptions. Layered on top of .uk-number-plate so plates inside flowing text still look like real plates but carry the link affordances. ---------------------------------------------------------------- */ .reg-link.uk-number-plate { text-decoration: none; font-size: 0.85em; /* slightly smaller than surrounding prose */ padding: 2px 6px; /* tighter than the standalone plate */ vertical-align: baseline; margin: 0 1px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .reg-link.uk-number-plate:hover, .reg-link.uk-number-plate:focus { text-decoration: none; /* Combine with the existing scaleX(0.95) from .uk-number-plate */ transform: scaleX(0.95) scale(1.05); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); filter: brightness(1.05); } /* Keep the link's text colour matching the plate (black on yellow/white). */ .theme-light .reg-link.uk-number-plate, [data-bs-theme="light"] .reg-link.uk-number-plate { color: #000; } .theme-dark .reg-link.uk-number-plate, [data-bs-theme="dark"] .reg-link.uk-number-plate { color: #000; } /* === components/buttons.css === */ /* ========================================================================= BUTTONS - Button Component Styles ========================================================================= */ /** * Button styles extending Bootstrap with BusOva theming. * Includes primary actions, variants, sizes, and states. */ /* --------------------------------------------------------------------- Base Button Style --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; border-radius: 0.45rem; padding: 0.5rem 1rem; font-size: 0.9rem; line-height: 1.5; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; cursor: pointer; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.disabled { opacity: 0.65; pointer-events: none; } /* Icon inside buttons */ .btn i, .btn svg { font-size: 0.9em; flex-shrink: 0; } /* --------------------------------------------------------------------- Primary Button --------------------------------------------------------------------- */ .btn-primary { background-color: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-primary:focus-visible { box-shadow: 0 0 0 0.2rem var(--accent-soft); } /* --------------------------------------------------------------------- Secondary Button --------------------------------------------------------------------- */ .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; } .btn-secondary:hover { background-color: #5c636a; border-color: #565e64; color: #fff; } .btn-secondary:focus-visible { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25); } /* --------------------------------------------------------------------- Success Button --------------------------------------------------------------------- */ .btn-success { background-color: #198754; border-color: #198754; color: #fff; } .btn-success:hover { background-color: #157347; border-color: #146c43; color: #fff; } .btn-success:focus-visible { box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25); } /* --------------------------------------------------------------------- Danger Button --------------------------------------------------------------------- */ .btn-danger { background-color: #dc3545; border-color: #dc3545; color: #fff; } .btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; color: #fff; } .btn-danger:focus-visible { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } /* --------------------------------------------------------------------- Warning Button --------------------------------------------------------------------- */ .btn-warning { background-color: #ffc107; border-color: #ffc107; color: #212529; } .btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; color: #212529; } .btn-warning:focus-visible { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } /* --------------------------------------------------------------------- Info Button --------------------------------------------------------------------- */ .btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #212529; } .btn-info:hover { background-color: #31d2f2; border-color: #25cff2; color: #212529; } .btn-info:focus-visible { box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25); } /* --------------------------------------------------------------------- Outline Variants --------------------------------------------------------------------- */ .btn-outline-primary { border-color: var(--accent); color: var(--accent); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; } .btn-outline-secondary { border-color: #6c757d; color: #6c757d; background-color: transparent; } .btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d; color: #fff; } .btn-outline-success { border-color: #198754; color: #198754; background-color: transparent; } .btn-outline-success:hover { background-color: #198754; border-color: #198754; color: #fff; } .btn-outline-danger { border-color: #dc3545; color: #dc3545; background-color: transparent; } .btn-outline-danger:hover { background-color: #dc3545; border-color: #dc3545; color: #fff; } .btn-outline-warning { border-color: #ffc107; color: #ffc107; background-color: transparent; } .btn-outline-warning:hover { background-color: #ffc107; border-color: #ffc107; color: #212529; } .btn-outline-info { border-color: #0dcaf0; color: #0dcaf0; background-color: transparent; } .btn-outline-info:hover { background-color: #0dcaf0; border-color: #0dcaf0; color: #212529; } /* --------------------------------------------------------------------- Link Button (text-only appearance) --------------------------------------------------------------------- */ .btn-link { background-color: transparent; border-color: transparent; color: var(--accent); font-weight: 500; padding-left: 0; padding-right: 0; } .btn-link:hover { color: var(--accent-hover); text-decoration: underline; } /* --------------------------------------------------------------------- Button Sizes --------------------------------------------------------------------- */ .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; border-radius: 0.35rem; } .btn-lg { padding: 0.65rem 1.25rem; font-size: 1rem; border-radius: 0.5rem; } /* --------------------------------------------------------------------- Button Groups --------------------------------------------------------------------- */ .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-top-left-radius: 0.45rem; border-bottom-left-radius: 0.45rem; } .btn-group .btn:last-child { border-top-right-radius: 0.45rem; border-bottom-right-radius: 0.45rem; } .btn-group-sm .btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; } /* --------------------------------------------------------------------- Icon-Only Buttons --------------------------------------------------------------------- */ .btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .btn-icon.btn-sm { width: 1.75rem; height: 1.75rem; } .btn-icon.btn-lg { width: 2.75rem; height: 2.75rem; } /* --------------------------------------------------------------------- Loading State --------------------------------------------------------------------- */ .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 1rem; height: 1rem; top: 50%; left: 50%; margin-top: -0.5rem; margin-left: -0.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnSpinner 0.75s linear infinite; } @keyframes btnSpinner { to { transform: rotate(360deg); } } /* Restore color for spinner visibility */ .btn-primary.btn-loading::after, .btn-secondary.btn-loading::after, .btn-success.btn-loading::after, .btn-danger.btn-loading::after { border-color: #fff; border-right-color: transparent; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .btn-secondary { background-color: #4b5563; border-color: #4b5563; } body.theme-dark .btn-secondary:hover { background-color: #6b7280; border-color: #6b7280; } body.theme-dark .btn-outline-secondary { border-color: #6b7280; color: #9ca3af; } body.theme-dark .btn-outline-secondary:hover { background-color: #6b7280; border-color: #6b7280; color: #fff; } body.theme-dark .btn-link { color: var(--accent); } body.theme-dark .btn-link:hover { color: var(--accent-hover); } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 576px) { /* Full-width buttons on mobile when in flex containers */ .btn-mobile-full { width: 100%; } } /* === components/alerts.css === */ /* ========================================================================= ALERTS - Notification & Message Styles ========================================================================= */ /** * Alert components for user feedback, notifications, and system messages. * Built on Bootstrap alerts with enhanced styling and animations. */ /* --------------------------------------------------------------------- Base Alert Style --------------------------------------------------------------------- */ .alert { border-radius: 0.75rem; border-width: 1px; padding: 0.875rem 1rem; font-size: 0.9rem; line-height: 1.5; animation: alertFadeIn 0.25s ease-out; } .alert p:last-child { margin-bottom: 0; } .alert a { font-weight: 600; text-decoration: underline; } .alert a:hover { text-decoration: none; } /* Alert with icon */ .alert-icon { display: flex; align-items: flex-start; gap: 0.75rem; } .alert-icon i, .alert-icon svg { flex-shrink: 0; font-size: 1.1rem; margin-top: 0.125rem; } /* --------------------------------------------------------------------- Alert Variants (Bootstrap-compatible) --------------------------------------------------------------------- */ /* Success */ .alert-success { background-color: #d1e7dd; border-color: #badbcc; color: #0f5132; } .alert-success a { color: #0a3622; } /* Danger / Error */ .alert-danger { background-color: #f8d7da; border-color: #f5c2c7; color: #842029; } .alert-danger a { color: #5c151a; } /* Warning */ .alert-warning { background-color: #fff3cd; border-color: #ffecb5; color: #664d03; } .alert-warning a { color: #3d2e02; } /* Info */ .alert-info { background-color: #cff4fc; border-color: #b6effb; color: #055160; } .alert-info a { color: #032830; } /* Primary */ .alert-primary { background-color: #cfe2ff; border-color: #b6d4fe; color: #084298; } .alert-primary a { color: #052c65; } /* Secondary */ .alert-secondary { background-color: #e2e3e5; border-color: #d3d6d8; color: #41464b; } .alert-secondary a { color: #2b2e31; } /* --------------------------------------------------------------------- Dismissible Alerts --------------------------------------------------------------------- */ .alert-dismissible { padding-right: 3rem; } .alert-dismissible .btn-close { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); padding: 0.5rem; opacity: 0.5; transition: opacity 0.15s ease; } .alert-dismissible .btn-close:hover { opacity: 0.85; } /* --------------------------------------------------------------------- Alert Animations --------------------------------------------------------------------- */ @keyframes alertFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes alertFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } .alert.fade-out { animation: alertFadeOut 0.2s ease-out forwards; } /* Slide-in variation */ @keyframes alertSlideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .alert.slide-in { animation: alertSlideIn 0.3s ease-out; } /* --------------------------------------------------------------------- Compact Alerts (for inline use) --------------------------------------------------------------------- */ .alert-sm { padding: 0.5rem 0.75rem; font-size: 0.85rem; border-radius: 0.5rem; } .alert-sm .btn-close { padding: 0.375rem; } /* --------------------------------------------------------------------- Toast-style Alerts (fixed position) --------------------------------------------------------------------- */ .alert-toast { position: fixed; top: 1rem; right: 1rem; z-index: 1080; min-width: 280px; max-width: 400px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .alert-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.5rem; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .alert-success { background-color: rgba(25, 135, 84, 0.2); border-color: rgba(25, 135, 84, 0.35); color: #75d9a3; } body.theme-dark .alert-success a { color: #9fe7be; } body.theme-dark .alert-danger { background-color: rgba(220, 53, 69, 0.2); border-color: rgba(220, 53, 69, 0.35); color: #f5a3ab; } body.theme-dark .alert-danger a { color: #f9c4c9; } body.theme-dark .alert-warning { background-color: rgba(255, 193, 7, 0.2); border-color: rgba(255, 193, 7, 0.35); color: #ffe066; } body.theme-dark .alert-warning a { color: #ffeb99; } body.theme-dark .alert-info { background-color: rgba(13, 202, 240, 0.2); border-color: rgba(13, 202, 240, 0.35); color: #6edff6; } body.theme-dark .alert-info a { color: #9fe9f9; } body.theme-dark .alert-primary { background-color: rgba(13, 110, 253, 0.2); border-color: rgba(13, 110, 253, 0.35); color: #6ea8fe; } body.theme-dark .alert-primary a { color: #9ec5fe; } body.theme-dark .alert-secondary { background-color: rgba(108, 117, 125, 0.2); border-color: rgba(108, 117, 125, 0.35); color: #bdc3c8; } body.theme-dark .alert-secondary a { color: #d8dce0; } /* Dark theme dismiss button */ body.theme-dark .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 576px) { .alert-toast { left: 1rem; right: 1rem; min-width: auto; max-width: none; } .alert-toast-container { left: 1rem; right: 1rem; } } /* === components/pagination.css === */ /* ========================================================================= PAGINATION - Page Navigation Styles ========================================================================= */ /** * Pagination styles for navigating through paged content. * Built on Bootstrap pagination with BusOva theming. */ /* --------------------------------------------------------------------- Base Pagination Container --------------------------------------------------------------------- */ .pagination { display: flex; padding-left: 0; list-style: none; gap: 0.25rem; } /* --------------------------------------------------------------------- Page Item --------------------------------------------------------------------- */ .page-item { /* No specific styles needed, acts as container */ } .page-item:first-child .page-link { border-top-left-radius: 0.45rem; border-bottom-left-radius: 0.45rem; } .page-item:last-child .page-link { border-top-right-radius: 0.45rem; border-bottom-right-radius: 0.45rem; } /* --------------------------------------------------------------------- Page Link --------------------------------------------------------------------- */ .page-link { position: relative; display: flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0.45rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--text-main); text-decoration: none; background-color: var(--bg-card); border: 1px solid var(--border-subtle); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .page-link:hover { z-index: 2; color: var(--accent-hover); background-color: var(--bg-card-soft); border-color: var(--border-subtle); text-decoration: none; } .page-link:focus { z-index: 3; outline: 0; box-shadow: 0 0 0 0.2rem var(--accent-soft); } /* Icon inside page link */ .page-link i, .page-link svg { font-size: 0.75rem; } /* --------------------------------------------------------------------- Active State --------------------------------------------------------------------- */ .page-item.active .page-link { z-index: 3; color: #fff; background-color: var(--accent); border-color: var(--accent); } .page-item.active .page-link:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } /* --------------------------------------------------------------------- Disabled State --------------------------------------------------------------------- */ .page-item.disabled .page-link { color: var(--text-muted); pointer-events: none; background-color: var(--bg-card-soft); border-color: var(--border-subtle); opacity: 0.65; } /* --------------------------------------------------------------------- Pagination Sizes --------------------------------------------------------------------- */ /* Small */ .pagination-sm .page-link { min-width: 1.875rem; padding: 0.3rem 0.55rem; font-size: 0.8rem; } .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.35rem; border-bottom-left-radius: 0.35rem; } .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.35rem; border-bottom-right-radius: 0.35rem; } /* Large */ .pagination-lg .page-link { min-width: 2.75rem; padding: 0.6rem 1rem; font-size: 1rem; } .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* --------------------------------------------------------------------- Pagination Variants --------------------------------------------------------------------- */ /* Rounded/Pill style */ .pagination-rounded .page-link { border-radius: 50%; min-width: 2.25rem; height: 2.25rem; padding: 0; } .pagination-rounded .page-item:first-child .page-link, .pagination-rounded .page-item:last-child .page-link { border-radius: 50%; } /* Borderless */ .pagination-borderless .page-link { border: none; background-color: transparent; } .pagination-borderless .page-link:hover { background-color: var(--bg-card-soft); } .pagination-borderless .page-item.active .page-link { background-color: var(--accent); } /* --------------------------------------------------------------------- Pagination with Ellipsis --------------------------------------------------------------------- */ .page-item.ellipsis .page-link { pointer-events: none; background-color: transparent; border-color: transparent; } /* --------------------------------------------------------------------- Pagination Summary (e.g., "Page 1 of 10") --------------------------------------------------------------------- */ .pagination-summary { display: flex; align-items: center; font-size: 0.875rem; color: var(--text-muted); margin-right: 1rem; } /* --------------------------------------------------------------------- Pagination Wrapper (for centering/alignment) --------------------------------------------------------------------- */ .pagination-wrapper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } .pagination-wrapper.justify-start { justify-content: flex-start; } .pagination-wrapper.justify-end { justify-content: flex-end; } .pagination-wrapper.justify-between { justify-content: space-between; } /* --------------------------------------------------------------------- Items Per Page Selector --------------------------------------------------------------------- */ .pagination-per-page { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); } .pagination-per-page select { width: auto; padding: 0.3rem 1.75rem 0.3rem 0.5rem; font-size: 0.875rem; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .page-link { background-color: #161b2c; border-color: rgba(255, 255, 255, 0.1); color: var(--text-main); } body.theme-dark .page-link:hover { background-color: #1f2436; border-color: rgba(255, 255, 255, 0.15); color: var(--accent); } body.theme-dark .page-item.active .page-link { background-color: #2563eb; border-color: #2563eb; color: #fff; } body.theme-dark .page-item.active .page-link:hover { background-color: #1d4ed8; border-color: #1d4ed8; } body.theme-dark .page-item.disabled .page-link { background-color: #0f1320; border-color: rgba(255, 255, 255, 0.05); color: #6b7280; } body.theme-dark .pagination-borderless .page-link { background-color: transparent; } body.theme-dark .pagination-borderless .page-link:hover { background-color: rgba(255, 255, 255, 0.08); } body.theme-dark .pagination-summary, body.theme-dark .pagination-per-page { color: var(--text-muted); } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 576px) { .pagination { flex-wrap: wrap; justify-content: center; } .page-link { min-width: 2rem; padding: 0.375rem 0.5rem; font-size: 0.8rem; } /* Hide some page numbers on mobile, show only essentials */ .pagination-mobile-minimal .page-item:not(:first-child):not(:last-child):not(.active):not(.ellipsis) { display: none; } .pagination-wrapper { flex-direction: column; gap: 0.75rem; } .pagination-summary { margin-right: 0; order: 1; } } /* ========================================================================= DATATABLES PAGINATION FIX - Consistent styling across themes ========================================================================= */ /* DataTables Pagination Wrapper - Remove any extra padding/borders */ .dataTables_wrapper .dataTables_paginate { padding: 0.5rem 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Pagination container - ensure no extra styling */ .dataTables_wrapper .dataTables_paginate .pagination { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; gap: 0.25rem !important; } /* Page items - remove any borders/backgrounds */ .dataTables_wrapper .dataTables_paginate .pagination .page-item { background: transparent !important; border: none !important; box-shadow: none !important; } /* ------------------------------------------------------------------------- LIGHT THEME - Black text for Previous/Next ------------------------------------------------------------------------- */ .dataTables_wrapper .dataTables_paginate .pagination .paginate_button .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link, .dataTables_paginate .pagination .page-link { background: transparent !important; background-color: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; color: #000000 !important; padding: 0.375rem 0.5rem !important; font-size: 0.875rem !important; line-height: 1.5 !important; } /* Light theme - Active state */ .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.active .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background: #0d6efd !important; background-color: #0d6efd !important; color: #fff !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; } /* Light theme - Hover state */ .dataTables_wrapper .dataTables_paginate .pagination .paginate_button:not(.disabled) .page-link:hover, .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover { background: rgba(0, 0, 0, 0.08) !important; background-color: rgba(0, 0, 0, 0.08) !important; color: #000000 !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; } /* Light theme - Disabled state */ .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.disabled .page-link, .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link { color: #6c757d !important; cursor: not-allowed !important; opacity: 0.65 !important; border: none !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ------------------------------------------------------------------------- DARK THEME - White text for Previous/Next ------------------------------------------------------------------------- */ .theme-dark .dataTables_wrapper .dataTables_paginate, body.theme-dark .dataTables_wrapper .dataTables_paginate, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate { background: transparent !important; border: none !important; box-shadow: none !important; } .theme-dark .dataTables_wrapper .dataTables_paginate .pagination, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination { background: transparent !important; border: none !important; box-shadow: none !important; } .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item { background: transparent !important; border: none !important; box-shadow: none !important; } .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button .page-link, .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link, .theme-dark .dataTables_paginate .pagination .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link, body.theme-dark .dataTables_paginate .pagination .page-link, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-link { background: transparent !important; background-color: transparent !important; border: none !important; border-color: transparent !important; box-shadow: none !important; color: #ffffff !important; padding: 0.375rem 0.5rem !important; font-size: 0.875rem !important; line-height: 1.5 !important; } /* Dark theme - Active state */ .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.active .page-link, .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.active .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background: #0d6efd !important; background-color: #0d6efd !important; color: #fff !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; } /* Dark theme - Hover state */ .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button:not(.disabled) .page-link:hover, .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button:not(.disabled) .page-link:hover, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.disabled) .page-link:hover { background: rgba(255, 255, 255, 0.15) !important; background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; } /* Dark theme - Disabled state */ .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.disabled .page-link, .theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .paginate_button.disabled .page-link, body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link { color: #9ca3af !important; cursor: not-allowed !important; opacity: 0.5 !important; border: none !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ========================================================================= DATATABLES CONTROL SPACING (universal - all admin tables) Breathing room around the length/filter (top) and info/paginate (bottom) rows so they aren't cramped against the card header and the table. Spacing only - the pagination colours/theming above are untouched. ========================================================================= */ .dataTables_wrapper { padding-top: 0.5rem; padding-bottom: 0.25rem; } /* Top row: "Show N entries" + "Filter" - gap below, before the table */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; } /* Bottom row: "Showing X to Y" + pagination - gap above, after the table */ .dataTables_wrapper .dataTables_info { margin-top: 1rem; padding-top: 0.25rem; } .dataTables_wrapper .dataTables_paginate { margin-top: 1rem !important; /* override the margin:0 set earlier */ } /* Keep the length select / filter input on the theme's form styling */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { margin: 0 0.4rem; } /* ========================================================================= FULL-WIDTH (p-0) TABLE CARDS Many admin tables sit in a flush "card-body p-0", which leaves the whole table (and its controls) jammed against the card edge. Restore real padding on any p-0 card-body that contains a table so it has proper breathing room. The table still scrolls horizontally inside the padding if it's wide. (Overrides Bootstrap's `p-0` -> padding:0 !important.) ========================================================================= */ .card-body.p-0:has(table) { padding: 1rem !important; } /* The DataTables length/filter row and info/pagination already get their own horizontal gutter from the card-body padding above - reset the small extra nudge so nothing is doubled up. */ .card-body.p-0:has(table) .dataTables_paginate { padding-right: 0 !important; } /* === components/achievements.css === */ /* ========================================================================= ACHIEVEMENTS - Badge Styles ========================================================================= */ /** * Achievement badges display user accomplishments with tiered styling. * Tiers: Bronze, Silver, Gold (and Platinum for future expansion) */ /* --------------------------------------------------------------------- Base Badge Style --------------------------------------------------------------------- */ .achievement-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: #fff; line-height: 1.4; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; } .achievement-badge:hover { transform: translateY(-1px); } .achievement-badge i, .achievement-badge svg { font-size: 0.75rem; flex-shrink: 0; } /* --------------------------------------------------------------------- Badge Tiers --------------------------------------------------------------------- */ .badge-bronze { background: linear-gradient(135deg, #b68b4c 0%, #8b642e 100%); box-shadow: 0 2px 4px rgba(139, 100, 46, 0.3); } .badge-bronze:hover { box-shadow: 0 4px 8px rgba(139, 100, 46, 0.4); } .badge-silver { background: linear-gradient(135deg, #a0a0b8 0%, #7d7d96 100%); box-shadow: 0 2px 4px rgba(125, 125, 150, 0.3); } .badge-silver:hover { box-shadow: 0 4px 8px rgba(125, 125, 150, 0.4); } .badge-gold { background: linear-gradient(135deg, #e0b941 0%, #b88a1b 100%); box-shadow: 0 2px 4px rgba(184, 138, 27, 0.3); } .badge-gold:hover { box-shadow: 0 4px 8px rgba(184, 138, 27, 0.4); } .badge-platinum { background: linear-gradient(135deg, #e5e4e2 0%, #a8a9ad 50%, #e5e4e2 100%); box-shadow: 0 2px 4px rgba(168, 169, 173, 0.4); color: #2d2d2d; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); } .badge-platinum:hover { box-shadow: 0 4px 8px rgba(168, 169, 173, 0.5); } /* --------------------------------------------------------------------- Achievement Cards (for achievement listing pages) --------------------------------------------------------------------- */ .achievement-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.5rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .achievement-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .achievement-card.locked { opacity: 0.5; filter: grayscale(0.8); } .achievement-card .achievement-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.25rem; flex-shrink: 0; } .achievement-card .achievement-info { flex: 1; min-width: 0; } .achievement-card .achievement-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--text-main); } .achievement-card .achievement-description { font-size: 0.85rem; color: var(--text-muted); margin: 0; } /* --------------------------------------------------------------------- Progress Indicator (for achievements with progress tracking) --------------------------------------------------------------------- */ .achievement-progress { margin-top: 0.5rem; } .achievement-progress-bar { height: 6px; background-color: var(--bg-card-soft); border-radius: 3px; overflow: hidden; } .achievement-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 3px; transition: width 0.3s ease; } .achievement-progress-text { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .achievement-card { background-color: var(--bg-card); border-color: var(--border-subtle); } body.theme-dark .achievement-card .achievement-name { color: #fff; } body.theme-dark .achievement-card .achievement-description { color: var(--text-muted); } body.theme-dark .achievement-progress-bar { background-color: rgba(255, 255, 255, 0.1); } /* === components/modals.css === */ /* ========================================================================= MODALS - Modal Dialog Styles ========================================================================= */ /** * Modal styles for dialogs, confirmations, and overlay content. * Built on Bootstrap modals with BusOva theming. */ /* --------------------------------------------------------------------- Modal Backdrop --------------------------------------------------------------------- */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); } .modal-backdrop.show { opacity: 1; } /* --------------------------------------------------------------------- Modal Dialog --------------------------------------------------------------------- */ .modal-dialog { margin: 1.75rem auto; } .modal-dialog-centered { min-height: calc(100% - 3.5rem); } .modal-dialog-scrollable { height: calc(100% - 3.5rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } /* --------------------------------------------------------------------- Modal Content --------------------------------------------------------------------- */ .modal-content { background-color: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 0.75rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } /* --------------------------------------------------------------------- Modal Header --------------------------------------------------------------------- */ .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px); } .modal-title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin: 0; line-height: 1.5; } .modal-title i, .modal-title svg { color: var(--accent); margin-right: 0.5rem; } /* Close button */ .modal-header .btn-close { padding: 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; opacity: 0.5; transition: opacity 0.15s ease; } .modal-header .btn-close:hover { opacity: 0.85; } .modal-header .btn-close:focus { outline: none; box-shadow: 0 0 0 0.2rem var(--accent-soft); } /* --------------------------------------------------------------------- Modal Body --------------------------------------------------------------------- */ .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; font-size: 0.9rem; color: var(--text-main); } .modal-body p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------- Modal Footer --------------------------------------------------------------------- */ .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.65rem 1rem; background-color: var(--bg-card-soft); border-top: 1px solid var(--border-subtle); border-bottom-left-radius: calc(0.75rem - 1px); border-bottom-right-radius: calc(0.75rem - 1px); } /* Full-width footer buttons */ .modal-footer-stack { flex-direction: column; } .modal-footer-stack .btn { width: 100%; } /* --------------------------------------------------------------------- Modal Sizes --------------------------------------------------------------------- */ .modal-sm { max-width: 300px; } .modal-lg { max-width: 800px; } .modal-xl { max-width: 1140px; } /* --------------------------------------------------------------------- Fullscreen Modals --------------------------------------------------------------------- */ .modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0; } .modal-fullscreen .modal-header { border-radius: 0; } .modal-fullscreen .modal-footer { border-radius: 0; } /* Responsive fullscreen */ @media (max-width: 575.98px) { .modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0; } .modal-fullscreen-sm-down .modal-content { height: 100%; border: 0; border-radius: 0; } } /* --------------------------------------------------------------------- Modal Variants --------------------------------------------------------------------- */ /* Confirmation modal (danger) */ .modal-danger .modal-header { background-color: rgba(220, 53, 69, 0.1); border-bottom-color: rgba(220, 53, 69, 0.2); } .modal-danger .modal-title { color: #dc3545; } /* Success modal */ .modal-success .modal-header { background-color: rgba(25, 135, 84, 0.1); border-bottom-color: rgba(25, 135, 84, 0.2); } .modal-success .modal-title { color: #198754; } /* Warning modal */ .modal-warning .modal-header { background-color: rgba(255, 193, 7, 0.1); border-bottom-color: rgba(255, 193, 7, 0.2); } .modal-warning .modal-title { color: #856404; } /* --------------------------------------------------------------------- Modal Animations --------------------------------------------------------------------- */ .modal.fade .modal-dialog { transform: translateY(-20px); transition: transform 0.2s ease-out; } .modal.show .modal-dialog { transform: translateY(0); } /* Slide-up animation */ .modal.modal-slide-up .modal-dialog { transform: translateY(50px); } .modal.modal-slide-up.show .modal-dialog { transform: translateY(0); } /* Scale animation */ .modal.modal-scale .modal-dialog { transform: scale(0.95); opacity: 0; } .modal.modal-scale.show .modal-dialog { transform: scale(1); opacity: 1; } /* --------------------------------------------------------------------- Dark Theme Adjustments --------------------------------------------------------------------- */ body.theme-dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } body.theme-dark .modal-content { background-color: var(--bg-card); border-color: var(--border-subtle); box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); } body.theme-dark .modal-header { border-bottom-color: var(--border-subtle); } body.theme-dark .modal-header, body.theme-dark .modal-title { color: #fff; } body.theme-dark .modal-body { color: var(--text-main); } /* Muted text inside modals */ body.theme-dark .modal-body .text-muted, body.theme-dark .modal-body small { color: #cfd5e6 !important; } body.theme-dark .modal-footer { background-color: var(--bg-card-soft); border-top-color: var(--border-subtle); } /* Dark theme close button */ body.theme-dark .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Dark theme modal variants */ body.theme-dark .modal-danger .modal-header { background-color: rgba(220, 53, 69, 0.15); } body.theme-dark .modal-danger .modal-title { color: #f5a3ab; } body.theme-dark .modal-success .modal-header { background-color: rgba(25, 135, 84, 0.15); } body.theme-dark .modal-success .modal-title { color: #75d9a3; } body.theme-dark .modal-warning .modal-header { background-color: rgba(255, 193, 7, 0.15); } body.theme-dark .modal-warning .modal-title { color: #ffe066; } /* --------------------------------------------------------------------- Responsive Adjustments --------------------------------------------------------------------- */ @media (max-width: 576px) { .modal-dialog { margin: 0.5rem; } .modal-dialog-centered { min-height: calc(100% - 1rem); } .modal-content { border-radius: 0.5rem; } .modal-header, .modal-body, .modal-footer { padding: 0.75rem; } .modal-title { font-size: 0.95rem; } } @media (min-width: 576px) { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } } /* === components/toast.css === */ /** * Toast Notification Styles * Used by the favourites system and can be used elsewhere */ .toast-notification { position: fixed; top: 20px; right: 20px; background: #fff; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 0.75rem; z-index: 9999; animation: slideInRight 0.3s ease-out; min-width: 280px; max-width: 400px; } .toast-notification.success { border-left: 4px solid #28a745; } .toast-notification.error { border-left: 4px solid #dc3545; } .toast-notification i { font-size: 1.5rem; flex-shrink: 0; } .toast-notification.success i { color: #28a745; } .toast-notification.error i { color: #dc3545; } .toast-notification .toast-content { flex: 1; min-width: 0; } .toast-notification .toast-title { font-weight: 600; margin-bottom: 0.25rem; color: #333; } .toast-notification .toast-message { font-size: 0.875rem; color: #666; margin: 0; } @keyframes slideInRight { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } } .toast-notification.removing { animation: slideOutRight 0.3s ease-out forwards; } /* Dark theme support for toast */ .theme-dark .toast-notification { background: #2d3748; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .theme-dark .toast-notification .toast-title { color: #e2e8f0; } .theme-dark .toast-notification .toast-message { color: #cbd5e0; } /* Row removal animation for favourites list */ @keyframes fadeOutRow { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } } .removing-row { animation: fadeOutRow 0.3s ease-out forwards; } /* Mobile responsive adjustments */ @media (max-width: 576px) { .toast-notification { right: 10px; left: 10px; min-width: auto; max-width: none; } } /* === components/search.css === */ /* ============================================================ SEARCH COMPONENT STYLES Theme-aware styling for BusOva search ============================================================ */ /* --------------------------------------------------------- HEADER SEARCH BOX --------------------------------------------------------- */ .header-search { position: relative; width: 100%; max-width: 320px; } @media (max-width: 991.98px) { .header-search { max-width: 100%; margin: 0.75rem 0; order: 10; } } /* Search Input - Base (works in dark navbar) */ .header-search-input { width: 100%; padding: 0.5rem 1rem 0.5rem 2.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.9rem; transition: all 0.2s ease; } .header-search-input::placeholder { color: rgba(255, 255, 255, 0.6); } .header-search-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); } /* Search Icon */ .header-search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); pointer-events: none; font-size: 0.85rem; } /* Clear Button */ .header-search-clear { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 0.25rem; line-height: 1; display: none; } .header-search-clear:hover { color: #fff; } /* --------------------------------------------------------- SEARCH DROPDOWN - LIGHT THEME --------------------------------------------------------- */ .search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 360px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); z-index: 1050; max-height: 70vh; overflow-y: auto; display: none; /* Light theme defaults */ background: #ffffff; border: 1px solid var(--border-color, #bcc5cc); } [data-bs-theme="light"] .search-dropdown, .theme-light .search-dropdown { background: #ffffff; border-color: #e2e5e9; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } @media (max-width: 991.98px) { .search-dropdown { position: fixed; top: auto; left: 1rem; right: 1rem; min-width: auto; max-height: 60vh; } } .search-dropdown.show { display: block; animation: searchDropdownIn 0.2s ease; } @keyframes searchDropdownIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Dropdown Header */ .search-dropdown-header { padding: 0.75rem 1rem; font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e9ecef; color: #6c757d; } [data-bs-theme="light"] .search-dropdown-header, .theme-light .search-dropdown-header { border-color: #e9ecef; color: #6c757d; } /* Section Title */ .search-dropdown-section { padding: 0.5rem; } .search-dropdown-section-title { padding: 0.5rem 0.75rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; } [data-bs-theme="light"] .search-dropdown-section-title, .theme-light .search-dropdown-section-title { color: #6c757d; } /* Search Result Item */ .search-dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; text-decoration: none; transition: background 0.15s ease; color: #212529; } [data-bs-theme="light"] .search-dropdown-item, .theme-light .search-dropdown-item { color: #212529; } .search-dropdown-item:hover, .search-dropdown-item.active { background: #f1f3f5; color: #212529; text-decoration: none; } [data-bs-theme="light"] .search-dropdown-item:hover, [data-bs-theme="light"] .search-dropdown-item.active, .theme-light .search-dropdown-item:hover, .theme-light .search-dropdown-item.active { background: #f1f3f5; color: #212529; } /* Item Icon */ .search-dropdown-item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(13, 110, 253, 0.1); color: #0d6efd; flex-shrink: 0; font-size: 0.9rem; } /* Item Thumbnail */ .search-dropdown-item-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; background: #f1f3f5; flex-shrink: 0; } /* Item Content */ .search-dropdown-item-content { flex-grow: 1; min-width: 0; } .search-dropdown-item-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-dropdown-item-meta { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6c757d; } [data-bs-theme="light"] .search-dropdown-item-meta, .theme-light .search-dropdown-item-meta { color: #6c757d; } /* Footer */ .search-dropdown-footer { padding: 0.75rem 1rem; text-align: center; border-top: 1px solid #e9ecef; } [data-bs-theme="light"] .search-dropdown-footer, .theme-light .search-dropdown-footer { border-color: #e9ecef; } .search-dropdown-footer a { font-size: 0.85rem; color: #0d6efd; text-decoration: none; font-weight: 500; } .search-dropdown-footer a:hover { text-decoration: underline; } /* Empty & Loading States */ .search-dropdown-empty, .search-dropdown-loading { padding: 2rem 1rem; text-align: center; color: #6c757d; } .search-dropdown-empty i { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; display: block; } .search-dropdown-loading i { font-size: 1.5rem; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Keyboard Focus */ .search-dropdown-item.keyboard-focus { background: #e9ecef; outline: 2px solid #0d6efd; outline-offset: -2px; } /* --------------------------------------------------------- SEARCH DROPDOWN - DARK THEME --------------------------------------------------------- */ [data-bs-theme="dark"] .search-dropdown, .theme-dark .search-dropdown { background: var(--bg-card, #141c2f); border-color: var(--border-subtle, #273155); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .search-dropdown-header, .theme-dark .search-dropdown-header { border-color: var(--border-subtle, #273155); color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .search-dropdown-section-title, .theme-dark .search-dropdown-section-title { color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .search-dropdown-item, .theme-dark .search-dropdown-item { color: var(--text-main, #e5e9f5); } [data-bs-theme="dark"] .search-dropdown-item:hover, [data-bs-theme="dark"] .search-dropdown-item.active, .theme-dark .search-dropdown-item:hover, .theme-dark .search-dropdown-item.active { background: rgba(14, 155, 255, 0.15); color: #ffffff; } [data-bs-theme="dark"] .search-dropdown-item-icon, .theme-dark .search-dropdown-item-icon { background: var(--accent-soft, rgba(14, 155, 255, 0.25)); color: var(--accent, #0E9BFF); } [data-bs-theme="dark"] .search-dropdown-item-thumb, .theme-dark .search-dropdown-item-thumb { background: var(--bg-card-soft, #1a2340); } [data-bs-theme="dark"] .search-dropdown-item-meta, .theme-dark .search-dropdown-item-meta { color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .search-dropdown-footer, .theme-dark .search-dropdown-footer { border-color: var(--border-subtle, #273155); } [data-bs-theme="dark"] .search-dropdown-footer a, .theme-dark .search-dropdown-footer a { color: var(--accent, #0E9BFF); } [data-bs-theme="dark"] .search-dropdown-footer a:hover, .theme-dark .search-dropdown-footer a:hover { color: var(--accent-hover, #3bb2ff); } [data-bs-theme="dark"] .search-dropdown-empty, [data-bs-theme="dark"] .search-dropdown-loading, .theme-dark .search-dropdown-empty, .theme-dark .search-dropdown-loading { color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .search-dropdown-item.keyboard-focus, .theme-dark .search-dropdown-item.keyboard-focus { background: rgba(14, 155, 255, 0.2); outline-color: var(--accent, #0E9BFF); } /* --------------------------------------------------------- SEARCH RESULTS PAGE - LIGHT THEME --------------------------------------------------------- */ .search-hero { border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0) 100%); border: 1px solid var(--border-color, #bcc5cc); } [data-bs-theme="light"] .search-hero, .theme-light .search-hero { background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, transparent 100%); border-color: #e2e5e9; } .search-input-large { font-size: 1.25rem; padding: 0.75rem 1.25rem; border-radius: 12px; } /* Category Tabs */ .search-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .search-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; text-decoration: none; font-size: 0.9rem; transition: all 0.2s ease; background: #ffffff; border: 1px solid #e2e5e9; color: #212529; } [data-bs-theme="light"] .search-tab, .theme-light .search-tab { background: #ffffff; border-color: #e2e5e9; color: #212529; } .search-tab:hover { border-color: #0d6efd; color: #0d6efd; text-decoration: none; } .search-tab.active { background: #0d6efd; border-color: #0d6efd; color: #ffffff; } .search-tab .count { background: rgba(0, 0, 0, 0.1); padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; } .search-tab.active .count { background: rgba(255, 255, 255, 0.25); } /* Result Cards */ .result-section { margin-bottom: 2rem; } .result-section h2 { font-size: 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .result-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 12px; margin-bottom: 0.75rem; text-decoration: none; transition: all 0.2s ease; background: #ffffff; border: 1px solid #e2e5e9; color: #212529; } [data-bs-theme="light"] .result-card, .theme-light .result-card { background: #ffffff; border-color: #e2e5e9; color: #212529; } .result-card:hover { border-color: #0d6efd; transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); color: #212529; text-decoration: none; } .result-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 8px; background: #f1f3f5; flex-shrink: 0; } .result-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(13, 110, 253, 0.1); color: #0d6efd; flex-shrink: 0; } .result-content { flex-grow: 1; min-width: 0; } .result-title { font-weight: 600; margin-bottom: 0.15rem; } .result-meta { font-size: 0.85rem; color: #6c757d; } /* No Results */ .no-results { text-align: center; padding: 3rem; color: #6c757d; } .no-results i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; display: block; } /* --------------------------------------------------------- SEARCH RESULTS PAGE - DARK THEME --------------------------------------------------------- */ [data-bs-theme="dark"] .search-hero, .theme-dark .search-hero { background: linear-gradient(135deg, rgba(14, 155, 255, 0.12) 0%, transparent 100%); border-color: var(--border-subtle, #273155); } [data-bs-theme="dark"] .search-tab, .theme-dark .search-tab { background: var(--bg-card, #141c2f); border-color: var(--border-subtle, #273155); color: var(--text-main, #e5e9f5); } [data-bs-theme="dark"] .search-tab:hover, .theme-dark .search-tab:hover { border-color: var(--accent, #0E9BFF); color: var(--accent, #0E9BFF); } [data-bs-theme="dark"] .search-tab.active, .theme-dark .search-tab.active { background: var(--accent, #0E9BFF); border-color: var(--accent, #0E9BFF); color: #ffffff; } [data-bs-theme="dark"] .result-card, .theme-dark .result-card { background: var(--bg-card, #141c2f); border-color: var(--border-subtle, #273155); color: var(--text-main, #e5e9f5); } [data-bs-theme="dark"] .result-card:hover, .theme-dark .result-card:hover { border-color: var(--accent, #0E9BFF); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); color: #ffffff; } [data-bs-theme="dark"] .result-thumb, .theme-dark .result-thumb { background: var(--bg-card-soft, #1a2340); } [data-bs-theme="dark"] .result-icon, .theme-dark .result-icon { background: var(--accent-soft, rgba(14, 155, 255, 0.25)); color: var(--accent, #0E9BFF); } [data-bs-theme="dark"] .result-meta, .theme-dark .result-meta { color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .no-results, .theme-dark .no-results { color: var(--text-muted, #aab1c7); } [data-bs-theme="dark"] .search-input-large, .theme-dark .search-input-large { background: var(--bg-card-soft, #1a2340); border-color: var(--border-subtle, #273155); color: var(--text-main, #e5e9f5); } [data-bs-theme="dark"] .search-input-large:focus, .theme-dark .search-input-large:focus { border-color: var(--accent, #0E9BFF); box-shadow: 0 0 0 3px rgba(14, 155, 255, 0.25); } /* ============================================================ SEARCH RESULTS: section heads, card grid, pager ------------------------------------------------------------ Added when the results page was reworked from a flat list of rows. The three sections that have a picture worth showing (buses, liveries, marketplace) lay out as a card grid; every other section keeps the row, which suits a name and one line of detail better than a tile would. Colours come from the same custom properties and .theme-* pairs the rest of this file uses, so both themes are covered without a hardcoded value. ============================================================ */ .result-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .result-section-head h2 { margin-bottom: 0; } /* Reads "25+" when the section is capped, which is why it is a badge and not plain text: it is an approximate figure, not a total. */ .result-count { font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg-subtle, rgba(13, 110, 253, 0.1)); color: var(--text-muted, #6c757d); } .theme-dark .result-count, [data-bs-theme="dark"] .result-count { background: var(--border-subtle, #273155); color: var(--text-main, #e5e9f5); } .result-view-all { font-size: 0.82rem; font-weight: 600; white-space: nowrap; text-decoration: none; } .result-view-all:hover { text-decoration: underline; } /* ---- Card grid ---- */ .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } /* Re-lay the existing .result-card as a tile. The markup is unchanged, so the row styles above still apply everywhere else. */ .result-grid .result-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin-bottom: 0; overflow: hidden; } /* The row style nudges sideways on hover, which is wrong for a tile in a grid: it would shunt into its neighbour. Lift instead. */ .result-grid .result-card:hover { transform: translateY(-3px); } .result-grid .result-thumb { width: 100%; height: 118px; border-radius: 0; object-fit: cover; flex-shrink: 0; } .result-grid .result-icon { width: 100%; height: 118px; border-radius: 0; font-size: 1.6rem; flex-shrink: 0; } .result-grid .result-content { padding: 0.7rem 0.8rem 0.85rem; min-width: 0; } .result-grid .result-title { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Two lines of detail, then clipped: tiles in a grid have to stay the same height as each other or the rows go ragged. */ .result-grid .result-meta { font-size: 0.75rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The chevron belongs to the row layout; a tile does not need it. */ .result-grid .result-card > .fa-chevron-right { display: none; } /* ---- Pager ---- */ .search-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1.5rem 0 0.5rem; } .search-pager-page { font-size: 0.85rem; color: var(--text-muted, #6c757d); } @media (max-width: 575.98px) { .result-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .result-section-head { flex-wrap: wrap; gap: 0.35rem; } } /* Placeholder tiles, which are the common case: only about 2.4% of buses have a photo, so a grid of them is mostly this. At the row size the icon was a small accent; blown up to a full-width band it became a wall of saturated blue. Muted to read as "no photo" rather than as content, and the icon is kept small rather than scaled with the band. */ .result-grid .result-icon { background: var(--bg-subtle, #f1f3f5); color: var(--text-muted, #adb5bd); opacity: 0.55; font-size: 1.35rem; } .theme-dark .result-grid .result-icon, [data-bs-theme="dark"] .result-grid .result-icon { background: rgba(255, 255, 255, 0.04); color: var(--text-muted, #6c7a99); opacity: 1; } /* ============================================================ SECTION PANELS ------------------------------------------------------------ The results page had headings but nothing containing them, so nine sections read as one long undifferentiated list. Each section is now a panel with its own surface and a header bar, and the header carries a coloured icon chip so a section is recognisable before the words are read. The chip colour arrives as --section-accent, set inline from search_sections(). That keeps the colour beside the label and icon it belongs to instead of in a block of CSS that has to be kept in step with the list. The chip is the same shape and weight as .bo-feature-icon on the home page and .section-icon on contributors, so search looks like part of the site rather than its own thing. ============================================================ */ .result-section { border-radius: 14px; padding: 1.15rem 1.25rem 1.3rem; margin-bottom: 1.25rem; background: #ffffff; border: 1px solid #e2e5e9; } .theme-dark .result-section, [data-bs-theme="dark"] .result-section { background: var(--bg-card, #141c2f); border-color: var(--border-subtle, #273155); } /* Separates the header from its results without a hard rule. */ .result-section-head { padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid #eceff2; } .theme-dark .result-section-head, [data-bs-theme="dark"] .result-section-head { border-bottom-color: var(--border-subtle, #273155); } .result-section-head h2 { font-size: 1rem; font-weight: 700; gap: 0.6rem; } .result-section-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; /* colour-mix keeps one declaration for the tint instead of a hardcoded rgba per section; browsers without it fall back to the flat accent. */ background: var(--section-accent, #64748b); background: color-mix(in srgb, var(--section-accent, #64748b) 14%, transparent); color: var(--section-accent, #64748b); } .result-view-all { color: var(--section-accent, #0d6efd); } /* Inside a panel the cards no longer need their own heavy border: the panel already groups them. A lighter surface keeps the section reading as one block rather than a stack of separate boxes. */ .result-section .result-card { border-color: #eceff2; } .theme-dark .result-section .result-card, [data-bs-theme="dark"] .result-section .result-card { background: rgba(255, 255, 255, 0.02); border-color: var(--border-subtle, #273155); } .result-section .result-card:last-child { margin-bottom: 0; } .result-section .result-card:hover { border-color: var(--section-accent, #0d6efd); } /* === components/print-report.css === */ /* ========================================================= PRINTABLE REPORTS Header and footer written by inc/print-report.php, plus the rules that strip the site furniture off a printed page. ========================================================= */ /* On screen the report chrome does not exist. */ .print-report-row { display: none; } @media print { /* Landscape: these reports are wide tables, not prose. */ @page { size: A4 landscape; margin: 10mm; } /* Ink, not screen: white background, black text, no shadows. */ html, body { background: #fff !important; color: #000 !important; } /* Site furniture that means nothing on paper. */ .site-header, .site-footer, .navbar, .breadcrumb, .breadcrumb-nav, nav[aria-label="breadcrumb"], .back-to-top, .cookie-banner, #cookieBanner, .promo-popup, .modal, .modal-backdrop, .alert-dismissible .btn-close, .no-print { display: none !important; } /* thead and tfoot rows repeat on EVERY sheet, last one included, and reserve their own space. A position:fixed block does neither. */ .print-report-row { display: table-row !important; } .print-report-row > th, .print-report-row > td { border: 0 !important; padding: 0 0 2mm !important; background: #fff !important; } .print-report-foot > td { padding: 2mm 0 0 !important; } .print-report-header { display: flex; align-items: center; gap: 6mm; padding-bottom: 2.5mm; border-bottom: 1.5pt solid #000; font-family: Arial, Helvetica, sans-serif; color: #000; } .print-report-logo { height: 12mm; width: auto; flex: 0 0 auto; } .print-report-heading { flex: 1 1 auto; } .print-report-title { font-size: 14pt; font-weight: 700; line-height: 1.2; } .print-report-generated { font-size: 9pt; margin-top: 0.8mm; font-weight: 400; } .print-report-meta { font-size: 9pt; margin-top: 0.8mm; font-weight: 400; } .print-report-footer { padding-top: 2mm; border-top: 0.75pt solid #000; font-family: Arial, Helvetica, sans-serif; font-size: 8.5pt; line-height: 1.45; text-align: center; color: #000; background: #fff; } .print-report-footer-cta { font-weight: 700; } /* Use the whole sheet. The page is laid out in a fixed-width Bootstrap container with a horizontally scrolling table inside it; left alone, that prints as a narrow column adrift on the page, with columns cut off at the edge of the scroller. */ main.container, .container, .container-fluid, .container-lg, .container-xl { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .table-responsive { overflow: visible !important; width: auto !important; } .card-body { padding: 0 !important; } .card { border: none !important; margin-bottom: 4mm !important; } /* The report header row names the report and counts it, so the card's own heading would only repeat it above the header on the first sheet. */ .card-header { display: none !important; } .table { width: 100% !important; margin: 0 !important; } /* Cards and tables print as plain ruled lists. */ .card, .table { border-color: #999 !important; box-shadow: none !important; background: #fff !important; color: #000 !important; } .table th, .table td { background: #fff !important; color: #000 !important; } /* Repeat column headings when a long table runs over the page. */ thead { display: table-header-group; } tr, img { break-inside: avoid; } a { color: #000 !important; text-decoration: none !important; } } /* === features/back-to-top.css === */ /* ========================================================================== Back to Top Button ========================================================================== */ /** * Floating button that appears when user scrolls down the page. * Provides quick navigation back to the top of the page. */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; background: var(--accent, #3498db); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease; z-index: 999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font-size: 1.25rem; line-height: 1; text-decoration: none; } /* Visible state - triggered by JavaScript */ .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Hover state */ .back-to-top:hover { background: var(--accent-hover, #2980b9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-2px); } /* Active/pressed state */ .back-to-top:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } /* Focus state for keyboard accessibility */ .back-to-top:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 52, 152, 219), 0.4), 0 2px 8px rgba(0, 0, 0, 0.15); } .back-to-top:focus-visible { outline: 2px solid var(--accent, #3498db); outline-offset: 2px; } /* Icon styling */ .back-to-top i, .back-to-top svg { width: 20px; height: 20px; pointer-events: none; } /* ========================================================================== Responsive Adjustments ========================================================================== */ /* Smaller button on mobile devices */ @media (max-width: 576px) { .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 1rem; } .back-to-top i, .back-to-top svg { width: 18px; height: 18px; } } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.1s ease, visibility 0.1s ease; } .back-to-top:hover, .back-to-top.show { transform: none; } } /* High contrast mode support */ @media (prefers-contrast: high) { .back-to-top { border: 2px solid currentColor; } }