/* ============================================================
   FloorOne — styles for the remaining menus
   (Labor · Safety · Planning · Integrations · Admin)
   ============================================================ */

.title-sub { font: var(--fw-regular) var(--fs-300)/1 var(--font-mono); color: var(--text-muted); margin-left: var(--space-4); letter-spacing: var(--ls-snug); }

/* ───────── Header plant / zone dropdown ───────── */
.hdr-sel-wrap { position: relative; }
.hdr-sel { font: inherit; white-space: nowrap; }
.hdr-sel.is-open { border-color: var(--border-focus); background: var(--surface-4); }
.hdr-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-popover, 800); min-width: 220px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 1px; }
.hdr-menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%;
  padding: var(--space-4) var(--space-5); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-secondary); text-align: left; }
.hdr-menu__item:hover { background: var(--surface-3); color: var(--text-primary); }
.hdr-menu__item.is-active { color: var(--brand-text); }
.hdr-menu__item.is-active svg { color: var(--brand-text); }

/* ───────── Header alarm popover ───────── */
.hdr-bell-wrap { position: relative; }
.hdr-icon.is-open { color: var(--text-primary); border-color: var(--border-focus); background: var(--surface-4); }
.hdr-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-popover, 800); width: 380px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-3); overflow: hidden; }
.hdr-pop__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.hdr-pop__head b { font: var(--fw-semibold) var(--fs-400)/1 var(--font-sans); color: var(--text-primary); }
.hdr-pop__count { font-size: var(--fs-100); color: var(--text-muted); }
.hdr-pop__list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; }
.hdr-alarm { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5);
  background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.hdr-alarm:last-child { border-bottom: none; }
.hdr-alarm:hover { background: var(--surface-3); }
.hdr-alarm__rail { width: 3px; align-self: stretch; flex: none; border-radius: var(--radius-pill); background: var(--status-neutral); }
.hdr-alarm__rail--crit { background: var(--status-crit); box-shadow: 0 0 8px var(--status-crit); }
.hdr-alarm__rail--warn { background: var(--status-warn); }
.hdr-alarm__rail--info { background: var(--status-info); }
.hdr-alarm__body { flex: 1; min-width: 0; }
.hdr-alarm__msg { font: var(--fw-medium) var(--fs-200)/1.3 var(--font-sans); color: var(--text-primary); }
.hdr-alarm__meta { font-size: var(--fs-100); color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-pop__foot { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%;
  padding: var(--space-5) var(--space-6); background: var(--surface-1); border: none; border-top: 1px solid var(--border-subtle); cursor: pointer;
  font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); color: var(--brand-text); }
.hdr-pop__foot:hover { background: var(--surface-3); }

/* ============================================================
   Live Floor — full-bleed canvas + floating editor chrome
   ============================================================ */
.lf-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg-app); }
.lf-canvas { position: absolute; inset: 0; overflow: hidden; }

.lf-canvas--rf { background: var(--surface-1); }
.lf-canvas--rf .react-flow__background { background: var(--surface-1); }
.lf-canvas--rf .react-flow__edge-path { stroke: var(--border-strong); stroke-width: 1.5; }
.lf-canvas--rf .react-flow__controls { background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-2); overflow: hidden; }
.lf-canvas--rf .react-flow__controls-button { background: transparent; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); fill: currentColor; }
.lf-canvas--rf .react-flow__controls-button:hover { background: var(--surface-3); color: var(--text-primary); }
.lf-canvas--rf .react-flow__minimap { background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.lf-canvas--rf .react-flow__attribution { background: transparent; color: var(--text-muted); }

.lf-rfnode { position: relative; background: var(--surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); padding: var(--space-5) var(--space-5) var(--space-4);
  font-family: var(--font-sans); color: var(--text-primary); cursor: pointer; user-select: none; min-width: 220px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.lf-rfnode:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.lf-rfnode.is-sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand), var(--shadow-3); }
