/* SPC Dashboard Styles */

body {
  background-color: #f5f6fa;
  font-size: 14px;
}

/* Login Page */
.login-page {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  width: 100%;
  max-width: 400px;
}

.login-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.5rem;
}

.brand-icon {
  font-size: 1.2rem;
}

/* Live Indicator */
.live-indicator {
  color: #00ff88;
  font-size: 0.85rem;
  font-weight: bold;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Feature Tabs */
.nav-tabs .nav-link {
  color: #6c757d;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  position: relative;
}

.nav-tabs .nav-link.active {
  color: #0d6efd;
  border-bottom: 3px solid #0d6efd;
}

.nav-tabs .nav-link.tab-configured {
  color: #198754;
}

.nav-tabs .nav-link.tab-configured.active {
  color: #0d6efd;
}

.tab-dot {
  color: #198754;
  font-size: 0.6rem;
  vertical-align: super;
  margin-left: 2px;
}

/* Metric Cards */
.metric-card {
  border-radius: 8px;
  transition: transform 0.15s;
}

.metric-card:hover {
  transform: translateY(-2px);
}

.metric-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* Measurement Table */
.table-danger td {
  background-color: #fff5f5 !important;
}

.table-hover tbody tr:hover {
  background-color: #e8f4fd;
}

/* Cards */
.card {
  border-radius: 8px;
  border: 1px solid #e0e4e8;
}

.card-header {
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.85rem;
}

/* Charts */
canvas {
  max-width: 100%;
}

/* Flash effect — only applied to newly added measurement rows */
.measurement-new {
  animation: flash 0.5s ease-out;
}

@keyframes flash {
  0% { background-color: rgba(0, 255, 136, 0.15); }
  100% { background-color: transparent; }
}

/* Alerts */
.alert {
  font-size: 0.85rem;
  border-radius: 6px;
}

/* Setup page */
.input-group .btn {
  z-index: 0;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .metric-value {
    font-size: 0.9rem;
  }
  .metric-label {
    font-size: 0.6rem;
  }
}

/* Floor Dashboard Cards */
.floor-card {
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.floor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.floor-card .card-header {
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}

.floor-card .card-body small {
  font-size: 0.75rem;
}

.floor-card .card-footer {
  font-size: 0.7rem;
  background-color: #f8f9fa;
}

/* Stale job indicator */
.floor-card.stale {
  border-color: #ffc107 !important;
  opacity: 0.85;
}

/* Scrollbar styling */
.table-responsive::-webkit-scrollbar {
  width: 6px;
}

.table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* Excluded / flagged measurement rows */
.measurement-row-data-error {
  background-color: #f2f2f2 !important;
  color: #6c757d;
}
.measurement-row-data-error td {
  background-color: #f2f2f2 !important;
}
.measurement-row-assignable {
  background-color: #fff3cd !important;
}
.measurement-row-assignable td {
  background-color: #fff3cd !important;
}

/* Potential Cpk sub-badge */
.potential-cpk-badge {
  font-size: 0.7rem;
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* I-chart with side-attached histogram */
.i-chart-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
}
.i-chart-layout > div {
  position: relative;
  height: 260px;
}
.i-chart-hist {
  border-right: 1px solid #eee;
}

/* ============================================================
   Sidebar Layout
   ============================================================ */

:root {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 60px;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e0e0e0;
  --sidebar-link-color: #333333;
  --sidebar-link-hover-bg: #f0f4f8;
  --sidebar-link-active-bg: #e8f0fb;
  --sidebar-link-active-color: #0078E6;
  --sidebar-transition: 0.22s ease;
  --topbar-height: 52px;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
}

/* Fixed topbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
}

/* Wrapper */
.app-wrapper {
  display: flex;
  min-height: 100vh;
  padding-top: var(--topbar-height);
}

/* Sidebar */
#app-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--topbar-height));
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width var(--sidebar-transition);
  overflow: hidden;
  z-index: 100;
}

#app-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}


/* Sidebar user panel */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0078E6;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user-info {
  overflow: hidden;
  transition: opacity var(--sidebar-transition);
  min-width: 0;
}

.sidebar-user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-meta {
  font-size: 0.72rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-role-admin    { background: #fde8e8; color: #c0392b; }
.badge-role-engineer { background: #e8f0fb; color: #0078E6; }
.badge-role-supervisor { background: #e8f8f5; color: #1a7a5e; }
.badge-role-viewer   { background: #f4f4f4; color: #666; }

#app-sidebar.collapsed .sidebar-user-info {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

/* Logo footer */
.sidebar-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  min-height: 60px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Company brand mark at the foot of the login card — deliberately small so it
   reads as attribution, not as the app's own identity (the SPC icon at the top
   carries that). max-width keeps it inside the card on narrow shop-floor tablets. */
.login-logo-footer {
  width: 110px;
  max-width: 60%;
  height: auto;
}

.sidebar-footer img.logo-full {
  width: 140px;
  height: auto;
  transition: opacity var(--sidebar-transition);
}

.sidebar-footer img.logo-icon {
  width: 36px;
  height: 36px;
  position: absolute;
  opacity: 0;
  transition: opacity var(--sidebar-transition);
}

#app-sidebar.collapsed .sidebar-footer img.logo-full {
  opacity: 0;
  pointer-events: none;
}

#app-sidebar.collapsed .sidebar-footer img.logo-icon {
  opacity: 1;
}

/* Relocated AI disclosure — lives under the sidebar logo, app-wide */
.sidebar-disclosure {
  padding: 0 14px 12px;
  font-size: 0.62rem;
  line-height: 1.35;
  color: #9aa3ac;
  flex-shrink: 0;
  transition: opacity var(--sidebar-transition);
}

#app-sidebar.collapsed .sidebar-disclosure {
  display: none;
}

/* Nav links */
.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav a,
.sidebar-nav .sidebar-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--sidebar-link-color);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  margin: 2px 8px;
  border-left: 3px solid transparent;
  transition: background var(--sidebar-transition), color var(--sidebar-transition), border-color var(--sidebar-transition);
}

