/* ============================================================
   RigDeck — faux product-UI internals
   All scoped under .ui (inside .mock-canvas). Fixed-px layouts,
   scaled to fit by mockups.js.
   ============================================================ */

.ui, .ui * { box-sizing: border-box; }
.ui { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: #20242a; line-height: 1.35; }
.ui .m { font-family: 'IBM Plex Mono', monospace; font-feature-settings: "tnum" 1; }

/* ---------- app shell ---------- */
.app { display: flex; width: 100%; height: 100%; background: #F4F2EF; }

/* sidebar */
.sb { width: 204px; flex: none; background: #181B1F; color: #cdd2d8; display: flex; flex-direction: column; padding: 16px 0; }
.sb-brand { display: flex; align-items: center; gap: 9px; padding: 4px 18px 18px; }
.sb-brand .wm { font-family: 'Saira Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; color: #fff; letter-spacing: 0.01em; }
.sb-sec { font-family:'IBM Plex Mono',monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #5c626b; padding: 14px 20px 6px; }
.sb-item { display: flex; align-items: center; gap: 11px; padding: 8px 20px; font-size: 13px; color: #a7adb5; position: relative; cursor: default; }
.sb-item svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.sb-item.on { color: #fff; background: #22262B; }
.sb-item.on::before { content:""; position:absolute; left:0; top:0; bottom:0; width: 3px; background: #F26418; }
.sb-item .pill { margin-left: auto; font-family:'IBM Plex Mono',monospace; font-size: 10px; background:#2C3036; color:#cdd2d8; padding: 1px 6px; border-radius: 20px; }
.sb-item.on .pill { background:#F26418; color:#fff; }
.sb-foot { margin-top: auto; padding: 14px 18px 2px; border-top: 1px solid #262a2f; margin-top: auto; }
.sb-shop { display:flex; align-items:center; gap:9px; }
.sb-shop .av { width: 28px; height: 28px; border-radius: 6px; background: #2C3036; display:grid; place-items:center; color:#fff; font-weight:700; font-size: 12px; flex:none; }
.sb-shop .nm { font-size: 12px; color:#e6e8eb; font-weight: 600; }
.sb-shop .sub { font-size: 10px; color:#6e747c; }

/* main */
.mn { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F4F2EF; }
.tb { height: 56px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: #fff; border-bottom: 1px solid #e7e4de; }
.tb h1 { font-family:'Saira Condensed',sans-serif; text-transform: uppercase; font-size: 19px; letter-spacing: -0.005em; color:#1A1D21; }
.tb .search { margin-left: 8px; display:flex; align-items:center; gap:8px; background:#F4F2EF; border:1px solid #e7e4de; border-radius:6px; padding: 6px 11px; width: 230px; color:#888e96; font-size:12px; }
.tb .search svg { width:14px; height:14px; }
.tb .spacer { margin-left: auto; }
.tb .live { display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#237a47; background:#e7f4ec; padding:5px 10px; border-radius:5px; letter-spacing:0.04em; }
.tb .live .d { width:7px; height:7px; border-radius:50%; background:#2E9E5B; }
.tb .date { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#6b717a; }
.tb .av { width:30px;height:30px;border-radius:7px;background:#181B1F;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px; }

.mn-body { flex:1; padding: 20px 22px; overflow: hidden; }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-bottom: 18px; }
.kpi { background:#fff; border:1px solid #e7e4de; border-radius:8px; padding: 13px 15px; position: relative; }
.kpi .kl { font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:0.08em; text-transform:uppercase; color:#888e96; }
.kpi .kv { font-family:'IBM Plex Mono',monospace; font-size: 26px; font-weight:600; color:#1A1D21; letter-spacing:-0.02em; margin-top:5px; line-height:1; }
.kpi .kd { font-size: 11px; color:#6b717a; margin-top:6px; display:flex; align-items:center; gap:5px; }
.kpi .kd .up { color:#237a47; font-weight:600; }
.kpi.hot { border-color: rgba(242,100,24,0.4); }
.kpi.hot::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; background:#F26418; border-radius:2px; }
.kpi.hot .kv { color:#1A1D21; }

/* board */
.board-head { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.board-head h2 { font-family:'Saira Condensed',sans-serif; text-transform:uppercase; font-size:16px; color:#1A1D21; letter-spacing:0; }
.board-head .chips { display:flex; gap:7px; margin-left:6px; }
.chip { font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:4px 9px; border:1px solid #e7e4de; border-radius:20px; color:#6b717a; background:#fff; }
.chip.on { background:#181B1F; color:#fff; border-color:#181B1F; }
.board-head .right { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#888e96; }

.cols { display:grid; grid-template-columns: repeat(4, 1fr); gap:13px; }
.col-head { display:flex; align-items:center; gap:9px; padding: 0 2px 11px; }
.col-head .av { width:26px;height:26px;border-radius:6px;background:#e7e4de;color:#4C525A;display:grid;place-items:center;font-weight:700;font-size:11px;flex:none; }
.col-head .nm { font-weight:600; font-size:12.5px; color:#1A1D21; }
.col-head .bay { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#888e96; }
.col-head .st { margin-left:auto; width:8px;height:8px;border-radius:50%; }
.st.busy { background:#F26418; } .st.idle { background:#c9cdd2; } .st.green { background:#2E9E5B; }

.wo { background:#fff; border:1px solid #e7e4de; border-radius:8px; padding:11px 12px; margin-bottom:10px; }
.wo:hover { border-color:#d8d4cc; }
.wo .wo-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.wo .unit { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:#1A1D21; }
.wo .cust { font-size:11px; color:#888e96; margin-bottom:8px; }
.wo .cmpl { font-size:12px; color:#3a3f46; line-height:1.3; margin-bottom:9px; }
.wo .wo-bot { display:flex; align-items:center; justify-content:space-between; }
.wo .timer { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#6b717a; display:flex; align-items:center; gap:5px; }
.wo .timer.run { color:#B8460A; }
.wo .timer .d { width:6px;height:6px;border-radius:50%; background:currentColor; }
.wo .pm-tag { display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#5b4fbf; background:#ecebff; padding:2px 6px; border-radius:4px; margin-bottom:8px; letter-spacing:0.02em; }
.badge { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; padding:3px 7px; border-radius:4px; letter-spacing:0.02em; white-space:nowrap; }
.bdg-open{background:#eef4fb;color:#2b6cb8;} .bdg-prog{background:rgba(242,100,24,0.1);color:#B8460A;}
.bdg-wait{background:#fbf2dc;color:#9a6f06;} .bdg-done{background:#e7f4ec;color:#237a47;}
.bdg-pm{background:#ecebff;color:#5b4fbf;}

/* ---------- WO detail (feature 1) ---------- */
.wod { padding: 20px 22px; width:100%; height:100%; background:#F4F2EF; overflow:hidden; }
.wod-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.wod-head .wn { font-family:'Saira Condensed',sans-serif; text-transform:uppercase; font-size:22px; color:#1A1D21; }
.wod-head .meta { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#888e96; margin-top:4px; }
.wod-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap:14px; }
.panel { background:#fff; border:1px solid #e7e4de; border-radius:8px; padding:15px 16px; }
.panel .pt { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#888e96; margin-bottom:12px; }
.line { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f0ede7; font-size:12.5px; }
.line:last-child { border-bottom:none; }
.line .lt { color:#3a3f46; } .line .lr { font-family:'IBM Plex Mono',monospace; color:#1A1D21; }
.sublet { background:#181B1F; border-radius:8px; padding:15px 16px; color:#cdd2d8; }
.sublet .pt { color:#F26418; }
.sub-steps { display:flex; flex-direction:column; gap:0; margin-top:4px; }
.sub-step { display:flex; align-items:center; gap:11px; padding:9px 0; position:relative; }
.sub-step .dot { width:22px;height:22px;border-radius:50%; flex:none; display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; }
.sub-step .dot.done { background:#F26418; color:#fff; }
.sub-step .dot.now { background:#fff; color:#181B1F; box-shadow:0 0 0 3px rgba(242,100,24,0.3); }
.sub-step .dot.next { background:#2C3036; color:#6e747c; }
.sub-step .lbl { font-size:12.5px; color:#e6e8eb; }
.sub-step .lbl .sm { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#7c828a; }
.sub-step .amt { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#cdd2d8; }
.sub-step .conn { position:absolute; left:10px; top:30px; height:11px; width:2px; background:#2C3036; }
.sub-step:last-child .conn { display:none; }
.totals { margin-top:12px; }
.totals .gt { display:flex; align-items:center; justify-content:space-between; padding-top:11px; border-top:1px solid #f0ede7; font-weight:700; }
.totals .gt .lr { font-size:16px; }

/* ---------- PM trigger (feature 2) ---------- */
.pm { padding:20px 22px; width:100%; height:100%; background:#F4F2EF; display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start; }
.tele .row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0e0e7; border-bottom:1px solid #f0ede7; }
.tele .row .k { font-size:12px; color:#6b717a; display:flex; align-items:center; gap:8px; }
.tele .row .v { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#1A1D21; font-weight:600; }
.fault { background:#fff; border:1px solid rgba(242,100,24,0.4); border-radius:8px; padding:12px 14px; margin-top:11px; }
.fault .fh { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fault .src { font-family:'IBM Plex Mono',monospace; font-size:10px; color:#888e96; letter-spacing:0.08em; text-transform:uppercase; margin-left:auto; }
.fault .code { font-family:'IBM Plex Mono',monospace; font-size:13px; color:#B8460A; font-weight:600; }
.fault .desc { font-size:12px; color:#3a3f46; margin-top:4px; }
.flow-arrow { display:flex; flex-direction:column; align-items:center; gap:4px; color:#F26418; padding:6px 0; }
.flow-arrow .t { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#888e96; }
.auto-card { background:#181B1F; border-radius:8px; padding:14px 16px; color:#cdd2d8; }
.auto-card .ah { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.auto-card .ah .t { font-family:'Saira Condensed',sans-serif; text-transform:uppercase; font-size:15px; color:#fff; }
.auto-card .ah .auto { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#F26418; background:rgba(242,100,24,0.14); padding:3px 7px; border-radius:4px; letter-spacing:0.06em; }
.auto-card .arow { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid #262a2f; font-size:12px; }
.auto-card .arow:last-child { border-bottom:none; }
.auto-card .arow .k { color:#8b9098; } .auto-card .arow .v { font-family:'IBM Plex Mono',monospace; color:#fff; }

/* ---------- mechanic tablet (feature 3) ---------- */
.tablet-wrap { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background: #20242a; background-image: radial-gradient(circle at 30% 20%, #2c3036, #181B1F); padding: 26px; }
.tablet { width: 720px; height: 470px; background:#0f1113; border-radius:22px; padding:13px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); position:relative; }
.tablet .screen { width:100%; height:100%; background:#F4F2EF; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.tb-bar { height:42px; background:#181B1F; display:flex; align-items:center; gap:10px; padding:0 16px; color:#cdd2d8; }
.tb-bar .wm { font-family:'Saira Condensed',sans-serif; text-transform:uppercase; font-size:15px; color:#fff; }
.tb-bar .who { margin-left:auto; font-size:12px; color:#a7adb5; }
.tb-bar .who b { color:#fff; }
.tb-body { flex:1; padding:18px 20px; display:grid; grid-template-columns: 1fr 0.9fr; gap:16px; }
.tb-job .u { font-family:'IBM Plex Mono',monospace; font-size:12px; color:#888e96; }
.tb-job h3 { font-family:'Saira Condensed',sans-serif; text-transform:uppercase; font-size:22px; color:#1A1D21; margin:3px 0 10px; }
.tb-job .cm { font-size:13px; color:#3a3f46; margin-bottom:14px; }
.tb-photos { display:flex; gap:9px; }
.tb-photos .ph { width:74px; height:56px; border-radius:7px; background: repeating-linear-gradient(45deg,#e4e1da 0 7px,#ebe8e1 7px 14px); border:1px solid #d8d4cc; display:grid; place-items:center; color:#a9aeb6; }
.tb-photos .ph.add { background:#fff; border:1.5px dashed #c9cdd2; color:#888e96; }
.tb-timer { background:#181B1F; border-radius:12px; padding:18px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tb-timer .lbl { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#F26418; }
.tb-timer .t { font-family:'IBM Plex Mono',monospace; font-size:46px; font-weight:600; letter-spacing:-0.02em; margin:8px 0 4px; }
.tb-timer .sub { font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8b9098; margin-bottom:16px; }
.tb-timer .clock-btn { width:100%; text-align:center; background:#F26418; color:#fff; font-weight:600; font-size:14px; padding:11px; border-radius:8px; }
.tb-timer .parts { width:100%; margin-top:13px; font-size:11.5px; color:#a7adb5; }
.tb-timer .parts .pr { display:flex; justify-content:space-between; padding:5px 0; border-top:1px solid #262a2f; }
.tb-timer .parts .pr .m { color:#cdd2d8; }

/* ---------- card minis ---------- */
.mini { font-family:'Hanken Grotesk',sans-serif; }
.mini-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; padding:6px 0; border-bottom:1px solid #f0ede7; }
.mini-row:last-child { border-bottom:none; }
.mini-row .nm { color:#3a3f46; display:flex; align-items:center; gap:7px; }
.mini-row .qt { font-family:'IBM Plex Mono',monospace; color:#1A1D21; }
.mini-row .low { color:#B8460A; }
.tagx { font-family:'IBM Plex Mono',monospace; font-size:9.5px; padding:2px 6px; border-radius:4px; }