/* ================================================ PRODUCT THEMING - CSS Custom Properties These variables are set dynamically per product (Load Broker vs Freight Manager) ================================================ */ :root { /* Product Colors - defaults to Load Broker */ --color-primary: #1a365d; --color-primary-hover: #2c5282; --color-primary-light: #ebf4ff; --color-secondary: #2b6cb0; --color-accent: #0EA5E9; --color-sidebar-bg: #1F2A44; --color-sidebar-bg-dark: #16202F; --color-sidebar-text: #e2e8f0; --color-header-bg: #1F2A44; --color-header-bg-dark: #2d3f63; --color-header-text: #ffffff; --color-footer-bg: #1F2A44; --color-border-accent: #0EA5E9; /* Desktop sidebar width — user-resizable via the right-edge drag handle. Persisted to localStorage and re-applied pre-paint in views/_components.pug to avoid flash on refresh. Collapsed (70px), hover-expand (fixed 280px), and Bootstrap offcanvas (). ================================================ */ html[data-table-density="compact"] .main .table thead th, html[data-table-density="compact"] .offcanvas .table thead th, html[data-table-density="compact"] .modal .table thead th { padding: 0.3rem 0.4rem; } html[data-table-density="compact"] .main .table tbody td, html[data-table-density="compact"] .offcanvas .table tbody td, html[data-table-density="compact"] .modal .table tbody td { padding: 0.2rem 0.4rem; } /* Profile offcanvas appearance toggles - compact size */ .offcanvas-body .theme-btn, .offcanvas-body .text-size-btn, .offcanvas-body .table-density-btn { padding: 0.25rem 0.5rem; font-size: 0.8125rem; border-radius: 4px; } /* ================================================ NORMALIZE SMALL FORM VARIANTS Override Bootstrap's -sm classes to match default sizing so all inputs are uniform. The root font-size density setting handles global scaling instead. ================================================ */ .form-control-sm:not([type="checkbox"]):not([type="radio"]) { padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: var(--bs-border-radius); } .form-select-sm { padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.75rem; font-size: 1rem; border-radius: var(--bs-border-radius); } .input-group-sm > .form-control:not([type="checkbox"]):not([type="radio"]), .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: var(--bs-border-radius); } /* ================================================ DARK MODE OVERRIDES Bootstrap 5.3 handles most dark mode via data-bs-theme="dark" These are custom overrides for app-specific styles ================================================ */ [data-bs-theme="dark"] { --app-bg: #1e2228; --app-surface: #272c33; --app-surface-elevated: #2d333b; --app-border: #444c56; --app-text: #e6edf3; --app-text-muted: #8b949e; color-scheme: dark; } [data-bs-theme="dark"] body { background-color: #1e2228; color: #e6edf3; } [data-bs-theme="dark"] .main { background-color: #1e2228; } [data-bs-theme="dark"] .header { background: linear-gradient(180deg, #272c33 0%, #1e2228 100%) !important; border-bottom: 1px solid #444c56; } [data-bs-theme="dark"] .header-icon-btn { color: #e6edf3; } [data-bs-theme="dark"] .header-icon-btn:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 18%, transparent); border-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 25%, transparent); } [data-bs-theme="dark"] .sidebar { background: #1e2228 !important; border-right: 1px solid #444c56; } [data-bs-theme="dark"] .sidebar .nav-link { color: #8b949e; } [data-bs-theme="dark"] .sidebar .nav-link:hover, [data-bs-theme="dark"] .sidebar .nav-link.active { color: #e6edf3; background-color: rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .footer { background: #1e2228 !important; border-top-color: var(--color-border-accent, #0EA5E9) !important; } [data-bs-theme="dark"] .card { background-color: #272c33; border-color: #444c56; } [data-bs-theme="dark"] .card-header { background-color: #2d333b !important; border-bottom-color: #444c56; } /* Page Header V2 dark mode */ [data-bs-theme="dark"] .page-header-v2 { background-color: #1e2228 !important; } [data-bs-theme="dark"] .page-header-v2 .page-header-title { background: #1e2228 !important; } [data-bs-theme="dark"] .page-header-v2 .page-header-controls { background: #1e2228; } /* Tables - cleaner look without harsh striping */ [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #e6edf3; --bs-table-border-color: #444c56; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-striped-color: #e6edf3; --bs-table-hover-bg: rgba(255, 255, 255, 0.05); --bs-table-hover-color: #e6edf3; } [data-bs-theme="dark"] .table > thead { background-color: #1e2228 !important; } [data-bs-theme="dark"] .table > thead th { color: #8b949e; font-weight: 600; border-bottom-color: #444c56; background-color: #1e2228 !important; } [data-bs-theme="dark"] .table > tbody > tr { border-bottom-color: #373e47; } [data-bs-theme="dark"] .table > tbody > tr:hover { background-color: rgba(56, 139, 253, 0.1) !important; } /* DataTables specific */ [data-bs-theme="dark"] table.dataTable { border-collapse: collapse !important; } /* Single-click-to-open row affordance (set by DataTableBase when onRowDblClick is configured) */ table.dt-row-clickable tbody tr { cursor: pointer; } table.dt-row-clickable tbody tr a, table.dt-row-clickable tbody tr button, table.dt-row-clickable tbody tr select { cursor: pointer; } table.dt-row-clickable tbody tr input[type="text"], table.dt-row-clickable tbody tr input[type="number"], table.dt-row-clickable tbody tr input[type="email"], table.dt-row-clickable tbody tr input[type="search"], table.dt-row-clickable tbody tr input[type="tel"], table.dt-row-clickable tbody tr input[type="url"], table.dt-row-clickable tbody tr input[type="password"], table.dt-row-clickable tbody tr textarea { cursor: text; } table.dt-row-clickable tbody tr label { cursor: default; } [data-bs-theme="dark"] table.dataTable thead th, [data-bs-theme="dark"] table.dataTable thead td { background-color: #1e2228 !important; color: #8b949e !important; border-bottom-color: #444c56 !important; } /* DataTables sorting icons */ [data-bs-theme="dark"] table.dataTable thead .sorting:before, [data-bs-theme="dark"] table.dataTable thead .sorting:after, [data-bs-theme="dark"] table.dataTable thead .sorting_asc:before, [data-bs-theme="dark"] table.dataTable thead .sorting_asc:after, [data-bs-theme="dark"] table.dataTable thead .sorting_desc:before, [data-bs-theme="dark"] table.dataTable thead .sorting_desc:after { opacity: 0.5; } [data-bs-theme="dark"] table.dataTable tbody tr { background-color: #272c33; } [data-bs-theme="dark"] table.dataTable tbody tr:nth-child(odd) { background-color: #262b32; } [data-bs-theme="dark"] table.dataTable tbody tr:hover { background-color: rgba(56, 139, 253, 0.15) !important; } /* Table cell text - ensure readable in dark mode */ [data-bs-theme="dark"] table.dataTable tbody td { color: #e6edf3 !important; } [data-bs-theme="dark"] table.dataTable tbody td a { color: #58a6ff; } [data-bs-theme="dark"] table.dataTable tbody td a:hover { color: #79c0ff; } /* Main content table thead - override the light gradient */ [data-bs-theme="dark"] .main .table thead th { background: #1e2228 !important; border-bottom: 2px solid #444c56 !important; box-shadow: none !important; color: #8b949e !important; } /* DataTables length dropdown in dark mode */ [data-bs-theme="dark"] #datatable-length-container .dataTables_length select { background-color: #1e2228 !important; border-color: #444c56 !important; color: #e6edf3 !important; } [data-bs-theme="dark"] #datatable-length-container .dataTables_length label { color: #8b949e !important; } [data-bs-theme="dark"] #datatable-search-container .dataTables_filter input { background-color: #1e2228 !important; border-color: #444c56 !important; color: #e6edf3 !important; } [data-bs-theme="dark"] #datatable-search-container .dataTables_filter input::placeholder { color: #6e7681 !important; } /* Table footer (pagination area) */ [data-bs-theme="dark"] .table-footer { background-color: #1e2228 !important; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .table-footer .dataTables_info { color: #8b949e !important; } [data-bs-theme="dark"] .offcanvas { background-color: #272c33; border-color: #444c56; } [data-bs-theme="dark"] .offcanvas-header { background: #1e2228 !important; border-bottom: 1px solid #444c56 !important; } [data-bs-theme="dark"] .offcanvas-header .offcanvas-title { color: #e6edf3 !important; } [data-bs-theme="dark"] .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="dark"] .offcanvas-footer { background-color: #1e2228 !important; border-top-color: #444c56 !important; } /* Chat offcanvas dark mode */ [data-bs-theme="dark"] #chatOffcanvas .offcanvas-header { background: #1e2228 !important; } [data-bs-theme="dark"] #chatOffcanvas #chatHeader { background: #272c33; } [data-bs-theme="dark"] #chatOffcanvas #chatConversationHeader, [data-bs-theme="dark"] #chatOffcanvas #chatInputArea { background: #272c33; } [data-bs-theme="dark"] #chatOffcanvas #chatConversationsList { background: #272c33; } [data-bs-theme="dark"] #chatOffcanvas .conversation-item:hover { background: rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] #chatOffcanvas #chatMessageInput { background: #1e2228; border-color: #444c56; color: #e6edf3; } /* User profile offcanvas dark mode */ [data-bs-theme="dark"] #userProfileOffcanvas .offcanvas-header { background: #1e2228 !important; } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-header { background: #1e2228; } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-item { color: #e6edf3; } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-item:hover { background: rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-item-icon { color: #8b949e; } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-item-text small { color: #6e7681 !important; } [data-bs-theme="dark"] #userProfileOffcanvas .user-profile-footer { background: #1e2228; } [data-bs-theme="dark"] .modal-content { background-color: #272c33; border-color: #444c56; } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: #444c56; } [data-bs-theme="dark"] .modal-footer { background-color: #1e2228; } [data-bs-theme="dark"] .modal-body .form-label { color: #e6edf3; } [data-bs-theme="dark"] .dropdown-menu { background-color: #2d333b; border-color: #444c56; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .dropdown-item { color: #e6edf3; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.08); color: #fff; } [data-bs-theme="dark"] .dropdown-divider { border-color: #444c56; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1e2228; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #1e2228; border-color: #388bfd; color: #e6edf3; box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.3); } [data-bs-theme="dark"] .form-control::placeholder { color: #6e7681; } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: #161a1f; color: #6e7681; } [data-bs-theme="dark"] .input-group-text { background-color: #2d333b; border-color: #444c56; color: #8b949e; } [data-bs-theme="dark"] .list-group-item { background-color: #272c33; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .list-group-item:hover { background-color: rgba(255, 255, 255, 0.05); } [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end, [data-bs-theme="dark"] .border { border-color: #444c56 !important; } [data-bs-theme="dark"] .bg-white { background-color: #272c33 !important; } [data-bs-theme="dark"] .bg-light { background-color: #2d333b !important; } [data-bs-theme="dark"] .text-dark { color: #e6edf3 !important; } [data-bs-theme="dark"] .text-muted { color: #8b949e !important; } /* Buttons in dark mode */ [data-bs-theme="dark"] .btn-outline-secondary { color: #8b949e; border-color: #444c56; } [data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.08); color: #e6edf3; border-color: #6e7681; } [data-bs-theme="dark"] .btn-light { background-color: #2d333b; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .btn-light:hover { background-color: #373e47; border-color: #6e7681; color: #fff; } /* Select2 dark mode */ [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color: #1e2228; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: #e6edf3; } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { background-color: #2d333b; border-color: #444c56; } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option { color: #e6edf3; } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #388bfd; } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field { background-color: #1e2228; border-color: #444c56; color: #e6edf3; } /* DataTables dark mode */ [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: #1e2228; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length label, [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: #8b949e; } [data-bs-theme="dark"] .page-link { background-color: #272c33; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .page-link:hover { background-color: #2d333b; border-color: #6e7681; color: #fff; } [data-bs-theme="dark"] .page-item.active .page-link { background-color: #388bfd; border-color: #388bfd; } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: #1e2228; border-color: #444c56; color: #6e7681; } /* Quick search modal dark mode */ [data-bs-theme="dark"] #quickSearchModal .modal-content { background-color: #272c33; } [data-bs-theme="dark"] #quickSearchModal .modal-header { background-color: #1e2228; border-bottom-color: #373e47; } [data-bs-theme="dark"] #quickSearchModal .modal-body { background-color: #272c33; } [data-bs-theme="dark"] #quickSearchModal .quick-search-input { background-color: #1e2228; color: #e6edf3; } [data-bs-theme="dark"] #quickSearchModal .quick-search-input::placeholder { color: #6e7681; } [data-bs-theme="dark"] .quick-search-icon-left { color: #8b949e; } [data-bs-theme="dark"] .quick-search-clear-right { color: #8b949e; } [data-bs-theme="dark"] .quick-search-clear-right:hover { background: rgba(255, 255, 255, 0.1); color: #e6edf3; } [data-bs-theme="dark"] .quick-search-results { background-color: #272c33; } [data-bs-theme="dark"] .quick-search-group { border-top-color: #444c56; } [data-bs-theme="dark"] .quick-search-group-title { color: #e6edf3; } [data-bs-theme="dark"] .quick-search-group-title i { color: #8b949e; } [data-bs-theme="dark"] .quick-search-result-item { border-bottom-color: #373e47; color: #e6edf3; } [data-bs-theme="dark"] .quick-search-result-item .quick-search-result-number { color: #e6edf3; } [data-bs-theme="dark"] .quick-search-result-item .quick-search-result-route { color: #adbac7; } [data-bs-theme="dark"] .quick-search-result-item .quick-search-result-meta { color: #8b949e; } [data-bs-theme="dark"] .quick-search-result-item .quick-search-result-meta i { color: #6e7681; } [data-bs-theme="dark"] .quick-search-result-item .quick-search-result-subtitle, [data-bs-theme="dark"] .quick-search-result-item .text-muted { color: #8b949e !important; } [data-bs-theme="dark"] .quick-search-result-item small { color: #8b949e; } [data-bs-theme="dark"] .quick-search-result-item:hover, [data-bs-theme="dark"] .quick-search-result-item.focused { background-color: rgba(56, 139, 253, 0.1); } [data-bs-theme="dark"] .quick-search-empty, [data-bs-theme="dark"] .quick-search-loading { color: #8b949e; } [data-bs-theme="dark"] .quick-search-empty i { color: #6e7681; } /* Flatpickr dark mode */ [data-bs-theme="dark"] .flatpickr-calendar { background: #2d333b; border-color: #444c56; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .flatpickr-months .flatpickr-month { background: #2d333b; color: #e6edf3; } [data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: #2d333b; color: #e6edf3; } [data-bs-theme="dark"] .flatpickr-weekdays { background: #2d333b; } [data-bs-theme="dark"] .flatpickr-weekday { color: #8b949e; } [data-bs-theme="dark"] .flatpickr-day { color: #e6edf3; } [data-bs-theme="dark"] .flatpickr-day:hover { background: rgba(255, 255, 255, 0.08); border-color: #2c3034; } [data-bs-theme="dark"] .flatpickr-day.today { border-color: #388bfd; } [data-bs-theme="dark"] .flatpickr-day.selected { background: #388bfd; border-color: #388bfd; } /* Page title/subtitle areas */ [data-bs-theme="dark"] .page-header, [data-bs-theme="dark"] .content-header { background-color: #1e2228; } /* Nav tabs */ [data-bs-theme="dark"] .nav-tabs { border-bottom-color: #444c56; } [data-bs-theme="dark"] .nav-tabs .nav-link { color: #8b949e; } [data-bs-theme="dark"] .nav-tabs .nav-link:hover { border-color: #444c56 #444c56 transparent; color: #e6edf3; } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: #272c33; border-color: #444c56 #444c56 #272c33; color: #e6edf3; } /* Nav pills */ [data-bs-theme="dark"] .nav-pills .nav-link { color: #8b949e; } [data-bs-theme="dark"] .nav-pills .nav-link:hover { background-color: rgba(255, 255, 255, 0.05); color: #e6edf3; } [data-bs-theme="dark"] .nav-pills .nav-link.active { background-color: #388bfd; color: #fff; } /* Badges - keep colorful but adjust if needed */ [data-bs-theme="dark"] .badge.bg-light { background-color: #2d333b !important; color: #e6edf3 !important; } [data-bs-theme="dark"] .badge.bg-warning { background-color: rgba(210, 153, 34, 0.2) !important; color: #e3b341 !important; border: 1px solid rgba(210, 153, 34, 0.4); } [data-bs-theme="dark"] .badge.bg-info { background-color: rgba(56, 139, 253, 0.2) !important; color: #79c0ff !important; border: 1px solid rgba(56, 139, 253, 0.4); } [data-bs-theme="dark"] .badge.bg-success { background-color: rgba(63, 185, 80, 0.2) !important; color: #56d364 !important; border: 1px solid rgba(63, 185, 80, 0.4); } [data-bs-theme="dark"] .badge.bg-danger { background-color: rgba(248, 81, 73, 0.2) !important; color: #ff7b72 !important; border: 1px solid rgba(248, 81, 73, 0.4); } /* Cards in dark mode - override bg-white class */ [data-bs-theme="dark"] .card .card-header.bg-white { background-color: #22272e !important; color: #e6edf3; } [data-bs-theme="dark"] .card .card-body { background-color: #22272e; color: #e6edf3; } /* Table light headers in dark mode */ [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table thead.table-light th { --bs-table-bg: #2d333b; --bs-table-color: #8b949e; --bs-table-border-color: #444c56; background-color: #2d333b !important; color: #8b949e !important; border-color: #444c56 !important; } /* Table text in dark mode */ [data-bs-theme="dark"] .table tbody td { color: #e6edf3; border-color: #444c56; } [data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(56, 139, 253, 0.1); } /* Alerts in dark mode - slightly adjust backgrounds */ [data-bs-theme="dark"] .alert-info { background-color: rgba(56, 139, 253, 0.15); border-color: rgba(56, 139, 253, 0.3); color: #79c0ff; } [data-bs-theme="dark"] .alert-warning { background-color: rgba(210, 153, 34, 0.15); border-color: rgba(210, 153, 34, 0.3); color: #e3b341; } [data-bs-theme="dark"] .alert-danger { background-color: rgba(248, 81, 73, 0.15); border-color: rgba(248, 81, 73, 0.3); color: #ff7b72; } [data-bs-theme="dark"] .alert-success { background-color: rgba(63, 185, 80, 0.15); border-color: rgba(63, 185, 80, 0.3); color: #56d364; } /* Breadcrumbs */ [data-bs-theme="dark"] .breadcrumb { background-color: transparent; } [data-bs-theme="dark"] .breadcrumb-item a { color: #388bfd; } [data-bs-theme="dark"] .breadcrumb-item.active { color: #8b949e; } /* Progress bars */ [data-bs-theme="dark"] .progress { background-color: #2d333b; } /* Accordion */ [data-bs-theme="dark"] .accordion-item { background-color: #272c33; border-color: #444c56; } [data-bs-theme="dark"] .accordion-button { background-color: #272c33; color: #e6edf3; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { background-color: #2d333b; color: #e6edf3; } [data-bs-theme="dark"] .accordion-button::after { filter: invert(1); } /* Code blocks */ [data-bs-theme="dark"] pre, [data-bs-theme="dark"] code { background-color: #161a1f; color: #e6edf3; } /* Tooltip */ [data-bs-theme="dark"] .tooltip-inner { background-color: #2d333b; color: #e6edf3; } /* Popover */ [data-bs-theme="dark"] .popover { background-color: #2d333b; border-color: #444c56; } [data-bs-theme="dark"] .popover-header { background-color: #373e47; border-bottom-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .popover-body { color: #e6edf3; } /* Custom badge colors for teams */ .bg-purple { background-color: #8b5cf6 !important; color: white; } .bg-pink { background-color: #ec4899 !important; color: white; } .bg-orange { background-color: #f97316 !important; color: white; } .bg-teal { background-color: #14b8a6 !important; color: white; } /* Prevent flash on theme toggle */ html { transition: background-color 0.15s ease; } /* ================================================ END DARK MODE OVERRIDES ================================================ */ .main { transition: margin-left 0.3s ease-in-out; } /* Import Wizard Step Styles */ .import-steps-container { gap: 0; } .import-step { transition: all 0.3s ease; } .import-step .step-circle { width: 32px; height: 32px; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .import-step.step-active .step-circle { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); transform: scale(1.1); } .import-step.step-completed .step-circle { box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3); } .import-step .step-check { font-size: 0.75rem; } .import-step .step-label { transition: all 0.3s ease; white-space: nowrap; } .step-connector { flex-grow: 1; max-width: 60px; min-width: 20px; height: 4px; position: relative; } .step-connector-line { position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: #dee2e6; border-radius: 2px; transform: translateY(-50%); transition: all 0.4s ease; } .step-connector-line.completed { background: linear-gradient(90deg, #198754, #20c997); } .step-connector-line::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: linear-gradient(90deg, #198754, #20c997); border-radius: 2px; transition: width 0.4s ease; } .step-connector-line.completed::after { width: 100%; } @media (max-width: 991.98px) { .import-step .step-circle { width: 28px; height: 28px; font-size: 0.8rem; } .step-connector { max-width: 30px; min-width: 10px; } } @media (max-width: 575.98px) { .import-step .step-circle { width: 24px; height: 24px; font-size: 0.7rem; } .import-step .step-check { font-size: 0.6rem; } .step-connector { max-width: 15px; min-width: 8px; } } /* Migration Wizard - Source Selection Cards */ .source-option-card { cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .source-option-card:hover:not(.disabled) { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); border-color: var(--bs-primary); } .source-option-card.selected { border-color: var(--bs-primary); background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%); } .source-option-card.selected .icon-wrapper { transform: scale(1.1); } .source-option-card.disabled { cursor: not-allowed; opacity: 0.6; } .source-option-card .icon-wrapper { transition: transform 0.3s ease; } /* Migration Wizard - Entity Selection Cards */ .entity-select-card { transition: all 0.2s ease; border: 1px solid var(--bs-border-color); } .entity-select-card:has(.form-check-input:checked) { border-color: var(--bs-primary); background: rgba(13, 110, 253, 0.03); } .entity-select-card .form-check-input { transform: scale(1.2); } /* Migration Steps Container - Support for more steps */ .migration-steps-container { gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .migration-steps-container::-webkit-scrollbar { display: none; } .migration-step { transition: all 0.3s ease; flex-shrink: 0; } .migration-step .step-circle { width: 28px; height: 28px; font-size: 0.75rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .migration-step.step-active .step-circle { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); transform: scale(1.1); } .migration-step.step-completed .step-circle { background: var(--bs-success) !important; box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3); } .migration-step .step-check { font-size: 0.65rem; } .migration-step .step-label { transition: all 0.3s ease; white-space: nowrap; font-size: 0.75rem; } @media (max-width: 991.98px) { .migration-step .step-circle { width: 24px; height: 24px; font-size: 0.65rem; } .migration-step .step-label { font-size: 0.65rem; } } @media (max-width: 767.98px) { .migration-step .step-label { display: none !important; } .migration-step .step-circle { width: 22px; height: 22px; font-size: 0.6rem; } } /* Mobile: no margin for sidebar (overlay offcanvas) */ @media (max-width: 991.98px) { .main { margin-left: 0 !important; } } /* Enhanced Header Styles */ #appHeader { background: linear-gradient(135deg, var(--color-header-bg, #1F2A44) 0%, var(--color-header-bg-dark, #2d3f63) 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border-bottom: 1px solid color-mix(in srgb, var(--color-header-text, white) 10%, transparent); backdrop-filter: blur(10px); position: relative; z-index: 1030; overflow: visible !important; } /* Impersonation mode - warning header */ #appHeader.bg-warning { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } #appHeader.bg-warning .btn-link, #appHeader.bg-warning .brand-text, #appHeader.bg-warning .header-icon-btn { color: #212529 !important; } #appHeader.bg-warning .btn-link:hover, #appHeader.bg-warning .header-icon-btn:hover { background-color: rgba(0, 0, 0, 0.1); } #appHeader.bg-warning::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2) 50%, transparent); } #appHeader::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 5%, var(--color-border-accent, #0EA5E9) 25%, var(--color-border-accent, #0EA5E9) 75%, transparent 95%); } #appHeader .btn-link { transition: all 0.3s ease; border-radius: 8px; } #appHeader .btn-link:hover { background-color: rgba(14, 165, 233, 0.15); background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent); transform: translateY(-1px); } #appHeader #notificationBtn { position: relative; } #appHeader #notificationBtn .badge { position: absolute; top: 0; right: 0; transform: translate(25%, -25%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); animation: pulse 2s infinite; background-color: #ef4444 !important; color: #fff !important; border: none !important; } #appHeader #chatToggle .badge { background-color: #ef4444 !important; color: #fff !important; border: none !important; } @keyframes pulse { 0%, 100% { transform: translate(25%, -25%) scale(1); } 50% { transform: translate(25%, -25%) scale(1.1); } } #appHeader .dropdown-toggle { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent); color: var(--color-header-text, white); border: 1px solid color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); border-radius: 8px; padding: 0.4rem 0.85rem; transition: all 0.3s ease; font-weight: 500; font-size: 0.9rem; } #appHeader .dropdown-toggle:hover { background-color: var(--color-accent, #0EA5E9); border-color: var(--color-accent, #0EA5E9); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } #appHeader .brand-text { font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: var(--color-header-text, white); } /* Header Icon Buttons - uniform circular style */ .header-icon-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; aspect-ratio: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--color-header-text, white) 15%, transparent) 0%, color-mix(in srgb, var(--color-header-text, white) 6%, transparent) 100%); color: var(--color-header-text, white) !important; border: 1px solid color-mix(in srgb, var(--color-header-text, white) 18%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 !important; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .header-icon-btn:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent) 0%, color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent) 100%); border-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 40%, transparent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-2px) scale(1.08); } .header-icon-btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.08s ease; } .header-icon-btn:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent, #0EA5E9) 40%, transparent), 0 2px 5px rgba(0, 0, 0, 0.18); outline: none; } /* ===== Sidebar Menu / Favorites View Toggle ===== Compact star button glued to the left of the search input. Click toggles between menu and favorites view. The body class .sidebar-view-favorites keeps both desktop and mobile sidebars in sync. */ .sidebar-fav-toggle { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; border-radius: 4px; cursor: pointer; z-index: 2; transition: color 0.15s ease, background 0.15s ease; } .sidebar-fav-toggle:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); } .sidebar-view-favorites .sidebar-fav-toggle { color: #f59e0b; } /* The toggle button renders both icons; CSS shows the one that means "switch to the other view" so the affordance is unambiguous. The orange star color above only applies in favorites view, where fa-bars is shown. */ .sidebar-fav-toggle .fav-toggle-favs-icon { display: none; } .sidebar-view-favorites .sidebar-fav-toggle .fav-toggle-menu-icon { display: none; } .sidebar-view-favorites .sidebar-fav-toggle .fav-toggle-favs-icon { display: inline-block; } /* Push the search icon and input over to make room for the star button. */ .sidebar-search-box .sidebar-fav-toggle ~ .sidebar-search-icon { left: 38px; } .sidebar-search-box:has(.sidebar-fav-toggle) .sidebar-search-input { padding-left: 58px; } /* Default: menu visible, favorites hidden. The .sidebar-view-favorites class (set on either pre-paint or at runtime) flips it. */ .sidebar-pane-favorites { display: none; } .sidebar-view-favorites .sidebar-pane-menu { display: none; } .sidebar-view-favorites .sidebar-pane-favorites { display: block; } /* Favorites pane row chrome. Default view: clean nav-links, no chrome (label + icon only). Edit mode (body.favorites-edit-mode): drag handle + rename + remove buttons all visible; row click is suppressed in JS. */ .favorites-nav .favorite-item { white-space: nowrap; } .favorites-nav .favorite-item .nav-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* In edit mode, rows aren't clickable — suppress the menu's translateX slide and left-accent affordance so it doesn't read as "click me". */ body.favorites-edit-mode .favorites-nav .favorite-item:hover { transform: none; background: transparent; } body.favorites-edit-mode .favorites-nav .favorite-item:hover::before { transform: scaleY(0); } body.favorites-edit-mode .favorites-nav .favorite-item:hover i { transform: none; } /* Chrome is fully removed from layout in default mode (display: none) so it can't stack-context over ::before or otherwise interfere with the menu's hover treatment. Edit mode reveals it via display: block below. */ .favorites-nav .drag-handle, .favorites-nav .favorite-rename-btn, .favorites-nav .favorite-remove-btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; line-height: 1; z-index: 1; } /* Override the menu's .nav-link i base rule (which sets blue accent, 1.125rem, margin-right: 0.75rem) for the chrome — these are auxiliary controls, not nav glyphs. Icons inherit color from the button so the button's own :hover state can recolor them without extra selectors. */ .favorites-nav .favorite-rename-btn i, .favorites-nav .favorite-remove-btn i { color: inherit !important; font-size: 0.8rem !important; width: auto !important; margin-right: 0 !important; transform: none !important; } .favorites-nav .drag-handle { left: 0.5rem; color: rgba(255, 255, 255, 0.4) !important; font-size: 0.75rem !important; width: auto !important; margin-right: 0 !important; cursor: grab; transform: translateY(-50%) !important; /* keep vertical center */ } .favorites-nav .favorite-rename-btn, .favorites-nav .favorite-remove-btn { color: rgba(255, 255, 255, 0.55); width: 18px; height: 18px; align-items: center; justify-content: center; } body.favorites-edit-mode .favorites-nav .favorite-rename-btn, body.favorites-edit-mode .favorites-nav .favorite-remove-btn { display: flex; /* override the base display: block so flex centering works */ } .favorites-nav .favorite-rename-btn { right: 1.75rem; } .favorites-nav .favorite-remove-btn { right: 0.4rem; } /* Edit mode: reveal chrome (display: block) and pad the row to make room. */ body.favorites-edit-mode .favorites-nav .drag-handle, body.favorites-edit-mode .favorites-nav .favorite-rename-btn, body.favorites-edit-mode .favorites-nav .favorite-remove-btn { display: block; opacity: 0.85; } body.favorites-edit-mode .favorites-nav .favorite-item { padding-left: 1.5rem; padding-right: 3.25rem; cursor: default; } body.favorites-edit-mode .favorites-nav .favorite-rename-btn:hover { color: var(--color-accent, #0EA5E9) !important; opacity: 1; } body.favorites-edit-mode .favorites-nav .favorite-remove-btn:hover { color: #f87171 !important; opacity: 1; } /* Sortable.js drag visuals while reordering. */ .favorites-nav .fav-row-ghost { opacity: 0.4; } .favorites-nav .fav-row-chosen { background: rgba(14, 165, 233, 0.08); } /* Inline rename input — sits in place of the label span. */ .favorites-nav .favorite-rename-input { width: 100%; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--color-accent, #0EA5E9); border-radius: 4px; color: #fff; font-size: inherit; font-weight: inherit; padding: 2px 6px; outline: none; } /* Edit toggle bar — anchored at the absolute bottom of the favorites pane. When favorites view is active, the chain #appSidebar → .offcanvas-body → .sidebar-pane-favorites → .favorites-edit-bar needs to be flex-column all the way down so the pane fills the sidebar height and the edit bar can pin to the bottom. The ID selector on .offcanvas-body is required to beat Bootstrap's `.offcanvas-lg .offcanvas-body { flex-grow: 0 }` at >= lg. */ @media (min-width: 992px) { .sidebar-view-favorites #appSidebar { display: flex !important; /* beats Bootstrap's .d-lg-block at >= lg */ flex-direction: column; overflow: hidden; } } .sidebar-view-favorites #appSidebar > .offcanvas-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .sidebar-view-favorites .sidebar-pane-favorites { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .sidebar-pane-favorites .sidebar-search-wrapper { flex: 0 0 auto; } .sidebar-pane-favorites .favorites-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .favorites-edit-bar { flex: 0 0 auto; padding: 8px 12px 12px; background: var(--color-sidebar-bg-dark, #16202F); border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 5; } /* Edit / Cancel / Done buttons share a single dark-glass base so they look like a matched pair in edit mode. Color hints distinguish action. */ .favorites-edit-toggle, .favorites-cancel-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; font-weight: 500; } .favorites-edit-toggle:hover, .favorites-cancel-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.25); } /* Done state — accent-tinted so the primary action stands out from Cancel. */ .favorites-edit-toggle.is-done { background: color-mix(in srgb, #22c55e 18%, transparent); border-color: color-mix(in srgb, #22c55e 60%, transparent); color: #d1fae5; } .favorites-edit-toggle.is-done:hover { background: color-mix(in srgb, #22c55e 28%, transparent); border-color: #22c55e; color: #fff; } /* Hide the edit bar and its contents when the desktop sidebar is collapsed — no room for the buttons in the 70px-wide rail. Same treatment as the sidebar-search-wrapper. Desktop-only: below lg the .collapsed class is a no-op (offcanvas mode), so this rule must not apply there. */ @media (min-width: 992px) { .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .favorites-edit-bar { display: none; } /* The "No favorites yet" empty state has a 3x star + multi-line copy that doesn't fit the 70px collapsed rail. Hide it when collapsed; the hover-expand state still shows it. */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .favorites-empty { display: none; } } .favorites-empty { color: rgba(255, 255, 255, 0.55); } .favorites-empty i { color: rgba(255, 255, 255, 0.25); } /* ===== Page Header Favorite Star ===== */ .page-fav-star { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; font-size: 1rem; line-height: 1; color: #cbd5e1; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; vertical-align: middle; } .page-fav-star:hover { color: #ffc107; transform: scale(1.15); } .page-fav-star .fa-star { color: #ffc107; } /* Body Background */ body { background-color: #F4F6F8; } /* Button Styling - Apply gradient and shadow effects with Bootstrap colors */ .btn-primary { background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); border: none; border-radius: 8px; box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2); font-weight: 500; padding: 10px 20px; } .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%); box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3); } .btn-success { background: linear-gradient(135deg, #198754 0%, #157347 100%); border: none; border-radius: 8px; box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2); font-weight: 500; padding: 10px 20px; } .btn-success:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #157347 0%, #146c43 100%); box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3); } .btn-danger { background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%); border: none; border-radius: 8px; box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); font-weight: 500; padding: 10px 20px; } .btn-danger:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #bb2d3b 0%, #a02622 100%); box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3); } .btn-warning { background: linear-gradient(135deg, #ffc107 0%, #e5a800 100%); border: none; border-radius: 8px; box-shadow: 0 2px 4px rgba(180, 140, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1); color: #000; font-weight: 500; padding: 10px 20px; } .btn-warning:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #e5a800 0%, #cc9500 100%); box-shadow: 0 4px 8px rgba(180, 140, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.15); } .btn-info { background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%); border: none; border-radius: 8px; box-shadow: 0 2px 4px rgba(13, 202, 240, 0.2); color: #fff; font-weight: 500; padding: 10px 20px; } .btn-info:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #0aa2c0 0%, #087990 100%); box-shadow: 0 4px 8px rgba(13, 202, 240, 0.3); color: #fff; } /* Icon-only button style - minimal, borderless look matching table action icons */ /* Card header buttons - match page header button styling */ .card-header .btn-sm { height: 31px; min-height: 31px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; border-radius: 8px; } .card-header .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .card-header .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } .card-header .btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2); } .card-header .btn-success:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3); transform: translateY(-1px); } .card-header .btn-secondary { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); border: none; box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); } .card-header .btn-secondary:hover { background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%); box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3); transform: translateY(-1px); } .card-header .btn-outline-primary { border: 1px solid var(--color-accent, #0EA5E9); border-radius: 8px; color: var(--color-accent, #0EA5E9); background: transparent; box-shadow: none; } .card-header .btn-outline-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border-color: var(--color-accent, #0EA5E9); color: #fff; box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } .card-header .btn-outline-danger { border: 1px solid #ef4444; border-radius: 8px; color: #ef4444; background: transparent; box-shadow: none; } .card-header .btn-outline-danger:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-color: #ef4444; color: #fff; box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); transform: translateY(-1px); } .card-header .btn-outline-secondary { border: 1px solid #6c757d; border-radius: 8px; color: #6c757d; background: transparent; box-shadow: none; } .card-header .btn-outline-secondary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); border-color: #6c757d; color: #fff; box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3); transform: translateY(-1px); } .btn-icon { background: transparent; border: none; color: #6c757d; padding: 0.375rem; width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; transition: all 0.15s ease-in-out; flex-shrink: 0; } /* Ensure btn-icon keeps flex display even with d-md-block */ .page-header-v2 .btn-icon.d-md-block { display: none; } @media (min-width: 768px) { .page-header-v2 .btn-icon.d-md-block { display: inline-flex !important; } } .btn-icon:hover { background: rgba(108, 117, 125, 0.1); color: #495057; } .btn-icon:focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25); outline: none; } .btn-icon:disabled { opacity: 0.5; pointer-events: none; } .btn-icon i { font-size: 0.875rem; } /* Icon button group - for grouped icon buttons */ .btn-group .btn-icon { border-radius: 0; } .btn-group .btn-icon:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; } .btn-group .btn-icon:last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .btn-group .btn-icon + .btn-icon { margin-left: 1px; } /* Toolbar icon button - compact padding for icon-only toolbar buttons */ .btn-toolbar-icon { padding-left: 0.5rem; padding-right: 0.5rem; } /* Page Header Styling */ .page-header { background-color: white !important; border-bottom: 1px solid #e5e7eb !important; } /* Page Header V2 - Two Row Layout */ .page-header-v2 { background-color: white !important; transition: margin-left 0.3s ease-in-out; } /* Desktop: account for sidebar width */ @media (min-width: 992px) { .page-header-v2 { margin-left: var(--sidebar-width); } .sidebar-collapsed .page-header-v2 { margin-left: 70px; } } .page-header-v2 .page-header-title { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); } .page-header-v2 .page-header-controls { flex-wrap: nowrap; } .page-header-v2 .btn-primary, .editor-tab-toolbar .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .page-header-v2 .btn-primary:hover:not(.toggle-on):not(.toggle-off), .editor-tab-toolbar .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } .page-header-v2 .btn-success, .editor-tab-toolbar .btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2); } .page-header-v2 .btn-success:hover, .editor-tab-toolbar .btn-success:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3); transform: translateY(-1px); } .page-header-v2 .btn-danger, .editor-tab-toolbar .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2); } .page-header-v2 .btn-danger:hover:not(.toggle-on):not(.toggle-off), .editor-tab-toolbar .btn-danger:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); transform: translateY(-1px); } /* Bulk action bar — sticky bottom toolbars that surface when rows are checked. Mirror the page-header-v2 button styling so primary/success/etc actions look and feel the same as the toolbar at the top of the page. */ .bulk-action-bar .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .bulk-action-bar .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } .bulk-action-bar .btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2); } .bulk-action-bar .btn-success:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3); transform: translateY(-1px); } .bulk-action-bar .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2); } .bulk-action-bar .btn-danger:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); transform: translateY(-1px); } .bulk-action-bar .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .page-header-v2 .btn-warning { background: linear-gradient(135deg, #ffc107 0%, #e5a800 100%); border: none; color: #000; box-shadow: 0 2px 4px rgba(180, 140, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1); } .page-header-v2 .btn-warning:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #e5a800 0%, #cc9500 100%); color: #000; box-shadow: 0 4px 8px rgba(180, 140, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } .page-header-v2 .btn-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); border: none; box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2); } .page-header-v2 .btn-secondary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3); transform: translateY(-1px); } .page-header-v2 .btn-outline-danger { border: 1px solid #ef4444; border-radius: 8px; color: #ef4444; background: transparent; box-shadow: none; } .page-header-v2 .btn-outline-danger:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-color: #ef4444; color: #fff; box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3); transform: translateY(-1px); } .page-header-v2 button.btn-sm, .page-header-v2 a.btn-sm, .bulk-action-bar button.btn-sm, .bulk-action-bar a.btn-sm { height: 31px !important; min-height: 31px !important; max-height: 31px !important; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } @media (max-width: 768px) { .page-header-v2 .page-header-title { padding: 0.5rem 0.75rem !important; } .page-header-v2 .page-header-title div.fw-bold { font-size: 0.95rem; } .page-header-v2 .page-header-controls { padding: 0.5rem 0.75rem !important; gap: 0.5rem !important; } .page-header-v2 #datatable-search-container { flex: 1 1 auto; min-width: 0; } .page-header-v2 #datatable-search-container .dataTables_filter { margin: 0; } .page-header-v2 #datatable-search-container .dataTables_filter label { margin: 0; width: 100%; } .page-header-v2 #datatable-search-container .dataTables_filter input { width: 100% !important; padding: 0.375rem 0.5rem; font-size: 0.875rem; } } .page-header .btn-primary { background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); border: none; box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2); } .page-header .btn-primary:hover { background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%); box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3); } /* Ensure consistent button heights in page header */ .page-header button.btn-sm { height: 31px !important; min-height: 31px !important; max-height: 31px !important; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } /* Tablet/Mobile Page Header Styles */ @media (max-width: 991px) { .page-header>div:first-child p.text-muted { display: none; } .page-header #toggleStats { display: none !important; } } @media (max-width: 768px) { .page-header { padding: 0.5rem 0.75rem !important; min-height: auto !important; } .page-header>div:first-child { display: none !important; } .page-header>div:last-child { width: 100%; justify-content: space-between !important; gap: 0.5rem !important; } #datatable-length-container { display: none !important; } .page-header #datatable-search-container { flex: 1 1 auto; max-width: calc(100% - 50px); } #datatable-search-container .dataTables_filter { margin: 0; } #datatable-search-container .dataTables_filter label { margin: 0; width: 100%; } #datatable-search-container .dataTables_filter input { width: 100% !important; padding: 0.375rem 0.5rem; font-size: 0.875rem; } .page-header .btn-primary { padding: 0.375rem 0.5rem; font-size: 0.875rem; flex-shrink: 0; } } /* Dropdown Menu Fix */ .dropdown-menu { z-index: 1040; background: white; border: none; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); padding: 0.375rem 0; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } .dropdown-menu::-webkit-scrollbar { width: 6px; } .dropdown-menu::-webkit-scrollbar-track { background: transparent; } .dropdown-menu::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 3px; } .dropdown-item { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #374151; transition: background-color 0.15s ease, color 0.15s ease; } .dropdown-item:hover, .dropdown-item:focus { background-color: #f3f4f6; color: #1f2937; } .dropdown-item:active, .dropdown-item.active { background-color: var(--color-accent, #0EA5E9); color: #fff; } .dropdown-divider { margin: 0.375rem 0; border-top-color: #f1f3f5; } .dropdown-header { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; padding: 0.5rem 1rem 0.375rem; } #appHeader .dropdown { position: relative; } /* Enhanced Quick Actions Dropdown */ #appHeader .dropdown-menu { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); padding: 0.5rem 0; min-width: 260px; margin-top: 0.75rem !important; overflow: hidden; } #appHeader .dropdown-header { color: #1F2A44; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.75rem 1rem 0.5rem; margin-top: 0.25rem; } #appHeader .dropdown-item { padding: 0.65rem 1rem; color: #212529; transition: all 0.2s ease; border-radius: 0; margin: 0; display: flex; align-items: center; font-weight: 500; } #appHeader .dropdown-item:hover { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); color: white; } #appHeader .dropdown-item i { width: 20px; text-align: center; opacity: 0.8; } #appHeader .dropdown-item:hover i { opacity: 1; } #appHeader .dropdown-divider { margin: 0.5rem 1rem; border-top-color: #e5e7eb; } #appHeader .qa-add-shipment { background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent) 0%, color-mix(in srgb, var(--color-accent, #0EA5E9) 5%, transparent) 100%); border-left: 3px solid var(--color-accent, #0EA5E9); font-weight: 600; } #appHeader .qa-add-shipment:hover { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border-left-color: var(--color-accent, #0EA5E9); transform: translateX(0) !important; } /* Sticky Table Header - for non-scrollX tables */ .main .table-responsive:not(:has(.dataTables_scroll)) { overflow: visible !important; height: 100%; position: relative; width: 100%; } /* scrollX tables use flex layout (see FixedColumns section below) */ .main .table-responsive:has(.dataTables_scroll) { overflow: hidden; height: 100%; position: relative; width: 100%; } .main .table thead { position: sticky; top: 0; z-index: 10; } .main .table thead th { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 2px solid var(--color-border-accent, #0EA5E9); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); position: relative; font-weight: 600; color: #1F2A44; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; padding: 0.875rem 0.75rem; } .main .table { margin-top: 0 !important; margin-bottom: 0 !important; border-collapse: separate; border-spacing: 0; } .main .table tbody tr { transition: all 0.2s ease; border-bottom: 1px solid #f0f0f0; position: relative; } .main .table tbody tr:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 8%, transparent); box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } .main .table tbody tr:hover td { color: #1F2A44; } .main .table tbody td { padding: 0.875rem 0.75rem; vertical-align: middle; font-size: 0.875rem; color: #212529; } .main .table tbody tr:last-child { border-bottom: none; } /* Badge styling */ .main .table .badge { padding: 0.35rem 0.65rem; font-weight: 600; font-size: 0.75rem; border-radius: 6px; } /* Clickable EDI badge in tables */ a.badge.view-edi-transaction { cursor: pointer; text-decoration: none; transition: all 0.2s ease; } a.badge.view-edi-transaction:hover { background-color: rgba(var(--bs-info-rgb), 0.4) !important; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* ========================================== DataTables FixedColumns + scrollX Support ========================================== */ /* When scrollX is enabled, DataTables creates .dataTables_scroll which contains .dataTables_scrollHead (header) and .dataTables_scrollBody (body) as separate divs. We use flex layout so the scrollBody fills remaining space, keeping the horizontal scrollbar visible at the bottom of the viewport (not at the bottom of all rows). */ /* Make table-responsive a flex column when it contains a scrollX table */ .main .table-responsive:has(.dataTables_scroll) { display: flex; flex-direction: column; } /* The DataTables wrapper and scroll container fill remaining height */ .main .table-responsive .dataTables_wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; } .main .dataTables_scroll { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Header stays at its natural height, does not grow */ .main .dataTables_scrollHead { flex-shrink: 0; z-index: 11; overflow: hidden !important; /* Clip header horizontally to match body width */ } /* Body fills remaining space with both scrollbars */ .main .dataTables_scrollBody { flex: 1; min-height: 0; overflow: auto !important; /* Both x and y scrolling in this container */ } /* Fixed/sticky columns - match app header styling */ .main .table thead th.dtfc-fixed-left, .main .table thead th.dtfc-fixed-right { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%) !important; z-index: 3; } /* Fixed column body cells need a solid background to cover scrolling content */ .main .table tbody td.dtfc-fixed-left, .main .table tbody td.dtfc-fixed-right { background-color: #fff; z-index: 1; } .main .table tbody tr:hover td.dtfc-fixed-left, .main .table tbody tr:hover td.dtfc-fixed-right { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 8%, #fff); } /* Subtle shadow on the edge of fixed columns to show scroll depth */ .main .table th.dtfc-fixed-left:last-child, .main .table td.dtfc-fixed-left:last-child { box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.08); } .main .table th.dtfc-fixed-right:first-child, .main .table td.dtfc-fixed-right:first-child { box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.08); } /* Modal Table Styling - match main app tables */ .modal .table thead th { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 2px solid var(--color-border-accent, #0EA5E9); font-weight: 600; color: #1F2A44; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; padding: 0.75rem 0.5rem; } .modal .table tbody tr { transition: all 0.2s ease; border-bottom: 1px solid #f0f0f0; } .modal .table tbody tr:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 8%, transparent); box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } .modal .table tbody tr.selected { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent) !important; box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } .modal .table tbody td { padding: 0.625rem 0.5rem; vertical-align: middle; font-size: 0.875rem; } .modal .table tbody tr { cursor: pointer; } /* Custom checkbox styling for tables (both in modals and main pages) */ .table :not(.form-switch) > input[type='checkbox'].form-check-input, .modal .table :not(.form-switch) > input[type='checkbox'] { width: 1.15rem; height: 1.15rem; cursor: pointer; appearance: none; -webkit-appearance: none; border: 2px solid #dee2e6; border-radius: 3px; background-color: #fff; background-image: none; transition: all 0.15s ease-in-out; position: relative; } .table :not(.form-switch) > input[type='checkbox'].form-check-input:checked, .modal .table :not(.form-switch) > input[type='checkbox']:checked { background-color: var(--color-accent, #0EA5E9); border-color: var(--color-accent, #0EA5E9); background-image: none; } .table :not(.form-switch) > input[type='checkbox'].form-check-input:focus, .table :not(.form-switch) > input[type='checkbox'].form-check-input:focus-visible, .modal .table :not(.form-switch) > input[type='checkbox']:focus, .modal .table :not(.form-switch) > input[type='checkbox']:focus-visible { box-shadow: none; outline: 2px solid color-mix(in srgb, var(--color-accent, #0EA5E9) 45%, transparent); outline-offset: 1px; } .table :not(.form-switch) > input[type='checkbox'].form-check-input:checked::after, .modal .table :not(.form-switch) > input[type='checkbox']:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -58%) rotate(45deg); } .table :not(.form-switch) > input[type='checkbox'].form-check-input:hover, .modal .table :not(.form-switch) > input[type='checkbox']:hover { border-color: var(--color-accent, #0EA5E9); } .table thead :not(.form-switch) > input[type='checkbox'].form-check-input, .modal .table thead :not(.form-switch) > input[type='checkbox'] { width: 1.15rem; height: 1.15rem; cursor: pointer; } [data-bs-theme="dark"] .table :not(.form-switch) > input[type='checkbox'].form-check-input, [data-bs-theme="dark"] .modal .table :not(.form-switch) > input[type='checkbox'] { background-color: #2d333b; border-color: #444c56; } [data-bs-theme="dark"] .table :not(.form-switch) > input[type='checkbox'].form-check-input:checked, [data-bs-theme="dark"] .modal .table :not(.form-switch) > input[type='checkbox']:checked { background-color: var(--color-accent, #0EA5E9); border-color: var(--color-accent, #0EA5E9); } [data-bs-theme="dark"] .table :not(.form-switch) > input[type='checkbox'].form-check-input:hover, [data-bs-theme="dark"] .modal .table :not(.form-switch) > input[type='checkbox']:hover { border-color: var(--color-accent, #0EA5E9); } .modal .table .badge { padding: 0.35rem 0.65rem; font-weight: 600; font-size: 0.75rem; border-radius: 6px; } /* DataTables Custom Styling */ #billsTable tbody tr, #invoicesTable tbody tr, #shipmentsTable tbody tr, #carriersTable tbody tr, #driversTable tbody tr, #tractorsTable tbody tr, #trailersTable tbody tr, #customersTable tbody tr, #vendorsTable tbody tr, #documentsTable tbody tr { cursor: pointer; } #datatable-length-container .dataTables_length, #datatable-search-container .dataTables_filter { margin: 0; } #datatable-search-container .dataTables_filter input { border-radius: 6px; border: 1px solid #dee2e6; padding: 0.375rem 0.75rem; font-size: 0.875rem; } #datatable-length-container .dataTables_length select { border-radius: 6px; border: 1px solid #dee2e6; padding: 0.375rem 0.5rem 0.375rem 0.75rem; font-size: 0.875rem; background-color: white; margin: 0 0.25rem; min-width: 65px; } #datatable-length-container .dataTables_length label { margin-bottom: 0; font-weight: 500; font-size: 0.875rem; display: flex; align-items: center; gap: 0; white-space: nowrap; } #datatable-search-container .dataTables_filter label { margin-bottom: 0; font-weight: 500; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; } .table-footer { box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); } #datatable-info-container .dataTables_info { margin: 0; font-size: 0.875rem; color: #6c757d; } #datatable-pagination-container .dataTables_paginate { margin: 0; } .dataTables_paginate .pagination { margin: 0; flex-wrap: wrap; } /* Mobile pagination styling - simplified for touch */ @media (max-width: 576px) { .table-footer { flex-direction: column !important; gap: 0.5rem; align-items: center !important; padding: 0.5rem 0.75rem !important; } #datatable-info-container { width: 100%; text-align: center; } #datatable-info-container .dataTables_info { font-size: 0.8rem; } #datatable-pagination-container { width: 100%; } #datatable-pagination-container .dataTables_paginate { width: 100%; } .dataTables_paginate .pagination { display: flex !important; gap: 0; width: 100%; } /* Hide all page number buttons on mobile - only show prev/next */ .dataTables_paginate .pagination .page-item:not(.previous):not(.next) { display: none !important; } /* Full-width prev/next buttons */ .dataTables_paginate .pagination .page-item.previous, .dataTables_paginate .pagination .page-item.next { flex: 1; } .dataTables_paginate .pagination .page-item.previous .page-link, .dataTables_paginate .pagination .page-item.next .page-link { width: 100%; padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px; } .dataTables_paginate .pagination .page-item.previous .page-link { margin-right: 0.25rem; } .dataTables_paginate .pagination .page-item.next .page-link { margin-left: 0.25rem; } .dataTables_paginate .pagination .page-item.disabled .page-link { opacity: 0.4; } } /* Footer Styles */ .footer { box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); font-size: 0.875rem; } .footer .container-fluid { max-width: 1400px; margin: 0 auto; } .footer a { transition: all 0.3s ease; text-decoration: none; } .footer a:hover { transform: translateY(-1px); } .footer .footer-link:hover { color: var(--color-accent, #0EA5E9) !important; } .footer .badge { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } /* Mobile Footer Styles */ @media (max-width: 768px) { .footer { font-size: 0.7rem !important; } .footer .container-fluid { padding: 0.75rem 1rem !important; } .footer .row { text-align: center; gap: 0; } .footer .col-md-6 { width: 100%; padding: 0; } .footer .col-md-6:first-child .d-flex { justify-content: center !important; flex-wrap: wrap; gap: 0.25rem; } .footer .col-md-6:last-child { display: none !important; } .footer .fa-truck { font-size: 0.9em !important; margin-right: 0.25rem !important; } .footer .fw-bold { font-size: 0.85rem !important; margin-right: 0.5rem !important; } .footer small { font-size: 0.65rem !important; display: block; width: 100%; margin-top: 0.25rem; } .footer .mt-3 { margin-top: 0 !important; } } /* Sidebar Styles — applies in both offcanvas (< lg) and static (>= lg) modes. --bs-offcanvas-width tells Bootstrap to render the < lg drawer at 280px to match the desktop static width (default would be 400px). The width itself is set via .sidebar-desktop so the .collapsed state can override it. */ #appSidebar { background: linear-gradient(180deg, var(--color-sidebar-bg, #1F2A44) 0%, var(--color-sidebar-bg-dark, #16202F) 100%); border-right: 3px solid var(--color-border-accent, #0EA5E9); top: 60px; --bs-offcanvas-width: 280px; } /* Full screen sidebar on mobile (offcanvas mode) */ @media (max-width: 768px) { #appSidebar { width: 100% !important; max-width: 100% !important; } } #appSidebar .offcanvas-header { background: color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent) !important; } .sidebar-user { width: 100%; } .sidebar-user .bg-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%) !important; } .sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 0.75rem; padding-right: 0.75rem; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: var(--color-sidebar-text, rgba(255, 255, 255, 0.8)); text-decoration: none; border-radius: 8px; transition: all 0.3s ease; font-size: 0.9375rem; font-weight: 500; position: relative; overflow: hidden; border-left: 3px solid transparent; } .sidebar-nav .nav-link::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--color-accent, #0EA5E9); transform: scaleY(0); transition: transform 0.3s ease; } .sidebar-nav .nav-link i { font-size: 1.125rem; width: 20px; text-align: center; color: var(--color-accent, #0EA5E9); transition: all 0.3s ease; margin-right: 0.75rem; } .sidebar-nav .nav-link:hover { background: color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent); color: var(--color-sidebar-text-hover, var(--color-sidebar-text, #ffffff)); transform: translateX(4px); } .sidebar-nav .nav-link:hover::before { transform: scaleY(1); } .sidebar-nav .nav-link:hover i { transform: scale(1.1); color: var(--color-accent, #0EA5E9); } .sidebar-nav .nav-link.active { background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent, #0EA5E9) 25%, transparent) 0%, color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent) 100%); color: var(--color-sidebar-text-active, var(--color-sidebar-text, #ffffff)); border-left: 3px solid var(--color-accent, #0EA5E9); } .sidebar-nav .nav-link.active i { color: var(--color-accent, #0EA5E9); } .sidebar-nav .nav-divider { margin: 0.5rem 0; border-top: 1px solid rgba(14, 165, 233, 0.2) !important; } /* Section headers — small uppercase labels that chunk the rail into logical groups. In collapsed mode the override at the bottom of this file replaces the label with a thin spacer line. */ .sidebar-nav .sidebar-section-header { padding: 0.75rem 1rem 0.25rem; margin-top: 0.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); user-select: none; pointer-events: none; } /* Sidebar submenu styling */ .sidebar-nav .nav-submenu { background: rgba(0, 0, 0, 0.15); border-left: 2px solid rgba(14, 165, 233, 0.3); margin-left: 1rem; } .sidebar-nav .nav-link-sub { padding: 0.5rem 1rem 0.5rem 1.5rem !important; font-size: 0.9rem; white-space: nowrap; } .sidebar-nav .nav-link-sub i { font-size: 0.85rem; flex-shrink: 0; } .sidebar-nav .nav-link-sub .nav-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Menu favorite star — sits between the leading icon and the label. Hidden by default (zero-width flex item with negative left margin to absorb the parent's `gap: 0.75rem`, so the row layout matches a row without the button at all). On hover (or when the row is already favorited), the star expands in place and pushes the label right. */ .sidebar-nav .nav-link .menu-fav-star { width: 0; height: 1.25rem; margin: 0 0 0 -0.75rem; /* cancel the parent's gap on this side when collapsed */ padding: 0; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); opacity: 0; overflow: hidden; flex-shrink: 0; cursor: pointer; transition: width 0.2s ease, opacity 0.2s ease, margin-left 0.2s ease, color 0.2s ease; } .sidebar-nav .nav-link:hover .menu-fav-star { width: 1.25rem; opacity: 1; margin-left: 0; } /* Favorited rows show their status via the label color, not a permanently-visible star. The star itself only appears on hover; when it does, render it filled + amber so the user can tell their next click will un-favorite. */ .sidebar-nav .nav-link.is-favorited .nav-text { color: #facc15; } .sidebar-nav .nav-link.is-favorited .menu-fav-star, .sidebar-nav .nav-link .menu-fav-star:hover { color: #facc15; } /* Override the base `.sidebar-nav .nav-link i` rule (font-size, fixed width, accent color, margin-right, transition) so the star glyph fits cleanly inside the small button. */ .sidebar-nav .nav-link .menu-fav-star i { font-size: 0.85rem !important; width: auto !important; margin: 0 !important; color: inherit !important; transform: none !important; transition: none !important; } .sidebar-nav .nav-link-sub .menu-fav-star { height: 1rem; } .sidebar-nav .nav-link-sub:hover .menu-fav-star { width: 1rem; } .sidebar-nav .nav-link-sub .menu-fav-star i { font-size: 0.7rem !important; } /* Collapsed sidebar (icon-only) — labels are hidden and the leading icon is centered. No room for a per-row star, and the hover tooltip handles discoverability. */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .menu-fav-star { display: none; } /* Locked module styling — golden lock icon next to menu items whose feature module is not enabled for the company. Click flows through to the feature-unavailable page rendered by requireWebModule. The lock is pinned to the right edge (ms-auto) so it stays aligned across rows regardless of label length. */ .module-lock-icon { color: #f59e0b; font-size: 0.75rem; filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.4)); flex-shrink: 0; } .sidebar-nav .module-locked { opacity: 0.7; } .sidebar-nav .module-locked:hover { opacity: 1; } /* Collapse chevron rotation. Also enforce single-line labels on parent group headers so the lock + chevron stay aligned across rows. (display/flex/gap are inherited from the base .nav-link rule above — overriding them here would misalign collapsible vs non-collapsible top-level items.) */ .sidebar-nav .nav-link-collapse { white-space: nowrap; } .sidebar-nav .nav-link-collapse .nav-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sidebar-nav .collapse-icon { transition: transform 0.2s ease; margin-right: 0 !important; } .sidebar-nav .nav-link[aria-expanded="true"] .collapse-icon { transform: rotate(180deg); } /* ===== Desktop Static Sidebar ===== */ .sidebar-desktop { position: fixed; top: 60px; left: 0; width: var(--sidebar-width); height: calc(100vh - 60px); background: linear-gradient(180deg, var(--color-sidebar-bg, #1F2A44) 0%, var(--color-sidebar-bg-dark, #16202F) 100%); border-right: 3px solid var(--color-accent, #0EA5E9); overflow-y: auto; overflow-x: hidden; z-index: 1020; transition: width 0.3s ease, transform 0.3s ease-in-out; scrollbar-width: thin; scrollbar-color: var(--color-accent, #0EA5E9) rgba(14, 165, 233, 0.1); } .sidebar-desktop::-webkit-scrollbar { width: 6px; } .sidebar-desktop::-webkit-scrollbar-track { background: rgba(14, 165, 233, 0.1); } .sidebar-desktop::-webkit-scrollbar-thumb { background: var(--color-accent, #0EA5E9); border-radius: 3px; } /* Drag handle on the sidebar's right edge for user-resize. Only meaningful at >= lg (the static desktop sidebar); offcanvas drawer below lg has no resize affordance, and collapsed/hover-expand modes use fixed widths so the handle would just confuse. The handle is `position: fixed` — `position: absolute` inside `.sidebar-desktop` would get clipped by the sidebar's `overflow-x: hidden` (and would scroll with the nav inside `overflow-y: auto`). Pinned to the live `--sidebar-width` so it tracks the user's drag in real time. */ .sidebar-resize-handle { display: none; } @media (min-width: 992px) { .sidebar-desktop .sidebar-resize-handle { display: block; position: fixed; top: 60px; left: var(--sidebar-width); margin-left: -3px; /* sit over the 3px accent border */ width: 8px; height: calc(100vh - 60px); cursor: ew-resize; z-index: 1030; /* above sidebar (1020) so hover/drag works */ background: transparent; transition: background 0.15s ease; } .sidebar-desktop .sidebar-resize-handle:hover, .sidebar-resizing .sidebar-desktop .sidebar-resize-handle { background: rgba(14, 165, 233, 0.45); } /* Hide the handle when collapsed (rail or hover-expand both use fixed widths that the user can't override). */ .sidebar-collapsed .sidebar-desktop .sidebar-resize-handle { display: none; } } /* While the user is actively dragging the resize handle, kill width/margin transitions so the sidebar and adjacent content track the pointer 1:1 instead of lazily catching up. The class is added/removed by core.js. */ .sidebar-resizing .sidebar-desktop, .sidebar-resizing .main, .sidebar-resizing .page-header, .sidebar-resizing .page-header-v2, .sidebar-resizing #filtersSection, .sidebar-resizing .table-footer, .sidebar-resizing .footer, .sidebar-resizing .bulk-action-bar { transition: none !important; } .sidebar-resizing, .sidebar-resizing * { user-select: none; cursor: ew-resize !important; } /* Collapsed sidebar state — only meaningful at >= lg, where the sidebar is the static desktop layout. The source of truth is the .sidebar-collapsed class on an ancestor (set on by the pre-paint script in _components.pug, kept in sync by core.js at runtime). Using an ancestor class lets the pre-paint script apply the state before the sidebar element exists, preventing the un-collapsed → collapsed flash on refresh. Below lg the element is in offcanvas mode and these styles must have no effect, hence the media-query gate. */ @media (min-width: 992px) { .sidebar-collapsed .sidebar-desktop { width: 70px; } .sidebar-collapsed .sidebar-desktop .nav-text, .sidebar-collapsed .sidebar-desktop .collapse-icon { display: none !important; } /* Hide nav-link badges (queue counts, driver-messages unread, etc.) in the collapsed state so ms-auto doesn't shift the centered icon. They reappear automatically when the sidebar is hover-expanded. */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .sidebar-nav .nav-link .badge { display: none !important; } .sidebar-collapsed .sidebar-desktop .nav-link { justify-content: center; padding: 0.75rem 0; width: 100%; position: relative; height: 44px; } /* Direct-child combinator: avoid matching the inside `.menu-fav-star` (only-child of its button), which would inherit `position: absolute` and linger when hover-expand makes the star visible. */ .sidebar-collapsed .sidebar-desktop .nav-link > i:first-child { margin-right: 0 !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .sidebar-collapsed .sidebar-desktop .sidebar-nav { padding-left: 0; padding-right: 0; align-items: center; } /* Hide submenus when collapsed (but not when hover-expanded) */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .nav-submenu { display: none !important; } /* Collapsed mode: section headers become a thin spacer line — keeps grouping cue without taking horizontal space. The .nav-text inside is already hidden by the generic .nav-text rule above. */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .sidebar-section-header { padding: 0; margin: 0.5rem 0.5rem; border-top: 1px solid rgba(14, 165, 233, 0.2); height: 0; overflow: hidden; } .sidebar-collapsed .sidebar-desktop .nav-divider { margin-left: 0.5rem; margin-right: 0.5rem; } /* Tooltip for collapsed sidebar (only when NOT hover-expanded) */ .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .nav-link:hover::after { content: attr(data-tooltip); position: absolute; left: 75px; top: 50%; transform: translateY(-50%); background: #1F2A44; color: #fff; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; white-space: nowrap; z-index: 1100; box-shadow: 0 2px 8px rgba(0,0,0,0.3); border: 1px solid rgba(14, 165, 233, 0.3); } /* Hover to temporarily expand */ .sidebar-collapsed .sidebar-desktop.hover-expand { width: 280px; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3); } .sidebar-collapsed .sidebar-desktop.hover-expand .nav-text, .sidebar-collapsed .sidebar-desktop.hover-expand .collapse-icon { display: inline !important; } .sidebar-collapsed .sidebar-desktop.hover-expand .nav-link { justify-content: flex-start; padding: 0.75rem 1rem; height: 44px; } /* Direct-child combinator is load-bearing: `.nav-link i:first-child` would also match the inside our injected `.menu-fav-star` button (which is the only child of that button), and the `margin-right: 0.75rem !important` below would shove the glyph past the button's overflow:hidden box, leaving the star looking half-clipped. */ .sidebar-collapsed .sidebar-desktop.hover-expand .nav-link > i:first-child { position: static; transform: none; margin-right: 0.75rem !important; /* Snap the icon into its static-flex position. Without this, the base `transition: all 0.3s ease` on .nav-link i animates the transform/margin change from the collapsed (absolutely-centered) state and the icon drifts across the favorite star while it's expanding, leaving the star looking half-clipped. */ transition: none; } .sidebar-collapsed .sidebar-desktop.hover-expand .sidebar-nav { padding-left: 0.75rem; padding-right: 0.75rem; align-items: stretch; } } /* Main content adjustment for desktop sidebar */ @media (min-width: 992px) { .main { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } .page-header { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } #filtersSection { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } /* Hide filters section on mobile, show modal instead */ @media (max-width: 767.98px) { #filtersSection { display: none; } } .table-footer { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } .footer { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } /* Bulk action bar lives in the page footer alongside .table-footer; it needs the same sidebar-clearing offset or it slides up under the fixed sidebar when rows are selected. */ .bulk-action-bar { margin-left: var(--sidebar-width); transition: margin-left 0.3s ease; } .sidebar-collapsed .main { margin-left: 70px; } .sidebar-collapsed .page-header { margin-left: 70px; } .sidebar-collapsed #filtersSection { margin-left: 70px; } .sidebar-collapsed .table-footer { margin-left: 70px; } .sidebar-collapsed .footer { margin-left: 70px; } .sidebar-collapsed .bulk-action-bar { margin-left: 70px; } /* Override the sidebar-open class on desktop - not needed */ .main.sidebar-open { margin-left: var(--sidebar-width); } .sidebar-collapsed .main.sidebar-open { margin-left: 70px; } } /* Sidebar scrollbar styling */ #appSidebar .offcanvas-body { scrollbar-width: thin; scrollbar-color: var(--color-accent, #0EA5E9) color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent); } #appSidebar .offcanvas-body::-webkit-scrollbar { width: 6px; } #appSidebar .offcanvas-body::-webkit-scrollbar-track { background: color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent); } #appSidebar .offcanvas-body::-webkit-scrollbar-thumb { background: var(--color-accent, #0EA5E9); border-radius: 3px; } #appSidebar .offcanvas-body::-webkit-scrollbar-thumb:hover { background: var(--color-secondary, #0284c7); } /* Sidebar Search Filter */ .sidebar-search-wrapper { position: sticky; top: 0; z-index: 10; padding: 12px 12px 8px; background: var(--color-sidebar-bg, #1F2A44); } .sidebar-search-box { position: relative; display: flex; align-items: center; } .sidebar-search-icon { position: absolute; left: 10px; color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; pointer-events: none; } .sidebar-search-input { width: 100%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 7px 32px 7px 30px; color: var(--color-sidebar-text, #fff); font-size: 0.85rem; outline: none; transition: background 0.2s, border-color 0.2s; } .sidebar-search-input::placeholder { color: rgba(255, 255, 255, 0.35); } .sidebar-search-input:focus { background: rgba(255, 255, 255, 0.12); border-color: var(--color-accent, #0EA5E9); } .sidebar-search-clear { position: absolute; right: 10px; color: rgba(255, 255, 255, 0.4); font-size: 0.75rem; cursor: pointer; transition: color 0.15s; } .sidebar-search-clear:hover { color: rgba(255, 255, 255, 0.8); } /* Hide search in collapsed sidebar (desktop-only — below lg the .collapsed class persists across breakpoints but must not affect offcanvas content). */ @media (min-width: 992px) { .sidebar-collapsed .sidebar-desktop:not(.hover-expand) .sidebar-search-wrapper { display: none; } } /* Sidebar filter: hidden items */ .sidebar-nav .nav-link.sidebar-filter-hidden, .sidebar-nav .nav-submenu.sidebar-filter-hidden, .sidebar-nav .nav-divider.sidebar-filter-hidden, .sidebar-nav .collapse.sidebar-filter-hidden { display: none !important; } /* Sidebar filter: no results message */ .sidebar-no-results { color: rgba(255, 255, 255, 0.4); font-size: 0.85rem; text-align: center; padding: 1.5rem 1rem; display: none; } .sidebar-no-results.visible { display: block; } /* Modal Styles */ .modal-header { background: linear-gradient(135deg, #1F2A44 0%, #2d3f63 100%); border-bottom: 3px solid var(--color-border-accent, #0EA5E9); padding: 1rem 1.5rem; } .modal-header.bg-danger { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; border-bottom-color: #bd2130; } .modal-header.bg-success { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; border-bottom-color: #1e7e34; } .modal-header.bg-warning { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; border-bottom-color: #d39e00; } .modal-header .modal-title { color: white; font-weight: 700; font-size: 1.25rem; } .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; transition: all 0.3s ease; } .modal-header .btn-close:hover { opacity: 1; transform: rotate(90deg); } .modal-content { border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .modal-body .nav-pills .nav-link { color: #1F2A44; font-weight: 600; border-radius: 8px; padding: 0.625rem 1.25rem; transition: all 0.3s ease; position: relative; } .modal-body .nav-pills .nav-link:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent); color: var(--color-accent, #0EA5E9); } .modal-body .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); color: white; box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); } .modal-body .form-label { color: #1F2A44; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; } .modal-footer { border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem; background-color: #f8f9fa; } .modal-footer .btn { border-radius: 6px; padding: 0.625rem 1.5rem; font-weight: 600; transition: all 0.3s ease; } .modal-footer .btn-secondary { background-color: #6c757d; border-color: #6c757d; } .modal-footer .btn-secondary:hover:not(.toggle-on):not(.toggle-off) { background-color: #5a6268; border-color: #545b62; transform: translateY(-1px); } .modal-footer .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .modal-footer .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } /* Offcanvas styling - matches modal styling */ .offcanvas-header { background: linear-gradient(135deg, #1F2A44 0%, #2d3f63 100%); border-bottom: 3px solid var(--color-border-accent, #0EA5E9); padding: 1rem 1.5rem; } .offcanvas-header.bg-danger { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; border-bottom-color: #bd2130; } .offcanvas-header.bg-success { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; border-bottom-color: #1e7e34; } .offcanvas-header.bg-warning { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; border-bottom-color: #d39e00; } .offcanvas-header .offcanvas-title { color: white; font-weight: 700; font-size: 1.25rem; } .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; transition: all 0.3s ease; } .offcanvas-header .btn-close:hover { opacity: 1; transform: rotate(90deg); } .offcanvas > .offcanvas-body { min-height: 0; } .offcanvas-footer, #guideEditorFooter { border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem; background-color: #f8f9fa; flex-shrink: 0; } .offcanvas-footer .btn, #guideEditorFooter .btn { border-radius: 6px; padding: 0.625rem 1.5rem; font-weight: 600; transition: all 0.3s ease; } .offcanvas-footer .btn-secondary, #guideEditorFooter .btn-secondary { background-color: #6c757d; border-color: #6c757d; } .offcanvas-footer .btn-secondary:hover, #guideEditorFooter .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; transform: translateY(-1px); } .offcanvas-footer .btn-primary, #guideEditorFooter .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .offcanvas-footer .btn-primary:hover:not(.toggle-on):not(.toggle-off), #guideEditorFooter .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } /* The EDI guide editor is desktop-only and dense, so its footer uses btn-sm. Override the wide offcanvas-footer padding/sizing for sm buttons + tighten the bar's own padding so it doesn't dwarf the rest of the editor chrome. */ #guideEditorFooter { padding: 0.5rem 1rem; } #guideEditorFooter .btn-sm, .editor-tab-toolbar .btn-sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; } /* Button styling within offcanvas body */ .offcanvas-body .btn-primary { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); } .offcanvas-body .btn-primary:hover:not(.toggle-on):not(.toggle-off) { background: linear-gradient(135deg, var(--color-secondary, #0284c7) 0%, color-mix(in srgb, var(--color-secondary, #0284c7) 85%, black) 100%); box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); transform: translateY(-1px); } .offcanvas-body .btn-info:hover:not(.toggle-on):not(.toggle-off) { transform: translateY(-1px); } .offcanvas-body .btn-carrier { background: var(--carrier-accent); border: none; box-shadow: 0 2px 4px color-mix(in srgb, var(--carrier-accent, #F59E0B) 20%, transparent); font-weight: 500; } .offcanvas-body .btn-carrier:hover { background: var(--carrier-accent-hover); box-shadow: 0 4px 8px color-mix(in srgb, var(--carrier-accent, #F59E0B) 30%, transparent); transform: translateY(-1px); } .offcanvas-body .btn-sm { padding: 0.375rem 0.75rem; border-radius: 6px; } /* Search input styling within offcanvas */ .offcanvas-body .input-group-sm .input-group-text { background-color: #fff; border-color: #dee2e6; border-right: none; border-radius: 6px 0 0 6px; color: #6c757d; } .offcanvas-body .input-group-sm .form-control { border-color: #dee2e6; border-left: none; border-radius: 0 6px 6px 0; } .offcanvas-body .input-group-sm .form-control:focus { border-color: var(--color-accent, #0EA5E9); box-shadow: none; } /* Hide Bootstrap validation icon inside narrow input-group currency fields */ .input-group-sm .form-control.is-invalid { background-image: none; padding-right: 0.5rem; } /* Fix focus state for input-groups with dropdown buttons */ .offcanvas-body .input-group:focus-within .dropdown-toggle { border-color: var(--color-accent, #0EA5E9); } .offcanvas-body .input-group-sm .form-control:focus + .input-group-text, .offcanvas-body .input-group-sm:focus-within .input-group-text { border-color: var(--color-accent, #0EA5E9); } /* Dark mode - Offcanvas search inputs */ [data-bs-theme="dark"] .offcanvas-body .input-group-sm .input-group-text { background-color: #2d333b; border-color: #444c56; color: #8b949e; } [data-bs-theme="dark"] .offcanvas-body .input-group-sm .form-control { background-color: #1e2228; border-color: #444c56; color: #e6edf3; } [data-bs-theme="dark"] .offcanvas-body .input-group-sm .form-control::placeholder { color: #6e7681; } [data-bs-theme="dark"] .offcanvas-body .input-group-sm .form-control:focus { background-color: #1e2228; border-color: var(--color-accent, #0EA5E9); } [data-bs-theme="dark"] .offcanvas-body .input-group-sm:focus-within .input-group-text { border-color: var(--color-accent, #0EA5E9); } /* Tab styling within offcanvas */ .offcanvas-body .nav-pills .nav-link, #guideEditorTabs .nav-link { color: #1F2A44; font-weight: 600; border-radius: 8px; padding: 0.625rem 1.25rem; transition: all 0.3s ease; position: relative; } /* Editor is desktop-only and dense — shrink the tabs vs the offcanvas defaults. */ #guideEditorTabs .nav-link { padding: 0.375rem 0.875rem; font-size: 0.875rem; } .offcanvas-body .nav-pills .nav-link:hover, #guideEditorTabs .nav-link:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent); color: var(--color-accent, #0EA5E9); } .offcanvas-body .nav-pills .nav-link.active, #guideEditorTabs .nav-link.active { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); color: white; box-shadow: 0 4px 8px color-mix(in srgb, var(--color-accent, #0EA5E9) 30%, transparent); } /* Dark mode - Offcanvas nav tabs */ [data-bs-theme="dark"] .offcanvas-body .nav-pills .nav-link, [data-bs-theme="dark"] #guideEditorTabs .nav-link { color: #e2e8f0; } [data-bs-theme="dark"] .offcanvas-body .nav-pills .nav-link:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 20%, transparent); color: #38bdf8; } [data-bs-theme="dark"] .offcanvas-body .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--color-accent, #0EA5E9) 0%, var(--color-secondary, #0284c7) 100%); color: white; } /* Dark mode - Offcanvas tables */ [data-bs-theme="dark"] .offcanvas .table thead th { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-bottom: 2px solid var(--color-border-accent, #0EA5E9); color: #e2e8f0; } [data-bs-theme="dark"] .offcanvas .table tbody tr { border-bottom: 1px solid #334155; } [data-bs-theme="dark"] .offcanvas .table tbody tr:hover { background-color: rgba(14, 165, 233, 0.15); } [data-bs-theme="dark"] .offcanvas .table tbody td { background-color: transparent; } [data-bs-theme="dark"] .offcanvas .freight-charge-row, [data-bs-theme="dark"] .offcanvas .carrier-rate-row { --bs-table-bg: #2d333b; border-bottom-color: #444c56 !important; } /* Offcanvas Table Styling - match modal tables */ .offcanvas .table thead th { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); border-bottom: 2px solid var(--color-border-accent, #0EA5E9); font-weight: 600; color: #1F2A44; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; padding: 0.75rem 0.5rem; } .offcanvas .table tbody tr { transition: all 0.2s ease; border-bottom: 1px solid #f0f0f0; } .offcanvas .table tbody tr:hover { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 8%, transparent); box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } .offcanvas .table tbody tr.selected { background-color: color-mix(in srgb, var(--color-accent, #0EA5E9) 15%, transparent) !important; box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } .offcanvas .table tbody tr.selected .text-muted { color: inherit !important; } .offcanvas .table tbody td { padding: 0.625rem 0.5rem; vertical-align: middle; font-size: 0.875rem; } .offcanvas .table tbody tr { cursor: pointer; } /* ============================================ NOTIFICATION DROPDOWN STYLES ============================================ */ #notificationsDropdown { width: 380px; border-radius: 12px; overflow: hidden; margin-top: 0.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); } #notificationsDropdown .notifications-header { padding: 0.875rem 1rem 0.5rem; } #notificationsDropdown .notifications-title { font-size: 0.95rem; font-weight: 600; color: #1f2937; letter-spacing: -0.01em; } #notificationsDropdown .notifications-count { font-size: 0.7rem; font-weight: 500; color: #6b7280; } #notificationsDropdown .notifications-action { font-size: 0.75rem; font-weight: 500; color: var(--bs-primary, #0d6efd); text-decoration: none; border: none; background: transparent; } #notificationsDropdown .notifications-action:hover { text-decoration: underline; } #notificationsDropdown .notifications-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } #notificationsDropdown .notifications-list::-webkit-scrollbar { width: 6px; } #notificationsDropdown .notifications-list::-webkit-scrollbar-track { background: transparent; } #notificationsDropdown .notifications-list::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 3px; } #notificationsDropdown .notifications-footer { padding: 0.625rem 1rem 0.75rem; text-align: center; border-top: 1px solid #f1f3f5; } #notificationsDropdown .notifications-view-all { font-size: 0.75rem; font-weight: 500; color: #6b7280; text-decoration: none; } #notificationsDropdown .notifications-view-all:hover { color: var(--bs-primary, #0d6efd); } /* Mobile: full-width dropdown */ @media (max-width: 575.98px) { #notificationsDropdown { width: calc(100vw - 1rem); max-width: 380px; } } .notification-item { transition: background-color 0.15s ease; border-bottom: 1px solid #f1f3f5; } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background-color: #f8f9fa; } .notification-item.unread { background-color: #f5f9ff; } .notification-item.unread:hover { background-color: #ebf3ff; } .notification-item.unread .notification-title { font-weight: 600; color: #1f2937; } .notification-item.unread .notification-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-accent, #0EA5E9); margin-right: 0.5rem; vertical-align: middle; transform: translateY(-1px); } .notification-icon { width: 34px; height: 34px; margin-top: 2px; } .notification-icon i { font-size: 0.85rem; } .notification-title { font-size: 0.825rem; font-weight: 500; color: #374151; line-height: 1.3; } .notification-message { font-size: 0.75rem; line-height: 1.35; margin-top: 1px; } .notification-time { font-size: 0.7rem; } /* Dark mode */ [data-bs-theme="dark"] #notificationsDropdown { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] #notificationsDropdown .notifications-title { color: #e6edf3; } [data-bs-theme="dark"] #notificationsDropdown .notifications-footer { border-top-color: #2d333b; } [data-bs-theme="dark"] #notificationsDropdown .notifications-view-all { color: #8b949e; } [data-bs-theme="dark"] .notification-item { border-bottom-color: #2d333b; } [data-bs-theme="dark"] .notification-item:hover { background-color: rgba(255, 255, 255, 0.04); } [data-bs-theme="dark"] .notification-item.unread { background-color: rgba(56, 139, 253, 0.08); } [data-bs-theme="dark"] .notification-item.unread:hover { background-color: rgba(56, 139, 253, 0.13); } [data-bs-theme="dark"] .notification-item.unread .notification-title { color: #e6edf3; } [data-bs-theme="dark"] .notification-title { color: #c9d1d9; } /* Notification hover-reveal link */ .notification-link-btn { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--bs-primary, #0d6efd); text-decoration: none; cursor: pointer; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .notification-item:hover .notification-link-btn { opacity: 1; transform: translateX(0); } .notification-link-btn:hover { text-decoration: underline; } /* On touch/mobile devices, always show the link */ @media (hover: none), (max-width: 768px) { .notification-link-btn { opacity: 1; transform: translateX(0); } } [data-bs-theme="dark"] .notification-link-btn { color: var(--bs-info, #0dcaf0); } [data-bs-theme="dark"] #notificationsDropdown .notifications-list::-webkit-scrollbar-thumb { background-color: #444c56; } /* ======================================== Quick Search Overlay Styles ======================================== */ /* Quick Search Modal Styles */ #quickSearchModal .modal-content { border-radius: 12px; border: none; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .quick-search-modal-dialog { max-width: 800px; } #quickSearchModal .modal-header { background: #ffffff; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; } .quick-search-input-wrapper { display: flex; align-items: center; gap: 0; width: 100%; position: relative; } .quick-search-input { font-size: 1rem !important; padding: 4px 40px 4px 36px !important; border: none !important; outline: none !important; box-shadow: none !important; width: 100%; } .quick-search-input::placeholder { color: #9ca3af; } .quick-search-input:focus { box-shadow: none !important; border: none !important; } .quick-search-icon-left { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 1.1rem; pointer-events: none; z-index: 1; } .quick-search-clear-right { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6b7280; padding: 4px 8px; border-radius: 4px; cursor: pointer; flex-shrink: 0; transition: all 0.2s; z-index: 2; } .quick-search-clear-right:hover { background: #f3f4f6; color: #1f2937; } .quick-search-clear-right i { font-size: 1rem; } #quickSearchModal .modal-body { padding: 0; max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } /* Remove max-height when fullscreen */ @media (max-width: 768px) { #quickSearchModal .modal-body { max-height: none; } } #quickSearchModal .modal-body::-webkit-scrollbar { width: 8px; } #quickSearchModal .modal-body::-webkit-scrollbar-track { background: transparent; } #quickSearchModal .modal-body::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 4px; } .quick-search-results { width: 100%; } /* Result groups */ .quick-search-group { border-top: 1px solid #e5e7eb; padding: 12px 0; } .quick-search-group:first-child { border-top: none; padding-top: 12px; } .quick-search-group-title { font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 16px 8px; display: flex; align-items: center; gap: 6px; } .quick-search-group-title i { font-size: 0.85rem; color: #9ca3af; } .quick-search-empty { padding: 48px 24px; text-align: center; color: #6b7280; } .quick-search-empty i { color: #d1d5db; } .quick-search-loading { padding: 32px 24px; text-align: center; color: #6b7280; } .quick-search-loading i { font-size: 1.5rem; color: #0EA5E9; } .quick-search-result-item { display: flex; align-items: flex-start; padding: 12px 16px; cursor: pointer; transition: background-color 0.15s; border-bottom: 1px solid #f3f4f6; text-decoration: none; color: inherit; } .quick-search-result-item:hover, .quick-search-result-item.focused { background-color: #f0f9ff; } .quick-search-result-item:last-child { border-bottom: none; } .quick-search-result-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; font-size: 1rem; } .quick-search-result-icon.status-available { background: #dcfce7; color: #16a34a; } .quick-search-result-icon.status-progress { background: #dbeafe; color: #2563eb; } .quick-search-result-icon.status-delivered { background: #e0e7ff; color: #4f46e5; } .quick-search-result-icon.status-void { background: #fee2e2; color: #dc2626; } .quick-search-result-content { flex: 1; min-width: 0; } .quick-search-result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .quick-search-result-number { font-weight: 600; color: #1f2937; font-size: 1rem; } .quick-search-result-status { font-size: 0.7rem; padding: 2px 8px; border-radius: 9999px; font-weight: 500; text-transform: uppercase; } .quick-search-result-status.available { background: #dcfce7; color: #16a34a; } .quick-search-result-status.progress { background: #dbeafe; color: #2563eb; } .quick-search-result-status.delivered { background: #e0e7ff; color: #4f46e5; } .quick-search-result-status.void { background: #fee2e2; color: #dc2626; } .quick-search-result-priority { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; text-transform: uppercase; } .quick-search-result-priority.hot { background: #fef3c7; color: #d97706; } .quick-search-result-priority.critical { background: #fee2e2; color: #dc2626; } .quick-search-result-priority.expedited { background: #fce7f3; color: #db2777; } .quick-search-result-route { font-size: 0.9rem; color: #4b5563; margin-bottom: 2px; } .quick-search-result-route i { color: #9ca3af; margin: 0 4px; font-size: 0.7rem; } .quick-search-result-customer { font-size: 0.8rem; color: #6b7280; } .quick-search-result-carrier { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; } .quick-search-result-meta { font-size: 0.8rem; color: #6b7280; margin-top: 2px; } .quick-search-result-meta i { color: #9ca3af; font-size: 0.75rem; } .quick-search-result-matched { font-size: 0.75rem; color: #0ea5e9; margin-top: 2px; } .quick-search-result-matched i { color: #0ea5e9; font-size: 0.7rem; } .quick-search-result-matched strong { color: #0369a1; font-weight: 600; } [data-bs-theme="dark"] .quick-search-result-matched { color: #58a6ff; } [data-bs-theme="dark"] .quick-search-result-matched i { color: #58a6ff; } [data-bs-theme="dark"] .quick-search-result-matched strong { color: #79c0ff; } .quick-search-no-results { padding: 32px 24px; text-align: center; color: #6b7280; } .quick-search-no-results i { font-size: 2rem; color: #d1d5db; margin-bottom: 12px; } /* Keyboard navigation hint */ .quick-search-footer { padding: 8px 16px; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #6b7280; } .quick-search-footer kbd { background: #e5e7eb; padding: 1px 5px; border-radius: 3px; font-family: inherit; margin: 0 2px; } /* Quick Search Tabs */ .quick-search-tabs { display: flex; flex-wrap: wrap; padding: 8px 16px 0; gap: 2px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } .quick-search-tab { padding: 6px 12px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.8rem; color: #6b7280; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .quick-search-tab:hover { color: #374151; background: rgba(0, 0, 0, 0.03); } .quick-search-tab.active { color: #0EA5E9; border-bottom-color: #0EA5E9; font-weight: 500; } .quick-search-tab i { font-size: 0.8rem; } /* Accounting status icons */ .quick-search-result-icon.status-warning { background: #fef3c7; color: #d97706; } .quick-search-result-icon.status-info { background: #dbeafe; color: #2563eb; } .quick-search-result-icon.status-success { background: #dcfce7; color: #16a34a; } .quick-search-result-icon.status-secondary { background: #f3f4f6; color: #6b7280; } /* Bill/Invoice result details */ .quick-search-result-details { font-size: 0.8rem; color: #6b7280; margin-bottom: 2px; } .quick-search-result-amounts { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: #4b5563; } .quick-search-result-amounts .text-danger { color: #dc2626; } /* Mobile responsive for tabs */ @media (max-width: 768px) { .quick-search-tabs { padding: 4px 8px 0; gap: 1px; } .quick-search-tab { padding: 5px 8px; font-size: 0.72rem; } .quick-search-tab i { display: none; } .quick-search-result-amounts { flex-wrap: wrap; gap: 8px; } } /* ======================================== Shipment Modal Title - Responsive Styles ======================================== */ .shipment-modal-title-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .shipment-modal-load-number { font-weight: 600; font-size: 1.1rem; white-space: nowrap; } .shipment-modal-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .shipment-badge { display: inline-flex; align-items: center; font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .shipment-badge i { font-size: 0.7rem; } /* Mobile styles - icon only badges */ @media (max-width: 575.98px) { .shipment-modal-title-wrapper { flex-direction: column; align-items: flex-start; gap: 6px; } .shipment-modal-load-number { font-size: 1rem; } .shipment-modal-badges { gap: 4px; } .shipment-badge { padding: 3px 6px; font-size: 0.7rem; } .shipment-badge .badge-text { display: none; } .shipment-badge i { margin-right: 0 !important; } /* Show abbreviated text for status on small mobile */ .shipment-status-badge::after { margin-left: 2px; } } /* Tablet - slightly smaller badges */ @media (min-width: 576px) and (max-width: 767.98px) { .shipment-badge { font-size: 0.7rem; padding: 3px 6px; } } /* Ensure modal header doesn't get too cramped */ .modal-fullscreen .modal-header { min-height: auto; padding: 12px 16px; } @media (max-width: 575.98px) { .modal-fullscreen .modal-header { padding: 10px 12px; } .modal-fullscreen .modal-header .btn-close { padding: 8px; } } /* Fullscreen modal responsive breakpoints - remove border-radius and ensure proper layout */ @media (max-width: 767.98px) { .modal-fullscreen-md-down .modal-content { border-radius: 0; height: 100%; display: flex; flex-direction: column; } .modal-fullscreen-md-down .modal-header { flex-shrink: 0; border-radius: 0; } .modal-fullscreen-md-down .modal-body { flex: 1 1 auto; overflow-y: auto; } .modal-fullscreen-md-down .modal-footer { flex-shrink: 0; border-radius: 0; } } /* ======================================== Shipment Stop Cards - Responsive Styles ======================================== */ /* Stop card header - default desktop layout */ .card .card-header .card-title { min-width: 0; /* Allow text truncation */ } .card .card-header .card-title .tlb-stop-city-state { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobile stop card layout */ @media (max-width: 575.98px) { /* Title truncates on mobile */ .card .card-header .card-title { min-width: 0; overflow: hidden; } .card .card-header .card-title .fw-semibold { font-size: 0.95rem; } .card .card-header .card-title .tlb-stop-city-state { max-width: none; font-size: 0.85rem; } .card .card-header .card-title .badge { font-size: 0.65rem; padding: 3px 6px; } /* Remove extra margin from buttons - stop card cleanup */ } /* Tablet adjustments */ @media (min-width: 576px) and (max-width: 767.98px) { .card .card-header .card-title .tlb-stop-city-state { max-width: 120px; } } /* ======================================== Reorder Stops Modal Styles ======================================== */ /* Inline stop reorder drag-and-drop */ .stop-drag-handle { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; cursor: grab; transition: color 0.15s; } .stop-drag-handle:hover { color: #374151; } .stop-drag-handle:active { cursor: grabbing; } .stop-drag-handle.locked { color: #d1d5db; cursor: not-allowed; } #stopsTable.reorder-active { border: 2px dashed #93c5fd; border-radius: 6px; } #stopsTable.reorder-active .stop-row:not(:has(.locked)) { cursor: grab !important; } .stop-row-ghost { opacity: 0.4; background: #dbeafe !important; } .stop-row-chosen { background: #eff6ff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .stop-row-drag { opacity: 1; } /* Stop Divider with Add Button */ .stop-divider-container { position: relative; padding: 1.5rem 0; opacity: 0.5; transition: opacity 0.2s ease; } .stop-divider-container:hover { opacity: 1; } .stop-divider { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, #dee2e6 20%, #dee2e6 80%, transparent 100%); display: flex; align-items: center; justify-content: center; } .stop-divider .qa-add-stop-row { position: absolute; width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background-color: #ffffff; border: 2px solid #0d6efd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: scale(0.8); transition: all 0.2s ease; } .stop-divider-container:hover .qa-add-stop-row { opacity: 1; transform: scale(1); } .stop-divider .qa-add-stop-row:hover { background-color: #0d6efd; color: white; transform: scale(1.1); box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3); } .stop-divider .qa-add-stop-row i { font-size: 0.875rem; } /* Stop Card Delete Button - Subtle Hover Style */ .stop-card .tlb-stop-remove { opacity: 0; transition: all 0.2s ease; padding: 0.25rem 0.5rem; } .stop-card:hover .tlb-stop-remove:not(:disabled) { opacity: 1; } .stop-card .tlb-stop-remove:disabled { opacity: 0.3; cursor: not-allowed; } .stop-card .tlb-stop-remove:hover:not(:disabled) { background-color: rgba(220, 53, 69, 0.1); transform: scale(1.1); } .stop-card .tlb-stop-remove i { font-size: 1rem; } /* Compact Stop Card for Dispatch */ .stop-card-compact { background-color: #f8f9fa; border-radius: 0.375rem; } .stop-card-compact .badge { font-size: 0.7rem; min-width: 60px; } .stop-card-compact .appointment-display { font-size: 0.8rem; } .stop-card-compact .form-control-sm { font-size: 0.875rem; padding: 0.375rem 0.5rem; } @media (min-width: 576px) { .stop-card-compact .form-control-sm { font-size: 0.8rem; padding: 0.25rem 0.5rem; } } /* ================================================ STOPS TABLE LAYOUT Documents-style table with edit modal ================================================ */ #stopsTable { font-size: 0.875rem; } #stopsTable th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #6c757d; border-bottom: 2px solid #dee2e6; } #stopsTable .stop-row { transition: background-color 0.15s ease; } #stopsTable .stop-row:hover { background-color: rgba(0, 0, 0, 0.03); } /* Confirm Modal Styling */ .confirm-modal-content { border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); overflow: hidden; } .confirm-modal-icon { animation: confirmIconBounce 0.5s ease-out; } @keyframes confirmIconBounce { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .confirm-modal-content .modal-body h5 { font-weight: 600; color: #2d3748; } .confirm-modal-content .modal-body p { font-size: 0.95rem; line-height: 1.6; } .confirm-modal-content .modal-footer { gap: 0.75rem; } .confirm-modal-content .modal-footer .btn { min-width: 100px; font-weight: 500; transition: all 0.2s ease; } .confirm-modal-content .modal-footer .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Table Action Buttons */ .btn-group .btn-link, table .btn-link { transition: all 0.2s ease; border-radius: 4px; } .btn-group .btn-link:hover, table .btn-link:hover { background-color: rgba(0, 0, 0, 0.08); transform: scale(1.15); border-radius: 6px; } .btn-group .btn-link.text-primary:hover { background-color: rgba(13, 110, 253, 0.12); } .btn-group .btn-link.text-success:hover { background-color: rgba(25, 135, 84, 0.12); } .btn-group .btn-link.text-danger:hover { background-color: rgba(220, 53, 69, 0.12); } .btn-group .btn-link.text-warning:hover { background-color: rgba(255, 193, 7, 0.12); } .btn-group .btn-link.text-secondary:hover { background-color: rgba(108, 117, 125, 0.12); } .btn-group .btn-link.text-info:hover { background-color: rgba(13, 202, 240, 0.12); } /* Offcanvas Action Buttons - same hover as table buttons */ .offcanvas .btn-link { transition: all 0.2s ease; border-radius: 4px; } .offcanvas .btn-link:hover { background-color: rgba(0, 0, 0, 0.08); transform: scale(1.15); border-radius: 6px; } .offcanvas .btn-link.text-primary:hover { background-color: rgba(13, 110, 253, 0.12); } .offcanvas .btn-link.text-success:hover { background-color: rgba(25, 135, 84, 0.12); } .offcanvas .btn-link.text-danger:hover { background-color: rgba(220, 53, 69, 0.12); } .offcanvas .btn-link.text-warning:hover { background-color: rgba(255, 193, 7, 0.12); } .offcanvas .btn-link.text-secondary:hover { background-color: rgba(108, 117, 125, 0.12); } .offcanvas .btn-link.text-info:hover { background-color: rgba(13, 202, 240, 0.12); } /* ============================================= DARK MODE - Table & Action Buttons ============================================= */ /* Dark mode - main table text colors (high specificity to override .main .table tbody td) */ [data-bs-theme="dark"] .main .table tbody td { color: #e6edf3 !important; } [data-bs-theme="dark"] .main .table tbody tr:hover td { color: #e6edf3 !important; } [data-bs-theme="dark"] .main .table tbody tr { border-bottom-color: #444c56; } [data-bs-theme="dark"] .main .table tbody tr:hover { background-color: rgba(56, 139, 253, 0.15); box-shadow: inset 3px 0 0 var(--color-accent, #0EA5E9); } /* Dark mode - btn-link hover backgrounds */ [data-bs-theme="dark"] .btn-group .btn-link:hover, [data-bs-theme="dark"] table .btn-link:hover, [data-bs-theme="dark"] .offcanvas .btn-link:hover { background-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="dark"] .btn-group .btn-link.text-primary:hover, [data-bs-theme="dark"] table .btn-link.text-primary:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-primary:hover { background-color: rgba(59, 130, 246, 0.2); } [data-bs-theme="dark"] .btn-group .btn-link.text-success:hover, [data-bs-theme="dark"] table .btn-link.text-success:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-success:hover { background-color: rgba(34, 197, 94, 0.2); } [data-bs-theme="dark"] .btn-group .btn-link.text-danger:hover, [data-bs-theme="dark"] table .btn-link.text-danger:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-danger:hover { background-color: rgba(239, 68, 68, 0.2); } [data-bs-theme="dark"] .btn-group .btn-link.text-warning:hover, [data-bs-theme="dark"] table .btn-link.text-warning:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-warning:hover { background-color: rgba(245, 158, 11, 0.2); } [data-bs-theme="dark"] .btn-group .btn-link.text-secondary:hover, [data-bs-theme="dark"] table .btn-link.text-secondary:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-secondary:hover { background-color: rgba(148, 163, 184, 0.2); } [data-bs-theme="dark"] .btn-group .btn-link.text-info:hover, [data-bs-theme="dark"] table .btn-link.text-info:hover, [data-bs-theme="dark"] .offcanvas .btn-link.text-info:hover { background-color: rgba(6, 182, 212, 0.2); } /* Dark mode - btn-outline variants */ [data-bs-theme="dark"] .btn-outline-primary { color: #60a5fa; border-color: #3b82f6; } [data-bs-theme="dark"] .btn-outline-primary:hover { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; border-color: #60a5fa; } [data-bs-theme="dark"] .btn-outline-success { color: #4ade80; border-color: #22c55e; } [data-bs-theme="dark"] .btn-outline-success:hover { background-color: rgba(34, 197, 94, 0.2); color: #86efac; border-color: #4ade80; } [data-bs-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #ef4444; } [data-bs-theme="dark"] .btn-outline-danger:hover { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; border-color: #f87171; } [data-bs-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: #f59e0b; } [data-bs-theme="dark"] .btn-outline-warning:hover { background-color: rgba(245, 158, 11, 0.2); color: #fcd34d; border-color: #fbbf24; } [data-bs-theme="dark"] .btn-outline-info { color: #22d3ee; border-color: #06b6d4; } [data-bs-theme="dark"] .btn-outline-info:hover { background-color: rgba(6, 182, 212, 0.2); color: #67e8f9; border-color: #22d3ee; } /* Dark mode - text color classes (for icons in buttons) */ [data-bs-theme="dark"] .text-primary { color: #60a5fa !important; } [data-bs-theme="dark"] .text-success { color: #4ade80 !important; } [data-bs-theme="dark"] .text-danger { color: #f87171 !important; } [data-bs-theme="dark"] .text-warning { color: #fbbf24 !important; } [data-bs-theme="dark"] .text-info { color: #22d3ee !important; } [data-bs-theme="dark"] .text-secondary { color: #94a3b8 !important; } [data-bs-theme="dark"] .text-muted { color: #64748b !important; } /* Required Field Styling - Asterisk after label */ .form-label.required::after, label.required::after { content: " *"; color: #dc3545; font-weight: bold; } /* ======== Primary Action Button - Responsive ======== */ /* Desktop: .primary-action-btn stays as-is in the header, no additional styles needed */ /* Mobile: full-width button below header */ @media (max-width: 767.98px) { .page-header { flex-direction: column !important; align-items: stretch !important; } .page-header > div:first-child { margin-bottom: 12px; } .page-header .d-flex { width: 100%; } .primary-action-btn { width: 100%; font-size: 0.95rem; padding: 10px 12px !important; justify-content: center; } .primary-action-btn i { margin-right: 8px; } } /* ======== Filters Offcanvas ======== */ #shipmentFiltersOffcanvas, #locationFiltersOffcanvas { width: 480px !important; max-width: 90vw; } #shipmentFiltersOffcanvas .offcanvas-header, #locationFiltersOffcanvas .offcanvas-header { padding: 16px 20px; background: linear-gradient(135deg, #1F2A44 0%, #2d3f63 100%); color: white; } #shipmentFiltersOffcanvas .offcanvas-header .btn-close, #locationFiltersOffcanvas .offcanvas-header .btn-close { filter: brightness(0) invert(1); } #shipmentFiltersOffcanvas .offcanvas-header .offcanvas-title, #locationFiltersOffcanvas .offcanvas-header .offcanvas-title { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.3px; } /* Mobile responsiveness for offcanvas */ @media (max-width: 576px) { #shipmentFiltersOffcanvas { width: 100% !important; max-width: 100vw !important; } #chatOffcanvas { width: 100% !important; max-width: 100vw !important; } #userProfileOffcanvas { width: 100% !important; max-width: 100vw !important; } } /* ============================================ USER PROFILE OFFCANVAS STYLES ============================================ */ #userProfileOffcanvas .user-profile-header { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } #userProfileOffcanvas .user-profile-item { text-decoration: none; color: #333; transition: background-color 0.15s ease; } #userProfileOffcanvas .user-profile-item:hover { background-color: #f1f5f9; } #userProfileOffcanvas .user-profile-item-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #e2e8f0; border-radius: 8px; color: #64748b; font-size: 0.9rem; } #userProfileOffcanvas .user-profile-item:hover .user-profile-item-icon { background: #0EA5E9; color: white; } #userProfileOffcanvas .user-profile-item-text span { font-weight: 500; } #userProfileOffcanvas .user-profile-item-text small { color: #94a3b8; font-size: 0.75rem; } #userProfileOffcanvas .user-profile-section small.text-uppercase { font-size: 0.65rem; letter-spacing: 0.05em; } #userProfileOffcanvas .user-profile-footer { background: #f8fafc; } /* ============================================ CHAT/MESSAGING STYLES (matches AI Assistant) ============================================ */ /* Chat offcanvas customization */ #chatOffcanvas { width: 420px !important; max-width: 90vw; } #chatOffcanvas .offcanvas-body { height: calc(100vh - 60px); padding: 0; display: flex; flex-direction: column; overflow: hidden; } /* Conversation view - flex container with fixed header/footer */ #chatConversationView { display: flex; flex-direction: column; height: 100%; min-height: 0; /* Important for flex children to shrink */ } #chatConversationHeader { flex-shrink: 0; background: white; } #chatInputArea { flex-shrink: 0; background: white; } /* Avatar circle - themed primary */ .chat-avatar .avatar-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } /* Conversation list */ .chat-conversation-item { cursor: pointer; transition: background-color 0.15s, border-left-color 0.15s; border-left: 3px solid transparent; } .chat-conversation-item:hover { background-color: var(--color-primary-light, #f1f5f9); border-left-color: var(--color-primary); } .chat-conversation-item.bg-light { background-color: var(--color-primary-light, #f1f5f9) !important; border-left-color: var(--color-primary); } /* User selection list */ .chat-user-item { cursor: pointer; transition: background-color 0.15s, border-left-color 0.15s; border-left: 3px solid transparent; } .chat-user-item:hover { background-color: var(--color-primary-light, #f1f5f9); border-left-color: var(--color-primary); } /* Messages area uses .msg-thread; this keeps the flex-scroll fix scoped to chat */ #chatMessages { min-height: 0; } /* Conversation header */ #chatConversationHeader { background: white; } #chatConversationHeader #chatBackBtn { color: #0EA5E9; } #chatConversationHeader #chatInfoBtn { color: #6c757d; } #chatConversationHeader #chatInfoBtn:hover { color: #0EA5E9; } /* New message view */ #chatNewMessageView .border-bottom { background: white; } #startConversationBtn:disabled { background: #ccc; } /* Empty state */ #chatEmpty i { color: var(--color-primary); } /* Scrollbars */ #chatConversationsList, #chatUserList { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } /* Select2 styling inside chat offcanvas */ #chatNewMessageView .select2-container { width: 100% !important; } #chatNewMessageView .select2-container--default .select2-selection--multiple { border-color: #ddd; border-radius: 12px; min-height: 42px; padding: 4px 8px; } #chatNewMessageView .select2-container--default .select2-selection--multiple:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1); } #chatNewMessageView .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--color-primary); border: none; color: white; border-radius: 12px; padding: 4px 10px; margin: 3px 4px 3px 0; font-size: 13px; } #chatNewMessageView .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255, 255, 255, 0.7); margin-right: 6px; } #chatNewMessageView .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: white; } #chatNewMessageView .select2-dropdown { border-color: #ddd; border-radius: 12px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); overflow: hidden; } #chatNewMessageView .select2-results__option--highlighted[aria-selected] { background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%); } #chatConversationsList::-webkit-scrollbar, #chatUserList::-webkit-scrollbar, #chatMessages::-webkit-scrollbar { width: 6px; } #chatConversationsList::-webkit-scrollbar-track, #chatUserList::-webkit-scrollbar-track, #chatMessages::-webkit-scrollbar-track { background: transparent; } #chatConversationsList::-webkit-scrollbar-thumb, #chatUserList::-webkit-scrollbar-thumb, #chatMessages::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; } #chatConversationsList::-webkit-scrollbar-thumb:hover, #chatUserList::-webkit-scrollbar-thumb:hover, #chatMessages::-webkit-scrollbar-thumb:hover { background-color: #aaa; } /* Responsive chat adjustments */ @media (max-width: 768px) { #chatOffcanvas { width: 100vw !important; max-width: 100vw; } } /* ========================================== MOBILE RESPONSIVENESS ENHANCEMENTS ========================================== */ /* Mobile table improvements */ @media (max-width: 767.98px) { /* Make tables horizontally scrollable in main content */ .main > .container-fluid > .table-responsive { margin: 0 -0.75rem; padding: 0 0.75rem; } /* Smaller table font on mobile */ .table { font-size: 0.85rem; } /* Stack table headers on very small screens */ .table th, .table td { white-space: nowrap; } /* Make cards touch-friendly */ .card { margin-bottom: 1rem; } /* Mobile modal improvements */ .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); } .modal-body { padding: 1rem; } /* Touch-friendly buttons - consistent sizing */ .btn { min-height: 2.375rem; } .btn-sm { min-height: 2rem; padding: 0.25rem 0.5rem; } /* Improve form layout on mobile */ .form-group label, .mb-3 label { font-weight: 500; } /* Stack action buttons */ .btn-group-vertical-mobile { flex-direction: column; width: 100%; } .btn-group-vertical-mobile .btn { margin-bottom: 0.5rem; border-radius: 0.375rem !important; } /* Page header adjustments */ .page-header { flex-direction: column; align-items: flex-start !important; gap: 1rem; } .page-header .btn-group, .page-header .d-flex { width: 100%; flex-wrap: wrap; gap: 0.5rem; } /* Hide less important columns on mobile */ .hide-mobile { display: none !important; } /* Responsive input groups - small on mobile */ .input-group-sm.input-group-md-default .input-group-text, .input-group-sm.input-group-md-default .form-control { font-size: 0.875rem; padding: 0.25rem 0.5rem; } /* Full-width selects */ .form-select, .form-control { width: 100%; } /* Adjust padding for main content */ .main .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; } } /* Tablet and up - restore default input group sizes */ @media (min-width: 768px) { .input-group-sm.input-group-md-default .input-group-text, .input-group-sm.input-group-md-default .form-control { font-size: 1rem; padding: 0.375rem 0.75rem; } } /* Tablet-specific adjustments */ @media (min-width: 768px) and (max-width: 991.98px) { /* Two-column grid for cards */ .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } /* Medium table font */ .table { font-size: 0.9rem; } /* Prevent page header buttons from bunching in tablet range */ .page-header > .d-flex { flex-wrap: wrap; gap: 0.5rem; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { /* Larger touch targets - consistent sizing */ .btn { min-height: 2.375rem; } .btn-sm { min-height: 2rem; } /* Keep header icon buttons circular */ .header-icon-btn { min-height: 36px; max-height: 36px; height: 36px; } .nav-link, .dropdown-item { min-height: 44px; display: flex; align-items: center; } /* Remove hover effects that don't work on touch */ .btn:hover { transform: none; } /* Better checkbox/radio sizing */ .form-check-input { width: 1.25em; height: 1.25em; } /* Improve select arrow visibility */ .form-select { background-size: 20px 20px; } } /* Landscape phone adjustments */ @media (max-width: 767.98px) and (orientation: landscape) { .modal-dialog { max-height: 90vh; } .modal-body { max-height: 50vh; overflow-y: auto; } } /* Print styles */ @media print { .sidebar, .header, .footer, .btn, .no-print, .ai-chat-toggle, .ai-chat-offcanvas, #chatOffcanvas, #chatToggle, #notificationsDropdown, #notificationBtn, #impersonationIndicator, .offcanvas, .offcanvas-backdrop, #quickSearchBtn, #favoritesBtn { display: none !important; } .main { margin: 0 !important; padding: 0 !important; } .card { border: 1px solid #ddd !important; box-shadow: none !important; } } /* Table utility class - column shrinks to fit content */ .col-fit { width: 1%; white-space: nowrap; } /* ========================================================================= Document Template Editor Styles ========================================================================= */ .cursor-pointer { cursor: pointer; } /* Collapsible card sections */ .card-header[data-bs-toggle="collapse"] { cursor: pointer; user-select: none; } .card-header[data-bs-toggle="collapse"]:hover { background-color: #f8f9fa !important; } .section-toggle-icon { transition: transform 0.2s ease; } .collapsed .section-toggle-icon { transform: rotate(-90deg); } /* Color picker styles */ .form-control-color { padding: 0.25rem; } /* Template editor form improvements */ .template-editor .form-check-label { display: flex; align-items: center; } /* Preview iframe container */ #previewFrame { background: #f5f5f5; } /* Sticky preview panel */ @media (min-width: 992px) { .template-preview-panel { position: sticky; top: 80px; } } /* Template type badges */ .template-type-badge { font-size: 0.75rem; padding: 0.35em 0.65em; } /* Breadcrumb improvements for template editor */ .template-editor .breadcrumb { font-size: 0.875rem; margin-bottom: 0; } .template-editor .breadcrumb-item + .breadcrumb-item::before { content: "›"; font-weight: bold; } /* ================================================ FLOATING LABELS - Lighter Appearance Make floating labels less prominent so they don't look like pre-filled values ================================================ */ .form-floating > label { color: #6c757d; /* Bootstrap muted gray */ } /* Dark mode floating labels */ [data-bs-theme="dark"] .form-floating > label { color: #8b949e; } /* ================================================ AUTOFILL STYLING OVERRIDE Override browser autofill background colors ================================================ */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #212529 !important; transition: background-color 5000s ease-in-out 0s; } /* Dark mode autofill */ [data-bs-theme="dark"] input:-webkit-autofill, [data-bs-theme="dark"] input:-webkit-autofill:hover, [data-bs-theme="dark"] input:-webkit-autofill:focus, [data-bs-theme="dark"] input:-webkit-autofill:active, [data-bs-theme="dark"] textarea:-webkit-autofill, [data-bs-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #2d333b inset !important; -webkit-text-fill-color: #e6edf3 !important; } /* ================================================ BOOTSTRAP 5 TOGGLE - Disable ALL Hover Effects Override Bootstrap's base .btn:hover for toggles ================================================ */ .toggle, .toggle *, .toggle > .toggle-group, .toggle > .toggle-group > .btn, .toggle > .toggle-group > .toggle-on, .toggle > .toggle-group > .toggle-off, .toggle > .toggle-group > .toggle-handle, .toggle:hover, .toggle:hover *, .toggle:hover > .toggle-group > .btn, .toggle:hover > .toggle-group > .toggle-on, .toggle:hover > .toggle-group > .toggle-off { transform: none !important; } .toggle > .toggle-group > .btn { pointer-events: none; } .toggle { cursor: pointer; } /* Larger BS5 form switches in section headers and inline controls */ h6 .form-switch .form-check-input, .check-call-detail .form-switch .form-check-input { width: 2.75em; height: 1.4em; cursor: pointer; } /* ======================================== Shipment Offcanvas - Mobile Responsive ======================================== */ @media (max-width: 767.98px) { /* Full-width offcanvas on mobile */ .offcanvas-end { width: 100vw !important; } /* Reduce padding in offcanvas body content */ #shipmentOffcanvasGeneralPane > div.p-3, #shipmentOffcanvasStopsPane > div.p-3, #shipmentOffcanvasFinancialPane > div.p-3 { padding: 0.75rem !important; } /* Collapsible record info on mobile */ #shipmentOffcanvasRecordInfo .record-info-toggle { padding: 0.35rem 0.75rem !important; } /* When collapsed content is shown on mobile, stack items */ #recordInfoCollapse.show, #recordInfoCollapse.collapsing { display: flex !important; flex-direction: column; gap: 0.15rem !important; align-items: flex-start; padding: 0 0.75rem 0.4rem !important; } #recordInfoCollapse span { font-size: 0.75rem; } /* Stops summary - compact on mobile */ #shipmentOffcanvasStopsSummary { padding: 0.375rem 0.75rem !important; font-size: 0.75rem; } /* Reference codes - 2 columns instead of 3 on mobile */ #shipmentOffcanvasGeneralPane .row.g-1 > .col-4 { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } /* Compact section headers on mobile */ #shipmentOffcanvasGeneralPane h6 { font-size: 0.75rem; } /* Smaller form controls on mobile */ #shipmentOffcanvasGeneralPane .form-label { font-size: 0.7rem !important; } /* Compact tabs on mobile */ .offcanvas-body > form > .nav-pills { padding: 0.5rem 0.75rem !important; gap: 0.125rem; } .offcanvas-body .nav-pills .nav-link { padding: 0.35rem 0.65rem; font-size: 0.8rem; } /* Compact offcanvas header on mobile */ .offcanvas-header { min-height: 48px !important; max-height: 48px !important; padding: 0.4rem 0.75rem !important; } .offcanvas-header .offcanvas-title { font-size: 1rem; } /* Footer - tighter padding */ .offcanvas-footer { padding: 0.4rem 0.75rem !important; } /* Stop edit form - tighter padding on mobile */ .stop-edit-row .border-4 { padding: 0.5rem !important; } /* Stop edit form selects - allow flex wrap on mobile */ .stop-edit-row .d-flex.gap-2.flex-wrap { gap: 0.35rem !important; } .stop-edit-row .form-select, .stop-edit-row .form-control { font-size: 0.875rem; } /* Auto Rate Suggestion Banner - stack on mobile */ #autoRateSuggestionContent > .d-flex { flex-direction: column !important; gap: 0.5rem !important; } #autoRateSuggestionContent > .d-flex > .d-flex:last-child { align-self: flex-end; } /* Stops table - hide extra column headers on mobile */ #stopsTable thead th:nth-child(n+5) { display: none !important; } /* Page header "New..." buttons - icon only on mobile */ .page-header-controls [class*="qa-add-"] span { display: none !important; } } @media (max-width: 575.98px) { /* Extra-small screens: single column for shipment info fields */ #shipmentOffcanvasGeneralPane .row.g-2 > .col-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* Keep reference codes at 2 columns even on xs */ #shipmentOffcanvasGeneralPane .row.g-1 > .col-4 { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; } } /* WebSocket status badge */ .ws-status-badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.25em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: #fff; border-radius: 0.375rem; white-space: nowrap; } .ws-status-badge .ws-status-dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: currentColor; } .ws-status-online { background-color: #10B981; } .ws-status-reconnecting { background-color: #F59E0B; } .ws-status-offline { background-color: #EF4444; } /* ============================================ Tracking Map - Leaflet breadcrumb trail ============================================ */ #shipmentTrackingMapContainer { min-height: 400px; height: 100%; width: 100%; } .tracking-map-current-marker { width: 16px; height: 16px; background: #0d6efd; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #0d6efd, 0 0 10px rgba(13,110,253,0.4); animation: trackingMapPulse 2s ease-in-out infinite; } @keyframes trackingMapPulse { 0%, 100% { box-shadow: 0 0 0 2px #0d6efd, 0 0 10px rgba(13,110,253,0.4); } 50% { box-shadow: 0 0 0 4px rgba(13,110,253,0.3), 0 0 20px rgba(13,110,253,0.2); } } .tracking-map-stop-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); border: 2px solid #fff; } .tracking-map-empty-state { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); z-index: 500; pointer-events: none; } /* Truck icon for current position */ .tracking-truck-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #0d6efd; filter: drop-shadow(0 0 3px rgba(0,0,0,0.4)); transition: transform 0.3s ease; } /* Playback control bar */ .tracking-playback-control { display: flex !important; background: #fff; border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.25); overflow: hidden; } .tracking-playback-control a { border-right: 1px solid #ddd; color: #333 !important; } .tracking-playback-control a:last-child { border-right: none; } .tracking-playback-control a:hover { background: #f0f0f0; } /* Fullscreen map */ .tracking-map-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 9999 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } /* ================================================ BALANCE SHEET STATEMENT ================================================ */ .bs-line:hover { background-color: var(--bs-light); } .bs-subtotal { background-color: var(--bs-light); } .bs-section-total { background-color: #f0f4f8; } /* ================================================ MESSAGE BUBBLE TEMPLATE Shared by Driver Messages offcanvas and User Chat offcanvas. Use the .msg-bubble class set with whichever inner parts the context needs. ================================================ */ .msg-thread { background-color: #f6f8fb; display: flex; flex-direction: column; gap: 0.4rem; } .msg-date-divider { display: flex; align-items: center; gap: 0.6rem; margin: 0.85rem 0 0.5rem; } .msg-date-divider::before, .msg-date-divider::after { content: ''; flex: 1; height: 1px; background-color: #e2e8f0; } .msg-date-divider span { font-size: 0.65rem; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .msg-row { display: flex; } .msg-row--out { justify-content: flex-end; } .msg-row--in { justify-content: flex-start; } .msg-bubble { max-width: 78%; min-width: 120px; border-radius: 14px; padding: 0.5rem 0.75rem; box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.06); position: relative; } .msg-bubble--in { background-color: #ffffff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; } .msg-bubble--out { background-color: var(--color-primary); color: #ffffff; border-bottom-right-radius: 4px; } .msg-bubble__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; } .msg-bubble__sender { font-size: 0.7rem; font-weight: 600; } .msg-bubble--out .msg-bubble__sender { color: rgba(255, 255, 255, 0.85); } .msg-bubble--in .msg-bubble__sender { color: #475569; } .msg-bubble__tag { font-size: 0.6rem; font-weight: 500; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .msg-bubble--out .msg-bubble__tag { background-color: rgba(255, 255, 255, 0.18); color: #ffffff; } .msg-bubble--in .msg-bubble__tag { background-color: #f1f5f9; color: #475569; } .msg-bubble__body { white-space: pre-wrap; word-break: break-word; font-size: 0.875rem; line-height: 1.42; } .msg-bubble__attachments { margin: 0.25rem 0; } .msg-bubble__attachment-img { max-width: 100%; max-height: 280px; border-radius: 8px; cursor: pointer; display: block; margin-bottom: 0.25rem; } .msg-bubble__attachment-link { display: inline-block; margin-bottom: 0.25rem; text-decoration: underline; } .msg-bubble--out .msg-bubble__attachment-link { color: #ffffff; } .msg-bubble--in .msg-bubble__attachment-link { color: var(--color-primary); } .msg-bubble__shared-record { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 10px; font-size: 0.78rem; text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s, border-color 0.15s; cursor: pointer; background: none; width: 100%; text-align: left; } .msg-bubble__shared-record .msg-bubble__shared-record-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-bubble--out .msg-bubble__shared-record { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } .msg-bubble--out .msg-bubble__shared-record:hover { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.6); } .msg-bubble--in .msg-bubble__shared-record { background-color: #f1f5f9; border-color: #e2e8f0; color: var(--color-primary); } .msg-bubble--in .msg-bubble__shared-record:hover { background-color: #e2e8f0; border-color: var(--color-primary); } .msg-bubble__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.25rem; font-size: 0.7rem; } .msg-bubble--out .msg-bubble__footer { color: rgba(255, 255, 255, 0.75); } .msg-bubble--in .msg-bubble__footer { color: #94a3b8; } .msg-bubble__delete { background: none; border: 0; padding: 0; font-size: 0.7rem; line-height: 1; opacity: 0; transition: opacity 0.15s; cursor: pointer; } .msg-bubble--out .msg-bubble__delete { color: rgba(255, 255, 255, 0.85); } .msg-bubble--in .msg-bubble__delete { color: #94a3b8; } .msg-bubble:hover .msg-bubble__delete { opacity: 1; } .msg-bubble__error { font-size: 0.7rem; margin-top: 0.3rem; padding-top: 0.3rem; } .msg-bubble--in .msg-bubble__error { color: #dc2626; border-top: 1px solid #fee2e2; } .msg-bubble--out .msg-bubble__error { color: #fef3c7; border-top: 1px solid rgba(255, 255, 255, 0.2); } /* Compose area */ .msg-compose { background-color: #ffffff; border-top: 1px solid #e2e8f0; } .msg-compose__quick-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 0.75rem 0.4rem; } .msg-compose__quick-btn { font-size: 0.7rem; padding: 2px 10px; border-radius: 999px; } .msg-compose__platform-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border-top: 1px dashed #e2e8f0; } .msg-compose__platform-label { font-size: 0.65rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .msg-compose__input-row { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.4rem 0.75rem 0.25rem; } .msg-compose__input { resize: none; overflow-y: hidden; min-height: 38px; max-height: 120px; font-size: 0.875rem; line-height: 1.4; padding: 8px 14px; border-radius: 12px; } .msg-compose__send { width: 38px; height: 38px; padding: 0; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .msg-compose__hint { font-size: 0.65rem; color: #94a3b8; padding: 0 0.75rem 0.5rem; } /* Dark mode for message bubbles (applies in both offcanvases) */ [data-bs-theme="dark"] .msg-thread { background-color: #1e2228; } [data-bs-theme="dark"] .msg-bubble--in { background-color: #2d333b; color: #e6edf3; border-color: #3a4048; } [data-bs-theme="dark"] .msg-bubble--in .msg-bubble__sender { color: #adbac7; } [data-bs-theme="dark"] .msg-bubble--in .msg-bubble__tag { background-color: #3a4048; color: #adbac7; } [data-bs-theme="dark"] .msg-bubble--in .msg-bubble__footer { color: #768390; } [data-bs-theme="dark"] .msg-date-divider::before, [data-bs-theme="dark"] .msg-date-divider::after { background-color: #3a4048; } [data-bs-theme="dark"] .msg-date-divider span { color: #768390; } [data-bs-theme="dark"] .msg-compose { background-color: #272c33; border-top-color: #3a4048; } [data-bs-theme="dark"] .msg-compose__platform-row { border-top-color: #3a4048; } /* ============================================================ Integration Tools Launcher (header app-grid popover) ============================================================ */ .integration-tools-launcher { width: 320px; min-width: 320px; border-radius: 0.75rem; overflow: hidden; } .integration-tools-launcher .integration-tools-header { padding: 0.875rem 1rem 0.5rem; border-bottom: 1px solid #e5e7eb; } .integration-tools-launcher .integration-tools-title { font-size: 0.95rem; font-weight: 600; color: #1f2937; letter-spacing: -0.01em; } .integration-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.75rem; } .integration-tool-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.35rem; padding: 0.75rem 0.4rem; background: transparent; border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; text-align: center; transition: background-color 120ms ease, border-color 120ms ease; } .integration-tool-tile:hover { background-color: #f3f4f6; border-color: #e5e7eb; } .integration-tool-tile-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: #f9fafb; overflow: hidden; } .integration-tool-tile-icon img { width: 28px; height: 28px; object-fit: contain; } .integration-tool-tile-icon i { font-size: 1.1rem; color: #6b7280; } .integration-tool-tile-label { font-size: 0.78rem; font-weight: 600; color: #1f2937; line-height: 1.15; } .integration-tool-tile-provider { font-size: 0.65rem; color: #6b7280; line-height: 1; } [data-bs-theme="dark"] .integration-tools-launcher .integration-tools-header { border-bottom-color: #3a4048; } [data-bs-theme="dark"] .integration-tools-launcher .integration-tools-title { color: #e6edf3; } [data-bs-theme="dark"] .integration-tool-tile:hover { background-color: #2d333b; border-color: #3a4048; } [data-bs-theme="dark"] .integration-tool-tile-icon { background-color: #272c33; } [data-bs-theme="dark"] .integration-tool-tile-label { color: #e6edf3; } [data-bs-theme="dark"] .integration-tool-tile-provider { color: #768390; }