/* ============================================================
   CANONICAL ADMIN TABLE STYLE  —  admin-table-consistency-20260725
   Austin msg68126 (2026-07-25):
     "doing an Opus five consistency pass across the tables in
      admin.freedomclub.com and admin.freedomfulfillment.com to ensure
      they all are consistent. The way the builds tab looks in the
      brand builds sidebar tab of admin.freedomclub.com is sort of like
      the standard ... make the other tables all consistent with that
      and all the same CSS and everything like that, so it's just
      consistency across the board"

   THE REFERENCE = admin.freedomclub.com > Brand Build > Builds table
   (.bb-builds-table). Values below were extracted from that table's
   LIVE computed styles on 2026-07-25, not from a written spec.

   ONE shared file, served by BOTH dashboards at /canonical-table.css.
   This is deliberately the LAST stylesheet in <head> on both surfaces so
   it is the single source of truth for table aesthetics and supersedes
   the older per-dashboard overlay blocks (admin-table-aesthetic-overlay
   -20260705, p515b-standardise-headers-20260721, data-ecom-table).

   AESTHETIC ONLY. No data, markup, column, sorting or logic changes.

   CANON VALUES (from the live Builds table):
     table   font-family Inter, font-size 13.5px, background #FFFFFF
     thead th  bg #F9FAFB · color #374151 · 13.5px · weight 500
               text-transform none · letter-spacing normal
               padding 6px 14px · border-bottom 1px solid #E5E7EB
               text-align left
     tbody td  padding 12px 14px · 13.5px · weight 400 · color #1A1A1A
               border-bottom 1px solid #F0F0F0 · bg #FFFFFF
               vertical-align middle
     last row  border-bottom 0
     hover     transparent (the reference table has NO hover fill)
     frame     wrapper 1px solid #E5E7EB · radius 10px · overflow hidden
               containing .card chrome neutralised (no double border)
   ============================================================ */

/* ---- Scope helper -----------------------------------------------------
   Applies to the classed data tables on both dashboards PLUS unclassed
   data tables that live inside a .card / .table-container (that is how
   the FF Issues + Shipping Bags tables escaped every previous pass).
   Print/invoice documents and skeleton loaders are excluded on purpose:
   they have their own deliberate print styling.
   -------------------------------------------------------------------- */

/* ============ TABLE SHELL ============ */
:root:not(.dark) .table,
:root:not(.dark) .data-table,
:root:not(.dark) .peter-table,
:root:not(.dark) .bb-table,
:root:not(.dark) .bb-progress-table,
:root:not(.dark) .bb-roadmap-table,
:root:not(.dark) .tr-ent-table,
:root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table),
:root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  background: #FFFFFF;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ HEADER ROW ============ */
:root:not(.dark) .table thead th,
:root:not(.dark) .data-table thead th,
:root:not(.dark) .peter-table thead th,
:root:not(.dark) .bb-table thead th,
:root:not(.dark) .bb-progress-table thead th,
:root:not(.dark) .bb-roadmap-table thead th,
:root:not(.dark) .tr-ent-table thead th,
:root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) thead th,
:root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) thead th {
  background: #F9FAFB !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 6px 14px !important;
  text-align: left;
  border-top: 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
  vertical-align: middle;
  white-space: nowrap;
  /* FROZEN-COLS-20260817 (Austin voice 2026-08-17: "make the image and product name
     columns frozen as well, the column headers"). This declaration used to be an
     unconditional `position: static !important`, which beat every attempt to make a
     header row sticky and is why the Products and Launched header rows scrolled away.
     Sticky opt-in is now honoured via :not() on the opt-in classes below. */
  position: static;
}

