/* Supplier 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 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 notebook = fully hidden (no compact mode) */
.aside.sidebar-shrunk {
    width: 240px;
    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: 24px;
}

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

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

/* --- SupplierWelcome: Using Menu / Notes panels stay side by side, 36px gap on notebook --- */
.wlc-panels-row {
    gap: 36px !important;
}

/* --- SupplierWelcome: stat cards 3 per row on notebook --- */
.dashboard-card-wrapper {
    flex-wrap: wrap !important;
    gap: 36px !important;
}
.card-nofill {
    width: calc(33.333% - 24px) !important;
}

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

/* 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 full width. !important
   needed to beat the element's own inline style (max-width:250px). --- */
.sfr-checkbox-filename {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* --- UploadSupplierDocuments: documents table -- keep the same column widths as
   desktop instead of shrinking to fit; scrolls horizontally if needed. --- */
.table-scroll .table-head,
.table-scroll .table-body {
    min-width: 900px;
}

/* --- SupplierDriverEdit: Driver Details fields grid -- 3 per row on notebook --- */
.driver-details-grid {
    grid-template-columns: repeat(3, 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;
}

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

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