.lf-rfnode__stripe { position: absolute; top: -1px; left: -1px; right: -1px; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--status-neutral); }
.lf-rfnode--ok   > .lf-rfnode__stripe { background: var(--status-ok); }
.lf-rfnode--warn > .lf-rfnode__stripe { background: var(--status-warn); }
.lf-rfnode--crit > .lf-rfnode__stripe { background: var(--status-crit); }
.lf-rfnode__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-top: 4px; }
.lf-rfnode__title { font: var(--fw-semibold) var(--fs-300)/1.25 var(--font-sans); color: var(--text-primary); }
.lf-rfnode__sub { margin-top: 4px; font-size: var(--fs-100); color: var(--text-secondary); }
.lf-rfnode__dot { position: absolute; top: var(--space-4); right: var(--space-4); }
.lf-rfnode__badges { display: inline-flex; gap: 6px; flex: none; }
.lf-rfnode__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: var(--fs-100); font-weight: var(--fw-semibold); color: var(--text-on-status); }
.lf-rfnode__badge--crit { background: var(--status-crit); }
.lf-rfnode__badge--warn { background: var(--status-warn); }
.lf-rfnode__cta { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: var(--space-4);
  padding: 8px 10px; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  font-size: var(--fs-100); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-secondary); cursor: pointer; }
.lf-rfnode__cta:hover { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
.lf-rfnode__cta--static { background: transparent; border-style: dashed; cursor: default; pointer-events: none; }

.lf-rfnode--plant { min-width: 260px; padding-bottom: var(--space-4); border-color: color-mix(in srgb, var(--status-crit) 35%, var(--border-default)); }
.lf-rfnode--plant > .lf-rfnode__stripe { background: var(--status-crit); }
.lf-rfnode--zone { min-width: 240px; }
.lf-rfnode--zone > .lf-rfnode__stripe { background: var(--brand); }
.lf-rfnode--line { min-width: 240px; }
.lf-rfnode--machine { min-width: 140px; padding: var(--space-4); }
.lf-rfnode--machine .lf-rfnode__title { font-size: var(--fs-300); }
.lf-rfnode--machine .lf-rfnode__sub { font-size: var(--fs-100); }
.lf-rfnode--machine .lf-rfnode__dot { top: var(--space-3); right: var(--space-3); }

.react-flow__handle { width: 6px; height: 6px; background: var(--border-strong); border: none; }

.lf-canvas--3d { cursor: default; }
.lf-canvas--3d:active { cursor: default; }
.lf-3d__canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.lf-3d__overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--surface-2) 88%, transparent); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3); color: var(--text-secondary); font-size: var(--fs-200); pointer-events: none; z-index: 4; }
.lf-3d__overlay--err { color: var(--status-crit); border-color: color-mix(in srgb, var(--status-crit) 50%, var(--border-default)); }


/* floating chrome — glass over the canvas */
.lf-topbar { position: absolute; top: var(--space-6); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--surface-2) 85%, transparent); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: calc(100% - 580px); }
.lf-topbar__crumbs { padding: 0 var(--space-3); min-width: 0; overflow: hidden; }
.lf-topbar__sep { width: 1px; height: 20px; background: var(--border-default); flex: none; }