/* FROZEN-COLS-20260817: sticky opt-in wins over the canonical static default. */
:root .bb-sticky-head thead th,
:root .bb-sticky-head thead th.bb-prod-frz,
:root th.bb-prod-frz,
:root .bb-live-scroll table.bb-live-table thead th {
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* No icons on column headers (Austin msg64364). */
:root .table thead th > i.th-lead,
:root .data-table thead th > i.th-lead,
:root .table thead th > svg.th-lead,
:root .data-table thead th > svg.th-lead {
  display: none !important;
}

/* ============ BODY CELLS ============ */
:root:not(.dark) .table tbody td,
:root:not(.dark) .data-table tbody td,
:root:not(.dark) .peter-table tbody td,
:root:not(.dark) .bb-table tbody td,
:root:not(.dark) .bb-progress-table tbody td,
:root:not(.dark) .bb-roadmap-table tbody td,
:root:not(.dark) .tr-ent-table tbody td,
:root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody td,
:root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) tbody td {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 400;
  color: #1A1A1A;
  background: #FFFFFF;
  border-bottom: 1px solid #F0F0F0 !important;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: background 120ms ease;
}

/* Last row sits flush against the frame edge. */
:root:not(.dark) .table tbody tr:last-child td,
:root:not(.dark) .data-table tbody tr:last-child td,
:root:not(.dark) .peter-table tbody tr:last-child td,
:root:not(.dark) .bb-table tbody tr:last-child td,
:root:not(.dark) .bb-progress-table tbody tr:last-child td,
:root:not(.dark) .bb-roadmap-table tbody tr:last-child td,
:root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody tr:last-child td,
:root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* ============ HOVER ============
   The reference Builds table has NO hover fill. Matching it exactly. */
/* LAUNCHED-TAB-20260804 item 1 (Austin, asked multiple times): the Launched tab's
   frozen Client column must KEEP its opaque white background and its 1px right-edge
   divider while hovering, otherwise side-scrolled columns bleed through under the
   client name. This rule set carried `background:transparent !important` AND
   `box-shadow:none !important`, which beat the per-table rules in brand-build.js on
   both source order and specificity, so the sticky cell lost its fill and its divider
   on hover. Excluding the frozen cell here fixes the cause instead of stacking more
   specificity on top. Every other table keeps the canonical no-hover-fill look. */
:root:not(.dark) .table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .data-table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .peter-table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .bb-table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .bb-progress-table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .bb-roadmap-table tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz),
:root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) tbody tr:hover td:not(.bb-live-frozen):not(.bb-prod-frz) {
  background: transparent !important;
  box-shadow: none !important;
}

