/* =======================================================================
 * UX-2G. The employee exception workbench.
 *
 * WHY THIS FILE EXISTS. The employee portal had no stylesheet of its own --
 * it styled entirely from `shared/css/base.css`, which every vendor wave
 * (UX-2A..UX-2F) treated as protected foundation. Rather than reopen shared
 * CSS for one page, UX-2G gives the employee portal the same append-only
 * surface the vendor portal has had since UX-2A. Nothing here restyles an
 * existing employee page: every selector is prefixed `.e-exception-` or
 * reached through `#exceptions`.
 *
 * Every colour is an existing base.css token, so both themes come out of one
 * definition and the product's own `#themeToggle` is what switches them.
 * There is no hard-coded palette.
 * ===================================================================== */

/* --- The page ----------------------------------------------------------- */
.e-exception-intro {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 68ch;
}

/* One column. The sections are read top to bottom in triage order, and a
   multi-column grid would imply a ranking between them that the sectioned
   queue deliberately does not claim. */
.e-exception-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- A section ---------------------------------------------------------- */
.e-exception-section {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.e-exception-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 12px;
}
.e-exception-head h3 {
  margin: 0;
  font-size: 1.02rem;
}
/* The count is the SERVER's total, never the rendered row count, so it is
   styled as a fact rather than a badge that might be mistaken for a filter. */
.e-exception-count {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

/* --- Rows --------------------------------------------------------------- */
/* `.work-item` is the employee portal's existing row primitive; this only
   supplies the list reset and the row's internal arrangement. */
.e-exception-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.e-exception-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.e-exception-row-main { min-width: 0; }
.e-exception-row-id {
  font-weight: 650;
  /* Order numbers, material numbers and serials are long and unbreakable;
     without this they force the page into a horizontal scroll at 390px. */
  overflow-wrap: anywhere;
}
.e-exception-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
}
/* AGE, not SLA. There is no warehouse SLA model in this product, so age is
   presented as a plain fact and is deliberately NOT coloured: a red age would
   assert a threshold that does not exist. */
.e-exception-age { font-variant-numeric: tabular-nums; }
.e-exception-row-aside {
  display: flex;
  /* WRAP, and shrink. UX-2G-C puts up to three resolution buttons in this
     cell ("Approve", "Request recount", "Cancel count"), and a single
     non-wrapping flex line pushed the grid's `auto` column 35px past a 390px
     viewport -- the page scrolled sideways for the first time since UX-2G-A.
     `nowrap` still keeps a badge or an age from breaking mid-word; wrapping
     happens between the items, which is what this cell needs. */
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* --- Footer: "Showing N of T" + Load more ------------------------------- */
.e-exception-showing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.e-exception-showing:empty { margin-top: 0; }

/* --- States ------------------------------------------------------------- */
.e-exception-section .empty-state,
.e-exception-section .queue-denied {
  padding: 10px 0;
  color: var(--muted);
  list-style: none;
}

/* --- Focus -------------------------------------------------------------- */
/* base.css's global focus rule covers `.btn` and `[role="button"]`, not a bare
   button, and the Load more control this page renders is a `.btn` -- but the
   rows are focusable for keyboard triage, so they need their own ring. */
.e-exception-row:focus-visible,
.e-exception-section a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* Stacked, not a horizontally scrolling table. The aside drops under the
     identifier rather than competing with it for width. */
  .e-exception-row { grid-template-columns: 1fr; }
  .e-exception-row-aside { justify-content: flex-start; }
  .e-exception-head { flex-direction: column; }
  .e-exception-showing .btn { width: 100%; }
}
@media (pointer: coarse) {
  .e-exception-showing .btn { min-height: 44px; }
  .e-exception-row { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
 * UX-2G-B. Triage action controls.
 *
 * Every selector stays under `.e-exception-*` / `#exceptions`, so no existing
 * employee page can be restyled from here, and every colour comes from the
 * shared tokens rather than a literal -- an action row that only works in
 * light mode is the classic version of this bug.
 * ------------------------------------------------------------------------- */
.e-exception-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* The reused combobox needs a usable width in a row without stretching it. */
.e-exception-assignee {
  min-width: 12rem;
  max-width: 100%;
}

.e-exception-priority select {
  min-height: 2rem;
}

/* A failed row states its own reason, next to the row it belongs to. */
.e-exception-row-failure {
  display: block;
  margin-top: 0.25rem;
  color: var(--danger-text, var(--text));
  font-size: 0.85rem;
}

/* The checkbox sits at the start of the row's main cell, so the row keeps the
   two grid children UX-2G-A's layout assertions depend on. */
.e-exception-select {
  display: inline-flex;
  align-items: center;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.e-exception-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* The section head gains a picker and a "Select loaded" box; they wrap rather
   than forcing the heading row wider. */
.e-exception-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.e-exception-select-all {
  margin-left: auto;
  font-size: 0.85rem;
}

.e-exception-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--surface-2, var(--surface));
}

.e-exception-bulk[data-exc-busy="true"] {
  opacity: 0.7;
}

.e-exception-bulk-count {
  font-weight: 600;
}

.e-exception-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.e-exception-confirm-q {
  margin: 0;
  flex: 1 1 14rem;
}

.e-exception-confirm-actions {
  display: flex;
  gap: 0.4rem;
}

/* UX-2G-C: the resolution panel. In FLOW at the foot of its section, never a
 * modal or an overlay -- it names one row's consequence and the operator should
 * still be able to read the row it describes.
 *
 * The `.e-exception-` prefix is not decoration: two suites assert that EVERY
 * top-level selector in this stylesheet starts with `.e-exception` or
 * `#exceptions`, so no existing employee page can be restyled from here. These
 * rules were first written as `.e-exc-resolve*` and were correctly refused. */
.e-exception-resolve {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--border);
}