.lf-panel { position: absolute; z-index: 5; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.lf-left { top: 76px; bottom: 60px; left: var(--space-6); width: 252px; }
.lf-right { top: 76px; bottom: 60px; right: var(--space-6); width: 320px; }

.lf-tree { display: flex; flex-direction: column; gap: 1px; }
.lf-tree__line { display: flex; align-items: center; gap: 0; border-radius: var(--radius-sm); }
.lf-tree__line.is-sel { background: var(--brand-subtle); }
.lf-tree__twirl { width: 22px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-muted); flex: none; }
.lf-tree__chev { display: inline-flex; transition: transform var(--dur-fast); }
.lf-tree__chev.is-open { transform: rotate(90deg); }
.lf-tree__row { flex: 1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: transparent; border: none; cursor: pointer; text-align: left; min-width: 0; border-radius: var(--radius-sm); }
.lf-tree__row:hover { background: var(--surface-3); }
.lf-tree__name { font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-tree__oee { margin-left: auto; font-size: var(--fs-100); font-variant-numeric: tabular-nums; }
.lf-tree__machine { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); background: transparent; border: none; cursor: pointer; text-align: left; border-radius: var(--radius-sm); font-size: var(--fs-200); color: var(--text-secondary); }
.lf-tree__machine:hover { background: var(--surface-3); }
.lf-tree__machine.is-sel { background: var(--brand-subtle); color: var(--brand-text); }
.lf-tree__moee { margin-left: auto; color: var(--text-muted); }
.lf-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); flex: none; }
.lf-panel__title { font: var(--fw-semibold) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.lf-panel__sub { font-size: var(--fs-100); color: var(--text-muted); }
.lf-panel__body { flex: 1; overflow-y: auto; padding: var(--space-4); }

.lf-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.lf-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-align: left; }
button.lf-kpi { cursor: pointer; transition: border-color var(--dur-fast); }
button.lf-kpi:hover { border-color: var(--border-strong); }
.lf-kpi__cap { font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-tertiary); }
.lf-kpi b { font-family: var(--font-mono); font-size: var(--fs-500); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lf-kpi--crit b { color: var(--status-crit); }
.lf-kpi small { font-size: var(--fs-200); color: var(--text-muted); margin-left: 1px; }
.lf-insp { display: flex; flex-direction: column; gap: var(--space-5); }
.lf-insp__h { font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); margin-bottom: var(--space-4); }
.lf-flow { display: flex; flex-direction: column; gap: var(--space-4); }
.lf-flow__item { display: grid; grid-template-columns: 38px 10px 1fr; gap: var(--space-3); align-items: start; }
.lf-flow__time { font-size: var(--fs-100); color: var(--text-muted); padding-top: 1px; }
.lf-flow__text { font: var(--text-body-sm); color: var(--text-primary); }
.lf-flow__meta { font-size: var(--fs-100); color: var(--text-tertiary); margin-top: 1px; }

.lf-hud { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); background: color-mix(in srgb, var(--surface-2) 85%, transparent); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: var(--fs-100); color: var(--text-tertiary); white-space: nowrap; }

/* ───────── Sidebar hierarchy: clearer group labels + indented items ───────── */
.app__nav .smes-nav__group {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-5) var(--space-3) var(--space-5);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-subtle);
}
.app__nav .smes-nav__group:first-child { margin-top: 0; border-top: none; padding-top: var(--space-2); }
.app__nav .smes-nav__item { padding-left: var(--space-7); gap: var(--space-4); }
.app__nav-sep { margin-top: var(--space-5); }
.note-strip { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6);
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font: var(--text-body-sm); color: var(--text-tertiary); }
.note-strip svg { color: var(--brand-text); flex: none; }
.note-strip b { color: var(--text-secondary); font-weight: var(--fw-medium); }

