/* Customer Portal CSS for mobile devices (max-width: 767px) */

/* --- Sidebar: slide off-screen to the left by default --- */
.aside {
    margin-left: 16px;
    transform: translateX(calc(-100% - 18px));
    transition: transform 0.3s ease;
    z-index: 200;
}

/* Dark mode: --sidebar-bg is a ~5% white glass tint, meant to sit beside solid desktop
   content. Here the sidebar slides in as an overlay ON TOP of the page, so that near-
   transparent background lets the page content behind it show through. Force a solid,
   opaque surface (matching the sidebar's own logout-button dark shade) instead. */
html.dark .aside {
    background: #1E1E1E;
}

/* Sidebar visible when hamburger opens it */
.aside.sidebar-open {
    transform: translateX(0);
}

/* Sidebar shrunk state on mobile = fully hidden (no compact mode) */
.aside.sidebar-shrunk {
    width: 250px;
    transform: translateX(calc(-100% - 18px));
}

/* --- Overlay: shown when sidebar is open --- */
.sidebar-overlay.active {
    display: block;
}

/* --- Hide desktop shrink toggle buttons --- */
.shrink-out,
.shrink-in,
.collapseButton {
    display: none !important;
}

/* --- Show hamburger button --- */
.hamburger-menu-btn {
    display: flex;
}

/* --- Content: full width (no sidebar offset) --- */
.content {
    margin-left: 16px;
    margin-right: 16px;
}

/* Reset shrunk-sidebar content offset */
.aside.sidebar-shrunk + .wrapper .content {
    margin-left: 16px;
}

/* --- Page header: background spans full width, but the bottom border is inset by the
   same amount as the header's own left/right padding, so it lines up with the content
   instead of running edge-to-edge. Base .page-header's border-bottom is removed and
   replaced with a ::after line positioned inward by that padding amount. --- */
.page-header {
    left: 0;
    right: 0;
    padding-left: 16px;
    padding-right: 16px;
    transition: none;
    border-bottom: none;
}
.page-header::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 0.8px;
    background: var(--header-border);
}

/* Reset shrunk-sidebar page header offset */
.aside.sidebar-shrunk + .wrapper .page-header {
    left: 0;
}

/* --- Header layout: controls row on top, title + subheader below --- */
.page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px;
}

.page-header-controls {
    order: -1;
    width: 100%;
    justify-content: space-between;
}

.page-header .h1,
.page-header .body-medium,
.page-header .welcome-text > span {
    text-align: left !important;
}

/* --- EasyClearJobCreate header: hamburger+toggle become row 1 (space-between),
   title then New Draft stack below it, both left-aligned --- */
.page-header-easyclear-flex {
    /* row-gap would stack on top of the break line's own height below, doubling the
       gap -- the break's height alone provides the row1-to-row2 spacing instead. */
    row-gap: 0;
}
.page-header-easyclear-title {
    order: 4;
    margin-right: 0;
    flex: 1 1 100%;
}
.page-header-easyclear-hamburger {
    order: 1;
    margin-right: auto;
}
.page-header-easyclear-toggle {
    order: 2;
}
.page-header-easyclear-break {
    display: block;
    order: 3;
    flex-basis: 100%;
    height: 24px;
}
.page-header-easyclear-newdraft {
    order: 5;
    margin-left: 0;
    margin-top: 16px;
}

/* --- Show shrink arrow when sidebar is open (tap to close) --- */
.aside.sidebar-open .shrink-out {
    display: flex !important;
}

/* --- Container: reduce desktop's 32px padding to fit narrow mobile viewports --- */
.container {
    padding: 12px;
}

/* --- Dashboard: reduce desktop's 32px padding to fit narrow mobile viewports --- */
.dashboard-container {
    padding: 24px;
}

/* --- Dashboard: Quick actions + language stack vertically, left aligned --- */
.dashboard-container > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* Language dropdown menu is right-0 (opens leftward), which only works when the trigger
   sits at the right edge on desktop. Now that the row above stacks the trigger to the
   left edge, opening leftward pushes half the menu off-screen -- open rightward instead. */
#languageDropdownMenu {
    right: auto;
    left: 0;
}

/* --- Dashboard: stats cards 1 per row on mobile --- */
.tw-grid-cols-3 {
    grid-template-columns: 1fr !important;
}

