/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Scale the production display for shop-floor monitors without enlarging other pages. */
.production-live-board { font-size: clamp(16px, 1vw, 40px); }
.production-live-board .text-xs { font-size: 0.8em; line-height: 1.5; }
.production-live-board .text-sm { font-size: 0.95em; line-height: 1.5; }
.production-live-board .text-xl { font-size: 1.35em; }
.production-live-board .text-2xl { font-size: 1.75em; }
.production-live-board .production-activity-item { padding: 0.5em; border-radius: 0; }
.production-activity-item:hover, .production-activity-item[aria-pressed="true"] { background: #f686381a; }
.production-activity-item:focus-visible { outline: 2px solid #f68638; outline-offset: 2px; }
@media (min-width: 1024px) {
  .production-live-board aside { width: clamp(24rem, 26vw, 62rem); }
}

.production-live-board header { padding: 0.8em 1.2em; gap: 1em; }
.production-live-board header > div:last-child { flex-wrap: wrap; }
.production-live-board [data-live-production-target="counts"] { padding: 0.6em 1.2em; gap: 1.5em; }
.production-live-board [data-live-production-target="counts"] .w-3 { width: 0.75em; height: 0.75em; }
.production-live-board aside [role="tablist"] { background: var(--color-bg-white, #fff); padding: 0.4em; gap: 0.25em; }
.production-live-board aside [role="tab"] { padding: 0.65em 0.8em; border: 0; font-size: 0.85em; line-height: 1.3; color: var(--color-text-sub, #59616a); }
.production-live-board aside [role="tab"][aria-selected="true"] { background: var(--color-bg-beige, #f3f2ee); color: var(--color-text-strong, #17202a); font-weight: 700; }
.production-live-board aside [role="tab"][aria-selected="false"]:hover { background: var(--color-bg-beige, #f3f2ee); }
.production-live-board aside [role="tab"]:focus-visible { outline: 2px solid #f68638; outline-offset: -4px; }
.production-live-board aside [role="tabpanel"] { padding: 1em; }
.production-live-board aside li { padding: 0.5em 0 0.5em 0.75em; }
.production-live-board aside li + li { margin-top: 1em; }
.production-live-board [data-live-production-target="stats"] > * + * { margin-top: 1em; }
.production-stage-complete { position: relative; padding: 0.75em 0.75em 0.75em 3.25em; background: color-mix(in srgb, var(--color-success, #005c31) 10%, white); }
.production-stage-check { position: absolute; left: 0.4em; top: 0.25em; font-size: 2em; line-height: 1; font-weight: 700; color: var(--color-success, #005c31); }
.production-stage-active { padding: 0.75em; background: color-mix(in srgb, var(--color-orange, #f68638) 18%, white); border-left: 0.2em solid var(--color-orange, #f68638); }
.production-live-board [data-design-viewer-target="status"] { position: absolute; top: 1em; left: 1.2em; padding: 0.3em 0.6em; max-width: 60%; }
.production-live-board [data-live-production-target="coverage"] { padding: 0.5em 1.5em; }
/* A compact, touch-friendly camera rail; tooltips appear beside the canvas. */
.production-camera-controls { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; border: 1px solid var(--color-stroke-soft, #cbd5e1); background: var(--color-bg-white, #fff); }
.production-camera-controls button { position: relative; display: flex; align-items: center; justify-content: center; width: max(48px, 2.4em); height: max(48px, 2.4em); padding: 0; color: var(--color-text-strong, #17202a); }
.production-camera-controls button + button { border-top: 1px solid var(--color-stroke-soft, #cbd5e1); }
.production-camera-controls svg { width: 1em; height: 1em; min-width: 20px; min-height: 20px; }
.production-camera-controls button:disabled { opacity: 0.4; cursor: default; }
.production-camera-controls button:hover { background: #f686381a; }
.production-camera-controls button[aria-pressed="true"] { color: #9a430b; background: #f6863826; }
.production-camera-controls button:focus-visible { outline: 2px solid #f68638; outline-offset: -3px; }
.production-control-tooltip { display: none; position: absolute; right: calc(100% + 0.5em); padding: 0.4em 0.65em; font-size: 0.7em; white-space: nowrap; background: var(--color-bg-white, #fff); border: 1px solid var(--color-stroke-soft, #cbd5e1); pointer-events: none; }
.production-camera-controls button:hover .production-control-tooltip, .production-camera-controls button:focus-visible .production-control-tooltip { display: block; }
.production-live-board [hidden] { display: none; }

.production-live-board .production-stage-compact { padding: 0.5em 0.6em; font-size: 0.85em; }
.production-live-board .production-stage-compact.production-stage-complete { padding-left: 2.5em; }
.production-live-board .production-stage-compact .production-stage-check { top: 0.3em; font-size: 1.6em; }
.production-live-board .production-stage-compact p { margin-top: 0.15em; font-size: 0.9em; }
.production-live-board [data-live-production-target="stats"] > .production-stage-compact + .production-stage-compact { margin-top: 0.45em; }
.production-fastener-list { margin-top: 0.4em; }
.production-fastener-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.5em 0; border-bottom: 1px solid var(--color-stroke-soft, #cbd5e1); }
.production-fastener-list dt { min-width: 0; font-size: 0.85em; }
.production-fastener-list dd { flex-shrink: 0; min-width: 2ch; text-align: right; font-size: 1.2em; font-weight: 700; font-variant-numeric: tabular-nums; }