/* ───────── Labor · Output by Worker ───────── */
.lab-line-pick { display: flex; align-items: center; }
.lab-pick { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-6); width: 100%; }
.lab-pick__k { font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-tertiary); }
.lab-bars { display: flex; flex-direction: column; }
.lab-row { width: 100%; display: grid; grid-template-columns: 14px 1.2fr 70px 2.2fr 92px; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6); background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.lab-row:last-of-type { border-bottom: none; }
.lab-row:hover { background: var(--surface-3); }
.lab-row.is-sel { background: var(--brand-subtle); }
.lab-row__name { font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.lab-row__id { font-size: var(--fs-200); color: var(--text-muted); }
.lab-row__track { height: 10px; background: var(--surface-4); border-radius: var(--radius-pill); overflow: hidden; }
.lab-row__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.lab-row__pcs { text-align: right; font-family: var(--font-mono); font-size: var(--fs-400); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lab-row__pcs small { font-size: var(--fs-100); color: var(--text-muted); margin-left: 2px; }
.lab-foot { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-200); color: var(--text-muted); }

/* ───────── Labor · Assignment ───────── */
.assign-cap { padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.assign-cap__h { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); color: var(--text-secondary); margin-bottom: var(--space-4); }
.assign-cap__bar { position: relative; height: 10px; background: var(--surface-4); border-radius: var(--radius-pill); }
.assign-cap__fill { height: 100%; background: var(--brand); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.assign-cap__demand { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--status-warn); transform: translateX(-1px); }
.assign-cap__legend { display: flex; justify-content: space-between; margin-top: var(--space-4); font-size: var(--fs-200); color: var(--text-tertiary); }
.assign-cap__legend b { color: var(--text-primary); }
.assign-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: start; }
.assign-pool { position: sticky; top: 0; }
.pool { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.pool-chip { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: grab; }
.pool-chip[draggable="false"] { cursor: not-allowed; opacity: 0.5; }
.pool-chip:active { cursor: grabbing; }
.pool-chip__av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-subtle); color: var(--brand-text); font: var(--fw-semibold) var(--fs-200)/1 var(--font-mono); }
.pool-chip__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pool-chip__name { font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.pool-chip__grip { color: var(--text-muted); display: inline-flex; }
.assign-board { display: flex; flex-direction: column; gap: var(--space-5); }
.assign-line { transition: border-color var(--dur-fast), background var(--dur-fast); }
.assign-line.is-over { border-color: var(--brand); background: var(--brand-subtle); }
.slot-row { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.slot { display: inline-flex; align-items: center; gap: var(--space-3); height: 34px; padding: 0 var(--space-5); border-radius: var(--radius-pill); font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); }
.slot--filled { background: var(--surface-4); color: var(--text-primary); border: 1px solid var(--border-default); }
.slot--empty { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); }
.slot__av { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font: var(--fw-semibold) 10px/1 var(--font-mono); }

/* ───────── Inspector tabs + Safety panel (in Overview) ───────── */
.lf-insp__tabs-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.lf-insp__tabs { display: flex; justify-content: center; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }

.lf-insp__safety { display: flex; flex-direction: column; gap: var(--space-4); }
.lf-insp__safety-alarm { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--status-crit) 14%, transparent); border: 1px solid color-mix(in srgb, var(--status-crit) 45%, var(--border-default));
  border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-200); animation: smes-pulse 1.6s ease-in-out infinite; }
.lf-insp__safety-alarm svg { color: var(--status-crit); flex: none; }
.lf-insp__safety-alarm__sep { margin-left: auto; }
.lf-insp__safety-alarm .mono { color: var(--status-crit); font-size: var(--fs-100); }
@media (prefers-reduced-motion: reduce) { .lf-insp__safety-alarm { animation: none; } }

.lf-insp__h--with-badge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lf-insp__h--with-badge .lf-insp__h, .lf-insp__h--with-badge > span:first-child { margin: 0; }

.lf-insp__zones { display: flex; flex-direction: column; gap: 2px; }
.lf-insp__zone-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--border-subtle); }
.lf-insp__zone-row--warn { border-color: color-mix(in srgb, var(--status-warn) 45%, var(--border-default)); }
.lf-insp__zone-row--crit { border-color: color-mix(in srgb, var(--status-crit) 55%, var(--border-default)); background: color-mix(in srgb, var(--status-crit) 8%, var(--surface-1)); }
.lf-insp__zone-name { flex: 1; font: var(--fw-medium) var(--fs-200)/1.2 var(--font-sans); color: var(--text-primary); }
.lf-insp__zone-state { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }

.lf-insp__int-list { display: flex; flex-direction: column; }
.lf-insp__int-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2);
  background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.lf-insp__int-row:hover { background: var(--surface-3); }
.lf-insp__int-row.is-sel { background: var(--brand-subtle); }
.lf-insp__int-time { font-size: var(--fs-100); color: var(--text-muted); }
.lf-insp__int-zone { font: var(--fw-medium) var(--fs-200)/1.2 var(--font-sans); color: var(--text-primary); }
.lf-insp__int-meta { font-size: var(--fs-100); color: var(--text-tertiary); margin-top: 1px; }