/* --- Downloads: date range inputs 150px each on mobile --- */
.date-range-row .input {
    width: 150px !important;
}

/* --- Jobs: filter textbox full width on mobile --- */
.jobs-filter-tb {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Jobs: date range stack label + input as column pairs on mobile --- */
/* align-items: flex-start so separator can be positioned via margin-top */
.jobs-date-range {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px;
}
.jobs-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Push separator down to vertically center it on the input:
   label line-height(24) + gap(4) = 28px to input top, input height(48)/2 = 24, minus sep height(24)/2 = 12 → 40px */
.jobs-date-sep {
    margin-top: 40px !important;
    margin-bottom: 0 !important;
}

/* --- CustomsExcel: Start/End Date stack full-width (one per row) instead of sitting
   side by side -- each field's own label-above-input, 8px gap is already handled by
   .input-group-col on the markup, this just stacks the two fields themselves. --- */
.customsExcelDateRange {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
}
.customsExcelDateRange .input-group-col,
.customsExcelDateRange .input {
    width: 100% !important;
}

/* --- AccountDetailsGeneric: Filter By / Account Type / Active filters -- one per row on
   mobile instead of the desktop flex row (which just squeezes all three into one line
   regardless of width). !important needed -- tw-flex sets its own display. --- */
.acc-filters-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
/* The two custom dropdowns (.dropdown-button-selected has a hardcoded 212px inline width,
   .dropdown-button is display:inline-block so it shrinks to that same 212px) stay pinned
   at their desktop width regardless of the grid column now being full-width -- stretch
   both. Scoped to .acc-filters-row since .dropdown-button is a shared component used
   elsewhere too. !important needed to beat the inline width style. */
.acc-filters-row .dropdown-button {
    display: block;
    width: 100%;
}
.acc-filters-row .dropdown-button-selected {
    width: 100% !important;
    box-sizing: border-box;
}

/* CustomerEasyClearPeriods No Contract message: real inline text flow so the email link
   wraps mid-sentence. !important needed -- tw-flex and .text-primary-button both set
   their own display:flex. */
.easyClearNoContract {
    display: block !important;
}
.easyClearNoContract > * {
    display: inline !important;
}

/* --- CustomerEasyClearPeriods: reduce the top gap above this section from 24px to 12px
   on mobile. --- */
.easyClearPeriodsMain {
    margin-top: 0 !important;
}

/* --- Legacy datagrid tables (Products, Regular Job, Job Create, Invoices, KPIs):
   scroll horizontally instead of squeezing/wrapping columns --- */
.clsRoundedTable.datagrid {
    overflow-x: auto;
    overflow-y: hidden;
}
.clsRoundedTable.datagrid::-webkit-scrollbar {
    height: 8px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.clsRoundedTable.datagrid::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.clsRoundedTable.datagrid {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.clsRoundedTable.datagrid table {
    width: auto;
    min-width: 100%;
}
.clsRoundedTable.datagrid table th,
.clsRoundedTable.datagrid table td {
    white-space: nowrap;
}
/* The outer wrapper table has exactly one column (one <td> per row);
   fixed layout stops that cell auto-expanding to the inner table's full
   content width, which would otherwise make the whole page scroll instead
   of just the table. Base .clsOuterTable rule uses table-layout:auto
   !important, so this needs !important too to take effect. */
table.clsOuterTable.plainTable:has(.clsRoundedTable.datagrid) {
    table-layout: fixed !important;
}

/* --- Generic list tables (Live Jobs, KPIs, Recent Invoices, Address Selector, Customs
   Documents, etc.): scroll horizontally instead of squeezing/wrapping columns.
   Scoped via :has(thead.table-head) so only .container divs that actually wrap one of
   these tables are affected -- .container is reused for many non-table layouts across
   the portal, and :has() keeps this rule from touching those.
   NOTE: doesn't cover CustomerStatement.ascx (div-based .table-head, not <thead>) --
   see the .table-scroll rules further down instead. */
.container:has(thead.table-head):not(:has(.table-scroll-outer)) {
    overflow-x: auto;
    overflow-y: hidden;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar {
    height: 8px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer))::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) table {
    width: auto;
    min-width: 100%;
}
.container:has(thead.table-head):not(:has(.table-scroll-outer)) th,
.container:has(thead.table-head):not(:has(.table-scroll-outer)) td {
    white-space: nowrap;
}

/* Belt-and-suspenders for the rule above: :has() nested inside :not() isn't reliably
   supported everywhere, so a .container that has a .table-scroll-outer descendant can
   still incorrectly match .container:has(thead.table-head) and get overflow-y: hidden.
   This re-asserts the correct scroll behavior directly, using only a plain :has(). */
.container:has(.table-scroll-outer) {
    overflow-y: scroll !important;
}

/* Force vertical scroll on a .container regardless of the :has(thead.table-head) rules
   above -- use directly rather than relying on sibling detection, which breaks across
   multi-step flows where visibility toggles at each step. */
.res-force-scroll-y {
    overflow-y: scroll !important;
}

/* Shared table scroll wrapper (Live Jobs, KPIs, Recent Invoices, Address Selector, Customs
   Documents, etc.): scoping overflow-x to .container itself (the generic rule above) drags
   the container's own border/padding box into the scrolling element, and its side borders
   disappear mid-scroll. .table-scroll-outer is a static (non-scrolling) shell: it owns the
   card's visible border/background/radius so that chrome never moves. .container inside it
   is stripped of its own border/background so there's no double border, and stays 100% wide
   (it does NOT grow with the table). .table-scroll is the actual scrolling element -- it
   wraps just the table (and any pager row) so only that inner content scrolls, while the
   outer card stays put. */
/* .table-scroll-outer {
    border-radius: 16px;
    background-color: var(--container-fill);
    border: 1px solid var(--container-border);
    margin-top: var(--margin-top, 32px);
} */
.table-scroll-outer .container {
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-top: 0;
    /* !important: must beat .container:has(thead.table-head):not(:has(.table-scroll-outer))'s overflow-y: hidden,
       whose :has() argument gives it higher specificity than this selector */
    overflow-y: scroll !important;
}
.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /* !important: some .table-scroll usages (e.g. FolderDetail's Files table) carry their
       own inline padding-bottom, which otherwise beats this class regardless of source
       order -- every table's scrollbar should sit at this same distance from its content. */
    padding-bottom: 12px !important;
}
.table-scroll::-webkit-scrollbar {
    height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.table-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.table-scroll table {
    width: auto;
    min-width: 100%;
}
.table-scroll th,
.table-scroll td {
    white-space: nowrap;
}
/* CustomerStatement: div-based grid, not a <table> -- min-width goes on .table-head/
   .table-body (not the grid) so their existing border-bottom spans the full row width. */
.table-scroll .table-head,
.table-scroll .table-body {
    min-width: 960px;
}
/* CustomerStatement: column widths sized per section's content, not equal. */
.table-scroll .tw-grid-cols-12 {
    grid-template-columns: repeat(3, minmax(0, 0.85fr)) repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 1.2fr)) repeat(3, minmax(0, 0.95fr));
}
/* Pager rows (e.g. .ccd-pagination-row) that live inside .table-scroll alongside the
   table: pin them to the left edge of .table-scroll's scrollport so they stay visually
   fixed -- matching the top pagination row, which sits outside .table-scroll entirely and
   never scrolls -- while only the table shifts underneath as it scrolls. */