.sidebar-nav a:hover {
  background: var(--sidebar-link-hover-bg);
  color: var(--sidebar-link-active-color);
}

.sidebar-nav a.active {
  background: var(--sidebar-link-active-bg);
  color: var(--sidebar-link-active-color);
  font-weight: 600;
  border-left-color: var(--sidebar-link-active-color);
}

.sidebar-nav .sidebar-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sidebar-nav .sidebar-label {
  transition: opacity var(--sidebar-transition);
  overflow: hidden;
}

#app-sidebar.collapsed .sidebar-nav .sidebar-label {
  opacity: 0;
  width: 0;
}

/* Admin sub-links */
.sidebar-sub {
  padding-left: 8px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}

.sidebar-sub.open {
  max-height: 300px;
}

.sidebar-sub a {
  font-size: 0.825rem;
  font-weight: 400;
  padding: 7px 12px;
}

/* Admin group toggle button */
.sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--sidebar-link-color);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  margin: 2px 8px;
  width: calc(100% - 16px);
  cursor: pointer;
  text-align: left;
  transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-group-toggle:hover {
  background: var(--sidebar-link-hover-bg);
  color: var(--sidebar-link-active-color);
}

.sidebar-chevron {
  margin-left: auto;
  font-size: 0.65rem;
  transition: transform var(--sidebar-transition);
  flex-shrink: 0;
}

.sidebar-group-toggle.open .sidebar-chevron {
  transform: rotate(180deg);
}

/* Collapsed sidebar: hide group toggle, show sub-links as icons */
#app-sidebar.collapsed .sidebar-group-toggle {
  display: none;
}

#app-sidebar.collapsed .sidebar-sub {
  max-height: 300px;
  padding-left: 0;
}

.sidebar-section-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 8px 16px;
}

/* Pending-count badges in the sidebar (e.g. password reset requests) */
.sidebar-nav .badge { font-size: 0.62rem; }
.sidebar-admin-badge { font-size: 0.6rem; margin-left: 6px; }

/* Main content area */
#main-content {
  margin-left: var(--sidebar-width);
  transition: margin-left var(--sidebar-transition);
  flex: 1;
  min-width: 0;
  animation: main-fade-in 0.15s ease;
}

