:root {
  color-scheme: light;
  --bg: #eef3f8;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --ink: #172033;
  --muted: #667085;
  --line: #dbe3ee;
  --blue: #7b263d;
  --cyan: #9a3d56;
  --green: #16a34a;
  --amber: #f59e0b;
  --red: #e11d48;
  --violet: #7c3aed;
  --maroon: #7b263d;
  --maroon-dark: #4f1728;
  --maroon-soft: #f8eef1;
  --shadow: 0 18px 48px rgba(62, 28, 39, 0.1);
}

/* Live Commentary: deterministic factory event feed */
#commentaryTab [hidden],
.commentary-settings-dialog [hidden] {
  display: none !important;
}

.commentary-shell {
  --commentary-positive: #16834a;
  --commentary-positive-soft: #edf9f2;
  --commentary-critical: #d92d20;
  --commentary-critical-soft: #fff1f0;
  --commentary-attention: #d97706;
  --commentary-attention-soft: #fff8e8;
  --commentary-information: #2878b8;
  --commentary-information-soft: #eff7ff;
  display: grid;
  gap: 14px;
  min-height: calc(100vh - 104px);
  color: #101828;
}

.commentary-page-head,
.commentary-selection,
.commentary-briefing,
.commentary-feed-panel,
.commentary-summary,
.commentary-empty-state {
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  background: #fff;
}

.commentary-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .035);
}

.commentary-page-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.commentary-title-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #ead6dc;
  border-radius: 8px;
  color: var(--maroon);
  background: var(--maroon-soft);
}
.commentary-title-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.commentary-page-head h2 {
  margin: 2px 0 3px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.commentary-page-head p:not(.eyebrow) {
  margin: 0;
  color: #667085;
  font-size: 11px;
}

.commentary-live-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.commentary-motion.active { color: var(--maroon); border-color: #d9b8c1; background: var(--maroon-soft); }
.commentary-motion.active svg { animation: commentary-motion-cue 1.8s ease-in-out infinite; }
@keyframes commentary-motion-cue { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }

.commentary-connection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #475467;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
}

.commentary-connection i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #98a2b3;
}

.commentary-connection.live { color: #08783f; border-color: #b7e4ca; background: #f1fbf5; }
.commentary-connection.live i { background: var(--commentary-positive); box-shadow: 0 0 0 3px rgba(22, 131, 74, 0.12); }
.commentary-connection.disconnected { color: #b42318; border-color: #f3c3bf; background: #fff6f5; }
.commentary-connection.disconnected i { background: var(--commentary-critical); }
.commentary-connection.paused { color: #a15c00; border-color: #f2d3a2; background: #fffaf0; }
.commentary-connection.paused i { background: var(--commentary-attention); }

.commentary-updated {
  display: grid;
  gap: 1px;
  color: #98a2b3;
  font-size: 9px;
  text-transform: uppercase;
}

.commentary-updated strong {
  color: #344054;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
}

.commentary-selection {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(300px, 1fr) minmax(300px, 1.15fr);
  align-items: center;
  gap: 16px;
  padding: 13px 15px;
}

.commentary-briefing {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 14px 16px;
  border-left: 3px solid var(--maroon);
  background: linear-gradient(90deg, #fff8fa 0, #fff 34%);
}

.commentary-briefing-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--maroon);
  box-shadow: 0 7px 18px rgba(123, 38, 61, 0.2);
}

.commentary-briefing-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.commentary-briefing-copy { min-width: 0; overflow: hidden; }
.commentary-briefing-copy > span { color: #7b263d; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.commentary-briefing-copy p { margin: 4px 0 0; color: #172033; font-size: 13px; line-height: 1.5; font-weight: 500; }
.commentary-briefing-copy p.changing { animation: commentary-talk-in .45s ease-out; }

@keyframes commentary-talk-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.commentary-briefing-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #ead5dc;
  border-radius: 6px;
  color: #7b263d;
  background: #fff;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.commentary-briefing-auto i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: commentary-live-pulse 1.8s ease-in-out infinite; }
@keyframes commentary-live-pulse { 50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, .13); } }

.commentary-selection-copy {
  display: grid;
  gap: 2px;
}

.commentary-selection-copy span {
  color: #101828;
  font-size: 13px;
  font-weight: 600;
}

.commentary-selection-copy small {
  color: #667085;
  font-size: 10px;
}

.commentary-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid #e1e5ea;
  border-radius: 7px;
  background: #f5f7fa;
}

.commentary-mode-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  gap: 6px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  color: #667085;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
}

.commentary-mode-tabs button.active {
  color: #fff;
  background: var(--maroon);
  box-shadow: 0 4px 10px rgba(123, 38, 61, 0.18);
}

.commentary-mode-tabs svg,
.commentary-empty-state svg,
.commentary-live-controls svg,
.commentary-feed-head svg,
.commentary-event-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.commentary-entity-picker {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr);
  gap: 7px;
}

.commentary-entity-picker label {
  gap: 3px;
}

.commentary-entity-picker label span {
  color: #667085;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.commentary-entity-picker input,
.commentary-entity-picker select {
  height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  background: #fff;
  font-size: 11px;
}

.commentary-empty-state {
  display: grid;
  min-height: 340px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 30px;
  text-align: center;
}

.commentary-empty-state > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 7px;
  color: var(--maroon);
  background: #f9eff2;
}

.commentary-empty-state > span svg { width: 22px; height: 22px; }
.commentary-empty-state strong { font-size: 13px; font-weight: 600; }
.commentary-empty-state p { margin: 0; color: #667085; font-size: 11px; }

.commentary-content {
  display: grid;
  gap: 12px;
}

.commentary-summary {
  --summary-tone: var(--commentary-information);
  --summary-soft: var(--commentary-information-soft);
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(280px, 1.4fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 19px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--summary-soft), #fff 55%);
}

.commentary-summary::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--summary-tone);
  content: "";
}

.commentary-summary.positive { --summary-tone: var(--commentary-positive); --summary-soft: var(--commentary-positive-soft); }
.commentary-summary.critical { --summary-tone: var(--commentary-critical); --summary-soft: var(--commentary-critical-soft); }
.commentary-summary.attention { --summary-tone: var(--commentary-attention); --summary-soft: var(--commentary-attention-soft); }

.commentary-summary-identity {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.commentary-summary-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  color: var(--summary-tone);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
}

