/* ================================================
   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;
}

/* ================================================
   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;
}

[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 #chatMessages {
	background: #1e2228;
}

[data-bs-theme="dark"] #chatOffcanvas .chat-message-received .chat-message-content {
	background: #2d333b;
	color: #e6edf3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] #chatOffcanvas .chat-message-received .chat-message-time {
	color: #8b949e;
}

[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;
}

/* Notifications offcanvas dark mode */
[data-bs-theme="dark"] #notificationsOffcanvas .offcanvas-header {
	background: #1e2228 !important;
}

/* 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 offcanvas dark mode */
[data-bs-theme="dark"] #quickSearchOffcanvas .offcanvas-body {
	background-color: #272c33;
}

[data-bs-theme="dark"] #quickSearchOffcanvas .search-input-wrapper {
	background-color: #1e2228;
	border-radius: 6px;
}

[data-bs-theme="dark"] #quickSearchOffcanvas #quickSearchInput {
	background-color: #1e2228;
	border-color: #1e2228;
	color: #e6edf3;
}

[data-bs-theme="dark"] #quickSearchOffcanvas #quickSearchInput::placeholder {
	color: #6e7681;
}

[data-bs-theme="dark"] #quickSearchOffcanvas .quick-search-icon-left {
	color: #8b949e;
}

[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 .notification-btn {
	position: relative;
}

#appHeader .notification-btn .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: #10B981 !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;
}

/* ===== Favorites Dropdown ===== */
#favoritesDropdown .dropdown-header {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#favoritesDropdown .favorite-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	transition: background-color 0.15s ease;
}

#favoritesDropdown .favorite-item .favorite-remove-btn {
	opacity: 0;
	transition: opacity 0.15s ease;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--bs-secondary) !important;
}

#favoritesDropdown .favorite-item:hover .favorite-remove-btn {
	opacity: 1;
}

#favoritesDropdown .favorite-item .favorite-remove-btn:hover {
	color: var(--bs-danger) !important;
}

/* ===== 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);
	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);
}

/* 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: 280px;
	}
	
	body.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 {
	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) {
	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 {
	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 {
	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 {
	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) {
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
	transform: translateY(-1px);
}

.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-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 {
	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;
}

#appHeader .dropdown {
	position: relative;
}

/* Enhanced Quick Actions Dropdown */
#appHeader .dropdown-menu {
	background: white;
	border: none;
	border-radius: 12px;
	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 input[type='checkbox'].form-check-input,
.modal .table 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;
	transition: all 0.15s ease-in-out;
	position: relative;
}

.table input[type='checkbox'].form-check-input:checked,
.modal .table input[type='checkbox']:checked {
	background-color: var(--color-accent, #0EA5E9);
	border-color: var(--color-accent, #0EA5E9);
}

.table input[type='checkbox'].form-check-input:checked::after,
.modal .table input[type='checkbox']:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.table input[type='checkbox'].form-check-input:hover,
.modal .table input[type='checkbox']:hover {
	border-color: var(--color-accent, #0EA5E9);
}

.table thead input[type='checkbox'].form-check-input,
.modal .table thead input[type='checkbox'] {
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
}

.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 */
#sidebarOffcanvas {
	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);
}

/* Full screen sidebar on mobile */
@media (max-width: 768px) {
	#sidebarOffcanvas {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 60px !important;
	}
}

#sidebarOffcanvas .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;
}

/* 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;
}

.sidebar-nav .nav-link-sub i {
	font-size: 0.85rem;
}

/* Collapse chevron rotation */
.sidebar-nav .nav-link-collapse {
	display: flex;
	align-items: center;
}

.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: 280px;
	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;
	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;
}

/* Collapsed sidebar state */
.sidebar-desktop.collapsed {
	width: 70px;
}

.sidebar-desktop.collapsed .nav-text,
.sidebar-desktop.collapsed .collapse-icon {
	display: none !important;
}

.sidebar-desktop.collapsed .nav-link {
	justify-content: center;
	padding: 0.75rem 0;
	width: 100%;
	position: relative;
	height: 44px;
}