@keyframes main-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#main-content.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

/* Topbar sidebar toggle button */
#sidebar-toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1;
  margin-right: 6px;
}

#sidebar-toggle:hover {
  opacity: 0.8;
}

/* Tooltip for collapsed nav items */
#app-sidebar.collapsed .sidebar-nav a {
  position: relative;
}

#app-sidebar.collapsed .sidebar-nav a::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) - 4px);
  background: #333;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 200;
}

#app-sidebar.collapsed .sidebar-nav a:hover::after {
  opacity: 1;
}

/* ── SPC Alert Banner & Status Strip ─────────────────────────────────────── */
.spc-alert-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.spc-alert-banner.spc-alert-warn {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}
.spc-alert-banner.spc-alert-red {
  background: #f8d7da;
  border-color: #dc3545;
  color: #842029;
}

.spc-status-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 20px;
}
.spc-status-ok   { background: #d1e7dd; color: #0f5132; }
.spc-status-warn { background: #fff3cd; color: #664d03; }
.spc-status-red  { background: #f8d7da; color: #842029; }

/* ── SPC Point Color Legend ───────────────────────────────────────────────── */
.spc-point-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #6c757d;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Report page styles ─────────────────────────────────────── */
.report-ftab.active {
  color: #0078E6 !important;
  border-bottom: 2px solid #0078E6 !important;
  background: white !important;
}

.report-job-card:hover {
  border-color: #0078E6 !important;
  background: #f0f7ff;
}

/* ============================================================
   Responsive — iPad portrait & below (off-canvas drawer)
   Breakpoint: 992px (Bootstrap lg). At/above = fixed rail.
   ============================================================ */
@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer, hidden until opened */
  #app-sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
    z-index: 200;
  }

  /* Desktop icon-rail collapse does not apply on small screens —
     the drawer controls visibility instead, so force the full layout.
     Selectors match the base collapsed rules' specificity so labels win. */
  #app-sidebar.collapsed { width: var(--sidebar-width); }
  #app-sidebar.collapsed .sidebar-nav .sidebar-label,
  #app-sidebar.collapsed .sidebar-user-info { opacity: 1; width: auto; }
  #app-sidebar.collapsed .sidebar-disclosure { display: block; }
  #app-sidebar.collapsed .sidebar-footer img.logo-full { opacity: 1; }
  #app-sidebar.collapsed .sidebar-footer img.logo-icon { opacity: 0; }
  #app-sidebar.collapsed .sidebar-group-toggle { display: flex; }
  #app-sidebar.collapsed .sidebar-nav a::after { display: none; }

  /* Open state (toggled on <body> by sidebar.js) */
  body.drawer-open #app-sidebar { transform: translateX(0); }

  /* Content reclaims full width under the drawer */
  #main-content,
  #main-content.sidebar-collapsed { margin-left: 0; }

  /* Dimmed backdrop behind the open drawer (below topbar, above content) */
  #sidebar-backdrop {
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: rgba(15, 25, 40, 0.45);
    border: 0;
    z-index: 150;
  }
  #sidebar-backdrop[hidden] { display: none; }

  /* Dashboard metric cards: 3 per row instead of cramming 9 across */
  #metrics-row > .col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* ── Print / PDF export ─────────────────────────────────────── */
@media print {
  #app-sidebar,
  .navbar,
  .reports-search-panel,
  .report-ftab,
  .btn,
  .htmx-indicator {
    display: none !important;
  }

  #main-content,
  .app-wrapper,
  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  #report-panel {
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }

  #report-doc {
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    box-shadow: none !important;
  }

  canvas {
    max-height: none !important;
    page-break-inside: avoid;
  }

  .container-fluid {
    padding: 0 !important;
  }

  .reports-main-layout {
    display: block !important;
    height: auto !important;
  }
}

/* ============================================================
   Content measure and numeric alignment
   ============================================================

   The content column runs to Bootstrap's 1320px at xxl. That is right for the
   dashboard and the reports grid, and wrong for everything else: a four-column
   admin table stretched across it pins the first column to the far left and the
   action button to the far right, leaving a void down the middle, and a paragraph
   of explanatory text runs past 120 characters when 65-75 is the readable range.

   These cap the measure per content type rather than per page, so a screen can mix
   a wide table with narrow prose. */