.lf-insp__cctv { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.lf-insp__cctv-video { position: relative; height: 110px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: linear-gradient(160deg, #0c121a, #161f2b); color: var(--text-muted); }
[data-theme="light"] .lf-insp__cctv-video { background: linear-gradient(160deg, #1a2334, #2a3548); color: #cbd2dc; }
.lf-insp__cctv-video .mono { font-size: var(--fs-100); }
.lf-insp__cctv-scan { position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient(180deg, transparent, rgba(45,212,216,.16), transparent); animation: cam-scan 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lf-insp__cctv-scan { display: none; } }
.lf-insp__cctv-play { position: absolute; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.lf-insp__cctv-play:hover { background: rgba(255,255,255,.22); }
.lf-insp__cctv-kv { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; }
.lf-insp__cctv-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.lf-insp__cctv-kv dt { font-size: var(--fs-100); color: var(--text-tertiary); margin: 0; }
.lf-insp__cctv-kv dd { font-size: var(--fs-200); color: var(--text-primary); margin: 0; }

/* ───────── Planning · Forecast ───────── */
.fc-card { overflow: hidden; }
.fc-chart { display: flex; align-items: flex-end; gap: var(--space-7); height: 300px; padding: var(--space-8) var(--space-7) var(--space-5); }
.fc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); height: 100%; }
.fc-cap { font-size: var(--fs-100); color: var(--status-warn); text-align: center; line-height: 1.2; }
.fc-band-wrap { position: relative; flex: 1; width: 100%; max-width: 84px; display: flex; align-items: flex-end; justify-content: center; }
.fc-band { position: absolute; left: 18%; right: 18%; background: var(--surface-4); border-radius: var(--radius-xs); border: 1px dashed var(--border-strong); }
.fc-bar { position: relative; width: 46px; background: var(--brand); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; transition: height var(--dur-slow) var(--ease-out); }
.fc-bar__val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-primary); }
.fc-wk { font-size: var(--fs-200); color: var(--text-tertiary); }
.fc-legend { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border-subtle); font-size: var(--fs-100); color: var(--text-muted); }
.fc-legend__band { width: 14px; height: 12px; background: var(--surface-4); border: 1px dashed var(--border-strong); border-radius: 2px; display: inline-block; }
.fc-legend__bar { width: 8px; height: 14px; background: var(--brand); border-radius: 2px; display: inline-block; margin-left: var(--space-4); }
.sku-card { overflow: hidden; }
.sku-list { display: flex; flex-direction: column; }
.sku-row { width: 100%; display: grid; grid-template-columns: 1fr auto 70px; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6);
  background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.sku-row:last-child { border-bottom: none; }
.sku-row:hover { background: var(--surface-3); }
.sku-row__name { font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.sku-row__qty { text-align: right; font-family: var(--font-mono); font-size: var(--fs-400); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sku-row__qty small { font-size: var(--fs-100); color: var(--text-muted); margin-left: 2px; }
.sku-row__delta { text-align: right; font-family: var(--font-mono); font-size: var(--fs-300); }
.sku-row__delta.is-up { color: var(--status-ok); } .sku-row__delta.is-down { color: var(--status-crit); }

/* ───────── Integrations · ERP ───────── */
.erp-log, .imp-card, .gw-list-card, .dlq-card, .adm-card { overflow: hidden; }
.erp-table { display: flex; flex-direction: column; }
.erp-row { width: 100%; display: grid; grid-template-columns: 56px 1.1fr 1.3fr 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6);
  background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.erp-row:last-child { border-bottom: none; }
.erp-row:hover { background: var(--surface-3); }
.erp-row__time { font-size: var(--fs-200); color: var(--text-muted); }
.erp-row__src { font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.erp-row__detail { font-size: var(--fs-200); color: var(--text-secondary); }
.erp-row__tx { font-size: var(--fs-200); color: var(--brand-text); }
.erp-row__ok { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-100); color: var(--status-ok); }
.erp-side { position: sticky; top: 0; }
.erp-side__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.erp-stat { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.erp-stat span { font: var(--text-body-sm); color: var(--text-tertiary); }
.erp-stat b { font-family: var(--font-mono); font-size: var(--fs-400); color: var(--text-primary); }

/* ───────── Integrations · Event Routes ───────── */
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-7); }
.rt-card { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.rt-card__flow { flex: 1; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.rt-card__flow svg { color: var(--text-muted); flex: none; }
.rt-card__ev { font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans); color: var(--text-primary); white-space: nowrap; }
.rt-card__dest { font-size: var(--fs-200); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlq-list { display: flex; flex-direction: column; }
.dlq-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.dlq-row:last-child { border-bottom: none; }
.dlq-row__ev { font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-primary); }
.dlq-row__meta { font-size: var(--fs-200); color: var(--text-muted); }

/* ───────── Integrations · Connections ───────── */
.conn-group { margin-bottom: var(--space-7); }
.conn-group__h { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); font: var(--fw-medium) var(--fs-300)/1 var(--font-sans); color: var(--text-secondary); }
.conn-group__h svg { color: var(--text-muted); }
.conn-group__h .mono { margin-left: auto; font-size: var(--fs-200); color: var(--text-muted); }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.conn-card { padding: var(--space-5) var(--space-6); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-4); }
.conn-card--crit { border-color: var(--status-crit-border); }
.conn-card__top { display: flex; align-items: center; gap: var(--space-4); }
.conn-card__name { font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans); color: var(--text-primary); }
.conn-card__meta { display: flex; align-items: center; justify-content: space-between; }
.conn-card__meta .mono { font-size: var(--fs-200); color: var(--text-tertiary); }

