/* ============================================================================
   ATL — Blue Theme (new)
   ----------------------------------------------------------------------------
   Single, self-contained theme layer. Loaded LAST in the layouts so it overrides
   the legacy red theme WITHOUT editing any existing CSS file.
   Palette sampled from the "Vehicles in Yard" listing mockup.
   ========================================================================== */

:root {
    --atl-primary: #2563EB;      /* royal blue - primary actions, active states */
    --atl-primary-dark: #1D4ED8; /* hover / active pagination */
    --atl-primary-darker: #1E40AF;
    --atl-primary-light: #EFF6FF;/* light blue surfaces (banners, active pills) */
    --atl-primary-100: #DBEAFE;
    --atl-primary-050: #EAF2FE;

    --atl-ink: #0F172A;          /* headings / dark text */
    --atl-ink-2: #1F2937;
    --atl-muted: #64748B;        /* secondary text */
    --atl-table-head: #0B1220;   /* near-black table header */
    --atl-border: #E5E7EB;
    --atl-border-2: #D0D5DD;
    --atl-surface: #FFFFFF;
    --atl-app-bg: #F5F7FB;
    --atl-danger: #DC2626;
    --atl-success: #16A34A;

    --atl-radius: 12px;
    --atl-radius-sm: 8px;
    --atl-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    --atl-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
}

/* ---------------------------------------------------------------- base */
body {
    background: var(--atl-app-bg) !important;
    color: var(--atl-ink-2);
}

.atl-theme a { color: var(--atl-primary); }
.atl-theme a:hover { color: var(--atl-primary-dark); }

/* ---------------------------------------------------- primary color remap
   Broadly repaint anything that used the old red/brand accents to blue. */
.text-primary, .text-danger.atl-brand { color: var(--atl-primary) !important; }
.bg-primary { background-color: var(--atl-primary) !important; }
.border-primary { border-color: var(--atl-primary) !important; }

.btn-primary,
.btn-primary:focus {
    background-color: var(--atl-primary) !important;
    border-color: var(--atl-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--atl-primary-dark) !important;
    border-color: var(--atl-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--atl-primary) !important;
    border-color: var(--atl-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--atl-primary) !important;
    color: #fff !important;
}

/* soft/light action button used in the listing (Search) */
.btn-soft-primary {
    background: var(--atl-primary-050) !important;
    color: var(--atl-primary) !important;
    border: 1px solid var(--atl-primary-100) !important;
    font-weight: 600;
    border-radius: var(--atl-radius-sm);
}
.btn-soft-primary:hover { background: var(--atl-primary-100) !important; }

.btn-light-bordered {
    background: #fff !important;
    color: var(--atl-ink-2) !important;
    border: 1px solid var(--atl-border-2) !important;
    border-radius: var(--atl-radius-sm);
    font-weight: 600;
}
.btn-light-bordered:hover { background: #F8FAFC !important; }

.badge-primary,
.badge.badge-primary { background-color: var(--atl-primary) !important; color: #fff !important; }

/* ---------------------------------------------------------- form controls */
.atl-theme .form-control,
.atl-theme .form-select,
.atl-theme .custom-select {
    border: 1px solid var(--atl-border-2);
    border-radius: var(--atl-radius-sm);
    color: var(--atl-ink-2);
}
.atl-theme .form-control:focus,
.atl-theme .form-select:focus {
    border-color: var(--atl-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.atl-theme label { color: var(--atl-muted); font-weight: 600; font-size: .8rem; }

/* select2 accent */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--atl-primary) !important;
}

/* ------------------------------------------------------------- data tables
   Match the listing mockup: dark header, clean rows, blue accents. */
.atl-theme table.dataTable thead th,
.atl-table thead th,
.atl-theme .table.atl-table thead th {
    background: var(--atl-table-head) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.atl-table thead th:first-child { border-top-left-radius: var(--atl-radius-sm); }
.atl-table thead th:last-child { border-top-right-radius: var(--atl-radius-sm); }

.atl-table tbody td { vertical-align: middle; border-color: var(--atl-border); color: var(--atl-ink-2); }
.atl-table tbody tr:hover { background: #F8FAFC; }
.atl-table tbody tr.selected,
.atl-table tbody tr.active { background: var(--atl-primary-light) !important; }

/* datatables pagination -> blue */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover,
.pagination .page-item.active .page-link {
    background: var(--atl-primary) !important;
    border-color: var(--atl-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .paginate_button:hover {
    background: var(--atl-primary-light) !important;
    color: var(--atl-primary) !important;
    border-color: var(--atl-primary-100) !important;
}
.page-link { color: var(--atl-primary); }

/* info banner (blue) used above the listing */
.atl-info-banner {
    background: var(--atl-primary-light);
    border: 1px solid var(--atl-primary-100);
    color: var(--atl-primary-dark);
    border-radius: var(--atl-radius);
    padding: .85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* ============================================================================
   HEADER / TOP NAV  (image 1)
   ========================================================================== */
.atl-theme .navbar.horizontal-layout {
    background: #fff !important;
    box-shadow: var(--atl-shadow-sm);
    border-bottom: 1px solid var(--atl-border);
}
.atl-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .5rem 0;
}
.atl-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}
.atl-brand img { height: 34px; width: auto; }
.atl-brand .atl-brand-name {
    font-weight: 800;
    line-height: 1.05;
    color: var(--atl-ink);
    font-size: .95rem;
    letter-spacing: .2px;
}
.atl-brand .atl-brand-name small { display: block; font-weight: 700; color: var(--atl-ink); }

.atl-search {
    flex: 1 1 auto;
    max-width: 560px;
    position: relative;
}
.atl-search .mdi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--atl-muted); }
.atl-search input {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--atl-border-2);
    background: var(--atl-primary-light);
    padding: 0 1rem 0 2.5rem;
    color: var(--atl-ink-2);
}
.atl-search input:focus { outline: none; border-color: var(--atl-primary); background:#fff; }

.atl-topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.atl-icon-btn {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--atl-border);
    background: #fff;
    color: var(--atl-ink-2);
    position: relative;
}
.atl-icon-btn .mdi { font-size: 20px; }
.atl-icon-btn .atl-badge-dot {
    position: absolute; top: 6px; right: 8px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--atl-danger); color:#fff; font-size: 10px; font-weight: 700;
    border-radius: 999px; display:flex; align-items:center; justify-content:center;
}
.atl-user-chip {
    display: flex; align-items: center; gap: .6rem;
    padding-left: .75rem; border-left: 1px solid var(--atl-border);
}
.atl-user-chip .atl-user-name { font-weight: 700; color: var(--atl-ink); font-size: .85rem; line-height: 1.1; }
.atl-user-chip .atl-user-sub { color: var(--atl-muted); font-size: .72rem; }
.atl-user-chip .atl-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--atl-primary-light); color: var(--atl-primary);
    display:flex; align-items:center; justify-content:center; font-weight:700;
    border: 1px solid var(--atl-primary-100);
}