.table-scroll .ccd-pagination-row {
    position: sticky;
    left: 0;
}

/* EasyClearInvoice: dedicated, :has()-free scroll wrapper for the invoice-lines table.
   The generic .container:has(thead.table-head):not(:has(.table-scroll-outer)) rule above isn't reliably applying (likely
   :has() support), and this .container is also shared with the edit-line form below it, so
   an uncontained table forced the whole page wrapper to scroll horizontally instead of just
   the table. */
.ci-lines-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}
.ci-lines-scroll::-webkit-scrollbar {
    height: 8px;
}
.ci-lines-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.ci-lines-scroll::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.ci-lines-scroll::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.ci-lines-scroll {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}
.ci-lines-scroll table {
    width: auto;
    min-width: 100%;
}
.ci-lines-scroll th,
.ci-lines-scroll td {
    white-space: nowrap;
}
/* Upload-list tables (CustomerCICustomerPhysical/EasyClearPhysicalInvoice): the doc-name
   input and doc-type dropdown use percentage widths, which collapse to unreadable sizes once
   the table's percentage-width columns get squeezed on a narrow mobile viewport. Give them a
   sensible minimum so they render close to their desktop size -- the table's width:auto
   above lets it grow wider than the viewport to fit, and the scrollbar handles the rest. */