/* ───────── Integrations · Gateways ───────── */
.gw-agg { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); height: 44px; }
.gw-agg__seg { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); border-radius: var(--radius-md); font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); white-space: nowrap; overflow: hidden; }
.gw-agg__seg b { font-family: var(--font-mono); font-size: var(--fs-500); }
.gw-agg__seg--ok { background: var(--status-ok-subtle); color: var(--status-ok); }
.gw-agg__seg--crit { background: var(--status-crit-subtle); color: var(--status-crit); }
.gw-agg__seg--warn { background: var(--status-warn-subtle); color: var(--status-warn); }
.gw-head, .gw-row { display: grid; grid-template-columns: 110px 1.4fr 130px 80px 120px 70px; align-items: center; gap: var(--space-5); }
.gw-head { padding: var(--space-4) var(--space-6); font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.gw-row { width: 100%; padding: var(--space-4) var(--space-6); background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-align: left; }
.gw-row:last-child { border-bottom: none; }
.gw-row:hover { background: var(--surface-3); }
.gw-row__id { font-size: var(--fs-300); color: var(--brand-text); }
.gw-row__zone { font: var(--text-body-sm); color: var(--text-secondary); }

/* ───────── Integrations · Signal Map ───────── */
.sm-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; }
.sm-tree { position: sticky; top: 0; }
.sm-signals { overflow: hidden; }
.sm-head, .sm-row { display: grid; grid-template-columns: 2fr 70px 60px 60px 2.4fr; align-items: center; gap: var(--space-5); }
.sm-head { padding: var(--space-4) var(--space-6); font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.sm-row { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-200); color: var(--text-secondary); }
.sm-row:last-of-type { border-bottom: none; }
.sm-row.is-unmapped { background: color-mix(in srgb, var(--status-warn) 6%, transparent); }
.sm-row__sig { color: var(--text-primary); font-size: var(--fs-200); }
.sm-row__path { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-200); color: var(--text-tertiary); }
.sm-row__path svg { color: var(--status-ok); flex: none; }
.sm-foot { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-100); color: var(--text-muted); }