/* rem, not ch. ch scales with the element's font size, and this app's base is 14px
   rather than the 16px the 65-75ch guideline assumes — so 68ch resolved to only 535px
   and wrapped explanatory paragraphs into five cramped lines beside a 1100px card.
   A fixed measure keeps the line length stable whatever the text size, and 46rem is
   ~90 characters at 14px: comfortable to track, and proportionate to the cards it sits
   above. Measured in a headless browser rather than judged by eye. */
.measure-prose {
  max-width: 46rem;
}

/* Admin vocabulary screens: capped below the container's 1320px, but only modestly.
   The original problem was Status and Action stranding at the far right, and the
   .vocab-table colgroup below fixes that directly by pinning their widths — so the cap
   is only stopping the panel from looking lost on a wide monitor, not doing the real
   work. 800px was overcorrecting: it squeezed the Code column until its helper text
   wrapped, and left the page marooned in whitespace.

   Centred, not merely capped. Without margin-inline the panel sits against the left
   edge of Bootstrap's centred container, so the page reads as shifted left with a void
   on the right, while every other admin screen fills the container and looks centred.
   Bootstrap's own .container supplies these margins, which is why nothing else needed
   them. */
.panel-constrained {
  max-width: 1100px;
  margin-inline: auto;
}

/* A single-column form wants a narrower measure than a page of tables. Two named
   classes rather than one shared number: a change made for a data page must not be able
   to widen a form page, and vice versa. The alternative — an inline max-width per page —
   is what let user-form.ejs sit at 700px while everything else was at 1100px, with no
   record of why. */
.form-constrained {
  max-width: 700px;
  margin-inline: auto;
}

/* ── Page furniture ─────────────────────────────────────────────────────────────
   Shared by every page that uses partials/page-head.ejs. Previously each page set its
   own top margin and heading size, so the eight admin screens started at four different
   vertical positions. */
.page {
  padding-block: 1.75rem 2.5rem;
  padding-inline: 1rem;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #1a2a3a;
}

/* Sits directly under the title and is read as part of it, so it keeps the title's
   left edge and takes a measure that stays readable rather than running the width of
   the page. */
.page-subtitle {
  margin: 0.35rem 0 0;
  max-width: 46rem;
  color: #6c757d;
  font-size: 0.9375rem;
}

/* A heading with an action beside it — "Departments" and its Add button. Wraps rather
   than compressing the button on a narrow screen. */
.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.page-header-row .page-header {
  margin-bottom: 0;
}

/* The info popover trigger. Sized to sit on a label's baseline without lifting the
   line, and given a visible focus ring because it is keyboard-reachable. */
.info-icon {
  color: #6c757d;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  border-radius: 50%;
}

.info-icon:hover {
  color: #0078E6;
}

.info-icon:focus-visible {
  outline: 2px solid #0078E6;
  outline-offset: 2px;
}

/* Vocabulary tables: a status badge and a single action button need a fixed, modest
   share. Left to auto-layout they take whatever the flexible label column does not,
   which is what spread them apart. */
.vocab-table col.c-code        { width: 30%; }
.vocab-table col.c-status      { width: 6.5rem; }
.vocab-table col.c-action      { width: 7.5rem; }
/* Two buttons rather than one (Edit + Deactivate). Measured: the pair occupies ~137px,
   so 10rem leaves a normal cell gutter rather than the band of dead space 11.5rem did. */
.vocab-table col.c-action-pair { width: 10rem; }
/* Wide enough for the longest badge, "Assignable Cause". */
.vocab-table col.c-category    { width: 11rem; }
/* 30% suits a four-column table; on a five-column one it is too generous, and codes
   are short tokens either way. Explicit class rather than a :has()/nth-child selector
   that would silently re-target if a column were ever added. */
.vocab-table col.c-code-sm     { width: 7rem; }

.vocab-table th,
.vocab-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: middle;
}

/* Measured values are read as a column, compared row to row. Proportional digits
   put the decimal point in a different place on every line; tabular figures line
   them up. Right alignment does the same for whole numbers.

   Applied to the value columns only. Feature names and units stay left-aligned,
   because they are read as words. */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Codes are identifiers, not prose: monospace digits keep OD_FINISH and RA from
   shifting the eye between rows. */