/* pill nav */
.atl-theme .nav-bottom { background: transparent !important; box-shadow: none !important; border: none !important; }
.atl-pillnav {
    display: flex; gap: .5rem; flex-wrap: wrap;
    padding: .35rem 0 .75rem;
    list-style: none; margin: 0;
}
.atl-pillnav .nav-item { margin: 0; }
.atl-pillnav .nav-link {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem !important;
    border-radius: var(--atl-radius-sm);
    background: #fff;
    border: 1px solid var(--atl-border);
    color: var(--atl-ink-2) !important;
    font-weight: 600;
    transition: all .15s ease;
}
.atl-pillnav .nav-link:hover { border-color: var(--atl-primary-100); background: var(--atl-primary-light); color: var(--atl-primary) !important; }
.atl-pillnav .nav-item.active > .nav-link,
.atl-pillnav .nav-link.active {
    background: var(--atl-primary) !important;
    border-color: var(--atl-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}
.atl-pillnav .nav-link .link-icon,
.atl-pillnav .nav-link .mdi { font-size: 18px; }
.atl-pillnav .dropdown-menu {
    border: 1px solid var(--atl-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
    padding: 4px 0;
    min-width: 224px;
    margin-top: 6px;
    overflow: hidden;
}
.atl-pillnav .dropdown-item {
    position: relative;
    padding: 11px 18px;
    font-weight: 500;
    color: var(--atl-ink-2);
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.atl-pillnav .dropdown-item:active,
.atl-pillnav .dropdown-item:hover {
    background: var(--atl-primary-light);
    color: var(--atl-primary-dark);
    border-left-color: var(--atl-primary);
}
/* soft divider between child (dropdown) menu items */
.atl-pillnav .dropdown-menu .dropdown-item:not(:last-child) {
    border-bottom: 1px solid #EEF0F4;
}

/* ============================================================================
   DASHBOARD  (image 1)
   ========================================================================== */
.atl-dash { padding: 1.25rem 0 2rem; }
.atl-section-title { font-weight: 800; color: var(--atl-ink); font-size: 1.35rem; margin: .25rem 0 1rem; }

.atl-card {
    background: var(--atl-surface);
    border: 1px solid var(--atl-border);
    border-radius: var(--atl-radius);
    box-shadow: var(--atl-shadow);
}
.atl-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--atl-primary-light);
    border-bottom: 1px solid var(--atl-border);
    border-radius: var(--atl-radius) var(--atl-radius) 0 0;
}
.atl-card-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--atl-ink); }
.atl-card-body { padding: .5rem 1.25rem 1rem; }
/* collapsible cards (New Updates / Recent Activity) — toggled by dashboard JS */
.atl-card-head.atl-collapsible { cursor: pointer; user-select: none; }
.atl-card-head.atl-collapsible .mdi { transition: transform .2s ease; }

/* ---- shipment overview chevron stepper ---- */
.atl-stepper { display: flex; gap: 10px; overflow-x: auto; padding-bottom: .25rem; }
.atl-step {
    position: relative;
    flex: 1 1 0;
    min-width: 190px;
    background: var(--atl-primary-light);
    border: 1px solid var(--atl-primary-100);
    padding: 1.1rem 1.25rem 1.1rem 1.25rem;
    display: flex; align-items: center; gap: .9rem;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
.atl-step:first-child { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.atl-step .atl-step-icon {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 50%;
    background: #fff; color: var(--atl-primary);
    display:flex; align-items:center; justify-content:center;
    border: 1px solid var(--atl-primary-100);
}
.atl-step .atl-step-icon .mdi { font-size: 24px; }
.atl-step .atl-step-num { font-size: 1.5rem; font-weight: 800; color: var(--atl-primary-darker); line-height: 1; }
.atl-step .atl-step-num small { font-size: .7rem; font-weight: 700; color: var(--atl-muted); display:block; }
.atl-step .atl-step-label { font-size: .82rem; color: var(--atl-ink-2); font-weight: 600; }
/* Arriving step: two clickable counts (Next 15 Days / Next 7 Days) */
.atl-step.atl-step-arriving { flex: 1.35 1 0; min-width: 232px; }
.atl-step .atl-arriving-split { display: flex; align-items: stretch; gap: .25rem; margin-bottom: 2px; }
.atl-step .atl-arriving-part {
    display: flex; flex-direction: column; line-height: 1.05;
    padding: 1px 9px 2px; border-radius: 8px; cursor: pointer;
    transition: background .15s ease;
}
.atl-step .atl-arriving-part:hover { background: #fff; }
.atl-step .atl-arriving-part + .atl-arriving-part { border-left: 1px solid var(--atl-primary-100); }
.atl-step .atl-arriving-num { font-size: 1.35rem; font-weight: 800; color: var(--atl-primary-darker); }
.atl-step .atl-arriving-cap { font-size: .62rem; font-weight: 700; color: var(--atl-muted); white-space: nowrap; }

/* ---- list rows (New Updates / Recent Activity) ---- */
.atl-list { list-style: none; margin: 0; padding: 0; }
.atl-list li {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--atl-border);
}
.atl-list li:last-child { border-bottom: none; }

/* ---- Customer profile page ---- */
.atl-theme .atl-profile-head {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--atl-border);
}
.atl-theme .atl-profile-avatar {
    width: 60px; height: 60px; flex: 0 0 60px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--atl-primary-light); color: var(--atl-primary);
}
.atl-theme .atl-profile-avatar .mdi { font-size: 32px; }
.atl-theme .atl-profile-name { font-size: 1.15rem; font-weight: 800; color: var(--atl-ink); line-height: 1.2; }
.atl-theme .atl-profile-sub { font-size: .85rem; color: var(--atl-muted); font-weight: 500; }
.atl-theme .atl-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.atl-theme .atl-profile-item { display: flex; flex-direction: column; gap: 3px; }
.atl-theme .atl-profile-item--wide { grid-column: 1 / -1; }
.atl-theme .atl-profile-label { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--atl-muted); }
.atl-theme .atl-profile-value { font-size: .95rem; font-weight: 600; color: var(--atl-ink); word-break: break-word; }
@media (max-width: 575.98px) { .atl-theme .atl-profile-grid { grid-template-columns: 1fr; } }
.atl-theme .atl-profile-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--atl-border); }
.atl-theme .atl-link-action { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--atl-primary); text-decoration: none; }
.atl-theme .atl-link-action:hover { text-decoration: underline; color: var(--atl-primary-dark); }
.atl-theme .atl-link-action .mdi { font-size: 1.2rem; }
/* Change Password popup: up to 800px wide, fluid below that */
.atl-theme #changePasswordModal .modal-dialog {
    max-width: 800px;
    width: calc(100% - 3.5rem);
    margin: 1.75rem auto;
}
@media (max-width: 575.98px) {
    .atl-theme #changePasswordModal .modal-dialog { width: calc(100% - 1rem); margin: .5rem auto; }
}
/* scrollable list (e.g. Recent Activity): fixed height showing ~3 rows, the rest
   scroll; the scrollbar stays hidden until the pointer is over the list. */
