/* A1b redizajn V6.2 (3D_V3/PLAN-DALSIA-FAZA/REDIZAJN-V6-2/PLAN.md časť 5): pohľad Tok v objednávkach tímu (skupiny Obchod, Výroba, Expedícia a ďalší krok v riadku).
   Súbor založil a v web/index.html pripojil R1 iba s touto hlavičkou; pravidlá píše vlastník balíka, tokeny sú v tokens-v62.css. */
/* Značky kreslí web/order-flow-view.js. Tabuľka má pevné stĺpce a vlastný vodorovný posun, stránka sa do strany nehýbe. Farby fáz a skupín
   podľa prototypu (OTVORIT-PROTOTYP-V6.2.html, TTONE a tgrp), tóny bubliny z tokenov V6.2. */
.of-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;border-top:1px solid var(--line-soft);padding:10px 20px;font-size:var(--text-sm)}
.of-scroll{min-width:0;overflow-x:auto;border-top:1px solid var(--line-soft)}
.of-table{width:100%;min-width:980px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px}
.of-col-case{width:24%}.of-col-due{width:92px}.of-col-deal{width:118px}.of-col-next{width:164px}
.of-table th{font-weight:600;text-align:left}

/* Hlavička: skupiny nad fázami, fázy ako šípky s počtom. */
.of-groups>*{padding:10px 4px 4px}
.of-groups>.of-group{border-bottom:2px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.of-group[data-group="sales"]{border-color:#e8c98e;color:var(--amber)}
.of-group[data-group="production"]{border-color:#a9c3f0;color:var(--blue)}
.of-group[data-group="dispatch"]{border-color:#a9dcc0;color:var(--green)}
.of-heads>th{padding:8px;color:var(--muted);font-size:var(--text-xs);vertical-align:bottom}
.of-heads>.of-head-case{padding-left:20px}
.of-heads>.of-head-next{padding-right:20px;text-align:right}
.of-heads>.of-stage{padding:6px 12px 6px 16px;background:#eef3f9;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.of-stage[data-group="production"]{background:#e3edff}
.of-heads>.of-stage[data-group="sales"]{padding-left:10px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.of-stage-label{display:block;color:#596d83;font-size:11px;font-weight:600;line-height:1.25}
.of-stage[data-group="production"] .of-stage-label{color:var(--blue)}
.of-stage>b{display:block;color:var(--ink);font-size:var(--text-md);font-variant-numeric:tabular-nums}
.of-stage>b>span{color:var(--muted);font-size:11px;font-weight:500}

/* Skupina riadkov a riadok zákazky. --of-ring je farba pozadia za bublinou a bodkou, aby čiara fázy nešla cez ne. */
.of-section-head>th{padding:14px 20px 6px;border-top:1px solid var(--line-soft);background:var(--surface-2);font-weight:400}
.of-section-head b{color:var(--ink);font-size:var(--text-sm)}
.of-section-head span{color:var(--muted);font-size:var(--text-xs)}
.of-row{--of-ring:var(--surface);cursor:pointer}
.of-row:hover{--of-ring:var(--surface-2);background:var(--surface-2)}
.of-row:focus-visible{outline:3px solid #93b4ff;outline-offset:-3px}
.of-row>*{padding:9px 8px;border-top:1px solid var(--line-soft);vertical-align:middle}
.of-row>.of-case{min-width:0;padding-left:20px}
.of-row.is-urgent>.of-case{box-shadow:inset 3px 0 0 #e0a43a}
.of-case-line{display:flex;align-items:baseline;gap:8px;min-width:0}
.of-link{color:var(--accent);font-weight:650;white-space:nowrap}
.of-title{min-width:0;overflow:hidden;color:var(--ink);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.of-sub{overflow:hidden;color:var(--muted);font-size:var(--text-xs);font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.of-msg{display:inline-flex;flex:none;align-items:center;gap:3px;padding:0 6px;border-radius:var(--radius-pill);background:var(--violet-bg);color:var(--violet);font-size:11px;font-weight:600;line-height:18px}
.of-due>strong{display:block;color:var(--ink);font-weight:600;white-space:nowrap}
.of-chip{display:inline-block;margin-top:2px;padding:0 6px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;line-height:18px;white-space:nowrap}
.of-row>.of-next{padding-right:20px;text-align:right}

/* Fázy riadku: polovičné čiary vľavo a vpravo od stredu bunky, tmavšie tam, kade kusy prešli. */
.of-cell{position:relative;text-align:center}
.of-cell::before,.of-cell::after{position:absolute;top:50%;height:2px;margin-top:-1px;background:#e3e9f1;content:""}
.of-cell::before{left:0;right:50%}
.of-cell::after{left:50%;right:0}
.of-cell[data-stage="deal"]::before,.of-cell[data-stage="sent"]::after{display:none}
.of-cell.is-in::before,.of-cell.is-out::after{background:#9fb2c8}
.of-pill{position:relative;z-index:1;display:inline-block;max-width:100%;overflow:hidden;padding:2px 8px;border-radius:var(--radius-pill);box-shadow:0 0 0 4px var(--of-ring);font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.of-dot{position:relative;z-index:1;display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--of-ring);box-shadow:0 0 0 1.5px #cfd9e5,0 0 0 4px var(--of-ring);vertical-align:middle}
.of-dot.is-past{background:#9fb2c8;box-shadow:0 0 0 1.5px #9fb2c8,0 0 0 4px var(--of-ring)}
:is(.of-pill,.of-chip)[data-tone="blue"]{background:var(--blue-bg);color:var(--blue)}
:is(.of-pill,.of-chip)[data-tone="amber"]{background:var(--amber-bg);color:var(--amber)}
:is(.of-pill,.of-chip)[data-tone="green"]{background:var(--green-bg);color:var(--green)}
:is(.of-pill,.of-chip)[data-tone="violet"]{background:var(--violet-bg);color:var(--violet)}
:is(.of-pill,.of-chip)[data-tone="red"]{background:var(--red-bg);color:var(--red)}
:is(.of-pill,.of-chip)[data-tone="gray"]{background:var(--gray-bg);color:var(--gray)}
.of-toggle[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}