.ci-lines-scroll td .input,
.ci-lines-scroll td .c4-dropdown-wrapper {
    min-width: 220px !important;
}

/* --- Vehicle type cards (Quote & Book): 2 per row on mobile ---
   .radio-button-list-card is the <table> itself (RadioButtonList's default render);
   display:flex on a table doesn't blockify its <tbody>/<tr> descendants, so they stay
   table-row-group/table-row and ignore flex sizing. display:contents removes their own
   boxes so the actual flex items become the <td>s, which we then size directly. */
.radio-button-list-card {
    flex-wrap: wrap;
    width: 100%;
}
.radio-button-list-card tbody,
.radio-button-list-card tr {
    display: contents;
}
.radio-button-list-card td {
    display: block;
    flex: 1 1 calc((100% - 16px) / 2);
    box-sizing: border-box;
}
.radio-button-list-card label {
    width: 100%;
}

/* --- Contact cards (CustomerC4Contact): 1 per row on mobile -- .card2 has a fixed
   280px width for desktop's single row, so it needs an explicit override here. --- */
.card2-row {
    flex-wrap: wrap;
}
.card2-row .card2 {
    width: 100%;
}

/* Quote & Book: selected location box (divLocation) keeps its normal height for short text, caps at a 2-line height and scrolls once text is longer */
.locationDescInput {
    height: auto !important;
    max-height: 80px !important;
}

/* Quote & Book: Collect From / Deliver To stack one per row on mobile */
.locationsRow {
    flex-direction: column !important;
}
.locationCol {
    width: 100% !important;
}

