/* ============================================================
   Submittals dashboard
   Renders into #submittalsView. Inline-editable dropdowns for
   every chain. Lifecycle chip filter + N/A row dimming.
   ============================================================ */
.submittals-view {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}
.sub-head {
  margin-bottom: var(--space-5);
}

/* ----- lifecycle chip filter ----- */
.sub-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-4) 0 0;
  align-items: center;
}
.sub-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.sub-chip:hover { color: var(--ink); border-color: #c9c9c4; }
.sub-chip.is-active {
  background: #1f1f1d;
  border-color: #1f1f1d;
  color: #fff;
}
.sub-chip.is-active .sub-chip-count {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.sub-chip-count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ececea;
  color: #6b6b68;
  min-width: 16px;
  text-align: center;
}
.sub-chip--all {
  border-style: dashed;
}
.sub-chip--reset {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 8px;
}
.sub-chip--reset:hover { color: var(--ink); }

/* ----- toolbar ----- */
.sub-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-top: var(--space-3);
}
.sub-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-mute);
}
.sub-toolbar-field > span {
  font-weight: 600;
  letter-spacing: .04em;
}
.sub-toolbar-field select,
.sub-toolbar-field input[type="search"] {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  min-width: 180px;
}
.sub-toolbar-search input[type="search"] { min-width: 240px; }
.sub-toolbar-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ----- table ----- */
.sub-body {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  /* overflow must NOT be 'hidden' or 'auto' here — either value creates
     a new scroll/containing context that breaks position:sticky on the
     table header. The page itself handles scrolling. */
  overflow: visible;
}
.sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
/* Sticky table header — stays pinned at the top of the viewport while the
   table body scrolls. The .sub-body wrapper does not scroll itself; the
   page scrolls. We pin both the <thead> and its <th> cells with
   position:sticky and an opaque background so rows underneath don't bleed
   through. The offset is the live --topbar-h CSS variable, written by
   app.js after measuring the real topbar height (fallback 56px). */
.sub-table thead {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 10;
  background: #ecede8;
}
.sub-table thead tr { background: #ecede8; }
.sub-table thead th {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 10;
  background: #ecede8;
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  /* Sticky elements ignore the table's collapsed border, so paint a stronger
     bottom rule + a soft drop shadow that appears once the user has scrolled
     past the header — makes the pinned bar clearly distinct from the rows. */
  box-shadow: inset 0 -2px 0 var(--ink, #1d2a1f), 0 6px 12px -8px rgba(0,0,0,.18);
  font-weight: 700;
  color: var(--ink, #1d2a1f);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sub-table thead th:first-child { width: 26%; }
.sub-table thead th:not(:first-child) { width: 18.5%; }

.sub-th-btn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; letter-spacing: inherit; text-transform: inherit;
}
.sub-th-btn:hover, .sub-th-btn.is-active { color: var(--ink); }
.sub-th-arrow { font-size: 10px; margin-left: 2px; }

.sub-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 60ms ease, opacity 120ms ease;
}
.sub-table tbody tr:last-child { border-bottom: 0; }
.sub-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
}
.sub-empty td {
  padding: 24px 12px;
  text-align: center;
  color: var(--ink-mute);
}

/* Project name column */
.sub-name-cell { padding: 8px 12px; }
.sub-name-link {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  width: 100%;
}
.sub-name {
  font-weight: 600;
  color: var(--ink);
}
.sub-name-link:hover .sub-name { text-decoration: underline; }
.sub-sub {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 1px;
}
.sub-stage {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a86;
  margin-top: 2px;
  font-weight: 600;
}

.sub-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sub-cell-date {
  font-size: 11px;
  color: var(--ink-mute);
  padding-left: 2px;
}

/* ----- inline status dropdowns ----- */
.sub-cell-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 22px 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: #ececea;
  color: #4a4a48;
  cursor: pointer;
  max-width: 100%;
  /* Native select arrow handled by browser; keep right padding for it */
  appearance: auto;
  -webkit-appearance: auto;
  transition: filter 80ms ease, box-shadow 80ms ease;
}
.sub-cell-select:hover { filter: brightness(.97); }
.sub-cell-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(31,31,29,.15);
}
.sub-tone-idle { background-color: #f1f1ef; color: #6b6b68; border-color: #e3e3df; }
.sub-tone-na   { background-color: #f1f1ef; color: #999996; border-color: #e3e3df; }
.sub-tone-sent { background-color: #eef3fb; color: #2c5ba5; border-color: #dbe6f6; }
.sub-tone-work { background-color: #fbf2dc; color: #8a6d1e; border-color: #f1e3b1; }
.sub-tone-done { background-color: #e3f4e8; color: #2e6b3e; border-color: #c9e7d2; }

/* ----- N/A row dimming ----- */
.sub-row--na { opacity: .55; }
.sub-row--na:hover { opacity: 1; }
.sub-row:not(.sub-row--na):hover { background: var(--surface-2, #f7f7f5); }

/* Consistent keyboard focus (was a one-off 2px rgba ring). */
.sub-cell-select:focus-visible,
.sub-th-btn:focus-visible,
.sub-name-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Touch target — the inline status dropdowns are ~26px; bump on touch only. */
@media (pointer: coarse) {
  .sub-cell-select { min-height: 40px; }
}

/* ----- Mobile: stack each row into a labeled card -----
   table-layout:fixed crushed 5 columns into ~65px slivers on a phone with no
   breakpoint. A horizontal-scroll wrapper would fight the sticky <thead> (which
   relies on the PAGE scrolling, hence .sub-body overflow:visible). So below 640
   the table becomes a stack of cards: the header is hidden and each cell shows
   its column name via data-label (set in submittals.js). */
@media (max-width: 640px) {
  .sub-table { table-layout: auto; }
  .sub-table thead { display: none; }
  .sub-table, .sub-table tbody, .sub-table tr, .sub-table td { display: block; width: auto; }
  .sub-body { overflow: visible; }
  .sub-row {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 12px 14px;
    margin: 0 0 10px;
  }
  .sub-table tbody tr:last-child { margin-bottom: 0; }
  .sub-name-cell { padding: 0 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .sub-table tbody td { padding: 6px 0; }
  /* Column name in front of each stacked cell. */
  .sub-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 3px;
  }
}