.sidebar-desktop.collapsed .nav-link i:first-child {
	margin-right: 0 !important;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.sidebar-desktop.collapsed .sidebar-nav {
	padding-left: 0;
	padding-right: 0;
	align-items: center;
}

/* Hide submenus when collapsed (but not when hover-expanded) */
.sidebar-desktop.collapsed:not(.hover-expand) .nav-submenu {
	display: none !important;
}

.sidebar-desktop.collapsed .nav-divider {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

/* Tooltip for collapsed sidebar (only when NOT hover-expanded) */
.sidebar-desktop.collapsed: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-desktop.collapsed.hover-expand {
	width: 280px;
	box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}

.sidebar-desktop.collapsed.hover-expand .nav-text,
.sidebar-desktop.collapsed.hover-expand .collapse-icon {
	display: inline !important;
}

.sidebar-desktop.collapsed.hover-expand .nav-link {
	justify-content: flex-start;
	padding: 0.75rem 1rem;
	height: 44px;
}

.sidebar-desktop.collapsed.hover-expand .nav-link i:first-child {
	position: static;
	transform: none;
	margin-right: 0.75rem !important;
}

.sidebar-desktop.collapsed.hover-expand .nav-link {
	justify-content: flex-start;
	padding: 0.75rem 1rem;
}

.sidebar-desktop.collapsed.hover-expand .nav-link i:first-child {
	margin-right: 0.75rem !important;
}

.sidebar-desktop.collapsed.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: 280px;
		transition: margin-left 0.3s ease;
	}
	
	.page-header {
		margin-left: 280px;
		transition: margin-left 0.3s ease;
	}
	
	#filtersSection {
		margin-left: 280px;
		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: 280px;
		transition: margin-left 0.3s ease;
	}
	
	.footer {
		margin-left: 280px;
		transition: margin-left 0.3s ease;
	}
	
	body.sidebar-collapsed .main {
		margin-left: 70px;
	}
	
	body.sidebar-collapsed .page-header {
		margin-left: 70px;
	}
	
	body.sidebar-collapsed #filtersSection {
		margin-left: 70px;
	}
	
	body.sidebar-collapsed .table-footer {
		margin-left: 70px;
	}
	
	body.sidebar-collapsed .footer {
		margin-left: 70px;
	}
	
	/* Override the sidebar-open class on desktop - not needed */
	.main.sidebar-open {
		margin-left: 280px;
	}
	
	body.sidebar-collapsed .main.sidebar-open {
		margin-left: 70px;
	}
}

/* Sidebar scrollbar styling */
#sidebarOffcanvas .offcanvas-body {
	scrollbar-width: thin;
	scrollbar-color: var(--color-accent, #0EA5E9) color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent);
}

#sidebarOffcanvas .offcanvas-body::-webkit-scrollbar {
	width: 6px;
}

#sidebarOffcanvas .offcanvas-body::-webkit-scrollbar-track {
	background: color-mix(in srgb, var(--color-accent, #0EA5E9) 10%, transparent);
}

#sidebarOffcanvas .offcanvas-body::-webkit-scrollbar-thumb {
	background: var(--color-accent, #0EA5E9);
	border-radius: 3px;
}

#sidebarOffcanvas .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 */
.sidebar-desktop.collapsed: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 {
	border-top: 1px solid #e5e7eb;
	padding: 1rem 1.5rem;
	background-color: #f8f9fa;
	flex-shrink: 0;
}

.offcanvas-footer .btn {
	border-radius: 6px;
	padding: 0.625rem 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.offcanvas-footer .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

.offcanvas-footer .btn-secondary:hover {
	background-color: #5a6268;
	border-color: #545b62;
	transform: translateY(-1px);
}

.offcanvas-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);
}

.offcanvas-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);
}

/* 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-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;
}

/* 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 {
	color: #1F2A44;
	font-weight: 600;
	border-radius: 8px;
	padding: 0.625rem 1.25rem;
	transition: all 0.3s ease;
	position: relative;
}

.offcanvas-body .nav-pills .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 {
	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 {
	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 OFFCANVAS STYLES
   ============================================ */