/* Quote & Book: Extras (Fridge/Tail Lift/ADR) + Customs checkboxes stack one per row, full width */
.extrasRow {
    flex-direction: column !important;
    gap: 8px !important;
}
.extrasRow .checkbox-card-item label,
.customsChk .checkbox-card-item label {
    width: 100% !important;
}
.customsChk {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Quick Load Def: Delete/Add-Change header buttons space apart instead of a fixed gap */
.loadHeaderRow {
    justify-content: space-between !important;
    gap: 0 !important;
}

/* Quick Load Def: Quantity/Weight/Height/Dimensions rows stack label above input on mobile only */
.loadFieldRow {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

/* Quick Load Def: L/W/H + cms fields, 2 per row on mobile only */
.dimensionsGroup {
    flex-wrap: wrap !important;
}
.dimensionsGroup > * {
    flex: 1 1 calc(50% - 4px) !important;
    box-sizing: border-box !important;
}

/* Collection Dates: calendar scrolls horizontally with a bottom scrollbar instead of being clipped on mobile.
   The control's own <style> block sets .ui-datepicker to width:100% !important, so the override here
   needs matching !important plus extra element selectors to outweigh it regardless of stylesheet order. */
.divCollectionDate {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
html body .divCollectionDate .ui-datepicker {
    width: 480px !important;
    min-width: 480px !important;
}
.divCollectionDate::-webkit-scrollbar {
    height: 8px;
}
.divCollectionDate::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.divCollectionDate::-webkit-scrollbar-thumb {
    background: #00A192;
    border-radius: 4px;
}
.divCollectionDate::-webkit-scrollbar-thumb:hover {
    background: #005540;
}
.divCollectionDate {
    scrollbar-width: thin;
    scrollbar-color: #00A192 transparent;
}

/* Confirm Booking: Collect & Deliver Details stack one per row on mobile only */
.confirmDetailsRow {
    flex-direction: column !important;
}
.confirmDetailsCol {
    width: 100% !important;
}

/* Confirm Booking: Confirm Booking / Confirm Quote / Change buttons stack one per row on mobile only */
.confirmActionsRow {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Forms section: label stacks above the field, mandatory asterisk stays inline next to the
   field, error message wraps to its own full-width line below. */
.onlineCustomsForm div:has(> .input-label-body-medium) {
    flex-wrap: wrap;
}
.onlineCustomsForm div:has(> .input-label-body-medium) > .input-label-body-medium {
    flex: 1 1 100%;
    max-width: none !important;
}
/* Collapse trailing wrapper divs (asterisk/error/dummy) so they never occupy their own flex
   slot, even when empty. Excludes standalone dropdowns and the amount+currency wrapper. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div:not(.c4-dropdown-wrapper):not(:has(> .input)):not(:has(> .c4-dropdown-wrapper)):not(:has(.addressFullClassExtra)) {
    display: contents;
}
/* Vehicle Registration's mandatory wrapper nests an extra div around its two conditional
   error spans (the field doubles as Vehicle Reg / Container Number), one level deeper than
   every other field's flatter wrapper. Even with both spans absent, ASP.NET still renders
   the whitespace between them as text nodes, so it's never :empty -- it still reserves its
   own flex gap, narrowing the input beside it. Collapse it unconditionally instead; its
   error-message children already get their own flex:1 1 100% rule below, same as every
   other field's un-nested error span. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div > div.tw-flex.tw-flex-col {
    display: contents;
}
/* Cap error messages ~18px short of the row's right edge, matching where fields stop for the
   asterisk column. */
.onlineCustomsForm .error-message {
    flex: 1 1 100%;
    max-width: calc(100% - 18px);
}
/* Page-level validation banners, same cap for visual consistency. */
#divError,
#divStage1Error {
    max-width: calc(100% - 18px);
}
.onlineCustomsForm .input,
.onlineCustomsForm .textarea {
    --width: auto !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}
/* Location Search's wrapper (divSearch) needs to grow and share its line with the dummy
   reserve like other fields; basis 0% (not auto) avoids the width:100%-child shrink-to-fit
   ballooning issue that pushed it onto its own line. The input then just fills divSearch. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div:has(.addressFullClassExtra) {
    flex: 1 1 0%;
    min-width: 0;
}
.onlineCustomsForm .addressFullClassExtra {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* asp:ListBox fields are converted at runtime into a .c4-dropdown-wrapper by C4BehaviourNew9.js. */
.onlineCustomsForm .c4-dropdown-wrapper {
    --width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}
/* Freight/Insurance cost: amount+currency share a line with the asterisk; amount stays sized
   to content, currency grows to fill the rest. */
.onlineCustomsForm div:has(> .input):has(> .c4-dropdown-wrapper) {
    flex: 1 1 auto;
    min-width: 0;
}
.onlineCustomsForm div:has(> .input):has(> .c4-dropdown-wrapper) > .input {
    flex: 0 1 auto;
}
.onlineCustomsForm div:has(> .input):has(> .c4-dropdown-wrapper) > .c4-dropdown-wrapper {
    flex: 1 1 0%;
    min-width: 0;
}
/* Export Date/Arrival Date: date field gets a fixed basis so both hours/minutes dropdowns fit
   on the same line and split the remaining space evenly. */
.onlineCustomsForm div:has(> .input-label-body-medium):has(> .c4-dropdown-wrapper ~ .c4-dropdown-wrapper) > .input {
    flex: 0 1 150px;
}
.onlineCustomsForm div:has(> .input-label-body-medium):has(> .c4-dropdown-wrapper ~ .c4-dropdown-wrapper) > .c4-dropdown-wrapper {
    flex: 1 1 0%;
    min-width: 0;
}

/* EasyClearJobCreate: Next/Save/Home/Book Job buttons wrap instead of overflowing on narrow screens. */
.RequestButtons {
    flex-wrap: wrap;
}

/* OnlineCustomsJobCreate: tighter gap above the buttons row on mobile. */
.OCCButtons {
    margin-top: 24px !important;
}

/* EasyClearInvoice: Commercial Invoice - view fields keep their row layout, but with a tighter label-to-value gap. */
.ci-view-row {
    gap: 4px !important;
}

/* EasyClearInvoice: Commercial Invoice - edit rows: label wraps to its own line (8px gap below it),
   the input/dropdown stays together with its required-field asterisk on the line below it. */
.ci-edit-row {
    flex-wrap: wrap !important;
}
.ci-edit-row > .h6 {
    flex: 1 1 100% !important;
}
/* Cap at 18px short of the row's right edge -- same reserved asterisk-column width used by
   .onlineCustomsForm above -- so fields without a "*" sibling still end at the same right
   edge as fields that do, instead of stretching further right. */
.ci-edit-row > .input {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 18px);
}
.ci-edit-row #divIncoCountry {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 18px);
}

/* EasyClearInvoiceLine (edit line panel): label wraps to its own line, the input/dropdown
   stays together with its required-field asterisk on the line below it -- mirrors .ci-edit-row
   above. */
.easyClearInvoiceLineForm .input-group-row {
    flex-wrap: wrap !important;
}
.easyClearInvoiceLineForm .input-group-row > .h5 {
    flex: 1 1 100% !important;
}
.easyClearInvoiceLineForm .input-group-row > .input,
.easyClearInvoiceLineForm .input-group-row > .textarea,
.easyClearInvoiceLineForm .input-group-row > .c4-dropdown-wrapper,
.easyClearInvoiceLineForm .input-group-row > div[id$="divCntry"] {
    width: calc(100% - 18px) !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 18px) !important;
}
/* <input> is a replaced element -- width:auto falls back to its intrinsic size instead of
   stretching to fill divCntry, so the nested lookup textbox needs its own explicit width. */
