/* eMRO Compliance Workbench (EUP-151) -- layout only.
 *
 * Every colour, space, radius and motion value is a var(--emro-*) token declared on
 * body.emro-app-shell in emro-layout-tokens.css. There are no literal colour values here on
 * purpose: a hard-coded colour is invisible to the theme and drifts the moment the tokens move.
 * Rules are scoped under body.emro-app-shell for the same reason every rule in
 * emro-primefaces-theme.css is -- it is where the tokens live, and it wins over PrimeFaces
 * defaults without !important. */

body.emro-app-shell .emro-workbench {
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-3);
    min-width: 0;
}

/* ------------------------------------------------------------------ toolbar */

body.emro-app-shell .emro-workbench .emro-workbench-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-2);
    padding: var(--emro-space-3);
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    background: var(--emro-color-surface);
    box-shadow: var(--emro-shadow-sm);
}

body.emro-app-shell .emro-workbench .emro-workbench-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emro-space-3);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-search {
    flex: 1 1 18rem;
    min-width: 12rem;
    height: var(--emro-control-height);
}

body.emro-app-shell .emro-workbench .emro-workbench-views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emro-space-1);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-view-name {
    width: 10rem;
    height: var(--emro-control-height);
}

body.emro-app-shell .emro-workbench .emro-workbench-toolbar-label {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.emro-app-shell .emro-workbench .emro-workbench-toolbar-action,
body.emro-app-shell .emro-workbench .emro-workbench-chip,
body.emro-app-shell .emro-workbench .emro-workbench-chip-remove,
body.emro-app-shell .emro-workbench .emro-workbench-column {
    display: inline-flex;
    align-items: center;
    gap: var(--emro-space-1);
    padding: var(--emro-space-1) var(--emro-space-2);
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-muted);
    font-size: var(--emro-font-size-sm);
    text-decoration: none;
    transition: background var(--emro-motion-fast) var(--emro-ease),
        border-color var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workbench .emro-workbench-toolbar-action:hover,
body.emro-app-shell .emro-workbench .emro-workbench-chip:hover,
body.emro-app-shell .emro-workbench .emro-workbench-chip-remove:hover,
body.emro-app-shell .emro-workbench .emro-workbench-column:hover {
    border-color: var(--emro-color-border-strong);
    background: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-column.is-on {
    border-color: var(--emro-color-action);
    color: var(--emro-color-action);
    background: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emro-space-1);
    padding-top: var(--emro-space-1);
    border-top: 1px dashed var(--emro-color-border);
}

/* The active-criteria sentence. It is the loudest thing in the toolbar on purpose. */
body.emro-app-shell .emro-workbench .emro-workbench-criteria {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--emro-space-2);
    padding-top: var(--emro-space-1);
    border-top: 1px solid var(--emro-color-border);
}

body.emro-app-shell .emro-workbench .emro-workbench-criteria-text {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-md);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-criteria-clear {
    color: var(--emro-color-action);
    font-size: var(--emro-font-size-sm);
    text-decoration: underline;
}

body.emro-app-shell .emro-workbench .emro-workbench-criteria-clear:hover {
    color: var(--emro-color-action-hover);
}

/* --------------------------------------------------------------------- body */

body.emro-app-shell .emro-workbench .emro-workbench-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--emro-space-3);
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ---------------------------------------------------------------- facet rail */

/* EUP-257: 180px (was 134) so most EO_CATEGORY labels fit without the ellipsis. */
body.emro-app-shell .emro-workbench .emro-workbench-rail {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-2);
    width: 180px;
    padding: var(--emro-space-2);
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    background: var(--emro-color-surface);
    box-shadow: var(--emro-shadow-sm);
    transition: flex-basis var(--emro-motion-standard) var(--emro-ease),
        width var(--emro-motion-standard) var(--emro-ease);
}