.atl-theme .atl-list--scroll {
    max-height: 210px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.atl-theme .atl-list--scroll:hover { scrollbar-color: var(--atl-border-2) transparent; }
.atl-theme .atl-list--scroll::-webkit-scrollbar { width: 8px; }
.atl-theme .atl-list--scroll::-webkit-scrollbar-track { background: transparent; }
.atl-theme .atl-list--scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.atl-theme .atl-list--scroll:hover::-webkit-scrollbar-thumb { background: var(--atl-border-2); }
.atl-list .atl-list-idx { color: var(--atl-muted); font-weight: 700; width: 22px; }
.atl-list .atl-list-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--atl-primary-light); color: var(--atl-primary);
    display:flex; align-items:center; justify-content:center;
}
.atl-list .atl-list-icon .mdi { font-size: 20px; }
.atl-list .atl-list-text { flex: 1 1 auto; color: var(--atl-ink-2); font-weight: 600; }
.atl-list .atl-list-value { font-weight: 800; color: var(--atl-primary-darker); font-size: 1.15rem; white-space: nowrap; }
.atl-list .atl-list-value small { font-size: .7rem; color: var(--atl-muted); font-weight: 700; }

/* ---- invoice summary tiles ---- */
/* Invoices panel — stat tiles that stretch to fill the card height (no wasted space) */
.atl-card:has(> .atl-card-body > .atl-inv-grid) { display: flex; flex-direction: column; }
.atl-card-body:has(> .atl-inv-grid) { display: flex; flex-direction: column; flex: 1 1 auto; }
.atl-inv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 1rem;
    padding: .5rem .25rem .25rem;
    flex: 1 1 auto;
}
.atl-inv-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--atl-border);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.atl-inv-item:hover { text-decoration: none; color: inherit; }
.atl-inv-item:hover {
    box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
    border-color: var(--atl-border-2);
}
.atl-inv-item .atl-list-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--atl-primary-light);
    color: var(--atl-primary);
}
.atl-inv-item .atl-list-icon .mdi { font-size: 23px; }
.atl-inv-item .atl-inv-label { color: var(--atl-muted); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.atl-inv-item .atl-inv-value { color: var(--atl-ink); font-size: 1.4rem; font-weight: 800; margin-top: 3px; }
/* colour-code each metric */
.atl-inv-item:nth-child(1) .atl-list-icon { background: #EFF6FF; color: #2563EB; } /* receivables - blue  */
.atl-inv-item:nth-child(2) .atl-list-icon { background: #FFFBEB; color: #D97706; } /* due 7 days  - amber */
.atl-inv-item:nth-child(3) .atl-list-icon { background: #FEF2F2; color: #DC2626; } /* overdue     - red   */
.atl-inv-item:nth-child(4) .atl-list-icon { background: #ECFDF5; color: #059669; } /* storage     - green */
/* 3-tile Invoices layout: the headline (Total Accounts Receivables) spans the full width */
.atl-theme .atl-inv-grid > .atl-inv-item:first-child { grid-column: 1 / -1; }

/* Incurring Storage: Storage Payment Fees summary bar (total of the table), pinned to the card bottom */
.atl-theme .atl-card:has(.atl-storage-summary) { display: flex; flex-direction: column; }
.atl-theme .atl-card:has(.atl-storage-summary) > .atl-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.atl-theme .atl-storage-summary {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 2px;
    padding: 12px 16px;
    background: var(--atl-primary-light);
    border: 1px solid var(--atl-border);
    border-radius: 12px;
}
.atl-theme .atl-storage-summary-icon {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #ECFDF5; color: #059669;
}
.atl-theme .atl-storage-summary-icon .mdi { font-size: 22px; }
.atl-theme .atl-storage-summary-label { flex: 1 1 auto; font-size: .85rem; font-weight: 600; color: var(--atl-muted); }
.atl-theme .atl-storage-summary-value { font-size: 1.4rem; font-weight: 800; color: var(--atl-ink); font-variant-numeric: tabular-nums; }
/* keep the storage summary comfortably above the table rows on small screens */
@media (max-width: 575.98px) {
    .atl-theme .atl-storage-summary { flex-wrap: wrap; }
    .atl-theme .atl-storage-summary-value { font-size: 1.2rem; }
}

/* ---- incurring storage table ---- */
.atl-storage-table { width: 100%; border-collapse: collapse; }
.atl-storage-table th, .atl-storage-table td { padding: .7rem .75rem; text-align: right; font-size: .85rem; }
.atl-storage-table th:first-child, .atl-storage-table td:first-child { text-align: left; }
.atl-storage-table thead th { color: var(--atl-muted); font-weight: 700; border-bottom: 1px solid var(--atl-border); }
.atl-storage-table tbody td { border-bottom: 1px solid var(--atl-border); }
.atl-storage-table tbody td:first-child { color: var(--atl-primary-darker); font-weight: 700; }
.atl-storage-table tbody td:last-child,
.atl-storage-table tfoot td { font-weight: 800; color: var(--atl-primary-darker); }
.atl-storage-table tfoot td { border-top: 2px solid var(--atl-border); }

/* responsive */
@media (max-width: 991px) {
    .atl-inv-grid { grid-template-columns: 1fr; }
    .atl-search { max-width: none; }
}

/* ============================================================================
   HEADER HARDENING / OVERRIDES
   High-specificity fixes that neutralise the legacy horizontal-layout navbar
   sizing and guarantee the new top bar renders correctly.
   ========================================================================== */
.atl-theme .navbar.horizontal-layout {
    height: auto !important;
    min-height: 0 !important;
    background: #fff !important;
    padding: .35rem 0 !important;
    display: block !important;
}
.atl-theme .navbar.horizontal-layout > .container {
    display: block !important;
    max-width: 100% !important;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 0 !important;
}
.atl-theme .navbar.horizontal-layout .atl-topbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    width: 100%;
    padding: .5rem 0;
    margin: 0;
}
.atl-theme .navbar.horizontal-layout .atl-brand {
    flex: 0 0 auto;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
    line-height: normal;
}
/* logo: force a small, contained size regardless of the source image */
.atl-theme .navbar.horizontal-layout .atl-brand img {
    height: 46px !important;
    width: auto !important;
    max-width: 72px !important;
    object-fit: contain !important;
    margin: 0 !important;
}
.atl-theme .navbar.horizontal-layout .atl-brand .atl-brand-name {
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1.05;
    color: var(--atl-ink);
}
.atl-theme .navbar.horizontal-layout .atl-search { flex: 1 1 auto; min-width: 0; }
.atl-theme .navbar.horizontal-layout .atl-topbar-actions { flex: 0 0 auto; }

/* the legacy menu-wrapper white text no longer wraps our actions, but guard anyway */
.atl-theme .atl-topbar-actions,
.atl-theme .atl-topbar-actions * { color: var(--atl-ink-2); }
.atl-theme .atl-user-chip .atl-user-name { color: var(--atl-ink); }

/* nav row sits below the top bar, left aligned, no legacy centering; full width */
.atl-theme .navbar.horizontal-layout .nav-bottom { width: 100%; }
.atl-theme .navbar.horizontal-layout .nav-bottom > .container {
    max-width: 100% !important;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: #fff;
}
/* override legacy .page-navigation { background:#f9f9fc } (style.css) -> white */
.atl-theme .navbar.horizontal-layout .nav-bottom .page-navigation,
.atl-theme .navbar.horizontal-layout .nav-bottom > .container { background: #fff !important; }
/* horizontally + vertically centered pill row (neutralise legacy float + padding) */
.atl-theme .navbar.horizontal-layout .nav-bottom .page-navigation.atl-pillnav {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    justify-content: center !important;
    float: none !important;
    margin: 0 auto !important;
    padding: .5rem 0 !important;
}
.atl-theme .atl-pillnav > .nav-item { display: flex; align-items: center; margin: 0; }
/* legacy forces each nav-item to width:14% + divider border, which spreads the
   menu edge-to-edge; let pills size to content so they cluster in the centre */
.atl-theme .navbar.horizontal-layout .nav-bottom .page-navigation.atl-pillnav > .nav-item {
    width: auto !important;
    border-right: none !important;
    text-align: left;
}

/* ============================================================================
   COLOR LAYOUT: blue top header, white menu, white overview, grey panels
   ========================================================================== */
/* top header bar = blue (full width); menu row = white */
.atl-theme .navbar.horizontal-layout {
    background: var(--atl-primary-light) !important;
    border-bottom: 1px solid var(--atl-primary-100) !important;
    box-shadow: var(--atl-shadow-sm);
}
.atl-theme .navbar.horizontal-layout .nav-bottom {
    background: #fff;
    box-shadow: var(--atl-shadow-sm);
    padding: .2rem 0;
}
/* top-bar content on light-blue header -> dark text + white controls */
.atl-theme .navbar.horizontal-layout .atl-brand .atl-brand-name { color: var(--atl-ink); }
.atl-theme .navbar.horizontal-layout .atl-topbar-actions,
.atl-theme .navbar.horizontal-layout .atl-topbar-actions * { color: var(--atl-ink-2); }
.atl-theme .navbar.horizontal-layout .atl-user-chip { border-left-color: var(--atl-border); }
.atl-theme .navbar.horizontal-layout .atl-user-chip .atl-user-name { color: var(--atl-ink); }
.atl-theme .navbar.horizontal-layout .atl-user-chip .atl-user-sub { color: var(--atl-muted); }
.atl-theme .navbar.horizontal-layout .atl-icon-btn {
    background: #fff;
    border-color: var(--atl-border-2);
    color: var(--atl-ink-2);
}
.atl-theme .navbar.horizontal-layout .atl-icon-btn .mdi { color: var(--atl-primary); }
.atl-theme .navbar.horizontal-layout .atl-user-chip .atl-avatar {
    background: #fff; color: var(--atl-primary); border-color: var(--atl-primary-100);
}

/* dashboard body: overview = white, everything below = grey */
.atl-theme .atl-dash { background: var(--atl-app-bg); }
.atl-theme .atl-dash-overview { background: #fff; padding: 1.25rem 0 1.5rem; }
.atl-theme .atl-dash-overview .atl-section-title { margin-top: 0; }
.atl-theme .atl-dash-panels { background: transparent; padding: 1.5rem 0 2.25rem; }

/* stepper polish: taller chevrons + bigger icon/number to match the mockup */
.atl-theme .atl-stepper { gap: 6px; align-items: stretch; overflow-x: auto; }
.atl-theme .atl-step {
    min-height: 96px;
    min-width: 190px;
    padding: 0 1.1rem 0 2.15rem;
    align-items: center;
    border: none;
    background: var(--atl-primary-light);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}
.atl-theme .atl-step:first-child {
    padding-left: 1.35rem;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.atl-theme .atl-step .atl-step-icon { width: 54px; height: 54px; flex: 0 0 54px; }
.atl-theme .atl-step .atl-step-icon .mdi { font-size: 27px; }
.atl-theme .atl-step .atl-step-num { font-size: 1.75rem; line-height: 1.05; }
.atl-theme .atl-step .atl-step-num small { display: inline; margin-left: 3px; font-size: .6rem; }
.atl-theme .atl-step .atl-step-label { font-size: .85rem; margin-top: 3px; }

/* ============================================================================
   TYPOGRAPHY (match mockup) - clean geometric sans (Inter, loaded in layout)
   ========================================================================== */
body.atl-theme,
.atl-theme .navbar.horizontal-layout,
.atl-theme .atl-dash,
.atl-theme .atl-card,
.atl-theme .atl-pillnav,
.atl-theme .atl-step,
.atl-theme .atl-storage-table {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.atl-theme .atl-section-title,
.atl-theme .atl-card-head h3 { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.01em; }
.atl-theme .atl-pillnav .nav-link { font-weight: 600; letter-spacing: .1px; }
.atl-theme .atl-step-num,
.atl-theme .atl-list-value,
.atl-theme .atl-inv-value { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ============================================================================
   FILTER "Reset" control -> grey button (same shape as the blue Search button)
   ========================================================================== */
/* colours only — inherit .btn padding / height / border-radius so it exactly
   matches the Search button that sits beside it */
.atl-theme a.btn-soft-grey,
.atl-theme .btn.btn-soft-grey {
    background: #EEF1F5 !important;
    color: var(--atl-ink-2) !important;
    border: 1px solid var(--atl-border-2) !important;
    font-weight: 600;
    font-style: normal !important;
    text-decoration: none !important;
    cursor: pointer;
}
/* keep the mdi icon the same visual size as the Search button's fa icon so the
   button heights stay identical (mdi defaults to ~24px) */
.atl-theme .btn.btn-soft-grey .mdi {
    font-size: 1rem !important;
    line-height: 1 !important;
    vertical-align: middle;
}
/* collapsible card headers (New Updates / Recent Activity) */
.atl-theme .atl-card-head.atl-collapsible { cursor: pointer; }
.atl-theme .atl-card-head.atl-collapsible .mdi { transition: transform .15s ease; }
.atl-theme a.btn-soft-grey:hover,
.atl-theme .btn.btn-soft-grey:hover { background: #E2E6EC !important; color: var(--atl-ink) !important; }
/* request-form reset buttons (btn-warning / btn-secondary) -> grey */
.atl-theme #ResetSearchRequests,
.atl-theme #btnReset {
    background: #EEF1F5 !important;
    color: var(--atl-ink-2) !important;
    border: 1px solid var(--atl-border-2) !important;
}
.atl-theme #ResetSearchRequests:hover,
.atl-theme #btnReset:hover { background: #E2E6EC !important; color: var(--atl-ink) !important; }
/* keep the mdi refresh icon from inflating the button height (mdi defaults ~24px) */
.atl-theme #ResetSearchRequests .mdi,
.atl-theme #btnReset .mdi { font-size: 1rem !important; line-height: 1 !important; vertical-align: middle; }

/* ============================================================================
   TABLE ACTION ICON BUTTONS — round, colour-coded by action.
   Targets the button/link by the icon it contains (icons are NOT changed):
     View = blue, Edit = grey, Delete = red, Download = green.
   Uses :has() (supported in current Chrome/Edge/Firefox/Safari; older browsers
   simply keep the previous style).
   ========================================================================== */
.atl-theme td :is(a, button):has(> .fa-eye),
.atl-theme td :is(a, button):has(> .fa-edit),
.atl-theme td :is(a, button):has(> .fa-pencil),
.atl-theme td :is(a, button):has(> .mdi-pencil),
.atl-theme td :is(a, button):has(> .mdi-pencil-outline),
.atl-theme td :is(a, button):has(> .fa-trash),
.atl-theme td :is(a, button):has(> .fa-trash-o),
.atl-theme td :is(a, button):has(> .fa-download),
.atl-theme td :is(a, button):has(> .fa-cloud-download),
.atl-theme td :is(a, button):has(> .mdi-download),
.atl-theme td :is(a, button):has(> .mdi-cloud-download) {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: none !important;
    line-height: 1;
    vertical-align: middle;
}
.atl-theme td :is(a, button):has(> .fa) > .fa,
.atl-theme td :is(a, button):has(> .mdi) > .mdi {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
/* View = blue */
.atl-theme td :is(a, button):has(> .fa-eye) { background: #2563EB !important; }
/* Edit = grey */
.atl-theme td :is(a, button):has(> .fa-edit),
.atl-theme td :is(a, button):has(> .fa-pencil),
.atl-theme td :is(a, button):has(> .mdi-pencil),
.atl-theme td :is(a, button):has(> .mdi-pencil-outline) { background: #6B7280 !important; }
/* Delete = red */
.atl-theme td :is(a, button):has(> .fa-trash),
.atl-theme td :is(a, button):has(> .fa-trash-o) { background: #DC2626 !important; }
/* Download = green */
.atl-theme td :is(a, button):has(> .fa-download),
.atl-theme td :is(a, button):has(> .fa-cloud-download),
.atl-theme td :is(a, button):has(> .mdi-download),
.atl-theme td :is(a, button):has(> .mdi-cloud-download) { background: #16A34A !important; }
/* hover: subtle darken */
.atl-theme td :is(a, button):has(> .fa-eye):hover,
.atl-theme td :is(a, button):has(> .fa-edit):hover,
.atl-theme td :is(a, button):has(> .fa-pencil):hover,
.atl-theme td :is(a, button):has(> .mdi-pencil):hover,
.atl-theme td :is(a, button):has(> .fa-trash):hover,
.atl-theme td :is(a, button):has(> .fa-download):hover,
.atl-theme td :is(a, button):has(> .fa-cloud-download):hover,
.atl-theme td :is(a, button):has(> .mdi-download):hover,
.atl-theme td :is(a, button):has(> .mdi-cloud-download):hover { filter: brightness(0.92); }

/* ============================================================================
   RESPONSIVE HARDENING — keep header, nav and stepper from breaking at
   intermediate widths.
   ========================================================================== */
/* large tablet / small desktop: shrink chevron steps so they don't overflow */
@media (max-width: 1199.98px) {
    .atl-theme .atl-step { min-width: 160px; padding: 0 .8rem 0 1.7rem; }
    .atl-theme .atl-step .atl-step-icon { width: 46px; height: 46px; flex: 0 0 46px; }
    .atl-theme .atl-step .atl-step-icon .mdi { font-size: 23px; }
    .atl-theme .atl-step .atl-step-num { font-size: 1.45rem; }
    .atl-theme .atl-step .atl-step-label { font-size: .78rem; }
}
/* tablet: wrap the stepper to 2 per row instead of a horizontal scrollbar */
@media (max-width: 991.98px) {
    .atl-theme .atl-stepper { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
    .atl-theme .atl-step { flex: 1 1 46%; min-width: 46%; }
    .atl-theme .navbar.horizontal-layout > .container,
    .atl-theme .navbar.horizontal-layout .nav-bottom > .container {
        padding-left: 1rem; padding-right: 1rem;
    }
}
/* phones: header row can wrap; steps become plain full-width cards (no chevron) */
@media (max-width: 767.98px) {
    .atl-theme .navbar.horizontal-layout .atl-topbar { flex-wrap: wrap; gap: .5rem; }
    .atl-theme .atl-step {
        flex: 1 1 100%; min-width: 100%;
        -webkit-clip-path: none !important; clip-path: none !important;
        border: 1px solid var(--atl-primary-100);
        border-radius: var(--atl-radius-sm);
        padding: .85rem 1rem;
    }
    .atl-theme .atl-pillnav { gap: .35rem; }
    .atl-theme .atl-pillnav .nav-link { padding: .45rem .7rem !important; }
}

/* ============================================================================
   FILTER CONTROLS — keep inputs / selects / select2 / date groups inside their
   grid cell (they were overflowing on wide screens).
   ========================================================================== */
.atl-theme .filter-grid { min-width: 0; }
.atl-theme .filter-field { min-width: 0; }
.atl-theme .filter-field .form-group { width: 100%; min-width: 0; margin-bottom: 0; }
.atl-theme .filter-field .form-control,
.atl-theme .filter-field .form-select,
.atl-theme .filter-field .custom-select,
.atl-theme .filter-field .input-group,
.atl-theme .filter-field .select2,
.atl-theme .filter-field .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
/* select2 single-select box + its inner text should never exceed the cell */
.atl-theme .select2-container { max-width: 100% !important; box-sizing: border-box; }
.atl-theme .select2-container--default .select2-selection--single { width: 100% !important; box-sizing: border-box; }
.atl-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* native form-select arrow shouldn't push width either */
.atl-theme .filter-field .form-select { padding-right: 2rem; background-position: right .6rem center; }
/* date/input-group: keep the text field and calendar icon on ONE line.
   (the field must flex, not take the full 100% which pushes the icon down) */
.atl-theme .filter-field .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
.atl-theme .filter-field .input-group > .form-control {
    width: 1% !important;
    flex: 1 1 auto;
    min-width: 0;
}
.atl-theme .filter-field .input-group > .input-group-append,
.atl-theme .filter-field .input-group > .input-group-addon {
    flex: 0 0 auto;
    width: auto !important;
    display: flex;
    align-items: center;
}

/* ============================================================================
   TEXT ACTION BUTTONS — "Remove" (red) and "View Detail" (solid blue button)
   ========================================================================== */
/* Remove / delete text buttons -> red (they carry the .delete-button class) */
.atl-theme .delete-button,
.atl-theme button.delete-button,
.atl-theme a.delete-button {
    background: #DC2626 !important;
    border: 1px solid #DC2626 !important;
    color: #fff !important;
}
.atl-theme .delete-button:hover { background: #B91C1C !important; border-color: #B91C1C !important; color: #fff !important; }

/* View Detail links -> solid blue button (covers plain text links and outline buttons) */
.atl-theme a[onclick*="openPricesPopup"],
.atl-theme a[onclick*="openRequestDetailPopup"] {
    display: inline-block !important;
    background: #2563EB !important;
    color: #fff !important;
    padding: .35rem .9rem !important;
    border-radius: 8px !important;
    border: 1px solid #2563EB !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.4;
}
.atl-theme a[onclick*="openPricesPopup"]:hover,
.atl-theme a[onclick*="openRequestDetailPopup"]:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #fff !important;
}

/* size the icons inside the Remove / View Detail / Preview text buttons so they
   sit neatly beside the label (mdi defaults to ~24px) */
.atl-theme .delete-button > .mdi,
.atl-theme a[onclick*="openPricesPopup"] > .mdi,
.atl-theme a[onclick*="openRequestDetailPopup"] > .mdi,
.atl-theme #previewButton > .mdi,
.atl-theme .btn.btn-save > .mdi {
    font-size: 1rem !important;
    line-height: 1 !important;
    vertical-align: middle;
    margin-right: 4px;
}

/* ============================================================================
   Grey Close / Cancel buttons -> white label + icon (were showing blue on grey,
   because the theme colours <a> links blue). Applies app-wide.
   ========================================================================== */
.atl-theme .btn-secondary,
.atl-theme a.btn-secondary,
.atl-theme .btn-cancel,
.atl-theme a.btn-cancel {
    color: #fff !important;
}
.atl-theme .btn-secondary:hover,
.atl-theme a.btn-secondary:hover,
.atl-theme .btn-cancel:hover,
.atl-theme a.btn-cancel:hover { color: #fff !important; }
.atl-theme .btn-secondary .mdi, .atl-theme .btn-secondary .fa,
.atl-theme .btn-cancel .mdi, .atl-theme .btn-cancel .fa { color: #fff !important; }

/* "View" detail link in tables -> solid blue button with eye icon (not a circle) */
.atl-theme td a.btn-view-detail {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: .35rem .8rem !important;
    border-radius: var(--atl-radius-sm) !important;
    color: #fff !important;
}
.atl-theme td a.btn-view-detail > .mdi {
    font-size: 15px !important;
    color: #fff !important;
    margin: 0 !important;
}

/* Legacy "View" detail buttons still using btn-outline-primary in tables ->
   solid blue button + eye icon (via ::before), matching the themed View button.
   Scoped to detail links so other outline buttons are untouched. */
.atl-theme td a.btn-outline-primary[href*="etail"],
.atl-theme td button.btn-outline-primary[onclick*="etail"] {
    background: var(--atl-primary) !important;
    border-color: var(--atl-primary) !important;
    color: #fff !important;
    border-radius: var(--atl-radius-sm) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: .35rem .8rem !important;
    white-space: nowrap;
}
.atl-theme td a.btn-outline-primary[href*="etail"]:hover,
.atl-theme td button.btn-outline-primary[onclick*="etail"]:hover {
    background: var(--atl-primary-dark) !important;
    border-color: var(--atl-primary-dark) !important;
    color: #fff !important;
}
.atl-theme td a.btn-outline-primary[href*="etail"]::before,
.atl-theme td button.btn-outline-primary[onclick*="etail"]::before {
    font-family: "Material Design Icons";
    content: "\F208"; /* mdi-eye */
    font-size: 15px;
    line-height: 1;
    font-weight: normal;
}

/* ============================================================================
   EXPORT (to Excel) and DOWNLOAD buttons -> green (app-wide)
   ========================================================================== */
/* DataTables "Export to Excel" buttons (default .dt-button / buttons-*) */
.atl-theme .dt-buttons .dt-button,
.atl-theme button.dt-button,
.atl-theme a.dt-button,
.atl-theme .dt-button.buttons-csv,
.atl-theme .dt-button.buttons-excel,
.atl-theme .dt-button.buttons-html5,
.atl-theme .buttons-excel,
.atl-theme .buttons-csv {
    background: #16A34A !important;
    background-image: none !important;
    border: 1px solid #16A34A !important;
    color: #fff !important;
    border-radius: var(--atl-radius-sm) !important;
    box-shadow: none !important;
    padding: .4rem .9rem !important;
    font-weight: 600;
}
.atl-theme .dt-buttons .dt-button:hover,
.atl-theme button.dt-button:hover,
.atl-theme .dt-button.buttons-html5:hover,
.atl-theme .buttons-excel:hover,
.atl-theme .buttons-csv:hover {
    background: #15803D !important;
    border-color: #15803D !important;
    color: #fff !important;
}
.atl-theme .dt-button .mdi,
.atl-theme .dt-button .fa { color: #fff !important; font-size: 1rem !important; }

/* Download buttons (e.g. "Download PDF") -> same green */
.atl-theme a[title*="Download"],
.atl-theme button[title*="Download"],
.atl-theme a[title*="download"],
.atl-theme button[title*="download"] {
    background: #16A34A !important;
    border-color: #16A34A !important;
    color: #fff !important;
}
.atl-theme a[title*="Download"] .mdi,
.atl-theme button[title*="Download"] .mdi,
.atl-theme a[title*="download"] .mdi { color: #fff !important; }

/* ============================================================================
   .btn-save (Add / Save / Preview actions) -> themed blue button so Add buttons
   are consistent across the app.
   ========================================================================== */
.atl-theme .btn-save {
    background: var(--atl-primary) !important;
    border: 1px solid var(--atl-primary) !important;
    color: #fff !important;
    border-radius: var(--atl-radius-sm) !important;
    box-shadow: none !important;
}
.atl-theme .btn-save:hover {
    background: var(--atl-primary-dark) !important;
    border-color: var(--atl-primary-dark) !important;
    color: #fff !important;
}
.atl-theme .btn-save .mdi, .atl-theme .btn-save .fa { color: #fff !important; }

/* modal footer: right-aligned buttons with spacing (bootstrap convention) */
.atl-theme .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid var(--atl-border);
    padding: .8rem 1.1rem;
}

/* Preview Freight Estimate modal — force standard, well-behaved Bootstrap modal
   so header + scrollable body + fixed footer all stay visible. This page ships
   an inline height:670px on .modal plus a forced-scroll body that clipped the
   footer; the rules below neutralise those and restore canonical behaviour. */
.atl-theme #previewModal.modal {
    height: 100% !important;
    overflow-y: auto !important;
}
.atl-theme #previewModal .modal-dialog {
    max-width: 720px !important;
    width: auto !important;
    margin: 1.75rem auto !important;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.atl-theme #previewModal .modal-content {
    width: 100%;
    max-height: calc(100vh - 3.5rem);
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}
.atl-theme #previewModal .modal-header,
.atl-theme #previewModal .modal-footer {
    flex: 0 0 auto;
}
.atl-theme #previewModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
}
.atl-theme #previewModal .modal-footer {
    display: flex !important;
    justify-content: flex-end;
    gap: .5rem;
}

/* Modal close (x): remove legacy red hover background; keep a clean,
   borderless x that tints to the theme blue on hover. */
.atl-theme .modal-header .close,
.atl-theme .modal-dialog button.close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: .7;
    color: #6a6a6a !important;
}
.atl-theme .modal-header .close:hover,
.atl-theme .modal-dialog button.close:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--atl-primary) !important;
    opacity: 1;
}
.atl-theme .modal-dialog button.close span,
.atl-theme .modal-dialog button.close:hover span,
.atl-theme .modal-header .close span {
    color: inherit !important;
}

/* ---- Page breadcrumb (small, right of the page heading) ---- */
/* A heading that hosts a breadcrumb becomes a flex row; the crumb is
   pushed to the far right with margin-left:auto so the title text stays put. */
.atl-theme .atl-has-breadcrumb {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem 1rem;
}
.atl-theme .atl-breadcrumb {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .01em;
    text-transform: none;
    color: #6b7280;
    white-space: nowrap;
}
.atl-theme .atl-breadcrumb a {
    color: var(--atl-primary);
    text-decoration: none;
    font-weight: 500;
}
.atl-theme .atl-breadcrumb a:hover { text-decoration: underline; }
.atl-theme .atl-breadcrumb .sep {
    color: #c2c8d0;
    font-weight: 400;
    padding: 0 .05rem;
}
.atl-theme .atl-breadcrumb .crumb-current {
    color: #374151;
    font-weight: 600;
}
/* fallback bar when a page has no detectable heading */
.atl-theme .atl-breadcrumb-bar {
    display: flex;
    justify-content: flex-end;
    padding: .1rem 0 .4rem;
}
.atl-theme .atl-breadcrumb-bar .atl-breadcrumb { margin-left: 0; }

/* =====================================================================
   Top-section polish (freight/listing pages)
   ===================================================================== */

/* 1) Bordered form panel — gives form pages (e.g. Get Freight Estimate)
      the same carded/bordered look as the Search block. */
.atl-theme .atl-form-panel {
    border: 1px solid var(--atl-border);
    border-radius: 10px;
    padding: 22px 22px 8px;
    margin-top: 14px;
    background: #fff;
}
/* even row rhythm inside the form panel — one consistent gap between rows,
   equal control heights (kills the old inline margin-top:-35px hacks) */
.atl-theme .atl-form-panel > .row { margin-bottom: 18px; }
.atl-theme .atl-form-panel > .row:last-child { margin-bottom: 0; }
.atl-theme .atl-form-panel .form-group { margin-bottom: 0; }
.atl-theme .atl-form-panel .form-select,
.atl-theme .atl-form-panel .form-control { height: 42px; }

/* 2) Tighten the gaps: page heading -> Add New -> Search block */
.atl-theme .content-wrapper .AddStock {
    margin-top: .35rem !important;
    margin-bottom: .75rem !important;
}
.atl-theme .content-wrapper .AddStock + .mt-4 { margin-top: .25rem !important; }

/* 3) Filter icon in the Search accordion heading (covers #accordion and the
      dashboard-popup accordions #accordion1..#accordion5) */
.atl-theme [id^="accordion"] .card-header h6 > a::before {
    font-family: "Material Design Icons";
    content: "\F236"; /* mdi-filter-variant */
    margin-right: .45rem;
    font-size: 1.05rem;
    line-height: 1;
    vertical-align: -2px;
    color: var(--atl-primary);
    -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   Page heading row: title on the left, Add New / Create button on the
   right (same row). Applied via the .atl-page-head wrapper.
   ===================================================================== */
.atl-theme .atl-page-head {
    display: flex;
    align-items: center;
    gap: .4rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
/* heading takes the full first row so the Add New button wraps to a second row */
.atl-theme .atl-page-head > :is(h1, h2, h3, h4, h5) {
    margin: 0 !important;
    flex: 1 1 100%;
}
.atl-theme .atl-page-head .atl-add-btn {
    margin-left: auto;   /* right-align on the second row */
    flex: 0 0 auto;
    white-space: nowrap;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =====================================================================
   Extend the round action-icon treatment to mdi-eye (View = blue) and
   mdi-delete (Delete = red) now that those table buttons are icon-only.
   Appended last so it wins over the legacy .btn-view-detail / .delete-button
   rectangle styles by source order.
   ===================================================================== */
.atl-theme td :is(a, button):has(> .mdi-eye),
.atl-theme td :is(a, button):has(> .mdi-delete) {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    margin: 2px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: none !important;
    line-height: 1;
    vertical-align: middle;
}
.atl-theme td :is(a, button):has(> .mdi-eye) > .mdi,
.atl-theme td :is(a, button):has(> .mdi-delete) > .mdi {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.atl-theme td :is(a, button):has(> .mdi-eye) { background: #2563EB !important; }
.atl-theme td :is(a, button):has(> .mdi-delete) { background: #DC2626 !important; }
.atl-theme td :is(a, button):has(> .mdi-eye):hover,
.atl-theme td :is(a, button):has(> .mdi-delete):hover { filter: brightness(0.92); }

/* =====================================================================
   Dashboard-popup row expand/collapse control (.table-accordion) — the
   partials style it pink (#e98c90); re-theme to a blue round +/- toggle
   so it matches the app's action buttons everywhere it appears.
   ===================================================================== */
.atl-theme .table-accordion {
    background-color: #9CA3AF !important;   /* light grey expand/collapse control */
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.atl-theme .table-accordion:hover,
.atl-theme .active-accordion {
    background-color: #6B7280 !important;    /* slightly darker grey on hover / active */
    color: #fff !important;
}

/* =====================================================================
   Collapsible invoice panels (Invoices > Receivable): each invoice table
   sits in a bordered panel with a clickable header that expands/collapses.
   ===================================================================== */
.atl-theme .atl-inv-panel {
    border: 1px solid var(--atl-border);
    border-radius: 10px;
    margin: 14px 0;
    background: #fff;
    overflow: hidden;
}
.atl-theme .atl-inv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: var(--atl-primary-light);
    border: 0;
    border-bottom: 1px solid var(--atl-border);
    padding: 11px 18px;
    cursor: pointer;
}
.atl-theme .atl-inv-head:focus { outline: none; }
.atl-theme .atl-inv-head h3 {
    margin: 0 !important;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--atl-primary-dark);
    flex: 1 1 auto;
}
/* per-panel summary shown in the collapsible header: record count + total balance */
.atl-theme .atl-inv-meta {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0 1rem 0 auto;
    font-size: .82rem;
    font-weight: 500;
    color: #4B5563;
    white-space: nowrap;
}
.atl-theme .atl-inv-count {
    background: #fff;
    border: 1px solid var(--atl-border);
    border-radius: 999px;
    padding: 2px 12px;
    font-weight: 600;
    color: var(--atl-primary-dark);
}
.atl-theme .atl-inv-balance .currency {
    font-weight: 700;
    color: var(--atl-primary-dark);
    margin-left: .25rem;
}
@media (max-width: 767.98px) {
    .atl-theme .atl-inv-meta { display: none; } /* keep the header tidy on small screens */
}
.atl-theme .atl-inv-caret {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--atl-primary);
    transition: transform .2s ease;
}
.atl-theme .atl-inv-body { padding: 6px 14px 10px; }
.atl-theme .atl-inv-body .table { margin-bottom: 0; }
.atl-theme .atl-inv-panel.collapsed .atl-inv-body { display: none; }
.atl-theme .atl-inv-panel.collapsed .atl-inv-head { border-bottom: 0; }
.atl-theme .atl-inv-panel.collapsed .atl-inv-caret { transform: rotate(180deg); }

/* =====================================================================
   Dashboard chassis-number search box (centered, under the heading).
   Navigates to All Shipments filtered by the entered chassis number.
   ===================================================================== */
.atl-theme .atl-chassis-search {
    display: flex;
    justify-content: center;
    margin: 4px 0 24px;
}
.atl-theme .atl-chassis-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    width: 70%;
    max-width: 70%;
}
.atl-theme .atl-chassis-search-inner .atl-chassis-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--atl-primary);
    pointer-events: none;
}
.atl-theme .atl-chassis-search-inner .form-control {
    flex: 1 1 auto;
    height: 46px;
    padding-left: 42px;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--atl-border-2);
    border-right: none;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.atl-theme .atl-chassis-search-inner .form-control:focus {
    border-color: var(--atl-primary);
    box-shadow: 0 0 0 3px var(--atl-primary-light);
}
.atl-theme .atl-chassis-search-inner .btn {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px;
    border-radius: 0 8px 8px 0;
    white-space: nowrap;
}
.template-demo > .btn {
    margin-top: 0rem !important;
}
@media (max-width: 1280px) {
    .form-group label {
        font-size: 13px;
    }
}