/* ───────── Integrations · Imports ───────── */
.imp-head, .imp-row { display: grid; grid-template-columns: 2fr 90px 130px 70px 140px; align-items: center; gap: var(--space-5); }
.imp-head { padding: var(--space-4) var(--space-6); font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.imp-row { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.imp-row:last-child { border-bottom: none; }
.imp-row__file { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--fs-300); color: var(--text-primary); }
.imp-row__file svg { color: var(--text-muted); flex: none; }

/* ───────── Admin ───────── */
.adm-users-head, .adm-user { display: grid; grid-template-columns: 2fr 1.4fr 1.6fr 1fr; align-items: center; gap: var(--space-5); }
.adm-users-head { padding: var(--space-4) var(--space-6); font: var(--fw-medium) var(--fs-100)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
.adm-user { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.adm-user:last-child { border-bottom: none; }
.adm-user__id { display: flex; align-items: center; gap: var(--space-4); }
.adm-user__name { font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans); color: var(--text-primary); }
.adm-user__email { font-size: var(--fs-100); color: var(--text-muted); }
.adm-user__scope { font-size: var(--fs-200); color: var(--text-tertiary); }
.adm-user span:last-child { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--text-body-sm); color: var(--text-secondary); }

.adm-ws { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.ws-card__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.ws-card__top svg { color: var(--brand-text); }
.ws-card__org { font: var(--fw-semibold) var(--fs-400)/1.2 var(--font-sans); color: var(--text-primary); }
.ws-card__assets { font-size: var(--fs-200); color: var(--text-muted); }
.ws-spots { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ws-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); min-height: 120px;
  background: transparent; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer; font: var(--text-body-sm); }
.ws-add:hover { border-color: var(--brand); color: var(--brand-text); }

.cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: start; }
.cat-tree { position: sticky; top: 0; }
.cat-sm { padding: var(--space-6); display: flex; flex-direction: column; }
.cat-sm__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.cat-sm__row:last-child { border-bottom: none; }
.cat-sm__k { font: var(--fw-medium) var(--fs-300)/1.3 var(--font-sans); color: var(--text-secondary); }
.cat-sm__v { font: var(--text-body-sm); color: var(--text-primary); }
.cat-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-100); color: var(--text-muted); }

.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.wt-card__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.wt-card__top svg { color: var(--brand-text); }
.wt-card__name { font: var(--fw-semibold) var(--fs-400)/1.2 var(--font-sans); color: var(--text-primary); }
.wt-card__meta { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.wt-card__meta .mono { font-size: var(--fs-200); color: var(--text-tertiary); }
.wt-card__used { color: var(--text-muted) !important; }
.wt-flow { display: flex; align-items: center; }
.wt-step { width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--surface-4); border: 1px solid var(--border-strong); flex: none; }
.wt-arrow { flex: 1; height: 2px; background: var(--border-subtle); }

.audit-list { display: flex; flex-direction: column; }
.audit-row { display: grid; grid-template-columns: 84px 24px 80px 1fr; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.audit-row:last-child { border-bottom: none; }
.audit-row__time { font-size: var(--fs-200); color: var(--text-muted); }
.audit-row__who { font: var(--fw-medium) var(--fs-200)/1 var(--font-sans); color: var(--text-secondary); }
.audit-row__act { font: var(--text-body-sm); color: var(--text-primary); }

.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5); }
.sh-card { padding: var(--space-6); background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-4); border-top: 2px solid var(--status-ok); }
.sh-card--warn { border-top-color: var(--status-warn); }
.sh-card--crit { border-top-color: var(--status-crit); }
.sh-card__top { display: flex; align-items: center; gap: var(--space-3); }
.sh-card__svc { font: var(--fw-medium) var(--fs-300)/1.2 var(--font-sans); color: var(--text-primary); }
.sh-card__v { font-family: var(--font-mono); font-size: var(--fs-500); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .safety-layout, .assign-layout, .cat-layout, .sm-layout { grid-template-columns: 1fr; }
}