/* Supplier 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 translucent, meant to sit over the portal background.
   Sidebar now overlays page content on top, so layer the same tint over --portal-bg
   to keep it opaque, using only existing theme tokens. */
html.dark .aside {
    background-color: var(--portal-bg);
    background-image: linear-gradient(var(--sidebar-bg), var(--sidebar-bg));
}

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

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

/* --- SupplierWelcome: Using Menu / Notes panels stack 1 per row on mobile --- */
.wlc-panels-row {
    flex-direction: column !important;
    gap: 24px !important;
}
.wlc-panel-col {
    width: 100% !important;
}

/* --- SupplierWelcome: stat cards 1 per row on mobile --- */
.dashboard-card-wrapper {
    flex-wrap: wrap !important;
    gap: 24px !important;
}

/* --- SupplierWelcome: Email section full width on mobile --- */
.wlc-email-section {
    width: 100% !important;
}

/* --- Reusable: stack label above field with 8px gap on mobile, field full width.
   Add alongside .input-group-row on any field that needs this. --- */
.field-stack-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.field-stack-row .input,
.field-stack-row .textarea,
.field-stack-row .c4-dropdown-wrapper,
.field-stack-row .c4-dropdown-trigger {
    width: 100% !important;
    min-width: 0 !important;
}

/* --- ShowInvoices: Show/lstPeriod field group -- reduce desktop's 24px (tw-mt-6) top
   margin to 16px on mobile. --- */
.si-show-field-margin {
    margin-top: 16px !important;
}

/* --- Reusable: stack a row of field groups one per line with 16px gap on mobile,
   each group full width. Add to any row wrapping multiple field groups. --- */
.fields-row-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
}
.fields-row-stack-col {
    width: 100% !important;
    min-width: 0 !important;
}
.fields-row-stack-col .input,
.fields-row-stack-col .c4-dropdown-wrapper,
.fields-row-stack-col .c4-dropdown-trigger {
    width: 100% !important;
    min-width: 0 !important;
}

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

/* --- Tables inside .container: scroll horizontally instead of overflowing the card --- */
.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;
}

/* --- Shared table scroll wrapper: .table-scroll-outer owns the card's visible
   border/background/radius so it never moves. .container inside it is stripped of
   its own border/background so there's no double border. .table-scroll wraps just
   the table 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;
    height: auto;
    max-height: none;
    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;
}

/* SupplierDrivers: 1100px comfortably fits all 6 columns' header labels (e.g.
   "Employment") on one line without overlapping into the next column -- a definite
   width also lets the percentage columns resolve consistently, and being wider than
   the viewport is what makes .table-scroll actually scroll. Driver/Documents columns
   hold multi-line content, so let them wrap instead of forcing nowrap like the rest. */
.table-scroll .driver-table {
    width: 1100px !important;
    min-width: 1100px !important;
}
.table-scroll .driver-table td:nth-child(1),
.table-scroll .driver-table td:nth-child(6) {
    white-space: normal;
}

/* --- SupplierDocumentsFileReceiver: checkbox+filename row and each field group take
   full width on mobile. !important needed to beat the elements' own inline styles
   (max-width:250px on the checkbox row, --width:200px on each input). --- */
.sfr-checkbox-filename {
    min-width: 0 !important;
    max-width: 100% !important;
}

.sfr-fields-row {
    gap: 16px !important;
}

.sfr-fields-row .input-group-col {
    width: 100% !important;
}
.sfr-fields-row .input {
    width: 100% !important;
}
/* Document Type / Vehicle Registration / Driver / Bank Details are <select> elements --
   C4BehaviourNew9.js replaces them at runtime with a .c4-dropdown-wrapper/-trigger
   widget (copying the original --width:200px inline style onto it), so the .input
   rule above never reaches the element actually shown on screen. */
.sfr-fields-row .c4-dropdown-wrapper,
.sfr-fields-row .c4-dropdown-trigger {
    width: 100% !important;
}

/* --- UploadSupplierDocuments: filters grid -- 1 per row on mobile --- */
.sup-doc-filters-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 16px !important;
}

/* --- UploadSupplierDocuments: documents table (div-based grid, not a <table>) --
   min-width goes on .table-head/.table-body so the existing tw-grid-cols-12 column
   proportions scale correctly instead of squishing, and .table-scroll lets it
   scroll horizontally. --- */
.table-scroll .table-head,
.table-scroll .table-body {
    min-width: 900px;
}

/* --- SupplierDriverEdit: Driver Details fields grid -- 1 per row on mobile --- */
.driver-details-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 16px !important;
}