.easyClearInvoiceLineForm .input-group-row > div[id$="divCntry"] > .input {
    width: 100% !important;
}
/* Licence Pieces: the group itself gets the other fields' mobile width (full row width minus
   the 18px asterisk reserve) as a definite value, so its children's 100% below has something
   real to resolve against -- a percentage on the children directly would resolve against an
   auto-sized (shrink-to-fit) parent, which is why the dropdown was collapsing to its own
   minimal content size while the textbox (with a min-width fallback elsewhere) looked fine. */
.easyClearInvoiceLineForm .ci-licence-pieces-group {
    width: calc(100% - 18px) !important;
}
.easyClearInvoiceLineForm .ci-licence-pieces-group > .input,
.easyClearInvoiceLineForm .ci-licence-pieces-group > .c4-dropdown-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
/* Collapse the asterisk/error wrapper so the "*" can stay on the field's line (in the 18px
   sliver reserved above) while the error message -- much wider -- always drops to its own
   full-width line below, instead of the two moving as one unit. */
.easyClearInvoiceLineForm .input-group-row > .tw-flex.tw-items-center.tw-gap-\[8px\] {
    display: contents;
}
.easyClearInvoiceLineForm .error-message:not([id$="spnError"]) {
    flex: 1 1 100%;
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px);
    min-width: 0 !important;
}

/* CustomerAddressDetailEdit: label above field (column stack) instead of the default row
   layout -- .input-group-row already has gap:8px, so switching its direction is all that's
   needed for the label-to-field spacing. The label's fixed min-width (110px, reserved for
   row alignment) is dropped since it no longer sits beside the field. */
.addressDetailEditForm .input-group-row {
    flex-direction: column;
    align-items: flex-start;
}
.addressDetailEditForm .input-group-row > label {
    min-width: 0 !important;
}
/* Cap at a sensible mobile field size instead of stretching to 100% -- the table cell
   this control sits in can be much wider than the screen (colspan across columns sized by
   the *other*, nowrap rows), and 100% would stretch the field to match that wide cell
   rather than the screen. min() still shrinks the field down on viewports narrower than
   300px so it never overflows. This also overrides some fields' wider --width (e.g. the
   Google Select address field's 796px) down to the same mobile-appropriate size. */
.addressDetailEditForm .input-group-row .input,
.addressDetailEditForm .input-group-row .c4-dropdown-wrapper {
    width: min(100%, 300px) !important;
    max-width: min(100%, 300px) !important;
}
/* Google / Extra Info columns: stack into one column instead of sitting side by side
   (their 45px gap + fixed-width fields would otherwise force horizontal overflow). */
.addressDetailEditForm-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
}
.addressDetailEditForm-col {
    width: 100% !important;
}
/* This control is also embedded as a colspan cell inside the addresses table (Add/Edit
   row in CustomerAddressSelector). The table's generic td { white-space: nowrap } rule
   (meant for the normal data columns) forces this cell's content to its full unwrapped
   width instead of letting it stack/shrink to the screen, so the edit form ends up
   constrained to the table's scrolled width instead of the actual viewport width. */
.table-scroll td:has(.addressDetailEditForm) {
    white-space: normal !important;
}
/* Other Conditions / Advanced Options panels carry a fixed 1400px width that would otherwise
   force horizontal scrolling. */
