/* ==========================================================================
   Sea Link Logistics - UI theme (redesign, Phase 1: theme foundation)
   Loaded AFTER the existing styles. Visual only: no markup logic, routes or data are touched here.
   Reference: the approved CRM mockups (navy sidebar, white header, blue primary actions).

   Scope
   - Shared layout (sidebar, header, secondary module panel, page background): applies to every page that uses the shared layout.
   - Component styles (tables, buttons, tabs, banner, filters): only inside  .sl-themed  (the pages already redesigned).
     Phase 2 will lift this scope step by step; until then other pages keep their current look.
   ========================================================================== */

:root {
    --sl-navy: #06264B;
    --sl-sidebar: #082F5B;
    --sl-sidebar-2: #064477;
    --sl-primary: #0878E8;
    --sl-primary-dark: #0665C4;
    --sl-accent: #0799F5;
    --sl-cyan: #12C5E8;
    --sl-canvas: #F3F8FD;
    --sl-surface: #EAF4FF;
    --sl-border: #D7E7F8;
    --sl-text: #102F59;
    --sl-muted: #6D89AD;
    --sl-warn: #FFD84D;
    --sl-warn-text: #17304C;
    --sl-danger: #F0445E;
    --sl-radius-card: 12px;
    --sl-radius-btn: 8px;
    --sl-shadow: 0 4px 16px rgba(6, 38, 75, 0.08);
    --sl-font: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- page canvas + type ---------- */
body.chiszai,
body {
    background-color: var(--sl-canvas) !important;
    font-family: var(--sl-font);
    color: var(--sl-text);
}
[style*="F6F7F9" i] { background-color: var(--sl-canvas) !important; }

/* ==========================================================================
   Sidebar (first / left sidebar)
   ========================================================================== */
.left-sidebar.bg-black,
.left-sidebar {
    background-color: var(--sl-sidebar) !important;
    background-image:
        url("../images/theme/sidebar-bg.svg"),
        linear-gradient(180deg, var(--sl-sidebar) 0%, var(--sl-navy) 62%, #051F3E 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: bottom center, center !important;
    background-size: 100% auto, 100% 100% !important;
    border-right: 0 !important;
    box-shadow: 4px 0 18px rgba(6, 38, 75, 0.18);
    font-family: var(--sl-font);
}

/* brand block */
.left-sidebar .brand-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0 8px 8px;
    padding: 0 6px;
    min-height: 74px;
}
.sl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1.05; }
.sl-brand img { width: 38px; height: 38px; flex: 0 0 auto; }
.sl-brand-text { display: flex; flex-direction: column; white-space: nowrap; }
.sl-brand-text .sl-b1 { font-weight: 800; font-size: 17px; letter-spacing: .3px; }
.sl-brand-text .sl-b1 span { font-weight: 400; }
.sl-brand-text .sl-tag { font-size: 5.6px; letter-spacing: .4px; text-transform: uppercase; opacity: .85; margin-top: 3px; }
.sl-brand-light { color: #fff; }
.sl-brand-light:hover { color: #fff; }
.sl-brand-dark { color: var(--sl-navy); }
.sl-brand-dark .sl-b1 span { color: var(--sl-primary); }
.sl-brand-dark:hover { color: var(--sl-navy); }
/* a company's own uploaded logo sits on a white chip so any logo stays readable on the navy bar */
.left-sidebar .sl-logo-chip { background: #fff; border-radius: 10px; padding: 4px 8px; display: inline-block; }
.left-sidebar .sl-logo-chip img { max-width: 150px; height: auto; margin: 0 !important; }
/* collapsed bar: only the mark, the words show when the bar is open (hover or pinned) */
.left-sidebar .sl-brand-text { opacity: 0; visibility: hidden; transition: opacity .25s ease; }
.left-sidebar:hover .sl-brand-text,
.left-sidebar.sidebar-expanded .sl-brand-text { opacity: 1; visibility: visible; }
/* a company logo: the Sea Link mark while the bar is collapsed, the company logo once it opens */
.left-sidebar .sl-logo-chip { display: none; }
.left-sidebar:hover .sl-logo-chip,
.left-sidebar.sidebar-expanded .sl-logo-chip { display: inline-block; }
.left-sidebar:hover .sl-mark-only,
.left-sidebar.sidebar-expanded .sl-mark-only { display: none; }

/* pin switch */
.left-sidebar .form-check-input.side-check-input { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); }
.left-sidebar .form-check-input.side-check-input:checked { background-color: var(--sl-accent); border-color: var(--sl-accent); }

/* menu items */
.sidebar-nav ul .sidebar-item .sidebar-link,
.left-sidebar:hover .sidebar-nav ul .sidebar-item .sidebar-link,
.left-sidebar.sidebar-expanded .sidebar-nav ul .sidebar-item .sidebar-link {
    color: #fff;
    border-radius: 10px !important;
    font-weight: 500;
    transition: background-color .15s ease;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link .ti { color: #fff; }

/* active: bright blue fill with a cyan edge (the old round "pill" stays a rounded square in the collapsed bar) */
.sidebar-item.active,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active,
.left-sidebar:hover .sidebar-item.active > .sidebar-link {
    background: linear-gradient(90deg, var(--sl-primary) 0%, var(--sl-accent) 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: inset 3px 0 0 var(--sl-cyan), 0 4px 12px rgba(8, 120, 232, 0.35);
}
.sidebar-item.active { width: 44px !important; height: 44px !important; }
.left-sidebar:hover .sidebar-item.active,
.left-sidebar.sidebar-expanded .sidebar-item.active { width: auto !important; height: auto !important; background: transparent !important; box-shadow: none; }

/* red count dot used on a menu item (for example the notification count) */
.sidebar-nav .sl-count { margin-left: auto; background: var(--sl-danger); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 600; padding: 1px 7px; }

/* ==========================================================================
   Header
   ========================================================================== */
.app-header {
    background: #fff !important;
    border-bottom: 1px solid var(--sl-border);
    box-shadow: 0 6px 18px rgba(6, 38, 75, 0.07) !important;
    border-radius: 0 0 14px 14px;
    font-family: var(--sl-font);
}
.app-header .sl-brand img { width: 44px; height: 44px; }
.app-header .sl-brand-text .sl-b1 { font-size: 20px; color: var(--sl-navy); }
.app-header .sl-brand-text .sl-tag { font-size: 7px; color: var(--sl-muted); opacity: 1; }
.app-header .sl-brand-text { opacity: 1; visibility: visible; }

/* OnBoarding + Quick Links pills */
.app-header .btn-group > .btn.btn-primary,
.app-header .btn-group > .btn.btn-primary:focus {
    background: var(--sl-primary) !important;
    border-color: var(--sl-primary) !important;
    border-radius: 50px !important;
    padding: 7px 18px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(8, 120, 232, 0.25);
}
.app-header .btn-group > .btn.btn-primary:hover { background: var(--sl-primary-dark) !important; border-color: var(--sl-primary-dark) !important; }
.ql-btn { background: var(--sl-primary) !important; box-shadow: 0 3px 10px rgba(8, 120, 232, 0.25); }
.ql-btn:hover, .ql-btn:focus { background: var(--sl-primary-dark) !important; }
.app-header .btn-outline-primary { border-color: var(--sl-primary); color: var(--sl-primary); border-radius: 50px; font-weight: 600; }
.app-header .btn-outline-primary:hover { background: var(--sl-primary); color: #fff; }

/* bell dot, search pill, profile */
.nav-link .notification.bg-primary { background-color: var(--sl-danger) !important; }
.app-header #menuSearch,
.app-header input[type="search"],
.app-header .form-control { border-radius: 50px !important; border-color: var(--sl-border) !important; background: #fff; color: var(--sl-text); }
.app-header .profile-icon { background: var(--sl-navy) !important; color: #fff !important; }
.app-header .profile-name { font-weight: 600; color: var(--sl-text); }

/* ==========================================================================
   Second panel (module links such as CRM > Add Lead ...)
   ========================================================================== */
.page-sidebar-menu {
    background: #fff !important;
    border: 1px solid var(--sl-border);
    border-radius: 14px !important;
    box-shadow: var(--sl-shadow);
    padding: 10px;
    font-family: var(--sl-font);
}
.page-sidebar-menu h5 {
    background: linear-gradient(90deg, var(--sl-primary) 0%, var(--sl-accent) 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 0 0 8px;
    text-align: left !important;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-sidebar-menu a {
    background: transparent !important;
    color: var(--sl-text) !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 10px 12px 10px 14px !important;
    margin-bottom: 2px !important;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 11px;
    transition: background-color .15s ease, color .15s ease;
}
.page-sidebar-menu a i { font-size: 17px; width: 20px; text-align: center; color: var(--sl-muted); }
.page-sidebar-menu a:hover { background: var(--sl-surface) !important; color: var(--sl-primary) !important; }
.page-sidebar-menu a:hover i { color: var(--sl-primary); }
.page-sidebar-menu a.active { background: var(--sl-surface) !important; color: var(--sl-primary) !important; font-weight: 600; }
.page-sidebar-menu a.active i { color: var(--sl-primary); }
.page-sidebar-menu a.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--sl-primary); }
/* ==========================================================================
   Shared components (Phase 2) - apply to every page that uses the shared layout.
   Visual only. The customer / carrier portals and the superadmin area have their own layouts and are NOT affected.
   Old inline cyan (#05BCF6 / #16ACF2, typed straight into many pages) is mapped to the new blue so pages follow without edits.
   ========================================================================== */

:root {
    --bs-primary: #0878E8; --bs-primary-rgb: 8, 120, 232;
    --bs-info: #0799F5; --bs-info-rgb: 7, 153, 245;
    --bs-link-color: #0878E8; --bs-link-hover-color: #0665C4;
    --bs-body-color: #102F59; --bs-border-color: #D7E7F8;
}

/* ---------- old inline cyan -> new blue ---------- */
body [style*="background: #05BCF6" i],
body [style*="background:#05BCF6" i],
body [style*="background-color: #05BCF6" i],
body [style*="background-color:#05BCF6" i],
body [style*="background: #16ACF2" i],
body [style*="background:#16ACF2" i],
body [style*="background-color: #16ACF2" i],
body [style*="background-color:#16ACF2" i] {
    background: var(--sl-primary) !important;
}
body [style*="color: #05BCF6" i]:not([style*="background"]),
body [style*="color:#05BCF6" i]:not([style*="background"]),
body [style*="color: #16ACF2" i]:not([style*="background"]),
body [style*="color:#16ACF2" i]:not([style*="background"]) { color: var(--sl-primary) !important; }
body [style*="border: 1px solid #05BCF6" i],
body [style*="border:1px solid #05BCF6" i],
body [style*="border-color: #05BCF6" i],
body [style*="border-color:#05BCF6" i],
body [style*="border: 1px solid #16ACF2" i],
body [style*="border-color: #16ACF2" i] { border-color: var(--sl-primary) !important; }

/* ---------- cards ---------- */
body .card { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-card); box-shadow: var(--sl-shadow); }
body .card-header { background: var(--sl-surface); border-bottom: 1px solid var(--sl-border); font-weight: 600; color: var(--sl-navy); }
body .card hr { border: 0 !important; border-top: 1px solid var(--sl-border) !important; opacity: 1; }

/* ---------- buttons ---------- */
body .btn { border-radius: var(--sl-radius-btn); font-weight: 600; font-family: inherit; }
body .btn-primary,
body .btn-info {
    --bs-btn-bg: var(--sl-primary); --bs-btn-border-color: var(--sl-primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sl-primary-dark); --bs-btn-hover-border-color: var(--sl-primary-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sl-primary-dark); --bs-btn-active-border-color: var(--sl-primary-dark); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--sl-primary); --bs-btn-disabled-border-color: var(--sl-primary);
    background-color: var(--sl-primary); border-color: var(--sl-primary); color: #fff;
}
body .btn-primary:hover,
body .btn-info:hover { background-color: var(--sl-primary-dark); border-color: var(--sl-primary-dark); color: #fff; }
body .btn-outline-primary,
body .btn-outline-info {
    --bs-btn-color: var(--sl-primary); --bs-btn-border-color: var(--sl-primary); --bs-btn-hover-bg: var(--sl-primary); --bs-btn-hover-border-color: var(--sl-primary);
    --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--sl-primary); --bs-btn-active-border-color: var(--sl-primary); --bs-btn-active-color: #fff;
}
body .btn-success { --bs-btn-bg: #12B76A; --bs-btn-border-color: #12B76A; --bs-btn-hover-bg: #0E9F5C; --bs-btn-hover-border-color: #0E9F5C; --bs-btn-active-bg: #0E9F5C; --bs-btn-active-border-color: #0E9F5C; }
body .btn-danger { --bs-btn-bg: var(--sl-danger); --bs-btn-border-color: var(--sl-danger); --bs-btn-hover-bg: #D83450; --bs-btn-hover-border-color: #D83450; --bs-btn-active-bg: #D83450; --bs-btn-active-border-color: #D83450; }
body .btn-warning { --bs-btn-bg: var(--sl-warn); --bs-btn-border-color: var(--sl-warn); --bs-btn-color: var(--sl-warn-text); --bs-btn-hover-bg: #F2C531; --bs-btn-hover-border-color: #F2C531; --bs-btn-hover-color: var(--sl-warn-text); }
body .btn-secondary { --bs-btn-bg: #6D89AD; --bs-btn-border-color: #6D89AD; --bs-btn-hover-bg: #587396; --bs-btn-hover-border-color: #587396; }
body .btn[style*="16ACF2" i],
body .btn[style*="05BCF6" i] { background-color: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: #fff !important; }
body .btn-outline-dark,
body .btn-outline-secondary,
body .btn-light {
    background: #fff !important; border: 1px solid var(--sl-border) !important; color: var(--sl-primary) !important;
}
body .btn-outline-dark:hover,
body .btn-outline-secondary:hover,
body .btn-light:hover { background: var(--sl-surface) !important; }
body .btn-outline-dark.active,
body .btn-outline-dark:active,
body .btn-outline-secondary.active { background: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: #fff !important; }
body .btn-close:focus { box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.2); }

/* ---------- inputs ---------- */
body .form-control,
body .form-select { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-btn); color: var(--sl-text); background-color: #fff; }
body .form-control::placeholder { color: #8FA6C3; }
body .form-control:focus,
body .form-select:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.15); }
body .form-control:disabled,
body .form-control[readonly],
body .form-select:disabled { background-color: #F3F8FD; }
body .form-label { color: var(--sl-text); font-weight: 600; font-size: 13px; }
body .form-check-input:checked { background-color: var(--sl-primary); border-color: var(--sl-primary); }
body .form-check-input:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.18); }
body .input-group-text { background: var(--sl-surface); border-color: var(--sl-border); color: var(--sl-text); }

/* select2 (Bootstrap 5 theme) and TomSelect */
body .select2-container--bootstrap-5 .select2-selection { border-color: var(--sl-border); border-radius: var(--sl-radius-btn); }
body .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.15); }
body .select2-container--bootstrap-5 .select2-dropdown { border-color: var(--sl-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(6, 38, 75, 0.14); }
body .select2-container--bootstrap-5 .select2-results__option--highlighted,
body .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]:hover { background-color: var(--sl-primary) !important; color: #fff !important; }
body .select2-container--bootstrap-5 .select2-results__option--selected { background-color: var(--sl-surface); color: var(--sl-primary); }
body .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background: var(--sl-surface); border: 1px solid var(--sl-border); color: var(--sl-primary); border-radius: 6px; }
body .ts-wrapper .ts-control { border-color: var(--sl-border); border-radius: var(--sl-radius-btn); }
body .ts-wrapper.focus .ts-control { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.15); }
body .ts-dropdown { border-color: var(--sl-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(6, 38, 75, 0.14); }
body .ts-dropdown .active { background: var(--sl-surface); color: var(--sl-primary); }
body .daterangepicker td.active,
body .daterangepicker td.active:hover { background-color: var(--sl-primary); }
body .daterangepicker .ranges li.active,
body .daterangepicker .drp-buttons .applyBtn { background-color: var(--sl-primary); border-color: var(--sl-primary); color: #fff; }

/* ---------- dropdown menus ---------- */
body .dropdown-menu { border: 1px solid var(--sl-border); border-radius: 12px; box-shadow: 0 10px 28px rgba(6, 38, 75, 0.14); }
body .dropdown-item { border-radius: 8px; color: var(--sl-text); }
body .dropdown-item:hover,
body .dropdown-item:focus { background: var(--sl-surface); color: var(--sl-primary); }
body .dropdown-item.active,
body .dropdown-item:active { background: var(--sl-primary); color: #fff; }

/* ---------- tabs / pills ---------- */
body .nav-tabs { border-bottom-color: var(--sl-border); }
body .nav-tabs .nav-link { color: var(--sl-muted); font-weight: 600; border-radius: 8px 8px 0 0; }
body .nav-tabs .nav-link:hover { color: var(--sl-primary); }
body .nav-tabs .nav-link.active { color: var(--sl-primary); border-color: var(--sl-border) var(--sl-border) #fff; background: #fff; }
body .nav-pills .nav-link.active,
body .nav-pills .show > .nav-link { background: var(--sl-primary); color: #fff; }

/* ---------- status badges ---------- */
body .badge { border-radius: 99px; font-weight: 600; padding: .4em .75em; }
body .badge.bg-warning { background: var(--sl-warn) !important; color: var(--sl-warn-text) !important; }
body .badge.bg-success { background: #12B76A !important; color: #fff; }
body .badge.bg-danger { background: var(--sl-danger) !important; color: #fff; }
body .badge.bg-info { background: var(--sl-accent) !important; color: #fff; }
body .badge.bg-primary { background: var(--sl-primary) !important; color: #fff; }
body .badge.bg-secondary { background: #6D89AD !important; color: #fff; }
body .text-info { color: var(--sl-primary) !important; }

/* ---------- tables ---------- */
body table.table,
body table.dataTable { color: var(--sl-text); border-color: var(--sl-border); }
body table.table thead:not(.table-light):not(.table-dark),
body table.dataTable thead:not(.table-light):not(.table-dark),
body table.table thead[style],
body table.dataTable thead[style] { background: linear-gradient(90deg, var(--sl-primary) 0%, var(--sl-accent) 100%) !important; color: #fff !important; }
body table.table thead:not(.table-light):not(.table-dark) th,
body table.dataTable thead:not(.table-light):not(.table-dark) th,
body table.table thead[style] th,
body table.dataTable thead[style] th {
    color: #fff !important; font-weight: 600; font-size: 13px; white-space: nowrap;
    border-color: rgba(255, 255, 255, 0.22) !important; padding: 10px 8px !important; background: transparent !important;
}
body table.table tbody td,
body table.dataTable tbody td { border-color: var(--sl-border) !important; vertical-align: middle; padding: 8px !important; }
body table.table tbody tr:nth-child(even) { background-color: #F7FBFF; }
body table.table tbody tr:hover { background-color: var(--sl-surface); }
body .table-bordered,
body .table-bordered > :not(caption) > * > * { border-color: var(--sl-border); }

/* DataTables controls */
body .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--sl-border); border-radius: 50px; padding: 7px 14px; outline: none; }
body .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--sl-accent); box-shadow: 0 0 0 3px rgba(7, 153, 245, 0.15); }
body .dataTables_wrapper .dataTables_length select { border: 1px solid var(--sl-border); border-radius: var(--sl-radius-btn); padding: 4px 8px; }
body .dataTables_wrapper .dataTables_info { color: var(--sl-text); }
body .dataTables_wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--sl-border) !important; border-radius: var(--sl-radius-btn) !important; background: #fff !important; color: var(--sl-muted) !important; margin: 0 2px; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--sl-primary) !important; border-color: var(--sl-primary) !important; color: #fff !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sl-surface) !important; color: var(--sl-primary) !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .55; }

/* Laravel paginator */
body .pagination .page-link { color: var(--sl-primary); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-btn); margin: 0 2px; }
body .pagination .page-link:hover { background: var(--sl-surface); color: var(--sl-primary-dark); }
body .pagination .page-item.active .page-link { background: var(--sl-primary); border-color: var(--sl-primary); color: #fff; }
body .pagination .page-item.disabled .page-link { color: var(--sl-muted); }

/* ---------- modals / offcanvas ---------- */
body .modal-content { border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(6, 38, 75, 0.25); }
body .modal-header { border-bottom: 1px solid var(--sl-border); }
body .modal-footer { border-top: 1px solid var(--sl-border); }
body .modal-title { font-weight: 700; }
body .offcanvas { border-color: var(--sl-border); }

/* ---------- page banner (Follow Up Leads uses it; other modules adopt it in Phase 3) ---------- */
body .sl-themed { font-family: var(--sl-font); color: var(--sl-text); }
body .sl-banner {
    display: flex; align-items: center; gap: 16px;
    border: 1px solid var(--sl-border); border-radius: var(--sl-radius-card); box-shadow: var(--sl-shadow);
    padding: 16px 22px; min-height: 92px; margin-bottom: 16px; background-color: #fff;
    background-image: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0) 80%), url("../images/theme/banner-ship.svg");
    background-repeat: no-repeat, no-repeat; background-position: left, right center; background-size: 100% 100%, auto 100%;
}
body .sl-banner .sl-banner-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--sl-surface); color: var(--sl-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; }
body .sl-banner h1,
body .sl-banner .sl-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--sl-navy); line-height: 1.2; }
body .sl-banner .sl-sub { margin: 2px 0 0; font-size: 15px; color: var(--sl-muted); font-weight: 500; }
body .sl-themed #ordersTable { width: 100% !important; }

/* ---------- small screens ---------- */
@media (max-width: 767.98px) {
    body .sl-banner { padding: 12px 14px; min-height: 76px; background-image: none; }
    body .sl-banner h1, body .sl-banner .sl-title { font-size: 20px; }
}

/* header banner built from an existing "Home / Page" header (pages without a module panel) */
body .sl-banner.sl-banner-auto { justify-content: flex-start !important; align-items: center !important; }
/* a banner that carries buttons (Export, New entry ...) drops the ship picture so the buttons stay readable */
body .sl-banner.sl-banner-auto:has(.sl-banner-actions) { background-image: none; }
body .sl-banner-auto .sl-banner-text { min-width: 0; }
body .sl-banner-auto .sl-banner-text .sl-title { font-size: 24px; font-weight: 700; color: var(--sl-navy); line-height: 1.2; margin: 0 0 2px; }
body .sl-banner-auto .sl-banner-text .sl-sub { font-size: 12.5px; color: var(--sl-muted); margin: 0; }
body .sl-banner-auto > .sl-banner-actions { margin-left: auto; position: relative; z-index: 1; }
body .sl-banner-auto > .sl-banner-actions ~ .sl-banner-actions { margin-left: 8px; }

/* ===== Dashboard cards: stand out from the canvas (Phase 5) ===== */
body .dashboard-card,
body .cd-card,
body .card.shadow-sm {
    background: #fff;
    border: 1px solid #C5DAF2;
    border-top: 3px solid var(--sl-primary, #0878E8);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(6, 38, 75, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}
body .dashboard-card:hover,
body .cd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(8, 120, 232, .22);
}
body .dashboard-card .icon-box { background: linear-gradient(135deg, #0878E8, #12C5E8); box-shadow: 0 4px 10px rgba(8,120,232,.3); }
body .dashboard-card .value-text h5,
body .dashboard-card .card-value { color: #0878E8; }
body .cd-card.cd-hero { background: linear-gradient(135deg, #0878E8, #0799F5); border-color: #0668C6; border-top-color: #12C5E8; color: #fff; }
body .cd-card .cd-ico { background: #E3F0FF; color: #0878E8; }
body .cd-card.cd-hero .cd-ico { background: rgba(255,255,255,.22); color: #fff; }

/* Side panels (Order Details etc.): the layout wrapper is shrunk to 80% (.chisai { zoom: .8 }), the modal backdrop is already
   enlarged to 125vw/125vh in includes/app.blade.php, but the offcanvas backdrop was not, so the dark overlay stopped at ~80% of the
   screen height. Same compensation here. Visual only. */
body .offcanvas-backdrop { width: 125vw !important; height: 125vh !important; }

/* Header banners that show the ship picture: keep a long description off the picture (the picture is hidden on phones, so no limit there). */
@media (min-width: 768px) {
    body .sl-banner.sl-banner-auto:not(:has(.sl-banner-actions)) .sl-banner-text { max-width: 58%; }
}

/* ---------- old cyan #00BFFF (deep sky blue): typed inline and in the page <style> of ~80 pages (Order Details panel etc.) ---------- */
body [style*="background: #00BFFF" i],
body [style*="background:#00BFFF" i],
body [style*="background-color: #00BFFF" i],
body [style*="background-color:#00BFFF" i] { background: var(--sl-primary) !important; }
body [style*="color: #00BFFF" i]:not([style*="background"]),
body [style*="color:#00BFFF" i]:not([style*="background"]) { color: var(--sl-primary) !important; }
body [style*="border-color: #00BFFF" i],
body [style*="border: 1px solid #00BFFF" i] { border-color: var(--sl-primary) !important; }
/* the cyan section bars inside detail panels ("General Information", "Pickup Locations 1" ...) */
body .section-title {
    background: linear-gradient(90deg, var(--sl-primary) 0%, var(--sl-accent) 100%) !important;
    color: #fff !important; border-radius: 8px; padding: 8px 14px;
}
/* side panels with a black header (Order Details ...) */
body .offcanvas-header[style*="#000"] { background: linear-gradient(90deg, var(--sl-navy), var(--sl-sidebar-2)) !important; }
/* wide toastr pop-ups (e.g. "Last Five Rates" on Dispatch / Create Order / Repeat Order / customer RFQ): Bootstrap 4's
   .toast { max-width: 350px } squeezed them; full-width toasts get a readable width, centred (smaller screens: 96%) */
#toast-container.toast-top-full-width > .toast,
#toast-container.toast-bottom-full-width > .toast { width: 760px; max-width: 96%; opacity: 1; }
#toast-container.toast-top-full-width .table,
#toast-container.toast-bottom-full-width .table { color: #fff; margin-bottom: 0; }
#toast-container.toast-top-full-width .table > :not(caption) > * > *,
#toast-container.toast-bottom-full-width .table > :not(caption) > * > * { background: transparent !important; color: #fff !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.25); }
body #toast-container.toast-top-full-width table.table tbody tr,
body #toast-container.toast-bottom-full-width table.table tbody tr { background-color: transparent; }
#toast-container.toast-top-full-width .table thead th,
#toast-container.toast-bottom-full-width .table thead th { background: rgba(0, 0, 0, 0.15) !important; }
#toast-container.toast-top-full-width h4,
#toast-container.toast-bottom-full-width h4 { color: #fff; }