.commentary-summary-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.commentary-summary-identity span { color: #667085; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.commentary-summary-identity strong { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.commentary-summary-identity small { color: #475467; font-size: 10px; }
.commentary-summary-message { margin: 0; color: #344054; font-size: 11px; line-height: 1.55; }
.commentary-summary-metrics { display: flex; gap: 14px; }
.commentary-summary-metrics div { display: grid; min-width: 70px; gap: 2px; text-align: right; }
.commentary-summary-metrics span { color: #667085; font-size: 9px; text-transform: uppercase; }
.commentary-summary-metrics strong { color: #101828; font-size: 14px; font-weight: 600; }

.commentary-feed-panel {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .055);
}

.commentary-feed-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 13px 18px;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}

.commentary-feed-head > div { display: grid; gap: 2px; }
.commentary-feed-head > div span { color: #101828; font-size: 13px; font-weight: 650; }
.commentary-feed-head > div small { color: #667085; font-size: 10.5px; }

.commentary-filter-bar {
  padding: 10px 13px;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}
.commentary-filter-bar:not(:has(.commentary-advanced-filters:not([hidden]))) { display: none; }

.commentary-category-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
}

.commentary-category-tabs button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #d8dde5;
  border-radius: 5px;
  color: #475467;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}

.commentary-category-tabs button.active { color: #fff; border-color: var(--maroon); background: var(--maroon); }
.commentary-category-tabs i { width: 7px; height: 7px; border-radius: 50%; }
.commentary-category-tabs i.positive { background: var(--commentary-positive); }
.commentary-category-tabs i.critical { background: var(--commentary-critical); }
.commentary-category-tabs i.attention { background: var(--commentary-attention); }
.commentary-category-tabs i.information { background: var(--commentary-information); }

.commentary-advanced-filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr)) auto;
  align-items: end;
  gap: 7px;
  padding-top: 10px;
}

.commentary-advanced-filters label { gap: 3px; color: #667085; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.commentary-advanced-filters input,
.commentary-advanced-filters select { height: 32px; min-width: 0; padding: 0 7px; border: 1px solid #d0d5dd; border-radius: 5px; color: #344054; background: #fff; font-size: 10px; }

.commentary-timeline {
  display: grid;
  align-content: start;
  max-height: calc(100vh - 270px);
  min-height: 430px;
  gap: 0;
  overflow-y: auto;
  padding: 8px 22px 24px;
  background: #fcfdff;
  scrollbar-color: #c8d0dc transparent;
  scrollbar-width: thin;
}

.commentary-timeline::-webkit-scrollbar { width: 8px; }
.commentary-timeline::-webkit-scrollbar-track { background: transparent; }
.commentary-timeline::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #c8d0dc; background-clip: padding-box; }
.commentary-timeline::-webkit-scrollbar-thumb:hover { background: #98a2b3; background-clip: padding-box; }

.commentary-event {
  --event-tone: var(--commentary-information);
  --event-soft: var(--commentary-information-soft);
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 13px;
  min-height: 52px;
  padding: 15px 5px;
  border-bottom: 1px solid #edf0f4;
}

.commentary-event:last-child { border-bottom: 0; }

.commentary-event.positive { --event-tone: var(--commentary-positive); --event-soft: var(--commentary-positive-soft); }
.commentary-event.critical { --event-tone: var(--commentary-critical); --event-soft: var(--commentary-critical-soft); }
.commentary-event.attention { --event-tone: var(--commentary-attention); --event-soft: var(--commentary-attention-soft); }
.commentary-event.new-update { animation: commentary-new 1.1s ease-out; }

@keyframes commentary-new {
  from { background: var(--event-soft); transform: translateY(-4px); }
  to { background: transparent; transform: translateY(0); }
}

.commentary-event-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--event-tone);
  border: 1px solid color-mix(in srgb, var(--event-tone) 18%, transparent);
  background: var(--event-soft);
}

.commentary-event-body { min-width: 0; }
.commentary-event-topline { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.commentary-status-label { padding: 2px 5px; border-radius: 4px; color: var(--event-tone); background: var(--event-soft); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.commentary-event-time { color: #98a2b3; font-size: 9px; }
.commentary-event h3 { margin: 0 0 3px; color: #101828; font-size: 11px; font-weight: 600; }
.commentary-event p { margin: 0; max-width: 1220px; color: #293449; font-size: 16.5px; line-height: 1.6; }
.commentary-event p strong { color: var(--maroon); font-weight: 650; }
.commentary-event .commentary-event-time { display: block; margin-top: 3px; color: #7b8798; font-size: 10px; }
.commentary-event-context { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.commentary-event-context span { padding: 2px 5px; border: 1px solid #e3e7ed; border-radius: 4px; color: #667085; background: #fafbfc; font-size: 8.5px; }
.commentary-event-actions { display: flex; align-items: flex-start; }
.commentary-acknowledge { min-height: 28px; padding: 0 8px; border: 1px solid #d0d5dd; border-radius: 5px; color: #344054; background: #fff; cursor: pointer; font-size: 9px; }
.commentary-acknowledge:disabled { color: #98a2b3; cursor: default; }

.commentary-feed-empty,
.commentary-feed-error,
.commentary-feed-loading {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #667085;
  font-size: 11px;
  text-align: center;
}

.commentary-conversation-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 100px;
  padding: 18px 4px;
  color: #475467;
}

.commentary-conversation-empty p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.commentary-conversation-empty strong { color: var(--maroon); }

.commentary-feed-loading i {
  width: 24px;
  height: 24px;
  border: 2px solid #e4e7ec;
  border-top-color: var(--maroon);
  border-radius: 50%;
  animation: commentary-spin .8s linear infinite;
}

@keyframes commentary-spin { to { transform: rotate(360deg); } }

.commentary-load-older {
  display: flex;
  width: max-content;
  align-items: center;
  justify-self: center;
  align-self: center;
  gap: 7px;
  min-height: 34px;
  margin: 10px auto 2px;
  padding: 0 12px;
  border: 1px solid #d8dee8;
  border-radius: 7px;
  color: #475467;
  background: #fff;
  box-shadow: 0 2px 5px rgba(16, 24, 40, .04);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
}
.commentary-load-older:hover { color: var(--maroon); border-color: #d7b5bf; background: #fffafb; }
.commentary-load-older svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.commentary-queued-updates {
  justify-self: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #efc278;
  border-radius: 6px;
  color: #9a5a00;
  background: #fff9ed;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
}

.commentary-settings-card { width: min(900px, calc(100vw - 32px)); }
.commentary-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.commentary-settings-grid label { color: #667085; font-size: 10px; font-weight: 600; }
.commentary-settings-grid input,
.commentary-settings-grid select { height: 36px; min-width: 0; padding: 0 9px; border: 1px solid #d0d5dd; border-radius: 6px; color: #101828; background: #fff; font-size: 11px; }
.commentary-settings-toggle { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid #e1e5ea; border-radius: 6px; background: #f8fafc; }
.commentary-settings-toggle input { width: 15px; height: 15px; }

body[data-theme="dark"] .commentary-shell {
  color: #f4f6f8;
}

body[data-theme="dark"] .commentary-page-head,
body[data-theme="dark"] .commentary-selection,
body[data-theme="dark"] .commentary-feed-panel,
body[data-theme="dark"] .commentary-summary,
body[data-theme="dark"] .commentary-empty-state,
body[data-theme="dark"] .commentary-filter-bar {
  border-color: #263445;
  background: #101925;
}

body[data-theme="dark"] .commentary-feed-head,
body[data-theme="dark"] .commentary-mode-tabs { border-color: #263445; background: #152131; }
body[data-theme="dark"] .commentary-shell h2,
body[data-theme="dark"] .commentary-shell h3,
body[data-theme="dark"] .commentary-shell strong,
body[data-theme="dark"] .commentary-selection-copy span { color: #f4f6f8; }
body[data-theme="dark"] .commentary-shell p,
body[data-theme="dark"] .commentary-shell small,
body[data-theme="dark"] .commentary-shell span { color: #aab6c5; }
body[data-theme="dark"] .commentary-entity-picker input,
body[data-theme="dark"] .commentary-entity-picker select,
body[data-theme="dark"] .commentary-advanced-filters input,
body[data-theme="dark"] .commentary-advanced-filters select { color: #e8edf3; border-color: #344357; background: #111c29; }

@media (max-width: 1180px) {
  .commentary-page-head { align-items: flex-start; }
  .commentary-live-controls { flex-wrap: wrap; justify-content: flex-end; }
  .commentary-selection { grid-template-columns: 1fr 1.2fr; }
  .commentary-selection-copy { grid-column: 1 / -1; }
  .commentary-summary { grid-template-columns: minmax(200px, .8fr) minmax(260px, 1.4fr); }
  .commentary-summary-metrics { grid-column: 1 / -1; justify-content: flex-end; }
  .commentary-advanced-filters { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
}

@media (max-width: 1380px) {
  .commentary-page-head { align-items: flex-start; }
  .commentary-page-title { min-width: 240px; }
  .commentary-live-controls { max-width: 620px; row-gap: 7px; }
  .commentary-live-controls .compact-button { white-space: nowrap; }
}

@media (max-width: 760px) {
  .commentary-page-head,
  .commentary-selection { grid-template-columns: 1fr; align-items: stretch; }
  .commentary-page-head { flex-direction: column; }
  .commentary-briefing { grid-template-columns: 38px minmax(0, 1fr); }
  .commentary-briefing-auto { grid-column: 2; justify-self: start; }
  .commentary-live-controls { justify-content: flex-start; }
  .commentary-entity-picker { grid-template-columns: 1fr; }
  .commentary-summary { grid-template-columns: 1fr; }
  .commentary-summary-metrics { justify-content: flex-start; overflow-x: auto; }
  .commentary-feed-head { align-items: flex-start; flex-direction: column; }
  .commentary-advanced-filters { grid-template-columns: 1fr 1fr; }
  .commentary-event { grid-template-columns: 36px minmax(0, 1fr); }
  .commentary-event-actions { grid-column: 2; }
  .commentary-settings-grid { grid-template-columns: 1fr; }
}

/* Production Planner */
#plannerTab { background: #f5f7fa; }
.planner-shell { display: grid; gap: 14px; min-width: 0; }
.planner-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 4px 2px 14px; border-bottom: 1px solid #dbe3ee; }
.planner-toolbar h2 { margin: 2px 0 4px; font-size: 22px; letter-spacing: 0; }
.planner-toolbar p { margin: 0; color: #667085; font-size: 12px; }
.planner-toolbar-actions { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.planner-toolbar-actions label { display: grid; gap: 4px; color: #667085; font-size: 10px; }
.planner-toolbar-actions input { width: 135px; height: 36px; border: 1px solid #cfd8e5; border-radius: 6px; background: #fff; padding: 0 9px; color: #172033; }
.planner-tabs { display: flex; gap: 3px; overflow-x: auto; padding: 4px; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-tabs button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 5px; background: transparent; color: #526078; font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
.planner-tabs button:hover { background: #f0f4f8; color: #1d4f7a; }
.planner-tabs button.active { background: #1f5f96; color: #fff; }
.planner-body { min-width: 0; }
.planner-view-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.planner-view-head h3 { margin: 0 0 3px; font-size: 16px; letter-spacing: 0; }
.planner-view-head p { margin: 0; color: #667085; font-size: 11px; }

.planner-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.planner-kpis article { position: relative; display: grid; align-content: center; gap: 4px; min-height: 86px; padding: 11px; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-kpis article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #64748b; }
.planner-kpis article.blue::before { background: #2563eb; }
.planner-kpis article.green::before { background: #16a34a; }
.planner-kpis article.amber::before { background: #f59e0b; }
.planner-kpis article.red::before { background: #dc2626; }
.planner-kpis span { color: #667085; font-size: 10px; }
.planner-kpis strong { color: #172033; font-size: 21px; line-height: 1; letter-spacing: 0; }
.planner-kpis small { color: #8994a7; font-size: 9px; line-height: 1.25; }
.planner-overview-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; }
.planner-card { min-width: 0; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-card > header { min-height: 61px; padding: 13px 15px 10px; border-bottom: 1px solid #edf1f6; }
.planner-card h3 { margin: 0 0 3px; font-size: 13px; letter-spacing: 0; }
.planner-card header p { margin: 0; color: #667085; font-size: 10px; }
.planner-card-body { min-height: 220px; padding: 14px; }

.planner-capacity-list { display: grid; align-content: start; gap: 11px; }
.planner-capacity-row { display: grid; gap: 5px; width: 100%; padding: 0; border: 0; background: transparent; color: #172033; text-align: left; cursor: pointer; }
.planner-capacity-row > span { display: grid; grid-template-columns: minmax(70px, 1fr) 80px 45px; align-items: center; gap: 8px; }
.planner-capacity-row strong { font-size: 11px; }
.planner-capacity-row span small { color: #667085; font-size: 9px; }
.planner-capacity-row span b { text-align: right; font-size: 11px; }
.planner-capacity-row > i { display: block; height: 7px; overflow: hidden; border-radius: 4px; background: #e8edf3; }
.planner-capacity-row > i em { display: block; height: 100%; background: #64748b; }
.planner-capacity-row > i.success em { background: #16a34a; }
.planner-capacity-row > i.warning em { background: #f59e0b; }
.planner-capacity-row > i.critical em { background: #dc2626; }
.planner-capacity-row > small { color: #8994a7; font-size: 9px; }
.planner-risk-summary { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 8px; }
.planner-risk-summary div { display: grid; place-content: center; min-height: 120px; border: 1px solid #dbe3ee; border-radius: 6px; text-align: center; }
.planner-risk-summary strong { font-size: 28px; letter-spacing: 0; }
.planner-risk-summary span { color: #667085; font-size: 10px; }
.planner-risk-summary .success strong { color: #15803d; }
.planner-risk-summary .warning strong { color: #b45309; }
.planner-risk-summary .critical strong { color: #b91c1c; }
.planner-plan-compare { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 13px; }
.planner-plan-compare div { display: grid; gap: 3px; }
.planner-plan-compare span, .planner-plan-compare small { color: #667085; font-size: 10px; }
.planner-plan-compare strong { font-size: 24px; letter-spacing: 0; }
.planner-plan-compare > i { grid-column: 1 / -1; display: block; height: 10px; overflow: hidden; border-radius: 5px; background: #e8edf3; }
.planner-plan-compare > i em { display: block; height: 100%; background: #2563eb; }
.planner-plan-compare > small { grid-column: 1 / -1; }

.planner-table-wrap { max-width: 100%; overflow: auto; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-table { width: 100%; border-collapse: collapse; color: #111827; font-size: 10px; }
.planner-table th { position: sticky; top: 0; z-index: 2; height: 38px; padding: 7px 9px; border-bottom: 1px solid #dbe3ee; background: #f3f6f9; color: #526078; font-size: 9px; font-weight: 650; text-align: left; text-transform: uppercase; white-space: nowrap; }
.planner-table td { height: 44px; padding: 7px 9px; border-bottom: 1px solid #edf1f6; vertical-align: middle; white-space: nowrap; }
.planner-table tr:last-child td { border-bottom: 0; }
.planner-table tbody tr[data-planner-order] { cursor: pointer; }
.planner-table tbody tr:hover { background: #f8fafc; }
.planner-table td > strong { display: block; font-weight: 650; }
.planner-table td > small { display: block; margin-top: 2px; color: #8994a7; font-size: 8px; }
.planner-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 999px; background: #eef2f6; color: #526078; font-size: 9px; font-weight: 650; }
.planner-status.success { background: #dcfce7; color: #166534; }
.planner-status.warning { background: #fef3c7; color: #92400e; }
.planner-status.critical { background: #fee2e2; color: #991b1b; }
.planner-actions { display: flex; gap: 4px; }
.planner-actions button { min-height: 25px; padding: 0 7px; border: 1px solid #cfd8e5; border-radius: 5px; background: #fff; color: #1f5f96; font: inherit; font-size: 9px; cursor: pointer; }
.planner-actions button:hover { border-color: #1f5f96; }
.planner-actions button.danger { color: #b91c1c; }
.planner-empty, .planner-results-empty { display: grid; place-content: center; min-height: 150px; padding: 20px; color: #667085; font-size: 11px; text-align: center; }
.planner-loading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.planner-loading i { height: 180px; border-radius: 7px; background: #e8edf3; animation: pulse 1.2s ease-in-out infinite; }

.planner-order-modal { width: 100%; }
.planner-order-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.planner-order-grid label, .planner-inline-filter label, .planner-scenario-form label { display: grid; gap: 5px; color: #667085; font-size: 10px; }
.planner-order-grid input, .planner-order-grid select, .planner-inline-filter select, .planner-scenario-form input, .planner-scenario-form select { width: 100%; height: 37px; min-width: 0; border: 1px solid #cfd8e5; border-radius: 6px; background: #fff; padding: 0 9px; color: #172033; }
.planner-order-grid .span-2 { grid-column: span 2; }
.planner-detail-modal { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; }
.planner-recommendation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.planner-recommendation-summary > div { display: grid; gap: 4px; padding: 11px; border: 1px solid #dbe3ee; border-radius: 6px; background: #f8fafc; }
.planner-recommendation-summary span { color: #667085; font-size: 9px; }
.planner-recommendation-summary strong { font-size: 12px; }
.planner-explanation { margin-bottom: 12px; padding: 12px; border-left: 3px solid #2563eb; background: #eff6ff; }
.planner-explanation strong { font-size: 11px; }
.planner-explanation p { margin: 4px 0; color: #334155; font-size: 11px; line-height: 1.5; }
.planner-explanation small { color: #92400e; font-size: 10px; }
.planner-capacity-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.planner-capacity-cards article { border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-capacity-cards article.recommended { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.planner-capacity-cards header { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid #edf1f6; }
.planner-capacity-cards h3 { margin: 0; font-size: 13px; }
.planner-capacity-cards header p { margin: 3px 0 0; color: #667085; font-size: 9px; }
.planner-capacity-cards header > span { align-self: start; padding: 4px 7px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 8px; }
.planner-capacity-cards article > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 12px; }
.planner-capacity-cards article > div span { display: grid; gap: 3px; color: #667085; font-size: 9px; }
.planner-capacity-cards article > div strong { color: #172033; font-size: 15px; }
.planner-capacity-cards footer { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-top: 1px solid #edf1f6; }
.planner-capacity-cards footer small { color: #667085; font-size: 8px; }

.schedule-board { max-width: 100%; max-height: calc(100vh - 270px); overflow: auto; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.schedule-head, .schedule-row { display: grid; grid-template-columns: 110px repeat(var(--schedule-columns, 28), minmax(115px, 1fr)); width: max-content; min-width: 100%; }
.schedule-head { position: sticky; top: 0; z-index: 5; background: #eef3f8; }
.schedule-machine { position: sticky; left: 0; z-index: 4; display: grid; align-items: center; min-height: 52px; padding: 8px 10px; border-right: 1px solid #dbe3ee; border-bottom: 1px solid #dbe3ee; background: #f8fafc; font-size: 11px; }
.schedule-head .schedule-machine { z-index: 7; background: #e8eef5; }
.schedule-head > span { display: grid; place-content: center; min-height: 52px; border-right: 1px solid #dbe3ee; border-bottom: 1px solid #dbe3ee; text-align: center; }
.schedule-head b { font-size: 9px; }
.schedule-head small { color: #667085; font-size: 8px; }
.schedule-slot { min-height: 66px; margin: 4px; padding: 7px; border: 1px solid #dbe3ee; border-radius: 5px; background: #f8fafc; }
.schedule-slot.available { display: grid; place-content: center; color: #94a3b8; font-size: 9px; }
button.schedule-slot { display: grid; align-content: center; gap: 2px; color: #fff; text-align: left; cursor: pointer; }
button.schedule-slot.occupied { border-color: #2563eb; background: #2563eb; }
button.schedule-slot.running { border-color: #16a34a; background: #16a34a; }
button.schedule-slot.completed { border-color: #4d8f65; background: #4d8f65; }
button.schedule-slot.at-risk { border-color: #d97706; background: #d97706; }
button.schedule-slot.late { border-color: #dc2626; background: #dc2626; }
.schedule-slot strong { font-size: 10px; }
.schedule-slot span, .schedule-slot small, .schedule-slot i { color: inherit; font-size: 8px; font-style: normal; }
.schedule-board:fullscreen { max-height: none; padding: 18px; background: #f5f7fa; }

.planner-capacity-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 12px; }
.planner-inline-filter { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 12px; padding: 12px; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-inline-filter label { min-width: 320px; }
.planner-recommended-note { color: #15803d !important; }
.planner-scenario-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; align-items: end; gap: 9px; padding: 13px; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-scenario-form .planner-check { display: flex; align-items: center; gap: 7px; min-height: 37px; }
.planner-scenario-form .planner-check input { width: 16px; height: 16px; }
.planner-scenario-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.planner-scenario-compare article { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 14px; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-scenario-compare article > span, .planner-scenario-compare article > strong, .planner-scenario-compare article > .planner-status { grid-column: 1 / -1; }
.planner-scenario-compare article > span { color: #1f5f96; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.planner-scenario-compare article > strong { font-size: 17px; }
.planner-scenario-compare article div { display: grid; gap: 3px; }
.planner-scenario-compare small { color: #667085; font-size: 9px; }
.planner-scenario-compare b { font-size: 11px; }
.planner-simulation-note { padding: 10px; border-left: 3px solid #f59e0b; background: #fffbeb; color: #92400e; font-size: 10px; }
.planner-accuracy-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.planner-accuracy-summary article { display: grid; gap: 5px; padding: 13px; border: 1px solid #dbe3ee; border-radius: 7px; background: #fff; }
.planner-accuracy-summary span { color: #667085; font-size: 9px; }
.planner-accuracy-summary strong { font-size: 20px; letter-spacing: 0; }
.planner-accuracy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.planner-accuracy-trend { margin-bottom: 12px; }
#plannerTab:fullscreen { overflow: auto; padding: 20px; background: #f5f7fa; }

@media (max-width: 1380px) {
  .planner-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planner-scenario-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .planner-toolbar { align-items: flex-start; flex-direction: column; }
  .planner-toolbar-actions { justify-content: flex-start; }
  .planner-overview-grid, .planner-capacity-layout { grid-template-columns: 1fr; }
  .planner-accuracy-grid { grid-template-columns: 1fr; }
  .planner-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-capacity-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .planner-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-order-grid, .planner-capacity-cards, .planner-recommendation-summary, .planner-accuracy-summary, .planner-scenario-form, .planner-scenario-compare { grid-template-columns: 1fr; }
  .planner-order-grid .span-2 { grid-column: auto; }
  .planner-inline-filter { align-items: stretch; flex-direction: column; }
  .planner-inline-filter label { min-width: 0; }
}

#plannerOrderDialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

#plannerOrderDialog .planner-order-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

#plannerOrderDialog .modal-head {
  min-height: 68px;
  margin: 0;
  padding: 15px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

#plannerOrderDialog .modal-head h2 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

#plannerOrderDialog .modal-head .eyebrow {
  margin: 0;
  color: #7b263d;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

#plannerOrderDialog .planner-order-grid {
  align-content: start;
  padding: 18px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f8fafc;
  scrollbar-gutter: stable;
}

#plannerOrderDialog .planner-order-grid label {
  min-width: 0;
  color: #596579;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

#plannerOrderDialog .planner-order-grid input,
#plannerOrderDialog .planner-order-grid select {
  height: 38px;
  color: #172033;
  font-size: 12px;
  font-weight: 450;
  text-transform: none;
}

#plannerOrderDialog .message {
  min-height: 0;
  margin: 0;
  padding: 0 20px;
  background: #fff;
}

#plannerOrderDialog .message:not(:empty) {
  min-height: 34px;
  padding-top: 8px;
}

#plannerOrderDialog .modal-actions {
  min-height: 62px;
  margin: 0;
  padding: 11px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

#plannerOrderDialog .modal-actions .button {
  min-width: 112px;
  min-height: 38px;
}

@media (max-width: 1050px) {
  #plannerOrderDialog .planner-order-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #plannerOrderDialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #plannerOrderDialog .planner-order-modal {
    max-height: calc(100vh - 16px);
  }

  #plannerOrderDialog .planner-order-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  #plannerOrderDialog .planner-order-grid .span-2 {
    grid-column: auto;
  }

  #plannerOrderDialog .modal-head,
  #plannerOrderDialog .modal-actions {
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Charts & Insights */
.charts-insights {
  --insight-standard: #64748b;
  --insight-feasible: #2563eb;
  --insight-good: #16a34a;
  --insight-warning: #f59e0b;
  --insight-m30: #ea580c;
  --insight-critical: #dc2626;
  display: grid;
  gap: 16px;
  color: #172033;
}

.charts-insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid #dfe5ee;
}

.charts-insights-head h2 {
  margin: 2px 0 3px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.charts-insights-head p { margin: 0; color: #64748b; }
.charts-insights-head .eyebrow { color: #8b263f; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.charts-insights-head > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.charts-insights-head > div:last-child > span { color: #64748b; font-size: 12px; margin-right: 4px; }

.charts-subtabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid #dfe5ee;
  background: #f8fafc;
  border-radius: 8px;
}

.charts-subtabs button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526078;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.charts-subtabs button:hover { color: #8b263f; background: #fff; }
.charts-subtabs button.active { color: #fff; background: #8b263f; }

.insight-filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.insight-filter-chips span {
  padding: 5px 9px;
  border: 1px solid #dbe2ec;
  border-radius: 999px;
  background: #fff;
  color: #526078;
  font-size: 11px;
}

.insight-section-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}
.insight-section-toolbar label { display: grid; gap: 5px; color: #64748b; font-size: 11px; }
.insight-section-toolbar select { min-width: 155px; height: 34px; border: 1px solid #cfd8e5; border-radius: 6px; background: #fff; padding: 0 30px 0 10px; color: #172033; }
.insight-section-toolbar > span { color: #64748b; font-size: 11px; }

.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.insight-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fff;
}
.insight-card.wide { grid-column: 1 / -1; }
.insight-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 70px; padding: 15px 16px 12px; border-bottom: 1px solid #edf1f6; }
.insight-card h3 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; letter-spacing: 0; }
.insight-card header p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.45; }
.insight-card-body { min-height: 310px; padding: 16px; }
.insight-card footer { padding: 10px 16px; border-top: 1px solid #edf1f6; color: #64748b; font-size: 11px; }
.insight-card-actions { display: flex; align-items: center; gap: 8px; }
.insight-card-actions > span { color: #64748b; font-size: 11px; }
.insight-card-actions button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #dbe2ec; border-radius: 6px; background: #fff; color: #526078; cursor: pointer; }
.insight-card-actions button:hover { border-color: #8b263f; color: #8b263f; }
.insight-card-actions svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.insight-empty { display: grid; place-content: center; gap: 5px; min-height: 250px; text-align: center; color: #64748b; }
.insight-empty strong { color: #334155; font-size: 13px; font-weight: 600; }
.insight-empty span { font-size: 11px; }

.insight-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: #526078; font-size: 10px; }
.insight-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: #94a3b8; }
.insight-legend .standard::before { background: var(--insight-standard); }
.insight-legend .feasible::before { background: var(--insight-feasible); }
.insight-legend .good::before, .insight-legend .running::before { background: var(--insight-good); }
.insight-legend .idle::before, .insight-legend .first::before { background: var(--insight-warning); }
.insight-legend .second::before { background: var(--insight-m30); }

.insight-target-chart { display: grid; gap: 18px; height: 100%; }
.insight-target-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); align-items: end; gap: 8px; min-height: 240px; }
.insight-target-groups button { position: relative; display: grid; gap: 7px; min-width: 0; border: 0; background: transparent; color: #334155; cursor: pointer; }
.insight-target-groups b { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.insight-target-bars { display: flex; align-items: end; justify-content: center; gap: 3px; height: 205px; border-bottom: 1px solid #cbd5e1; }
.insight-target-bars i { width: 9px; min-height: 2px; border-radius: 2px 2px 0 0; }
.insight-target-bars .standard { background: var(--insight-standard); }
.insight-target-bars .feasible { background: var(--insight-feasible); }
.insight-target-bars .good { background: var(--insight-good); }

.insight-bars { display: grid; gap: 11px; }
.insight-bars > button { position: relative; display: grid; gap: 5px; width: 100%; padding: 0; border: 0; background: transparent; color: #334155; text-align: left; cursor: pointer; }
.insight-bars > button > span { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.insight-bars strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.insight-bars b { flex: none; color: #172033; font-weight: 650; }
.insight-bar-track { position: relative; display: block; height: 8px; overflow: visible; border-radius: 4px; background: #e8edf3; }
.insight-bar-track em { display: block; height: 100%; border-radius: inherit; background: #64748b; }
.insight-bar-track.success em { background: var(--insight-good); }
.insight-bar-track.warning em { background: var(--insight-warning); }
.insight-bar-track.critical em { background: var(--insight-critical); }
.insight-bar-track u { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #172033; text-decoration: none; }

.insight-comparison-bars { display: grid; gap: 14px; }
.insight-comparison-bars > button { position: relative; display: grid; grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr); align-items: center; gap: 7px 12px; width: 100%; padding: 0 0 13px; border: 0; border-bottom: 1px solid #edf1f6; background: transparent; color: #334155; text-align: left; cursor: pointer; }
.insight-comparison-bars > button:last-child { padding-bottom: 0; border-bottom: 0; }
.insight-comparison-bars > button > strong { grid-row: 1 / 3; overflow: hidden; font-size: 11px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.comparison-metric { display: grid; grid-template-columns: minmax(72px, auto) minmax(50px, 1fr) minmax(48px, auto); align-items: center; gap: 8px; min-width: 0; }
.comparison-metric small { overflow: hidden; color: #64748b; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.comparison-metric em { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #eef2f6; }
.insight-comparison-bars i { display: block; height: 100%; min-width: 2px; border-radius: inherit; }
.insight-comparison-bars i.first { background: var(--insight-warning); }
.insight-comparison-bars i.second { background: var(--insight-m30); }
.insight-comparison-bars b { color: #172033; font-size: 10px; font-weight: 650; text-align: right; white-space: nowrap; }

.insight-tooltip { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 7px); display: none; width: min(210px, 90%); padding: 10px; border: 1px solid #334155; border-radius: 6px; background: #172033; color: #fff; text-align: left; pointer-events: none; }
button:hover > .insight-tooltip { display: grid; gap: 5px; }
.cycle-insight-grid .insight-tooltip { display: none !important; }
.insight-tooltip > strong { color: #fff; font-size: 11px; }
.insight-tooltip > span { display: flex; justify-content: space-between; gap: 8px; color: #dbe5f1; font-size: 10px; }
.insight-tooltip small, .insight-tooltip b { color: inherit; font-size: inherit; }

.insight-line-chart { display: grid; gap: 8px; }
.insight-line-chart svg { width: 100%; min-height: 260px; overflow: visible; }
.insight-line-chart .grid { fill: none; stroke: #e2e8f0; stroke-width: 1; }
.insight-line-chart .series { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.insight-line-chart .series.standard, .insight-line-chart circle.standard { stroke: var(--insight-standard); fill: var(--insight-standard); }
.insight-line-chart .series.feasible, .insight-line-chart circle.feasible { stroke: var(--insight-feasible); fill: var(--insight-feasible); }
.insight-line-chart .series.good, .insight-line-chart circle.good { stroke: var(--insight-good); fill: var(--insight-good); }
.insight-axis-labels { display: flex; justify-content: space-between; color: #64748b; font-size: 10px; }

.insight-executive-grid, .insight-summary-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.insight-executive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight-executive-card, .insight-summary-cards article { display: grid; gap: 5px; min-height: 88px; padding: 13px; border: 1px solid #dfe5ee; border-radius: 8px; background: #fff; }
.insight-executive-card span, .insight-summary-cards span { color: #64748b; font-size: 10px; }
.insight-executive-card strong, .insight-summary-cards strong { color: #172033; font-size: 18px; line-height: 1.2; letter-spacing: 0; }
.insight-executive-card b { color: #8b263f; font-size: 11px; }
.insight-executive-card small, .insight-summary-cards small { color: #64748b; font-size: 10px; }

.insight-stacked-bars { display: grid; gap: 12px; }
.insight-stacked-bars > button { position: relative; display: grid; gap: 5px; width: 100%; border: 0; background: transparent; cursor: pointer; }
.insight-stacked-bars > button > span { display: flex; justify-content: space-between; color: #334155; font-size: 11px; }
.insight-stacked-bars > button > i, .insight-status-track { display: flex; height: 11px; overflow: hidden; border-radius: 4px; background: #e8edf3; }
.insight-stacked-bars em.running, .insight-status-track .running { background: var(--insight-good); }
.insight-stacked-bars em.idle, .insight-status-track .idle { background: var(--insight-warning); }
.insight-status-summary { display: grid; gap: 22px; padding: 18px 4px; }
.insight-status-summary > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.insight-status-summary span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; }
.insight-status-summary span i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.insight-status-summary span small { color: #64748b; font-size: 10px; text-transform: capitalize; }
.insight-status-summary span strong { font-size: 20px; }
.insight-status-summary span.running i { background: var(--insight-good); }
.insight-status-summary span.idle i { background: var(--insight-warning); }
.insight-status-summary span.offline i, .insight-status-track .offline { background: var(--insight-critical); }
.insight-status-summary span.scheduled i, .insight-status-track .scheduled { background: var(--insight-feasible); }

.charts-insights:fullscreen, .insight-card:fullscreen { overflow: auto; padding: 24px; background: #f6f8fb; }
.insight-card:fullscreen { display: grid; align-content: start; }
.insight-card:fullscreen .insight-card-body { min-height: calc(100vh - 160px); }

@media (max-width: 1100px) {
  .charts-insights-head { align-items: flex-start; flex-direction: column; }
  .charts-insights-head > div:last-child { justify-content: flex-start; }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card.wide { grid-column: auto; }
  .insight-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .insight-executive-grid, .insight-summary-cards { grid-template-columns: 1fr; }
  .insight-card-body { padding: 12px; }
  .insight-comparison-bars > button { grid-template-columns: 1fr; }
  .insight-comparison-bars > button > strong { grid-row: auto; margin-bottom: 2px; }
  .comparison-metric { grid-template-columns: 70px minmax(40px, 1fr) minmax(46px, auto); }
  .insight-status-summary > div { grid-template-columns: repeat(2, 1fr); }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f3f5f7;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
}

.brand,
.card-head,
.topbar,
.section-head,
.modal-head,
.modal-actions,
.topbar-actions {
  display: flex;
  align-items: center;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: max-content;
}

.brand-logo {
  width: 138px;
  height: auto;
  display: block;
  padding: 6px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.nav-link {
  border: 0;
  white-space: nowrap;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 7px;
  background: transparent;
  font-weight: 400;
  cursor: pointer;
}

.nav-link.active,
.nav-link:hover {
  background: white;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20, 34, 56, 0.08);
}

.workspace {
  padding: 18px 22px 26px;
  min-width: 0;
}

.topbar {
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -18px -22px 18px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 24px;
  font-weight: 500;
}

h2 {
  font-size: 16px;
  font-weight: 500;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar-actions,
.modal-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.button,
.icon-button {
  border: 0;
  cursor: pointer;
  font-weight: 500;
}

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 8px;
  text-decoration: none;
}

.button.primary {
  color: white;
  background: var(--maroon);
  box-shadow: 0 10px 24px rgba(123, 38, 61, 0.2);
}

.button.secondary {
  color: white;
  background: linear-gradient(135deg, var(--violet), var(--red));
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.22);
}

.excel-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: #107c41;
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  box-shadow: inset -5px 0 0 rgba(255, 255, 255, 0.14);
}

.button.ghost {
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
}

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.tab-button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  cursor: pointer;
}

.tab-button.active {
  color: var(--ink);
  background: white;
  box-shadow: 0 6px 18px rgba(20, 34, 56, 0.08);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.overview-grid,
.machine-grid,
.summary-grid {
  display: grid;
  gap: 14px;
}

.overview-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-bottom: 18px;
}

.setup-stats {
  margin-bottom: 18px;
}

.stat-card,
.panel,
.machine-card,
.summary-item,
.modal-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 227, 238, 0.9);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 34, 56, 0.07);
  backdrop-filter: blur(12px);
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
}

.stat-card::before,
.machine-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--blue);
}

.stat-card span,
.metric span,
.summary-item span,
label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
}

.accent-blue::before {
  background: var(--blue);
}

.accent-green::before {
  background: var(--green);
}

.accent-amber::before {
  background: var(--amber);
}

.accent-red::before {
  background: var(--red);
}

.machine-grid {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  margin-bottom: 18px;
}

.analytics-body {
  padding: 18px;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.analytics-kpi-grid .stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.analytics-grid.single-report {
  grid-template-columns: minmax(0, 1fr);
}

.analytics-grid .report-card {
  min-height: 240px;
}

.analytics-grid.single-report .report-card {
  min-height: 0;
}

.analytics-grid .report-card h2 {
  margin-bottom: 12px;
}

.analytics-grid .wide {
  grid-column: 1 / -1;
}

.table-wrap.compact {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.table-wrap.compact .device-table th,
.table-wrap.compact .device-table td {
  padding: 10px 12px;
}

.oee-stack {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.oee-stack span {
  color: var(--muted);
}

/* Production analytics */
#analyticsTab {
  background: #f5f7fa;
}

.analytics-shell {
  min-height: calc(100vh - 110px);
  color: #142033;
}

.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid #dce3ec;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.analytics-title-block .eyebrow {
  margin: 0 0 5px;
  color: #7b263d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.analytics-title-block h2 {
  margin: 0;
  color: #111c2e;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: 0;
}

.analytics-title-block > p:last-child {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
}

.analytics-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-shift-meta {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  min-width: 152px;
  padding-right: 14px;
  border-right: 1px solid #e1e7ef;
}

.analytics-shift-meta span,
.analytics-shift-meta small {
  color: #778195;
  font-size: 10px;
}

.analytics-shift-meta strong {
  color: #152238;
  font-size: 13px;
  font-weight: 650;
}

.analytics-shift-meta small {
  grid-column: 1 / -1;
  margin-top: 3px;
}

.analytics-icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid #d7dee9;
  border-radius: 7px;
  background: #fff;
  color: #526077;
  cursor: pointer;
}

.analytics-icon-button:hover {
  border-color: #7b263d;
  color: #7b263d;
}

.analytics-icon-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.analytics-export-button {
  min-height: 38px;
}

.analytics-filter-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 14px 16px;
  border-right: 1px solid #dce3ec;
  border-bottom: 1px solid #dce3ec;
  border-left: 1px solid #dce3ec;
  background: #fff;
}

.analytics-filter-bar label {
  display: grid;
  min-width: 116px;
  gap: 5px;
  color: #687386;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.analytics-filter-bar input,
.analytics-filter-bar select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d7dee9;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #19263a;
  font-size: 12px;
  font-weight: 450;
  text-transform: none;
}

.analytics-filter-bar input:focus,
.analytics-filter-bar select:focus {
  border-color: #7b263d;
  box-shadow: 0 0 0 3px rgba(123, 38, 61, 0.09);
}

.analytics-period-fields {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.analytics-period-fields[hidden] {
  display: none;
}

.analytics-period-fields label {
  min-width: 104px;
}

.analytics-filter-actions {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.analytics-filter-actions .button {
  min-width: 72px;
  min-height: 36px;
  padding: 0 14px;
}

.analytics-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 0;
  border-right: 1px solid #dce3ec;
  border-bottom: 1px solid #dce3ec;
  border-left: 1px solid #dce3ec;
  background: #fff;
}

.analytics-tabs button {
  position: relative;
  padding: 10px 13px 12px;
  border: 0;
  background: transparent;
  color: #69758a;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.analytics-tabs button::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: transparent;
  content: "";
}

.analytics-tabs button:hover,
.analytics-tabs button.active {
  color: #7b263d;
}

.analytics-tabs button.active::after {
  background: #7b263d;
}

#analyticsTab .analytics-body {
  padding: 16px 0 0;
}

.analytics-view {
  display: grid;
  gap: 14px;
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.analytics-kpi {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 14px 13px 12px;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 34, 52, 0.04);
}

.analytics-kpi::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: #9aa6b8;
  content: "";
}

.analytics-kpi.standard::before { background: #315f9b; }
.analytics-kpi.feasible::before { background: #7b263d; }
.analytics-kpi.actual::before,
.analytics-kpi.success::before { background: #16834f; }
.analytics-kpi.positive::before { background: #56a56f; }
.analytics-kpi.warning::before { background: #d99518; }
.analytics-kpi.critical::before { background: #d3414b; }
.analytics-kpi.utilization::before { background: #277c92; }

.analytics-kpi > span {
  display: block;
  overflow: hidden;
  color: #69758a;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.analytics-kpi strong {
  display: block;
  margin-top: 11px;
  overflow: hidden;
  color: #111c2e;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-kpi small {
  display: block;
  margin-top: 9px;
  color: #8a94a5;
  font-size: 9px;
  line-height: 1.3;
}

.analytics-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 14px;
}

.analytics-panel-card {
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(22, 34, 52, 0.035);
}

.analytics-panel-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.analytics-panel-card h3 {
  margin: 0;
  color: #18253a;
  font-size: 14px;
  font-weight: 650;
}

.analytics-panel-card header p {
  margin: 4px 0 0;
  color: #7b8597;
  font-size: 10px;
}

.analytics-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 13px;
  margin-bottom: 10px;
  color: #677388;
  font-size: 10px;
}

.analytics-chart-legend span::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  background: #315f9b;
  content: "";
}

.analytics-chart-legend .feasible::before { background: #7b263d; }
.analytics-chart-legend .actual::before { background: #16834f; }

.analytics-bar-groups {
  display: flex;
  align-items: stretch;
  height: 230px;
  padding: 12px 8px 0;
  overflow: hidden;
  border-bottom: 1px solid #dfe5ed;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff 54px, #edf1f5 55px);
}

.analytics-bar-group {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #4d596c;
  cursor: pointer;
}

.analytics-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 190px;
}

.analytics-bars i {
  position: relative;
  display: block;
  width: min(18px, 27%);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: #315f9b;
}

.analytics-bars i.feasible { background: #7b263d; }
.analytics-bars i.actual { background: #16834f; }

.analytics-bars b {
  position: absolute;
  top: -16px;
  left: 50%;
  color: #647086;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  transform: translateX(-50%);
}

.analytics-bar-group > strong {
  overflow: hidden;
  padding-top: 7px;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-horizontal-bars {
  display: grid;
  gap: 12px;
}

.analytics-horizontal-bars button {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: default;
}

.analytics-horizontal-bars button[data-analytics-machine] {
  cursor: pointer;
}

.analytics-horizontal-bars button > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #47546a;
  font-size: 11px;
}

.analytics-horizontal-bars button strong,
.analytics-horizontal-bars button b {
  font-weight: 600;
}

.analytics-horizontal-bars button > i {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1f5;
}

.analytics-horizontal-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7b263d;
}

.analytics-line-chart svg {
  display: block;
  width: 100%;
  height: 235px;
  overflow: visible;
}

.analytics-line-chart .grid {
  fill: none;
  stroke: #e8edf3;
  stroke-width: 1;
}

.analytics-line-chart polyline {
  fill: none;
  stroke: #16834f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.analytics-line-chart .trend-series.standard { stroke: #315f9b; }
.analytics-line-chart .trend-series.feasible { stroke: #7b263d; }
.analytics-line-chart .trend-series.actual { stroke: #16834f; }
.analytics-line-chart .trend-series.hidden { display: none; }

.analytics-series-toggles {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 4px;
}

.analytics-series-toggles label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #687386;
  font-size: 9px;
  cursor: pointer;
}

.analytics-series-toggles input {
  width: 12px;
  height: 12px;
  accent-color: #7b263d;
}

.analytics-series-toggles span::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: #315f9b;
  content: "";
}

.analytics-series-toggles .feasible::before { background: #7b263d; }
.analytics-series-toggles .actual::before { background: #16834f; }

.analytics-line-chart circle {
  fill: #fff;
  stroke: #16834f;
  stroke-width: 3;
}

.analytics-trend-labels {
  display: flex;
  justify-content: space-between;
  color: #8993a3;
  font-size: 9px;
}

.analytics-table-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e0e6ee;
  border-radius: 6px;
}

.analytics-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #7b8597;
  font-size: 10px;
}

.analytics-table-toolbar label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.analytics-table-controls,
.analytics-pagination,
.analytics-panel-tools,
.analytics-segmented {
  display: flex;
  align-items: center;
}

.analytics-table-controls {
  gap: 10px;
}

.analytics-pagination {
  gap: 5px;
}

.analytics-pagination button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #d7dee9;
  border-radius: 5px;
  background: #fff;
  color: #435168;
  cursor: pointer;
}

.analytics-pagination button:disabled {
  color: #a8b0bc;
  background: #f5f7f9;
  cursor: default;
}

.analytics-panel-tools {
  justify-content: flex-end;
  margin: -4px 0 14px;
}

.analytics-segmented {
  padding: 3px;
  border: 1px solid #dce3ec;
  border-radius: 6px;
  background: #f5f7fa;
}

.analytics-segmented button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #667085;
  font-size: 10px;
  cursor: pointer;
}

.analytics-segmented button.active {
  background: #fff;
  color: #7b263d;
  box-shadow: 0 2px 7px rgba(25, 38, 58, 0.08);
}

.analytics-segmented button:disabled {
  color: #a3acb9;
  cursor: not-allowed;
}

.analytics-oee-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analytics-table-toolbar select {
  height: 30px;
  padding: 0 9px;
  border: 1px solid #d7dee9;
  border-radius: 5px;
  background: #fff;
  color: #26344a;
  font-size: 10px;
}

.analytics-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.analytics-table th {
  padding: 9px 7px;
  border-bottom: 1px solid #dfe5ed;
  background: #f6f8fa;
  color: #6a7689;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
}

.analytics-table td {
  padding: 10px 7px;
  overflow-wrap: anywhere;
  border-bottom: 1px solid #e8edf2;
  color: #172338;
  font-size: 10px;
  line-height: 1.25;
  vertical-align: middle;
}

.analytics-table tbody tr:last-child td {
  border-bottom: 0;
}

.analytics-table tbody tr[data-analytics-machine] {
  cursor: pointer;
}

.analytics-table tbody tr[data-analytics-machine]:hover td {
  background: #fbf6f7;
}

.analytics-table td strong {
  font-weight: 650;
}

.analytics-value-pill {
  display: inline-flex;
  min-width: 48px;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 5px;
  background: #eef1f5;
  color: #596579;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}

.analytics-value-pill.success,
.analytics-value-pill.positive { background: #e8f6ee; color: #147342; }
.analytics-value-pill.warning { background: #fff3d8; color: #97640a; }
.analytics-value-pill.critical { background: #fdebed; color: #b42936; }

.analytics-loss-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px;
  border-left: 3px solid #d3414b;
  background: #fff7f7;
}

.analytics-loss-hero strong {
  color: #b42936;
  font-size: 30px;
  font-weight: 650;
}

.analytics-loss-hero span {
  color: #69758a;
  font-size: 12px;
}

.analytics-empty,
.analytics-unavailable,
.analytics-error {
  display: grid;
  min-height: 190px;
  place-content: center;
  justify-items: center;
  padding: 24px;
  color: #778195;
  text-align: center;
}

.analytics-empty > span {
  margin-bottom: 10px;
  color: #a3adbb;
  font-size: 26px;
}

.analytics-empty strong,
.analytics-unavailable strong,
.analytics-error strong {
  color: #354258;
  font-size: 13px;
  font-weight: 650;
}

.analytics-empty p,
.analytics-unavailable p,
.analytics-error p {
  max-width: 460px;
  margin: 7px 0 0;
  font-size: 11px;
}

.analytics-skeleton {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.analytics-skeleton i {
  height: 112px;
  border: 1px solid #e2e7ed;
  border-radius: 7px;
  background: linear-gradient(100deg, #f2f4f7 30%, #fafbfc 48%, #f2f4f7 66%);
  background-size: 250% 100%;
  animation: analytics-loading 1.2s linear infinite;
}

.analytics-skeleton i:nth-child(n + 5) {
  grid-column: span 2;
  height: 260px;
}

@keyframes analytics-loading {
  to { background-position-x: -250%; }
}

.analytics-drawer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #dfe5ed;
  border-radius: 7px;
  background: #dfe5ed;
}

.analytics-drawer-summary > div {
  display: grid;
  gap: 5px;
  padding: 13px;
  background: #fff;
}

.analytics-drawer-summary span {
  color: #788396;
  font-size: 10px;
  text-transform: uppercase;
}

.analytics-drawer-summary strong {
  color: #19263a;
  font-size: 13px;
  font-weight: 650;
}

.operator-module {
  display: grid;
  gap: 16px;
}

.operator-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid #dfe4eb;
  border-radius: 8px;
  background: #fff;
}

.operator-module-head h2 {
  margin: 3px 0 4px;
  color: #16181d;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: 0;
}

.operator-module-head p:last-child,
.operator-module-head > div:last-child > span {
  color: #67717f;
  font-size: 12px;
}

.operator-module-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.operator-subtabs {
  display: flex;
  min-height: 42px;
  overflow-x: auto;
  border: 1px solid #dfe4eb;
  border-radius: 8px;
  background: #fff;
}

.operator-subtabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: #606a78;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.operator-subtabs button.active {
  color: #641f35;
  font-weight: 650;
}

.operator-subtabs button.active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 2px;
  background: #7b263d;
  content: "";
}

.operator-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.operator-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.operator-top-card {
  display: grid;
  width: 100%;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e0e4ea;
  border-radius: 6px;
  background: #fafbfc;
  color: #1f2530;
  text-align: left;
  cursor: pointer;
}

.operator-top-card span,
.operator-top-card small {
  color: #687383;
  font-size: 11px;
}

.operator-top-card strong {
  font-size: 17px;
  font-weight: 650;
}

.operator-top-card b {
  color: #7b263d;
  font-size: 21px;
  font-weight: 650;
}

.operator-top-three {
  display: grid;
  gap: 8px;
}

.operator-top-three button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  background: #fff;
  color: #202630;
  text-align: left;
  cursor: pointer;
}

.operator-rank-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #f3e9ed;
  color: #6f2139;
  font-size: 12px;
  font-weight: 700;
}

.operator-top-three div {
  display: grid;
  gap: 2px;
}

.operator-top-three small,
.operator-top-three div > span {
  color: #707987;
  font-size: 10px;
}

.operator-top-three strong {
  font-size: 12px;
  font-weight: 650;
}

.operator-bars {
  display: grid;
  gap: 10px;
}

.operator-bars button {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2c3440;
  cursor: pointer;
}

.operator-bars button > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.operator-bars button strong,
.operator-bars button b {
  font-weight: 600;
}

.operator-bars i {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #e8ebf0;
}

.operator-bars em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7b263d;
}

.operator-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.operator-table-wrap .analytics-table {
  min-width: 1320px;
}

.operator-name-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #641f35;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.operator-cell-note {
  display: block;
  margin-top: 4px;
  color: #707987;
}

.operator-eligibility {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
}

.operator-eligibility.eligible {
  background: #e8f6ee;
  color: #147342;
}

.operator-eligibility.ineligible {
  background: #fff3d8;
  color: #8a5b08;
}

.operator-benchmark-switch {
  width: max-content;
}

.operator-fairness-note {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid #7b263d;
  background: #f8f3f5;
  color: #596270;
  font-size: 11px;
}

.operator-detail-body {
  display: grid;
  gap: 16px;
}

.operator-detail-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e0e4ea;
  border-radius: 7px;
  background: #fafbfc;
}

.operator-detail-score > div {
  display: grid;
  gap: 3px;
}

.operator-detail-score span,
.operator-detail-score small {
  color: #6a7482;
  font-size: 11px;
}

.operator-detail-score strong {
  color: #641f35;
  font-size: 20px;
  font-weight: 650;
}

.operator-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.operator-detail-grid section {
  padding: 14px;
  border: 1px solid #e0e4ea;
  border-radius: 7px;
  background: #fff;
}

.operator-detail-grid h3 {
  margin: 0 0 9px;
  color: #232831;
  font-size: 12px;
  font-weight: 650;
}

.operator-detail-grid section > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid #edf0f4;
  font-size: 11px;
}

.operator-detail-grid span {
  color: #6a7482;
}

.operator-detail-grid strong {
  color: #252b34;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 1600px) {
  .operator-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .operator-summary-grid { grid-template-columns: 1fr; }
  .operator-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .operator-module-head,
  .operator-module-head > div:last-child { align-items: stretch; flex-direction: column; }
  .operator-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator-detail-grid { grid-template-columns: 1fr; }
}

/* Authentication and user access */
[data-tab-target][hidden],
[data-admin-only][hidden] {
  display: none !important;
}

.auth-gate {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #f1f4f7;
}

.auth-gate[hidden] {
  display: none;
}

body.auth-pending .app-shell {
  visibility: hidden;
}

.login-panel {
  display: grid;
  width: min(390px, 100%);
  gap: 16px;
  padding: 28px;
  border: 1px solid #dce3eb;
  border-top: 3px solid #7b263d;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(28, 39, 55, 0.12);
}

.login-panel > img {
  width: 180px;
  height: auto;
  margin-bottom: 4px;
}

.login-heading p {
  margin: 0 0 6px;
  color: #7b263d;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-heading h1 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
}

.login-heading span,
.login-panel label,
.login-panel label input {
  color: #667085;
  font-size: 12px;
}

.login-panel label {
  display: grid;
  gap: 6px;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.login-panel label input {
  min-height: 42px;
  color: #172033;
  text-transform: none;
}

.login-message {
  min-height: 18px;
  margin: -4px 0;
  color: #b42334;
  font-size: 11px;
}

.user-session-control {
  display: grid;
  grid-template-columns: 32px minmax(85px, auto) 30px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 6px 4px 5px;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  background: #fff;
}

.user-session-control[hidden] {
  display: none;
}

.user-session-control > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: #7b263d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.user-session-control > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.user-session-control strong,
.user-session-control small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-session-control strong {
  color: #172033;
  font-size: 10px;
  font-weight: 650;
}

.user-session-control small {
  color: #778195;
  font-size: 8px;
}

.user-session-control .icon-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #667085;
}

.user-session-control .icon-button:hover {
  background: #f8eef1;
  color: #7b263d;
}

.user-session-control svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#usersTab {
  background: #f4f6f9;
}

.users-access-shell {
  display: grid;
  gap: 14px;
}

.users-access-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid #dce3eb;
}

.users-access-heading h2 {
  margin: 2px 0 3px;
  color: #172033;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

.users-access-heading p,
.users-access-heading span {
  margin: 0;
  color: #667085;
  font-size: 11px;
}

.users-access-heading .eyebrow {
  color: #7b263d;
  font-size: 9px;
  font-weight: 700;
}

.users-access-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.users-access-summary > div {
  display: grid;
  min-height: 78px;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid #dce3eb;
  border-left: 3px solid #7b263d;
  border-radius: 7px;
  background: #fff;
}

.users-access-summary span {
  color: #667085;
  font-size: 10px;
}

.users-access-summary strong {
  color: #172033;
  font-size: 21px;
  font-weight: 650;
}

.users-table-wrap {
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 7px;
  background: #fff;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.users-table th {
  height: 40px;
  padding: 8px 12px;
  border-bottom: 1px solid #dce3eb;
  background: #f5f7fa;
  color: #667085;
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}

.users-table td {
  height: 58px;
  padding: 9px 12px;
  border-bottom: 1px solid #e8edf3;
  color: #344054;
  font-size: 10px;
  vertical-align: middle;
}

.users-table tr:last-child td {
  border-bottom: 0;
}

.users-table th:nth-child(1) { width: 22%; }
.users-table th:nth-child(2) { width: 13%; }
.users-table th:nth-child(3) { width: 28%; }
.users-table th:nth-child(4) { width: 12%; }
.users-table th:nth-child(5) { width: 17%; }
.users-table th:nth-child(6) { width: 8%; }

.user-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.user-identity > span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: #f8eef1;
  color: #7b263d;
  font-weight: 700;
}

.user-identity > div {
  display: grid;
  min-width: 0;
}

.user-identity strong,
.user-identity small,
.user-permission-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-identity strong {
  color: #172033;
  font-size: 11px;
  font-weight: 650;
}

.user-identity small {
  color: #7a8595;
  font-size: 9px;
}

.user-role,
.user-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #526078;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.user-role.admin {
  background: #f8eef1;
  color: #7b263d;
}

.user-status {
  gap: 5px;
}

.user-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.user-status.enabled {
  background: #eaf7ef;
  color: #147342;
}

.user-status.enabled i {
  background: #16a34a;
}

.user-permission-summary {
  display: block;
  color: #526078;
}

.user-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.user-row-actions button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid #d7dee8;
  border-radius: 5px;
  background: #fff;
  color: #526078;
  cursor: pointer;
}

.user-row-actions button:hover {
  border-color: #7b263d;
  color: #7b263d;
}

.user-row-actions button.danger {
  color: #b42334;
}

.user-row-actions button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.user-row-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.users-empty {
  height: 160px !important;
  color: #7a8595 !important;
  text-align: center;
}

#appUserDialog {
  width: min(820px, calc(100vw - 32px));
  max-width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

.app-user-modal {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
}

.app-user-modal .modal-head,
.app-user-modal .modal-actions {
  margin: 0;
  padding: 14px 18px;
  background: #fff;
}

.app-user-modal .modal-head {
  border-bottom: 1px solid #e2e8f0;
}

.app-user-modal .modal-actions {
  border-top: 1px solid #e2e8f0;
}

.app-user-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px;
  background: #f8fafc;
}

.app-user-fields > label {
  color: #596579;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.app-user-fields > label:nth-child(3) {
  grid-column: span 2;
}

.app-user-fields input {
  min-height: 38px;
  font-size: 12px;
  text-transform: none;
}

.app-user-fields label small {
  color: #7a8595;
  font-size: 9px;
  font-weight: 450;
  line-height: 1.35;
  text-transform: none;
}

.app-user-switches {
  display: flex;
  grid-column: span 2;
  gap: 18px;
}

.app-user-switches label,
.tab-permission-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #344054;
  font-size: 10px;
  cursor: pointer;
}

.app-user-switches input,
.tab-permission-grid input {
  width: 15px;
  height: 15px;
  min-height: 0;
  accent-color: #7b263d;
}

.tab-permission-fieldset {
  min-height: 0;
  margin: 0;
  padding: 15px 18px;
  overflow-y: auto;
  border: 0;
  border-top: 1px solid #e8edf3;
  background: #fff;
}

.tab-permission-fieldset legend {
  padding: 0;
  color: #172033;
  font-size: 11px;
  font-weight: 650;
}

.tab-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.tab-permission-grid label {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #dce3eb;
  border-radius: 6px;
  background: #f8fafc;
}

.tab-permission-grid.is-disabled {
  opacity: .55;
}

.tab-permission-fieldset > p {
  margin: 10px 0 0;
  color: #7a8595;
  font-size: 9px;
}

.app-user-modal > .message {
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  color: #b42334;
  background: #fff;
}

.app-user-modal > .message:not(:empty) {
  min-height: 32px;
  padding-top: 7px;
}

@media (max-width: 900px) {
  .user-session-control > div {
    display: none;
  }

  .user-session-control {
    grid-template-columns: 32px 30px;
  }

  .users-table-wrap {
    overflow-x: auto;
  }

  .users-table {
    min-width: 850px;
  }
}

@media (max-width: 620px) {
  .users-access-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .users-access-summary,
  .app-user-fields,
  .tab-permission-grid {
    grid-template-columns: 1fr;
  }

  .app-user-fields > label:nth-child(3),
  .app-user-switches {
    grid-column: auto;
  }

  .app-user-switches {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* AI Copilot placeholder */
#copilotTab {
  min-height: calc(100vh - 84px);
  background: #f4f6f9;
}

.copilot-coming-soon {
  position: relative;
  display: grid;
  min-height: calc(100vh - 132px);
  align-content: center;
  justify-items: center;
  padding: 40px 20px;
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  box-shadow: 0 8px 24px rgba(29, 38, 53, 0.05);
}

.copilot-coming-soon::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #7b263d;
  content: "";
}

.copilot-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid #ead9de;
  border-radius: 8px;
  background: #fbf5f7;
  color: #7b263d;
}

.copilot-mark svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.copilot-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 10px;
  border: 1px solid #dfc7ce;
  border-radius: 999px;
  background: #fbf5f7;
  color: #7b263d;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.copilot-coming-soon h2 {
  margin: 0;
  color: #172033;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
}

.copilot-coming-soon p {
  margin: 8px 0 0;
  color: #69758a;
  font-size: 12px;
}

@media (max-width: 720px) {
  #copilotTab {
    min-height: calc(100vh - 124px);
  }

  .copilot-coming-soon {
    min-height: calc(100vh - 160px);
  }
}

/* Standalone Charts & Insights */
.standalone-charts-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.standalone-charts-filter {
  display: grid;
  grid-template-columns: repeat(6, minmax(125px, 1fr)) auto;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe5ec;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(26, 38, 56, 0.04);
}

.standalone-charts-filter label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #667085;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.standalone-charts-filter select,
.standalone-charts-filter input {
  width: 100%;
  height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #d5dce6;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #172033;
  font: inherit;
  font-size: 12px;
  text-transform: none;
}

.standalone-charts-filter select:focus,
.standalone-charts-filter input:focus {
  border-color: #8b263f;
  box-shadow: 0 0 0 3px rgba(139, 38, 63, 0.1);
}

.standalone-charts-filter-actions {
  display: flex;
  gap: 7px;
}

.standalone-charts-filter-actions .button {
  height: 38px;
  white-space: nowrap;
}

.charts-standalone-body,
.charts-standalone-body .charts-insights {
  min-width: 0;
}

.charts-insights-head [data-charts-page-fullscreen] svg {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vertical-align: -3px;
}

.insight-control-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  padding: 12px 14px;
  border: 1px solid #dfe5ec;
  border-radius: 7px;
  background: #fff;
}

.insight-control-summary,
.insight-control-group {
  display: grid;
  gap: 5px;
}

.insight-control-summary span,
.insight-control-group > span {
  color: #7a8595;
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.insight-control-summary strong {
  color: #172033;
  font-size: 13px;
  font-weight: 650;
}

.insight-choice-group {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  background: #f7f8fa;
}

.insight-choice-group button {
  height: 31px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid #d7dee8;
  background: transparent;
  color: #5d6878;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.insight-choice-group button:last-child {
  border-right: 0;
}

.insight-choice-group button:hover {
  background: #fff;
  color: #7b263d;
}

.insight-choice-group button.active {
  background: #7b263d;
  color: #fff;
}

.charts-insights:fullscreen {
  width: 100vw;
  height: 100vh;
  padding: 22px 26px 30px;
  overflow: auto;
  background: #f4f6f9;
}

.charts-insights:fullscreen .charts-insights-head {
  position: sticky;
  z-index: 20;
  top: -22px;
  margin: -22px -26px 0;
  padding: 18px 26px;
  border-bottom: 1px solid #dce3eb;
  background: rgba(255, 255, 255, 0.97);
}

.charts-insights:fullscreen .charts-subtabs {
  position: sticky;
  z-index: 19;
  top: 69px;
  box-shadow: 0 5px 12px rgba(27, 39, 57, 0.06);
}

.insight-card:fullscreen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #f4f6f9;
}

.insight-card:fullscreen .insight-card-head {
  min-height: 72px;
  padding: 18px 28px;
  border-bottom: 1px solid #dce3eb;
  background: #fff;
}

.insight-card:fullscreen .insight-card-body {
  min-height: 0;
  padding: 28px;
  overflow: auto;
}

.insight-card:fullscreen .insight-card-foot {
  padding: 12px 28px;
  background: #fff;
}

.insight-card:fullscreen .insight-line-chart svg {
  min-height: calc(100vh - 220px);
}

.insight-card:fullscreen .insight-bars,
.insight-card:fullscreen .insight-comparison-bars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
}

@media (max-width: 1280px) {
  .standalone-charts-filter {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .standalone-charts-filter-actions {
    justify-content: flex-end;
  }

  .insight-control-bar {
    grid-template-columns: 1fr 1fr;
  }

  .insight-control-summary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .standalone-charts-filter,
  .insight-control-bar {
    grid-template-columns: 1fr;
  }

  .insight-control-summary {
    grid-column: auto;
  }

  .insight-choice-group,
  .standalone-charts-filter-actions {
    width: 100%;
  }

  .insight-choice-group button,
  .standalone-charts-filter-actions .button {
    flex: 1;
  }

  .insight-card:fullscreen .insight-bars,
  .insight-card:fullscreen .insight-comparison-bars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1500px) {
  .analytics-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .analytics-filter-bar { flex-wrap: wrap; }
  .analytics-filter-actions { margin-left: 0; }
}

@media (max-width: 1000px) {
  .analytics-header { align-items: flex-start; flex-direction: column; }
  .analytics-header-actions { width: 100%; }
  .analytics-chart-grid { grid-template-columns: 1fr; }
  .analytics-tabs { overflow-x: auto; }
  .analytics-tabs button { white-space: nowrap; }
}

@media (max-width: 700px) {
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-header-actions { align-items: stretch; flex-wrap: wrap; }
  .analytics-filter-bar,
  .analytics-period-fields { align-items: stretch; flex-direction: column; }
  .analytics-filter-bar label,
  .analytics-period-fields label { width: 100%; }
  .analytics-filter-actions { width: 100%; }
  .analytics-filter-actions .button { flex: 1; }
  .analytics-table th,
  .analytics-table td { padding: 7px 3px; font-size: 7px; }
  .analytics-drawer-summary { grid-template-columns: 1fr; }
}

.oee-stack strong {
  font-size: 24px;
  font-weight: 500;
}

.machine-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
}

.machine-card.status-running::before {
  background: var(--green);
}

.machine-card.status-idle::before {
  background: var(--blue);
}

.machine-card.status-error::before,
.machine-card.status-disconnected::before {
  background: var(--red);
}

.machine-card.status-alarm::before {
  background: var(--amber);
}

.card-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.machine-title strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}

.machine-title span {
  color: var(--muted);
  font-size: 13px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  background: #eef2f7;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.status.idle {
  color: #a15c00;
  background: #fff2d8;
}

.status.running {
  color: #087443;
  background: #dcfae6;
}

.status.alarm {
  color: #b54708;
  background: #fff3cd;
}

.status.error,
.status.disconnected {
  color: #c01048;
  background: #ffe4e8;
}

.telemetry-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 150px;
}

.telemetry-state small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}

.activity-live-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #b54708;
  font-size: 11px;
  white-space: nowrap;
}

.activity-live-timer.timer-safe {
  color: #087443;
}

.activity-live-timer.timer-overdue {
  color: #c01048;
}

.activity-inactive {
  color: #8b8b8b;
  font-variant-numeric: tabular-nums;
}

.activity-live-timer strong {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.alarm-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.alarm-indicator span {
  padding: 4px 8px;
  border-radius: 6px;
  color: #b54708;
  background: #fff3cd;
  font-size: 12px;
  font-weight: 500;
}

.alarm-indicator small {
  color: #b54708;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.alarm-clear {
  color: var(--muted);
  font-size: 12px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.metric strong {
  display: block;
  margin-top: 7px;
  font-size: 18px;
  font-weight: 500;
}

.program-line {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.program-line strong {
  color: var(--ink);
  font-weight: 500;
}

.panel {
  padding: 18px;
  margin-bottom: 18px;
}

.live-panel {
  padding: 0;
  overflow: hidden;
  border-color: #cfd8e6;
}

.live-panel .section-head {
  padding: 18px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.07), rgba(8, 145, 178, 0.05)),
    rgba(255, 255, 255, 0.94);
}

.console-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.heading-copy {
  display: grid;
  gap: 4px;
}

.heading-copy p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.current-shift-pill {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  max-width: 520px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d7e5f5;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(22, 163, 74, 0.07)),
    white;
  color: var(--ink);
}

.current-shift-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.current-shift-pill strong {
  color: #14532d;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.current-shift-pill small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.dashboard-filter-bar label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.dashboard-filter-bar input,
.dashboard-filter-bar select {
  min-height: 36px;
  font-size: 13px;
}

.live-panel.is-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 50;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.live-panel.is-fullscreen .table-wrap {
  flex: 1;
  max-height: none;
}

.live-panel.is-fullscreen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, 0.28);
}

.section-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.table-wrap {
  overflow-x: auto;
  max-height: 62vh;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.device-table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 14px 12px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  background: #f8fafc;
  border-bottom: 1px solid #cfd8e6;
  position: sticky;
  top: 0;
  z-index: 2;
}

td strong {
  font-weight: 500;
}

tbody tr:hover {
  background: #f8fbff;
}

.device-table tbody tr {
  background: white;
}

.device-table thead th,
.device-table tbody td {
  border-right: 1px solid #eef2f7;
}

.device-table thead th:last-child,
.device-table tbody td:last-child {
  border-right: 0;
}

.device-row {
  position: relative;
}

.device-row td:first-child {
  position: relative;
  padding-left: 18px;
}

.device-row td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: #98a2b3;
}

.row-running td:first-child::before {
  background: var(--green);
}

.row-idle td:first-child::before {
  background: var(--amber);
}

.row-alarm td:first-child::before {
  background: var(--amber);
}

.row-error td:first-child::before,
.row-disconnected td:first-child::before {
  background: var(--red);
}

.action-cell {
  display: flex;
  gap: 12px;
  align-items: center;
}

.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.device-table th:nth-child(6),
.device-table th:nth-child(7),
.device-table th:nth-child(8),
.device-table th:nth-child(9) {
  text-align: right;
}

.link-button {
  border: 0;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  background: #eef4ff;
  color: var(--blue);
  cursor: pointer;
  font-weight: 500;
}

.link-button.muted {
  color: var(--muted);
}

.link-button.danger {
  color: var(--red);
  background: #fff1f3;
}

.summary-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.summary-item {
  padding: 14px;
}

.summary-item strong {
  display: block;
  margin-bottom: 9px;
  font-weight: 500;
}

.summary-item div {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.modal {
  width: min(980px, calc(100vw - 28px));
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

#shiftPlanDialog {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
}

#detailDialog {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}

body:has(#detailDialog[open]) {
  overflow: hidden;
}

/* Machine detail: premium shift-utilization workspace */
.shift-utilization-header {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 8px 18px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid #dfe4eb;
}

.shift-report-title nav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #667085;
  font-size: 11px;
}

.shift-report-title nav i { color: #98a2b3; font-style: normal; }
.shift-report-title nav strong { color: #344054; font-weight: 600; }
.shift-report-title > div { display: flex; align-items: center; gap: 10px; }
.shift-report-title h3 { margin: 0; color: #101828; font-size: 22px; font-weight: 650; letter-spacing: 0; }

.detail-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
}

.detail-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }
.detail-live-indicator.live { color: #15803d; }
.detail-live-indicator.live i { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.detail-live-indicator.offline { color: #b42318; }
.detail-live-indicator.offline i { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }

.shift-utilization-header .detail-report-filter {
  display: grid;
  grid-template-columns: 150px 145px auto auto;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.shift-utilization-header .detail-report-filter input,
.shift-utilization-header .detail-report-filter select { height: 36px; border-color: #d0d5dd; background: #fff; }
.shift-utilization-header .detail-report-filter .button { min-width: 92px; height: 36px; gap: 7px; padding: 0 11px; }
.shift-utilization-header .detail-report-filter .button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shift-last-updated { grid-column: 2; margin: 0; color: #98a2b3; font-size: 10px; text-align: right; }
.shift-last-updated strong { color: #667085; font-weight: 500; }

.shift-utilization-header + .detail-report-tabs {
  display: inline-flex;
  width: auto;
  padding: 3px;
  margin: 10px 0 12px;
  border-color: #d0d5dd;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.shift-utilization-header + .detail-report-tabs .detail-report-tab { min-width: 126px; min-height: 32px; }

.shift-primary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.shift-primary-kpi {
  --metric-tone: #64748b;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 104px;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe4eb;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .045);
}

.shift-primary-kpi.good { --metric-tone: #16a34a; }
.shift-primary-kpi.attention { --metric-tone: #ea720c; }
.shift-primary-kpi.info { --metric-tone: #2563eb; }
.shift-primary-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--metric-tone) 28%, #fff);
  border-radius: 50%;
  color: var(--metric-tone);
  background: color-mix(in srgb, var(--metric-tone) 8%, #fff);
}
.shift-primary-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shift-primary-kpi > div { min-width: 0; }
.shift-primary-kpi > div > span { display: block; margin-bottom: 3px; color: #344054; font-size: 11px; font-weight: 600; }
.shift-primary-kpi strong { display: block; color: #101828; font-size: 25px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1; white-space: nowrap; }
.shift-primary-kpi strong small { margin-left: 3px; color: #475467; font-size: 10px; font-weight: 550; }
.shift-primary-kpi em { display: block; margin-top: 8px; overflow: hidden; color: #667085; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.shift-primary-kpi.good em { color: #15803d; }

.utilization-ring {
  --util-progress: 0;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#16a34a calc(var(--util-progress) * 1%), #e5e7eb 0);
}
.utilization-ring::before { grid-area: 1 / 1; width: 43px; height: 43px; border-radius: 50%; background: #fff; content: ""; }
.utilization-ring b { z-index: 1; grid-area: 1 / 1; color: #101828; font-size: 11px; font-variant-numeric: tabular-nums; }

.shift-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(340px, .8fr); align-items: stretch; gap: 10px; margin-bottom: 10px; }
.shift-breakdown-card,
.shift-insight-card,
.machine-context-card,
.hourly-performance-card { border: 1px solid #dfe4eb; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgba(16, 24, 40, .035); }
.shift-breakdown-card { padding: 14px 16px; }
.shift-breakdown-card header,
.shift-insight-card header,
.hourly-performance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shift-breakdown-card h4,
.shift-insight-card h4,
.hourly-performance-head h4 { margin: 0; color: #101828; font-size: 13px; font-weight: 650; }
.shift-breakdown-card header p,
.shift-insight-card header p,
.hourly-performance-head p { margin: 3px 0 0; color: #667085; font-size: 10px; }
.shift-breakdown-card header > strong { color: #475467; font-size: 10px; font-weight: 600; white-space: nowrap; }
.shift-breakdown-bar { display: flex; width: 100%; height: 52px; margin: 14px 0 12px; overflow: hidden; border-radius: 6px; background: #eef1f5; }
.shift-breakdown-segment { display: flex; width: var(--segment-width); min-width: 0; align-items: center; justify-content: center; flex-direction: column; color: #fff; font-variant-numeric: tabular-nums; }
.shift-breakdown-segment b { font-size: 10px; font-weight: 650; white-space: nowrap; }
.shift-breakdown-segment small { margin-top: 2px; font-size: 9px; }
.shift-breakdown-segment.running { background: #16a34a; }
.shift-breakdown-segment.m00 { background: #f59e0b; }
.shift-breakdown-segment.m30 { background: #475569; }
.shift-breakdown-segment.alarm { background: #dc2626; }
.shift-breakdown-segment.other { background: #ea720c; }
.shift-breakdown-segment.unknown { color: #475467; background: #d0d5dd; }
.shift-breakdown-legend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; border-top: 1px solid #eaecf0; list-style: none; }
.shift-breakdown-legend li { position: relative; display: flex; min-width: 0; align-items: flex-start; gap: 8px; padding: 11px 10px 2px; border-right: 1px solid #eaecf0; color: #101828; font-size: 10px; font-weight: 600; line-height: 1.3; }
.shift-breakdown-legend li:first-child { padding-left: 0; }
.shift-breakdown-legend li:last-child { padding-right: 0; border-right: 0; }
.shift-breakdown-legend i { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 2px; border-radius: 50%; }
.shift-breakdown-legend i.running { background: #16a34a; }
.shift-breakdown-legend i.m00 { background: #f59e0b; }
.shift-breakdown-legend i.m30 { background: #475569; }
.shift-breakdown-legend i.alarm { background: #dc2626; }
.shift-breakdown-legend i.other { background: #ea720c; }
.shift-breakdown-legend i.unknown { background: #98a2b3; }
.shift-breakdown-legend span { min-width: 0; }
.shift-breakdown-legend small { display: block; margin-top: 4px; color: #344054; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.35; white-space: nowrap; }

.shift-side-stack { display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.shift-insight-card { padding: 13px 14px; }
.shift-analysis-grid > .shift-insight-card { display: flex; min-height: 100%; flex-direction: column; }
.shift-analysis-grid > .shift-insight-card ul { flex: 1; align-content: center; }
.shift-insight-card header { justify-content: flex-start; }
.shift-insight-card header > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #2563eb; background: #eff6ff; }
.shift-insight-card header svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.shift-insight-card ul { display: grid; gap: 7px; padding: 9px 10px; margin: 10px 0 0; border: 1px solid #dbeafe; border-radius: 7px; background: #f8fbff; list-style: none; }
.shift-insight-card h4 { color: #101828; font-size: 15px; font-weight: 650; }
.shift-insight-card header p { color: #475467; font-size: 11px; }
.shift-insight-card ul { gap: 10px; padding: 12px; }
.shift-insight-card li { display: flex; align-items: flex-start; gap: 9px; color: #101828; font-size: 12px; font-weight: 500; line-height: 1.45; }
.shift-insight-card li i { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 4px; border-radius: 50%; background: #64748b; box-shadow: 0 0 0 3px rgba(100, 116, 139, .1); }
.shift-insight-card li.good i { background: #16a34a; }
.shift-insight-card li.attention i { background: #f59e0b; }
.shift-insight-card li.critical i { background: #dc2626; }
.shift-insight-card li.info i { background: #2563eb; }

.machine-context-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 10px 12px; }
.machine-context-card > div { display: flex; min-width: 0; align-items: center; gap: 7px; }
.machine-context-card > div > span { color: #667085; }
.machine-context-card svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.machine-context-card p { min-width: 0; margin: 0; color: #667085; font-size: 8px; }
.machine-context-card strong { display: block; overflow: hidden; margin-top: 2px; color: #101828; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.period-utilization.good { color: #166534; background: #dcfce7; }
.period-utilization.attention { color: #9a3412; background: #ffedd5; }
.period-utilization.critical { color: #b42318; background: #fee4e2; }

.program-period-report { margin-top: 10px; border-color: #dfe4eb; border-radius: 11px; box-shadow: 0 3px 12px rgba(16, 24, 40, .035); }
.program-period-head { min-height: 54px; padding: 9px 12px; border-bottom-color: #dfe4eb; background: #fff; }
.program-period-head h4 { margin: 0; color: #101828; font-size: 13px; font-weight: 650; }
.program-period-head p { margin: 3px 0 0; color: #667085; font-size: 10px; }
.program-period-head > strong { color: #344054; font-size: 11px; font-variant-numeric: tabular-nums; }
.program-period-table th { line-height: 1.2; white-space: normal; background: #f8fafc; }
.program-period-table th,
.program-period-table td,
.program-period-table .num-cell,
.program-period-table td:nth-child(2) {
  color: #000 !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}
.program-period-table td:nth-child(2) small { margin-top: 3px; color: #000; }
.program-period-table th,
.program-period-table td { height: 38px; padding: 8px 7px; border-color: #e4e7ec; }

.cycle-program-toolbar-top { margin-bottom: 10px; }
.cycle-report-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.cycle-report-summary .detail-item {
  display: grid;
  min-width: 0;
  min-height: 72px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid #dfe4eb;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
  text-align: center;
}
.cycle-report-summary .detail-item span { color: #475467; font-size: 10px; font-weight: 600; text-transform: none; }
.cycle-report-summary .detail-item strong { overflow: hidden; margin-top: 5px; color: #000; font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.cycle-performance-card { margin-top: 10px; overflow: hidden; border: 1px solid #dfe4eb; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px rgba(16, 24, 40, .035); }
.cycle-performance-head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-bottom: 1px solid #dfe4eb; }
.cycle-performance-head h4 { margin: 0; color: #101828; font-size: 13px; font-weight: 650; }
.cycle-performance-head p { margin: 3px 0 0; color: #667085; font-size: 10px; }
.cycle-performance-head > div:last-child { display: flex; align-items: center; gap: 16px; }
.cycle-performance-head > div:last-child span { color: #667085; font-size: 10px; white-space: nowrap; }
.cycle-performance-head > div:last-child strong { margin-left: 4px; color: #101828; font-size: 11px; font-variant-numeric: tabular-nums; }
.cycle-performance-card .cycle-table-wrap { max-height: none; overflow-x: auto; border: 0; border-radius: 0; }
.cycle-performance-card .cycle-detail-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 10px; }
.cycle-performance-card .cycle-detail-table th { line-height: 1.2; white-space: normal; background: #f8fafc; }
.cycle-performance-card .cycle-detail-table th,
.cycle-performance-card .cycle-detail-table td,
.cycle-performance-card .cycle-detail-table .num-cell,
.cycle-performance-card .cycle-program-name,
.cycle-performance-card .alarm-clear {
  height: 38px;
  padding: 8px 6px;
  color: #000 !important;
  border-color: #e4e7ec;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}
.cycle-performance-card .cycle-program-name { max-width: none; font-family: inherit; text-overflow: ellipsis; white-space: nowrap; }
.cycle-performance-card .cycle-duration { color: #000 !important; font-weight: 650; }
.cycle-performance-card .cycle-detail-table th:first-child { width: 5%; }
.cycle-performance-card .cycle-detail-table th:nth-child(2) { width: 13%; }
.cycle-performance-card .cycle-detail-table th:nth-child(3) { width: 7%; }
.cycle-performance-card .cycle-detail-table th:nth-child(4) { width: 8%; }
.cycle-performance-card .cycle-detail-table th:nth-child(5) { width: 20%; }
.cycle-performance-card .cycle-detail-table th:nth-child(6) { width: 10%; }
.cycle-performance-card .cycle-detail-table th:nth-child(n + 7) { text-align: center; }

.hourly-performance-card { margin-top: 10px; overflow: hidden; }
.hourly-performance-head { min-height: 54px; padding: 9px 12px; border-bottom: 1px solid #dfe4eb; }
.hourly-table-tools { display: flex; align-items: center; gap: 8px; }
.hourly-table-tools input[type="search"] { width: 220px; height: 32px; padding: 0 10px; border: 1px solid #d0d5dd; border-radius: 6px; outline: none; color: #101828; background: #fff; font: inherit; font-size: 10px; }
.detail-utilization .hourly-table-tools input[type="search"] { min-height: 32px; }
.hourly-table-tools input[type="search"]:focus { border-color: #7b263d; box-shadow: 0 0 0 3px rgba(123, 38, 61, .1); }
.exception-toggle {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 550;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.exception-toggle:hover { border-color: #98a2b3; background: #f8fafc; }
.exception-toggle:has(input:checked) { border-color: #7b263d; background: #fdf2f5; box-shadow: 0 0 0 2px rgba(123, 38, 61, .08); }
.exception-toggle input {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 30px;
  appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #e2e8f0;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.detail-utilization .hourly-table-tools .exception-toggle input { width: 30px; height: 17px; min-height: 17px; padding: 0; margin: 0; }
.exception-toggle input::after { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .22); content: ""; transition: transform 140ms ease; }
.exception-toggle input:checked { border-color: #7b263d; background: #7b263d; }
.exception-toggle input:checked::after { transform: translateX(13px); }
.exception-toggle input:focus-visible { outline: 2px solid #b54768; outline-offset: 2px; }
.hourly-table-tools .icon-button { width: 32px; height: 32px; }
.hourly-table-tools svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.utilization-table thead { position: sticky; top: 0; z-index: 1; }
.utilization-table th { line-height: 1.2; white-space: normal; background: #f8fafc; }
.utilization-table th button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: inherit; }
.utilization-table th,
.utilization-table td,
.utilization-table .num-cell,
.utilization-table .util-hour-scope,
.utilization-table .util-hour-program,
.utilization-table .running-percent span {
  color: #000 !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}
.utilization-table tbody tr.exception-row td { background: #fffdf7; }
.utilization-table tbody tr.no-production-row td { color: #000 !important; background: #fff6f5; }
.no-production-badge { display: block; margin-top: 2px; color: #000; font-size: 8px; font-weight: 600; white-space: nowrap; }
.running-percent { display: grid; grid-template-columns: 38px minmax(36px, 1fr); align-items: center; gap: 6px; min-width: 78px; }
.running-percent span { color: #344054; font-variant-numeric: tabular-nums; }
.running-percent i { height: 4px; overflow: hidden; border-radius: 4px; background: #e4e7ec; }
.running-percent i b { display: block; height: 100%; border-radius: inherit; background: #dc2626; }
.running-percent.attention i b { background: #f59e0b; }
.running-percent.good i b { background: #16a34a; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.shift-report-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px 2px; }
.shift-report-skeleton span { height: 92px; border-radius: 10px; background: #e9edf2; animation: shift-skeleton-pulse 1.4s ease-in-out infinite alternate; }
.shift-report-skeleton p { grid-column: 1 / -1; margin: 4px 0; color: #667085; font-size: 11px; text-align: center; }
@keyframes shift-skeleton-pulse { to { opacity: .48; } }
@media (prefers-reduced-motion: reduce) { .shift-report-skeleton span { animation: none; } }

body[data-theme="dark"] .detail-modal-card { color: #e5e7eb; border-color: #344054; background: #182230; }
body[data-theme="dark"] .detail-modal-card .modal-head,
body[data-theme="dark"] .shift-primary-kpi,
body[data-theme="dark"] .shift-breakdown-card,
body[data-theme="dark"] .shift-insight-card,
body[data-theme="dark"] .machine-context-card,
body[data-theme="dark"] .hourly-performance-card,
body[data-theme="dark"] .program-period-report { border-color: #344054; background: #202b3a; }
body[data-theme="dark"] .shift-report-title h3,
body[data-theme="dark"] .shift-primary-kpi strong,
body[data-theme="dark"] .shift-breakdown-card h4,
body[data-theme="dark"] .shift-insight-card h4,
body[data-theme="dark"] .hourly-performance-head h4,
body[data-theme="dark"] .machine-context-card strong { color: #f8fafc; }
body[data-theme="dark"] .shift-primary-kpi > div > span,
body[data-theme="dark"] .shift-breakdown-legend li { color: #d0d5dd; }
body[data-theme="dark"] .utilization-ring::before { background: #202b3a; }
body[data-theme="dark"] .utilization-ring b { color: #f8fafc; }
body[data-theme="dark"] .shift-insight-card ul { border-color: #344054; background: #182230; }
body[data-theme="dark"] .shift-insight-card li { color: #d0d5dd; }

@media (max-width: 1400px) {
  .cycle-secondary-column { display: none; }
}

@media (max-width: 1180px) {
  .shift-primary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shift-analysis-grid { grid-template-columns: 1fr; }
  .shift-side-stack { grid-template-columns: 1fr; grid-template-rows: auto; }
  .machine-context-card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .utilization-table .secondary-column { display: none; }
  .shift-breakdown-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shift-breakdown-legend li:nth-child(3) { border-right: 0; }
  .shift-breakdown-legend li:nth-child(n + 4) { border-top: 1px solid #eaecf0; }
  .cycle-report-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cycle-secondary-column { display: none; }
}

@media (max-width: 760px) {
  .shift-utilization-header { grid-template-columns: 1fr; align-items: stretch; }
  .shift-utilization-header .detail-report-filter { grid-template-columns: 1fr 1fr; }
  .shift-last-updated { grid-column: 1; text-align: left; }
  .shift-primary-grid { grid-template-columns: 1fr 1fr; }
  .shift-primary-kpi { height: 92px; padding: 11px; }
  .shift-primary-kpi strong { font-size: 21px; }
  .shift-primary-grid .shift-primary-kpi:first-child { grid-column: 1 / -1; }
  .shift-breakdown-bar { min-width: 620px; }
  .shift-breakdown-card { overflow-x: auto; }
  .shift-breakdown-legend { grid-template-columns: repeat(2, minmax(180px, 1fr)); min-width: 560px; }
  .shift-breakdown-legend li:nth-child(odd) { border-right: 1px solid #eaecf0; }
  .shift-breakdown-legend li:nth-child(even) { border-right: 0; }
  .machine-context-card { grid-template-columns: 1fr 1fr; }
  .hourly-performance-head { align-items: stretch; flex-direction: column; }
  .hourly-table-tools { flex-wrap: wrap; }
  .hourly-table-tools label:first-child { flex: 1 1 100%; }
  .hourly-table-tools input[type="search"] { width: 100%; }
  .utilization-table th:nth-child(7), .utilization-table td:nth-child(7),
  .utilization-table th:nth-child(8), .utilization-table td:nth-child(8),
  .utilization-table th:nth-child(9), .utilization-table td:nth-child(9),
  .utilization-table th:nth-child(10), .utilization-table td:nth-child(10) { display: none; }
  .cycle-report-summary { grid-template-columns: 1fr 1fr; }
  .cycle-performance-head { align-items: flex-start; flex-direction: column; }
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
}

.modal-card {
  padding: 20px;
  box-shadow: var(--shadow);
}

.modal-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.detail-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 0;
  border-color: #d9e0e9;
  border-radius: 10px;
  background: #f5f7fa;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .2);
  backdrop-filter: none;
}

.detail-modal-card .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 72px;
  padding: 13px 18px;
  margin-bottom: 0;
  border-bottom: 1px solid #e2e7ee;
  background: #fff;
}

.detail-modal-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.detail-modal-heading > div { min-width: 0; }
.detail-modal-heading .eyebrow { margin: 0 0 2px; color: var(--maroon); font-size: 9px; font-weight: 650; letter-spacing: 0; }
.detail-modal-heading h2 { margin: 0; overflow: hidden; color: #172033; font-size: 18px; font-weight: 650; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.detail-modal-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #e8d5db;
  border-radius: 8px;
  color: var(--maroon);
  background: var(--maroon-soft);
}
.detail-modal-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.detail-close-button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; padding: 0; place-items: center; border: 1px solid #dce2ea; border-radius: 8px; color: #475467; background: #fff; }
.detail-close-button:hover { color: #b42318; border-color: #f2c3bf; background: #fff6f5; }
.detail-close-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.machine-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.machine-form.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-panel {
  max-width: 980px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.report-note {
  max-width: 650px;
  color: var(--muted);
  line-height: 1.55;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.report-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  min-height: 360px;
  padding: 18px;
  border: 1px solid rgba(207, 216, 230, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(20, 34, 56, 0.07);
}

.report-form {
  display: grid;
  grid-template-rows: repeat(4, auto) 1fr auto;
  gap: 12px;
  height: 100%;
}

.report-form .button {
  justify-self: stretch;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
}

.report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.report-actions .button {
  min-width: 0;
  margin-top: 0;
}

.reports-preview {
  margin-bottom: 18px;
  padding: 18px;
}

.reports-preview .section-head {
  margin-bottom: 14px;
}

.reports-preview .table-wrap {
  max-height: 58vh;
}

.reports-preview .performance-cell {
  background: #dcfce7;
  color: #166534;
}

.reports-preview .loss-cell {
  background: #ffe4e6;
  color: #9f1239;
}

.reports-preview .stop-average {
  font-weight: 600;
}

.reports-preview .stop-average.good {
  background: #dcfce7;
  color: #166534;
}

.reports-preview .stop-average.warning {
  background: #fef3c7;
  color: #92400e;
}

.reports-preview .stop-average.critical {
  background: #fee2e2;
  color: #991b1b;
}

#reportsTab .button,
.report-card .button,
#openExportFromTab {
  min-width: 132px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.report-card input,
.report-card select,
.report-card .button {
  min-height: 42px;
}

.assignment-panel {
  max-width: none;
}

.assignment-form {
  grid-template-columns: 130px 92px 120px minmax(150px, 1fr) minmax(140px, 1fr) 120px minmax(130px, 1fr) minmax(150px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.shift-plan-modal {
  width: min(1180px, calc(100vw - 32px));
}

.alarm-incident-report .table-wrap {
  max-height: calc(100vh - 285px);
  overflow: auto;
}

.alarm-incident-report .device-table {
  min-width: 1900px;
  font-size: 12px;
}

.alarm-incident-report .device-table th,
.alarm-incident-report .device-table td {
  padding: 9px 10px;
  vertical-align: top;
  white-space: nowrap;
}

.alarm-incident-report .device-table th:nth-child(11),
.alarm-incident-report .device-table td:nth-child(11) {
  min-width: 260px;
  white-space: normal;
}

.shift-create-modal {
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 32px);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr auto;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
}

.shift-create-header {
  grid-template-columns: 180px 140px minmax(260px, 1fr);
  gap: 10px;
}

.draft-operation-form {
  grid-template-columns: 96px 180px 180px 160px 92px;
  justify-content: start;
  align-items: end;
  min-width: 0;
  gap: 8px;
  padding: 8px 10px;
  margin: 0;
}

.draft-operation-form .button {
  width: 92px;
  min-width: 92px;
  padding-inline: 10px;
}

.draft-operation-form .span-2 {
  grid-column: auto;
}

.shift-create-modal .operation-list-wrap {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
}

.shift-create-modal,
.shift-create-modal *,
.draft-operation-form > *,
.shift-create-header > * {
  min-width: 0;
}

.shift-create-modal .device-table {
  width: 100%;
  table-layout: fixed;
}

.shift-create-modal .device-table th,
.shift-create-modal .device-table td {
  overflow-wrap: anywhere;
}

.shift-create-modal .inline-edit-row select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

.shift-create-modal .modal-head {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.shift-create-modal .modal-actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  background: white;
}

.planner-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.planner-section-title span {
  color: var(--ink);
}

.planner-section-title small {
  color: var(--muted);
  font-size: 12px;
}

.shift-plan-modal .assignment-form {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.shift-plan-modal .assignment-form .span-2 {
  grid-column: span 2;
}

.assignment-form .span-2 {
  grid-column: auto;
}

.assignment-form label {
  min-width: 0;
}

.assignment-form input,
.assignment-form select {
  min-height: 38px;
}

.span-2 {
  grid-column: span 2;
}

.master-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.master-actions .button {
  min-height: 36px;
  padding-inline: 12px;
}

.master-modal {
  width: min(760px, calc(100vw - 32px));
}

.master-inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, auto) minmax(110px, auto);
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

#partMasterForm .master-inline-form {
  grid-template-columns: minmax(180px, 1fr) 160px minmax(130px, auto) minmax(110px, auto);
}

.master-list {
  display: grid;
  gap: 8px;
  max-height: 48vh;
  overflow: auto;
  margin-top: 16px;
}

.master-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.master-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.master-row small {
  color: var(--muted);
  font-size: 12px;
}

.master-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.tv-preview-panel {
  padding: 0;
  overflow: hidden;
}

.tv-preview-panel .section-head {
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.tv-preview {
  width: 100%;
  height: 70vh;
  border: 0;
  display: block;
  background: #f8fafc;
}

#tvTab {
  padding: 0;
}

#tvTab .tv-preview-panel {
  height: calc(100vh - 84px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#tvTab .tv-preview {
  height: 100%;
}

.tv-body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #0b1018;
  color: #f8fafc;
}

.tv-shell {
  height: 100vh;
  padding: 14px 18px 12px;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr) 32px;
  gap: 10px;
}

.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px 10px;
  border-bottom: 1px solid #263143;
}

.tv-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.tv-brand img {
  width: 142px;
  max-height: 54px;
  object-fit: contain;
  padding: 6px 8px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #fff;
}

.tv-title h1 {
  margin: 0;
  color: #f8fafc;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.tv-title .eyebrow {
  margin: 0 0 3px;
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.tv-live-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.tv-shift-block,
.tv-clock-block {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding-left: 14px;
  border-left: 1px solid #334155;
}

.tv-shift-block span,
.tv-clock-block span {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
}

.tv-shift-block strong,
.tv-clock-block strong {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.tv-fullscreen {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #475569;
  border-radius: 5px;
  background: #182231;
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.tv-board {
  min-height: 0;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #263143;
  border-radius: 6px;
  background: #111925;
}

.tv-board-head,
.tv-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.65fr) minmax(150px, 1.5fr) minmax(110px, 1fr) minmax(90px, 0.8fr) minmax(85px, 0.65fr) minmax(130px, 1fr);
  align-items: center;
  column-gap: 14px;
}

.tv-board-head {
  padding: 0 14px 0 18px;
  border-bottom: 1px solid #334155;
  background: #182231;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.tv-grid {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(15, minmax(0, 1fr));
  overflow: hidden;
}

.tv-row {
  min-height: 0;
  padding: 0 14px;
  border-bottom: 1px solid #273244;
  border-left: 5px solid #64748b;
  background: #111925;
  color: #dbe5f1;
  font-size: 14px;
}

.tv-row:last-child {
  border-bottom: 0;
}

.tv-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-machine {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.tv-operator {
  color: #fff;
  font-weight: 600;
}

.tv-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tv-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.tv-state i,
.legend-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #64748b;
}

.tv-row.state-running {
  border-left-color: #22c55e;
  background: rgba(21, 128, 61, 0.22);
}

.tv-row.state-running .tv-state { color: #86efac; }
.tv-row.state-running .tv-state i {
  background: #22c55e;
}

.tv-row.state-stopped,
.tv-row.state-offline {
  border-left-color: #ef4444;
  background: rgba(153, 27, 27, 0.22);
}

.tv-row.state-stopped .tv-state,
.tv-row.state-offline .tv-state { color: #fca5a5; }
.tv-row.state-stopped .tv-state i,
.tv-row.state-offline .tv-state i {
  background: #ef4444;
}

.tv-row.state-alarm {
  border-left-color: #f59e0b;
  background: rgba(180, 83, 9, 0.24);
}

.tv-row.state-alarm .tv-state { color: #fde68a; }
.tv-row.state-alarm .tv-state i {
  background: #f59e0b;
}

.tv-row.state-scheduled {
  border-left-color: #38bdf8;
  background: rgba(3, 105, 161, 0.18);
}

.tv-row.state-scheduled .tv-state { color: #bae6fd; }
.tv-row.state-scheduled .tv-state i {
  background: #38bdf8;
}

.tv-empty {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 16px;
}

.tv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #94a3b8;
  font-size: 11px;
}

.tv-legend,
.tv-page-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tv-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot.running { background: #22c55e; }
.legend-dot.stopped { background: #ef4444; }
.legend-dot.offline { background: #991b1b; }
.legend-dot.scheduled { background: #38bdf8; }

.tv-page-status strong {
  color: #e2e8f0;
  font-weight: 600;
}

.tv-page-track {
  width: 90px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: #334155;
}

.tv-page-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: #38bdf8;
}

@keyframes tv-page-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-top: 16px;
}

.detail-utilization {
  display: block;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 24px;
  background: #f5f7fa;
  overscroll-behavior: contain;
  scrollbar-color: #bdc6d2 transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.detail-utilization::-webkit-scrollbar { width: 9px; height: 9px; }
.detail-utilization::-webkit-scrollbar-track { background: transparent; }
.detail-utilization::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #bdc6d2; background-clip: padding-box; }
.detail-utilization::-webkit-scrollbar-thumb:hover { background: #98a2b3; background-clip: padding-box; }

.detail-report-filter {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 170px 160px auto;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid #e2d9dc;
  border-radius: 7px;
  background: #faf8f9;
}

.detail-filter-copy { display: grid; align-self: center; gap: 3px; }
.detail-filter-copy span,
.detail-report-filter label { color: #776970; font-size: 10px; font-weight: 600; }
.detail-filter-copy strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.detail-report-filter label { display: grid; gap: 5px; }
.detail-report-filter input,
.detail-report-filter select { width: 100%; height: 36px; min-width: 0; padding: 0 10px; border: 1px solid #d8cdd1; border-radius: 6px; outline: none; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.detail-report-filter input:focus,
.detail-report-filter select:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(123, 38, 61, 0.1); }
.detail-filter-actions { display: flex; gap: 8px; justify-content: flex-end; }
.detail-filter-actions .button { min-width: 116px; white-space: nowrap; }

.detail-report-tabs {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid #e2d9dc;
  border-radius: 7px;
  background: #faf8f9;
  box-shadow: 0 5px 16px rgba(45, 31, 36, 0.06);
}

@media (max-width: 900px) {
  .detail-report-filter { grid-template-columns: 1fr 1fr; }
  .detail-filter-copy { grid-column: 1 / -1; }
  .detail-filter-actions { grid-column: 1 / -1; }
}

.detail-report-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  color: #6d6065;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.detail-report-tab.active {
  color: #fff;
  background: var(--maroon);
  box-shadow: 0 6px 14px rgba(123, 38, 61, 0.18);
}

.detail-report-panel[hidden] {
  display: none;
}

.cycle-report-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cycle-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.cycle-program-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 360px) auto;
  align-items: end;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.cycle-program-toolbar-top {
  margin-top: -4px;
  border-color: #ddd3d6;
  background: #fbf9fa;
  box-shadow: 0 3px 10px rgba(45, 31, 36, 0.04);
}

.utilization-program-toolbar {
  grid-template-columns: minmax(230px, 1fr) minmax(220px, 330px) minmax(160px, 220px) auto;
  margin-top: -4px;
  border-color: #ddd3d6;
  background: #fbf9fa;
  box-shadow: 0 3px 10px rgba(45, 31, 36, 0.04);
}

.cycle-program-toolbar > div {
  display: grid;
  gap: 2px;
}

.cycle-program-toolbar > div span,
.cycle-program-toolbar label {
  color: #667085;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.cycle-program-toolbar > div strong {
  color: #101828;
  font-size: 12px;
  font-weight: 600;
}

.cycle-program-toolbar label {
  display: grid;
  gap: 4px;
}

.cycle-program-toolbar select {
  height: 34px;
  min-width: 0;
  padding: 0 30px 0 10px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #101828;
  background: #fff;
  font-size: 11px;
}

.cycle-filter-count {
  align-self: center;
  color: #667085;
  font-size: 11px;
  white-space: nowrap;
}

.cycle-detail-table {
  min-width: 1560px;
  font-size: 11px;
}

.cycle-program-name {
  max-width: 220px;
  overflow: hidden;
  color: #344054 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cycle-program-toolbar { grid-template-columns: 1fr; }
  .cycle-filter-count { align-self: auto; }
}

.cycle-detail-table th,
.cycle-detail-table td {
  padding: 9px 10px;
  color: #000;
  text-align: center;
}

.cycle-detail-table .cycle-duration {
  color: var(--maroon-dark);
  font-weight: 600;
}

.detail-empty-row {
  height: 120px;
  color: var(--muted) !important;
  text-align: center !important;
}

.utilization-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  border-left: 3px solid var(--maroon);
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .035);
}

.utilization-report-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.report-meta {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.utilization-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 76px;
  gap: 8px;
  margin-bottom: 10px;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.utilization-kpi {
  --kpi-tone: #64748b;
  --kpi-soft: #f1f5f9;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 76px;
  gap: 8px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 20%, #fff);
  border-radius: 18px;
  background: var(--kpi-soft);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--kpi-tone) 8%, transparent);
}

.utilization-kpi::before {
  position: absolute;
  inset: 0 16px auto;
  height: 2px;
  background: var(--kpi-tone);
  content: "";
}

.utilization-kpi-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 16%, #fff);
  border-radius: 50%;
  color: var(--kpi-tone);
  background: rgba(255, 255, 255, .82);
}

.utilization-kpi-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.utilization-kpi > div {
  min-width: 0;
}

.utilization-kpi span:not(.utilization-kpi-icon),
.utilization-kpi em {
  display: block;
  overflow: hidden;
  color: #667085;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utilization-kpi > div > span {
  margin-bottom: 3px;
  text-transform: uppercase;
}

.utilization-kpi strong {
  display: block;
  overflow: hidden;
  color: #101828;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utilization-kpi strong small {
  color: #667085;
  font-size: 10px;
  font-weight: 500;
}

.utilization-kpi em {
  margin-top: 2px;
  font-weight: 400;
}

.utilization-kpi.logged { --kpi-tone: #2563eb; --kpi-soft: #eff6ff; }
.utilization-kpi.running { --kpi-tone: #16a34a; --kpi-soft: #f0fdf4; }
.utilization-kpi.m00 { --kpi-tone: #d97706; --kpi-soft: #fffbeb; }
.utilization-kpi.m30 { --kpi-tone: #475569; --kpi-soft: #f1f5f9; }
.utilization-kpi.alarm { --kpi-tone: #dc2626; --kpi-soft: #fef2f2; }
.utilization-kpi.other { --kpi-tone: #7c3aed; --kpi-soft: #f5f3ff; }
.utilization-kpi.coverage { --kpi-tone: #0891b2; --kpi-soft: #ecfeff; }
.utilization-kpi.operator { --kpi-tone: #7b263d; --kpi-soft: #fdf2f5; }
.utilization-kpi.production { --kpi-tone: #15803d; --kpi-soft: #f0fdf4; }
.utilization-kpi.recovered { --kpi-tone: #0369a1; --kpi-soft: #f0f9ff; }
.utilization-kpi.rate { --kpi-tone: #0f766e; --kpi-soft: #f0fdfa; }
.utilization-kpi.pace { --kpi-tone: #9333ea; --kpi-soft: #faf5ff; }
.utilization-kpi.programs { --kpi-tone: #7b263d; --kpi-soft: #fdf2f5; }

.utilization-performance-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 76px;
}

.performance-grid .detail-item {
  min-width: 0;
  padding: 9px 11px;
  border-radius: 7px;
  background: #fff;
}

.performance-grid .detail-item span {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.performance-grid .detail-item strong {
  color: #101828;
  font-size: 15px;
  font-weight: 600;
}

.performance-grid .detail-item small {
  margin-top: 3px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .utilization-summary,
  .utilization-performance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .performance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .utilization-program-toolbar { grid-template-columns: 1fr 1fr; }
}

.program-period-report {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.program-period-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.program-period-head div {
  display: grid;
  gap: 2px;
}

.program-period-head span,
.program-period-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.program-period-head small,
.program-period-table small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.program-period-table-wrap {
  overflow-x: hidden;
}

.program-period-table {
  width: 100%;
  table-layout: fixed;
  font-size: 11px;
}

.program-period-table th,
.program-period-table td {
  padding: 8px 7px;
}

.program-period-table th:first-child { width: 14%; }
.program-period-table th:nth-child(2) { width: 20%; }
.program-period-table th:nth-child(3) { width: 9%; }
.program-period-table th:nth-child(n + 4) { text-align: right; }

.program-period-table td:nth-child(2) {
  overflow-wrap: anywhere;
}

.program-period-table td:nth-child(2) strong,
.program-period-table td:nth-child(2) small {
  display: block;
}

.period-utilization {
  display: inline-block;
  min-width: 42px;
  padding: 3px 5px;
  border-radius: 4px;
  color: #166534;
  background: #dcfce7;
  text-align: center;
  font-weight: 600;
}

.utilization-table-wrap {
  overflow-x: hidden;
  max-height: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.utilization-table {
  width: 100%;
  table-layout: fixed;
  font-size: 10.5px;
}

.utilization-table th,
.utilization-table td {
  padding: 8px 6px;
}

.utilization-table th:first-child {
  width: 15%;
}

.utilization-table th:nth-child(2) {
  width: 15%;
}

.utilization-table th:nth-child(3) {
  width: 8%;
}

.utilization-table th:nth-child(n + 4) {
  text-align: right;
}

.util-hour-scope {
  color: #98a2b3;
}

.util-hour-program {
  overflow: hidden;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utilization-table .part-count-cell {
  color: #075985;
  font-weight: 500;
}

.utilization-table tfoot th {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink);
  font-weight: 500;
}

.detail-loading {
  padding: 22px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.detail-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.detail-item.accent-blue {
  border-left: 4px solid var(--blue);
}

.detail-item.accent-amber {
  border-left: 4px solid var(--amber);
}

.detail-item.accent-green {
  border-left: 4px solid var(--green);
}

.detail-item.accent-slate {
  border-left: 4px solid #64748b;
}

.detail-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.detail-item strong {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.detail-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

label {
  display: grid;
  gap: 6px;
}

input,
select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.message {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 1100px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-brand {
    justify-content: space-between;
  }

  .nav {
    width: 100%;
  }

  .dashboard-filter-bar {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }

  .analytics-kpi-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 1400px) {
  .assignment-form {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .assignment-form .span-2 {
    grid-column: span 2;
  }

  .shift-create-modal {
    width: 100%;
    height: calc(100vh - 24px);
  }

  .draft-operation-form {
    grid-template-columns: 96px 180px 180px 160px 92px;
  }

  .draft-operation-form .span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .workspace {
    padding: 14px;
  }

  .topbar {
    margin: -14px -14px 14px;
    padding: 12px 14px;
  }

  .topbar-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .live-panel .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .console-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .utilization-report-head {
    flex-direction: column;
  }

  .report-meta {
    text-align: left;
  }

  .dashboard-filter-bar,
  .performance-grid {
    grid-template-columns: 1fr;
  }

  .brand-logo {
    width: 150px;
  }

  .overview-grid,
  .report-grid,
  .machine-form,
  .assignment-form,
  .machine-form.two-col,
  .utilization-summary,
  .performance-grid,
  .detail-grid,
  .field-row {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .tv-controls {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Production reports: compact manufacturing operations workspace */
#reportsTab {
  color: #172033;
  background: #f5f7fa;
}

#reportsTab .report-control-shell {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 32, 51, 0.05);
}

#reportsTab .report-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 8px;
}

#reportsTab .report-control-head h2 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

#reportsTab .report-control-head .eyebrow,
#reportsTab .production-report-head .eyebrow,
.report-drawer-card .eyebrow {
  margin: 0;
  color: #667085;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#reportsTab .compact-button {
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  color: #475467;
  border-color: #d0d5dd;
  background: #fff;
}

#reportsTab .report-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 42px;
  padding: 0 18px;
  border-bottom: 1px solid #e2e8f0;
}

#reportsTab .report-tab {
  position: relative;
  min-width: 92px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  color: #667085;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  transition: color 160ms ease, background 160ms ease;
}

#reportsTab .report-tab::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: transparent;
  content: "";
}

#reportsTab .report-tab:hover {
  color: #172033;
  background: #f8fafc;
}

#reportsTab .report-tab.active {
  color: #2563eb;
  background: #eff6ff;
}

#reportsTab .report-tab.active::after {
  background: #2563eb;
}

#reportsTab .report-filter-stage {
  padding: 14px 18px 16px;
}

#reportsTab .report-filter-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  height: auto;
}

#reportsTab .report-filter-form[hidden] {
  display: none;
}

#reportsTab .report-filter-form > label {
  display: grid;
  flex: 1 1 150px;
  min-width: 130px;
  gap: 6px;
  color: #667085;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#reportsTab .report-filter-form > label:has(.report-machine) {
  flex-grow: 1.25;
}

#reportsTab .report-filter-form input,
#reportsTab .report-filter-form select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #172033;
  background: #fff;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#reportsTab .report-filter-form input:focus,
#reportsTab .report-filter-form select:focus,
#reportsTab .report-tab:focus-visible,
#reportsTab button:focus-visible {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

#reportsTab .report-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
}

#reportsTab .report-actions .button {
  width: auto;
  min-width: 94px;
  min-height: 40px;
  margin: 0;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

#reportsTab .report-actions .button.primary {
  border-color: #2563eb;
  background: #2563eb;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .16);
}

#reportsTab .excel-export {
  color: #166534;
  border: 1px solid #bbd8c3;
  background: #fff;
}

#reportsTab .excel-export:hover {
  border-color: #16a34a;
  background: #f0fdf4;
}

#reportsTab .button.is-loading {
  cursor: wait;
  opacity: .7;
}

#reportsTab .reports-preview {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#reportsTab .report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(23, 32, 51, .035);
}

#reportsTab .report-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 9px 12px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #edf0f4;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#reportsTab .report-kpi:last-child {
  border-right: 0;
}

#reportsTab .report-kpi::before {
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--kpi-color, #94a3b8);
  content: "";
}

#reportsTab .report-kpi.blue { --kpi-color: #2563eb; --kpi-soft: #eff6ff; }
#reportsTab .report-kpi.cyan { --kpi-color: #0ea5e9; --kpi-soft: #f0f9ff; }
#reportsTab .report-kpi.green,
#reportsTab .report-kpi.good,
#reportsTab .report-kpi.excellent { --kpi-color: #16a34a; --kpi-soft: #f0fdf4; }
#reportsTab .report-kpi.warning,
#reportsTab .report-kpi.amber { --kpi-color: #f59e0b; --kpi-soft: #fffbeb; }
#reportsTab .report-kpi.red,
#reportsTab .report-kpi.critical { --kpi-color: #dc2626; --kpi-soft: #fef2f2; }
#reportsTab .report-kpi.neutral { --kpi-color: #94a3b8; --kpi-soft: #f8fafc; }

#reportsTab .report-kpi-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  color: var(--kpi-color, #64748b);
  background: var(--kpi-soft, #f8fafc);
}

#reportsTab .report-kpi-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#reportsTab .report-kpi div > span {
  display: block;
  margin-bottom: 2px;
  color: #667085;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#reportsTab .report-kpi strong {
  display: block;
  color: #172033;
  font-size: 20px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

#reportsTab .report-kpi small {
  display: none;
}

#reportsTab .production-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 13px 16px;
  border: 1px solid #e2e8f0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

#reportsTab .production-report-head h2 {
  margin: 2px 0 3px;
  color: #172033;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
}

#reportsTab .production-report-head p:not(.eyebrow) {
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#reportsTab .report-head-meta {
  display: grid;
  justify-items: end;
  gap: 5px;
}

#reportsTab .report-head-meta span {
  padding: 5px 9px;
  border: 1px solid #dbeafe;
  border-radius: 5px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 11px;
  font-weight: 650;
}

#reportsTab .report-head-meta small {
  color: #98a2b3;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

#reportsTab .production-table-wrap {
  max-height: calc(100vh - 420px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

#reportsTab .production-report-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #172033;
  font-size: 12px;
}

#reportsTab .production-report-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  padding: 0 10px;
  border-bottom: 1px solid #dce3ec;
  color: #475467;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: normal;
}

#reportsTab .report-column-heading {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  white-space: nowrap;
}

#reportsTab .report-info-button {
  display: inline-grid;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  padding: 0;
  place-items: center;
  border: 1px solid #aeb8c6;
  border-radius: 50%;
  background: #fff;
  color: #536174;
  font: 700 9px/1 Arial, sans-serif;
  text-transform: none;
  cursor: pointer;
}

#reportsTab .report-info-button:hover,
#reportsTab .report-info-button:focus-visible {
  border-color: #7b263d;
  outline: 0;
  color: #7b263d;
  box-shadow: 0 0 0 2px rgba(123, 38, 61, .12);
}

#reportsTab .production-report-table tbody td {
  height: 54px;
  padding: 8px 10px;
  border-bottom: 1px solid #edf1f5;
  color: #344054;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#reportsTab .production-report-table th:nth-child(1),
#reportsTab .production-report-table td:nth-child(1) { width: 4.5%; }
#reportsTab .production-report-table th:nth-child(2),
#reportsTab .production-report-table td:nth-child(2) { width: 4%; }
#reportsTab .production-report-table th:nth-child(3),
#reportsTab .production-report-table td:nth-child(3) { width: 4%; }
#reportsTab .production-report-table th:nth-child(4),
#reportsTab .production-report-table td:nth-child(4) { width: 7%; }
#reportsTab .production-report-table th:nth-child(5),
#reportsTab .production-report-table td:nth-child(5) { width: 11%; }
#reportsTab .production-report-table th:nth-child(6),
#reportsTab .production-report-table td:nth-child(6) { width: 5%; }
#reportsTab .production-report-table th:nth-child(7),
#reportsTab .production-report-table td:nth-child(7) { width: 7.5%; }
#reportsTab .production-report-table th:nth-child(8),
#reportsTab .production-report-table td:nth-child(8) { width: 7.5%; }
#reportsTab .production-report-table th:nth-child(9),
#reportsTab .production-report-table td:nth-child(9) { width: 4%; }
#reportsTab .production-report-table th:nth-child(10),
#reportsTab .production-report-table td:nth-child(10) { width: 5%; }
#reportsTab .production-report-table th:nth-child(11),
#reportsTab .production-report-table td:nth-child(11) { width: 4.5%; }
#reportsTab .production-report-table th:nth-child(12),
#reportsTab .production-report-table td:nth-child(12) { width: 5.5%; }
#reportsTab .production-report-table th:nth-child(13),
#reportsTab .production-report-table td:nth-child(13) { width: 5.5%; }
#reportsTab .production-report-table th:nth-child(14),
#reportsTab .production-report-table td:nth-child(14) { width: 8%; }
#reportsTab .production-report-table th:nth-child(15),
#reportsTab .production-report-table td:nth-child(15) { width: 4.5%; }
#reportsTab .production-report-table th:nth-child(16),
#reportsTab .production-report-table td:nth-child(16) { width: 5.5%; }
#reportsTab .production-report-table th:nth-child(17),
#reportsTab .production-report-table td:nth-child(17) { width: 4.5%; }
#reportsTab .production-report-table th:nth-child(18),
#reportsTab .production-report-table td:nth-child(18) { width: 2.5%; }

#reportsTab .production-report-table tbody tr {
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

#reportsTab .production-report-table tbody tr:hover,
#reportsTab .production-report-table tbody tr:focus-visible {
  outline: 0;
  background: #f8fbff;
  box-shadow: inset 3px 0 #2563eb;
}

#reportsTab .production-report-table tbody tr:last-child td {
  border-bottom: 0;
}

#reportsTab .production-report-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#reportsTab .machine-number {
  color: #101828;
  font-size: 14px;
  font-weight: 700;
}

#reportsTab .target-value { color: #1d4ed8; font-weight: 650; }
#reportsTab .feasible-value { color: #0369a1; font-weight: 650; }
#reportsTab .ok-value { color: #15803d; font-weight: 700; }
#reportsTab .loss-value { color: #b42318; font-weight: 650; }

#reportsTab .achievement-cell {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 92px;
}

#reportsTab .achievement-cell strong {
  color: var(--achievement, #dc2626);
  font-size: 12px;
  font-weight: 700;
}

#reportsTab .achievement-cell.excellent,
#reportsTab .achievement-cell.good { --achievement: #16a34a; }
#reportsTab .achievement-cell.warning { --achievement: #f59e0b; }
#reportsTab .achievement-cell.critical { --achievement: #dc2626; }

#reportsTab .achievement-track {
  display: block;
  width: 100%;
  max-width: 86px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #e9eef5;
}

#reportsTab .achievement-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--achievement, #dc2626);
}

#reportsTab .production-report-table .stop-average {
  display: inline-flex;
  min-width: 58px;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 650;
}

.report-metric-detail {
  display: grid;
  gap: 12px;
}

.report-metric-detail section {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid #e1e6ed;
  border-radius: 7px;
  background: #fafbfc;
}

.report-metric-detail section > span {
  color: #697586;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.report-metric-detail p {
  margin: 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.55;
}

.report-metric-detail code {
  overflow-wrap: anywhere;
  color: #641f35;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
}

.report-metric-detail .report-metric-note {
  padding: 0 2px;
  color: #7b8492;
  font-size: 10px;
}

/* Factory TV board: large-format light and dark presentation. */
html[data-tv-theme="light"] {
  color-scheme: light;
  --tv-bg: #f4f7fb;
  --tv-surface: #ffffff;
  --tv-surface-strong: #f8fafc;
  --tv-line: #d8e1ed;
  --tv-line-strong: #cbd6e5;
  --tv-text: #0b1b3a;
  --tv-muted: #42608d;
  --tv-accent: #086ddd;
  --tv-head: #f2f6fb;
  --tv-shadow: 0 5px 18px rgba(35, 70, 115, .08);
}

html[data-tv-theme="dark"] {
  color-scheme: dark;
  --tv-bg: #010916;
  --tv-surface: #031020;
  --tv-surface-strong: #06172b;
  --tv-line: #164268;
  --tv-line-strong: #147fbe;
  --tv-text: #f6f8fc;
  --tv-muted: #a7c9e7;
  --tv-accent: #23aefd;
  --tv-head: #071c34;
  --tv-shadow: 0 0 24px rgba(0, 140, 230, .08);
}

.tv-body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--tv-bg);
  color: var(--tv-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.tv-shell {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 108px 138px minmax(0, 1fr) 76px;
  gap: 14px;
  width: 100vw;
  height: 100vh;
  padding: 6px;
  background: var(--tv-bg);
}

.tv-page-header,
.tv-header,
.tv-board,
.tv-footer {
  box-sizing: border-box;
  border: 1px solid var(--tv-line);
  background: var(--tv-surface);
  box-shadow: var(--tv-shadow);
}

.tv-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 18px 28px;
  border-radius: 10px;
}

.tv-page-header p {
  margin: 0 0 7px;
  color: var(--tv-accent);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tv-page-header h1 {
  margin: 0;
  color: var(--tv-text);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: 0;
}

.tv-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tv-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 64px;
  padding: 0 22px;
  border: 1px solid var(--tv-line-strong);
  border-radius: 10px;
  background: var(--tv-surface-strong);
  color: var(--tv-text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.tv-action-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tv-fullscreen {
  border-color: #1169c7;
  background: #1766c4;
  color: #fff;
  box-shadow: 0 8px 18px rgba(18, 92, 185, .2);
}

.tv-action-button:hover,
.tv-action-button:focus-visible {
  outline: 0;
  border-color: var(--tv-accent);
  box-shadow: 0 0 0 3px rgba(25, 132, 223, .16);
}

html[data-tv-theme="dark"] .theme-icon-dark,
html[data-tv-theme="light"] .theme-icon-light {
  display: none;
}

.tv-header {
  display: grid;
  grid-template-columns: minmax(310px, .9fr) minmax(440px, 1.55fr) minmax(500px, 1.25fr);
  align-items: center;
  gap: 0;
  padding: 18px 28px;
  border-radius: 10px;
}

.tv-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: 28px;
}

.tv-brand img {
  width: 100%;
  max-width: 330px;
  max-height: 92px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

html[data-tv-theme="dark"] .tv-brand img {
  filter: brightness(1.6) saturate(1.08);
}

.tv-title {
  min-width: 0;
  padding: 2px 32px;
  border-right: 1px solid var(--tv-line);
  border-left: 1px solid var(--tv-line);
}

.tv-title .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  color: var(--tv-accent);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tv-operation-icon,
.tv-context-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--tv-accent);
}

.tv-operation-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.tv-title h2 {
  margin: 0;
  overflow: hidden;
  color: var(--tv-text);
  font-size: 38px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-live-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.tv-shift-block,
.tv-clock-block {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 4px 22px;
  border-left: 0;
}

.tv-clock-block {
  border-left: 1px solid var(--tv-line);
}

.tv-context-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--tv-accent);
  border-radius: 50%;
}

.tv-context-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tv-shift-block > div,
.tv-clock-block > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.tv-shift-block span:not(.tv-context-icon),
.tv-clock-block span:not(.tv-context-icon) {
  overflow: hidden;
  color: var(--tv-accent);
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tv-shift-block strong,
.tv-clock-block strong {
  overflow: hidden;
  color: var(--tv-text);
  font-size: 20px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-board {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.tv-board-head,
.tv-row {
  display: grid;
  grid-template-columns: minmax(100px, .75fr) minmax(180px, 1.35fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(100px, .65fr) minmax(170px, 1fr);
  align-items: center;
  column-gap: 20px;
}

.tv-board-head {
  padding: 0 38px;
  border-bottom: 1px solid var(--tv-line);
  background: var(--tv-head);
  color: var(--tv-muted);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tv-grid {
  display: grid;
  grid-template-rows: repeat(var(--page-row-count, 1), minmax(34px, 68px));
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

.tv-row {
  position: relative;
  min-height: 0;
  padding: 0 38px;
  border-bottom: 1px solid var(--tv-line);
  border-left: 6px solid transparent;
  background: var(--tv-surface);
  color: var(--tv-text);
  font-size: 18px;
}

.tv-row:last-child {
  border-bottom: 0;
}

.tv-row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-machine {
  color: var(--tv-text);
  font-size: 29px;
  font-weight: 650;
}

.tv-operator {
  color: var(--tv-text);
  font-weight: 600;
}

.tv-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tv-state {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 650;
}

.tv-state i,
.legend-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: #7a8798;
}

.tv-row.state-running {
  border-left-color: #20c46a;
  background: rgba(32, 196, 106, .07);
}

.tv-row.state-running .tv-state { color: #18ad5b; }
.tv-row.state-running .tv-state i,
.legend-dot.running { background: #20c46a; box-shadow: 0 0 10px rgba(32, 196, 106, .35); }

.tv-row.state-stopped {
  border-left-color: #f3aa1b;
  background: rgba(243, 170, 27, .07);
}

.tv-row.state-stopped .tv-state { color: #e39a0f; }
.tv-row.state-stopped .tv-state i,
.legend-dot.stopped { background: #f3aa1b; box-shadow: 0 0 10px rgba(243, 170, 27, .3); }

.tv-row.state-offline,
.tv-row.state-unassigned {
  border-left-color: #f23f4a;
  background: rgba(242, 63, 74, .045);
}

.tv-row.state-offline .tv-state,
.tv-row.state-unassigned .tv-state { color: #ef3543; }
.tv-row.state-offline .tv-state i,
.legend-dot.offline { background: #f23f4a; box-shadow: 0 0 10px rgba(242, 63, 74, .3); }
.tv-row.state-unassigned .tv-state i {
  position: relative;
  box-sizing: border-box;
  border: 3px solid #f23f4a;
  background: transparent;
}
.tv-row.state-unassigned .tv-state i::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f23f4a;
  content: "!";
  font: 800 11px/1 Arial, sans-serif;
}

.tv-row.state-scheduled {
  border-left-color: #1598ef;
  background: rgba(21, 152, 239, .06);
}

.tv-row.state-scheduled .tv-state { color: #168ee2; }
.tv-row.state-scheduled .tv-state i,
.legend-dot.scheduled { background: #1598ef; box-shadow: 0 0 10px rgba(21, 152, 239, .3); }

.tv-empty {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  color: var(--tv-muted);
  font-size: 18px;
}

.tv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 32px;
  border-radius: 10px;
  color: var(--tv-muted);
  font-size: 15px;
}

.tv-legend,
.tv-page-status {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.tv-legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tv-muted);
  white-space: nowrap;
}

.tv-page-status strong {
  padding-left: 24px;
  border-left: 1px solid var(--tv-line);
  color: var(--tv-text);
  font-weight: 650;
  white-space: nowrap;
}

.tv-page-track {
  width: 165px;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--tv-line);
}

.tv-page-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  border-radius: inherit;
  background: var(--tv-accent);
  box-shadow: 0 0 9px rgba(35, 174, 253, .4);
}

html[data-tv-theme="dark"] .tv-page-header,
html[data-tv-theme="dark"] .tv-header,
html[data-tv-theme="dark"] .tv-board,
html[data-tv-theme="dark"] .tv-footer {
  border-color: var(--tv-line-strong);
  border-radius: 0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

html[data-tv-theme="dark"] .tv-board-head {
  border-bottom-color: #2a628f;
}

html[data-tv-theme="dark"] .tv-row {
  border-bottom-color: #16324f;
}

@media (max-width: 1500px) {
  .tv-shell { grid-template-rows: 92px 120px minmax(0, 1fr) 62px; gap: 10px; }
  .tv-page-header { padding: 13px 22px; }
  .tv-page-header p { margin-bottom: 4px; font-size: 12px; }
  .tv-page-header h1 { font-size: 25px; }
  .tv-action-button { height: 52px; padding: 0 16px; font-size: 14px; }
  .tv-action-button svg { width: 20px; height: 20px; }
  .tv-header { grid-template-columns: minmax(240px, .8fr) minmax(390px, 1.55fr) minmax(430px, 1.25fr); padding: 14px 22px; }
  .tv-brand { padding-right: 22px; }
  .tv-brand img { max-width: 270px; max-height: 76px; }
  .tv-title { padding: 0 24px; }
  .tv-title .eyebrow { margin-bottom: 7px; font-size: 12px; }
  .tv-title h2 { font-size: 30px; }
  .tv-shift-block, .tv-clock-block { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 2px 14px; }
  .tv-context-icon { width: 34px; height: 34px; }
  .tv-context-icon svg { width: 21px; height: 21px; }
  .tv-shift-block span:not(.tv-context-icon), .tv-clock-block span:not(.tv-context-icon) { font-size: 11px; }
  .tv-shift-block strong, .tv-clock-block strong { font-size: 16px; }
  .tv-board { grid-template-rows: 44px minmax(0, 1fr); }
  .tv-board-head, .tv-row { column-gap: 14px; }
  .tv-board-head { padding: 0 26px; font-size: 11px; }
  .tv-row { padding: 0 26px; font-size: 14px; }
  .tv-machine { font-size: 21px; }
  .tv-state { gap: 9px; font-size: 14px; }
  .tv-state i, .legend-dot { width: 13px; height: 13px; flex-basis: 13px; }
  .tv-row.state-unassigned .tv-state i { border-width: 2px; }
  .tv-row.state-unassigned .tv-state i::after { font-size: 8px; }
  .tv-footer { padding: 0 24px; font-size: 12px; }
  .tv-legend, .tv-page-status { gap: 16px; }
  .tv-page-track { width: 120px; height: 6px; }
}

@media (max-width: 1000px) {
  .tv-shell { grid-template-rows: 70px 94px minmax(0, 1fr) 48px; gap: 7px; padding: 4px; }
  .tv-page-header { padding: 9px 14px; }
  .tv-page-header p, .tv-theme-toggle span, .tv-fullscreen span { display: none; }
  .tv-page-header h1 { font-size: 20px; }
  .tv-action-button { width: 42px; height: 42px; padding: 0; }
  .tv-header { grid-template-columns: 180px minmax(280px, 1fr) minmax(320px, 1fr); padding: 10px 14px; }
  .tv-brand img { max-width: 165px; }
  .tv-title { padding: 0 16px; }
  .tv-title .eyebrow { font-size: 9px; }
  .tv-title h2 { font-size: 22px; }
  .tv-live-summary { min-width: 320px; }
  .tv-shift-block, .tv-clock-block { grid-template-columns: 28px minmax(0, 1fr); padding: 0 8px; }
  .tv-context-icon { width: 28px; height: 28px; }
  .tv-context-icon svg { width: 17px; height: 17px; }
  .tv-shift-block span:not(.tv-context-icon), .tv-clock-block span:not(.tv-context-icon) { font-size: 8px; }
  .tv-shift-block strong, .tv-clock-block strong { font-size: 11px; }
  .tv-board-head, .tv-row { grid-template-columns: 70px minmax(110px, 1.2fr) minmax(90px, 1fr) minmax(70px, .8fr) 70px minmax(100px, 1fr); column-gap: 8px; }
  .tv-board-head { padding: 0 14px; font-size: 8px; }
  .tv-row { padding: 0 14px; font-size: 10px; }
  .tv-machine { font-size: 15px; }
  .tv-state { font-size: 10px; }
  .tv-footer { padding: 0 14px; font-size: 9px; }
  .tv-legend { gap: 9px; }
  .tv-page-track { width: 70px; }
}

@media (max-height: 760px) {
  .tv-shell {
    grid-template-rows: 74px 102px minmax(0, 1fr) 50px;
    gap: 8px;
    padding: 5px;
  }

  .tv-page-header {
    padding: 10px 20px;
  }

  .tv-page-header p {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .tv-page-header h1 {
    font-size: 22px;
  }

  .tv-action-button {
    height: 44px;
    padding: 0 14px;
    font-size: 13px;
  }

  .tv-action-button svg {
    width: 18px;
    height: 18px;
  }

  .tv-header {
    grid-template-columns: minmax(230px, .8fr) minmax(390px, 1.55fr) minmax(430px, 1.25fr);
    padding: 10px 22px;
  }

  .tv-brand img {
    max-width: 245px;
    max-height: 68px;
  }

  .tv-title {
    padding: 0 24px;
  }

  .tv-title .eyebrow {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .tv-operation-icon svg {
    width: 18px;
    height: 18px;
  }

  .tv-title h2 {
    font-size: 27px;
  }

  .tv-shift-block,
  .tv-clock-block {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 0 12px;
  }

  .tv-context-icon {
    width: 30px;
    height: 30px;
  }

  .tv-context-icon svg {
    width: 18px;
    height: 18px;
  }

  .tv-shift-block span:not(.tv-context-icon),
  .tv-clock-block span:not(.tv-context-icon) {
    font-size: 9px;
  }

  .tv-shift-block strong,
  .tv-clock-block strong {
    font-size: 13px;
  }

  .tv-board {
    grid-template-rows: 42px minmax(0, 1fr);
  }

  .tv-board-head {
    padding: 0 28px;
    font-size: 10px;
  }

  .tv-row {
    padding: 0 28px;
    font-size: 13px;
  }

  .tv-machine {
    font-size: 20px;
  }

  .tv-state {
    gap: 8px;
    font-size: 13px;
  }

  .tv-state i,
  .legend-dot {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }

  .tv-footer {
    padding: 0 24px;
    font-size: 10px;
  }

  .tv-legend,
  .tv-page-status {
    gap: 14px;
  }

  .tv-page-track {
    width: 105px;
    height: 5px;
  }
}

#reportsTab .no-active-job {
  background: #fafbfc;
}

#reportsTab .no-active-job td {
  color: #98a2b3;
}

#reportsTab .no-job-badge,
#reportsTab .muted-value {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  color: #667085;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 600;
}

#reportsTab .report-detail-button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  color: #2563eb;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

#reportsTab .report-detail-button:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

#reportsTab .report-empty-state,
#reportsTab .report-error-state {
  display: grid;
  min-height: 280px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #667085;
  background: #fff;
  text-align: center;
}

#reportsTab .report-empty-state strong,
#reportsTab .report-error-state strong {
  color: #344054;
  font-size: 15px;
  font-weight: 650;
}

#reportsTab .report-empty-state p,
#reportsTab .report-error-state p {
  margin: 0;
  font-size: 12px;
}

#reportsTab .report-empty-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  place-items: center;
  border-radius: 8px;
  color: #64748b;
  background: #f1f5f9;
  font-size: 20px;
}

#reportsTab .report-skeleton {
  padding: 4px 0;
}

#reportsTab .skeleton-line,
#reportsTab .skeleton-kpi,
#reportsTab .skeleton-table span {
  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%);
  background-size: 200% 100%;
  animation: report-skeleton 1.3s linear infinite;
}

#reportsTab .skeleton-line {
  width: 240px;
  height: 18px;
  margin-bottom: 14px;
  border-radius: 4px;
}

#reportsTab .skeleton-kpi {
  height: 96px;
  border-radius: 8px;
}

#reportsTab .skeleton-table {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #e2e8f0;
}

#reportsTab .skeleton-table span {
  height: 54px;
}

@keyframes report-skeleton {
  to { background-position: -200% 0; }
}

.report-detail-drawer {
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: -18px 0 50px rgba(15, 23, 42, .16);
}

.report-detail-drawer::backdrop {
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(2px);
}

.report-drawer-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.report-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.report-drawer-head h2 {
  margin: 3px 0 0;
  color: #172033;
  font-size: 19px;
  font-weight: 650;
}

.report-drawer-body {
  padding: 18px;
  overflow-y: auto;
  background: #f8fafc;
}

.drawer-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #e2e8f0;
}

.drawer-summary-grid > div {
  min-height: 78px;
  padding: 14px;
  background: #fff;
}

.drawer-summary-grid span {
  display: block;
  margin-bottom: 7px;
  color: #667085;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.drawer-summary-grid strong {
  color: #172033;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.drawer-summary-grid .drawer-loss {
  color: #dc2626;
}

.loss-analysis-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.drawer-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.drawer-section-title h3 {
  margin: 3px 0 0;
  color: #172033;
  font-size: 16px;
  font-weight: 650;
}

.drawer-section-title small {
  color: #98a2b3;
  font-size: 10px;
}

.loss-breakdown {
  display: grid;
  gap: 15px;
}

.loss-breakdown-row {
  display: grid;
  grid-template-columns: 84px minmax(80px, 1fr) 48px 72px;
  align-items: center;
  gap: 9px;
  color: #475467;
  font-size: 11px;
}

.loss-breakdown-row > strong {
  color: #172033;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.loss-breakdown-row > small {
  color: #667085;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.loss-breakdown-track {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1f5;
}

.loss-breakdown-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #64748b;
}

.loss-breakdown-track i.m00 { background: #f59e0b; }
.loss-breakdown-track i.m30 { background: #0ea5e9; }
.loss-breakdown-track i.alarm { background: #dc2626; }
.loss-breakdown-track i.other { background: #64748b; }

.drawer-empty {
  padding: 22px;
  border: 1px dashed #d0d5dd;
  border-radius: 7px;
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  text-align: center;
}

body.reports-fullscreen .app-sidebar {
  display: none;
}

body.reports-fullscreen .app-shell {
  grid-template-columns: 1fr;
}

body.reports-fullscreen #reportsTab .report-control-shell {
  display: none;
}

body.reports-fullscreen #reportsTab {
  min-height: calc(100vh - 84px);
  padding: 12px 16px 16px;
}

body.reports-fullscreen #reportsTab .report-kpi {
  min-height: 64px;
}

body.reports-fullscreen #reportsTab .report-kpi strong {
  font-size: 21px;
}

body.reports-fullscreen #reportsTab .production-table-wrap {
  max-height: calc(100vh - 286px);
}

body.reports-fullscreen #reportsTab .production-report-table {
  font-size: 14px;
}

@media (max-width: 1600px) {
  #reportsTab .report-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #reportsTab .report-kpi {
    min-height: 62px;
    padding-inline: 10px;
  }

  #reportsTab .production-table-wrap {
    max-height: calc(100vh - 380px);
  }

  #reportsTab .production-report-table {
    font-size: 10px;
  }

  #reportsTab .production-report-table thead th {
    padding: 0 5px;
    font-size: 8px;
  }

  #reportsTab .production-report-table tbody td {
    padding: 7px 5px;
  }

  #reportsTab .production-report-table .stop-average {
    min-width: 0;
    padding: 0 4px;
    font-size: 9px;
  }

  #reportsTab .machine-number {
    font-size: 12px;
  }

  #reportsTab .achievement-cell {
    min-width: 0;
  }
}

@media (max-width: 1100px) {
  #reportsTab .report-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #reportsTab .report-kpi:nth-child(3n) {
    border-right: 0;
  }

  #reportsTab .report-kpi:nth-child(-n + 3) {
    border-bottom: 1px solid #edf0f4;
  }

  #reportsTab .report-filter-form {
    flex-wrap: wrap;
  }

  #reportsTab .report-filter-form > label {
    flex: 1 1 190px;
  }

  #reportsTab .report-actions {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  #reportsTab .report-control-head,
  #reportsTab .production-report-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #reportsTab .report-head-meta {
    justify-items: start;
  }

  #reportsTab .report-tabs {
    padding: 0 8px;
  }

  #reportsTab .report-tab {
    flex: 1;
    min-width: 0;
  }

  #reportsTab .report-filter-stage {
    padding: 12px;
  }

  #reportsTab .report-filter-form,
  #reportsTab .report-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #reportsTab .report-filter-form > label {
    min-width: 100%;
  }

  #reportsTab .report-actions .button {
    width: 100%;
  }

  #reportsTab .report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #reportsTab .report-kpi {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  #reportsTab .report-kpi small {
    display: none;
  }

  .loss-breakdown-row {
    grid-template-columns: 72px 1fr 48px;
  }

  .loss-breakdown-row > small {
    grid-column: 2 / -1;
  }
}

@media (max-width: 900px) {
  .tv-shell {
    padding: 8px;
    grid-template-rows: 58px minmax(0, 1fr) 24px;
    gap: 6px;
  }

  .tv-brand img {
    width: 84px;
    max-height: 42px;
  }

  .tv-title h1 {
    font-size: 17px;
  }

  .tv-title .eyebrow,
  .tv-shift-block span,
  .tv-date-label,
  .tv-fullscreen,
  .tv-legend {
    display: none;
  }

  .tv-live-summary {
    gap: 8px;
  }

  .tv-shift-block,
  .tv-clock-block {
    min-width: 0;
    padding-left: 8px;
  }

  .tv-shift-block strong,
  .tv-clock-block strong {
    font-size: 12px;
  }

  .tv-board-head,
  .tv-row {
    grid-template-columns: minmax(55px, 0.6fr) minmax(100px, 1.4fr) minmax(80px, 1fr) minmax(65px, 0.55fr) minmax(100px, 1fr);
    column-gap: 8px;
  }

  .tv-board-head span:nth-child(4),
  .tv-row > span:nth-child(4) {
    display: none;
  }

  .tv-row {
    padding: 0 8px;
    font-size: 11px;
  }

  .tv-board-head {
    padding: 0 8px 0 13px;
    font-size: 8px;
  }

  .tv-machine {
    font-size: 14px;
  }

  .tv-footer {
    justify-content: flex-end;
  }
}

/* Machine Fleet: compact, branded operations-console presentation. */
.app-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px 12px 14px;
  overflow: hidden;
  color: #fff;
  background: #421321;
  box-shadow: 10px 0 30px rgba(50, 15, 26, 0.14);
}

.sidebar-brand {
  padding: 2px 8px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand .brand-logo {
  width: 178px;
  max-width: 100%;
  padding: 8px 10px;
  border: 0;
  background: #fff;
  box-shadow: none;
}

.sidebar-brand p {
  margin: 10px 2px 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.app-sidebar .nav {
  display: grid;
  align-content: start;
  gap: 5px;
  width: 100%;
  margin-top: 18px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.app-sidebar .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 43px;
  padding: 0 14px 0 20px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
}

.app-sidebar .nav-link::before {
  display: none;
}

.app-sidebar .nav-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-sidebar .nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
  color: #fff;
  background: #7b263d;
  box-shadow: 0 8px 20px rgba(30, 5, 13, 0.22);
}

.sidebar-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.075);
}

.sidebar-foot::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: #d59a42;
  content: "";
}

.sidebar-foot .developer-mark {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: #fff;
  color: #7b263d;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  box-shadow: 0 5px 12px rgba(25, 5, 11, 0.18);
}

.developer-credit {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
  text-align: left;
}

.developer-credit span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 550;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.developer-credit strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace {
  width: 100%;
  min-width: 0;
  padding: 0;
}

.topbar {
  min-height: 84px;
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid #e8e2e4;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(44, 34, 38, 0.035);
}

.topbar::before {
  display: none;
}

.page-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 250px;
}

.page-heading > .brand-logo {
  display: none;
}

.page-heading-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #ead9df;
  border-radius: 8px;
  color: var(--maroon);
  background: #fbf3f5;
}

.page-heading-icon svg,
.shift-icon svg,
.topbar #fullscreenButton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-heading > .page-heading-copy {
  display: grid;
  align-items: start;
  gap: 1px;
}

.page-kicker {
  color: #9b7481;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar h1 {
  color: #211b1d;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.header-live-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 7px;
  border: 1px solid #c9ead5;
  border-radius: 999px;
  color: #207344;
  background: #f0faf4;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.header-live-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #25a45b;
  box-shadow: 0 0 0 3px rgba(37, 164, 91, 0.12);
}

.page-subtitle {
  margin: 0;
  color: #7d7175;
  font-size: 11px;
  line-height: 1.3;
}

.topbar-operations {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.topbar .current-shift-pill {
  display: grid;
  grid-template-columns: 34px auto minmax(190px, 1fr);
  align-items: center;
  column-gap: 11px;
  width: min(590px, 51vw);
  max-width: 590px;
  min-height: 52px;
  padding: 7px 12px 7px 8px;
  border: 1px solid #e5dde0;
  border-radius: 8px;
  color: #241b1f;
  background: #fff;
  box-shadow: 0 7px 20px rgba(44, 34, 38, 0.05);
}

.shift-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  color: var(--maroon);
  background: #f8edf1;
}

.shift-name-block,
.shift-window-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shift-name-block {
  min-width: 92px;
  padding-right: 13px;
  border-right: 1px solid #eee7e9;
}

.topbar .current-shift-pill .shift-name-block > span,
.topbar .current-shift-pill .shift-window-block > span {
  color: #936b79;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.topbar .current-shift-pill .shift-name-block > strong {
  color: var(--maroon-dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.topbar .current-shift-pill .shift-window-block > small {
  overflow: hidden;
  color: #4d4246;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar #fullscreenButton {
  min-width: 112px;
  min-height: 42px;
  padding: 0 13px;
  color: var(--maroon);
  border-color: #dcc7ce;
  background: #fff;
}

.topbar #fullscreenButton svg {
  width: 16px;
  height: 16px;
}

.topbar #fullscreenButton:hover {
  border-color: var(--maroon);
  background: var(--maroon-soft);
}

.topbar [hidden] {
  display: none !important;
}

.analytics-action-bar {
  min-height: 64px;
  justify-content: flex-end;
  padding: 12px 16px;
}

#setupTab {
  min-height: calc(100vh - 84px);
}

.setup-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.setup-page-heading .eyebrow {
  margin-bottom: 3px;
  color: #9b7481;
  font-size: 9px;
  font-weight: 600;
}

.setup-page-heading h2 {
  color: #211b1d;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.setup-page-subtitle {
  margin: 3px 0 0;
  color: #7d7175;
  font-size: 11px;
}

.setup-protocol-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d8e9df;
  border-radius: 6px;
  color: #276c45;
  background: #f4faf6;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.setup-protocol-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2aaa61;
  box-shadow: 0 0 0 3px rgba(42, 170, 97, 0.12);
}

#setupTab .setup-panel {
  width: 100%;
  max-width: none;
}

.setup-connector-panel {
  padding: 0;
  overflow: hidden;
  border-color: #e3dcdf;
  background: #fff;
  box-shadow: 0 10px 30px rgba(44, 34, 38, 0.055);
}

#setupTab .setup-section-head {
  min-height: 68px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid #ece6e8;
  background: #fff;
}

.setup-section-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.setup-section-title h2 {
  color: #2a2225;
  font-size: 14px;
  font-weight: 600;
}

.setup-section-title p {
  margin: 3px 0 0;
  color: #8a7e82;
  font-size: 10px;
}

.setup-section-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 7px;
  color: #fff;
  background: var(--maroon);
  box-shadow: 0 7px 15px rgba(123, 38, 61, 0.16);
}

.setup-section-icon.neutral {
  color: var(--maroon);
  background: #f8edf1;
  box-shadow: none;
}

.setup-section-icon svg,
.setup-connect-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#machineForm {
  padding: 18px 16px 14px;
}

#setupTab .setup-device-form {
  display: grid;
  grid-template-columns: 0.9fr 1.15fr 1.35fr 0.7fr 1fr 1fr 0.72fr;
  align-items: end;
  gap: 12px;
}

#setupTab .setup-device-form label {
  gap: 7px;
  min-width: 0;
}

#setupTab .setup-device-form label > span {
  color: #6f6267;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

#setupTab .setup-device-form input {
  min-height: 42px;
  border-color: #ded6d9;
  border-radius: 7px;
  color: #241d20;
  background: #fcfbfb;
  font-size: 12px;
}

#setupTab .setup-device-form input::placeholder {
  color: #aaa0a4;
}

.input-with-suffix {
  position: relative;
}

.input-with-suffix input {
  padding-right: 40px;
}

.input-with-suffix small {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #978b8f;
  font-size: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.setup-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #eee8ea;
}

.setup-form-footer .message {
  min-height: 18px;
  margin: 0;
  font-size: 11px;
}

.setup-connect-button {
  min-width: 148px;
  min-height: 40px;
  border-radius: 7px;
}

.setup-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#cancelMachineEdit {
  min-width: 82px;
  min-height: 40px;
  border-color: #ded5d8;
  color: #6d6065;
  background: #fff;
}

#cancelMachineEdit[hidden] {
  display: none;
}

.setup-device-inventory {
  margin-bottom: 0;
  border-color: #e3dcdf;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(44, 34, 38, 0.055);
}

.setup-device-inventory .table-wrap {
  max-height: calc(100vh - 430px);
  min-height: 210px;
}

.setup-device-inventory .device-table th {
  height: 38px;
  padding: 0 14px;
  color: #6f6267;
  background: #faf8f9;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.setup-device-inventory .device-table td {
  height: 52px;
  padding: 9px 14px;
  color: #241d20;
  font-size: 12px;
}

.setup-device-inventory .action-cell {
  justify-content: flex-start;
  gap: 7px;
}

.setup-row-action {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid #ded6d9;
  border-radius: 6px;
  color: var(--maroon);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.setup-row-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.setup-row-action:hover {
  border-color: var(--maroon);
  background: #fbf2f5;
  box-shadow: 0 5px 13px rgba(79, 23, 40, 0.09);
}

.setup-row-action.delete {
  color: #b4233c;
}

.setup-row-action.delete:hover {
  border-color: #e8bac3;
  background: #fff3f5;
}

.tab-panel {
  padding: 18px 20px 26px;
}

.fleet-stats {
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.fleet-stats .stat-card {
  min-height: 104px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border-color: #e5dfe1;
  background: #fff;
  box-shadow: 0 8px 24px rgba(44, 34, 38, 0.05);
}

.fleet-stats .stat-card::before {
  display: none;
}

.fleet-stats .stat-card::after {
  display: none;
}

.fleet-stats .stat-card > div > span {
  color: #655a5e;
  font-size: 11px;
}

.fleet-stats .stat-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  color: #fff;
  background: var(--maroon);
  box-shadow: 0 8px 17px rgba(44, 34, 38, 0.12);
}

.fleet-stats .stat-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fleet-stats .accent-green .stat-icon {
  background: #17a05e;
}

.fleet-stats .accent-amber .stat-icon {
  background: #e89a19;
}

.fleet-stats .accent-red .stat-icon {
  background: #dc3b4b;
}

.fleet-stats .stat-card strong {
  margin-top: 8px;
  color: #21191c;
  font-size: 27px;
  font-weight: 600;
}

.nav {
  gap: 2px;
  padding: 3px;
  border-color: #e8e1e4;
  background: #f8f6f7;
}

.nav-link {
  min-height: 36px;
  padding: 0 12px;
  color: #6f6267;
  font-size: 13px;
}

.nav-link.active,
.nav-link:hover {
  color: var(--maroon-dark);
  background: #fff;
  box-shadow: 0 4px 14px rgba(79, 23, 40, 0.08);
}

.nav-link.active {
  box-shadow: inset 0 -2px 0 var(--maroon), 0 4px 14px rgba(79, 23, 40, 0.08);
}

input:focus,
select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(123, 38, 61, 0.11);
}

#dashboardTab .live-panel {
  border-color: #ddd5d8;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(44, 34, 38, 0.07);
}

#dashboardTab .live-panel .section-head {
  min-height: 72px;
  padding: 14px 18px;
  border-bottom-color: #e9e3e5;
  background: #fff;
}

#dashboardTab .console-heading {
  gap: 14px;
}

#dashboardTab .heading-copy {
  min-width: 126px;
}

#dashboardTab .heading-copy h2 {
  color: #241b1f;
  font-size: 18px;
  font-weight: 600;
}

#dashboardTab .heading-copy p {
  color: #81767a;
  font-size: 11px;
}

#dashboardTab .current-shift-pill {
  min-height: 43px;
  padding: 7px 12px;
  border-color: #ead9df;
  background: var(--maroon-soft);
}

#dashboardTab .current-shift-pill span {
  color: #9a7080;
  font-size: 10px;
}

#dashboardTab .current-shift-pill strong {
  color: var(--maroon-dark);
  font-weight: 600;
}

#dashboardTab .current-shift-pill small {
  color: #705f65;
  font-size: 11px;
}

#dashboardTab #fullscreenButton {
  min-height: 36px;
  color: var(--maroon);
  border-color: #dcc7ce;
  background: #fff;
}

#dashboardTab #fullscreenButton:hover {
  border-color: var(--maroon);
  background: var(--maroon-soft);
}

#dashboardTab .dashboard-filter-bar {
  grid-template-columns: minmax(250px, 1.7fr) minmax(125px, 0.7fr) minmax(150px, 0.85fr) minmax(150px, 0.85fr) 124px;
  gap: 10px;
  padding: 14px 16px;
  border-bottom-color: #e9e3e5;
  background: #faf9f9;
}

#dashboardTab .live-panel > .dashboard-filter-bar {
  border-radius: 7px 7px 0 0;
}

#dashboardTab .dashboard-filter-bar label {
  color: #7d7075;
  font-size: 10px;
}

#dashboardTab .dashboard-filter-bar input,
#dashboardTab .dashboard-filter-bar select,
#dashboardTab .dashboard-filter-bar .button {
  min-height: 36px;
  border-radius: 6px;
  font-size: 12px;
}

#dashboardTab .dashboard-filter-bar input,
#dashboardTab .dashboard-filter-bar select {
  border-color: #ded7da;
}

#dashboardTab .dashboard-filter-bar .button {
  padding: 0 12px;
}

#dashboardTab .fleet-search .search-control {
  position: relative;
  display: block;
}

#dashboardTab .fleet-search .search-control svg {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #8b7f83;
  stroke-width: 1.8;
  transform: translateY(-50%);
}

#dashboardTab .fleet-search input {
  padding-left: 38px;
}

#dashboardTab .clear-filter {
  gap: 7px;
  color: #5d5155;
}

#dashboardTab .clear-filter svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--maroon);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dashboardTab .fleet-content {
  display: block;
  min-height: 460px;
}

#dashboardTab .dashboard-filter-bar .primary {
  box-shadow: none;
}

#dashboardTab .table-wrap {
  max-height: calc(100vh - 265px);
  scrollbar-color: #c6b5bb #f3eff0;
  scrollbar-width: thin;
}

#dashboardTab .device-table {
  min-width: 1160px;
  font-size: 12px;
}

#dashboardTab .device-table th {
  height: 38px;
  padding: 9px 10px;
  color: #171717;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  background: #f5f5f6;
  border-bottom-color: #d9cfd3;
}

#dashboardTab .device-table td {
  height: 58px;
  padding: 9px 10px;
  border-bottom-color: #eee9eb;
  border-right-color: #f1edef;
  color: #000;
  text-align: center;
  vertical-align: middle;
}

#dashboardTab .device-table tbody tr:nth-child(even) {
  background: #fcfbfb;
}

#dashboardTab .device-table tbody tr:hover {
  background: #f8f8f9;
}

#dashboardTab .device-row td:first-child {
  padding-left: 17px;
}

#dashboardTab .device-row td:first-child::before {
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}

#dashboardTab .device-row td:first-child strong {
  color: #000;
  font-size: 13px;
  font-weight: 600;
}

#dashboardTab .status {
  justify-content: center;
  width: 68px;
  min-height: 22px;
  gap: 4px;
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

#dashboardTab .status::before {
  width: 5px;
  height: 5px;
}

#dashboardTab .telemetry-state {
  align-items: center;
  min-width: 132px;
  gap: 4px;
}

#dashboardTab .telemetry-state small,
#dashboardTab .activity-live-timer {
  font-size: 10px;
}

#dashboardTab .telemetry-state small {
  color: #000;
}

#dashboardTab .activity-timer-cell {
  min-width: 78px;
  font-variant-numeric: tabular-nums;
}

#dashboardTab .activity-timer-cell .activity-live-timer {
  justify-content: center;
  min-width: 72px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

#dashboardTab .activity-timer-cell .activity-live-timer.timer-safe {
  color: #087443;
  border-color: #b9e9cd;
  background: #ecfdf3;
}

#dashboardTab .activity-timer-cell .activity-live-timer.timer-overdue {
  color: #c01048;
  border-color: #fac5d0;
  background: #fff1f3;
}

#dashboardTab .num-cell {
  color: #000;
  font-weight: 500;
  text-align: center;
}

#dashboardTab .device-table th:nth-child(6),
#dashboardTab .device-table th:nth-child(7),
#dashboardTab .device-table th:nth-child(8),
#dashboardTab .device-table th:nth-child(9) {
  text-align: center;
}

#dashboardTab .action-cell {
  justify-content: center;
}

#dashboardTab .alarm-indicator {
  align-items: center;
}

#dashboardTab .alarm-clear {
  color: #000;
}

#dashboardTab .link-button {
  min-width: 64px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--maroon);
  border: 1px solid #e3cfd6;
  background: #fff;
}

#dashboardTab .link-button:hover {
  border-color: var(--maroon);
  background: var(--maroon-soft);
}

#dashboardTab .icon-action-button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ddd4d7;
  border-radius: 6px;
  color: var(--maroon);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

#dashboardTab .icon-action-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dashboardTab .icon-action-button:hover {
  border-color: var(--maroon);
  background: var(--maroon-soft);
  box-shadow: 0 5px 14px rgba(79, 23, 40, 0.1);
}

#dashboardTab .alarm-clear {
  color: #8a7d82;
}

#dashboardTab .live-panel.is-fullscreen {
  inset: 10px;
  border-color: #cdb9c0;
  box-shadow: 0 24px 70px rgba(44, 21, 29, 0.24);
}

#dashboardTab .live-panel.is-fullscreen .table-wrap {
  max-height: none;
}

#dashboardTab .fleet-preview {
  min-width: 0;
  padding: 17px;
  border-left: 1px solid #e7e1e3;
  background: #fff;
}

.fleet-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.fleet-preview-head > div {
  display: grid;
  gap: 4px;
}

.fleet-preview-head > div > span {
  color: #8c7f84;
  font-size: 10px;
  text-transform: uppercase;
}

.fleet-preview-head > div > strong {
  color: #241b1f;
  font-size: 18px;
  font-weight: 600;
}

.machine-visual {
  display: grid;
  place-items: center;
  height: 135px;
  margin: 14px 0 12px;
  overflow: hidden;
  border: 1px solid #eee9eb;
  border-radius: 7px;
  background: #faf9f9;
}

.machine-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.machine-visual svg {
  width: 88%;
  height: 88%;
  fill: #f2edef;
  stroke: #765663;
  stroke-width: 2;
  stroke-linejoin: round;
}

.fleet-preview-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid #eee9eb;
}

.fleet-preview-list > div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0ecee;
}

.fleet-preview-list dt,
.fleet-preview-list dd {
  margin: 0;
  font-size: 11px;
}

.fleet-preview-list dt {
  color: #8b7e83;
}

.fleet-preview-list dd {
  overflow-wrap: anywhere;
  color: #33282c;
  font-weight: 500;
  text-align: right;
}

.fleet-detail-button {
  width: 100%;
  min-height: 38px;
  margin-top: 14px;
  border-radius: 6px;
  box-shadow: none;
}

.fleet-preview-empty {
  display: grid;
  place-items: center;
  align-content: center;
  height: 100%;
  color: #7f7377;
  text-align: center;
}

.fleet-preview-empty small {
  margin-top: 6px;
  color: #a1979b;
}

/* Shift planner: self-contained, compact assignment workspace. */
#shiftPlanDialog .shift-create-modal {
  padding: 15px 17px;
  gap: 9px;
  border: 1px solid #e2dade;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(44, 18, 27, 0.22);
}

#shiftPlanDialog .modal-head {
  min-height: 49px;
  padding: 0 1px 11px;
  border-bottom-color: #ebe4e7;
}

#shiftPlanDialog .modal-head .eyebrow {
  margin-bottom: 2px;
  color: #9a7180;
  font-size: 9px;
  font-weight: 600;
}

#shiftPlanDialog .modal-head h2 {
  color: #241d20;
  font-size: 18px;
  font-weight: 600;
}

#shiftPlanDialog .icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid #e4dcdf;
  border-radius: 6px;
  color: #6f6267;
  background: #faf8f9;
}

.shift-header-form {
  padding: 11px 12px 12px;
  border: 1px solid #e9e2e5;
  border-radius: 7px;
  background: #fbfafb;
}

.shift-header-form .planner-section-title {
  margin-bottom: 7px;
}

#shiftPlanDialog .shift-create-header {
  grid-template-columns: 190px 150px minmax(260px, 1fr);
  gap: 10px;
  padding: 0;
}

#shiftPlanDialog label {
  gap: 5px;
  color: #6f6267;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

#shiftPlanDialog input,
#shiftPlanDialog select {
  min-height: 38px;
  border-color: #ded6d9;
  border-radius: 6px;
  color: #241d20;
  background: #fff;
  font-size: 12px;
}

.operation-row-title {
  min-height: 37px;
}

.operation-row-title > div:first-child,
#shiftPlanDialog .planner-section-title:not(.operation-row-title) {
  display: grid;
  gap: 2px;
}

.operation-row-title > div:first-child span,
#shiftPlanDialog .planner-section-title > span {
  color: #32282c;
  font-size: 11px;
  font-weight: 600;
}

.operation-row-title small,
#shiftPlanDialog .planner-section-title > small {
  font-size: 10px;
}

.planning-row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.planning-row-action {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid #ded6d9;
  border-radius: 6px;
  color: var(--maroon);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.planning-row-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.planning-row-action:hover {
  border-color: var(--maroon);
  background: #fbf2f5;
  box-shadow: 0 5px 13px rgba(79, 23, 40, 0.09);
}

.planning-row-action.save {
  color: #187245;
}

.planning-row-action.save:hover {
  border-color: #b8ddc9;
  background: #f0faf4;
}

.planning-row-action.delete {
  color: #b4233c;
}

.planning-row-action.delete:hover {
  border-color: #e8bac3;
  background: #fff3f5;
}

.shift-roster-panel {
  overflow: hidden;
  border-color: #e3dcdf;
  background: #fff;
}

.shift-roster-panel .table-wrap {
  width: 100%;
  max-height: 62vh;
  overflow-x: auto;
}

.shift-roster-table {
  width: 100%;
  min-width: 880px;
  table-layout: fixed;
}

.shift-roster-table th,
.shift-roster-table td {
  text-align: left !important;
}

.shift-roster-table th:nth-child(1) { width: 120px; }
.shift-roster-table th:nth-child(2) { width: 90px; }
.shift-roster-table th:nth-child(3) { width: 180px; }
.shift-roster-table th:nth-child(4) { width: 105px; }
.shift-roster-table th:nth-child(6) { width: 170px; }

.shift-roster-table th:last-child,
.shift-roster-table td:last-child {
  min-width: 170px;
  padding-left: 12px;
  padding-right: 12px;
}

.shift-roster-actions-cell .planning-row-actions {
  min-width: 145px;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

#shiftPlanDialog .draft-operation-form {
  grid-template-columns: minmax(90px, 0.65fr) minmax(150px, 1.15fr) minmax(120px, 1fr) minmax(105px, 0.8fr) 88px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e7dfe2;
  border-radius: 7px;
  background: #faf8f9;
}

#shiftPlanDialog .draft-operation-form .button {
  width: 88px;
  min-width: 88px;
  min-height: 38px;
  border-radius: 6px;
  box-shadow: 0 7px 16px rgba(123, 38, 61, 0.15);
}

#shiftPlanDialog .operation-list-wrap {
  border: 1px solid #e6dfe1;
  border-radius: 7px;
  background: #fff;
}

#shiftPlanDialog .device-table th {
  height: 36px;
  padding: 0 12px;
  color: #76696e;
  background: #faf8f9;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

#shiftPlanDialog .device-table td {
  height: 45px;
  padding: 7px 12px;
  color: #281f23;
  font-size: 11px;
}

#shiftPlanDialog .modal-actions {
  min-height: 50px;
  gap: 8px;
  padding-top: 9px;
  border-top-color: #ebe4e7;
}

#shiftPlanDialog .modal-actions .button {
  min-width: 106px;
  min-height: 38px;
  border-radius: 6px;
}

@media (max-width: 1400px) {
  #setupTab .setup-device-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  #shiftPlanDialog .draft-operation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #shiftPlanDialog .draft-operation-form .button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .sidebar-brand .brand-logo {
    width: 154px;
  }

  .fleet-stats {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }

  #dashboardTab .dashboard-filter-bar {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  #dashboardTab .fleet-content {
    grid-template-columns: minmax(0, 1fr);
  }

  #dashboardTab .fleet-preview {
    display: none;
  }

  .topbar-operations {
    width: 100%;
    justify-content: space-between;
  }

  .topbar .current-shift-pill {
    width: min(100%, 680px);
    max-width: 680px;
  }

  #setupTab .setup-device-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    display: block;
  }

  .app-sidebar {
    position: sticky;
    width: 100%;
    height: auto;
    padding: 8px 10px;
  }

  .sidebar-brand,
  .sidebar-foot {
    display: none;
  }

  .app-sidebar .nav {
    display: flex;
    margin: 0;
    overflow-x: auto;
  }

  .app-sidebar .nav-link {
    width: auto;
    min-width: max-content;
    min-height: 38px;
    padding: 0 12px;
  }

  .app-sidebar .nav-link::before {
    display: none;
  }

  .topbar {
    min-height: 72px;
    padding: 11px 14px;
  }

  .topbar-context,
  .page-subtitle {
    display: none;
  }

  .topbar-operations {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .topbar .current-shift-pill {
    grid-template-columns: 32px auto minmax(0, 1fr);
    width: 100%;
    min-height: 50px;
  }

  .page-heading-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .topbar #fullscreenButton {
    width: 100%;
  }

  #setupTab .setup-device-form {
    grid-template-columns: 1fr;
  }

  #shiftPlanDialog .shift-create-header,
  #shiftPlanDialog .draft-operation-form {
    grid-template-columns: 1fr;
  }

  .operation-row-title {
    align-items: stretch;
    flex-direction: column;
  }

  .setup-page-heading,
  .setup-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .setup-connect-button {
    width: 100%;
  }

  .setup-form-actions {
    width: 100%;
  }

  #cancelMachineEdit {
    flex: 1;
  }

  .tab-panel {
    padding: 12px;
  }

  .fleet-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-stats .stat-card {
    min-height: 90px;
    padding: 13px;
  }

  .detail-report-tabs {
    display: flex;
    width: 100%;
  }

  .detail-report-tab {
    flex: 1;
    min-width: 0;
  }

  .cycle-report-summary {
    grid-template-columns: 1fr 1fr;
  }

  .topbar::before {
    width: 3px;
  }

  #dashboardTab .dashboard-filter-bar {
    grid-template-columns: 1fr;
  }

  #dashboardTab .table-wrap {
    max-height: calc(100vh - 380px);
  }
}
/* Machine Fleet: align the main console with the Shift Utilization workspace. */
#dashboardTab {
  --fleet-border: #dfe4eb;
  --fleet-text: #101828;
  --fleet-muted: #667085;
}

#dashboardTab .fleet-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#dashboardTab .fleet-stats .stat-card {
  --fleet-tone: #2563eb;
  --fleet-soft: #eff6ff;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 94px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fleet-tone) 18%, #dfe4eb);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .045);
  backdrop-filter: none;
}

#dashboardTab .fleet-stats .stat-card::before {
  inset: 0 16px auto;
  width: auto;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--fleet-tone);
}

#dashboardTab .fleet-stats .accent-blue { --fleet-tone: #2563eb; --fleet-soft: #eff6ff; }
#dashboardTab .fleet-stats .accent-green { --fleet-tone: #16a34a; --fleet-soft: #f0fdf4; }
#dashboardTab .fleet-stats .accent-amber { --fleet-tone: #d97706; --fleet-soft: #fffbeb; }
#dashboardTab .fleet-stats .accent-red { --fleet-tone: #dc2626; --fleet-soft: #fef2f2; }

#dashboardTab .fleet-stats .stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--fleet-tone) 24%, #fff);
  border-radius: 50%;
  color: var(--fleet-tone);
  background: var(--fleet-soft);
}

#dashboardTab .fleet-stats .stat-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

#dashboardTab .fleet-stats .stat-card > div { min-width: 0; }
#dashboardTab .fleet-stats .stat-card > div > span {
  display: block;
  margin: 0 0 5px;
  color: #344054;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}

#dashboardTab .fleet-stats .stat-card strong {
  margin: 0;
  color: var(--fleet-text);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
}

#dashboardTab .live-panel {
  overflow: hidden;
  border: 1px solid var(--fleet-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .04);
  backdrop-filter: none;
}

#dashboardTab .dashboard-filter-bar {
  grid-template-columns: minmax(260px, 1.65fr) repeat(3, minmax(135px, .72fr)) auto;
  gap: 9px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--fleet-border);
  background: #fff;
}

#dashboardTab .dashboard-filter-bar label {
  display: grid;
  gap: 5px;
  color: #475467;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#dashboardTab .dashboard-filter-bar input,
#dashboardTab .dashboard-filter-bar select,
#dashboardTab .dashboard-filter-bar .button {
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  border-color: #d0d5dd;
  border-radius: 7px;
  color: var(--fleet-text);
  background-color: #fff;
  font-size: 11px;
}

#dashboardTab .dashboard-filter-bar input:focus,
#dashboardTab .dashboard-filter-bar select:focus {
  border-color: #7b263d;
  box-shadow: 0 0 0 3px rgba(123, 38, 61, .09);
}

#dashboardTab .dashboard-filter-bar .search-control {
  height: 38px;
  border-color: #d0d5dd;
  border-radius: 7px;
  background: #fff;
}

#dashboardTab .dashboard-filter-bar .search-control:focus-within {
  border-color: #7b263d;
  box-shadow: 0 0 0 3px rgba(123, 38, 61, .09);
}

#dashboardTab .dashboard-filter-bar .search-control input {
  height: 36px;
  min-height: 36px;
  padding-left: 34px;
  border: 0;
  box-shadow: none;
}

#dashboardTab .dashboard-filter-bar .search-control svg {
  left: 11px;
  width: 15px;
  height: 15px;
  color: #667085;
}

#dashboardTab .dashboard-filter-bar .clear-filter {
  align-self: end;
  min-width: 108px;
  padding: 0 11px;
  color: #344054;
  font-weight: 600;
  white-space: nowrap;
}

#dashboardTab .fleet-content,
#dashboardTab .fleet-content .table-wrap {
  max-height: none;
  overflow-x: hidden;
  background: #fff;
}

#dashboardTab .fleet-content .device-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #000;
  font-size: 10.5px;
}

#dashboardTab .fleet-content .device-table th,
#dashboardTab .fleet-content .device-table td,
#dashboardTab .fleet-content .device-table .num-cell,
#dashboardTab .fleet-content .device-table .activity-timer-cell,
#dashboardTab .fleet-content .device-table .action-cell {
  height: 46px;
  padding: 8px 6px;
  overflow: hidden;
  color: #000;
  border-right: 1px solid #eef2f6;
  border-bottom: 1px solid #e4e7ec;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardTab .fleet-content .device-table th {
  height: 40px;
  color: #344054;
  background: #f8fafc;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

#dashboardTab .fleet-content .device-table th:last-child,
#dashboardTab .fleet-content .device-table td:last-child { border-right: 0; }
#dashboardTab .fleet-content .device-table tbody tr { background: #fff; transition: background 140ms ease, box-shadow 140ms ease; }
#dashboardTab .fleet-content .device-table tbody tr:hover { background: #f8fbff; box-shadow: inset 0 0 0 1px #dbeafe; }
#dashboardTab .fleet-content .device-table td:first-child { padding-left: 12px; }
#dashboardTab .fleet-content .device-table td:first-child::before { top: 7px; bottom: 7px; width: 3px; }
#dashboardTab .fleet-content .device-table td:first-child strong {
  display: inline-grid;
  min-width: 34px;
  min-height: 25px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid #dfe4eb;
  border-radius: 6px;
  color: #101828;
  background: #fff;
  font-size: 11px;
  font-weight: 650;
}

#dashboardTab .fleet-content .device-table th:nth-child(1) { width: 6.5%; }
#dashboardTab .fleet-content .device-table th:nth-child(2) { width: 10%; }
#dashboardTab .fleet-content .device-table th:nth-child(3) { width: 7%; }
#dashboardTab .fleet-content .device-table th:nth-child(4) { width: 6%; }
#dashboardTab .fleet-content .device-table th:nth-child(5) { width: 9%; }
#dashboardTab .fleet-content .device-table th:nth-child(6),
#dashboardTab .fleet-content .device-table th:nth-child(7) { width: 6%; }
#dashboardTab .fleet-content .device-table th:nth-child(8) { width: 5.5%; }
#dashboardTab .fleet-content .device-table th:nth-child(9) { width: 8%; }
#dashboardTab .fleet-content .device-table th:nth-child(10) { width: 7%; }
#dashboardTab .fleet-content .device-table th:nth-child(11) { width: 6.5%; }
#dashboardTab .fleet-content .device-table th:nth-child(12) { width: 11%; }
#dashboardTab .fleet-content .device-table th:nth-child(13) { width: 5.5%; }

#dashboardTab .fleet-content .telemetry-state,
#dashboardTab .fleet-content .alarm-indicator {
  min-width: 0;
  align-items: center;
}

#dashboardTab .fleet-content .status {
  min-width: 74px;
  min-height: 25px;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 650;
}

#dashboardTab .fleet-content .status::before { width: 6px; height: 6px; }
#dashboardTab .fleet-content .activity-live-timer { justify-content: center; font-size: 9px; }
#dashboardTab .fleet-content .activity-live-timer strong { font-size: 10px; }
#dashboardTab .fleet-content .activity-inactive,
#dashboardTab .fleet-content .alarm-clear { color: #475467; font-size: 10px; }
#dashboardTab .fleet-content .alarm-indicator span { padding: 3px 6px; font-size: 9px; font-weight: 650; }
#dashboardTab .fleet-content .alarm-indicator small { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
#dashboardTab .fleet-content .icon-action-button {
  width: 30px;
  height: 30px;
  border-color: #d0d5dd;
  border-radius: 6px;
  color: #344054;
  background: #fff;
}
#dashboardTab .fleet-content .icon-action-button:hover { border-color: #7b263d; color: #7b263d; background: #fdf2f5; }
#dashboardTab .fleet-content .icon-action-button svg { width: 15px; height: 15px; }

body[data-theme="dark"] #dashboardTab .fleet-stats .stat-card,
body[data-theme="dark"] #dashboardTab .live-panel,
body[data-theme="dark"] #dashboardTab .dashboard-filter-bar,
body[data-theme="dark"] #dashboardTab .dashboard-filter-bar input,
body[data-theme="dark"] #dashboardTab .dashboard-filter-bar select,
body[data-theme="dark"] #dashboardTab .dashboard-filter-bar .search-control,
body[data-theme="dark"] #dashboardTab .fleet-content,
body[data-theme="dark"] #dashboardTab .fleet-content .table-wrap,
body[data-theme="dark"] #dashboardTab .fleet-content .device-table tbody tr { background: #111c29; }
body[data-theme="dark"] #dashboardTab .fleet-content .device-table th { color: #e5e7eb; background: #172332; }
body[data-theme="dark"] #dashboardTab .fleet-content .device-table td,
body[data-theme="dark"] #dashboardTab .fleet-content .device-table .num-cell { color: #f8fafc; border-color: #27364a; }

@media (max-width: 1450px) {
  #dashboardTab .dashboard-filter-bar { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(125px, .75fr)) auto; }
  #dashboardTab .fleet-content .device-table th:nth-child(11),
  #dashboardTab .fleet-content .device-table td:nth-child(11) { display: none; }
}

@media (max-width: 1240px) {
  #dashboardTab .fleet-content .device-table th:nth-child(4),
  #dashboardTab .fleet-content .device-table td:nth-child(4),
  #dashboardTab .fleet-content .device-table th:nth-child(10),
  #dashboardTab .fleet-content .device-table td:nth-child(10) { display: none; }
}

@media (max-width: 1050px) {
  #dashboardTab .fleet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboardTab .dashboard-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboardTab .dashboard-filter-bar .fleet-search { grid-column: 1 / -1; }
  #dashboardTab .dashboard-filter-bar .clear-filter { width: 100%; }
  #dashboardTab .fleet-content .device-table th:nth-child(6),
  #dashboardTab .fleet-content .device-table td:nth-child(6),
  #dashboardTab .fleet-content .device-table th:nth-child(7),
  #dashboardTab .fleet-content .device-table td:nth-child(7) { display: none; }
}

@media (max-width: 680px) {
  #dashboardTab .fleet-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  #dashboardTab .fleet-stats .stat-card { min-height: 80px; padding: 11px; }
  #dashboardTab .fleet-stats .stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
  #dashboardTab .fleet-stats .stat-card strong { font-size: 20px; }
  #dashboardTab .dashboard-filter-bar { grid-template-columns: 1fr; }
  #dashboardTab .dashboard-filter-bar .fleet-search { grid-column: auto; }
  #dashboardTab .fleet-content .device-table th:nth-child(2),
  #dashboardTab .fleet-content .device-table td:nth-child(2),
  #dashboardTab .fleet-content .device-table th:nth-child(3),
  #dashboardTab .fleet-content .device-table td:nth-child(3),
  #dashboardTab .fleet-content .device-table th:nth-child(9),
  #dashboardTab .fleet-content .device-table td:nth-child(9),
  #dashboardTab .fleet-content .device-table th:nth-child(12),
  #dashboardTab .fleet-content .device-table td:nth-child(12) { display: none; }
}

/* Controlled CNC program management */
.setup-row-action.program { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.setup-row-action.program:hover { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }

.program-modal {
  width: min(1180px, calc(100vw - 36px));
  max-width: min(1180px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  padding: 0;
  overflow: visible;
}
.program-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 36px);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  padding: 0;
}
.program-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 0;
  padding: 18px 22px;
  margin-bottom: 0;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}
.program-manager-body {
  min-width: 0;
  min-height: 0;
  padding: 18px 22px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f7f9fc;
  overscroll-behavior: contain;
}
.program-manager-loading,
.program-manager-error { display: grid; min-height: 360px; place-content: center; gap: 10px; text-align: center; color: #475467; }
.program-manager-error strong { color: #101828; font-size: 17px; }

.program-readiness { display: flex !important; align-items: center; gap: 7px; }
.program-readiness i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.program-readiness.ready { color: #067647; }
.program-readiness.ready i { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }

.program-deploy-form { border: 1px solid #dce3ec; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(16, 24, 40, .035); }
.program-single-workflow { display: grid; gap: 0; overflow: hidden; }
.program-deploy-form [hidden] { display: none !important; }
.program-deploy-form label { display: grid; gap: 6px; min-width: 0; color: #344054; font-size: 10px; font-weight: 650; text-transform: uppercase; }
.program-deploy-form input,
.program-deploy-form select { width: 100%; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid #d0d5dd; border-radius: 6px; color: #101828; background: #fff; font: inherit; font-size: 12px; font-weight: 500; text-transform: none; outline: none; }
.program-deploy-form input:focus,
.program-deploy-form select:focus { border-color: #9a3d56; box-shadow: 0 0 0 3px rgba(154, 61, 86, .1); }

.program-current-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, .65fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ec;
  background: linear-gradient(180deg, #fff, #fbfcfe);
}
.program-section-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.program-step-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 7px; color: #7b263d; background: #f8eef1; }
.program-step-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.program-section-heading > div { min-width: 0; }
.program-section-heading small,
.program-current-status > span,
.program-current-meta > span { display: block; color: #667085; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.program-section-heading h3 { margin: 3px 0 0; overflow: hidden; color: #101828; font-size: 16px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.program-section-heading p { margin: 3px 0 0; overflow: hidden; color: #667085; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.program-current-status { display: grid; min-width: 0; align-content: center; gap: 6px; padding-left: 20px; border-left: 1px solid #e4e7ec; }
.program-current-status strong { color: #101828; font-size: 12px; font-weight: 650; }
.program-current-status small { color: #667085; font-size: 9px; }
.program-current-meta { min-width: 0; padding: 10px 12px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fff; }
.program-current-meta code { display: block; margin-top: 5px; overflow: hidden; color: #344054; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.program-workflow-section { display: grid; gap: 10px; padding: 14px 20px; border-bottom: 1px solid #e4e7ec; }
.program-workflow-heading { display: flex; align-items: center; gap: 10px; }
.program-workflow-heading > span { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; color: #fff; background: #7b263d; font-size: 10px; font-weight: 700; }
.program-workflow-heading h3 { margin: 0; color: #101828; font-size: 13px; font-weight: 650; }
.program-workflow-heading p { margin: 2px 0 0; color: #667085; font-size: 10px; }
.program-explorer-section { display: grid; gap: 11px; padding: 14px 20px; border-bottom: 1px solid #e4e7ec; }
.program-explorer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.08fr); gap: 12px; align-items: stretch; min-width: 0; }
.program-explorer-pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid #dce3ec; border-radius: 7px; background: #fff; }
.program-explorer-pane.local { grid-template-rows: auto minmax(0, 1fr); }
.program-explorer-pane > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e4e7ec; background: #f9fafb; }
.program-explorer-pane > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.program-explorer-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #e3cbd2; border-radius: 6px; color: #7b263d; background: #fff; }
.program-explorer-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.program-explorer-pane h4 { margin: 0; color: #101828; font-size: 12px; font-weight: 650; }
.program-explorer-pane header p { margin: 2px 0 0; color: #667085; font-size: 9px; }
.program-file-picker { position: relative; display: grid !important; min-height: 104px; margin: 12px; place-content: center; justify-items: center; gap: 5px !important; padding: 13px; border: 1px dashed #c5ccd8; border-radius: 7px; color: #344054 !important; background: #fbfcfe; cursor: pointer; text-align: center; text-transform: none !important; transition: border-color .15s ease, background .15s ease; }
.program-file-picker:hover { border-color: #9a3d56; background: #fdf7f9; }
.program-file-picker input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.program-picker-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #7b263d; background: #f6e9ed; }
.program-picker-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.program-file-picker strong { max-width: 100%; overflow: hidden; color: #101828; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.program-file-picker small { color: #667085; font-size: 9px; font-weight: 450; text-transform: none; }
.program-destination-field { margin: 0 12px 12px; }
.program-destination-field small { color: #667085; font-size: 9px; font-weight: 450; line-height: 1.35; text-transform: none; }
.program-transfer-direction { display: grid; align-self: center; justify-items: center; gap: 2px; color: #7b263d; }
.program-transfer-direction span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #e3cbd2; border-radius: 50%; background: #fff; font-size: 16px; box-shadow: 0 2px 7px rgba(16, 24, 40, .05); }
.program-transfer-direction small { color: #667085; font-size: 8px; font-weight: 650; text-transform: uppercase; }
.program-controller-state { flex: 0 0 auto; padding: 4px 7px; border-radius: 4px; color: #b42318; background: #fef3f2; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.program-controller-state.ready { color: #067647; background: #ecfdf3; }
.program-controller-files { min-height: 152px; max-height: 188px; overflow-x: hidden; overflow-y: auto; padding: 5px; background: #fff; }
.program-file-row { display: grid; width: 100%; min-width: 0; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 9px; border: 0; border-bottom: 1px solid #f0f2f5; color: #344054; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.program-file-row:last-child { border-bottom: 0; }
.program-file-row:hover { background: #f7f9fc; }
.program-file-row.selected { background: #fdf2f5; box-shadow: inset 3px 0 #8c243f; }
.program-file-row > span:nth-child(2) { min-width: 0; }
.program-file-row strong { display: block; overflow: hidden; color: #101828; font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.program-file-row small { display: block; margin-top: 2px; color: #667085; font-size: 8px; }
.program-file-row > b { padding: 3px 6px; border-radius: 4px; color: #067647; background: #ecfdf3; font-size: 8px; font-weight: 700; }
.program-file-type { display: grid; width: 32px; height: 28px; place-items: center; border: 1px solid #dbe3ee; border-radius: 5px; color: #475467; background: #f8fafc; font-size: 7px; font-weight: 750; }
.program-explorer-pane > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 1px solid #e4e7ec; background: #f9fafb; }
.program-explorer-pane > footer > span { min-width: 0; overflow: hidden; color: #667085; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.program-download-button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; font-size: 10px; }
.program-download-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.program-file-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.program-delete-button { min-height: 32px; padding: 0 10px; color: #b42318; border-color: #fecdca; background: #fff; font-size: 10px; }
.program-delete-button:hover:not(:disabled) { color: #912018; border-color: #fda29b; background: #fef3f2; }
.program-delete-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.program-explorer-empty { display: grid; min-height: 142px; place-content: center; gap: 4px; padding: 18px; text-align: center; }
.program-explorer-empty strong { color: #344054; font-size: 11px; }
.program-explorer-empty span { color: #667085; font-size: 9px; }
.program-metadata-fields { display: grid; grid-template-columns: 1fr 1fr .65fr; gap: 10px; }
.program-metadata-preview { padding: 10px 12px; border: 1px solid #dbeafe; border-radius: 6px; background: #f5f9ff; }
.program-metadata-preview span { display: block; margin-bottom: 5px; color: #475467; font-size: 9px; font-weight: 650; text-transform: uppercase; }
.program-metadata-preview code { display: block; overflow: hidden; color: #1d4ed8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.program-confirm-section { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); }
.program-confirm-section .program-workflow-heading { grid-column: 1 / -1; }
.program-confirmation small { color: #667085; font-size: 10px; font-weight: 450; text-transform: none; }
.program-confirmation small strong { color: #101828; }
.program-safety-note { display: flex; gap: 10px; min-height: 61px; align-items: center; padding: 10px 12px; border: 1px solid #fedf89; border-radius: 6px; background: #fffaeb; }
.program-safety-note svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #b54708; stroke-width: 1.8; }
.program-safety-note p { margin: 0; }
.program-safety-note strong,
.program-safety-note span { display: block; }
.program-safety-note strong { color: #93370d; font-size: 11px; }
.program-safety-note span { margin-top: 2px; color: #7a2e0e; font-size: 10px; }
.program-transfer-footer { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; background: #fbfcfe; }
.program-transfer-footer > div { min-width: 0; }
.program-deploy-form .message { min-height: 16px; margin: 0; }
.program-deploy-button { flex: 0 0 auto; min-width: 230px; }
.program-deploy-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.program-access-warning { margin: 3px 0 0; color: #b42318; font-size: 10px; }

@media (max-width: 900px) {
  .program-current-card { grid-template-columns: 1fr 1fr; }
  .program-current-meta { grid-column: 1 / -1; }
  .program-explorer-grid { grid-template-columns: 1fr; }
  .program-transfer-direction { grid-template-columns: auto auto auto auto; justify-content: center; gap: 6px; }
  .program-controller-files { max-height: 170px; }
}
@media (max-width: 620px) {
  .program-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .program-modal-card { height: calc(100vh - 16px); max-height: calc(100vh - 16px); }
  .program-manager-body { padding: 10px; }
  .program-current-card,
  .program-metadata-fields,
  .program-confirm-section { grid-template-columns: 1fr; }
  .program-current-status { padding: 12px 0 0; border-top: 1px solid #e4e7ec; border-left: 0; }
  .program-current-meta,
  .program-workflow-heading { grid-column: 1; }
  .program-workflow-section,
  .program-explorer-section,
  .program-current-card { padding: 14px; }
  .program-explorer-pane > footer { align-items: stretch; flex-direction: column; }
  .program-file-actions { flex-direction: column; }
  .program-file-actions,
  .program-download-button,
  .program-delete-button { width: 100%; }
  .program-transfer-footer { align-items: stretch; flex-direction: column; }
  .program-deploy-button { width: 100%; min-width: 0; }
}
/* Interactive demo environment */
.demo-entry { background: #fff !important; color: #8b233f !important; border: 1px solid #d8a9b5 !important; box-shadow: none !important; }
.demo-entry:hover { background: #fff7f9 !important; border-color: #8b233f !important; }
.demo-login-note { color: #667085; text-align: center; font-size: 12px; }
.demo-mode-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid #e7c8d0; background: #fff7f9; color: #7f1d3a; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.demo-mode-badge i, .copilot-demo-state i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.12); }
.demo-copilot { min-height: calc(100vh - 130px); display: grid; grid-template-rows: auto auto 1fr auto; background: #fff; border: 1px solid #dce3ed; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 30px rgba(15,23,42,.05); }
.demo-copilot-head { display: flex; align-items: center; gap: 14px; padding: 22px 26px; border-bottom: 1px solid #e7ebf1; background: #fbfcfe; }
.demo-copilot-head .copilot-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 8px; background: #f8e9ed; color: #8b233f; }
.demo-copilot-head .copilot-mark svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.demo-copilot-head h2 { margin: 2px 0 3px; font-size: 22px; letter-spacing: 0; }
.demo-copilot-head span { color: #667085; font-size: 13px; }
.copilot-demo-state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #ccebd6; background: #f1fbf4; color: #16763a !important; border-radius: 6px; font-weight: 600; }
.copilot-suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 26px; border-bottom: 1px solid #edf0f4; }
.copilot-suggestions button { border: 1px solid #d6dde7; background: #fff; color: #344054; border-radius: 16px; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.copilot-suggestions button:hover { border-color: #b76a7e; color: #7f1d3a; background: #fff8fa; }
.demo-copilot-messages { min-height: 360px; max-height: calc(100vh - 360px); overflow-y: auto; padding: 24px 26px; background: #fff; }
.copilot-message { display: flex; align-items: flex-start; gap: 11px; max-width: 850px; margin: 0 0 18px; }
.copilot-message > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: #8b233f; color: #fff; font-size: 10px; font-weight: 700; }
.copilot-message div { padding: 13px 15px; border: 1px solid #e1e6ed; border-radius: 4px 8px 8px 8px; background: #f8fafc; color: #111827; line-height: 1.5; }
.copilot-message strong { display: block; margin-bottom: 4px; font-size: 14px; }
.copilot-message p { margin: 0; font-size: 13px; color: #475467; }
.copilot-message.user { margin-left: auto; flex-direction: row-reverse; }
.copilot-message.user > span { background: #344054; }
.copilot-message.user div { background: #fff7f9; border-color: #ead0d7; }
.demo-copilot-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 26px; border-top: 1px solid #e7ebf1; background: #fbfcfe; }
.demo-copilot-form input { min-height: 42px; border: 1px solid #cfd7e3; border-radius: 6px; padding: 0 13px; font: inherit; }
.demo-copilot-form button { min-width: 96px; }
.demo-copilot-form button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 900px) { .demo-mode-badge { display: none !important; } .demo-copilot-head { align-items: flex-start; flex-wrap: wrap; } .copilot-demo-state { margin-left: 58px; } .demo-copilot-messages { max-height: none; } }

/* Demo product navigator */
.demo-navigator-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8800;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 238px;
  min-height: 58px;
  padding: 8px 11px;
  border: 1px solid #9b4860;
  border-radius: 8px;
  color: #fff;
  background: #6f1d36;
  box-shadow: 0 16px 38px rgba(67, 15, 31, .28);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.demo-navigator-launcher:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(67, 15, 31, .34); }
.demo-navigator-launcher.is-open { opacity: 0; pointer-events: none; transform: translateY(8px); }
.demo-navigator-launcher-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; background: rgba(255,255,255,.1); }
.demo-navigator-launcher-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-navigator-launcher span:nth-child(2) { display: grid; gap: 1px; }
.demo-navigator-launcher small { color: rgba(255,255,255,.68); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.demo-navigator-launcher strong { font-size: 13px; font-weight: 650; }
.demo-navigator-launcher b { padding: 5px 7px; border-radius: 5px; color: #6f1d36; background: #fff; font-size: 10px; }
.demo-navigator-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8900;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 44px));
  grid-template-rows: auto 3px auto minmax(160px, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.demo-navigator-panel[hidden], .demo-navigator-launcher[hidden] { display: none !important; }
.demo-navigator-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 16px; background: #fbfcfe; }
.demo-navigator-panel > header span { color: #8b233f; font-size: 9px; font-weight: 750; }
.demo-navigator-panel > header h2 { margin: 4px 0; color: #101828; font-size: 20px; font-weight: 650; }
.demo-navigator-panel > header p { max-width: 300px; margin: 0; color: #667085; font-size: 11px; line-height: 1.45; }
.demo-navigator-panel > header button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #d8dee8; border-radius: 6px; color: #475467; background: #fff; font-size: 20px; cursor: pointer; }
.demo-navigator-progress { background: #eceff4; }
.demo-navigator-progress i { display: block; width: 10%; height: 3px; background: linear-gradient(90deg, #8b233f, #d79b45); transition: width .25s ease; }
.demo-navigator-current { padding: 16px 20px; border-bottom: 1px solid #eaecf0; background: #fff8fa; }
.demo-navigator-current > span { color: #8b233f; font-size: 8px; font-weight: 750; }
.demo-navigator-current strong { display: block; margin: 4px 0 3px; color: #101828; font-size: 15px; font-weight: 650; }
.demo-navigator-current p { margin: 0; color: #475467; font-size: 11px; line-height: 1.45; }
.demo-navigator-steps { display: grid; align-content: start; overflow-y: auto; padding: 7px; background: #fff; }
.demo-navigator-steps button { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 10px; border: 0; border-radius: 6px; color: #344054; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.demo-navigator-steps button:hover { background: #f7f8fa; }
.demo-navigator-steps button.active { color: #7f1d3a; background: #fdf2f5; }
.demo-navigator-steps i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #dfe4eb; border-radius: 6px; color: #667085; background: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.demo-navigator-steps button.active i { border-color: #b9687e; color: #fff; background: #8b233f; }
.demo-navigator-steps span { min-width: 0; }
.demo-navigator-steps strong { display: block; color: inherit; font-size: 11px; font-weight: 650; }
.demo-navigator-steps small { display: block; margin-top: 2px; overflow: hidden; color: #7a8495; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.demo-navigator-panel > footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid #eaecf0; background: #fbfcfe; }
.demo-navigator-panel > footer .button { min-height: 38px; padding: 0 13px; }
.demo-navigator-panel > footer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .demo-navigator-launcher { right: 12px; bottom: 12px; min-width: 218px; }
  .demo-navigator-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}

/* Contextual demo guide */
.demo-guide-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8950;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 7px 13px 7px 8px;
  border: 1px solid #99445c;
  border-radius: 8px;
  color: #fff;
  background: #6f1d36;
  box-shadow: 0 14px 34px rgba(67, 15, 31, .26);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.demo-guide-launcher[hidden] { display: none !important; }
.demo-guide-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(67, 15, 31, .32); }
.demo-guide-launcher > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 6px; background: rgba(255,255,255,.12); }
.demo-guide-launcher svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-guide-launcher div { display: grid; gap: 1px; }
.demo-guide-launcher small { color: rgba(255,255,255,.68); font-size: 8px; font-weight: 700; }
.demo-guide-launcher strong { font-size: 12px; font-weight: 650; }
.demo-guide-launcher.is-active strong::after { content: " · Active"; color: #f4c56d; }

.demo-guide-target {
  position: relative !important;
  z-index: 8850 !important;
  outline: 3px solid #c43d63 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 9px rgba(196, 61, 99, .14), 0 16px 36px rgba(73, 20, 37, .18) !important;
  animation: demo-guide-pulse 1.8s ease-in-out infinite;
}
.demo-guide-target::after {
  position: absolute;
  z-index: 8860;
  top: -15px;
  right: -15px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #8b233f;
  box-shadow: 0 5px 14px rgba(83, 18, 38, .32);
  content: attr(data-demo-guide-number);
  font-size: 11px;
  font-weight: 750;
}
@keyframes demo-guide-pulse {
  0%, 100% { outline-color: #c43d63; }
  50% { outline-color: #e19a42; }
}

.demo-coachmark {
  position: fixed;
  z-index: 9000;
  display: grid;
  width: min(330px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid #d8dee8;
  border-top: 3px solid #8b233f;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15,23,42,.24);
}
.demo-coachmark[hidden] { display: none !important; }
.demo-coachmark > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px 7px; }
.demo-coachmark > header span { color: #8b233f; font-size: 9px; font-weight: 750; }
.demo-coachmark > header button { display: grid; width: 25px; height: 25px; place-items: center; border: 0; border-radius: 5px; color: #667085; background: #f2f4f7; font-size: 17px; cursor: pointer; }
.demo-coachmark-copy { padding: 2px 15px 12px; }
.demo-coachmark-copy b { display: inline-flex; padding: 3px 6px; border-radius: 4px; color: #9a3412; background: #fff3e5; font-size: 8px; font-weight: 750; }
.demo-coachmark-copy h2 { margin: 7px 0 4px; color: #101828; font-size: 16px; font-weight: 650; }
.demo-coachmark-copy p { margin: 0; color: #475467; font-size: 11px; line-height: 1.5; }
.demo-coachmark-dots { display: flex; gap: 6px; padding: 0 15px 12px; }
.demo-coachmark-dots button { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #d5dbe4; border-radius: 50%; color: #667085; background: #fff; font: inherit; font-size: 9px; font-weight: 650; cursor: pointer; }
.demo-coachmark-dots button.active { border-color: #8b233f; color: #fff; background: #8b233f; }
.demo-coachmark > footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid #eaecf0; background: #f8fafc; }
.demo-coachmark > footer .button { min-height: 34px; padding: 0 12px; font-size: 10px; }
@media (max-width: 640px) {
  .demo-guide-launcher { right: 10px; bottom: 10px; }
  .demo-coachmark { width: calc(100vw - 20px); }
}

/* Demo feature hotspots */
.demo-feature-highlight {
  box-shadow: inset 0 -2px 0 rgba(139, 35, 63, .34);
}

.demo-feature-pin {
  position: fixed;
  z-index: 8950;
  display: inline-flex;
  width: 21px;
  min-width: 21px;
  height: 21px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #8b233f;
  box-shadow: 0 3px 10px rgba(79, 18, 36, .28);
  font: 700 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: right center;
  animation: demo-feature-beacon 1.15s ease-in-out infinite;
}

.demo-feature-pin[hidden] { display: none !important; }
.demo-feature-pin.is-action {
  width: auto;
  min-width: 88px;
  height: 27px;
  padding: 0 8px 0 10px;
  gap: 5px;
  border-radius: 14px;
  font-size: 10px;
}
.demo-feature-pin svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.demo-feature-pin.is-action[data-placement="above"] svg { transform: rotate(90deg); }
.demo-feature-pin.is-action[data-placement="below"] svg { transform: rotate(-90deg); }
.demo-feature-pin.is-action[data-placement="right"] svg { transform: rotate(180deg); }
.demo-feature-pin:hover,
.demo-feature-pin:focus-visible,
.demo-feature-pin.is-open {
  transform: translateY(-2px) scale(1.04);
  outline: 0;
  background: #67152e;
  animation-play-state: paused;
}

@keyframes demo-feature-beacon {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(139, 35, 63, .45), 0 3px 10px rgba(79, 18, 36, .3);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 0 0 8px rgba(139, 35, 63, 0), 0 8px 18px rgba(79, 18, 36, .34);
  }
}

.demo-feature-popover {
  position: fixed;
  z-index: 9000;
  width: min(330px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8dee8;
  border-top: 3px solid #8b233f;
  border-radius: 8px;
  color: #101828;
  background: #fff;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .22);
}

.demo-feature-popover[hidden] { display: none !important; }
.demo-feature-popover > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px 7px;
}
.demo-feature-popover > header span {
  color: #8b233f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
}
.demo-feature-popover > header button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  color: #667085;
  background: #f2f4f7;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.demo-feature-popover h2 {
  margin: 2px 15px 5px;
  color: #101828;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
}
.demo-feature-popover p {
  margin: 0;
  padding: 0 15px 15px;
  color: #475467;
  font-size: 12px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .demo-feature-pin { animation: none; }
}