#notificationsOffcanvas #notificationsList {
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}

#notificationsOffcanvas #notificationsList::-webkit-scrollbar {
	width: 6px;
}

#notificationsOffcanvas #notificationsList::-webkit-scrollbar-track {
	background: transparent;
}

#notificationsOffcanvas #notificationsList::-webkit-scrollbar-thumb {
	background-color: #d1d5db;
	border-radius: 3px;
}

.notification-item {
	transition: background-color 0.2s ease;
}

.notification-item:hover {
	background-color: #f8f9fa;
}

.notification-item.unread {
	background-color: #eff6ff;
	border-left: 3px solid var(--color-accent, #0EA5E9);
}

.notification-item.unread:hover {
	background-color: #dbeafe;
}

/* Dark mode notification styling */
[data-bs-theme="dark"] .notification-item:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .notification-item.unread {
	background-color: rgba(56, 139, 253, 0.1);
	border-left-color: #388bfd;
}

[data-bs-theme="dark"] .notification-item.unread:hover {
	background-color: rgba(56, 139, 253, 0.15);
}

/* 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"] #notificationsOffcanvas #notificationsList::-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: 16px;
	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: 1.1rem !important;
	padding: 8px 48px 8px 65px !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-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: 1rem; /* 16px prevents iOS zoom on focus */
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;
}

/* ======== Search Offcanvas ======== */
#quickSearchOffcanvas {
	width: 480px !important;
	max-width: 90vw;
}

#quickSearchOffcanvas .offcanvas-header {
	padding: 16px 20px;
	background: linear-gradient(135deg, #1F2A44 0%, #2d3f63 100%);
	color: white;
}

#quickSearchOffcanvas .offcanvas-header .btn-close {
	filter: brightness(0) invert(1);
}

#quickSearchOffcanvas .offcanvas-header .offcanvas-title {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* Search Tab Styles */
.search-input-wrapper {
	position: relative;
	z-index: 10;
	background: white;
	display: flex;
	align-items: center;
}

.search-input-wrapper input {
	padding-left: 40px;
	padding-right: 40px;
	font-size: 1rem;
}

.quick-search-icon-left {
	position: absolute;
	left: 12px;
	color: #999;
	pointer-events: none;
}

.quick-search-clear-right {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.quick-search-clear-right:hover {
	color: #0ea5e9;
}

.quick-search-results {
	padding: 12px 0;
}

.search-empty {
	text-align: center;
	padding: 40px 20px;
	color: #999;
}

.search-empty i {
	color: #ddd;
	margin-bottom: 16px;
}

/* Mobile responsiveness for offcanvas */
@media (max-width: 576px) {
	#shipmentFiltersOffcanvas {
		width: 100% !important;
		max-width: 100vw !important;
	}
	
	#quickSearchOffcanvas {
		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-header {
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	color: white;
}

#chatOffcanvas .offcanvas-header .offcanvas-title {
	color: white;
}

#chatOffcanvas .offcanvas-header .btn-close {
	filter: brightness(0) invert(1);
}

#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 */
.chat-avatar .avatar-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}

/* Chat header area */
#chatHeader {
	background: white;
	border-bottom: 1px solid #eee;
}

#chatHeader #chatSearchInput {
	border-radius: 20px;
	padding: 8px 16px;
	border: 1px solid #ddd;
	font-size: 14px;
}

#chatHeader #chatSearchInput:focus {
	border-color: #0EA5E9;
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

#chatHeader #newMessageBtn {
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	border: none;
}

#chatHeader #newMessageBtn:hover {
	transform: scale(1.05);
}

/* Conversation list */
.chat-conversation-item {
	cursor: pointer;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
}

.chat-conversation-item:hover {
	background-color: #f0f7ff;
	border-left-color: #0EA5E9;
}

.chat-conversation-item.bg-light {
	background-color: #f0f7ff !important;
	border-left-color: #3b82f6;
}