/* --- SupplierVehicleEdit: Checkboxes grid -- 2 per row on mobile only --- */
.vehicle-checkboxes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* --- SupplierNewJobs: keep the same column widths as desktop -- a definite width lets
   the % columns resolve consistently, and being wider than the viewport is what makes
   .table-scroll actually scroll. Job/Company columns stack multiple labels, so let them
   wrap instead of forcing nowrap like the rest. --- */
.table-scroll #tblJobsC4 {
    width: 900px !important;
    min-width: 900px !important;
}
.table-scroll #tblJobsC4 td:nth-child(1),
.table-scroll #tblJobsC4 td:nth-child(6) {
    white-space: normal;
}

/* --- SupplierVehicles: master app users / vehicles tables -- definite widths let
   .table-scroll actually scroll; most cells stack multiple lines of content, so let
   them wrap instead of forcing nowrap like the rest. --- */
.table-scroll .master-app-users-table {
    width: 700px !important;
    min-width: 700px !important;
}
.table-scroll .master-app-users-table td {
    white-space: normal;
}
.table-scroll .vehicles-table {
    width: 1400px !important;
    min-width: 1400px !important;
}
.table-scroll .vehicles-table td {
    white-space: normal;
}

/* 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-bottom-margin {
    margin-bottom: 0 !important;
}

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

.res-bottom-margin {
    margin-bottom: 24px !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 (e.g. SubmitInvoice's divConfirm,
   where the .table-scroll-outer tables elsewhere in the same container are hidden). */
.res-force-scroll-y {
    overflow-y: scroll !important;
}

/* --- SupplierPerformance: PointsBreakdown section -- full width on responsive screens --- */
.spp-mediumtab-full {
    max-width: 100% !important;
}
.spp-explanation-col {
    width: 80% !important;
}
.spp-score-col {
    width: 20% !important;
    padding-left: 16px !important;
}

/* --- SupplierDocumentsGrid: keep the same column widths as desktop -- table-layout
   fixed makes the header %/px widths authoritative, and a definite total width lets
   .table-scroll actually scroll instead of squeezing columns to fit the viewport. */
.table-scroll .documents-grid-table {
    table-layout: fixed !important;
    width: 1300px !important;
    min-width: 1300px !important;
}

/* --- SupplierPerformance: keep the same column widths as desktop on these tables --
   table-layout:fixed already comes from tw-table-fixed/a-table-fixed on each table,
   this just gives them a definite width so the % columns resolve consistently and the
   table is wider than the viewport, which is what makes .table-scroll actually scroll.
   [id$="..."] instead of #... because these divs are runat="server" inside a user
   control naming container, so ASP.NET prefixes their rendered id (e.g.
   ctl00_..._divJobsList) -- an exact #divJobsList match never hits the real DOM. */
[id$="divVehicleList"] table {
    width: 1400px !important;
    min-width: 1400px !important;
}
[id$="divJobsList"] table {
    width: 1100px !important;
    min-width: 1100px !important;
}
[id$="divTrackingList"] table {
    width: 1000px !important;
    min-width: 1000px !important;
}
[id$="divPunctualityList"] table {
    width: 700px !important;
    min-width: 700px !important;
}
[id$="divFinancialsList"] table {
    width: 900px !important;
    min-width: 900px !important;
}

/* --- DownloadApps: divWhatDoesAppDo1 images -- 1 per row on mobile instead of
   horizontal scroll. gapBox spacers are only needed for the scrolling row layout, so
   hide them once wrapping. Image height is fixed inline (Height="400px"), so override
   it to scale with the now-narrower .expBox instead of forcing a giant scaled width. */
#divWhatDoesAppDo1 {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
}
#divWhatDoesAppDo1 .expBox {
    width: 100% !important;
}
#divWhatDoesAppDo1 .expBox img {
    width: 100% !important;
    height: auto !important;
}
#divWhatDoesAppDo1 .gapBox {
    display: none !important;
}
/* Title and instruction above the screenshot on mobile (markup has the image first). */
#divWhatDoesAppDo1 .expBox {
    display: flex;
    flex-direction: column;
}
#divWhatDoesAppDo1 .expBox img {
    order: 1;
    margin-top: 12px;
}
#divWhatDoesAppDo1 .expBox h6 {
    margin-top: 0;
}
/* Divider line between the stacked screenshots (not after the last one). */
#divWhatDoesAppDo1 .expBox:not(:last-child) {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--table-inline-border);
}

/* --- 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;
}
.acc-filters-row .dropdown-button {
    display: block;
    width: 100%;
}
.acc-filters-row .dropdown-button-selected {
    width: 100% !important;
    box-sizing: border-box;
}