body.emro-app-shell .emro-workbench .emro-workbench-rail.is-collapsed {
    flex: 0 0 24px;
    width: 24px;
    padding: var(--emro-space-1);
    overflow: hidden;
}

body.emro-app-shell .emro-workbench .emro-workbench-rail-toggle {
    display: block;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    text-decoration: none;
    white-space: nowrap;
}

body.emro-app-shell .emro-workbench .emro-workbench-rail-toggle:hover {
    color: var(--emro-color-action);
}

body.emro-app-shell .emro-workbench .emro-workbench-rail-groups {
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-3);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-rail-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-rail-title {
    display: block;
    margin-bottom: var(--emro-space-1);
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--emro-space-1);
    padding: 2px var(--emro-space-1);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-sm);
    text-decoration: none;
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet:hover {
    background: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-facet.is-selected {
    color: var(--emro-color-text);
    background: var(--emro-color-selected);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet-count {
    flex: 0 0 auto;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    font-variant-numeric: tabular-nums;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet-more {
    margin-top: var(--emro-space-1);
    color: var(--emro-color-action);
    font-size: var(--emro-font-size-xs);
    text-decoration: none;
}

body.emro-app-shell .emro-workbench .emro-workbench-facet-more:hover {
    color: var(--emro-color-action-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------- grid region */

/* min-width:0 is load bearing: without it a wide grid refuses to shrink and pushes the rail
   off the tab instead of scrolling inside its own region. */
body.emro-app-shell .emro-workbench .emro-workbench-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-3);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-register {
    font-size: var(--emro-font-size-sm);
}

/* ---------------------------------------------------------- register columns */

/* PrimeFaces sets `.ui-datatable table { width:100%; table-layout:fixed }` and `td { overflow:
   hidden }`. Under a fixed layout fifteen columns get an equal share regardless of content, so
   the one long-text column -- Description -- gets the same width as Rev, a real description
   wraps to eight lines, and a 50-row page runs to several screens while the other fourteen
   columns sit mostly empty. Auto layout sizes columns to their content, and because the wrapper
   is overflow:auto a page wider than the region scrolls inside it instead of squeezing (see the
   min-width note above). Scoped to this register: the rest of the app keeps PrimeFaces' fixed
   layout. */
body.emro-app-shell .emro-workbench .emro-workbench-register table {
    table-layout: auto;
}

/* EUP-256: start narrow and wrap. Auto layout ignores max-width on a cell, so the cap sits on the
   cell's text span (display:block makes the span the thing the column is sized to). The span holds
   descriptionShort(); the full text is in its title. */
body.emro-app-shell .emro-workbench .emro-workbench-register th.emro-workbench-col-description,
body.emro-app-shell .emro-workbench .emro-workbench-register td.emro-workbench-col-description {
    width: 18rem;
    min-width: 12rem;
}

body.emro-app-shell .emro-workbench .emro-workbench-register td.emro-workbench-col-description > span {
    display: block;
    max-width: 18rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Every other cell holds a code, a date or a count. Keep each on one line so a row's height is
   set by its description alone, never by a wrapped "ACCEPTED". Headers may still wrap. */
body.emro-app-shell .emro-workbench .emro-workbench-register td:not(.emro-workbench-col-description) {
    white-space: nowrap;
}

/* ------------------------------------------------------- due cues (EUP-229) */

/* The Next due cell reads by the row's due_state, which oux_engineering_workbench fills from
   RegisterService.dueState -- the same rules the Overdue / Due soon / No live plan facets filter
   with -- so a red date is exactly a row the Overdue facet would return. Danger for overdue,
   warning for due soon and for a schedule percent at or past the threshold, muted italics for a
   plan that does not exist: said, not blank. */
body.emro-app-shell .emro-workbench .emro-workbench-register .emro-workbench-due.is-overdue {
    color: var(--emro-color-danger);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-register .emro-workbench-due.is-due-soon,
body.emro-app-shell .emro-workbench .emro-workbench-register .emro-workbench-pct.is-warning {
    color: var(--emro-color-warning);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-register .emro-workbench-due-absent {
    color: var(--emro-color-text-muted);
    font-style: italic;
}

/* ------------------------------------------------------------------- drawer */

body.emro-app-shell .emro-workbench .emro-workbench-drawer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    background: var(--emro-color-surface-raised);
    box-shadow: var(--emro-shadow-md);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emro-space-2);
    padding: var(--emro-space-2) var(--emro-space-3);
    border-bottom: 1px solid var(--emro-color-border);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-title {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-lg);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-close {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-lg);
    line-height: 1;
    text-decoration: none;
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-close:hover {
    color: var(--emro-color-danger);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-body {
    padding: var(--emro-space-3);
    min-height: 4rem;
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-empty {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
}

/* The wrapper is always in the DOM so drawer-internal ajax has a stable update target. It must
   not become a flex item of .emro-workbench-main, or an empty wrapper would still contribute a
   gap under the grid; display:contents hands the drawer itself straight to that flex column. */
body.emro-app-shell .emro-workbench .emro-workbench-drawer-wrap {
    display: contents;
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emro-space-2);
}

/* Reads as one of the toolbar actions, plainly out of reach. Not a disabled UICommand: there is
   no action behind it in phase 1 -- the tooltip says which phase supplies one. */
body.emro-app-shell .emro-workbench .emro-workbench-action-disabled {
    display: inline-flex;
    align-items: center;
    padding: var(--emro-space-1) var(--emro-space-2);
    border: 1px dashed var(--emro-color-border);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text-muted);
    background: var(--emro-color-surface-muted);
    font-size: var(--emro-font-size-sm);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- drawer tabs */

body.emro-app-shell .emro-workbench .emro-workbench-drawer-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--emro-space-1);
    padding: 0 var(--emro-space-3);
    border-bottom: 1px solid var(--emro-color-border);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-tab {
    padding: var(--emro-space-1) var(--emro-space-2);
    border-bottom: 2px solid transparent;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
    text-decoration: none;
    transition: color var(--emro-motion-fast) var(--emro-ease),
        border-color var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-tab:hover {
    color: var(--emro-color-action);
}

body.emro-app-shell .emro-workbench .emro-workbench-drawer-tab.is-active {
    border-bottom-color: var(--emro-color-action);
    color: var(--emro-color-text);
    font-weight: 600;
}

/* ----------------------------------------------------------- revisions tab */

/* Timeline and diff sit side by side while there is room, and stack below the mobile
   breakpoint (see the media query at the foot of this file). */
body.emro-app-shell .emro-workbench .emro-workbench-revisions {
    display: flex;
    align-items: flex-start;
    gap: var(--emro-space-4);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-timeline {
    flex: 1 1 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-2);
    max-height: 22rem;
    overflow-y: auto;
    min-width: 0;
}

/* The rule down the left is the timeline: one continuous line through every entry. */
body.emro-app-shell .emro-workbench .emro-workbench-revision {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--emro-space-1) var(--emro-space-2);
    border-left: 2px solid var(--emro-color-border);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision.is-endpoint {
    border-left-color: var(--emro-color-action);
    background: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-revision.is-pending {
    border-left-color: var(--emro-color-warning);
    background: var(--emro-color-warning-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--emro-space-2);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-pick {
    color: var(--emro-color-action);
    font-size: var(--emro-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-pick:hover {
    color: var(--emro-color-action-hover);
    text-decoration: underline;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-endpoint {
    padding: 0 var(--emro-space-1);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text-inverse);
    background: var(--emro-color-action);
    font-size: var(--emro-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-meta {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
}

/* A proposed change awaiting signature. Warning, not success: nothing has been approved. */
body.emro-app-shell .emro-workbench .emro-workbench-revision-pending {
    padding: 0 var(--emro-space-1);
    border: 1px solid var(--emro-color-warning);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-warning);
    font-size: var(--emro-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The engineer's own account of the change. It is the point of the pane, so it wraps in full
   rather than being clipped to one line. */
body.emro-app-shell .emro-workbench .emro-workbench-revision-narrative {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

body.emro-app-shell .emro-workbench .emro-workbench-revision-absent {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    font-style: italic;
}

/* ------------------------------------------------------------------- diff */

body.emro-app-shell .emro-workbench .emro-workbench-diff {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-1);
    padding: var(--emro-space-2);
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    background: var(--emro-color-surface);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-title {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-md);
    font-weight: 600;
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-absent {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
    font-style: italic;
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--emro-space-2);
    padding: 2px 0;
    border-bottom: 1px dashed var(--emro-color-border);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-label {
    flex: 0 0 7rem;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Unchanged fields stay on screen, greyed, so "nothing changed" is an answer you can see. */
body.emro-app-shell .emro-workbench .emro-workbench-diff-field.is-unchanged .emro-workbench-diff-same,
body.emro-app-shell .emro-workbench .emro-workbench-diff-note {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-was {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
    text-decoration: line-through;
    overflow-wrap: anywhere;
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-arrow {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .emro-workbench .emro-workbench-diff-now {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.emro-app-shell .emro-workbench .emro-workbench-tails {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--emro-space-1);
    padding-top: var(--emro-space-1);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-tail {
    padding: 0 var(--emro-space-1);
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-muted);
    font-size: var(--emro-font-size-xs);
    font-variant-numeric: tabular-nums;
}

body.emro-app-shell .emro-workbench .emro-workbench-tail.is-added {
    border-color: var(--emro-color-success);
    color: var(--emro-color-success);
    background: var(--emro-color-success-soft);
}

body.emro-app-shell .emro-workbench .emro-workbench-tail.is-removed {
    border-color: var(--emro-color-danger);
    color: var(--emro-color-danger);
    background: var(--emro-color-danger-soft);
}

/* --------------------------------------------------------- supersession tab */

body.emro-app-shell .emro-workbench .emro-workbench-supersession {
    display: flex;
    flex-direction: column;
    gap: var(--emro-space-1);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-chain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--emro-space-2);
    padding: 2px 0;
    border-bottom: 1px dashed var(--emro-color-border);
    min-width: 0;
}

body.emro-app-shell .emro-workbench .emro-workbench-chain-label {
    flex: 0 0 7rem;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.emro-app-shell .emro-workbench .emro-workbench-chain-eo {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.emro-app-shell .emro-workbench .emro-workbench-chain-date {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
}

/* --------------------------------------------------------------- narrow tabs */

/* 40rem is --emro-breakpoint-mobile; a media query cannot read a custom property, so the
   literal has to match the token by hand -- the same convention emro-primefaces-theme.css uses. */
@media (max-width: 40rem) {
    body.emro-app-shell .emro-workbench .emro-workbench-body {
        flex-wrap: wrap;
    }

    body.emro-app-shell .emro-workbench .emro-workbench-rail,
    body.emro-app-shell .emro-workbench .emro-workbench-rail.is-collapsed {
        flex: 1 1 100%;
        width: 100%;
    }

    body.emro-app-shell .emro-workbench .emro-workbench-rail.is-collapsed {
        padding: var(--emro-space-1) var(--emro-space-2);
    }

    body.emro-app-shell .emro-workbench .emro-workbench-revisions {
        flex-wrap: wrap;
    }

    body.emro-app-shell .emro-workbench .emro-workbench-timeline,
    body.emro-app-shell .emro-workbench .emro-workbench-diff {
        flex: 1 1 100%;
    }
}

/* Trax Inventory Optimizer (oux_inventory_optimizer_sel): external SPA framed in the Inventory tab. */
.emro-inventory-optimizer-frame {
	display: block;
	width: 100%;
	height: calc(100vh - 160px);
	min-height: 600px;
	border: 0;
}