.e-exception-resolve-title {
  margin: 0;
  flex: 1 1 100%;
  font-weight: 600;
}

.e-exception-resolve-field {
  flex: 1 1 12rem;
  min-width: 0;
}

/* The consequence, on its own line and full width: it is a sentence to read,
   not a label to skim past. */
.e-exception-resolve-consequence {
  flex: 1 1 100%;
  margin: 0;
  color: var(--text-muted, inherit);
}

.e-exception-resolve-actions {
  display: flex;
  flex: 1 1 100%;
  gap: 0.4rem;
}

/* At phone width the actions stack under the row rather than forcing a
 * horizontal scroller, and the bulk bar stays in flow so it cannot cover
 * content. */
@media (max-width: 700px) {
  .e-exception-row-actions {
    width: 100%;
    margin-top: 0.4rem;
  }

  .e-exception-assignee {
    min-width: 0;
    flex: 1 1 100%;
  }

  .e-exception-bulk > * {
    flex: 1 1 100%;
  }

  .e-exception-select-all {
    margin-left: 0;
  }

  /* One column: a quantity box beside a reason box at 375px leaves neither
     usable. */
  .e-exception-resolve-field,
  .e-exception-resolve > * {
    flex: 1 1 100%;
  }
}

@media (pointer: coarse) {
  .e-exception-row-actions .btn,
  .e-exception-bulk .btn,
  .e-exception-resolve .btn,
  .e-exception-resolve select,
  .e-exception-resolve input,
  .e-exception-resolve textarea,
  .e-exception-priority select {
    min-height: 44px;
  }

  /* The independent review measured this target at 13 x 44: only the height
     was being enforced, so the box was tall and far too narrow to hit. The
     LABEL carries the hit area in both dimensions while the checkbox glyph
     keeps an ordinary size -- scaling the glyph to 44px instead would look
     broken and still leave the label untouchable. */
  .e-exception-select,
  .e-exception-select-all {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .e-exception-select-all {
    /* It carries a text label, so only the height needs forcing. */
    min-width: 0;
    justify-content: flex-start;
  }
}

/* 0.5.9 detail workbench: a record opens read-only (View); Edit unlocks the ordinary fields; Save/Cancel end it.
   Controlled operations are buttons shown in View only, never fields. */
form[data-mode="view"] [data-edit-only], form[data-mode="edit"] [data-view-only] { display: none !important; }
fieldset[data-edit-fields] { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[data-edit-fields]:disabled :is(input, select, textarea) {
  border-color: transparent; background: transparent; color: inherit; opacity: 1;
  -webkit-text-fill-color: currentColor; box-shadow: none; resize: none; appearance: none; padding-left: 0;
}
fieldset[data-edit-fields]:disabled input[type="checkbox"] { appearance: auto; }
.record-grid .btn.small { margin-top: 6px; margin-right: 4px; }
.workbench-note { color: var(--muted); font-size: .82rem; }
#companyFacts strong, #warehouseFacts strong { display: block; }
fieldset[data-edit-fields]:disabled :is(input, textarea)::placeholder { color: transparent; }
/* 0.5.9 CSP: these were inline style="" attributes (see the end of shared/css/base.css). */
#pluginIframe { width: 100%; height: 320px; border: 1px solid var(--border, #ccc); border-radius: 8px; }
.workspace-layout { display: flex; gap: 1rem; align-items: flex-start; }
.workspace-tree { width: 260px; flex: 0 0 260px; max-height: 70vh; overflow: auto; }
.workspace-main { flex: 1 1 auto; min-width: 0; }
#workspaceEditor { width: 100%; height: 320px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
#workspaceTerminalOutput { background: #0d1117; color: #c9d1d9; padding: .75rem; border-radius: 8px; height: 200px;
  overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: pre-wrap; }
#apiKeyRevealValue { user-select: all; word-break: break-all; flex: 1; }
/* 0.6.1 cov-inbound: the Amend inbound dialog body is a height-limited grid, and a scrollable (overflow:auto) grid item
   has a zero automatic minimum, so its track shrank the expected-lines table to ~49px (header + half a row). */
#inboundAmendDialog .dialog-body > .table { min-height: min(15rem, 45vh); }