/* Customer Portal CSS for notebook devices (1024px - 1365px) */

/* --- Sidebar: slide off-screen by default --- */
.aside {
    transform: translateX(calc(-100% - 26px));
    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 notebook = fully hidden (no compact mode) */
.aside.sidebar-shrunk {
    width: 250px;
    transform: translateX(calc(-100% - 26px));
}

/* --- 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: 24px;
    margin-right: 24px;
}

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

/* --- 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: 24px;
    padding-right: 24px;
    transition: none;
    border-bottom: none;
}
.page-header::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    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 + New Draft stay on the same row 2 (New Draft only wraps below if it doesn't fit) --- */
.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 auto;
}
.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: auto;
}

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

/* --- Dashboard: stats cards 3 per row (tablet/notebook keep row, no grid change needed) --- */

/* --- Contact cards (CustomerC4Contact): 3 per row on notebook (4th wraps alone) --
   .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: calc((100% - 64px) / 3);
}

/* --- Jobs: filter textbox full width on notebook --- */
.jobs-filter-tb {
    width: 423px !important;
    box-sizing: border-box !important;
}

/* --- Jobs: date range stack label + input as column pairs on notebook --- */
.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;
}
.jobs-date-sep {
    margin-top: 40px !important;
    margin-bottom: 0 !important;
}

/* 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: remove the top gap above this section, same as mobile. --- */
.easyClearPeriodsMain {
    margin-top: 0 !important;
}

/* --- Downloads: date range inputs 150px each on notebook --- */
.date-range-row .input {
    width: 150px !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: 18px !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): keep the doc-name
   input and doc-type dropdown at a usable minimum width instead of shrinking with the
   squeezed column. */
.ci-lines-scroll td .input,
.ci-lines-scroll td .c4-dropdown-wrapper {
    min-width: 220px !important;
}

/* OnlineCustomsJobCreate: Forms section -- label + field stay inline as on desktop; only
   the error message (if present) wraps to its own line, indented to line up with the
   field's left edge (200px label column + 8px row gap = 208px). */
.onlineCustomsForm div:has(> .input-label-body-medium) {
    flex-wrap: wrap;
}
.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;
}
/* Fields here keep their fixed declared width (350px for most, unlike Mobile where fields
   grow/shrink), so the error message needs a matching fixed max-width, not a percentage. */
.onlineCustomsForm .error-message {
    flex: 1 1 100%;
    margin-left: 208px;
    max-width: 350px;
}
/* Location Search's input cascades width:100% through its wrapper chain, which inflates
   divSearch's shrink-to-fit hypothetical size and pushes the row to wrap instead of staying
   inline like every other field. Give divSearch itself a direct, unambiguous flex-basis
   instead of leaving it to resolve the wrapper chain's shrink-to-fit sizing. */
.onlineCustomsForm div:has(> .input-label-body-medium) > div:has(.addressFullClassExtra) {
    flex: 0 0 350px;
}
.onlineCustomsForm .addressFullClassExtra {
    width: 350px !important;
}

/* EasyClearInvoiceLine (edit line panel): label + field stay inline as on desktop; only the
   error message (if present) wraps to its own line, indented to line up with the field's left
   edge (190px label column + 8px row gap = 198px). */
.easyClearInvoiceLineForm .input-group-row {
    flex-wrap: wrap;
}
.easyClearInvoiceLineForm .input-group-row > .tw-flex.tw-items-center.tw-gap-\[8px\] {
    display: contents;
}
.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: 300px !important;
    max-width: 300px !important;
    flex: 0 0 auto;
    min-width: 0;
}
/* <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: textbox and unit dropdown match the other fields' 300px width. */
.easyClearInvoiceLineForm .ci-licence-pieces-group > .input,
.easyClearInvoiceLineForm .ci-licence-pieces-group > .c4-dropdown-wrapper {
    width: 300px !important;
    max-width: 300px !important;
}
.easyClearInvoiceLineForm .error-message:not([id$="spnError"]) {
    flex: 1 1 100%;
    margin-left: 198px;
    width: 300px !important;
    max-width: 300px;
    min-width: 0 !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;
}

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

/* CustomerCustomsDocuments: Filters grid -- 3 columns on notebook. */
.ccd-filters-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* CustomerCustomsDocuments: tighter gap between pagination buttons on notebook. */
.ccd-pagination-row .pager-div,
.ccd-pagination-row .pager-div > span {
    gap: 4px !important;
}

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


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