.ci-other-conditions,
.ci-advanced-options {
    width: 100% !important;
    max-width: 100% !important;
}
.ci-advanced-options {
    flex-wrap: wrap;
}
/* Other Conditions repeater: each measure's label carries a hardcoded 400px width -- when a
   commodity code actually has measure conditions bound, that alone overflows a mobile
   viewport (this .container is shared with the invoice-lines table via
   .container:has(thead.table-head):not(:has(.table-scroll-outer)), so the overflow shows up as extra scroll space next to
   the table, not just under the edit-line form). */
.ci-condition-label,
.ci-condition-choices {
    width: 100% !important;
    max-width: 100% !important;
}

/* EasyClearInvoiceLine: "Click here" / guidance rows -- the link and its trailing label text
   should flow together as one sentence, only breaking onto a second line where the words
   naturally wrap, instead of the link and label sitting as two separate stacked flex items. */
.easyClearInvoiceLineForm .ci-inline-info {
    display: block !important;
}
.easyClearInvoiceLineForm .ci-inline-info > .text-primary-button {
    display: inline-flex !important;
    margin-right: 4px;
}
.easyClearInvoiceLineForm .ci-inline-info > div {
    display: inline;
}

/* Save/Delete/Cancel (EasyClearInvoiceLine) and CI Buttons (EasyClearInvoice) rows wrap
   instead of overflowing on narrow screens. */
.ci-line-buttons,
.ci-buttons-wrap {
    flex-wrap: wrap;
}

/* EasyClearInvoice: "Save and Edit" panel carries a hardcoded 500px width that overflows a
   mobile viewport regardless of anything else on the page. */
.ci-save-panel {
    width: 100% !important;
    max-width: 100% !important;
}

/* CustomerCustomsDocuments: Filters grid -- 1 column on mobile. */
.ccd-filters-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 12px !important;
}

/* CustomerCustomsDocuments: pagination stacks -- results text on top, buttons below,
   both left-aligned (results text is already first in the DOM). */
.ccd-pagination-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
}
.ccd-pagination-row .pager-div,
.ccd-pagination-row .pager-div > span {
    gap: 4px !important;
}

/* CustomerCustomsDocuments: hide the numeric page-jump buttons (1 2 3 4 5 ...) on mobile.
   With a full page range they can't fit on one row next to First/Previous/Next no matter how
   much the gap is trimmed, and wrapping them looks broken (orphaned numbers on their own
   line). First/Previous/Next alone always fits a single row regardless of how many pages
   exist, and the "Showing X to Y of Z Results" text above already gives position context --
   so the only cost is losing the ability to jump straight to an arbitrary page number on
   mobile; users page through sequentially via Next instead. This is a common, accepted
   mobile pagination pattern. */
.ccd-pagination-row .pager-btn,
.ccd-pagination-row .pager-div input[type="submit"]:not([class]),
.ccd-pagination-row .pager-div a:not([class]),
.ccd-pagination-row span[id*="dpJobs"] > span > span:not([class]):not(:empty) {
    display: none !important;
}
/* DataPager renders a literal &nbsp; text node between each field for spacing -- CSS can't
   target/hide a bare text node with display:none, so the leftover gap next to Next remained
   even with the elements above hidden. Collapsing font-size to 0 on the pager's root shrinks
   that stray &nbsp; to near-zero width instead; restore it on the buttons that still need
   visible text (First/Previous/Next). */
.ccd-pagination-row span[id*="dpJobs"] {
    font-size: 0;
}
.ccd-pagination-row .pager-btn-secondary {
    font-size: 14px;
}

/* DocumentLibrary: tree + detail panel stack vertically instead of side-by-side --
   a fixed 300px tree column leaves no usable room for the detail panel on mobile.
   !important is needed here -- DocumentLibrary.ascx's own <style> block sets the fixed
   300px width with the same selector specificity and no media query, and it renders later
   in the document than this stylesheet, so it wins the cascade tie without !important. */