/* Frozen Client column on the Launched tab: opaque + divider in EVERY state. */
:root:not(.dark) .bb-live-scroll table.bb-live-table tbody tr:hover td.bb-live-frozen,
:root:not(.dark) .bb-live-scroll table.bb-live-table tbody td.bb-live-frozen,
:root.dark .bb-live-scroll table.bb-live-table tbody tr:hover td.bb-live-frozen,
:root.dark .bb-live-scroll table.bb-live-table tbody td.bb-live-frozen {
  background: #ffffff !important;
  box-shadow: inset -1px 0 0 0 var(--border, #e5e7eb) !important;
}

/* FROZEN-COLS-20260817 - Products tab frozen columns (icon | Image | Product Name).
   Austin voice 2026-08-17: "make the image and product name columns frozen as well, the
   column headers, and have white background behind all of those columns. So that on the
   side scroll ... when you hover your cursor over a row, it's removing the divider line,
   and you can see everything else underneath it."
   Two separate defects were doing that:
     1. the hover rule above stripped the frozen cell's background to transparent, so the
        scrolling columns were visible THROUGH the pinned cells;
     2. `border-collapse: separate` on .bb-table means a border set on the <tr> never
        paints, so the row divider vanished. The divider must live on the td.
   Fixed here at source rather than by stacking another specificity layer on top. */
:root:not(.dark) .bb-table tbody td.bb-prod-frz,
:root:not(.dark) .bb-table tbody tr:hover td.bb-prod-frz,
:root:not(.dark) .data-table tbody td.bb-prod-frz,
:root:not(.dark) .data-table tbody tr:hover td.bb-prod-frz {
  background: #ffffff !important;
  background-clip: padding-box !important;
  border-bottom: 1px solid #F0F0F0 !important;
}
:root:not(.dark) .bb-table tbody tr:last-child td.bb-prod-frz,
:root:not(.dark) .data-table tbody tr:last-child td.bb-prod-frz {
  border-bottom: 0 !important;
}
/* Header cells of the frozen columns: opaque header grey, never transparent. */
:root:not(.dark) .bb-table thead th.bb-prod-frz,
:root:not(.dark) .data-table thead th.bb-prod-frz {
  background: #F9FAFB !important;
  background-clip: padding-box !important;
}
/* Launched tab: the frozen Client header must stay opaque while BOTH axes scroll. */
:root:not(.dark) .bb-live-scroll table.bb-live-table thead th {
  background: #F9FAFB !important;
  background-clip: padding-box !important;
}

/* ============ RIGHT-ALIGNED NUMERICS (opt-in, preserved) ============ */
:root:not(.dark) .table td.num,
:root:not(.dark) .table th.num,
:root:not(.dark) .table td[data-num],
:root:not(.dark) .table th[data-num],
:root:not(.dark) .data-table td.num,
:root:not(.dark) .data-table th.num,
:root:not(.dark) .data-table td[data-num],
:root:not(.dark) .data-table th[data-num] {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============ EMPTY STATE ============ */
:root:not(.dark) .table .empty-row td,
:root:not(.dark) .data-table .empty-row td,
:root:not(.dark) .table tbody tr.empty-state td,
:root:not(.dark) .data-table tbody tr.empty-state td {
  text-align: center;
  color: #6B7280 !important;
  padding: 40px !important;
  font-style: normal;
}

/* ============ FRAME (single 1px border, no double border) ============
   Canon locked 2026-05-27 msg43016. Kept here so the frame travels with
   the same shared file as the cell styling. */
.fc-table-frame,
.bb-table-frame {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}
/* DARKMODE-20260829: the frame previously had no dark variant, so framed tables
   (Task board and every other .bb-table-frame surface) rendered a white card on
   charcoal. Uses the shared theme variables, with charcoal literals as fallback
   only for contexts that do not define them. */
:root.dark .fc-table-frame,
:root.dark .bb-table-frame {
  border-color: var(--border, #3a3b40);
  background: var(--bg-card, #26272b);
}
.card:has(> .fc-table-frame),
.card:has(> div > .fc-table-frame),
.card:has(> .bb-table-frame),
.card:has(> div > .bb-table-frame) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Canonical horizontal scroll region: scrolls, shows no scrollbar. */
.bb-table-scroll,
.fc-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bb-table-scroll::-webkit-scrollbar,
.fc-table-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ============ DARK MODE ============
   Same geometry + type scale as light; dark palette retained so the two
   dashboards stay consistent in dark mode too. */
:root.dark .table thead th,
:root.dark .data-table thead th,
:root.dark .peter-table thead th,
:root.dark .bb-table thead th,
:root.dark .bb-progress-table thead th,
:root.dark .bb-roadmap-table thead th,
:root.dark .tr-ent-table thead th,
:root.dark .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) thead th,
:root.dark .table-container:not(#invoice-preview-content) table:not(.skeleton-table) thead th {
  background: var(--bg-hover, #313337) !important;
  color: var(--text-secondary, #a8a9ad) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 6px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--border, #3a3b40) !important;
  vertical-align: middle;
}
:root.dark .table tbody td,
:root.dark .data-table tbody td,
:root.dark .peter-table tbody td,
:root.dark .bb-table tbody td,
:root.dark .bb-progress-table tbody td,
:root.dark .bb-roadmap-table tbody td,
:root.dark .tr-ent-table tbody td,
:root.dark .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody td,
:root.dark .table-container:not(#invoice-preview-content) table:not(.skeleton-table) tbody td {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--border-light, #34353a) !important;
  vertical-align: middle;
}

/* ============ MOBILE ============
   Mobile-native remains a standing requirement, so the canon tightens
   rather than forcing desktop padding onto small screens. Proportions
   stay in the same ratio as the reference table. */
@media (max-width: 1024px) {
  :root:not(.dark) .table thead th,
  :root:not(.dark) .data-table thead th,
  :root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) thead th,
  :root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) thead th {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  :root:not(.dark) .table tbody td,
  :root:not(.dark) .data-table tbody td,
  :root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody td,
  :root:not(.dark) .table-container:not(#invoice-preview-content) table:not(.skeleton-table) tbody td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 600px) {
  :root:not(.dark) .table thead th,
  :root:not(.dark) .data-table thead th,
  :root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) thead th {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  :root:not(.dark) .table tbody td,
  :root:not(.dark) .data-table tbody td,
  :root:not(.dark) .card:not(#invoice-preview-content):not(#billing-statement) table:not(.skeleton-table) tbody td {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }
}

/* ============================================================
   UNCLASSED DATA TABLES (container-scoped)
   A handful of FF data tables are emitted without any table class,
   so they inherit nothing from the selectors above. They are matched
   here by their stable container id instead of by class, so the canon
   reaches them without adding markup or depending on a class attribute
   surviving the CDN/HTML cache layer.

   Invoice + billing PRINT documents (#invoice-preview-content,
   #billing-statement) are deliberately NOT in this list - they keep
   their own print styling.
   ============================================================ */
:root:not(.dark) #split-compare-view table thead th,
:root:not(.dark) #support-open table thead th,
:root:not(.dark) #support-solved table thead th,
:root:not(.dark) #settings-audit-log table thead th,
:root:not(.dark) #sq-queue-container table thead th,
:root:not(.dark) #adm-iss-content table thead th,
:root:not(.dark) #shipping-bags table thead th {
  background: #F9FAFB !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 6px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
  vertical-align: middle;
}
:root:not(.dark) #split-compare-view table tbody td,
:root:not(.dark) #support-open table tbody td,
:root:not(.dark) #support-solved table tbody td,
:root:not(.dark) #settings-audit-log table tbody td,
:root:not(.dark) #sq-queue-container table tbody td,
:root:not(.dark) #adm-iss-content table tbody td,
:root:not(.dark) #shipping-bags table tbody td {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #1A1A1A !important;
  border-bottom: 1px solid #F0F0F0 !important;
  vertical-align: middle;
}
:root:not(.dark) #split-compare-view table tbody tr:last-child td,
:root:not(.dark) #support-open table tbody tr:last-child td,
:root:not(.dark) #support-solved table tbody tr:last-child td,
:root:not(.dark) #settings-audit-log table tbody tr:last-child td,
:root:not(.dark) #sq-queue-container table tbody tr:last-child td,
:root:not(.dark) #adm-iss-content table tbody tr:last-child td,
:root:not(.dark) #shipping-bags table tbody tr:last-child td {
  border-bottom: 0 !important;
}
:root:not(.dark) #split-compare-view table tbody tr:hover td,
:root:not(.dark) #support-open table tbody tr:hover td,
:root:not(.dark) #support-solved table tbody tr:hover td,
:root:not(.dark) #settings-audit-log table tbody tr:hover td,
:root:not(.dark) #sq-queue-container table tbody tr:hover td,
:root:not(.dark) #adm-iss-content table tbody tr:hover td,
:root:not(.dark) #shipping-bags table tbody tr:hover td {
  background: transparent !important;
}
/* Header row wrappers on these tables carry an inline grey <tr> bg; the th
   background above sits on top of it, so no markup change is needed. */

/* ---- END CANONICAL ADMIN TABLE STYLE ---- */


/* ===========================================================================
   BB BUILDS SUB TAB COLUMN SPACING (2026-08-04)
   Austin: "add more spacing between the columns, all too close together".
   ROOT CAUSE, and why previous spacing passes had zero visible effect:
   the canonical rules earlier in THIS file declare `padding: 12px 14px !important`
   as a SHORTHAND on `:root:not(.dark) .data-table tbody td`, `.bb-table tbody td`
   and `.card ... table:not(.skeleton-table) tbody td`. A shorthand at !important
   weight expands to all four longhands at !important, which silently beat every
   per-cell inline padding in fc-education/js/brand-build.js (20px on Start /
   Next Milestone / Finish, 24px on Portal, 64px on Stage / Progress). All ten
   Builds columns therefore computed to a flat 14px. Longhand overrides here also
   lost for the same reason, so the fix must use the SHORTHAND too.
   Scoped ONLY to .bb-table--builds: no other admin table on any surface changes.
   SPACING ONLY: fonts, colours, widths, column order, borders and the uniform
   grey progress bar are untouched. Vertical padding stays 12px.
   =========================================================================== */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table.data-table:not(.skeleton-table) tbody td,
:root:not(.dark) table.bb-table--builds.bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td,
:root table.bb-table--builds.bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table.data-table:not(.skeleton-table) thead th,
:root:not(.dark) table.bb-table--builds.bb-table.data-table:not(.skeleton-table):not(.products-table) thead th,
:root table.bb-table--builds.bb-table.data-table:not(.skeleton-table):not(.products-table) thead th {
  padding: 6px 14px !important;
}
/* Row-icon column: 36px fixed, icon only, stays tight. */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(1),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(1),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(1) {
  padding: 12px 14px 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(1),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(1),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(1) {
  padding: 6px 14px 6px 14px !important;
}
/* Portal: 56px centred chain icon, keeps its bespoke left bias (24 -> 30). */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(4),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(4),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(4) {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(4),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(4),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(4) {
  padding: 6px 14px !important;
}
/* BUILDSUI-20260810-b (Austin msg72694): reduce two visible gaps.
   - Next Milestone (td:nth-child(6)) -> Stage (td:nth-child(7)): tightening the
     right padding on cell 6 alone closes the ~106px pill-to-pill gap toward the
     100px mark. Combined with the js-side <col> shrink 152 -> 120 the visible gap
     lands near 60px, matching Start -> Next Milestone and Client -> Brand.
   - Progress (td:nth-child(8)) -> Action (td:nth-child(9)): both padding-right on
     cell 8 and padding-left on cell 9 previously carried 40px of slack (80px visual
     gap). Reduced to 14px each = 28px visual gap, in line with the rest of the row.
*/
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(6),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(6),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(6) {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(6),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(6),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(6) {
  padding: 6px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(8),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(8),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(8) {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(8),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(8),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(8) {
  padding: 6px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(9),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(9),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(9) {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(9),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(9),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(9) {
  padding: 6px 14px !important;
}
/* Action column holds the buttons: right side stays tight so the table gains no
   dead whitespace at its edge (Austin msg67399 explicitly trimmed that). */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(10),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(10),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(10) {
  padding: 12px 14px 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(10),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(10),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(10) {
  padding: 6px 14px 6px 14px !important;
}

/* ===========================================================================
   BB BUILDS: PORTAL/START GAP + CLIENT COLUMN TRUNCATION (2026-08-05)
   Austin msg71064:
     "More space needed between portal column and start column in Builds tab"
     "Client column should be more narrow, truncating/no text wrapping
      longer client names"
   SAME ROOT CAUSE as the 2026-08-04 block above: the canonical
   `padding: ... !important` SHORTHAND beats every longhand and every inline
   per-cell padding, so the fix has to be a shorthand at this same specificity.
   Longhand attempts (including a padding-left override in
   fc-education-dashboard.html) computed to 22px and had no visible effect.
   Column order: 1 icon, 2 Client, 3 Brand, 4 Portal, 5 Start,
   6 Next Milestone, 7 Finish, 8 Stage, 9 Progress, 10 Action.
   Portal (nth-child 4) keeps padding-right 10px from the block above, so the
   Start left padding is what opens the gutter: 22px -> 52px. Combined with the
   Client column giving up 48px of width to Start in js/brand-build.js
   (Client 244 -> 196, Start 144 -> 192) the table still totals exactly 1500px.
   SPACING ONLY: no fonts, colours, borders, column order or progress bar change.
   =========================================================================== */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) tbody td:nth-child(5),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(5),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(5) {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table) thead th:nth-child(5),
:root:not(.dark) table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(5),
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:nth-child(5) {
  padding: 6px 14px !important;
}

/* Client column (nth-child 2): single line, ellipsis, no wrapping. The name
   span in js/brand-build.js carries a native title attribute, so the full name
   is still revealed on hover. overflow:hidden on the cell clips the span so a
   long name can never bleed into the Brand column. */
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(2) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:root table.bb-table--builds:not(.bb-table--phase).bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:nth-child(2) > div > span:first-child {
  display: inline-block !important;
  max-width: 170px !important; /* NAMEWIDEN-20260825 (Austin approved): 108 -> 170. This !important rule was overriding the inline max-width on the name span, so the Client column widening had no visible effect until this changed too. */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
/* ---- END BB BUILDS PORTAL/START GAP + CLIENT TRUNCATION ---- */


/* ===========================================================================
   BUILDS SUB-SUB-TAB UNIFORM COLUMN SPACING (SUBSUBTABS-VISUAL-20260830)

   AUSTIN VERBATIM (voice 2026-08-30):
     b4 "make the progress bar in the products sub-subtab. The width of that progress
         bar is what it should be in all of the other sub-subtabs as well. In store,
         it's gotten smaller, in emails and ads and launched, and it's all gotten
         smaller, so I need that fixed."
     b5 "I just need consistent spacing between the columns in those sub-subtabs 'cause
         due date, for the most part, has a lot of space between it and build a stage,
         which I need to be fixed."

   ROOT CAUSE, MEASURED IN THE LIVE DOM 2026-08-30 (not inferred from reading code):
   the rules above target Builds columns BY POSITION at !important - td:nth-child(4)
   for "Portal", (6) for "Next Milestone", (8) for "Progress", (9) for "Action". Those
   indices describe the ALL tab, which has a fixed 10-column layout. A sub-sub-tab has
   a different column order AND a variable number of checkbox columns (Store 7, Emails
   4, Socials 2, Products 0), so nth-child(8) resolved to Progress on one tab and to a
   checkbox on another. Each tab therefore got a different gutter and, because the
   blanket `padding: 12px 22px !important` also beat the renderer's own inline 14px,
   a different amount of the fixed 138px Progress column was left for the bar:
   measured products 62px, socials 56px, store/emails/launched 48px.

   THE FIX IS AT THE SHARED LEVEL, in one place, for every sub-sub-tab at once:
   the positional rules above are now scoped with :not(.bb-table--phase) so they apply
   ONLY to the All tab exactly as before, and the phase tables get ONE uniform gutter
   here. The All tab is deliberately NOT changed - Austin did not ask for it and it is
   his signed-off reference.

   Vertical padding stays 12px/6px, matching the canonical rows above. This block sets
   SPACING ONLY: no fonts, colours, widths, borders or column order are touched.
   =========================================================================== */
/* SPECIFICITY NOTE: the blanket Builds rule earlier in this file is
     `:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds...`
   which scores higher than a plain `:root table...`. Measured in the live DOM: with the
   lower-specificity form the phase cells still computed to 22px. These selectors are
   therefore written to OUT-SCORE it rather than merely follow it in source order, using
   the same .card/:not() shape the canonical block uses. This is scoping, not an override
   stack: the blanket rule is simultaneously narrowed with :not(.bb-table--phase) above,
   so exactly one rule applies to any given cell. */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table) tbody td,
:root:not(.dark) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td,
:root table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td {
  padding: 12px 14px !important;
}
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table) thead th,
:root:not(.dark) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) thead th,
:root table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) thead th {
  padding: 6px 14px !important;
}
/* First column is the 36px page icon: keep it tight to the table edge so the icon
   sits under the same left rule as the All tab's icon column. */
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table) tbody td:first-child,
:root table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) tbody td:first-child,
:root:not(.dark) .card:not(#none1):not(#none2) table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table) thead th:first-child,
:root table.bb-table--builds.bb-table--phase.bb-table.data-table:not(.skeleton-table):not(.products-table) thead th:first-child {
  padding-left: 14px !important;
  padding-right: 6px !important;
}

/* FFUI3 item1 (msg2092): no box-shadow on table / row / table-card hover; subtle bg only */
table:hover, table tr:hover, table tbody tr:hover, table tbody tr:hover td,
.table-container:hover, .table-wrapper:hover, .card:has(table):hover, .card:has(.table-container):hover { box-shadow: none !important; }
:root:not(.dark) table tbody tr:hover > td { background-color: #FAFBFC; }
:root.dark table tbody tr:hover > td { background-color: #2e2e2e; }