/* Authentication and FMF identity layer.  Kept separate while the original
   prototype stylesheet is progressively split into maintainable modules. */
.brand { align-items:center; display:flex; gap:12px; min-height:72px; }
.brand .official-brand-logo { background:#fff; border-radius:9px; height:52px; object-fit:contain; padding:4px; width:52px; }
.brand-copy { display:grid; gap:3px; line-height:1.08; }
.brand-copy b { color:#fff; font-size:15px; letter-spacing:.01em; }
.brand-copy span { color:#afc5dc; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
/* .user-control is now the topbar's own single-row avatar+name button (see rule further
   down, ~line 1577) -- these two only style the avatar circle itself, reused wherever the
   markup puts an #userInitial/.avatar span. */
.avatar, .user-control #userInitial { align-items:center; background:#e5f0ff; border:1px solid #b9d3f8; border-radius:50%; color:#124c9b; display:flex; flex:none; font-weight:800; height:32px; justify-content:center; width:32px; }
.user-control #userName { color:#12233b; font-size:13px; }
.logout-button { background:transparent; border:0; color:#1c5fae; cursor:pointer; font-size:12px; font-weight:700; margin-left:4px; padding:6px 8px; }
.logout-button:hover, .logout-button:focus-visible { background:#eaf3ff; border-radius:6px; outline:2px solid #1d6fd1; outline-offset:2px; }
/* ============================================================================
   Sign-in: the Plant 01 control-room scene.

   A full-bleed dark scene rather than a form on a page. One grid holds it all:
   the brief and the live-context card on the left, a preview of today's plan in
   the middle, and the sign-in card on the right, under a chrome bar.

   The background is built from CSS shapes (belt, oven, arms, trays) so the page
   carries no image dependency and stays sharp at any size. To use a real
   photograph of the plant instead, drop it into frontend/assets/ and set one
   declaration -- the shapes sit behind it, so a photo simply covers them:

       .scene-photo { background-image:url("/assets/plant_photo.jpg"); }
   ============================================================================ */
.login-screen { background:#04101f; display:grid; grid-template-rows:auto minmax(0,1fr) auto; inset:0; overflow:auto; position:fixed; z-index:100; }
.login-screen.hidden { display:none; }

/* ---- background scene ---- */
.login-scene { inset:0; overflow:hidden; position:absolute; z-index:0; }
/* The plant photograph. If the file is absent the element simply paints nothing and the CSS
   rig behind it shows through, so the screen never renders broken.
   grayscale + brightness knock the photo's own colours out before the blue tint goes over it;
   without that, a bright silver-and-beige bakery fights the interface palette. */
/* Duotone: flatten the photo to greyscale, then sepia + hue-rotate tints the whole thing a
   single blue. Straight desaturation plus a translucent blue overlay reads grey instead --
   the photo's own silver-and-beige keeps showing through. saturate() sets how strong the
   blue is; brightness() sets how far it sits behind the interface. */
.scene-photo { background-image:url("/assets/plant_photo.jpg"); background-position:center 42%; background-repeat:no-repeat; background-size:cover; filter:grayscale(1) brightness(.66) sepia(1) hue-rotate(178deg) saturate(2.9) contrast(1.06); inset:0; position:absolute; }
/* Blue-themed, not just darkened: a colour wash plus a deeper wash at the edges, so the
   photograph reads as part of the interface rather than a picture behind it. */
.scene-tint { background:linear-gradient(150deg,rgba(18,86,158,.42),rgba(8,38,78,.5) 45%,rgba(4,16,32,.62)),radial-gradient(ellipse at 50% 34%,rgba(56,150,225,.3),transparent 60%); inset:0; position:absolute; }
.scene-grid { background-image:linear-gradient(rgba(120,190,240,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,240,.055) 1px,transparent 1px); background-size:44px 44px; inset:0; mask-image:radial-gradient(ellipse at 50% 30%,#000 0,transparent 78%); position:absolute; }
/* Darkens the scene enough for white text to clear WCAG AA over every part of it, and
   keeps the brightest area behind the empty middle rather than behind the copy. */
.scene-veil { background:linear-gradient(100deg,rgba(3,12,26,.82) 0 22%,rgba(3,12,26,.5) 46%,rgba(3,12,26,.64) 68%,rgba(3,12,26,.88) 100%),radial-gradient(ellipse at 50% 118%,rgba(2,8,18,.9),transparent 58%),linear-gradient(180deg,rgba(3,12,26,.75) 0,transparent 18%); inset:0; position:absolute; }

.scene-rig { filter:blur(2.5px); inset:0; opacity:.5; position:absolute; }
.scene-rig > * { position:absolute; }
.rig-belt { background:linear-gradient(180deg,#1b4a76 0,#0f3459 40%,#092642 100%); border-top:1px solid rgba(150,205,245,.18); bottom:0; box-shadow:0 -18px 60px rgba(30,120,190,.18); height:26%; left:0; right:0; transform:skewY(-2.2deg); transform-origin:left bottom; }
.rig-oven { background:linear-gradient(160deg,#8fa8bf 0,#5c748a 45%,#3d5871 100%); border-radius:10px; box-shadow:0 40px 90px rgba(2,12,26,.6),inset 0 2px 0 rgba(255,255,255,.5); height:26%; left:46%; top:22%; width:16%; }
.rig-oven::after { background:linear-gradient(180deg,rgba(255,255,255,.5),transparent); border-radius:8px 8px 0 0; content:''; height:22%; inset:6% 8% auto; position:absolute; }
.rig-arm { background:linear-gradient(180deg,rgba(150,180,208,.7),rgba(80,110,140,.6)); border-radius:5px; box-shadow:0 18px 40px rgba(2,12,26,.5); transform-origin:top center; }
.rig-arm-a { height:20%; left:66%; top:14%; transform:rotate(16deg); width:2.1%; }
.rig-arm-b { height:15%; left:73%; top:20%; transform:rotate(-13deg); width:1.8%; }
.rig-tray { background:linear-gradient(150deg,rgba(240,192,100,.75),rgba(217,154,44,.65)); border-radius:3px; box-shadow:0 10px 22px rgba(0,0,0,.4); height:1.5%; width:5%; }
.rig-tray-a { left:38%; top:63%; }
.rig-tray-b { left:47%; top:66%; }
.rig-tray-c { left:57%; top:69%; }

/* ---- top chrome ---- */
.login-chrome { align-items:center; display:flex; gap:14px; justify-content:space-between; padding:20px 30px 0; position:relative; z-index:2; }
.chrome-group { align-items:center; display:flex; gap:12px; }
.chrome-group-end { justify-content:flex-end; }
.chrome-brand { align-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(190,225,250,.3); border-radius:11px; display:flex; gap:11px; padding:7px 14px 7px 8px; }
.chrome-logo { background:#fff; border-radius:9px; box-shadow:0 6px 18px rgba(0,0,0,.35); height:46px; object-fit:contain; padding:6px; width:46px; }
.chrome-wordmark { display:grid; gap:1px; line-height:1.15; }
.chrome-wordmark b { color:#fff; font-size:14px; letter-spacing:.01em; }
.chrome-wordmark small { color:#9dc4e2; font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.chrome-chip { background:rgba(255,255,255,.09); border:1px solid rgba(178,215,245,.28); border-radius:6px; color:#dceaf7; font-size:10px; font-weight:800; letter-spacing:.14em; padding:6px 10px; text-transform:uppercase; }
.chrome-status { align-items:center; background:rgba(28,140,90,.2); border:1px solid rgba(70,215,145,.4); border-radius:99px; color:#7ef0b4; display:flex; font-size:10px; font-weight:800; gap:7px; letter-spacing:.12em; padding:6px 12px; text-transform:uppercase; }
.chrome-status .live-dot { background:#41d17a; border-radius:50%; height:7px; width:7px; animation:livePulse 2.2s ease-out infinite; }
.chrome-clock { color:#cfe2f3; font-size:15px; font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.06em; }

/* ---- body grid ---- */
.login-body { align-content:center; column-gap:30px; display:grid; grid-template-columns:minmax(230px,.85fr) minmax(0,1.35fr) minmax(340px,.95fr); padding:34px 30px 10px; position:relative; row-gap:22px; z-index:2; }
.login-brief { grid-column:1 / 3; }
.brief-eyebrow { color:#63b9ea; font-size:11px; font-weight:800; letter-spacing:.2em; margin:0 0 10px; text-transform:uppercase; }
.login-brief h1 { color:#fff; font-size:clamp(30px,3.4vw,50px); font-weight:800; letter-spacing:-.01em; line-height:1.04; margin:0; text-transform:uppercase; }
.brief-sub { color:#e6f0f9; font-size:clamp(15px,1.5vw,21px); font-weight:700; margin:12px 0 0; }
.brief-sub i { color:#5fb0e2; font-style:normal; padding:0 4px; }
.brief-note { color:#a8c2d8; font-size:14px; margin:8px 0 0; }

/* ---- live production context card ---- */
.login-context { align-self:start; backdrop-filter:blur(8px); background:rgba(9,26,47,.62); border:1px solid rgba(150,200,240,.2); border-radius:11px; grid-column:1; padding:14px; }
.context-title { color:#cfe3f4; font-size:11px; font-weight:800; letter-spacing:.06em; margin:0; }
.context-title-sub { border-top:1px solid rgba(150,200,240,.16); margin-top:12px; padding-top:11px; }
.context-day { color:#7fa4c2; font-size:10px; font-weight:700; letter-spacing:.1em; margin:2px 0 11px; text-transform:uppercase; }
.context-line { align-items:center; background:rgba(255,255,255,.05); border-radius:8px; display:flex; gap:9px; margin-bottom:7px; padding:8px; }
.context-swatch { background:#2f8fdc; border-radius:5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); flex:0 0 auto; height:30px; width:30px; }
.swatch-crackers { background:linear-gradient(140deg,#4fa6e8,#1d6ec4); }
.swatch-cream { background:linear-gradient(140deg,#a583e2,#6f4ec2); }
.context-line div { display:grid; gap:1px; line-height:1.2; min-width:0; }
.context-line b { color:#fff; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.context-line span { color:#bcd3e6; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.context-line small { color:#7fa4c2; font-size:10px; font-variant-numeric:tabular-nums; }
.context-sequence { display:flex; gap:6px; }
.context-sequence .seq { border-radius:4px; box-shadow:0 3px 8px rgba(0,0,0,.3); flex:1; height:26px; }
.seq.production { background:linear-gradient(140deg,#4fa6e8,#1d6ec4); }
.seq.changeover { background:linear-gradient(140deg,#a583e2,#6f4ec2); }
.seq.setup { background:repeating-linear-gradient(135deg,#3b6c96 0 5px,#2b5378 5px 10px); }
.seq.amber { background:linear-gradient(140deg,#f0c064,#d99a2c); }

/* ---- plan preview (decorative mini Gantt) ---- */
.login-preview { align-self:start; backdrop-filter:blur(8px); background:rgba(6,20,38,.66); border:1px solid rgba(150,200,240,.2); border-radius:11px; grid-column:2; overflow:hidden; padding:12px 14px 14px; }
/* One gutter width shared by the axis, the bars and the now-line, so a percentage means the
   same horizontal position in all three. --gutter is the label column; --tail is breathing
   room at the right edge. */
.login-preview { --gutter:66px; --tail:10px; }
.preview-axis { color:#7fa4c2; font-size:10px; font-variant-numeric:tabular-nums; font-weight:700; height:16px; margin:0 var(--tail) 0 var(--gutter); position:relative; }
.preview-axis span { position:absolute; transform:translateX(-50%); }
.preview-now { background:#e8f2fb; border-radius:3px; box-shadow:0 0 0 3px rgba(6,20,38,.92); color:#0c2c4e; font-size:9px; font-weight:800; letter-spacing:.08em; padding:2px 5px; position:absolute; transform:translateX(-50%); z-index:2; }
.preview-track { margin-top:6px; position:relative; }
.preview-row { background:rgba(255,255,255,.045); border-radius:6px; height:30px; margin-bottom:6px; position:relative; }
.preview-label { color:#c3d8ea; font-size:9px; font-weight:800; left:9px; letter-spacing:.09em; position:absolute; text-transform:uppercase; top:50%; transform:translateY(-50%); }
.preview-dot { background:#4fa6e8; border-radius:50%; height:5px; left:53px; position:absolute; top:50%; transform:translateY(-50%); width:5px; }
.preview-dot.offline { background:#6b7f93; }
.preview-bars { bottom:0; display:block; left:var(--gutter); position:absolute; right:var(--tail); top:0; }
.pb { border-radius:4px; box-shadow:0 4px 10px rgba(0,0,0,.3); height:18px; position:absolute; top:6px; }
.pb.production { background:linear-gradient(140deg,#3f97de,#1a63b8); }
.pb.changeover { background:linear-gradient(140deg,#a583e2,#6f4ec2); }
.pb.amber { background:linear-gradient(140deg,#f0c064,#d99a2c); }
.pb.hatch { background:repeating-linear-gradient(135deg,rgba(120,165,205,.5) 0 5px,rgba(60,100,140,.5) 5px 10px); }
/* Shares the bars' inset box, so the marker's percentage is a time position rather than a
   fraction of the row including the label gutter. */
.preview-overlay { bottom:6px; display:block; left:var(--gutter); pointer-events:none; position:absolute; right:var(--tail); top:-2px; }
.preview-nowline { background:linear-gradient(180deg,#ff6b6b,rgba(255,107,107,.25)); bottom:0; position:absolute; top:0; width:2px; }

/* ---- sign-in card ---- */
.login-panel { align-self:start; backdrop-filter:blur(14px); background:rgba(10,28,50,.72); border:1px solid rgba(160,205,245,.24); border-radius:14px; box-shadow:0 30px 80px rgba(2,10,22,.55); color:#eaf2fa; grid-column:3; grid-row:1 / span 2; }
.login-panel-inner { padding:26px 26px 24px; }
.login-panel .official-logo { display:none; }
.panel-welcome { color:#8fb8d8; font-size:13px; margin:0; }
.login-panel h2 { color:#fff; font-size:24px; font-weight:800; letter-spacing:-.01em; margin:2px 0 20px; }
.login-panel form { display:grid; gap:14px; }
.login-panel label { color:#c2d7e8; display:grid; font-size:12px; font-weight:700; gap:6px; }
.login-panel input { background:rgba(3,14,28,.6); border:1px solid rgba(150,200,240,.28); border-radius:7px; color:#f2f8fd; font:inherit; min-height:42px; padding:9px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
.login-panel input::placeholder { color:#6f90ad; }
.login-panel input:focus { border-color:#4fa6e8; box-shadow:0 0 0 3px rgba(79,166,232,.25); outline:0; }
.password-wrap { display:flex; position:relative; }
.password-wrap input { padding-right:70px; width:100%; }
.password-wrap button { background:transparent; border:0; color:#6fc0f2; cursor:pointer; font-weight:700; position:absolute; right:8px; top:9px; }
.password-wrap button:hover, .password-wrap button:focus-visible { color:#a9dcff; }
.login-panel .checkbox { align-items:center; color:#a9c5da; display:flex; font-size:12px; font-weight:600; gap:8px; }
.login-panel .checkbox input { accent-color:#2f8fdc; min-height:0; width:auto; }
.login-submit { background:linear-gradient(100deg,#2f8fdc,#1b62b6); border:0; border-radius:8px; color:#fff; font-size:12px; font-weight:800; justify-content:center; letter-spacing:.12em; min-height:46px; overflow:hidden; position:relative; text-transform:uppercase; }
.login-submit span { align-items:center; display:inline-flex; gap:9px; position:relative; z-index:1; }
.login-submit i { font-style:normal; }
.login-submit::after { background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 40%,transparent 60%); content:''; inset:0; position:absolute; transform:translateX(-120%); transition:transform .8s ease; }
.login-submit:hover::after, .login-submit:focus-visible::after { transform:translateX(120%); }
.login-error { color:#ff9a92; font-size:12px; margin:0; min-height:16px; }
.login-help { display:flex; justify-content:center; }
.text-button { background:transparent; border:0; color:#6fc0f2; cursor:pointer; font:inherit; font-size:12px; font-weight:700; padding:2px 4px; }
.text-button:hover, .text-button:focus-visible { color:#a9dcff; text-decoration:underline; }
.demo-access { border-top:1px solid rgba(150,200,240,.18); color:#a9c5da; font-size:11px; line-height:1.5; margin-top:18px; padding-top:14px; }
.demo-access summary { color:#6fc0f2; cursor:pointer; font-weight:800; }
.demo-access b { color:#eaf2fa; }
.demo-note { color:#7fa4c2; margin:8px 0 0; }

.login-foot { color:#5f7e99; font-size:11px; letter-spacing:.05em; margin:0; padding:0 30px 18px; position:relative; text-align:center; z-index:2; }

@media (max-width:1180px) {
  .login-body { grid-template-columns:minmax(220px,.9fr) minmax(320px,1fr); }
  .login-brief { grid-column:1 / -1; }
  .login-panel { grid-column:1 / -1; grid-row:auto; justify-self:center; max-width:420px; width:100%; }
  .login-preview { grid-column:2; }
}
@media (max-width:820px) {
  .login-body { grid-template-columns:minmax(0,1fr); padding:24px 18px 8px; }
  .login-context, .login-preview { grid-column:1; }
  .login-preview { display:none; }
}
@media (max-width:680px) { .user-control { grid-template-columns:32px auto; } .logout-button { grid-column:2; justify-self:start; margin:0; padding-left:0; } .brand-copy span { display:none; } .login-panel-inner { padding:22px 18px; } .login-context { display:none; } }
@media (prefers-reduced-motion:reduce) { .login-submit::after { transition:none; } .chrome-status .live-dot { animation:none; } }

/* Draft-to-active schedule review workflow. */
.schedule-head { align-items:center; display:flex; gap:12px; }
.review-status { margin:0 0 18px; }
.review-banner { align-items:center; border:1px solid #cad7e4; display:flex; gap:15px; padding:16px 18px; }
.review-banner > span { background:#edf2f7; color:#294560; font-size:12px; font-weight:800; letter-spacing:.05em; padding:7px 9px; text-transform:uppercase; }
.review-banner b { color:#162b43; display:block; font-size:14px; margin-bottom:3px; }
.review-banner p { color:#526277; font-size:13px; margin:0; }
.review-banner.draft { background:#fff9e8; border-left:4px solid #da8c06; }
.review-banner.draft > span { background:#ffe5a7; color:#734500; }
.review-banner.active { background:#eff9f2; border-left:4px solid #21854b; }
.review-banner.active > span { background:#cdebd5; color:#145d32; }
.review-banner.neutral { background:#f7f9fb; border-left:4px solid #7a8a9b; }
.review-state { background:#edf3fa; color:#245080; font-size:12px; font-weight:800; padding:6px 9px; text-transform:uppercase; }
.review-metrics { display:grid; gap:0; grid-template-columns:repeat(4,1fr); }
.review-metrics > div { border-right:1px solid #dce5ee; display:grid; gap:6px; padding:12px 15px; }
.review-metrics > div:last-child { border-right:0; }
.review-metrics span { color:#647489; font-size:12px; }
.review-metrics b { color:#173551; font-size:18px; text-transform:capitalize; }
.review-guidance { color:#40536a; display:grid; gap:12px; line-height:1.45; }
.review-guidance p { margin:0; }
@media (max-width:900px) { .review-metrics { grid-template-columns:repeat(2,1fr); } .review-metrics > div:nth-child(2) { border-right:0; } }
@media (max-width:560px) { .schedule-head { align-items:flex-start; flex-direction:column; } .review-metrics { grid-template-columns:1fr; } .review-metrics > div { border-bottom:1px solid #dce5ee; border-right:0; } }

/* Touch-friendly shop-floor execution screen. */
.operator-hero { align-items:center; background:#0d2744; color:#fff; display:flex; justify-content:space-between; margin-bottom:18px; padding:24px; }
.operator-hero .section-kicker { color:#95c6ef; margin:0 0 6px; }
.operator-hero h2 { font-size:28px; margin:0 0 5px; }
.operator-hero p:not(.section-kicker) { color:#d8e7f4; margin:0; }
.operator-live { background:#123c2d; border:1px solid #4bb979; color:#c8f4d8; font-size:12px; font-weight:800; letter-spacing:.06em; padding:8px 10px; }
.operator-current { margin-bottom:18px; }
.operator-run { border:1px solid #d6e1ec; display:grid; gap:15px; padding:17px; }
.operator-run.primary-run { border:2px solid #1f68b2; box-shadow:0 8px 24px rgba(20,76,130,.12); padding:22px; }
.operator-run-top { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; }
.operator-run h3 { color:#132c48; font-size:21px; margin:5px 0; }
.operator-run p { color:#56667b; font-size:13px; margin:0; }
.run-kicker { color:#1d5e9d; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.run-status { background:#e9eff5; color:#40556e; font-size:12px; font-weight:800; padding:7px 9px; text-transform:uppercase; }
.run-status.in_progress { background:#cdeed9; color:#126a38; }.run-status.paused { background:#ffebbd; color:#835600; }.run-status.ready { background:#dcecff; color:#135a9e; }.run-status.completed { background:#e4e9ed; color:#52606c; }
.run-quantity { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.run-quantity div { border-left:3px solid #d8e5f1; display:grid; gap:3px; padding-left:10px; }.run-quantity span { color:#68798b; font-size:12px; }.run-quantity b { color:#1b3552; font-size:18px; }
.operator-progress { background:#dfe8f0; height:9px; overflow:hidden; }.operator-progress i { background:#1c8a4b; display:block; height:100%; }
.actual-input { align-items:center; color:#475b71; display:flex; font-size:13px; font-weight:700; gap:10px; }.actual-input input { border:1px solid #afc0d1; max-width:150px; padding:7px; }
.operator-actions { display:flex; flex-wrap:wrap; gap:9px; }.operator-action { border:1px solid #adbfce; cursor:pointer; font:inherit; font-size:13px; font-weight:800; min-height:40px; padding:8px 12px; }.operator-action.start,.operator-action.complete { background:#167143; border-color:#167143; color:#fff; }.operator-action.pause { background:#fff5dd; border-color:#e1ae41; color:#714d00; }.operator-action.report { background:#fff; color:#275279; }.operator-action:hover,.operator-action:focus-visible { box-shadow:0 0 0 3px rgba(25,104,178,.18); outline:0; }
.operator-queue { display:grid; gap:11px; }.operator-queue .operator-run { padding:14px; }.operator-queue .operator-run h3 { font-size:17px; }.operator-empty { background:#f5f8fb; border:1px dashed #b8c8d8; color:#506176; padding:30px; text-align:center; }.operator-empty b { color:#173653; display:block; margin-bottom:5px; }
@media (max-width:700px) { .operator-hero { align-items:flex-start; flex-direction:column; } .run-quantity { grid-template-columns:1fr; } .operator-run-top { flex-direction:column; } .operator-actions { display:grid; grid-template-columns:1fr 1fr; } }

.report-links { display:flex; flex-wrap:wrap; gap:10px; }.report-link { align-items:center; display:inline-flex; text-decoration:none; }

/* Planner bulk-approval workspace. */
.approval-summary { background:#f7fafc; border:1px solid #d6e1eb; display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:18px; }
.approval-summary > div,.bulk-confirmation > div { border-right:1px solid #d9e3ec; display:grid; gap:4px; padding:12px; }.approval-summary > div:last-child { border-right:0; }
.approval-summary span,.bulk-confirmation span { color:#64758a; font-size:11px; }.approval-summary b,.bulk-confirmation b { color:#193652; font-size:16px; }
.approval-tools { align-items:center; display:flex; gap:12px; }.approval-tools label { color:#3e566e; font-size:12px; font-weight:700; white-space:nowrap; }
.approval-table th { font-size:11px; white-space:nowrap; }.approval-table td { font-size:12px; vertical-align:top; }.approval-table .recommendation-cell { max-width:250px; min-width:170px; }.approval-table input { accent-color:#1567bd; height:17px; width:17px; }
.risk-tag { border-radius:2px; display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; padding:4px 6px; text-transform:uppercase; }.risk-tag.low { background:#dff3e5; color:#12663a; }.risk-tag.medium { background:#fff0c8; color:#855400; }.risk-tag.high { background:#ffd8d4; color:#a92018; }.locked-action { color:#8a5900; font-size:12px; font-weight:700; }.approval-history { display:grid; gap:0; }.approval-history-row { align-items:center; border-bottom:1px solid #e1e9f0; display:flex; gap:15px; justify-content:space-between; padding:12px 0; }.approval-history-row:last-child { border-bottom:0; }.approval-history-row b { color:#183654; }.approval-history-row p { color:#617186; font-size:12px; margin:4px 0 0; }
.bulk-confirmation { border:1px solid #dbe5ee; display:grid; grid-template-columns:repeat(3,1fr); margin:12px 0; }
@media (max-width:1100px) { .approval-summary { grid-template-columns:repeat(4,1fr); } }.approval-summary > div:nth-child(4) { border-right:0; }
@media (max-width:620px) { .approval-summary,.bulk-confirmation { grid-template-columns:repeat(2,1fr); }.approval-tools { align-items:flex-start; flex-direction:column; }.approval-history-row { align-items:flex-start; flex-direction:column; } }

/* Date-specific operational intelligence. */
.intelligence-controls { align-items:center; display:flex; gap:24px; justify-content:space-between; margin-bottom:18px; }.intelligence-controls h3 { color:#163450; margin:3px 0 6px; }.intelligence-controls p { max-width:560px; }.intelligence-form { align-items:end; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }.intelligence-form label { color:#53657a; display:grid; font-size:12px; font-weight:700; gap:4px; }.intelligence-form input { border:1px solid #b8c8d7; font:inherit; min-height:36px; padding:5px 7px; }.preset-row { display:flex; gap:5px; }.preset-row .secondary { min-height:36px; padding:7px 9px; }
.generated-insights { display:grid; gap:10px; }.generated-insight { border:1px solid #d8e2eb; border-left:4px solid #7a8998; display:grid; grid-template-columns:88px 1fr; }.generated-insight.critical { border-left-color:#bf211b; }.generated-insight.high { border-left-color:#d36918; }.generated-insight.medium { border-left-color:#b88300; }.generated-insight.info { border-left-color:#1c67b7; }.insight-severity { align-items:flex-start; background:#f5f8fb; color:#53677c; display:flex; font-size:11px; font-weight:900; justify-content:center; letter-spacing:.07em; padding:15px 8px; text-transform:uppercase; }.generated-insight.critical .insight-severity { background:#fff0ef; color:#a82018; }.generated-insight.high .insight-severity { background:#fff5ea; color:#9a4c00; }.generated-insight.medium .insight-severity { background:#fff9e7; color:#815500; }.generated-insight-body { padding:13px 15px; }.generated-insight-title { align-items:flex-start; display:flex; gap:12px; justify-content:space-between; }.generated-insight-title span { color:#52708e; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.generated-insight h4 { color:#173754; font-size:16px; margin:4px 0; }.generated-insight-body > p { color:#465b71; font-size:13px; line-height:1.42; margin:8px 0; }.generated-insight-title small { color:#66788b; font-size:11px; text-align:right; }.insight-recommendation { background:#f1f6fa; border-left:2px solid #3970a5; margin:10px 0; padding:9px 11px; }.insight-recommendation b,.insight-impact b { color:#21466c; font-size:12px; }.insight-recommendation p { color:#304f6b; font-size:13px; margin:3px 0 0; }.insight-impact { color:#566a7e; font-size:12px; }.generated-insight details { color:#40576e; font-size:12px; margin:10px 0; }.generated-insight summary { color:#1d5d9b; cursor:pointer; font-weight:800; }.generated-insight details p { line-height:1.45; margin:6px 0 0; }
@media (max-width:900px) { .intelligence-controls { align-items:stretch; flex-direction:column; }.intelligence-form { justify-content:flex-start; }.generated-insight { grid-template-columns:1fr; }.insight-severity { justify-content:flex-start; padding:7px 12px; } }
@media (max-width:560px) { .intelligence-form { align-items:stretch; flex-direction:column; }.intelligence-form label,.intelligence-form input { width:100%; }.generated-insight-title { flex-direction:column; gap:2px; }.generated-insight-title small { text-align:left; } }

/* Concise decision brief on the command centre. */
.operational-brief { margin-bottom:18px; }.brief-list { border-top:1px solid #e0e8ef; display:grid; }.brief-item { align-items:center; border-bottom:1px solid #e0e8ef; border-left:3px solid #6e7f90; display:grid; gap:12px; grid-template-columns:70px minmax(0,1fr) 155px auto; padding:11px 12px; }.brief-item:last-child { border-bottom:0; }.brief-item.critical { border-left-color:#bd211a; }.brief-item.high { border-left-color:#d56b14; }.brief-item.medium { border-left-color:#bd8c00; }.brief-item.info { border-left-color:#1f69b8; }.brief-severity { color:#52667c; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }.brief-item.critical .brief-severity { color:#b12219; }.brief-item.high .brief-severity { color:#a8530c; }.brief-item.medium .brief-severity { color:#8c6200; }.brief-item b { color:#173550; font-size:13px; }.brief-item p { color:#5c6e80; font-size:12px; line-height:1.4; margin:3px 0 0; }.brief-category { color:#5f7690; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.brief-item .text-button { white-space:nowrap; }.brief-empty { background:#f7fafc; color:#5c6f82; display:grid; gap:4px; padding:16px; }.brief-empty b { color:#26445f; }
@media (max-width:760px) { .brief-item { align-items:start; grid-template-columns:62px minmax(0,1fr); }.brief-category { grid-column:2; }.brief-item .text-button { grid-column:2; justify-self:start; } }

/* Date-focused scheduling workspace: deliberately prioritises readable time and line context. */
.compact-hero { margin-bottom:17px; }.compact-hero h2 { margin-bottom:3px; }.scheduler-metrics { display:grid; gap:12px; grid-template-columns:repeat(6,minmax(135px,1fr)); margin-bottom:16px; }.scheduler-metrics .metric { margin:0; min-width:0; padding:13px; }.scheduler-metrics .metric strong { font-size:23px; }.scheduler-panel { padding-bottom:15px; }.scheduler-toolbar { align-items:center; background:#f7fafc; border:1px solid #dce6ef; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin:-1px 0 15px; padding:10px; }.date-controls,.view-controls,.zoom-controls,.segmented { align-items:center; display:flex; gap:6px; }.date-controls b { color:#183653; font-size:13px; margin:0 5px; min-width:115px; text-align:center; }.scheduler-toolbar .secondary { min-height:33px; padding:6px 9px; }.segmented { background:#e8eff6; border-radius:7px; gap:0; overflow:hidden; }.segmented button { background:transparent; border:0; color:#536a82; cursor:pointer; font:inherit; font-size:12px; font-weight:800; padding:8px 10px; }.segmented button.active { background:#165fae; color:#fff; }.zoom-controls > span { color:#52667d; font-size:12px; font-weight:800; min-width:37px; text-align:center; }.scheduler-gantt { max-width:100%; overflow:auto; }.planner-gantt { --scheduler-zoom:1; min-width:calc(1020px * var(--scheduler-zoom)); }.planner-axis,.planner-gantt-row { display:grid; grid-template-columns:245px minmax(740px,1fr); }.planner-axis { border-bottom:1px solid #d9e3ec; position:sticky; top:0; z-index:1; }.planner-axis-label { background:#f6f9fc; border-right:1px solid #d9e3ec; color:#27455f; font-size:12px; font-weight:850; padding:10px 12px; position:sticky; left:0; z-index:3; }.planner-axis-label span { color:#738297; font-size:10px; font-weight:600; }.planner-axis-time { background:repeating-linear-gradient(to right,transparent 0,transparent calc(14.285% - 1px),#e5ecf2 calc(14.285% - 1px),#e5ecf2 14.285%); min-height:49px; position:relative; }.planner-axis-time i { border-left:1px solid #d9e4ed; color:#5d7288; font-size:10px; font-style:normal; padding:8px 0 0 5px; position:absolute; top:0; white-space:nowrap; }.planner-gantt-row { min-height:77px; }.planner-line-label { align-items:center; background:#fff; border-bottom:1px solid #e5ebf1; border-right:1px solid #d9e3ec; display:flex; gap:12px; justify-content:space-between; padding:9px 12px; position:sticky; left:0; z-index:2; }.planner-line-label > div:first-child { display:grid; gap:3px; }.planner-line-label > div:first-child b { color:#173653; font-size:12px; }.planner-line-label > div:first-child span { color:#6d7d90; font-size:10px; text-transform:capitalize; }.line-utilisation { display:grid; grid-template-columns:auto auto; gap:2px 5px; justify-items:end; }.line-utilisation b { color:#1a4e81; font-size:12px; }.line-utilisation small { color:#718195; font-size:10px; white-space:nowrap; }.line-utilisation i { background:#e0e9f0; grid-column:1 / 3; height:5px; overflow:hidden; width:92px; }.line-utilisation em { background:#1b79ca; display:block; height:100%; }.planner-track { background:repeating-linear-gradient(to right,#fbfdff 0,#fbfdff calc(14.285% - 1px),#e8eef3 calc(14.285% - 1px),#e8eef3 14.285%); border-bottom:1px solid #e5ebf1; min-height:77px; position:relative; }.idle-track { color:#8a9aac; font-size:11px; left:12px; position:absolute; top:31px; }.planner-block { border:1px solid rgba(0,0,0,.12); border-radius:4px; bottom:11px; box-shadow:0 3px 8px rgba(18,49,80,.16); color:#fff; cursor:pointer; display:block; font:inherit; min-width:34px; overflow:hidden; padding:6px 7px; position:absolute; text-align:left; top:10px; }.planner-block:hover,.planner-block:focus-visible { box-shadow:0 0 0 3px rgba(22,102,183,.23),0 5px 10px rgba(18,49,80,.22); outline:0; z-index:1; }.planner-block b,.planner-block span,.planner-block small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.planner-block b { font-size:11px; letter-spacing:.01em; }.planner-block span { font-size:10px; margin-top:2px; }.planner-block small { font-size:9px; margin-top:2px; opacity:.93; }.planner-block.changeover { background:#7554c8!important; }.planner-block.risk-medium { box-shadow:inset 0 -3px 0 #ffe47b,0 3px 8px rgba(18,49,80,.16); }.planner-block.risk-high { box-shadow:inset 0 -3px 0 #ffb0aa,0 3px 8px rgba(18,49,80,.16); }
.planner-now-line { position:absolute; top:0; bottom:0; width:2px; background:#e0433d; z-index:2; pointer-events:none; box-shadow:0 0 0 1px rgba(224,67,61,.18); }
.planner-now-line.has-label::after { content:'Now'; position:absolute; top:1px; left:50%; transform:translateX(-50%); background:#e0433d; color:#fff; font-size:8px; font-weight:800; letter-spacing:.05em; padding:1px 5px; border-radius:3px; white-space:nowrap; z-index:2; }
.dashboard-gantt.scheduler-gantt { max-width:100%; }

/* --- Dashboard: live Gantt, full screen ------------------------------------ */
/* Flex column that fills the workspace: header/toolbar/legend take their natural height,
   the chart itself (flex:1) absorbs everything left over -- so it fills the screen exactly,
   no matter how tall the surrounding chrome ends up being. */
.view.active.gantt-only { display:flex; flex-direction:column; height:calc(100vh - 140px); }
.gantt-page-head { align-items:flex-start; display:flex; flex:none; flex-wrap:wrap; gap:16px; justify-content:space-between; margin-bottom:12px; }
.gantt-page-head h2 { margin:0 0 4px; }
.gantt-page-head p { color:var(--muted); font-size:12.5px; margin:0; }
.gantt-page-actions { align-items:center; display:flex; flex-wrap:wrap; gap:10px; }
.alert-chip { background:#fff1dc; border-radius:99px; color:#9a4c00; font-size:11px; font-weight:800; padding:7px 13px; white-space:nowrap; }
.gantt-only .dashboard-toolbar { flex:none; }
.fullscreen-gantt { flex:1 1 auto; min-height:280px; overflow:auto; }
.gantt-only .dashboard-legend { flex:none; margin-top:10px; }
/* Rows stretch to use whatever height the chart has -- with only a handful of lines,
   the default row height left a dead gap of white space below the last one. */
.fullscreen-gantt .live-gantt { display:flex; flex-direction:column; min-height:100%; }
.fullscreen-gantt .live-gantt-head { flex:none; }
.fullscreen-gantt .live-gantt-row { flex:1 1 0; min-height:64px; }
.planner-block.dragging { cursor:grabbing; box-shadow:0 10px 24px rgba(0,0,0,.32); opacity:.9; z-index:5; }
.live-track.drop-target { background-color:#eaf4ff; outline:2px dashed #1b79ca; outline-offset:-2px; }
.block-edit { margin-top:10px; }
.block-edit summary { color:#1260c9; cursor:pointer; font-size:12px; font-weight:750; }
.block-edit form { margin-top:9px; }
.reschedule-preview p { color:#33465c; font-size:12.5px; margin:8px 0 0; }
.reschedule-compare { background:#f6f9fc; border:1px solid #dde6ee; border-radius:8px; display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:10px; padding:11px 13px; }
.reschedule-compare span { color:var(--muted); display:block; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.reschedule-compare b { display:block; font-size:13px; margin-top:3px; }
.reschedule-compare small { color:var(--muted); display:block; font-size:11px; margin-top:2px; }
.reschedule-warn { color:#a8201a; font-weight:700; }
/* Per-block job-status badge (top-right) and claimed-by initials (bottom-right) on the live Gantt bar. */
.block-status-badge { background:rgba(0,0,0,.3); border-radius:3px; color:#fff; font-size:8px; font-style:normal; font-weight:800; letter-spacing:.03em; padding:1px 4px; position:absolute; right:4px; text-transform:uppercase; top:4px; white-space:nowrap; }
.planner-block.status-delayed .block-status-badge { background:#d63d46; }
.planner-block.status-due .block-status-badge { background:#c9880a; }
.planner-block.status-in-progress .block-status-badge { background:#1b79ca; }
.planner-block.status-completed .block-status-badge { background:#1a8a5f; }
.planner-block.status-taken-over .block-status-badge { background:#5b3fae; }
.block-claim-badge { background:#fff; border-radius:99px; bottom:4px; color:#173855; font-size:8px; font-style:normal; font-weight:800; height:14px; line-height:14px; position:absolute; right:4px; text-align:center; width:14px; }
.block-lock-badge { bottom:4px; font-size:10px; left:4px; position:absolute; }
.planner-block.is-locked { box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 3px 8px rgba(18,49,80,.16); cursor:not-allowed; }
/* A block whose window has fully passed is archived: not clickable/draggable at all (the
   blue "elapsed" wash that marks this region of time lives on the track itself, see
   .live-elapsed-region below -- individual blocks keep their own colour). Backed by the JS
   guards in openDashboardBlock()/blockActionsPanel() (no drawer, no claim/take-over) and the
   server-side check in claim_block()/_resolve_reschedule(). */
.planner-block.is-past-frozen { cursor:default; pointer-events:none; }
/* The elapsed-time region itself: a blue wash from the left edge of the visible window up to
   the red now-line, on every line's track and the axis header, so "everything behind the red
   line" reads as one continuous band down the whole chart rather than block-by-block. Sits
   behind the blocks (inserted first in the track's markup) so each order's own colour still
   shows through undisturbed; only empty/idle track shows the wash directly. */
.live-elapsed-region { background:rgba(64,169,255,.16); border-right:1px solid rgba(64,169,255,.4); bottom:0; left:0; position:absolute; top:0; }
/* Planned vs Actual: a block with no recorded actual data yet, viewed in "Actual" mode, is
   shown dimmed (still at its planned slot) rather than omitted -- there's simply nothing else
   to plot for it. The variance badge (Comparison mode) sits at top-left so it never collides
   with the status badge, which already owns top-right. */
.planner-block.no-actual-data { opacity:.45; }
.block-variance-badge { left:4px; right:auto; }
#changeoverRuleDialog .dialog-actions #removeChangeoverRule { margin-right:auto; }
.compact-gantt { min-width:640px; }
.compact-gantt .planner-axis,.compact-gantt .planner-gantt-row { grid-template-columns:150px minmax(470px,1fr); }
.compact-gantt .planner-gantt-row { min-height:52px; }
.compact-gantt .planner-track { min-height:52px; }
.compact-gantt .planner-block { top:7px; bottom:7px; padding:4px 6px; }
.compact-gantt .planner-block small { display:none; }
.compact-gantt .planner-line-label { padding:7px 10px; }
.compact-gantt .planner-line-label > div:first-child b { font-size:11px; }
.dashboard-legend { padding:11px 0 0; display:flex; flex-wrap:wrap; gap:14px; }.scheduler-legend { padding:13px 0 0; }.legend.idle { background:#d9e3ec; }.legend.risk { background:#fff; border:2px solid #e1623f; border-radius:99px; }.legend.now { background:#e0433d; border-radius:99px; }.scheduling-rules { cursor:default; padding:0; }.scheduling-rules summary { color:#1c5d9c; cursor:pointer; font-size:13px; font-weight:850; padding:16px 18px; }.rules-grid { border-top:1px solid #e3eaf1; display:grid; gap:0; grid-template-columns:repeat(2,1fr); }.rules-grid p { border-bottom:1px solid #edf2f6; color:#5d6e81; font-size:12px; line-height:1.45; margin:0; padding:12px 17px; }.rules-grid p:nth-child(odd) { border-right:1px solid #edf2f6; }.rules-grid b { color:#24425f; }.schedule-detail-drawer { background:#fff; border-left:4px solid #1b70bd; bottom:0; box-shadow:-12px 0 35px rgba(11,39,67,.18); overflow:auto; padding:21px; position:fixed; right:0; top:0; width:min(410px,calc(100vw - 32px)); z-index:20; }.drawer-title { align-items:flex-start; border-bottom:1px solid #e0e8ef; display:flex; justify-content:space-between; margin-bottom:11px; padding-bottom:13px; }.drawer-title h3 { color:#173855; font-size:22px; margin:0; }.drawer-type { color:#2363a3; font-size:11px; font-weight:850; letter-spacing:.08em; margin:0 0 13px; text-transform:uppercase; }.drawer-details { display:grid; gap:0; grid-template-columns:1fr 1fr; margin:0; }.drawer-details div { border-bottom:1px solid #e5edf3; padding:10px 5px; }.drawer-details dt { color:#718195; font-size:10px; font-weight:750; }.drawer-details dd { color:#203e59; font-size:12px; font-weight:750; margin:4px 0 0; }.drawer-reason { background:#f3f7fb; border-left:3px solid #3778af; margin:15px 0; padding:10px 12px; }.drawer-reason.medium { border-left-color:#c99010; background:#fff9e8; }.drawer-reason.high { border-left-color:#cf472f; background:#fff2ee; }.drawer-reason b { color:#254967; font-size:12px; }.drawer-reason p,.drawer-description { color:#51677c; font-size:12px; line-height:1.5; margin:4px 0 0; }.drawer-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
@media (max-width:1250px) { .scheduler-metrics { grid-template-columns:repeat(3,1fr); }.planner-axis,.planner-gantt-row { grid-template-columns:220px minmax(720px,1fr); } }
@media (max-width:760px) { .scheduler-metrics { grid-template-columns:repeat(2,1fr); }.scheduler-toolbar,.view-controls { align-items:stretch; flex-direction:column; width:100%; }.date-controls { flex-wrap:wrap; }.date-controls b { flex:1; }.zoom-controls { flex-wrap:wrap; }.planner-axis,.planner-gantt-row { grid-template-columns:174px minmax(670px,1fr); }.planner-line-label { padding:8px; }.line-utilisation i { width:66px; }.rules-grid { grid-template-columns:1fr; }.rules-grid p:nth-child(odd) { border-right:0; } }

/* Production order intake is a dense decision table, with details moved into the schedule drawer. */
.order-title { align-items:flex-start; }.order-filters { align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width:760px; }.order-filters input { min-width:190px; }.order-filters select { font-size:11px; padding:8px; }.order-bulk-bar { align-items:center; background:#f6f9fc; border:1px solid #dfe8f0; display:flex; flex-wrap:wrap; gap:11px; justify-content:space-between; margin:0 0 13px; padding:10px 12px; }.order-bulk-bar > label,.order-bulk-bar > span { color:#4d6379; font-size:12px; font-weight:750; }.order-bulk-bar > div { display:flex; gap:8px; }.order-bulk-bar .secondary,.order-bulk-bar .primary { min-height:34px; padding:7px 10px; }.orders-table { min-width:1210px; }.orders-table th { background:#f7fafc; position:sticky; top:0; z-index:1; }.orders-table tbody tr:hover { background:#f5f9fd; }.orders-table td { vertical-align:middle; }.orders-table .order-select { accent-color:#1466bc; height:17px; width:17px; }.orders-table td:nth-child(7) { color:#405c77; max-width:175px; }.orders-table td:nth-child(8),.orders-table td:nth-child(9) { color:#516b82; white-space:nowrap; }.sticky-table { max-height:min(70vh,720px); }
@media (max-width:900px) { .order-filters { justify-content:flex-start; max-width:none; }.order-bulk-bar { align-items:flex-start; flex-direction:column; }.order-bulk-bar > div { flex-wrap:wrap; } }

/* Overview / dashboard visual refresh — animated hero banner, metric + panel icon accents, gentle entrance motion. */
@keyframes dashFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes dashGlowDrift { from { transform:translate(-2%,-2%) scale(1); } to { transform:translate(3%,4%) scale(1.1); } }
.live-dot { animation:livePulse 2.2s ease-out infinite; }
.dashboard-hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#071f3e 0%,#0c315d 55%,#0b69cf 145%); border:1px solid #0c315d; border-radius:16px; padding:26px 28px; color:#fff; box-shadow:0 18px 40px rgba(8,32,62,.28); }
.dashboard-hero::before { content:''; position:absolute; top:-45%; right:-8%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(65,182,230,.35),transparent 70%); animation:dashGlowDrift 9s ease-in-out infinite alternate; pointer-events:none; }
.dashboard-hero::after { content:''; position:absolute; left:-8%; bottom:-70%; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(115,82,189,.3),transparent 70%); animation:dashGlowDrift 12s ease-in-out infinite alternate-reverse; pointer-events:none; }
.dashboard-hero .section-kicker { color:#a9d4ff; position:relative; z-index:1; }
.dashboard-hero h2 { color:#fff; position:relative; z-index:1; }
.dashboard-hero p { color:#c9dcf2; position:relative; z-index:1; }
.dashboard-hero .hero-status { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px); position:relative; z-index:1; }
.dashboard-hero .hero-status b { color:#fff; }
.dashboard-hero .hero-status small { color:#bcd3ec; }
.dashboard-hero .action-row { position:relative; z-index:1; }
.dashboard-hero .secondary { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); color:#fff; }
.dashboard-hero .secondary:hover { background:rgba(255,255,255,.22); }
.dashboard-hero .primary { box-shadow:0 10px 22px rgba(4,16,32,.4); }
#view-dashboard .metric { position:relative; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; animation:dashFadeUp .5s ease both; }
#view-dashboard .metric:hover { transform:translateY(-3px); box-shadow:0 16px 30px rgba(20,55,90,.15); }
#view-dashboard .metric-grid .metric:nth-child(1) { animation-delay:.03s; }
#view-dashboard .metric-grid .metric:nth-child(2) { animation-delay:.09s; }
#view-dashboard .metric-grid .metric:nth-child(3) { animation-delay:.15s; }
#view-dashboard .metric-grid .metric:nth-child(4) { animation-delay:.21s; }
.metric-icon { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; margin-bottom:10px; font-size:14px; font-weight:800; background:#eaf4ff; color:#1466bc; }
.metric.green .metric-icon { background:#e5f7ed; color:#168447; }
.metric.red .metric-icon { background:#ffe7e9; color:#ca2633; }
.metric.violet .metric-icon { background:#f1ecff; color:#6c43b6; }
.panel-icon { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; margin-right:8px; font-size:13px; font-weight:800; vertical-align:middle; background:#eaf4ff; color:#1466bc; }
.panel-icon.amber { background:#fff1dc; color:#b46800; }
.panel-icon.violet { background:#f1ecff; color:#6c43b6; }
.panel-icon.green { background:#e5f7ed; color:#168447; }
#view-dashboard .panel { animation:dashFadeUp .5s ease both; }
#view-dashboard .operational-brief { animation-delay:.08s; }
#view-dashboard .main-grid .panel:nth-child(1) { animation-delay:.13s; }
#view-dashboard .main-grid .panel:nth-child(2) { animation-delay:.19s; }
#view-dashboard .panel:hover { box-shadow:0 14px 30px rgba(20,55,90,.1); }
#view-dashboard .list-item:hover,#view-dashboard .activity:hover { background:#f7fbff; }
#view-dashboard .brief-item:hover { background:#f8fbfd; }
@media (prefers-reduced-motion:reduce) { .dashboard-hero::before,.dashboard-hero::after,.live-dot,#view-dashboard .metric,#view-dashboard .panel { animation:none; } }

/* ===========================================================================
   Command centre: answer "what is happening / what needs me / what is at risk"
   inside the first viewport, then descend into planning, orders and assets.
   =========================================================================== */

/* --- header --------------------------------------------------------------- */
.command-header { align-items:flex-end; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; margin:22px 0 18px; padding-bottom:16px; }
.command-identity h2 { font-size:23px; letter-spacing:-.6px; margin:0 0 5px; }
.command-context { color:var(--muted); font-size:12px; font-weight:700; margin:0; }
.command-actions { align-items:center; display:flex; flex-wrap:wrap; gap:9px; }
.live-chip { align-items:center; background:#f5fbf7; border:1px solid #cfe6d8; border-radius:8px; display:flex; gap:8px; padding:8px 11px; }
.live-chip b { display:block; font-size:11px; }
.live-chip small { color:#718493; display:block; font-size:10px; margin-top:1px; }
.live-chip.offline { background:#fff7ed; border-color:#f0d3a8; }
.live-chip.offline .live-dot { background:#d88116; box-shadow:0 0 0 4px rgba(216,129,22,.14); }

/* --- KPI row -------------------------------------------------------------- */
.kpi-grid { display:grid; gap:14px; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:6px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:11px; box-shadow:var(--shadow); cursor:pointer; display:block; font:inherit; padding:15px; text-align:left; transition:.16s ease; }
.kpi:hover { border-color:#9fc3f7; box-shadow:0 12px 26px rgba(20,55,90,.13); transform:translateY(-1px); }
.kpi:focus-visible { outline:2px solid #1b79ca; outline-offset:2px; }
.kpi-icon { align-items:center; background:#eaf4ff; border-radius:8px; color:#1466bc; display:inline-flex; font-size:13px; font-weight:800; height:27px; justify-content:center; margin-bottom:9px; width:27px; }
.kpi p { color:var(--muted); font-size:11px; margin:0 0 6px; }
.kpi strong { display:block; font-size:25px; letter-spacing:-1px; }
.kpi small { color:#758398; display:block; font-size:10px; line-height:1.4; margin-top:5px; }
.kpi-link { color:#1260c9; display:block; font-size:10px; font-weight:800; margin-top:9px; }
.kpi.green { border-top-color:var(--green); } .kpi.green .kpi-icon { background:#e5f7ed; color:#168447; }
.kpi.red { border-top-color:var(--red); } .kpi.red .kpi-icon { background:#ffe7e9; color:#ca2633; }
.kpi.amber { border-top-color:var(--amber); } .kpi.amber .kpi-icon { background:#fff1dc; color:#b46800; }
.kpi.violet { border-top-color:var(--violet); } .kpi.violet .kpi-icon { background:#f1ecff; color:#6c43b6; }
.kpi.active { background:#eef6ff; box-shadow:0 0 0 2px #1b79ca, 0 12px 26px rgba(20,55,90,.13); }
.kpi.active .kpi-link { text-decoration:underline; }

/* --- operational brief ---------------------------------------------------- */
.brief-table-wrap { border:1px solid var(--line); border-radius:10px; }
.brief-table { min-width:720px; }
.brief-table td { font-size:12px; vertical-align:top; }
.brief-table td b { color:#17334f; display:block; font-size:12px; }
.brief-table td small { color:var(--muted); display:block; font-size:10px; line-height:1.45; margin-top:3px; }
.brief-why { border-left:2px solid #dbe4ec; margin-top:6px !important; padding-left:8px; }
.brief-row { border-left:3px solid #6e7f90; }
.brief-row.critical { border-left-color:#bd211a; } .brief-row.high { border-left-color:#d56b14; }
.brief-row.medium { border-left-color:#bd8c00; } .brief-row.info { border-left-color:#1c67b7; }
.severity-tag { border-radius:99px; display:inline-block; font-size:9px; font-weight:850; letter-spacing:.05em; padding:4px 8px; text-transform:uppercase; white-space:nowrap; }
.severity-tag.critical { background:#ffe0dd; color:#a8201a; } .severity-tag.high { background:#ffe9d6; color:#9a4c00; }
.severity-tag.medium { background:#fff3cf; color:#7a5900; } .severity-tag.info { background:#e7f3ff; color:#1a5fa8; }
.brief-clear { padding:26px 18px; text-align:center; }
.brief-clear b { color:#17334f; display:block; font-size:13px; }
.brief-clear span { color:var(--muted); display:block; font-size:11px; line-height:1.5; margin:5px auto 0; max-width:520px; }

/* --- live schedule -------------------------------------------------------- */
.dashboard-toolbar select { background:#fff; border:1px solid #c3d3e2; border-radius:7px; font:inherit; font-size:12px; font-weight:700; padding:7px 8px; }
.dashboard-toolbar .segmented button { padding:8px 11px; }
.live-gantt { --track-width:900px; min-width:calc(228px + var(--track-width)); }
.live-gantt-head,.live-gantt-row { display:grid; grid-template-columns:288px var(--track-width); }
.live-gantt-head { border-bottom:1px solid #d9e3ec; position:sticky; top:0; z-index:3; }
.live-gantt-corner { background:#f6f9fc; border-right:1px solid #d9e3ec; color:#27455f; font-size:11px; font-weight:850; left:0; padding:10px 12px; position:sticky; z-index:4; }
.live-gantt-corner span { color:#738297; display:block; font-size:10px; font-weight:600; margin-top:2px; }
.live-gantt-axis { background:#fbfdff; min-height:46px; position:relative; }
.live-gantt-axis i { border-left:1px solid #d9e4ed; color:#5d7288; font-size:10px; font-style:normal; padding:8px 0 0 5px; position:absolute; top:0; white-space:nowrap; }
.live-gantt-axis i.day-start { border-left:2px solid #b9cbdc; color:#20456b; font-weight:800; }
.live-gantt-row { min-height:64px; }
.live-line-label { align-items:center; background:#fff; border-bottom:1px solid #e5ebf1; border-right:1px solid #d9e3ec; display:flex; gap:10px; justify-content:space-between; left:0; padding:8px 12px; position:sticky; z-index:2; }
.live-line-identity { display:grid; gap:2px; min-width:0; }
.live-line-identity b { align-items:center; color:#173653; display:flex; font-size:12px; gap:6px; }
.live-line-identity > span { color:#6d7d90; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-line-state { font-size:9px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.live-line-state.running { color:#168447; } .live-line-state.idle { color:#5f7085; }
.live-line-state.blocked { color:#ca2633; } .live-line-state.offline { color:#7b899b; }
.status-dot { border-radius:50%; display:inline-block; flex:none; height:8px; width:8px; }
.status-dot.running { background:#1aa35c; box-shadow:0 0 0 3px rgba(26,163,92,.16); }
.status-dot.idle { background:#c3ced9; } .status-dot.blocked { background:#d63d46; box-shadow:0 0 0 3px rgba(214,61,70,.16); } .status-dot.offline { background:#8d9bab; }
.live-track { background:repeating-linear-gradient(to right,#fbfdff 0,#fbfdff calc(8.333% - 1px),#e8eef3 calc(8.333% - 1px),#e8eef3 8.333%); border-bottom:1px solid #e5ebf1; min-height:64px; position:relative; }
.live-block { bottom:9px; top:9px; }
.live-now-line { background:#e0433d; bottom:0; box-shadow:0 0 0 1px rgba(224,67,61,.18); pointer-events:none; position:absolute; top:0; width:2px; z-index:2; }
.live-gantt-head .live-now-line::after { background:#e0433d; border-radius:3px; color:#fff; content:attr(data-label); font-size:8px; font-weight:850; left:50%; letter-spacing:.05em; padding:2px 5px; position:absolute; top:2px; transform:translateX(-50%); white-space:nowrap; }

/* --- machine status ------------------------------------------------------- */

.status-tally { border:1px solid var(--line); border-radius:9px; display:grid; gap:0; grid-template-columns:repeat(2,1fr); margin-bottom:13px; overflow:hidden; }
.tally { align-items:center; border-bottom:1px solid #edf1f5; border-right:1px solid #edf1f5; display:flex; gap:7px; padding:9px 11px; }
.tally b { color:#17334f; font-size:15px; }
.tally > span:last-child { color:var(--muted); font-size:11px; }
.status-list { display:grid; gap:9px; }




.status-card.running,
.status-card-head { align-items:center; display:flex; gap:8px; justify-content:space-between; }
.status-card-head b { font-size:12px; }



.status-card p { color:#5a6c80; font-size:11px; line-height:1.5; margin:6px 0 0; }
.status-card-foot { align-items:center; display:flex; gap:8px; justify-content:space-between; margin-top:8px; }
.status-card-foot small { color:#718195; font-size:10px; font-weight:700; }
.status-clear { background:#f7fbf9; border:1px solid #d9ebe1; border-radius:8px; color:#3f6d55; font-size:11px; line-height:1.5; padding:14px; }
.panel-subhead { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; margin-top:16px; padding-top:13px; }
.panel-subhead h4 { color:#27455f; font-size:12px; margin:0; }

/* --- order queue ---------------------------------------------------------- */
.queue-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.queue-controls input { flex:1; min-width:220px; }
.queue-controls input,.queue-controls select { background:#fff; border:1px solid #d8e0ea; border-radius:7px; color:var(--ink); font:inherit; font-size:12px; padding:8px 9px; }
.queue-table { min-width:1080px; }
.queue-table td { vertical-align:middle; white-space:nowrap; }
.queue-table td.numeric { font-variant-numeric:tabular-nums; text-align:right; }
.queue-row { border-left:3px solid transparent; }
.queue-row.risk-high { border-left-color:#d53d4a; } .queue-row.risk-medium { border-left-color:#d88116; }
.late-finish { color:#c1272f; font-weight:800; }
.reason-tag { background:#eef2f6; border-radius:5px; color:#52667c; display:inline-block; font-size:10px; font-weight:750; padding:3px 7px; }
.queue-empty { color:var(--muted); padding:26px !important; text-align:center; }
.pagination { align-items:center; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:13px; }
.pagination-count { color:var(--muted); font-size:11px; font-weight:700; }
.pagination-controls { align-items:center; display:flex; flex-wrap:wrap; gap:5px; }
.pagination-gap { color:#98a6b6; font-size:11px; padding:0 3px; }

/* --- today's summary ------------------------------------------------------ */
.summary-grid { display:grid; gap:12px; grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:18px; }
.summary-tile { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:14px; }
.summary-tile p { color:var(--muted); font-size:11px; margin:0 0 6px; }
.summary-tile strong { display:block; font-size:21px; letter-spacing:-.6px; }
.summary-tile small { color:#758398; display:block; font-size:10px; line-height:1.4; margin-top:5px; }

/* --- activity ------------------------------------------------------------- */
.compact-activity { grid-template-columns:repeat(2,minmax(0,1fr)); display:grid; gap:0 22px; }
.compact-activity .activity { padding:8px 0; }
.compact-activity .activity p { -webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box; overflow:hidden; }

/* --- drawer additions ------------------------------------------------------ */
.factor-list { color:#51677c; font-size:11px; line-height:1.6; margin:8px 0 0; padding-left:17px; }
.factor-list li { margin-bottom:2px; }
.outlook-panel { background:#f6f9fc; border:1px solid #dde6ee; border-left:3px solid #3778af; border-radius:8px; margin:15px 0; padding:12px 13px; }
.outlook-panel > b { color:#254967; display:block; font-size:12px; margin-bottom:8px; }
.outlook-panel.late { background:#fff4f1; border-color:#f2cec6; border-left-color:#cf472f; }
.outlook-panel.ok { background:#f4fbf7; border-color:#cfe7da; border-left-color:#1a8a54; }
.outlook-panel > p { color:#51677c; font-size:12px; line-height:1.5; margin:0; }
.outlook-line { border-top:1px solid rgba(120,145,170,.18); display:flex; gap:12px; justify-content:space-between; padding:6px 0; }
.outlook-line span { color:#718195; flex:none; font-size:11px; }
.outlook-line b { color:#203e59; font-size:11px; text-align:right; }
.outlook-panel small { color:#78899b; display:block; font-size:10px; line-height:1.45; margin-top:9px; }

/* --- responsive ------------------------------------------------------------ */
@media (max-width:1500px) { .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .summary-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1250px) {
  .live-gantt { min-width:calc(196px + var(--track-width)); }
  .live-gantt-head,.live-gantt-row { grid-template-columns:196px var(--track-width); }
  .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .command-header { align-items:stretch; flex-direction:column; }
  .command-actions { justify-content:flex-start; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-tally { grid-template-columns:1fr; }
  .compact-activity { grid-template-columns:1fr; }
  .dashboard-toolbar .view-controls { align-items:stretch; flex-direction:column; }
  .dashboard-toolbar select { width:100%; }
}
@media (max-width:650px) {
  .kpi-grid,.summary-grid { grid-template-columns:1fr; }
  .live-gantt { min-width:calc(150px + var(--track-width)); }
  .live-gantt-head,.live-gantt-row { grid-template-columns:150px var(--track-width); }
  .line-utilisation { display:none; }
  .queue-controls input { min-width:0; width:100%; }
  .pagination { justify-content:center; }
}

/* ===========================================================================
   Maintenance workspace: work orders, the PM worklist and the record register.
   =========================================================================== */

.kpi.static { cursor:default; }
.kpi.static:hover { border-color:var(--line); box-shadow:var(--shadow); transform:none; }
.kpi.amber { border-top-color:var(--amber); } .kpi.amber .kpi-icon { background:#fff1dc; color:#b46800; }

/* --- work orders ---------------------------------------------------------- */

.timing-tag { border-radius:5px; display:inline-block; font-size:10px; font-weight:800; padding:4px 7px; white-space:nowrap; }
.timing-tag.late { background:#ffe0dd; color:#a8201a; }
.timing-tag.active { background:#fff1dc; color:#9a4c00; }
.timing-tag.soon { background:#e7f3ff; color:#1a5fa8; }
.timing-tag.done { background:#e5f7ed; color:#168447; }
.timing-tag.muted { background:#eef2f6; color:#697c90; }

/* --- preventive-maintenance worklist -------------------------------------- */
.pm-due-list { display:grid; gap:10px; }
.pm-due-head { align-items:center; display:flex; gap:8px; justify-content:space-between; }
.pm-due-head b { font-size:12px; }
.pm-due-flag { border-radius:5px; font-size:9px; font-weight:850; letter-spacing:.04em; padding:3px 7px; text-transform:uppercase; white-space:nowrap; }
.pm-due-flag.ok { background:#e5f7ed; color:#168447; }
.pm-due-flag.due { background:#ffeed6; color:#9a4c00; }
.pm-due-flag.over { background:#ffe0dd; color:#a8201a; }
.pm-due-foot { align-items:center; display:flex; gap:8px; justify-content:space-between; margin-top:8px; }
.pm-due-foot small { color:#718195; font-size:10px; line-height:1.4; }

/* --- record register ------------------------------------------------------ */


/* --- asset history -------------------------------------------------------- */

#assetHistorySelect { background:#fff; border:1px solid #c3d3e2; border-radius:7px; font:inherit; font-size:12px; font-weight:700; padding:7px 8px; }

/* --- dialogs -------------------------------------------------------------- */
.wide-dialog { width:min(680px,calc(100vw - 32px)); }
.required-mark { background:#ffe7e9; border-radius:4px; color:#ca2633; font-size:9px; font-weight:850; letter-spacing:.04em; margin-left:6px; padding:2px 5px; text-transform:uppercase; }
.dialog-note { background:#f4f8fc; border-left:3px solid #7ea8d0; color:#51677c; font-size:11px; line-height:1.5; margin:0; padding:9px 11px; }
.checkbox.disabled { opacity:.5; }
.checkbox.disabled span { text-decoration:line-through; }

@media (max-width:900px) {

}

/* ===========================================================================
   Maintenance command centre, deferral negotiation, notifications, motion.
   =========================================================================== */

/* --- topbar identity ------------------------------------------------------ */
.user-identity { display:flex; flex-direction:column; justify-content:center; line-height:1.25; min-width:0; max-width:200px; }
.user-control #userName { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- alerts --------------------------------------------------------------- */
.alert-stack { display:grid; gap:9px; margin:4px 0 6px; }
.alert { align-items:center; animation:alertIn .32s ease both; border:1px solid #f0d3a8; background:#fffaf1; border-left:3px solid var(--amber); border-radius:9px; display:flex; gap:11px; padding:11px 13px; }
.alert.critical { background:#fff6f5; border-color:#f3c3bf; border-left-color:var(--red); }
.alert-icon { align-items:center; background:#fff1dc; border-radius:7px; color:#b46800; display:flex; flex:none; font-weight:900; height:26px; justify-content:center; width:26px; }
.alert.critical .alert-icon { background:#ffe0dd; color:#a8201a; }
.alert > div { flex:1; min-width:0; }
.alert b { color:#17334f; display:block; font-size:12px; }
.alert p { color:#5a6c80; font-size:11px; line-height:1.5; margin:3px 0 0; }
.alert-note { color:#7b899b; font-size:10px; font-style:italic; white-space:nowrap; }
@keyframes alertIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* --- deferral negotiation -------------------------------------------------- */

.deferral-window span,.deferral-move span { color:#718195; font-size:10px; }
.deferral-window b,.deferral-move b { color:#203e59; font-size:11px; text-align:right; }
@keyframes cardIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* --- maintenance impact ---------------------------------------------------- */


/* --- PM mini gauge in the timeline ---------------------------------------- */

.live-block.faded { opacity:.45; }
.live-block.clash { box-shadow:0 0 0 2px #d63d46, 0 3px 8px rgba(18,49,80,.2); }

/* --- notifications --------------------------------------------------------- */
.notifications-panel { padding:0; }
.notif-head { align-items:flex-start; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:15px 16px 12px; }
.notif-head h3 { font-size:15px; margin:0; }
.notif-head small { color:var(--muted); display:block; font-size:11px; margin-top:2px; }
.notif-close { font-size:15px; line-height:1; padding:5px 8px; }
.notif-tabs { border-bottom:1px solid var(--line); display:flex; gap:4px; padding:9px 12px; }
.notif-tab { background:none; border:0; border-radius:6px; color:#5c6c80; cursor:pointer; font:inherit; font-size:11px; font-weight:800; padding:6px 9px; }
.notif-tab:hover { background:#f1f5f9; }
.notif-tab.active { background:#165fae; color:#fff; }
.notif-tab i { background:rgba(0,0,0,.09); border-radius:99px; font-size:9px; font-style:normal; margin-left:3px; padding:1px 5px; }
.notif-tab.active i { background:rgba(255,255,255,.24); }
.notif-list { max-height:400px; overflow:auto; padding:4px 16px; }
.notif-actions { border-top:1px solid var(--line); display:flex; gap:6px; justify-content:flex-end; padding:11px 16px; }
.notification { align-items:flex-start; border-radius:7px; position:relative; cursor:pointer; transition:background .15s ease, opacity .16s ease, transform .16s ease; }
.notification.unread { background:#f6faff; }
.notification:hover { background:#eef5ff; }
.notification.unread::after { background:var(--blue); border-radius:99px; content:''; height:6px; left:-9px; position:absolute; top:17px; width:6px; }
.notification.read { opacity:.6; }
.notification.read:hover { opacity:.85; }
.notification.removing { opacity:0; transform:translateX(14px); }
.notification.warning > span { background:#fff1dc; color:#b46800; }
.notif-delete { align-self:center; background:none; border:0; border-radius:6px; color:#9aa7b6; cursor:pointer; flex:none; font-size:16px; line-height:1; padding:4px 7px; }
.notif-delete:hover { background:#ffe7e9; color:#ca2633; }
.notification-dot { transition:transform .2s ease, background .2s ease; }
.notification-dot.zero { background:#aeb9c6; transform:scale(.82); }

/* --- motion: live, but not distracting ------------------------------------ */
.kpi strong { transition:color .25s ease; }
.kpi.value-changed strong { animation:valuePulse .7s ease; }
@keyframes valuePulse {
  0% { color:var(--blue); transform:scale(1); }
  35% { color:var(--blue); transform:scale(1.07); }
  100% { transform:scale(1); }
}
.live-chip .live-dot { animation:livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 4px rgba(77,203,140,.12); }
  50% { box-shadow:0 0 0 7px rgba(77,203,140,.05); }
}
.live-chip.offline .live-dot { animation:none; }
.view.active > .panel,.view.active > section > .panel { animation:dashFadeUp .42s ease both; }
@keyframes pendingGlow {
  0%,100% { box-shadow:0 4px 14px rgba(216,129,22,.09); }
  50% { box-shadow:0 4px 20px rgba(216,129,22,.2); }
}
.toast { animation:toastIn .26s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.mini-button,.kpi,.text-button { transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.mini-button:active { transform:translateY(1px); }

@media (prefers-reduced-motion:reduce) {
  .alert,.deferral-card,.view.active > .panel,.view.active > section > .panel,.toast,
  .live-chip .live-dot,.kpi.value-changed strong { animation:none !important; }
  .notification { transition:none; }
}

@media (max-width:900px) {

  .alert { align-items:flex-start; flex-direction:column; }
  .notif-tabs { flex-wrap:wrap; }
}

/* ===========================================================================
   Navigation rail.

   Grouped so eleven entries read as four ideas, with a sliding indicator, live
   badges for the things that actually need a decision, and a collapsed mode
   for planners who want the timeline wider.
   =========================================================================== */

.sidebar {
  padding:18px 12px 14px;
  gap:0;
  scrollbar-width:thin; scrollbar-color:#20527f transparent;
  transition:padding .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:#1d4a76; border-radius:99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:#2a6ba6; }
.sidebar::-webkit-scrollbar-track { background:transparent; }

/* ambient light so the flat navy has some depth */
.sidebar::before {
  content:''; position:absolute; inset:0 0 auto; height:320px; pointer-events:none;
  background:radial-gradient(120% 70% at 18% 0,rgba(65,182,230,.16) 0,transparent 62%);
}
.sidebar > * { position:relative; z-index:1; }

/* --- brand + collapse ----------------------------------------------------- */
.sidebar-top { align-items:center; display:flex; gap:8px; justify-content:space-between; padding:0 2px 14px; }
.brand { flex:1; min-width:0; padding:0; }
.brand .official-brand-logo { flex:none; transition:transform .28s cubic-bezier(.4,0,.2,1); }
.brand:hover .official-brand-logo { transform:scale(1.04) rotate(-1.5deg); }
.brand-copy { min-width:0; overflow:hidden; }
.brand-copy b,.brand-copy span { white-space:nowrap; }

.rail-toggle {
  align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; color:#b6cbe3; cursor:pointer; display:flex; flex:none; font:inherit;
  height:28px; justify-content:center; padding:0; transition:.2s ease; width:28px;
}
.rail-toggle:hover { background:rgba(255,255,255,.12); color:#fff; }
.rail-chevron { display:block; font-size:19px; line-height:1; transition:transform .3s cubic-bezier(.4,0,.2,1); }

/* --- plant chip ----------------------------------------------------------- */
.plant-chip { margin:0 2px 18px; transition:.24s ease; }
.plant-chip:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }

/* --- groups --------------------------------------------------------------- */
.nav { display:block; position:relative; }
.nav-group { display:grid; gap:2px; margin-bottom:14px; }
.nav-group.group-hidden { display:none; }
.sidebar-label { margin:0 0 7px 12px; opacity:.8; transition:opacity .2s ease; }

/* --- the sliding indicator ------------------------------------------------ */
.nav-indicator {
  background:linear-gradient(90deg,#0d70db,#1f8ae8);
  border-radius:9px; box-shadow:0 6px 18px rgba(0,90,190,.42), inset 0 1px 0 rgba(255,255,255,.18);
  left:0; opacity:0; pointer-events:none; position:absolute; right:0; top:0; height:0; z-index:0;
  transition:transform .34s cubic-bezier(.5,.05,.2,1), height .28s ease, opacity .2s ease;
}
.nav-indicator.ready { opacity:1; }
.nav-indicator::after {
  background:#8fd3ff; border-radius:0 3px 3px 0; content:''; height:16px; left:0;
  position:absolute; top:50%; transform:translateY(-50%); width:3px;
}

/* --- items ---------------------------------------------------------------- */
.nav-item {
  align-items:center; display:flex; gap:2px; overflow:hidden; padding:10px 11px;
  position:relative; z-index:1;
  transition:background .2s ease, color .2s ease, transform .18s cubic-bezier(.4,0,.2,1);
}
.nav-item::before {
  background:linear-gradient(90deg,rgba(120,190,255,.14),transparent);
  border-radius:8px; content:''; inset:0; opacity:0; position:absolute;
  transition:opacity .2s ease; z-index:-1;
}
.nav-item:hover:not(.active) { background:none; transform:translateX(3px); }
.nav-item:hover:not(.active)::before { opacity:1; }
.nav-item:focus-visible { outline:2px solid #6fc0ff; outline-offset:1px; }
.nav-item.active { background:none; border-color:transparent; box-shadow:none; color:#fff; }
.nav-item.active .nav-glyph { color:#fff; transform:scale(1.08); }
.nav-glyph { flex:none; transition:color .2s ease, transform .22s cubic-bezier(.4,0,.2,1); }
.nav-item:hover .nav-glyph { color:#dcecff; }
.nav-text {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity .2s ease;
}

/* --- live badges ---------------------------------------------------------- */
.nav-badge {
  background:#e0433d; border-radius:99px; color:#fff; display:none; flex:none;
  font-size:9px; font-style:normal; font-weight:850; line-height:1; min-width:17px;
  padding:3px 5px; text-align:center;
  animation:badgePop .34s cubic-bezier(.3,1.4,.5,1) both;
}
.nav-badge.show { display:block; }
.nav-badge.tone-amber { background:var(--amber); }
.nav-badge.tone-blue { background:#1f7fe0; }
.nav-badge.dot { min-width:8px; padding:0; height:8px; }
@keyframes badgePop { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }

/* --- footer --------------------------------------------------------------- */
.sidebar-note { border-top:1px solid rgba(255,255,255,.11); padding:14px 4px 0; position:relative; }
.sidebar-user {
  align-items:center; background:none; border:1px solid transparent; border-radius:8px; color:inherit;
  cursor:pointer; display:flex; font:inherit; gap:9px; margin-bottom:11px; min-width:0; padding:4px; text-align:left; width:100%;
  transition:background .15s ease, border-color .15s ease;
}
.sidebar-user:hover,.sidebar-user[aria-expanded="true"] { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.sidebar-avatar {
  align-items:center; background:linear-gradient(140deg,#1d7ad6,#0b4e94); border-radius:50%;
  color:#fff; display:flex; flex:none; font-size:12px; font-weight:850; height:30px;
  justify-content:center; width:30px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 4px 10px rgba(0,40,90,.4);
}
.sidebar-user > div { min-width:0; }
.sidebar-user b { color:#eef5fc; display:block; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user-menu {
  background:#fff; border:1px solid var(--line); border-radius:10px; bottom:56px; left:4px;
  box-shadow:0 20px 50px rgba(14,43,76,.28); padding:6px; position:absolute; width:calc(100% - 8px); z-index:6;
}
.sidebar-user-menu button {
  background:none; border:none; border-radius:6px; color:#c0261f; cursor:pointer; display:block;
  font:inherit; font-size:12px; font-weight:700; padding:8px 10px; text-align:left; width:100%;
}
.sidebar-user-menu button:hover { background:#fff0ee; }
.system-state { align-items:center; display:flex; gap:7px; margin:0; }
.system-state i { flex:none; margin:0; animation:livePulse 2.6s ease-in-out infinite; }
.system-state.degraded i { animation:none; background:var(--amber); box-shadow:0 0 0 4px rgba(216,129,22,.14); }
.system-state.degraded { color:#f0cf9d; }

/* --- collapsed rail ------------------------------------------------------- */
body.nav-rail .app-shell { grid-template-columns:74px minmax(0,1fr); }
body.nav-rail .sidebar { padding:18px 9px 14px; }
body.nav-rail .sidebar-top { justify-content:center; }
body.nav-rail .brand { display:none; }
body.nav-rail .rail-chevron { transform:rotate(180deg); }
body.nav-rail .brand-copy,
body.nav-rail .nav-text,
body.nav-rail .sidebar-label,
body.nav-rail .plant-chip span,
body.nav-rail .sidebar-user > div { display:none; }
body.nav-rail .plant-chip { justify-content:center; margin:0 0 16px; padding:9px 0; }
body.nav-rail .nav-item { justify-content:center; padding:11px 0; }
body.nav-rail .nav-glyph { width:auto; }
body.nav-rail .nav-badge.show {
  position:absolute; right:8px; top:6px; min-width:7px; height:7px; padding:0;
  font-size:0; line-height:0;
}
body.nav-rail .nav-group { margin-bottom:10px; }
body.nav-rail .nav-group + .nav-group { border-top:1px solid rgba(255,255,255,.08); padding-top:10px; }
body.nav-rail .sidebar-user { justify-content:center; }
body.nav-rail .system-state { justify-content:center; }
body.nav-rail .system-state span { display:none; }
body.nav-rail .app-shell .workspace { padding-left:34px; }

/* tooltips only earn their place once the labels are gone */
body.nav-rail [data-tip] { position:relative; }
body.nav-rail [data-tip]:hover::after {
  background:#0b2b4d; border:1px solid #21527f; border-radius:7px;
  box-shadow:0 10px 26px rgba(0,15,35,.5); color:#eaf3fb; content:attr(data-tip);
  font-size:11px; font-weight:700; left:calc(100% + 12px); padding:7px 10px; pointer-events:none;
  position:absolute; top:50%; transform:translateY(-50%); white-space:nowrap; z-index:40;
  animation:tipIn .16s ease both;
}
@keyframes tipIn { from { opacity:0; transform:translate(-4px,-50%); } to { opacity:1; transform:translate(0,-50%); } }

/* --- entry animation ------------------------------------------------------ */
.nav-item { animation:navIn .4s cubic-bezier(.3,.8,.3,1) both; }
.nav-group:nth-child(2) .nav-item { animation-delay:.04s; }
.nav-group:nth-child(3) .nav-item { animation-delay:.08s; }
.nav-group:nth-child(4) .nav-item { animation-delay:.12s; }
.nav-group:nth-child(5) .nav-item { animation-delay:.16s; }
@keyframes navIn { from { opacity:0; transform:translateX(-9px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  .nav-item,.nav-badge,.system-state i,.rail-chevron,.nav-indicator,.brand .official-brand-logo { animation:none !important; transition:none !important; }
  .nav-item:hover:not(.active) { transform:none; }
}

/* --- horizontal bar on small screens -------------------------------------- */
@media (max-width:1050px) {
  .sidebar { padding:11px 13px; }
  .sidebar::before { display:none; }
  .sidebar-top { padding:0; }
  .rail-toggle { display:none; }
  .nav { display:flex; gap:6px; }
  .nav-group { display:flex; gap:4px; margin:0; }
  .nav-group + .nav-group { border-left:1px solid rgba(255,255,255,.12); margin-left:4px; padding-left:8px; }
  .nav-indicator { display:none; }
  .nav-item { animation:none; }
  .nav-item.active { background:linear-gradient(90deg,#0d70db,#176ccc); box-shadow:0 6px 16px rgba(0,50,110,.5); }
  .nav-badge.show { display:block; }
  body.nav-rail .app-shell { grid-template-columns:1fr; }
  body.nav-rail .nav-text,body.nav-rail .brand-copy { display:revert; }
}

/* ===========================================================================
   Planning pipeline: the workflow rail, order board and approval queue.
   =========================================================================== */

/* --- workflow rail -------------------------------------------------------- */
.workflow-wrap { margin:20px 0 18px; }
.wf-rail { display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.wf-step { position:relative; }
.wf-step > button {
  background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow);
  cursor:pointer; display:flex; font:inherit; gap:11px; padding:13px 14px; text-align:left; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease, transform .16s ease;
  animation:wfIn .4s ease both;
}
.wf-step:nth-child(2) > button { animation-delay:.05s; }
.wf-step:nth-child(3) > button { animation-delay:.1s; }
.wf-step:nth-child(4) > button { animation-delay:.15s; }
@keyframes wfIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.wf-step > button:hover { border-color:#9fc3f7; box-shadow:0 10px 24px rgba(20,55,90,.12); transform:translateY(-1px); }
.wf-mark {
  align-items:center; border-radius:50%; display:flex; flex:none; font-size:12px; font-weight:900;
  height:26px; justify-content:center; width:26px;
  background:#eef2f6; color:#7b899b;
}
.wf-body { display:grid; gap:2px; min-width:0; }
.wf-body b { color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.wf-body strong { color:#17334f; font-size:15px; letter-spacing:-.3px; }
.wf-body small { color:var(--muted); font-size:10px; line-height:1.4; }
.wf-step.done .wf-mark { background:#e5f7ed; color:#168447; }
.wf-step.done > button { border-color:#cfe7da; }
.wf-step.current .wf-mark { background:#1f7fe0; color:#fff; animation:wfPulse 2s ease-in-out infinite; }
.wf-step.current > button { border-color:#9fc3f7; box-shadow:0 8px 22px rgba(20,90,180,.16); }
.wf-step.attention .wf-mark { background:#fff1dc; color:#b46800; }
.wf-step.attention > button { background:#fffaf1; border-color:#f0d3a8; }
.wf-step.blocked .wf-mark { background:#ffe0dd; color:#a8201a; }
.wf-step.blocked > button { background:#fff6f5; border-color:#f3c3bf; }
.wf-step.waiting > button,.wf-step.empty > button { opacity:.66; }
.wf-step.here > button { outline:2px solid #1f7fe0; outline-offset:2px; }
@keyframes wfPulse { 0%,100% { box-shadow:0 0 0 0 rgba(31,127,224,.4); } 50% { box-shadow:0 0 0 6px rgba(31,127,224,0); } }
/* connector between steps */
.wf-step + .wf-step::before {
  background:linear-gradient(90deg,#d5e0ea,#eef3f8); content:''; height:2px; left:-10px;
  position:absolute; top:26px; width:10px;
}
.wf-next { align-items:center; color:#3d5570; display:flex; font-size:12px; gap:9px; margin:11px 2px 0; }
.wf-next-tag { background:#1f7fe0; border-radius:5px; color:#fff; font-size:9px; font-weight:850; letter-spacing:.06em; padding:3px 7px; text-transform:uppercase; }

/* --- shared card affordances ---------------------------------------------- */
.ap-check { cursor:pointer; display:inline-flex; flex:none; position:relative; }
.ap-check input { height:17px; margin:0; width:17px; accent-color:#1266c9; cursor:pointer; }
.ap-check input:disabled { cursor:not-allowed; }
.ap-mark { align-items:center; color:#a9b6c4; display:inline-flex; flex:none; font-weight:900; height:17px; justify-content:center; width:17px; }

/* --- order board ---------------------------------------------------------- */
.ord-board { display:grid; gap:8px; }
/* Collapsed by default -- the whole bar is the toggle, so a fully-collapsed board
   reads as a tidy stack of pills instead of a wall of headers and blank space. */
.ord-group-head {
  align-items:center; background:#fff; border:1px solid var(--line); border-radius:9px;
  cursor:pointer; display:flex; flex-wrap:wrap; font:inherit; gap:8px; padding:10px 14px;
  text-align:left; transition:background .15s ease, border-color .15s ease; width:100%;
}
.ord-group-head:hover { background:#f8fbfe; border-color:#c8dcf0; }
.ord-group.expanded .ord-group-head { background:#f8fbfe; border-color:#c8dcf0; }
.grp-chev { color:#8a99ab; flex:none; font-size:10px; }
/* Shared "show/hide list" chip -- used in panel headers (Immutable activity history,
   Finishing past due, All allocations) so every collapsible list in the app reads as one
   consistent control instead of a generic action button. */
.list-toggle {
  align-items:center; background:#f4f7fb; border:1px solid var(--line); border-radius:99px;
  color:#33465c; cursor:pointer; display:inline-flex; font:inherit; font-size:11px; font-weight:750;
  gap:5px; padding:5px 11px; transition:background .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap;
}
.list-toggle:hover,.list-toggle[aria-expanded="true"] { background:#eef6ff; border-color:#9fc3f7; color:#1260c9; }
.list-toggle .grp-chev { color:inherit; }
.ord-group-head h4,.ap-group-head h4 { align-items:center; color:#17334f; display:flex; font-size:13px; gap:7px; margin:0; }
.ord-group-head h4 i,.ap-group-head h4 i { background:#eef2f6; border-radius:99px; color:#52667c; font-size:10px; font-style:normal; font-weight:850; padding:2px 7px; }
.ord-group-head p,.ap-group-head p { color:var(--muted); font-size:11px; margin:0; }
.ord-group-head p { display:none; flex-basis:100%; margin-left:19px; text-align:left; }
.ord-group.expanded .ord-group-head p { display:block; }
.ord-group.urgent h4 i { background:#ffe0dd; color:#a8201a; }
.ord-group.risk h4 i { background:#ffe9d6; color:#9a4c00; }
.ord-group.watch h4 i { background:#fff3cf; color:#7a5900; }
.ord-group.archived h4 i { background:#eef2f6; color:#52667c; }
.confirmed-flag { display:inline-block; margin:0 0 0 6px; padding:3px 5px; border-radius:4px; background:#e5f7ed; color:#168447; font-size:8px; font-weight:850; letter-spacing:.05em; }
.unalloc-flag { display:inline-block; margin:0 0 0 6px; padding:3px 5px; border-radius:4px; background:#f1ecff; color:#6c43b6; font-size:8px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.ap-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
.ord-grid { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ord-board.layout-card .ord-grid,.ord-board.layout-twocol .ord-grid { display:grid; gap:12px; }
.ord-board.layout-card .ord-grid { grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); }
.ord-board.layout-twocol .ord-grid { grid-template-columns:repeat(2,1fr); }
.order-layout-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.layout-btn { background:#fff; border:0; border-right:1px solid var(--line); color:#5c6c80; cursor:pointer; font-size:14px; line-height:1; padding:8px 11px; transition:background .15s ease, color .15s ease; }
.layout-btn:last-child { border-right:0; }
.layout-btn:hover { background:#f3f8fd; }
.layout-btn.active { background:#165fae; color:#fff; }

/* Rows are compact by design -- the full breakdown (facts, window, why-at-risk) only
   shows in the details drawer, so the list stays scannable at any order count. */
.ord-card.ord-row {
  align-items:center; background:#fff; border:1px solid var(--line); border-left:3px solid #cbd6e1;
  border-radius:8px; box-shadow:none; cursor:pointer; display:flex; flex-wrap:wrap; gap:10px 14px;
  padding:10px 13px; transition:background .15s ease, border-color .15s ease;
}
.ord-card.ord-row:hover { background:#f9fcff; border-color:#a9caf0; box-shadow:none; transform:none; }
/* Orders re-render on every keystroke in search and every layout toggle -- replaying a
   0.32s entrance animation each time reads as lag, not polish. */
.ord-card { animation:none; }
.ord-card.ord-row.risk-high { border-left-color:var(--red); }
.ord-card.ord-row.risk-medium { border-left-color:var(--amber); }
.ord-card.ord-row.risk-low { border-left-color:var(--green); }
/* Category colour matches the summary card its order belongs to, above the list --
   overrides the plain risk colour so a card's border always tells you which group it's in. */
.ord-card.ord-row.grp-urgent { border-left-color:var(--red); }
.ord-card.ord-row.grp-risk { border-left-color:var(--amber); }
.ord-card.ord-row.grp-watch { border-left-color:#e0a940; }
.ord-card.ord-row.grp-steady { border-left-color:var(--green); }
.ord-card.ord-row.grp-done,.ord-card.ord-row.grp-archived { border-left-color:#9aa7b6; }
.ord-card.ord-row.selected { border-color:#7fb2ee; box-shadow:0 0 0 2px rgba(31,127,224,.18); }
.ord-row-ref { align-items:center; display:flex; flex:0 0 auto; gap:6px; min-width:112px; }
.ord-row-ref b { color:#17334f; font-size:13px; }
.ord-row-product { align-items:center; color:#33465c; display:flex; flex:1 1 220px; font-size:12px; gap:6px; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ord-row-due { color:var(--muted); flex:0 0 auto; font-size:11px; min-width:70px; white-space:nowrap; }
.ord-row-chevron { color:#9aa7b6; flex:0 0 auto; font-size:15px; margin-left:auto; }

.ord-card,.ap-card {
  background:#fff; border:1px solid var(--line); border-left:3px solid #cbd6e1; border-radius:10px;
  box-shadow:var(--shadow); padding:13px;
  animation:cardIn .32s ease both;
  transition:border-color .18s ease, box-shadow .18s ease, transform .16s ease;
}
.ord-card:hover,.ap-card:hover { box-shadow:0 12px 26px rgba(20,55,90,.13); transform:translateY(-2px); }
.ord-card.risk-high { border-left-color:var(--red); }
.ord-card.risk-medium { border-left-color:var(--amber); }
.ord-card.risk-low { border-left-color:var(--green); }
.ord-card.grp-urgent { border-left-color:var(--red); }
.ord-card.grp-risk { border-left-color:var(--amber); }
.ord-card.grp-watch { border-left-color:#e0a940; }
.ord-card.grp-steady { border-left-color:var(--green); }
.ord-card.grp-done,.ord-card.grp-archived { border-left-color:#9aa7b6; }
.ord-card.selected,.ap-card.selected { border-color:#7fb2ee; box-shadow:0 0 0 2px rgba(31,127,224,.18), var(--shadow); }
.ord-top,.ap-head { align-items:center; display:flex; gap:9px; }
.ord-ref,.ap-title { align-items:center; display:flex; flex:1; flex-wrap:wrap; gap:6px; min-width:0; }
.ord-ref b,.ap-title b { color:#17334f; font-size:13px; }
.ord-product { align-items:center; display:flex; font-size:12px; font-weight:700; margin:10px 0 3px; }
.ord-meta,.ap-product { color:var(--muted); font-size:11px; margin:0 0 10px; }
.ap-product { margin:9px 0 10px; }
.ord-facts,.ap-facts { border-top:1px solid #eef2f6; display:grid; gap:8px; grid-template-columns:repeat(3,1fr); padding-top:9px; }
.ap-facts { grid-template-columns:repeat(2,1fr); }
.ord-facts span,.ap-facts span { color:#7b899b; display:block; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.ord-facts b,.ap-facts b { color:#203e59; display:block; font-size:11px; margin-top:2px; }
.ord-window { align-items:center; background:#f6f9fc; border-radius:7px; display:flex; font-size:11px; gap:10px; justify-content:space-between; margin-top:10px; padding:7px 9px; }
.ord-window.late { background:#fff4f1; color:#a8201a; }
.ord-window b { font-weight:800; }
.ord-reason { color:#7a5900; font-size:11px; line-height:1.45; margin:9px 0 0; }
.ord-reason b { color:#5c4300; }
.ord-foot,.ap-foot { align-items:center; display:flex; justify-content:space-between; margin-top:11px; }
.ord-foot { justify-content:flex-end; }
.ap-foot small { color:#8a97a6; font-size:10px; }
.ap-actions { display:flex; gap:6px; }
.order-bulk-bar { align-items:center; display:flex; flex-wrap:wrap; gap:12px; }
.order-bulk-bar label { align-items:center; display:flex; gap:7px; }
.order-bulk-bar > span { color:var(--muted); font-size:12px; }
.order-bulk-bar button { margin-left:auto; }

/* --- approval queue ------------------------------------------------------- */
.ap-toolbar { align-items:center; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; margin-bottom:15px; padding-bottom:12px; }
.ap-selectall { align-items:center; display:flex; font-size:12px; font-weight:700; gap:8px; }
.ap-queue { display:grid; gap:24px; }
.ap-group-head { align-items:baseline; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:11px; }
.ap-group-head button { margin-left:auto; }
.ap-card.blocked { background:#fff8f7; border-left-color:var(--red); }
.ap-card.approved { border-left-color:var(--green); }
.ap-card.rejected { border-left-color:#9aa7b6; opacity:.8; }
.ap-conflict { background:#fff0ee; border-left:2px solid var(--red); color:#8f2f26; font-size:11px; line-height:1.5; margin:10px 0 0; padding:8px 10px; }
.ap-conflict b { display:block; }
.ap-reco { color:#51677c; font-size:11px; line-height:1.5; margin:9px 0 0; }
.locked-action { background:#eef2f6; border-radius:5px; color:#697c90; font-size:10px; font-weight:800; padding:4px 7px; }

@media (max-width:1100px) { .wf-rail { grid-template-columns:repeat(2,minmax(0,1fr)); } .wf-step + .wf-step::before { display:none; } }
@media (max-width:640px) {
  .wf-rail { grid-template-columns:1fr; }
  .ap-grid,.ord-board.layout-twocol .ord-grid { grid-template-columns:1fr; }
  .order-bulk-bar button { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .wf-step > button,.ord-card,.ap-card { animation:none !important; }
  .wf-step.current .wf-mark { animation:none; }
  .ord-card:hover,.ap-card:hover,.wf-step > button:hover { transform:none; }
}

/* An activate button that cannot proceed stays clickable and says why, rather than
   sitting inert and looking broken. */
.primary.is-blocked { background:#8fa6bd; box-shadow:none; }
.primary.is-blocked:hover { background:#7f97b0; }
.activate-blocker { color:#a8201a; flex-basis:100%; font-size:11px; font-weight:700; margin:6px 0 0; text-align:right; }


/* ===========================================================================
   Visual refresh.

   A shared surface treatment, one modern table style applied everywhere a table
   still earns its place, consistent page rhythm, and motion that reveals content
   as you reach it rather than animating on a timer.
   =========================================================================== */

:root {
  --ring: 0 0 0 1px rgba(17,45,78,.055);
  --lift-1: 0 1px 2px rgba(16,42,72,.05), 0 4px 14px rgba(16,42,72,.055);
  --lift-2: 0 2px 6px rgba(16,42,72,.07), 0 16px 38px rgba(16,42,72,.1);
  --edge: linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  --page-max: 1560px;
}

body { background:
  radial-gradient(1100px 520px at 82% -8%, #e6f1ff 0, transparent 58%),
  radial-gradient(760px 420px at -6% 4%, #eef5fb 0, transparent 60%),
  var(--bg);
}
.workspace { max-width:var(--page-max); }

/* --- surfaces ------------------------------------------------------------- */
.panel {
  background:linear-gradient(180deg,#fff 0%,#fdfefe 100%);
  border-radius:14px; box-shadow:var(--ring), var(--lift-1);
  border-color:#e7eef5;
  padding:22px;
  transition:box-shadow .28s cubic-bezier(.3,.7,.3,1), transform .28s cubic-bezier(.3,.7,.3,1), border-color .28s ease;
}
.panel:hover { box-shadow:var(--ring), var(--lift-2); border-color:#dbe6f0; }
.panel-title { align-items:flex-start; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #eef3f8; }
.panel-title h3 { font-size:15px; letter-spacing:-.2px; }
.panel-title p { font-size:11.5px; max-width:64ch; }
.panel-icon { border-radius:9px; box-shadow:inset 0 0 0 1px rgba(20,90,180,.09); }

/* KPI + tile surfaces pick up the same language */
.kpi, .summary-tile, .metric {
  border-radius:13px; box-shadow:var(--ring), var(--lift-1); border-color:#e7eef5;
  position:relative; overflow:hidden;
}
.kpi::after, .summary-tile::after {
  content:''; position:absolute; inset:0 0 auto; height:1px; background:var(--edge);
}
.kpi strong, .summary-tile strong, .metric strong { font-variant-numeric:tabular-nums; }
.kpi strong.counting { color:#1266c9; }

/* --- page rhythm ---------------------------------------------------------- */
.view.active > .panel,
.view.active > section,
.view.active > article { margin-bottom:20px; }
.view.active > *:last-child { margin-bottom:0; }
.hero-row { margin:26px 0 20px; padding-bottom:20px; position:relative; }
.hero-row::after {
  content:''; position:absolute; left:0; bottom:0; height:2px; width:64px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),#5cc0f0);
}
.compact-hero h2 { font-size:24px; letter-spacing:-.6px; }
.hero-row > div:first-child p { max-width:76ch; }
.dash-section-break { margin:34px 0 16px; }
.two-column { gap:20px; }
.metric-grid, .kpi-grid { gap:16px; }

/* --- one modern table style ----------------------------------------------- */
.table-wrap {
  border:1px solid #e7eef5; border-radius:12px; box-shadow:var(--ring);
  background:#fff; overflow:auto;
}
.table-wrap table { border-collapse:separate; border-spacing:0; }
.table-wrap thead th {
  background:linear-gradient(180deg,#fbfdff,#f4f8fc); backdrop-filter:blur(6px);
  border-bottom:1px solid #e3ebf3; color:#5a6c80; font-size:9.5px; letter-spacing:.08em;
  padding:12px 12px; position:sticky; top:0; z-index:2; white-space:nowrap;
}
.table-wrap tbody td { border-bottom:1px solid #f1f5f9; padding:13px 12px; transition:background .16s ease; }
.table-wrap tbody tr:last-child td { border-bottom:0; }
.table-wrap tbody tr { background:transparent; position:relative; }
.table-wrap tbody tr:nth-child(even) { background:transparent; }
.table-wrap tbody tr:hover { background:linear-gradient(90deg,#f4f9ff,#fbfdff); }
.table-wrap tbody tr:hover td:first-child { box-shadow:inset 3px 0 0 var(--blue); }
.table-wrap td b { color:#17334f; }
.table-wrap td.numeric, .table-wrap th.numeric { font-variant-numeric:tabular-nums; text-align:right; }

/* --- empty states --------------------------------------------------------- */
.empty, .status-clear, .empty-state {
  background:linear-gradient(180deg,#fafcfe,#f5f9fc); border:1px dashed #d9e4ee; border-radius:12px;
  color:#6b7d91; font-size:12px; line-height:1.6; padding:26px 22px; text-align:center;
}
.empty-state { display:grid; gap:5px; justify-items:center; }
.empty-glyph {
  align-items:center; background:#eef4fa; border-radius:12px; color:#8aa2b8; display:flex;
  font-size:20px; height:44px; justify-content:center; margin-bottom:6px; width:44px;
}
.empty-state b { color:#3c5570; font-size:13px; }
.empty-state p { margin:0; max-width:46ch; }
.status-clear { text-align:left; }

/* --- activity timeline ---------------------------------------------------- */
.tl-group + .tl-group { margin-top:18px; }
.tl-day {
  color:#7b8ca0; font-size:9.5px; font-weight:850; letter-spacing:.12em; margin:0 0 10px;
  text-transform:uppercase;
}
.tl-list { display:grid; gap:0; list-style:none; margin:0; padding:0; position:relative; }
.tl-list::before {
  background:linear-gradient(180deg,#e3ecf4,#eef3f8); bottom:16px; content:''; left:13px;
  position:absolute; top:16px; width:2px;
}
.tl-item { display:grid; gap:12px; grid-template-columns:28px minmax(0,1fr); padding:10px 0; position:relative; }
.tl-node {
  align-items:center; background:#fff; border:2px solid #dbe6f0; border-radius:50%; color:#7b8ca0;
  display:flex; font-size:11px; font-weight:900; height:28px; justify-content:center; width:28px;
  z-index:1; transition:transform .2s ease, border-color .2s ease;
}
.tl-item:hover .tl-node { transform:scale(1.12); }
.tl-item.tone-green .tl-node { border-color:#a9dfc2; color:#168447; background:#f2fbf6; }
.tl-item.tone-red .tl-node { border-color:#f3bfba; color:#c0392f; background:#fff5f4; }
.tl-item.tone-amber .tl-node { border-color:#f2d3a4; color:#a35f00; background:#fffaf0; }
.tl-item.tone-blue .tl-node { border-color:#a9caf0; color:#1266c9; background:#f3f9ff; }
.tl-item.tone-violet .tl-node { border-color:#cbbcf0; color:#6c43b6; background:#f8f5ff; }
.tl-body { min-width:0; padding-top:2px; }
.tl-body b { color:#17334f; display:block; font-size:12px; }
.tl-body b em { color:#7b8ca0; font-size:10.5px; font-style:normal; font-weight:700; text-transform:capitalize; }
.tl-body p {
  color:#5a6c80; font-size:11.5px; line-height:1.55; margin:3px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tl-meta { align-items:center; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tl-meta .role-tag { font-size:9px; padding:3px 6px; }
.tl-meta time { color:#8a97a6; font-size:10px; }
.activity-panel .compact-activity { display:block; }

/* --- inputs and controls -------------------------------------------------- */
.dialog input, .dialog select, .dialog textarea,
.queue-controls input, .queue-controls select,
.filter-cluster input, .filter-cluster select,
#recordSearch, #assetHistorySelect, .dashboard-toolbar select {
  border-radius:9px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dialog input:focus, .dialog select:focus, .dialog textarea:focus,
.queue-controls input:focus, .queue-controls select:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color:#8dbaf0; box-shadow:0 0 0 3px rgba(31,127,224,.14); outline:0;
}
.primary, .secondary, .danger { border-radius:9px; }
.primary { box-shadow:0 1px 2px rgba(9,60,120,.18), 0 8px 18px rgba(13,103,207,.2); }
.primary:hover { box-shadow:0 1px 2px rgba(9,60,120,.2), 0 10px 22px rgba(13,103,207,.28); transform:translateY(-1px); }
.primary:active, .secondary:active, .danger:active { transform:translateY(0); }
.secondary:hover { border-color:#8dbaf0; }
button, .text-button { transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .16s ease; }
.text-button:hover { color:#0b4c9e; text-decoration:underline; text-underline-offset:3px; }

/* --- scroll reveal -------------------------------------------------------- */
.has-reveal .panel:not(.revealed),
.has-reveal .kpi-grid:not(.revealed),
.has-reveal .summary-grid:not(.revealed),
.has-reveal .workflow-wrap:not(.revealed),
.has-reveal .ord-group:not(.revealed),
.has-reveal .ap-group:not(.revealed),
.has-reveal .three-column:not(.revealed),
.has-reveal .scheduler-metrics:not(.revealed),
.has-reveal .metric-grid:not(.revealed),
.has-reveal .alert-stack:not(.revealed) { opacity:0; transform:translateY(16px); }
.has-reveal .revealed {
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--reveal-i,0) * 55ms);
}
/* the entrance animations on cards already handle their own reveal */
.has-reveal .revealed .ord-card,
.has-reveal .revealed .ap-card { animation-play-state:running; }

/* --- scrollbars ----------------------------------------------------------- */
.table-wrap::-webkit-scrollbar, .scheduler-gantt::-webkit-scrollbar, .asset-history::-webkit-scrollbar,
.notif-list::-webkit-scrollbar { height:9px; width:9px; }
.table-wrap::-webkit-scrollbar-thumb, .scheduler-gantt::-webkit-scrollbar-thumb,
.asset-history::-webkit-scrollbar-thumb, .notif-list::-webkit-scrollbar-thumb {
  background:#cfdbe7; border:2px solid #fff; border-radius:99px;
}
.table-wrap::-webkit-scrollbar-thumb:hover, .scheduler-gantt::-webkit-scrollbar-thumb:hover { background:#aec3d6; }
.table-wrap::-webkit-scrollbar-track, .scheduler-gantt::-webkit-scrollbar-track { background:transparent; }

/* --- topbar --------------------------------------------------------------- */
.topbar { background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4); }
.topbar h1 { font-size:21px; letter-spacing:-.45px; }
.icon-button { border-radius:9px; transition:background .18s ease, border-color .18s ease, transform .16s ease; }
.icon-button:hover { background:#f3f8fd; border-color:#c7dcf3; }

@media (max-width:900px) {
  .panel { padding:17px; border-radius:12px; }
  .hero-row { margin:20px 0 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .panel, .primary, .tl-node { transition:none !important; }
  .panel:hover, .primary:hover { transform:none; }
  .has-reveal .panel, .has-reveal .kpi-grid, .has-reveal .summary-grid, .has-reveal .workflow-wrap,
  .has-reveal .ord-group, .has-reveal .ap-group, .has-reveal .three-column,
  .has-reveal .scheduler-metrics, .has-reveal .metric-grid, .has-reveal .alert-stack {
    opacity:1 !important; transform:none !important;
  }
}

/* ===========================================================================
   One entrance system.

   Panels are revealed on scroll; the older keyframe entrances on panels are
   retired so the two do not fight. Card-level entrances stay, but none of them
   keep `fill-mode: both` any more: holding the opacity:0 start frame means a
   suppressed animation leaves the element invisible forever, which is a far
   worse outcome than simply appearing without the flourish.
   =========================================================================== */
#view-dashboard .panel,
.view.active > .panel,
.view.active > section > .panel,
.view.active > article.panel { animation:none !important; }

.ord-card, .ap-card, .deferral-card, .impact-card, .asset-event,
.alert, .wf-step > button, .nav-item, .kpi, .summary-tile, .metric {
  animation-fill-mode:none !important;
}

/* Entrance keyframes redefined to move rather than fade. An animation that starts at
   opacity:0 hides its element for as long as it fails to advance — these now animate
   transform only, so the worst case is a missing flourish, never missing content.
   The opacity fade lives solely in the scroll-reveal system, which has a JS failsafe. */
@keyframes cardIn   { from { transform:translateY(9px) scale(.995); } to { transform:none; } }
@keyframes alertIn  { from { transform:translateY(-6px); }           to { transform:none; } }
@keyframes wfIn     { from { transform:translateY(8px); }            to { transform:none; } }
@keyframes navIn    { from { transform:translateX(-9px); }           to { transform:none; } }
@keyframes dashFadeUp { from { transform:translateY(10px); }         to { transform:none; } }
@keyframes badgePop { from { transform:scale(.55); }                 to { transform:scale(1); } }

/* ===========================================================================
   Account access: sign-in help, password change, admin user directory.
   =========================================================================== */

/* login: role summary replaces the vanity counters */
.login-visual-roles { display:grid; gap:11px; list-style:none; margin:24px 0 0; padding:0; }
.login-visual-roles li { align-items:flex-start; display:flex; gap:11px; }
.lr-glyph {
  align-items:center; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:9px; color:#8fd0f2; display:flex; flex:none; font-size:14px; font-style:normal;
  height:32px; justify-content:center; width:32px;
}
.login-visual-roles b { color:#fff; display:block; font-size:12.5px; }
.login-visual-roles span { color:#a9c2dc; display:block; font-size:11px; line-height:1.5; margin-top:2px; }
.login-visual-foot { color:#8ba5c0; font-size:10.5px; font-style:italic; margin:16px 0 0; }

.login-help { align-items:center; display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.login-help .text-button { font-size:12px; font-weight:800; padding:0; }
.login-help-sep { color:#b9c6d4; }
.login-help-note { color:#7b8ca0; font-size:11px; }

/* temporary password hand-over */
.temp-password {
  background:#0d2b4d; border-radius:11px; color:#eaf4ff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:23px; font-weight:700; letter-spacing:.14em; margin:14px 0 4px; padding:18px; text-align:center;
  user-select:all;
}
.dialog-body { display:grid; gap:14px; padding:22px; }

/* admin directory */
.reset-queue { display:grid; gap:9px; margin-bottom:16px; }
.reset-queue-head { align-items:baseline; display:flex; gap:9px; justify-content:space-between; }
.reset-queue-head b { color:#17334f; font-size:12px; }
.reset-queue-head span { color:var(--muted); font-size:11px; }
.reset-card { background:#fffaf1; border:1px solid #f0d3a8; border-left:3px solid var(--amber); border-radius:9px; padding:12px; }
.reset-card-head { align-items:flex-start; display:flex; gap:10px; justify-content:space-between; }
.reset-card-head b { color:#17334f; display:block; font-size:12px; }
.reset-card-head small { color:var(--muted); display:block; font-size:10.5px; margin-top:2px; }
.reset-note { background:#fff; border:1px solid #efe2cd; border-radius:7px; color:#5a6c80; font-size:11px; line-height:1.5; margin:9px 0 0; padding:8px 10px; }
.reset-card-actions { display:flex; gap:7px; justify-content:flex-end; margin-top:10px; }

.accounts-list { display:grid; gap:8px; }
.account-row {
  align-items:center; border:1px solid var(--line); border-radius:10px; display:grid; gap:12px;
  grid-template-columns:34px minmax(0,1.3fr) minmax(0,1fr) auto; padding:11px 13px;
  transition:border-color .18s ease, background .18s ease;
}
.account-row:hover { background:#f9fcff; border-color:#c9dcef; }
.account-row.inactive { opacity:.62; }
.account-avatar {
  align-items:center; background:#e5f0ff; border:1px solid #b9d3f8; border-radius:50%; color:#124c9b;
  display:flex; font-weight:800; height:32px; justify-content:center; width:32px;
}
.account-identity b { color:#17334f; display:block; font-size:12.5px; }
.account-identity b em { color:#7b8ca0; font-size:10.5px; font-style:normal; font-weight:600; }
.account-identity small { color:var(--muted); display:block; font-size:10.5px; margin-top:2px; }
.account-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.account-meta small { color:#8a97a6; font-size:10px; }
.account-flag { border-radius:5px; font-size:9px; font-weight:850; letter-spacing:.04em; padding:3px 7px; text-transform:uppercase; }
.account-flag.warn { background:#ffeed6; color:#9a4c00; }
.account-flag.off { background:#eef2f6; color:#697c90; }

@media (max-width:900px) {
  .account-row { grid-template-columns:34px minmax(0,1fr); }
  .account-meta, .account-row > .mini-button { grid-column:2; justify-self:start; }
  .login-visual-roles { gap:9px; }
}

/* ===========================================================================
   Sidebar header fit.

   "Planning & Execution" was set nowrap inside an overflow:hidden brand block
   that also had to share its row with the collapse toggle, so the word was cut
   mid-character. The toggle now floats at the sidebar edge instead of consuming
   layout width, and the subtitle is allowed to use the space it needs.
   =========================================================================== */
.sidebar { position:relative; }
.sidebar .brand { align-items:center; gap:11px; padding-right:30px; }
.brand-copy { min-width:0; overflow:visible; }
.brand-copy b { font-size:14.5px; line-height:1.15; white-space:nowrap; }
.brand-copy span {
  display:block; font-size:9px; letter-spacing:.06em; line-height:1.3;
  white-space:normal; word-break:normal;
}
.sidebar .rail-toggle {
  position:absolute; top:26px; right:8px; z-index:4;
  height:26px; width:26px; padding:0; display:grid; place-items:center;
}
.sidebar.rail .brand { padding-right:0; }
@media (max-width:1050px) {
  .sidebar .rail-toggle { position:static; }
  .sidebar .brand { padding-right:0; }
}

/* The password action needs to look like an action, not a caption. */
.account-menu-btn {
  align-items:center; background:#fff; border:1px solid #cfe0f2; border-radius:8px; color:#12558f;
  cursor:pointer; display:inline-flex; font:inherit; font-size:11.5px; font-weight:800; gap:6px;
  padding:7px 11px; transition:background .16s ease, border-color .16s ease, transform .14s ease;
}
.account-menu-btn:hover { background:#eff6fd; border-color:#a9caf0; transform:translateY(-1px); }

/* ===========================================================================
   Review & activate: decisions, risk acknowledgement, plan difference.
   =========================================================================== */
.decision-panel { border-left:3px solid var(--red); }
.decision-panel:has(#approvalQueue:empty) { display:none; }
.decision-actions { align-items:center; display:flex; flex-wrap:wrap; gap:8px; }
.decision-actions .subtle { font-size:11px; }
.ap-selectall { align-items:center; color:#52667c; display:inline-flex; font-size:11.5px; font-weight:750; gap:7px; margin-bottom:12px; }

.review-banner.blocked { background:#fff6f5; border-left-color:var(--red); }
.review-banner.blocked > span { background:#ffe0dd; color:#a8201a; }

.risk-list { display:grid; gap:7px; }
.risk-row {
  align-items:center; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:9px;
  display:grid; gap:12px; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;
  padding:10px 13px; transition:background .16s ease, border-color .16s ease;
}
.risk-row:hover { background:#fffdf7; border-color:#ecd6ae; }
.risk-row.high { border-left-color:var(--red); }
.risk-id b { color:#17334f; font-size:12.5px; }
.risk-product { color:#17334f; font-size:12px; min-width:0; }
.risk-product small { color:var(--muted); display:block; font-size:10.5px; margin-top:2px; }
.risk-times span { color:#8a97a6; display:block; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; }
.risk-times b { color:#203e59; font-size:11.5px; }
.risk-late { justify-self:end; }

@media (max-width:1000px) {
  .risk-row { grid-template-columns:minmax(0,1fr) auto; }
  .risk-times, .risk-late { grid-column:span 1; }
  .decision-actions { width:100%; }
}

/* ===========================================================================
   Auto scheduler: line loading and the reasoning behind the plan.
   =========================================================================== */
.alert.ok { background:#f4fbf7; border-color:#cfe7da; border-left-color:var(--green); }
.alert.ok .alert-icon { background:#e5f7ed; color:#168447; }

.line-load { display:grid; gap:14px; }
.load-row { border:1px solid var(--line); border-radius:10px; padding:13px; transition:border-color .18s ease, background .18s ease; }
.load-row:hover { background:#fbfdff; border-color:#c9dcef; }
.load-head { align-items:center; display:flex; gap:10px; justify-content:space-between; }
.load-head b { align-items:center; color:#17334f; display:flex; font-size:12.5px; gap:7px; }
.load-head small { color:var(--muted); display:block; font-size:10.5px; margin:3px 0 0 15px; }
.load-pct { color:#1a6b3f; font-size:16px; font-variant-numeric:tabular-nums; }
.load-pct.warm { color:#a35f00; }
.load-pct.hot { color:#c0392f; }
.load-bar { background:#eef2f7; border-radius:99px; display:flex; height:9px; margin:11px 0 8px; overflow:hidden; }
.load-bar .seg { display:block; height:100%; transition:width .5s cubic-bezier(.3,.7,.3,1); }
.seg.production { background:linear-gradient(90deg,#1b79ca,#3d9bea); }
.seg.changeover { background:#7554c8; }

.load-legend { color:#6b7d91; display:flex; flex-wrap:wrap; font-size:10px; gap:12px; }
.load-legend i.dot { border-radius:2px; display:inline-block; height:8px; margin-right:5px; width:8px; }
.load-legend .dot.production { background:#1b79ca; }
.load-legend .dot.changeover { background:#7554c8; }
.load-legend 
.load-idle { color:#93a2b2; margin-left:auto; }

.reasoning-list { display:grid; gap:2px; }
.reason-row { display:grid; gap:11px; grid-template-columns:26px minmax(0,1fr); padding:11px 0; border-bottom:1px solid #eef3f8; }
.reason-row:last-child { border-bottom:0; }
.reason-mark { color:#7ba6d4; font-size:15px; line-height:1.1; }
.reason-row b { color:#17334f; display:block; font-size:12px; }
.reason-row p { color:#5a6c80; font-size:11.5px; line-height:1.55; margin:3px 0 0; }
.scheduler-toolbar select { background:#fff; border:1px solid #c3d3e2; border-radius:7px; font:inherit; font-size:12px; font-weight:700; padding:7px 9px; }

/* ===========================================================================
   Changeovers: run order, transition cost, configured matrix.
   =========================================================================== */
.sequence-lines { display:grid; gap:13px; }
.seq-line { border:1px solid var(--line); border-radius:10px; padding:13px; transition:border-color .18s ease, background .18s ease; }
.seq-line:hover { background:#fbfdff; border-color:#c9dcef; }
.seq-line-head { align-items:center; display:flex; gap:10px; justify-content:space-between; margin-bottom:11px; }
.seq-line-head b { color:#17334f; font-size:12.5px; }
.seq-line-head small { color:var(--muted); display:block; font-size:10.5px; margin-top:2px; }
.seq-cost { background:#fff1dc; border-radius:6px; color:#9a4c00; font-size:10.5px; font-weight:800; padding:4px 9px; white-space:nowrap; }
.seq-cost.clean { background:#e5f7ed; color:#168447; }
.seq-track { align-items:stretch; display:flex; flex-wrap:wrap; gap:6px; }
.seq-order {
  background:#f4f8fc; border:1px solid #dbe6f0; border-left:3px solid #7ba6d4; border-radius:7px;
  display:grid; padding:7px 10px; position:relative; transition:transform .16s ease, box-shadow .16s ease;
}
.seq-order:hover { box-shadow:0 4px 12px rgba(20,60,110,.13); transform:translateY(-2px); }
.seq-order b { color:#17334f; font-size:11.5px; }
.seq-order small { color:#6b7d91; font-size:9.5px; margin-top:2px; }
.seq-order.crackers { border-left-color:#216ee5; } .seq-order.cream { border-left-color:#9259d9; }
.seq-order.chocolate { border-left-color:#80461b; } .seq-order.sweet { border-left-color:#f59f00; }
.seq-order.general { border-left-color:#18a873; }
.seq-change {
  align-items:center; background:repeating-linear-gradient(135deg,#fff6e8 0,#fff6e8 5px,#fdefd8 5px,#fdefd8 10px);
  border:1px dashed #e6c489; border-radius:7px; color:#9a4c00; display:flex; font-size:10px; font-weight:800; gap:4px; padding:0 8px;
}
.seq-change i { font-style:normal; }

.transition-list { display:grid; gap:8px; }
.transition-row {
  align-items:center; border:1px solid var(--line); border-radius:9px; display:grid; gap:14px;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 110px; padding:10px 13px;
  transition:border-color .18s ease, background .18s ease;
}
.transition-row:hover { background:#fffdf7; border-color:#ecd6ae; }
.transition-pair { align-items:center; display:flex; flex-wrap:wrap; gap:7px; }
.transition-pair i { color:#9aa7b6; font-style:normal; }
.fam-chip { border-radius:6px; font-size:10.5px; font-weight:800; padding:4px 8px; background:#eef2f6; color:#52667c; }
.fam-chip.crackers { background:#e7f0ff; color:#1a5fa8; } .fam-chip.cream { background:#f1eaff; color:#6942bb; }
.fam-chip.chocolate { background:#f4e4d9; color:#74421f; } .fam-chip.sweet { background:#fff1dc; color:#9a5b00; }
.fam-chip.general { background:#e4f6ee; color:#177a52; }
.transition-where b { color:#17334f; display:block; font-size:11.5px; }
.transition-where small { color:var(--muted); display:block; font-size:10px; margin-top:2px; }
.transition-cost { position:relative; text-align:right; }
.transition-cost b { color:#9a4c00; font-size:13px; font-variant-numeric:tabular-nums; }
.transition-cost i { background:linear-gradient(90deg,#f0b357,#df841a); border-radius:99px; bottom:-5px; display:block;
  height:4px; position:absolute; right:0; transition:width .55s cubic-bezier(.3,.7,.3,1); }

.matrix td { transition:transform .16s ease, box-shadow .16s ease; }
.matrix td.heat-self { background:#f7f9fb; color:#c2ccd6; }
.matrix td.in-use { box-shadow:inset 0 0 0 2px #1b79ca; font-weight:900; }
.matrix td:hover { transform:scale(1.12); z-index:1; }
.matrix-note { color:var(--muted); font-size:10.5px; margin:10px 0 0; }

@media (max-width:900px) {
  .transition-row { grid-template-columns:minmax(0,1fr); }
  .transition-cost { text-align:left; }
}

/* A finished pipeline reads as finished, not as another instruction. */
.wf-next.settled { color:#1a6b3f; }
.wf-next-tag.done { background:#e5f7ed; color:#168447; }

/* ===========================================================================
   Fault requests: the channel from the floor to maintenance, and replies back.
   =========================================================================== */
.account-menu-btn.fault-btn { background:#fff6f5; border-color:#f3c9c3; color:#a8201a; }
.account-menu-btn.fault-btn:hover { background:#ffeeeb; border-color:#e9a89f; }
@keyframes jobPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(213,61,74,0); }
  50% { box-shadow:0 0 0 4px rgba(213,61,74,.09); }
}
@keyframes jobStep { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.stop-check { align-items:center; }

@media (max-width:760px) {

}
@media (prefers-reduced-motion:reduce) {

}

/* Top navigation: the sidebar was removed so the Gantt gets the full window width by
   default; every section it used to list now lives in a dropdown anchored above the chart,
   using the same .nav/.nav-item/.nav-group markup and JS (changeView, applyRoleNavigation,
   role-hidden, badges) -- only the container and colour scheme changed, from an always-visible
   dark rail to a closed-by-default light dropdown. */
.topbar-left { align-items:center; display:flex; gap:16px; min-width:0; }
.sections-nav { position:relative; }
.sections-trigger { align-items:center; background:#fff; border:1px solid var(--line); border-radius:9px; color:#1c3a57; cursor:pointer; display:flex; font:inherit; font-size:13px; font-weight:750; gap:8px; padding:9px 12px; white-space:nowrap; }
.sections-trigger:hover { background:var(--blue-light); }
.sections-trigger .nav-glyph { color:#1c3a57; font-size:15px; width:auto; }
.sections-caret { color:#7d90a6; font-size:10px; }
.sections-menu { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px rgba(14,43,76,.18); left:0; margin-top:8px; max-height:75vh; overflow-y:auto; padding:14px 10px; position:absolute; top:100%; width:264px; z-index:20; }
.sections-menu .plant-chip { color:#4d6379; margin:0 6px 14px; }
.sections-menu .plant-chip i { background:#4dcb8c; box-shadow:0 0 0 4px rgba(77,203,140,.15); }
.sections-menu .sidebar-label { color:#8496ab; }
.sections-menu .nav-group + .nav-group { margin-top:14px; }
.sections-menu .nav-item { color:#1c3a57; }
.sections-menu .nav-glyph { color:#5c7492; }
.sections-menu .nav-item:hover { background:var(--blue-light); }
.sections-menu .nav-item.active { background:linear-gradient(90deg,#0c70dd,#075dbb); border-color:transparent; box-shadow:0 6px 15px rgba(13,103,207,.18); }
.sections-menu .nav-item.active .nav-glyph { color:#fff; }
.user-control { position:relative; }
.user-control-trigger { align-items:center; background:none; border:1px solid transparent; border-radius:9px; cursor:pointer; display:grid; font:inherit; gap:8px; grid-template-columns:34px auto auto; padding:5px 8px 5px 5px; text-align:left; }
.user-control-trigger .sections-caret { color:#7d90a6; }
.user-control-trigger:hover { background:var(--blue-light); }
.user-menu { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 50px rgba(14,43,76,.18); margin-top:6px; padding:6px; position:absolute; right:0; top:100%; width:150px; z-index:20; }
.user-menu button { background:none; border:0; border-radius:7px; color:#a8201a; cursor:pointer; font:inherit; font-weight:700; padding:9px 10px; text-align:left; width:100%; }
.user-menu button:hover { background:#fdf0ef; }
@media (max-width:760px) {
  .topbar-left { flex-wrap:wrap; }
  .sections-menu { width:min(264px,calc(100vw - 32px)); }
}

/* ============================================================================
   Gantt tooltip + drag readout
   One element (#ganttTooltip) serves both: the hover/focus detail panel for a bar, and the
   live landing readout while a bar is being dragged. Fixed positioning keeps it out of the
   Gantt's own scroll container, so it is never clipped by the timeline's overflow.
   ============================================================================ */
.gantt-tooltip { position:fixed; z-index:60; width:288px; max-width:calc(100vw - 16px); background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 18px 44px rgba(14,43,76,.2); padding:0; overflow:hidden; pointer-events:none; font-size:12px; }
.gantt-tooltip-head { padding:9px 12px; background:var(--blue-light); border-bottom:1px solid var(--line); display:grid; gap:2px; }
.gantt-tooltip-head b { font-size:13px; font-weight:800; color:var(--ink); }
.gantt-tooltip-head span { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.gantt-tooltip-head.changeover { background:#f3edff; }
.gantt-tooltip-head.conflict { background:#ffe9ea; }
.gantt-tooltip-head.conflict span { color:#a8201a; }
.gantt-tooltip-head.clear { background:#e6f7ee; }
.gantt-tooltip-head.clear span { color:#116a41; }
.gantt-tooltip-body { display:grid; gap:5px; margin:0; padding:10px 12px; }
.gantt-tooltip-body > div { display:grid; grid-template-columns:88px 1fr; gap:8px; align-items:baseline; }
.gantt-tooltip-body dt { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.gantt-tooltip-body dd { margin:0; color:var(--ink); font-weight:600; }
.gantt-tooltip-body dd.late, .gantt-tooltip-body dd.risk-high { color:#a8201a; font-weight:800; }
.gantt-tooltip-body dd.risk-medium { color:#8a5300; font-weight:800; }
.gantt-tooltip-body dd.moved { color:var(--blue); font-weight:800; }
.gantt-tooltip-conflicts { margin:0; padding:0 12px 10px 28px; display:grid; gap:4px; color:#a8201a; font-weight:600; }
.gantt-tooltip-note { margin:0; padding:0 12px 9px; color:var(--muted); font-size:11px; }
.gantt-tooltip-hint { margin:0; padding:8px 12px; border-top:1px solid var(--line); background:#fafbfd; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }

/* A bar is focusable, so the keyboard route needs a ring the mouse route does not draw.
   :focus-visible only -- a click already opens the drawer and does not want an outline. */
.planner-block:focus-visible { outline:2px solid var(--ink); outline-offset:2px; z-index:6; }

@media (prefers-reduced-motion:reduce) {
  .gantt-tooltip { transition:none; }
}


/* ---------------------------------------------------------------------------
   Baseline view modes

   The frozen plan is drawn as a muted record, never as live work: no order
   colour, no shadow, dashed edges. That distinction has to survive a glance --
   a planner comparing two plans must never mistake the frozen one for the one
   the plant is actually running.
   --------------------------------------------------------------------------- */

.baseline-bar {
  align-items:center; background:#f4f8fc; border:1px solid var(--line, #e3eaf2);
  border-radius:8px; display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 10px; padding:9px 13px;
}
.baseline-bar.hidden { display:none; }
.baseline-bar.has-drift { background:#fdf6ec; border-color:#f0dcc0; }
.baseline-bar b { font-size:12px; }
.baseline-tag {
  background:var(--navy, #071f3e); border-radius:5px; color:#fff; font-size:10px;
  font-weight:800; letter-spacing:.07em; padding:3px 8px; text-transform:uppercase;
}
.baseline-frozen, .baseline-facts { color:var(--muted, #66778c); font-size:11px; }
.baseline-facts { border-left:1px solid var(--line, #e3eaf2); padding-left:10px; }
.baseline-bar .mini-button { margin-left:auto; }

/* The rail of frozen positions, sitting under the live bars rather than behind
   them: an overlay at the same height would be read as a second job. */
.baseline-ghost {
  background:repeating-linear-gradient(135deg, #9fb3c8 0 4px, #b9c8d8 4px 8px);
  border-radius:3px; bottom:4px; height:7px; opacity:.85; position:absolute;
}
.baseline-ghost.changeover {
  background:repeating-linear-gradient(135deg, #b9a7d4 0 4px, #cfc2e4 4px 8px);
}
.live-track.has-ghosts .planner-block { bottom:16px; }

/* Baseline mode: full-height bars, but unmistakably a record. */
.planner-block.baseline-block {
  background:#eef3f8; border:1px dashed #9fb3c8; box-shadow:none;
  color:#4a5c70; cursor:default;
}
.planner-block.baseline-block.changeover { background:#f3effa; border-color:#b9a7d4; }
.planner-block.baseline-block b { font-weight:700; }

.mode-segmented button[disabled] { cursor:not-allowed; opacity:.45; }

@media (max-width:650px) {
  .baseline-bar { gap:6px; padding:8px 10px; }
  .baseline-facts { border-left:0; padding-left:0; }
  .baseline-bar .mini-button { margin-left:0; }
}

/* Matches .baseline-ghost, so the legend swatch is the thing on the chart rather than an
   approximation of it. Only shown in the modes that actually draw a baseline. */
.legend.baseline {
  background:repeating-linear-gradient(135deg, #9fb3c8 0 3px, #b9c8d8 3px 6px);
  border-radius:2px;
}
.legend-baseline.hidden { display:none; }

/* ---------------------------------------------------------------------------
   Heuristic tournament table
   --------------------------------------------------------------------------- */

#tournamentTable th.num, #tournamentTable td.num {
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
#tournamentTable tr.is-winner { background:#eef7f1; }
#tournamentTable tr.is-winner td { font-weight:650; }
.winner-pill {
  background:#168b56; border-radius:4px; color:#fff; font-size:9px; font-style:normal;
  font-weight:800; letter-spacing:.06em; margin-left:8px; padding:2px 6px;
  text-transform:uppercase; vertical-align:middle;
}
#tournamentPanel.hidden { display:none; }
/* Six numeric columns do not fit the narrow half of a 2.1fr/1fr grid -- `.wide` only clears
   min-width, it does not span. Full width, so the scores stay comparable at a glance. */
#tournamentPanel { grid-column:1 / -1; }

/* ---------------------------------------------------------------------------
   Reports

   A catalogue rail beside one result pane. The rail is the question list; the
   pane answers exactly one question at a time, so there is never ambiguity
   about which filters produced which table.
   --------------------------------------------------------------------------- */

.report-layout {
  align-items:start; display:grid; gap:20px;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr);
}
.report-catalogue { max-height:calc(100vh - 210px); overflow-y:auto; position:sticky; top:96px; }
.report-list { display:grid; gap:16px; padding:0 4px 4px; }
.report-group { display:grid; gap:4px; }
.report-group .sidebar-label { color:#5b7590; margin:0 0 2px; }
.report-choice {
  background:none; border:1px solid transparent; border-radius:8px; cursor:pointer;
  display:grid; font:inherit; gap:2px; padding:9px 10px; text-align:left; width:100%;
}
.report-choice b { color:var(--ink,#132238); font-size:12.5px; font-weight:650; }
.report-choice span { color:var(--muted,#66778c); font-size:11px; line-height:1.4; }
.report-choice:hover { background:#f1f6fb; }
.report-choice.active { background:#eaf3ff; border-color:#bcd9f7; }
.report-choice.active b { color:#12558a; }

.report-filters {
  align-items:end; border-bottom:1px solid var(--line,#e3eaf2); display:flex;
  flex-wrap:wrap; gap:12px; margin:0 0 14px; padding:0 0 14px;
}
.report-filters label {
  color:#536176; display:grid; font-size:11px; font-weight:700; gap:5px;
}
.report-filters label[hidden] { display:none; }
.report-filters input, .report-filters select {
  background:#fff; border:1px solid #d8e0ea; border-radius:7px; color:var(--ink,#132238);
  font:inherit; font-size:13px; padding:8px 9px;
}
.report-filters .primary { padding:9px 16px; }
.report-meta { color:var(--muted,#66778c); font-size:11px; margin:0 0 10px; }
.report-table-wrap { max-height:min(62vh, 620px); overflow:auto; }
#reportTable td, #reportTable th { white-space:nowrap; }
#reportTable td:last-child { white-space:normal; }
#reportExport[hidden] { display:none; }

@media (max-width:1050px) {
  .report-layout { grid-template-columns:1fr; }
  .report-catalogue { max-height:none; position:static; }
}

/* Labour load in the Gantt resource column. Hours and crew only -- see report_labour_load()
   in backend/reports.py for why no currency appears anywhere near this. */
.line-labour { align-items:baseline; display:flex; gap:5px; margin-top:3px; }
.line-labour b { color:var(--ink,#132238); font-size:11px; font-weight:750; }
.line-labour small { color:var(--muted,#66778c); font-size:9.5px; white-space:nowrap; }

/* The resource column carries four facts now (line, status, utilisation, labour), so the
   label must not wrap "Baking Line 1" onto two rows and shove the rest out of alignment. */
.live-line-identity b { white-space:nowrap; }

/* ==========================================================================
   Accessibility and touch: measured fixes
   ==========================================================================
   Added after auditing the running app at 390 / 768 / 1024 / 1440 px. The layout
   itself held up -- no horizontal scroll and no overflowing boxes at any width --
   so nothing here changes the visual design. These address the four defects the
   audit did find: hit areas below the WCAG 2.5.8 minimum, an unreachable main
   region for keyboard users, focus rings that were inconsistent across controls,
   and motion that ignored a reduced-motion preference in a few places.
   ========================================================================== */

/* --- Skip link -----------------------------------------------------------
   The section menu holds nine navigation buttons, so reaching the Gantt by
   keyboard meant tabbing through all of them on every page load. Visually
   hidden until focused, which is the one time it is useful. */
.skip-link {
  background:#0b3d7a; border-radius:0 0 8px 0; color:#fff; font-size:13px;
  font-weight:700; left:0; padding:10px 16px; position:absolute; top:-100px;
  text-decoration:none; transition:top .15s ease; z-index:9999;
}
.skip-link:focus { top:0; outline:3px solid #ffd24a; outline-offset:2px; }

/* --- Hit areas -----------------------------------------------------------
   WCAG 2.5.8 asks for 24x24 CSS px minimum; 44px is the comfortable touch
   target. The order checkboxes measured 13x13 and 17x17, which is a hard thing
   to hit on a phone and an easy thing to mis-hit on a laptop trackpad.

   The box itself is only grown to 20px -- a checkbox drawn at 44px looks wrong
   next to 13px type -- and the rest of the target comes from padding on the
   label, so the clickable area reaches the minimum without the control looking
   oversized. */
.ap-check { align-items:center; justify-content:center; min-height:32px; min-width:32px; padding:6px; }
.ap-check input { height:20px; width:20px; }
.order-bulk-bar label { align-items:center; display:inline-flex; gap:8px; min-height:32px; padding:4px 2px; }
#orderSelectAll { height:20px; width:20px; accent-color:#1266c9; cursor:pointer; }

/* Selects and small text buttons measured 19-20px tall. */
.scheduling-rules select,
#weeklyPlanWeekSelect { min-height:32px; }
.text-button { min-height:32px; padding-block:6px; }

@media (pointer:coarse) {
  /* On a touch device there is no hover to recover from a near-miss, so take
     every interactive control to the full 44px recommendation. */
  .ap-check { min-height:44px; min-width:44px; }
  button, .mini-button, select, input[type="checkbox"] + span, .report-link { min-height:44px; }
  .mini-button, .layout-btn { padding-inline:14px; }
}

/* --- Focus visibility ----------------------------------------------------
   A single, high-contrast ring on everything focusable. Keyboard-only via
   :focus-visible, so a mouse click does not leave a ring behind. */
:where(button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline:3px solid #1266c9; outline-offset:2px; border-radius:4px;
}
.planner-block:focus-visible, [data-schedule-block]:focus-visible {
  outline:3px solid #0b3d7a; outline-offset:1px;
}

/* --- Reduced motion ------------------------------------------------------
   The app already honours this in eight places; this is the catch-all for any
   transition or animation added later without remembering to. Scroll behaviour
   included: a smooth scroll can trigger vestibular symptoms. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- Forced colours (Windows high-contrast) ------------------------------
   Status is carried by background colour on the Gantt bars and the risk tags.
   High-contrast mode replaces those backgrounds, so the distinction has to come
   back as a border or the whole chart flattens into one colour. */
@media (forced-colors:active) {
  .planner-block, [data-schedule-block], .risk-tag, .pill, .metric { border:1px solid currentColor; }
  .skip-link:focus { outline:3px solid currentColor; }
}

/* ==========================================================================
   Cross-device rendering
   ==========================================================================
   Measured on emulated Galaxy S20 / iPhone SE / iPhone 14 Pro (portrait and
   landscape) / Pixel 7 / iPad Mini / iPad Pro / Windows laptop, with real device
   metrics, DPR and touch. The layout itself passed everywhere -- no horizontal
   scroll and no overflowing element on any device or view -- so nothing here
   changes the desktop design. It fixes what the audit did find: 112 form
   controls that make iOS Safari zoom the page, 472 text nodes too small to read
   on a phone, a viewport height iOS measures differently, and content sitting
   under the notch.
   ========================================================================== */

/* --- Platform behaviour --------------------------------------------------- */
html {
  /* iOS Safari inflates text when a phone is rotated to landscape, which breaks
     a layout tuned in portrait. 100% keeps the authored sizes. */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
body {
  /* The grey flash Android and iOS paint over a tapped element. This app has its
     own active and focus-visible styling, so the default is noise. */
  -webkit-tap-highlight-color:transparent;
}

/* Stop a scroll inside a pane from chaining to the page and firing Chrome's
   pull-to-refresh -- easy to trigger by accident while panning a Gantt. */
.scheduler-gantt, .dashboard-gantt, .table-wrap, .sticky-table,
.report-table-wrap, .report-catalogue, .notifications-panel,
.schedule-detail-drawer, .sections-menu { overscroll-behavior:contain; }

/* The Gantt is panned by finger. Declaring the axes lets the browser start the
   pan on the compositor instead of waiting to see whether a handler calls
   preventDefault -- the difference between a smooth drag and a stuttering one. */
.scheduler-gantt, .dashboard-gantt { touch-action:pan-x pan-y; }

/* --- Viewport height ------------------------------------------------------
   100vh on iOS Safari is the height with the address bar hidden, so a 100vh box
   is taller than what is actually visible and its bottom is cut off until you
   scroll. dvh is the visible height and follows the bar as it hides. vh first,
   so a browser without dvh still gets something sensible. */
.view.active.gantt-only { height:calc(100vh - 140px); height:calc(100dvh - 140px); }
.report-catalogue { max-height:calc(100vh - 210px); max-height:calc(100dvh - 210px); }

/* --- Safe areas -----------------------------------------------------------
   With viewport-fit=cover the page paints under the notch and the home
   indicator. These put content back inside them. Landscape matters most: the
   notch takes a bite out of one side, and the topbar would sit under it. */
.app-shell { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.workspace { padding-bottom:calc(48px + env(safe-area-inset-bottom)); }
.topbar { padding-top:env(safe-area-inset-top); }
.login-screen { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.schedule-detail-drawer {
  padding-bottom:calc(21px + env(safe-area-inset-bottom));
  padding-right:calc(21px + env(safe-area-inset-right));
}

/* ==========================================================================
   Touch devices (phones and tablets, any OS)
   ========================================================================== */
@media (pointer:coarse) {
  /* THE iOS ZOOM FIX.
     Safari zooms the whole page when a form control with a font smaller than
     16px receives focus, and does not zoom back out -- the user is left pinching
     to recover on every filter. 16px is a threshold, not a preference. Scoped to
     coarse pointers so the compact 11-13px controls are untouched on desktop. */
  input, select, textarea, button, .mini-button, .secondary, .primary {
    font-size:16px;
  }
  input[type="checkbox"], input[type="radio"] { font-size:inherit; }

  /* The controls grow with the font, so give them room rather than letting the
     text crowd the border. */
  input, select, textarea { min-height:44px; padding:10px 12px; }
  .order-filters select, .order-filters input,
  .filter-cluster select, .filter-cluster input,
  .intelligence-form input, .report-filters select, .report-filters input {
    font-size:16px; min-height:44px; width:100%;
  }
  .filter-cluster, .order-filters { display:grid; gap:8px; max-width:none; width:100%; }

  /* Readability floor. 8-9px is legible on a large monitor at arm's length and
     is not on a phone held in one hand. These are the status badges, table
     numerics and captions the audit flagged. */
  small, .metric small, .subtle, .muted small { font-size:12px; }
  .confirmed-flag, .unalloc-flag, .block-status-badge, .winner-pill, .wf-next-tag,
  .risk-tag, .pill, .timing-tag { font-size:11px; }
  th, td, th.num, td.num { font-size:13px; }
  .eyebrow, .section-kicker, .sidebar-label { font-size:11px; }

  /* Bars carry their own labels. Below roughly this size the text is unreadable
     anyway, so let a narrow bar be a colour block and leave detail to the tap. */
  .planner-block b { font-size:12px; }
  .planner-block span, .planner-block small { font-size:11px; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width:680px) {
  /* 34px of side padding is a tenth of a 360px screen. */
  .workspace { padding-left:14px; padding-right:14px; }
  .topbar { margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }

  .hero-row, .hero-row.compact-hero { align-items:stretch; flex-direction:column; gap:12px; }
  .hero-row h2 { font-size:21px; }
  .topbar h1 { font-size:16px; }
  .panel { padding:14px; }

  /* Two across reads better than four squeezed or one wasteful. */
  .metric-grid, .scheduler-metrics, .kpi-grid, .summary-grid, .review-metrics,
  .approval-summary, .three-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric strong { font-size:22px; }
  .two-column { grid-template-columns:minmax(0,1fr); }

  /* Toolbar controls go full width and stack, so nothing is a 30px sliver. */
  .scheduler-toolbar, .dashboard-toolbar { gap:8px; padding:8px; }
  .date-controls, .view-controls { flex-direction:column; align-items:stretch; width:100%; }
  .date-controls > button, .view-controls > button, .view-controls > select,
  .view-controls > .report-link { width:100%; }
  .segmented { width:100%; }
  .segmented button { flex:1; }
  .zoom-controls { justify-content:space-between; width:100%; }

  /* The drawer becomes a bottom sheet: a 410px side panel on a 360px screen is
     the whole screen anyway, and a sheet is what a phone user expects. */
  .schedule-detail-drawer {
    border-left:0; border-top:4px solid #1b70bd; border-radius:14px 14px 0 0;
    height:auto; left:0; max-height:86dvh; top:auto; width:100%;
  }
  .drawer-details { grid-template-columns:1fr; }
  .drawer-actions { flex-direction:column; }
  .drawer-actions > * { width:100%; }

  .notifications-panel { left:8px; right:8px; top:auto; width:auto; max-height:70dvh; }
  .sections-menu { width:min(292px, calc(100vw - 28px)); }

  /* Dialogs must not exceed the screen or the visible height. */
  dialog { max-height:88dvh; max-width:calc(100vw - 20px); width:calc(100vw - 20px); }
}

/* Very narrow (Galaxy S20 and below) -- one column everywhere. */
@media (max-width:380px) {
  .metric-grid, .scheduler-metrics, .kpi-grid, .summary-grid,
  .review-metrics, .approval-summary, .three-column { grid-template-columns:minmax(0,1fr); }
  .workspace { padding-left:10px; padding-right:10px; }
  .topbar { margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; }
}

/* ==========================================================================
   Phone in landscape
   ==========================================================================
   ~390px of height, much of it browser chrome. The Gantt is the reason anyone
   turns a phone sideways here, so give it the room and shrink the rest. */
@media (max-height:480px) and (orientation:landscape) {
  .topbar { min-height:52px; }
  .gantt-page-head { display:none; }
  .view.active.gantt-only { height:calc(100dvh - 92px); }
  .hero-row { margin:12px 0 10px; }
}

/* ==========================================================================
   Tablets
   ========================================================================== */
@media (min-width:681px) and (max-width:1024px) {
  .workspace { padding-left:20px; padding-right:20px; }
  .topbar { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; }
  .metric-grid, .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .scheduler-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .two-column { grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   High-DPI
   ==========================================================================
   Hairline borders round up to 2 physical pixels on a 3x screen, which makes the
   UI look heavier on a phone than it does on a laptop. */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:2dppx) {
  .panel, .metric, .table-wrap { border-width:.5px; }
}