/* ══════════════════════════════════════════════════════════════════════
   COLOR IDEAS Uniforms — COMPACT THEME (owner request, Aug 2026)
   "it's too big for me... bulky and eats a lot of space"

   This file is layered ON TOP of the prototype's own styles at serve
   time (see vite.config.ts). The prototype HTML on disk stays
   byte-identical — delete this file's <link> and the old look returns.

   What it does:
   · Quicksand (round, playful) → Inter (clean, compact, professional)
   · Smaller base type: 15.5px → 13.5px
   · Slimmer buttons/pills, less bubbly corners (999px pills → 8px)
   · Tighter cards, tables, forms, lightboxes, header
   Colors are untouched — same cyan/ink brand.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --radius:10px;
}

/* ---------- type ---------- */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:13.5px;
  line-height:1.5;
}
h1,h2,h3,h4{letter-spacing:-.01em}

/* ---------- forms ---------- */
input,select,textarea{
  font-size:13px;
  padding:7px 10px;
  border-width:1px;
  border-radius:8px;
}
.frow label{font-size:11.5px;margin-bottom:4px}
.frow{gap:10px;margin-bottom:10px}

/* ---------- pills & buttons ---------- */
.pill{
  gap:6px;
  border-radius:8px;
  padding:7px 16px;
  font-size:13px;
  font-weight:600;
}
.pill.big{padding:9px 20px;font-size:13.5px}
.pill.small{padding:4px 10px;font-size:12px}
.pill.ghost{border-width:1.5px}
.linkbtn{font-size:12.5px}