.dl-container {
    flex-direction: column;
    /* DocumentLibrary.ascx's own <style> block sets align-items: flex-start, meant for the
       desktop row layout (top-aligning the two side-by-side panels). In column direction
       align-items instead controls the horizontal axis, and flex-start makes each panel
       shrink-to-fit its content's width instead of stretching full width -- override back
       to stretch so the tree reliably fills the container. */
    align-items: stretch !important;
}
/* The desktop shrink-to-300px transition (flex/max-width, set in DocumentLibrary.ascx's
   own <style> block) is still inherited here even though mobile keeps both panels full
   width -- transitioning flex-basis between "100%" and "auto" isn't smoothly interpolable,
   so the browser does a discrete jump mid-animation, visible as a brief width flicker on
   selection even though the settled width never actually changes. Not needed on mobile
   since there's no side-by-side resize happening, so just turn it off. */
.dl-left-panel,
.dl-right-panel {
    transition: none !important;
}
.dl-folder-selected .dl-left-panel {
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

/* FolderTree: each node row is 71px tall (set in FolderTree.ascx's own <style> block for
   desktop touch targets), which makes the tree take up excessive vertical space on mobile
   screens where it stacks above the detail panel instead of sitting beside it. !important
   is needed -- FolderTree.ascx's rule has the same selector specificity and renders later
   in the document than this stylesheet, so it wins the cascade tie without it (same issue
   as .dl-container above). */
.treeMain table > tbody > tr:first-child {
    min-height: 48px !important;
    padding: 0 12px !important;
}

.treeMain td a {
    font-size: 14px;
    line-height: 20px;
}

.folder-icon svg {
    width: 20px;
    height: 20px;
}

/* For reduce dashboard top padding on each pages*/
.res-no-top-padding {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.res-no-top-margin {
    margin-top: 0 !important;
}

.res-no-padding {
    padding: 0 !important;
}

/* CustomerDetails: Current Logo + Upload sections sit side by side on tablet/notebook/
   desktop, but that fixed-350px logo column plus the upload column don't both fit on a
   mobile screen -- stack them instead. */
.cus-logo-row {
    flex-direction: column !important;
}
.cus-logo-section {
    width: 100% !important;
}
/* Upload section has no explicit width (it just sits next to the fixed-350px logo
   column on wider screens), so once stacked into a column it stays shrink-to-fit
   instead of spanning the page -- stretch it, which the file input, error message
   and button below all then inherit via the section's own flex default of
   align-items:stretch. */
.cus-upload-section {
    width: 100% !important;
}
/* .file-upload-wrapper has a hardcoded 350px width (C4Portal.css) sized for the desktop
   row layout -- the visible fake input box (.input) and the real file input beneath it
   are both sized off this wrapper's width (100%/auto), so the wrapper itself has to
   stretch on mobile or they stay pinned at 350px regardless of .cus-upload-section above. */
.cus-upload-section .file-upload-wrapper {
    width: 100% !important;
}

/* --- CustomerDownloads: Days-count / "Since" date rows (radio + label + field) --
   wrap onto multiple lines on mobile instead of overflowing the card. The field
   (dropdown or date input) needs an explicit width here too -- without one, a wrapped
   flex item with no width shrinks to fit the remaining line space and its text
   reflows like a paragraph instead of moving to its own line as a whole block. */
.cus-email-days-row,
.cus-email-from-row {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
/* ddlDays becomes a .c4-dropdown-wrapper/-trigger widget at runtime (C4BehaviourNew9.js),
   which has its own separate width rule, so both need the override to keep the same
   100px width it has on desktop. */
.cus-email-days-row .c4-dropdown-wrapper,
.cus-email-days-row .c4-dropdown-trigger {
    width: 100px !important;
}
.cus-email-from-row .input {
    width: 150px !important;
}
/* "Every ... send day" rows (weekly/monthly) -- same wrap treatment, no radio button.
   mediumInput's ListBox becomes a .c4-dropdown-wrapper/-trigger widget too, same as
   ddlDays/ddlWeeks/ddlMonths above, so needs the same override on both. */
.cus-email-weekly-every-row,
.cus-email-monthly-every-row {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
}
.cus-email-weekly-every-row .c4-dropdown-wrapper,
.cus-email-weekly-every-row .c4-dropdown-trigger {
    width: 110px !important;
}
.cus-email-monthly-every-row .c4-dropdown-wrapper,
.cus-email-monthly-every-row .c4-dropdown-trigger {
    width: 100px !important;
}