.code-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Spec table.

   A right-aligned numeric column sitting next to a left-aligned text one needs a
   real gutter, or the two collide: table-sm ships 0.25rem of cell padding, so
   right-aligned "0.003" ended up touching left-aligned "mm" and the pair read as a
   single field. The header row collided the same way, as "USL Unit".

   Widths are declared rather than left to auto-layout. Eight columns of short values
   across a full-width card gave the numeric columns more room than they can use while
   starving the boundary between USL and Unit. */
.spec-table {
  table-layout: fixed;
}

.spec-table th,
.spec-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: middle;
}

/* The gutter goes on the numeric side of the boundary, so the digits stay clear of
   the unit without pushing every column apart. */
.spec-table .num {
  padding-right: 1.1rem;
  white-space: nowrap;
}

/* Sums to 100. Nominal made three limit columns instead of two, so every other column
   gave up a little rather than letting the total run over 100 and leaving the browser to
   re-proportion them — which it does silently, and not in the order you would choose. */
.spec-table col.c-feature  { width: 18%; }
.spec-table col.c-limit    { width: 12%; }
.spec-table col.c-unit     { width: 7%;  }
.spec-table col.c-chart    { width: 10%; }
.spec-table col.c-subgroup { width: 9%;  }
.spec-table col.c-cpk      { width: 9%;  }
.spec-table col.c-actions  { width: 11%; }

@media (max-width: 767.98px) {
  /* Fixed layout cannot compress this far; let the table scroll instead of crushing
     the feature name. The wrapper supplies the scroll. */
  .spec-table { table-layout: auto; min-width: 46rem; }
}

/* Revisions table. Same problem as the spec table: five columns of short values
   across a full-width card stranded the View and Publish buttons at the far right,
   a long way from the row they act on. Notes takes the remaining space because it is
   the only column whose length varies. */
.rev-table {
  table-layout: fixed;
}

.rev-table th,
.rev-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: middle;
}

.rev-table col.c-rev         { width: 7rem; }
.rev-table col.c-status      { width: 8rem; }
.rev-table col.c-created     { width: 13rem; }
/* Sized for the widest row, which is a draft: View, Edit and Publish. History was a
   fourth button here once and overflowed — that is why the change history lives on
   its own screen rather than as a control on every row. If another action is ever
   added, widen this or move something out; do not let the buttons wrap. */
.rev-table col.c-rev-actions { width: 13rem; }

.rev-table td:last-child .btn + .btn { margin-left: 0.25rem; }

@media (max-width: 767.98px) {
  .rev-table { table-layout: auto; }
}

/* Revision change history table. Same column-width discipline as the spec and
   revision tables: without it the detail column, which is the only one whose length
   varies, gets the same share as the timestamp. */
.audit-table col.c-when { width: 12rem; }
.audit-table col.c-who  { width: 12rem; }
.audit-table col.c-part { width: 12rem; }
.audit-table col.c-what { width: 9rem; }

.audit-table th,
.audit-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: top;
}

/* Parts overview. Sums to 100, as with .spec-table: declared widths that total more than
   100 make the browser lay the table out wider than its wrapper and the whole thing
   scrolls. Description is the only unconstrained column, so it absorbs the slack rather
   than the action column stranding its button at the far right. */
.parts-table {
  table-layout: fixed;
}

.parts-table th,
.parts-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: middle;
}

.parts-table .num {
  padding-right: 1.1rem;
  white-space: nowrap;
}

.parts-table col.c-part        { width: 13%; }
.parts-table col.c-rev         { width: 10%; }
.parts-table col.c-count       { width: 9%;  }
.parts-table col.c-measured    { width: 12%; }
.parts-table col.c-status      { width: 12%; }
.parts-table col.c-part-action { width: 10%; }

@media (max-width: 767.98px) {
  /* Fixed layout cannot compress eight columns this far; let it scroll rather than
     crushing the part number, which is the one column nobody can guess at. */
  .parts-table { table-layout: auto; min-width: 52rem; }
}