#workshop-orders-host {
    display: contents;
}

#workshop-orders.workshop-orders-active-fallback {
    display: block;
}

body:has(#workshop-orders.workshop-orders-active-fallback) .dashboard {
    display: none;
}

/*
 * Keep the Workshop Job Orders parent and its child routes mutually exclusive
 * during hash changes. The parent's fallback class can survive until its
 * hashchange handler runs, while a child :target changes immediately; without
 * these guards both screens can paint for one frame and appear side-by-side
 * (the "parent flash"). Mirrors the proven Inventory parent/child pattern.
 *
 * These key on the child :target only, which the hash sets immediately, so
 * they never fire while the Workshop parent itself is the target. That keeps
 * them from colliding with the inverse guards below during the return frame.
 */
body:has(#workshop-detail:target) #workshop-orders,
body:has(#workshop-live-monitor:target) #workshop-orders,
body:has(#workshop-kpi:target) #workshop-orders,
body:has(#workshop-schedule:target) #workshop-orders,
body:has(#tailor-productivity-report:target) #workshop-orders,
body:has(#workshop-item-report:target) #workshop-orders {
    display: none !important;
}

/*
 * The inverse transition has the same one-frame risk: when returning to the
 * Workshop Job Orders parent, stale child fallback classes can remain until
 * their own hashchange listeners run. Hide only those stale child fallback
 * states while the Workshop parent route is already active.
 */
body:has(#workshop-orders:target) #workshop-live-monitor.workshop-live-monitor-fragment-visible,
body:has(#workshop-orders:target) #workshop-kpi.workshop-kpi-active-fallback,
body:has(#workshop-orders:target) #workshop-schedule.workshop-schedule-active-fallback,
body:has(#workshop-orders:target) #tailor-productivity-report.tailor-productivity-active-fallback,
body:has(#workshop-orders:target) #workshop-item-report.wipr-active-fallback,
body:has(#workshop-orders.workshop-orders-active-fallback) #workshop-live-monitor.workshop-live-monitor-fragment-visible,
body:has(#workshop-orders.workshop-orders-active-fallback) #workshop-kpi.workshop-kpi-active-fallback,
body:has(#workshop-orders.workshop-orders-active-fallback) #workshop-schedule.workshop-schedule-active-fallback,
body:has(#workshop-orders.workshop-orders-active-fallback) #tailor-productivity-report.tailor-productivity-active-fallback,
body:has(#workshop-orders.workshop-orders-active-fallback) #workshop-item-report.wipr-active-fallback {
    display: none !important;
}

#workshop-orders .search-fields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: flex-start;
}

#workshop-orders .workshop-order-search-row,
#workshop-orders .workshop-order-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
}

#workshop-orders .workshop-order-search-row label {
    margin-right: 0;
}

#workshopOrderSearch {
    width: 420px;
    max-width: min(420px, calc(100vw - 320px));
}

#workshop-orders #clearWorkshopOrderSearch {
    min-width: 92px;
}

#workshop-orders .search-fields select {
    width: 178px;
    min-width: 0;
    max-width: 178px;
}

#workshopOrderPoFilter {
    width: 178px;
    min-width: 0;
}

#workshop-orders .customer-header {
    padding-right: 470px;
}

#workshop-orders .customer-header > .utility-actions.customer-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 8px;
    width: 478px;
    min-width: 0;
    height: auto;
    padding-right: 48px;
    box-sizing: border-box;
    overflow: visible;
}


#workshop-orders .customer-header .utility-actions.customer-actions .small-button {
    width: auto;
    white-space: nowrap;
}

#workshop-orders .customer-header .utility-actions.customer-actions .exit-button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

#openWorkshopLiveMonitorButton,
#openWorkshopKpiButton,
#openWorkshopScheduleButton,
#workshop-orders .customer-header .utility-actions.customer-actions .exit-button {
    order: 1;
}

#exportWorkshopOrdersExcel,
#openTailorReportButton,
#openWorkshopItemReportButton {
    order: 2;
}

#exportWorkshopOrdersExcel {
    min-width: 118px;
}

#openTailorReportButton {
    min-width: 112px;
}