/* ---------- header ---------- */
.topbar{padding:8px 16px;gap:12px}
.logo-img{height:28px}
.topbar .logo-img{height:48px;width:auto;max-width:100%}
/* Keep the account label explicit; secondary actions use accessible icons. */
.topbar .top-actions{gap:6px}
.topbar .top-actions .ciu-icon-btn,
.topbar .top-actions .cart-btn{
  width:auto;min-width:36px;height:36px;padding:0 10px;gap:6px;
  border:1px solid var(--line,#dbe3ec);border-radius:8px;
  background:#fff;color:var(--ink);box-shadow:none;flex-shrink:0;
  font-family:inherit;text-decoration:none;
}
.topbar .top-actions .ciu-header-label{font-size:12px;font-weight:650;line-height:1.2;white-space:nowrap}
.topbar .top-actions .ciu-icon-btn:not(#ciu-ic-account),
.topbar .top-actions .cart-btn{width:36px;padding:0}
.topbar .top-actions .ciu-icon-btn:not(#ciu-ic-account) .ciu-header-label,
.topbar .top-actions .cart-btn .ciu-header-label{display:none}
.topbar .top-actions .ciu-icon-btn svg,
.topbar .top-actions .cart-btn svg{width:18px;height:18px;flex-shrink:0}
.topbar .top-actions .ciu-icon-btn:hover,
.topbar .top-actions .cart-btn:hover{background:#eef8fc;border-color:#a8d5e5}
.topbar .top-actions #ciu-ic-account{background:var(--royal-text,#007ba8);border-color:var(--royal-text,#007ba8);color:#fff}
.topbar .top-actions #ciu-ic-account:hover{background:#006587;border-color:#006587}
.topbar .top-actions button:focus-visible{outline:3px solid #007ba8;outline-offset:3px}
.topbar .top-actions .cart-count{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;font-size:10px;line-height:16px}
@media(max-width:700px){
  body .topbar{padding:8px 10px;gap:8px}
  .topbar .logo{flex:1 1 120px;min-width:120px;max-width:190px}
  .topbar .logo-img{width:100%;height:auto}
  .topbar .top-actions{display:flex;justify-content:flex-end;flex:0 0 auto;width:auto;gap:4px;margin-left:auto}
  .topbar .top-actions .ciu-icon-btn,
  .topbar .top-actions .cart-btn{min-width:40px;height:40px}
  .topbar .top-actions .ciu-icon-btn:not(#ciu-ic-account),
  .topbar .top-actions .cart-btn{width:40px}
  .topbar .top-actions #ciu-ic-account{padding:0 8px}
  .topbar .top-actions #ciu-ic-account svg{display:none}
}
@media(max-width:359px){
  .topbar .logo{flex-basis:100%}
  .topbar .top-actions{flex-basis:100%}
}
.logo-mark{width:30px;height:30px;border-radius:8px;font-size:12px}
.logo-mark span{width:22px;height:22px;border-radius:6px;font-size:10.5px}
.wing-name{font-size:14px;padding-left:10px}
.wing-name small{font-size:8.5px;letter-spacing:1.2px}
.logo-text b{font-size:14px}
.logo-text small{font-size:9px;letter-spacing:1.1px}
.top-item{padding:4px 9px;border-radius:8px}
.top-item small{font-size:10.5px}
.top-item b{font-size:12px}
.search input{padding-left:14px}
.search button{padding:0 16px;font-size:14px}
.cart-count{min-width:16px;height:16px;font-size:10px;top:-6px;right:-4px}
.crumb{font-size:11.5px;padding:10px 0 2px}

/* ---------- hero / landing ---------- */
.hero h1{font-size:29px;margin:10px 0}
.hero p{font-size:13.5px}
.hero .tag{padding:4px 12px;font-size:11.5px}
.hero-cta{gap:10px;margin:18px 0 24px}
.hero-ctabar{padding:10px 16px;font-size:12.5px;gap:12px}

/* ---------- cards & panels ---------- */
.co-card{border-width:1px;border-radius:10px;padding:14px 16px;margin-bottom:12px;background:#fff}
.co-card h3{font-size:14px;margin-bottom:10px;gap:8px}
.co-card h3 .stepn{width:20px;height:20px;font-size:11px}
.fac-card{border-width:1px;border-radius:10px;padding:11px 13px;background:#fff}
.stat{border-width:1px;border-radius:10px;padding:8px 10px}
.stat small{font-size:9.5px}
.stat b{font-size:15px;margin:2px 0 3px}
.statstrip{gap:8px;margin-top:10px}
.paycard{padding:10px 12px;border-radius:10px}
.paycard b{font-size:13px}
.paycard p{font-size:12px;margin-top:3px}
.paycard .radio{width:15px;height:15px}
.method{padding:5px 10px;font-size:12px;border-radius:8px}
.methods{gap:7px;margin-top:10px}
.deadline-box{padding:10px 12px;border-radius:10px;margin-top:12px}
.secure-note{font-size:11.5px;margin-top:9px}
.qual-head{font-size:12.5px;margin:12px 0 7px}

/* ---------- tabs, badges, chips ---------- */
.factory-tabs{gap:6px;margin-top:10px;flex-wrap:wrap}
.factory-tabs button{border-width:1px;border-radius:8px;padding:5px 12px;font-size:12px}
.badge{font-size:10.5px;padding:2px 8px;border-radius:6px}
.fchip{border-width:1px;border-radius:7px;padding:3px 9px;font-size:11.5px;margin:0 4px 4px 0}
.ftag{font-size:9px;padding:2px 7px}
.fil{font-size:13px;padding:4px 2px;gap:7px}

/* ---------- tables · Monday-style board skin (owner request, Aug 2026) ----
   Matches the attached reference board: clean white rows, visible vertical
   column separators, roomy padded cells, small uppercase gray headers,
   subtle row hover, solid rounded status pills, circular initial avatars,
   muted “—” for empty values, and left-right scrolling inside the card
   instead of squashed columns. Layered over the prototype's table.data
   rules — the HTML on disk stays untouched. */
table.data{font-size:12.5px;background:#fff;border:1px solid var(--line)}
table.data th{font-size:10px;letter-spacing:.6px;padding:10px 12px;color:#68707f;background:#fafbfd;border-bottom:1.5px solid #dce1e9;border-right:1px solid var(--line);vertical-align:middle}
table.data td{padding:10px 12px;font-weight:500;border-right:1px solid var(--line)}
table.data th:last-child,table.data td:last-child{border-right:none}
table.data td b{font-weight:700}
table.data tr:hover td{background:#f7f9fc}
.touchview table.data td{padding:13px 12px;font-size:14px}
.touchview table.data th{font-size:11px;padding:11px 12px}

/* solid status pills — staff table cells only; badges elsewhere keep the
   prototype's soft pastel look (customer order cards, tickets, chips) */
table.data .badge{border-radius:5px;padding:3px 10px;font-size:10.5px;font-weight:700;letter-spacing:.2px}
table.data .badge.paid,table.data .badge.done,table.data .badge.ok{background:var(--green);color:#fff}
table.data .badge.due{background:var(--red);color:#fff}
table.data .badge.prod,table.data .badge.warn{background:#e2930f;color:#fff}
table.data .badge.info{background:var(--royal-text);color:#fff}
.touchview table.data .badge{font-size:12.5px;padding:5px 12px}

/* circular initial avatar + name (“Handled by” cells) */
.avcell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.avchip{width:24px;height:24px;flex:0 0 24px;border-radius:999px;background:#e4e9f1;color:#3f4a5c;font-weight:700;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}
.touchview .avchip{width:30px;height:30px;flex-basis:30px;font-size:12.5px}

/* count chip beside card headings — live number of rows in the list */
.countchip{display:inline-flex;align-items:center;justify-content:center;background:#eef1f6;color:#5b6577;border-radius:999px;min-width:22px;padding:1px 8px;font-size:11px;font-weight:700;line-height:1.7;flex-shrink:0}

/* muted em-dash for empty values (the board's “—” convention) */
.mdash{color:#a4adbc;font-weight:600}
td.ciu-c{text-align:center}

/* staff tables scroll left-right inside their card instead of cramming;
   integration.js wraps each table.data in this div at load time */
.ciu-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* sales Order queue / Quotations: the OLD per-column nth-child min-width
   floors lived here. RETIRED (Aug 10 2026): they were written for a
   15-column layout and the queue is now 19 columns and re-shuffled by the
   owner regularly — stale floors landed on the wrong columns whenever the
   table rendered before the auto-fit pass could measure it. Column widths
   are now owned entirely by window.ciuColFit (auto-fit after every render)
   plus the drag-resize grips; before the first fit the browser's own table
   layout is a safer fallback than a wrong floor. */

/* ---------- items lightbox table ----------
   integration.js renders <table class="co-table"> (quotation items viewer/
   editor). The class has NO rules in the prototype, so browser defaults
   applied: th centered, td left — "columns don't align to titles"
   (owner, Aug 2026). Give it the same look as table.data, numbers
   right-aligned under their titles. */
.co-table{border-collapse:collapse}
.co-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:6px 8px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.co-table td{text-align:left;font-size:13px;padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.co-table tbody tr:last-child td{border-bottom:none}
/* numeric columns (Qty · ₱ each · Line total) line up under their titles */
.co-table th:nth-child(2),.co-table td:nth-child(2),
.co-table th:nth-child(3),.co-table td:nth-child(3),
.co-table th:nth-child(4),.co-table td:nth-child(4){text-align:right}
/* editor mode: numbers inside the qty/price boxes align right too */
.co-table td input{text-align:right}

/* ---------- lightboxes ---------- */
.lb-card{border-radius:12px;padding:16px 18px}
.lb-card h3{font-size:15px}
.lb-card:has(.ciu-pay-close){position:relative}
.ciu-pay-title{padding-right:38px}
.ciu-pay-close{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#eef5f8;color:#34424b;font-size:25px;line-height:27px;font-weight:500;cursor:pointer}
.ciu-pay-close:hover,.ciu-pay-close:focus-visible{background:#dcecf2;color:#0c7197;outline:none}
.ciu-pay-close:focus-visible{box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.lb-card .meta{font-size:12px}
.lb-card .art{border-radius:10px;padding:12px;width:180px;margin:0 auto 10px}

/* ---------- product grid ---------- */
.pcard{border-width:1px}
.pd-thumbs .th{width:52px;height:52px;border-radius:8px}

/* ---------- print pieces keep the owner's original look ---------- */
.pticket,.pguide{font-family:'Quicksand',sans-serif}

/* Owner (Aug 10 2026): "some column widths are too wide, it should auto
   fit also." Fit pass: for one layout the table hugs its content — no
   floors, no wrapping — while JS measures each column, then pins the ths.
   The !important beats the nth-child floors above even mid-measure. */
table.ciu-mq.ciu-fitpass{width:max-content}
table.ciu-mq.ciu-fitpass th,table.ciu-mq.ciu-fitpass td{min-width:0 !important;width:auto !important;max-width:none !important;white-space:nowrap !important}
/* Once fitted, the th inline widths ARE the layout — drop the per-column
   CSS floors (they were sized for an older column order and held some
   near-empty columns 140-190px wide). Appended last so the tie in
   specificity with the nth-child rules resolves this way. */
table.ciu-mq.ciu-fitted th,table.ciu-mq.ciu-fitted td{min-width:0}

/* The Job Orders board can be wider than its card. Keep the two identity
   columns in sight while the process columns scroll, without applying this
   behavior to the separate Quotations table. The Customer offset follows the
   live, resizable JO column width set by the queue renderer. */
.ciu-tscroll{position:relative}
#view-sales .ciu-tscroll{max-height:calc(100vh - 270px);min-height:180px;overflow:auto;overscroll-behavior:contain}
table.ciu-mq thead tr:first-child th{position:sticky;top:0;z-index:8}
/* The band title row inherits the dashboard table's padding, so its rendered
   height can vary by browser/zoom. The queue renderer keeps this variable in
   sync; the fallback prevents the column-title row from overlapping it before
   that first measurement. */
table.ciu-mq thead tr:last-child th{position:sticky;top:var(--ciu-queue-band-height,34px);z-index:8;background:#f8fafb}
table.ciu-mq.ciu-pin-identity tbody td:nth-child(1),
table.ciu-mq.ciu-pin-identity tbody td:nth-child(2){position:sticky;box-sizing:border-box;background:#fff;z-index:3}
table.ciu-mq.ciu-pin-identity tbody td:nth-child(1){left:0}
table.ciu-mq.ciu-pin-identity tbody td:nth-child(2){left:calc(var(--ciu-jo-column-width, 150px) - 1px);box-shadow:-2px 0 0 #fff,8px 0 10px -10px rgba(23,32,44,.55)}
table.ciu-mq.ciu-pin-identity thead tr:last-child th:nth-child(1),
table.ciu-mq.ciu-pin-identity thead tr:last-child th:nth-child(2){position:sticky!important;box-sizing:border-box;background:#f8fafb;z-index:10}
table.ciu-mq.ciu-pin-identity thead tr:last-child th:nth-child(1){left:0}
table.ciu-mq.ciu-pin-identity thead tr:last-child th:nth-child(2){left:calc(var(--ciu-jo-column-width, 150px) - 1px);box-shadow:-2px 0 0 #f8fafb,8px 0 10px -10px rgba(23,32,44,.55)}
table.ciu-mq.ciu-pin-identity tbody tr:hover td:nth-child(1),
table.ciu-mq.ciu-pin-identity tbody tr:hover td:nth-child(2){background:#eaf9ff!important}

/* Job Order release instructions must name the actual destination. Keep the
   delivery/pickup route compact, but make its branch or address readable. */
.ciu-ful-route{display:flex;align-items:flex-start;gap:6px;min-width:160px;max-width:260px}
.ciu-ful-route .badge{flex:none}
.ciu-ful-dest{min-width:0;font-size:11.5px;line-height:1.35;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ciu-ful-dest b{color:var(--ink,#17202c);font-weight:700}

/* ---------- sales queue stage tabs (owner, Aug 10 2026) ----------
   "split the big table into stage tabs" — the pill strip filters the
   queue by process stage; each stage also hides the columns that can't
   matter there. The DOM keeps all 19 columns (only display flips), so
   drag-width indexes and the header rebuild stay valid. */
#ciu-stage-strip{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px}
.ciu-stgpill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f4f6fa;color:#3f4a5c;border-radius:8px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer}
.ciu-stgpill:hover{background:#e9edf4}
.ciu-stgpill.on{background:#20242c;border-color:#20242c;color:#fff}
.ciu-stgpill .n{background:#fff;color:#5b6577;border-radius:999px;min-width:18px;padding:0 6px;font-size:10.5px;font-weight:700;line-height:1.6;text-align:center}
.ciu-stgpill.on .n{background:rgba(255,255,255,.18);color:#fff}
body.ciu-dark .ciu-stgpill{background:#262b34;border-color:#3a404c;color:#c7cdd8}
body.ciu-dark .ciu-stgpill:hover{background:#2e3440}
body.ciu-dark .ciu-stgpill.on{background:#e8eaef;border-color:#e8eaef;color:#171a20}
body.ciu-dark .ciu-stgpill .n{background:rgba(255,255,255,.12);color:#c7cdd8}
body.ciu-dark .ciu-stgpill.on .n{background:rgba(0,0,0,.15);color:#171a20}

/* Per-stage column trims RETIRED (Aug 10 2026): the queue became the
   owner's PROCESS FLOW sheet (32 columns, one row per JO, color bands).
   The stage pills keep filtering ROWS; hiding columns per stage made
   sense for the 19-column order table but would fight the fixed
   spreadsheet layout the owner asked to mirror. ciu-stg-* classes still
   land on the table for future use. */

/* ---------- process-flow queue (owner's sheet, Aug 10 2026) ----------
   Two header rows: his color bands (Order intake / Mock-up / Layout /
   Production / Finishing) over the 32 columns. Cells: ✓ done · pill =
   happening now · ▸ = move here (admins/supervisors) · ⏸ = on hold. */
.ciu-fband th{text-align:center;font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:800;color:#3f4a5c;border-bottom:1.5px solid var(--line);padding:5px 8px}
.ciu-fb-intake{background:#fff3c4}
.ciu-fb-mockup{background:#e6dff2}
.ciu-fb-layout{background:#d9e7ee}
.ciu-fb-prod{background:#deefd8}
.ciu-fb-finish{background:#f8dede}
.ciu-fb-act{background:#eef1f6}
body.ciu-dark .ciu-fband th{color:#c7cdd8}
body.ciu-dark table.ciu-mq thead tr:last-child th{background:#1a2432}
body.ciu-dark .ciu-fb-intake{background:#3d3517}
body.ciu-dark .ciu-fb-mockup{background:#332c44}
body.ciu-dark .ciu-fb-layout{background:#23343d}
body.ciu-dark .ciu-fb-prod{background:#25361f}
body.ciu-dark .ciu-fb-finish{background:#402525}
body.ciu-dark .ciu-fb-act{background:#262b34}
td.ciu-fs{font-weight:700;white-space:nowrap}
td.ciu-fs.ok{color:#1c9a53}
td.ciu-fs.mut{color:#c3cbd6}
td.ciu-fs.hold{color:#b8860b}
td.ciu-fs.nxt{cursor:pointer;color:#8a94a4}
td.ciu-fs.nxt:hover{color:var(--acc,#00a6b6);background:rgba(0,166,182,.08)}
td.ciu-fs .fsnow{display:inline-block;background:var(--acc,#00a6b6);color:#fff;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;white-space:nowrap}
body.ciu-dark td.ciu-fs.ok{color:#4cc47f}
body.ciu-dark td.ciu-fs.mut{color:#49505c}

/* ── per-design production step tracker (Aug 2026 pipeline) ── */
.ciu-steps{display:flex;flex-direction:column;gap:4px;min-width:0}
.ciu-steps .dots{display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap}
.ciu-steps i{width:9px;height:9px;border-radius:50%;background:#d7dfe8;display:inline-block;flex:none}
.ciu-steps i.done{background:var(--acc,#00a6b6)}
.ciu-steps i.cur{background:var(--acc,#00a6b6);box-shadow:0 0 0 3px rgba(0,166,182,.22)}
.ciu-steps i.gsep{margin-left:8px}
.ciu-steps .slbl{font-size:12px;font-weight:700;color:#0f172a}
.ciu-steps .slbl small{font-weight:600;color:var(--muted,#64748b)}
.ciu-steps-row{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:7px 0;padding:7px 9px;border:1px solid var(--line,#e5eaf0);border-radius:10px}
.ciu-steps-row .jmeta{min-width:140px}
.ciu-steps-row .jmeta b{font-size:13px;display:block}
.ciu-steps-row .jmeta span{font-size:12px;color:var(--muted,#64748b)}
body.ciu-dark .ciu-steps i{background:#2b3a4a}
body.ciu-dark .ciu-steps i.done,body.ciu-dark .ciu-steps i.cur{background:var(--acc,#22d3ee)}
body.ciu-dark .ciu-steps .slbl{color:#e6edf5}
body.ciu-dark .ciu-steps-row{border-color:#26313f}

/* Customer catalog cards already show the garment's real style name in h3.
   The small category label above it repeats the same wording (for example,
   T-SHIRT then T-Shirt), so hide only that duplicate catalog-card label. */
#catalog-grid .pcard .pbody>.cat{display:none}

/* Style details should focus on the customer's choices, not repeat generic
   sales copy. The customer picks print type, quality and fabric below. */
#view-product .pd-desc,#view-product #pd-chips{display:none}

/* The large product heading is the single customer-facing style name.
   Hide the small category eyebrow above it because it repeats that name. */
#view-product #pd-cat{display:none}

/* A product mockup must display at its natural aspect ratio. The prototype
   used a fixed 440px, clipped frame, which cropped a mockup on narrower or
   wider windows. Remove the nesting frame and let the full source image
   scale to the gallery width. */
#view-product .pd-gallery{border:0;padding:0;background:transparent}
#view-product #pd-img>div{height:auto!important;overflow:visible!important;border-radius:0!important}
#view-product #pd-img img{display:block;width:100%!important;height:auto!important;object-fit:contain!important;object-position:center!important;border-radius:14px}

/* Product choices need to read as clear, easy-to-tap decisions rather than
   low-contrast pills. This covers print type, collar, cut, style, neck and
   fabric, with the current pick visibly confirmed. */
#view-product #ciu-style-box{margin-top:0}
#view-product #ciu-style-box .ciu-style-head{display:none}
#view-product #ciu-style-box .ciu-style-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:14px 0}
#view-product #ciu-style-box .ciu-style-lab{min-width:94px;font-size:13.5px;color:#12242e}
#view-product #ciu-style-box .ciu-style-lab:after{content:"Choose one";display:inline-block;margin-left:7px;color:#64748b;font-size:11px;font-weight:600}
#view-product #ciu-style-box .ciu-style-row.is-picked .ciu-style-lab:after{content:"Selected ✓";color:#087eaf}
#view-product .ciu-fab-chips{gap:9px}
#view-product .ciu-fab-chips button{min-height:42px;border:2px solid #b9cbd6;background:#fff;border-radius:10px;padding:8px 15px;color:#213540;font-size:13px;font-weight:800;box-shadow:0 1px 2px rgba(15,36,46,.06)}
#view-product .ciu-fab-chips button:hover{border-color:#00aeef;background:#f0fbff}
#view-product .ciu-fab-chips button:focus-visible{outline:3px solid rgba(0,174,239,.3);outline-offset:2px}
#view-product .ciu-fab-chips button.on{border-color:#00a9e6;background:#eaf9ff;color:#066a94;box-shadow:0 0 0 2px rgba(0,174,239,.16)}
#view-product .ciu-fab-chips button.on:before{content:"✓ ";font-size:14px}
#view-product .paycard{position:relative;min-height:126px;border-color:#b9cbd6;background:#fff;box-shadow:0 1px 2px rgba(15,36,46,.05)}
#view-product .paycard:hover{border-color:#00aeef;background:#f7fdff}
#view-product .paycard.on{border-color:#00a9e6;background:#eaf9ff;box-shadow:0 0 0 2px rgba(0,174,239,.16)}
#view-product .paycard.on:after{content:"Selected";position:absolute;right:12px;bottom:9px;color:#087eaf;font-size:10.5px;font-weight:800}
#view-product .qual-head.ciu-needs-quality:after{content:"Choose one";display:inline-block;margin-left:8px;color:#64748b;font-size:11px;font-weight:600}
#view-product #qual-cards.ciu-needs-quality .paycard{border-color:#b9cbd6;background:#fff;box-shadow:0 1px 2px rgba(15,36,46,.05)}

/* Staff order drawer: system timeline events stay visibly separate from
   replyable staff notes. Their compact, color-coded treatment makes a scan
   of production, approvals, money and fulfillment changes straightforward. */
#ciu-oup .ciu-event{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:9px;background:#f8fafc;border-style:dashed}
#ciu-oup .ciu-event-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:7px;font-size:12px;font-weight:800;line-height:1}
#ciu-oup .ciu-event-main{min-width:0;flex:1}
#ciu-oup .ciu-event-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.25}
#ciu-oup .ciu-event-label{font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
#ciu-oup .ciu-event .when{margin-left:0;font-size:10.5px}
#ciu-oup .ciu-event-summary{margin-top:2px;font-size:12.5px;font-weight:700;line-height:1.4;word-break:break-word}
#ciu-oup .ciu-event-detail{margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted,#64748b);white-space:pre-wrap;word-break:break-word}
#ciu-oup .ciu-event-actor{margin-top:3px;font-size:10.5px;font-weight:700;color:var(--muted,#64748b)}
#ciu-oup .ciu-event-production{background:#f2faf0;border-color:#b9dfae}
#ciu-oup .ciu-event-production .ciu-event-icon{background:#d9efd2;color:#28733a}
#ciu-oup .ciu-event-production .ciu-event-label{color:#28733a}
#ciu-oup .ciu-event-design{background:#f5f1fb;border-color:#d9cbef}
#ciu-oup .ciu-event-design .ciu-event-icon{background:#e8dff8;color:#6841a5}
#ciu-oup .ciu-event-design .ciu-event-label{color:#6841a5}
#ciu-oup .ciu-event-payment{background:#fff8e8;border-color:#f0d28d}
#ciu-oup .ciu-event-payment .ciu-event-icon{background:#ffecb8;color:#9a6200}
#ciu-oup .ciu-event-payment .ciu-event-label{color:#9a6200}
#ciu-oup .ciu-event-fulfillment{background:#edf8ff;border-color:#b9dff2}
#ciu-oup .ciu-event-fulfillment .ciu-event-icon{background:#d9effb;color:#08749d}
#ciu-oup .ciu-event-fulfillment .ciu-event-label{color:#08749d}
#ciu-oup .ciu-event-status{background:#f4f6f8;border-color:#d5dce4}
#ciu-oup .ciu-event-status .ciu-event-icon{background:#e3e8ed;color:#4b5a6b}
#ciu-oup .ciu-event-status .ciu-event-label{color:#4b5a6b}
body.ciu-dark #ciu-oup .ciu-event{background:#1d2733;border-color:#3d4b5a}
body.ciu-dark #ciu-oup .ciu-event-detail,body.ciu-dark #ciu-oup .ciu-event-actor{color:#aeb9c7}

/* Staff order drawer: compact, read-only production size/name lists. */
#ciu-oup .ciu-roster-job{margin-bottom:10px;border:1px solid var(--line,#dbe3ec);border-radius:9px;background:#fff;overflow:hidden}
#ciu-oup .ciu-roster-job:last-child{margin-bottom:0}
#ciu-oup .ciu-roster-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 10px;background:#f8fafc;border-bottom:1px solid var(--line,#dbe3ec)}
#ciu-oup .ciu-roster-head>div{min-width:0}
#ciu-oup .ciu-roster-jobno{display:block;font-size:12.5px;line-height:1.35}
#ciu-oup .ciu-roster-item{display:block;margin-top:2px;color:var(--muted,#64748b);font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
#ciu-oup .ciu-roster-head .ciu-chip{flex:none}
#ciu-oup .ciu-roster-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#ciu-oup .ciu-roster-table{width:100%;border-collapse:collapse;font-size:12px}
#ciu-oup .ciu-roster-table th{text-align:left;padding:6px 9px;background:#fafbfd;border-bottom:1px solid var(--line,#dbe3ec);color:var(--muted,#64748b);font-size:9.5px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
#ciu-oup .ciu-roster-table td{padding:6px 9px;border-bottom:1px solid var(--line,#edf1f5);line-height:1.3;overflow-wrap:anywhere}
#ciu-oup .ciu-roster-table tbody tr:last-child td{border-bottom:0}
#ciu-oup .ciu-roster-table th:last-child,#ciu-oup .ciu-roster-table td:last-child{text-align:right}
#ciu-oup .ciu-roster-none{padding:11px 10px;color:var(--muted,#64748b);font-size:12px}
body.ciu-dark #ciu-oup .ciu-roster-job{background:#171f29;border-color:#344150}
body.ciu-dark #ciu-oup .ciu-roster-head,body.ciu-dark #ciu-oup .ciu-roster-table th{background:#1d2733;border-color:#344150}
body.ciu-dark #ciu-oup .ciu-roster-table td{border-color:#293543}

/* ── Task 272: Production workspace (replaces the floor dashboard) ──
   Ready / In production / Completed only. The old floor tiles, sewer
   assignment and specialist cards are hidden — demo counters never flash. */
#view-floor .wrap>:not(.portal-head):not(#ciu-pw){display:none!important}
#view-floor .portal-head .rolechip{display:none}
.ciu-pw-sub{margin:0 0 10px;color:var(--muted);font-size:12.5px}
.ciu-pw-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#ciu-pw-tabs{display:flex;gap:6px;flex-wrap:wrap}
.ciu-pw-live{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.ciu-pw-card{padding:0;overflow:hidden}
.ciu-pw-table{width:100%;border:0}
.ciu-pw-note{font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:500}
.ciu-pw-warn{color:#b8860b!important;font-weight:700}
.ciu-pw-acts{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ciu-pw-acts .pill[disabled],.ciu-pw-detacts .pill[disabled]{opacity:.5;cursor:not-allowed}
tr.ciu-pw-det td{background:#f8fafc}
.ciu-pw-detgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 16px}
.ciu-pw-detgrid small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.ciu-pw-detgrid span{font-size:12.5px;font-weight:600}
.ciu-pw-detacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ciu-pw-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 10px;text-align:center;color:var(--muted)}
.ciu-pw-empty b{color:var(--ink,#17202c);font-size:13.5px}
tr.ciu-pw-skel td i{display:block;height:10px;border-radius:5px;background:#e8edf3;animation:ciuPwPulse 1.2s ease-in-out infinite}
@keyframes ciuPwPulse{50%{opacity:.45}}
body.ciu-dark tr.ciu-pw-det td{background:#1d2733}
body.ciu-dark tr.ciu-pw-skel td i{background:#2b3a4a}
.ciu-pw-panel{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ciu-pw-fsec{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:6px}
.ciu-pw-fsec small{min-width:130px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.ciu-pw-fsec a{font-size:12.5px;font-weight:600;color:var(--royal-text,#0c7197)}
.ciu-pw-list{margin-top:6px;width:100%}
body.ciu-dark .ciu-pw-panel{background:#171f29;border-color:#344150}
.ciu-pw-sew{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.ciu-pw-sew select{min-width:180px}
.ciu-pw-sew input{width:80px}
.ciu-pw-pay{min-width:90px;font-size:12.5px;font-weight:700;text-align:right}
.ciu-pw-sewfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.ciu-pw-total{margin-left:auto;font-weight:800;font-size:13px}

/* ---------- staff dashboard: full browser width + Job Orders header ----------
   Owner request: the staff dashboard should use the whole browser width,
   not a narrow centered column (overrides the 1280px v2 cap and the
   min(96vw,1900px) cap injected by integration.js). Staff views only. */
#view-sales .wrap,#view-mockup .wrap,#view-layout .wrap,
body.ciu-v2 #view-sales .wrap,body.ciu-v2 #view-mockup .wrap,body.ciu-v2 #view-layout .wrap{
  max-width:none!important;width:100%;box-sizing:border-box;
  padding-left:clamp(12px,2vw,28px)!important;padding-right:clamp(12px,2vw,28px)!important}

/* Job Orders heading: title + count left, primary action top-right.
   Auto-fit stays on a separate utility row, not beside order creation. */
#view-sales h3:has(> .ciu-newjo){display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:12px 8px}
#view-sales .ciu-autofit,#view-sales .ciu-newjo{float:none!important;margin-left:0!important}
#view-sales .ciu-autofit{grid-column:1 / -1;grid-row:2;justify-self:start;margin-left:0!important;background:transparent!important;color:#5A6B74!important;border:1px solid #E3E8EB!important;box-shadow:none!important;font-weight:600}
#view-sales .ciu-autofit:hover{background:rgba(0,174,239,.08)!important;color:#1C2B33!important}
#view-sales .ciu-newjo{grid-column:3;grid-row:1;margin-left:16px!important;background:#00AEEF!important;color:#fff!important;border:1px solid #00AEEF!important;font-weight:700;padding:8px 16px!important}
#view-sales .ciu-newjo:hover{background:#0092C9!important;border-color:#0092C9!important}
#view-sales h3:has(> .ciu-newjo) .countchip{justify-self:start}
@media(max-width:700px){
  #view-sales h3:has(> .ciu-newjo){grid-template-columns:auto 1fr}
  #view-sales .ciu-autofit{grid-row:3}
  #view-sales .ciu-newjo{grid-column:1 / -1;grid-row:2;margin-left:0!important;justify-content:center}
}