/* User selection list */
.chat-user-item {
	cursor: pointer;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
}

.chat-user-item:hover {
	background-color: #f0f7ff;
	border-left-color: #0EA5E9;
}

/* Messages area - matches AI chat background */
#chatMessages {
	background: #f8f9fa;
	flex: 1;
	min-height: 0; /* Critical for flex scroll container */
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Individual messages - bubble style like AI chat */
.chat-message {
	display: flex;
	max-width: 85%;
}

.chat-message.chat-message-sent {
	align-self: flex-end;
}

.chat-message.chat-message-received {
	align-self: flex-start;
}

.chat-message-content {
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	word-break: break-word;
}

.chat-message-sent .chat-message-content {
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	color: white;
	border-bottom-right-radius: 4px;
}

.chat-message-received .chat-message-content {
	background: white;
	color: #333;
	border-bottom-left-radius: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-message-text {
	margin-bottom: 4px;
}

.chat-message-time {
	font-size: 11px;
	text-align: right;
	opacity: 0.7;
}

.chat-message-sent .chat-message-time {
	color: rgba(255, 255, 255, 0.8);
}

.chat-message-received .chat-message-time {
	color: #6c757d;
}

/* Shared record links */
.shared-record-link {
	border-width: 1px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	padding: 0.35rem 0.65rem;
	border-radius: 12px;
	transition: all 0.15s ease-in-out;
}

.chat-message-sent .shared-record-link {
	background-color: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: white !important;
}

.chat-message-sent .shared-record-link:hover {
	background-color: rgba(255, 255, 255, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.8) !important;
}

.chat-message-received .shared-record-link {
	background-color: #f0f7ff !important;
	border-color: #d0e3ff !important;
	color: #0EA5E9 !important;
}

.chat-message-received .shared-record-link:hover {
	background-color: #e0efff !important;
	border-color: #0EA5E9 !important;
}

/* Input area - matches AI chat style */
#chatInputArea {
	padding: 12px 16px 16px;
	background: white;
	border-top: 1px solid #eee;
}

#chatMessageInput {
	flex: 1;
	border-radius: 20px;
	padding: 10px 16px;
	border: 1px solid #ddd;
	font-size: 14px;
	overflow: hidden;
}

#chatMessageInput:focus {
	border-color: #0EA5E9;
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

#chatSendBtn {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	border: none;
	color: white;
	transition: all 0.2s ease;
}

#chatSendBtn:hover {
	transform: scale(1.05);
}

#chatSendBtn:disabled {
	background: #ccc;
	cursor: not-allowed;
	transform: none;
}

/* 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 {
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	border: none;
	border-radius: 20px;
	transition: all 0.2s ease;
}

#startConversationBtn:not(:disabled):hover {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

#startConversationBtn:disabled {
	background: #ccc;
}

/* Empty state */
#chatEmpty {
	background: #f8f9fa;
}

#chatEmpty i {
	color: #0EA5E9;
	opacity: 0.5;
}

/* 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: #0EA5E9;
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

#chatNewMessageView .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: linear-gradient(135deg, #0EA5E9 0%, #3b82f6 100%);
	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;
	}
}

.form-control {
  font-size: 16px;
}

@media (max-width: 768px) {
  .form-control {
    font-size: 16px;
  }
}

@supports (-webkit-touch-callout: none) {
  input, textarea, select {
    font-size: 16px;
  }
}
/* ==========================================
   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: 38px;
	}
	
	.btn-sm {
		min-height: 32px;
		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: 38px;
	}
	
	.btn-sm {
		min-height: 32px;
	}
	
	/* 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,
	#notificationsOffcanvas, #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;
}

/* ================================================
   iOS ZOOM PREVENTION
   Prevent auto-zoom on input focus on iOS devices.
   iOS zooms when input font-size < 16px
   ================================================ */
@media screen and (max-width: 991px) {
	select,
	textarea,
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input[type="color"],
	.form-control,
	.form-select {
		font-size: 16px !important;
	}
}

/* ================================================
   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;
}