#openWorkshopItemReportButton {
    min-width: 158px;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* Search + filter rows are fixed-width and nowrap on desktop; let them
       stack full width on mobile so no field is clipped off-screen. */
    #workshop-orders .customer-header {
        padding-right: 0;
    }

    #workshop-orders .workshop-order-search-row,
    #workshop-orders .workshop-order-filter-row {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }

    #workshopOrderSearch {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    #workshop-orders #clearWorkshopOrderSearch {
        flex: 0 0 auto;
    }

    #workshop-orders .workshop-order-filter-row > * {
        flex: 1 1 140px;
    }

    #workshop-orders .search-fields select,
    #workshopOrderPoFilter {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Header utility bar: flow in DOM order and keep the close control
       trailing at the right rather than absolutely pinned / mid-group. */
    #workshop-orders .customer-header > .utility-actions.customer-actions {
        position: static;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        justify-content: flex-start;
    }

    #openWorkshopLiveMonitorButton,
    #openWorkshopKpiButton,
    #openWorkshopScheduleButton,
    #exportWorkshopOrdersExcel,
    #openTailorReportButton,
    #openWorkshopItemReportButton {
        order: 0;
    }

    #workshop-orders .customer-header .utility-actions.customer-actions .exit-button {
        position: static;
        order: 99;
        margin-left: auto;
    }
}



/* ==========================================================================
   workshop-orders — compact mobile TABLE (module-scoped, <=640px).
   The list is intentionally limited to Open, PRN, Name, Company, Mobile,
   Item and Job Type. Full job data remains in Workshop Detail.
   ========================================================================== */
@media (max-width: 640px) {
  #workshop-orders .grid-wrap {
    border-top: 0;
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }
  #workshop-orders .grid-wrap > table {
    min-width: 680px;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
  }
  #workshop-orders .grid-wrap > table > thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
  }
  #workshop-orders .grid-wrap > table > thead > tr > th {
    display: table-cell;
    background: #eef2f7;
    color: #213247;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 5px;
    white-space: normal;
    text-align: left;
    vertical-align: middle;
  }
  #workshop-orders .grid-wrap > table > tbody > tr > td {
    display: table-cell;
    padding: 8px 5px;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #e3e8ee;
    max-width: none;
    min-width: 0;
    width: auto;
  }
  #workshop-orders .grid-wrap > table > tbody > tr > td::before { content: none; }
  #workshop-orders .grid-wrap > table > thead > tr > th:nth-child(2),
  #workshop-orders .grid-wrap > table > tbody > tr > td:nth-child(2),
  #workshop-orders .grid-wrap > table > thead > tr > th:nth-child(5),
  #workshop-orders .grid-wrap > table > tbody > tr > td:nth-child(5),
  #workshop-orders .grid-wrap > table > thead > tr > th:nth-child(7),
  #workshop-orders .grid-wrap > table > tbody > tr > td:nth-child(7) {
    white-space: nowrap;
  }
  /* Action / Open control: compact, centered, touch-friendly */
  #workshop-orders .grid-wrap > table .open-cell,
  #workshop-orders .grid-wrap > table .edit-cell,
  #workshop-orders .grid-wrap > table .pd-open-cell,
  #workshop-orders .grid-wrap > table .po-icon-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding: 6px 5px;
  }
  #workshop-orders .grid-wrap > table .open-cell a,
  #workshop-orders .grid-wrap > table .edit-cell button,
  #workshop-orders .grid-wrap > table .pd-open-cell button,
  #workshop-orders .grid-wrap > table .po-icon-cell a {
    display: inline-block;
    min-width: 36px;
    min-height: 32px;
    line-height: 1.5;
    padding: 3px 6px;
  }
  #workshop-orders .grid-wrap > table > tbody > tr > td[colspan] {
    text-align: center;
    color: #6a7785;
    white-space: normal;
  }
}