/* ALTEK Orders V14.17 — isolated visual adaptation of the approved Dashboard design.
   This file never targets Plan, Dashboard, or business state calculations. */
.workspace > .wrap:has(> #orderSearchCard){
  --ao-bg:#F2F8F9;--ao-card:#F9FCFD;--ao-raised:#F5FAFB;
  --ao-line:#D6E4E7;--ao-ink:#293741;--ao-muted:#54666C;
  --ao-accent:#518D80;--ao-hover:#D6E6E1;
  --ao-shadow:0 2px 5px rgba(24,44,56,.025),0 16px 38px rgba(24,44,56,.065);
  --ao-shadow-hover:0 9px 18px rgba(24,44,56,.055),0 24px 48px rgba(24,44,56,.12);
  min-height:100%;padding:16px;border-radius:18px;background:var(--ao-bg);
  color:var(--ao-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard){
  --ao-bg:#142833;--ao-card:#1B2E38;--ao-raised:#2A4350;
  --ao-line:#43606D;--ao-ink:#EAF4F5;--ao-muted:#BCD0D7;
  --ao-accent:#87BDB3;--ao-hover:#36545D;
  --ao-shadow:0 2px 5px rgba(0,0,0,.14),0 16px 36px rgba(0,0,0,.22);
  --ao-shadow-hover:0 10px 24px rgba(0,0,0,.2),0 26px 48px rgba(0,0,0,.34);
}
.workspace > .wrap:has(> #orderSearchCard) .page-head{margin-bottom:18px}
.workspace > .wrap:has(> #orderSearchCard) .page-title{color:var(--ao-ink)!important;letter-spacing:-.035em}
.workspace > .wrap:has(> #orderSearchCard) .page-subtitle,.workspace > .wrap:has(> #orderSearchCard) .muted{color:var(--ao-muted)}
.workspace > .wrap:has(> #orderSearchCard) > .card{background:var(--ao-card)!important;border:1px solid var(--ao-line)!important;border-radius:18px!important;box-shadow:var(--ao-shadow)!important;padding:18px 20px;margin-bottom:14px}
.workspace > .wrap:has(> #orderSearchCard) > .card h2{color:var(--ao-ink);letter-spacing:-.02em}
.workspace > .wrap:has(> #orderSearchCard) .order-filters{gap:8px;margin-bottom:12px;padding:5px 2px 9px}
.workspace > .wrap:has(> #orderSearchCard) .order-filter{background:var(--ao-raised)!important;border:1px solid var(--ao-line)!important;color:var(--ao-ink)!important;border-radius:12px!important;padding:10px 14px;font-size:12px;font-weight:650;min-height:40px;transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}
.workspace > .wrap:has(> #orderSearchCard) .order-filter:not(.on):hover{background:var(--ao-hover)!important;border-color:var(--ao-accent)!important;transform:translateY(-1px)}
.workspace > .wrap:has(> #orderSearchCard) .order-filter.on{background:var(--ao-hover)!important;border-color:var(--ao-accent)!important;box-shadow:inset 3px 0 0 var(--ao-accent);font-weight:800}
.workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on{background:#F4E9CD!important;color:#805D20!important;border-color:#DABF87!important;box-shadow:inset 3px 0 0 #B58B38}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on{background:#453A29!important;color:#F1D29B!important;border-color:#9F8251!important}
.workspace > .wrap:has(> #orderSearchCard) #orderSearch{background:var(--ao-raised);color:var(--ao-ink);border:1px solid var(--ao-line);border-radius:11px;min-height:46px}
.workspace > .wrap:has(> #orderSearchCard) #orderSearch:focus{border-color:var(--ao-accent);outline:2px solid var(--ao-accent);outline-offset:1px}
.workspace > .wrap:has(> #orderSearchCard) .btn{transition:background-color .22s,border-color .22s,box-shadow .22s,transform .22s}
.workspace > .wrap:has(> #orderSearchCard) .btn:hover{transform:translateY(-1px)}
/* Only actionable rows inside the actual Orders page get the new click surface. */
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row]{
  display:flex;align-items:center;min-width:0;min-height:96px;
  margin:9px 0!important;padding:15px 18px!important;
  border:1px solid var(--ao-line)!important;border-radius:13px!important;
  background:var(--ao-card);color:var(--ao-ink);
  box-shadow:0 1px 5px rgba(15,40,48,.045);cursor:pointer;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row] > div:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row] b{font-size:14px;font-weight:750}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row] .muted{margin-top:5px;font-size:12px;line-height:1.55}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row]:hover,
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row]:focus-visible{
  background:var(--ao-hover);border-color:var(--ao-accent)!important;
  box-shadow:inset 3px 0 0 var(--ao-accent),0 5px 16px rgba(14,40,48,.12);
  transform:translateY(-1px);outline:none;
}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row]:active{transform:translateY(0)}
/* Keep the original inline openOrder handler in the DOM (no API/router rewrite),
   but never render its former Open button. */
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row] > .actions:has(> button[onclick^="openOrder("]){display:none!important}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row].special-control-row{background:linear-gradient(90deg,rgba(191,151,65,.13),var(--ao-card) 55%)}
.workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row].special-control-row:hover{background:var(--ao-hover)}
.workspace > .wrap:has(> #orderSearchCard) .status{border-radius:999px;font-size:11px;font-weight:700;padding:5px 9px}
.workspace > .wrap:has(> #orderSearchCard) .status.ready{background:#E7F4EC;color:#2F7A4A}
.workspace > .wrap:has(> #orderSearchCard) .status.pick,.workspace > .wrap:has(> #orderSearchCard) .status.check{background:#E8F2FA;color:#356F9B}
.workspace > .wrap:has(> #orderSearchCard) .status.problem{background:#FBEAEA;color:#AD4C47}
.workspace > .wrap:has(> #orderSearchCard) .status.wait,.workspace > .wrap:has(> #orderSearchCard) .status.quarantine{background:#F1F4F6;color:#536D7C}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.ready{background:#21483B;color:#BEE9CC}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.pick,html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.check{background:#213F52;color:#C3E4FA}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.problem{background:#4B3136;color:#F2B8B3}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.wait,html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .status.quarantine{background:#2A3942;color:#DAE6ED}
/* Shared approved staged motion, scoped to the first appearance of Orders only. */
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter .page-head{animation:altek-orders-enter 1s cubic-bezier(.22,.78,.17,1) both}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter > .card{animation:altek-orders-enter .82s cubic-bezier(.22,.78,.17,1) both;animation-delay:.16s}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter > .card:nth-of-type(2){animation-delay:.30s}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter #orderRows > [data-order-row]{animation:altek-orders-item .7s cubic-bezier(.22,.78,.17,1) both;animation-delay:.39s}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter #orderRows > [data-order-row]:nth-child(2){animation-delay:.48s}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter #orderRows > [data-order-row]:nth-child(3){animation-delay:.57s}
.workspace > .wrap:has(> #orderSearchCard).altek-orders-enter #orderRows > [data-order-row]:nth-child(n+4){animation-delay:.66s}
@keyframes altek-orders-enter{from{opacity:0;filter:blur(6px);transform:translateY(7px) scale(.985)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes altek-orders-item{from{opacity:0;filter:blur(3px);transform:translateY(7px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
/* Modal layers are attached directly to body; mark only those created in Orders. */
.modal.altek-order-modal{--ao-modal-card:#E9EBEA;--ao-modal-raised:#DFE3E2;--ao-modal-line:#C3CBCA;--ao-modal-ink:#293741;--ao-modal-muted:#54666C;--ao-modal-hover:#D6E6E1;--ao-modal-accent:#518D80;
  background:rgba(8,23,32,.67)!important;align-items:center;padding:16px;backdrop-filter:blur(3px)}
html[data-theme="dark"] .modal.altek-order-modal{--ao-modal-card:#1B2E38;--ao-modal-raised:#2A4350;--ao-modal-line:#43606D;--ao-modal-ink:#EAF4F5;--ao-modal-muted:#BCD0D7;--ao-modal-hover:#36545D;--ao-modal-accent:#87BDB3}
.modal.altek-order-modal > .sheet{background:var(--ao-modal-card)!important;color:var(--ao-modal-ink)!important;border:1px solid var(--ao-modal-line);border-radius:20px!important;box-shadow:0 24px 80px rgba(0,0,0,.29);width:min(890px,100%);max-height:calc(100dvh - 32px);padding:20px;overscroll-behavior:contain}
.modal.altek-order-modal > .sheet .modal-head{background:var(--ao-modal-card)!important;color:var(--ao-modal-ink);border-color:var(--ao-modal-line)}
.modal.altek-order-modal > .sheet .card{background:var(--ao-modal-card)!important;color:var(--ao-modal-ink);border:1px solid var(--ao-modal-line);border-radius:18px;box-shadow:0 4px 18px rgba(12,32,40,.065)}
.modal.altek-order-modal > .sheet .muted{color:var(--ao-modal-muted)}
.modal.altek-order-modal > .sheet .btn{transition:background-color .22s,border-color .22s,box-shadow .22s,transform .22s}
.modal.altek-order-modal > .sheet .btn:hover{background:var(--ao-modal-hover);border-color:var(--ao-modal-accent);transform:translateY(-1px)}
.modal.altek-order-modal > .sheet :focus-visible{outline:2px solid var(--ao-modal-accent);outline-offset:2px}
.modal.altek-order-modal.altek-order-modal-enter{animation:altek-orders-backdrop-in .46s ease both}
.modal.altek-order-modal.altek-order-modal-enter > .sheet{animation:altek-orders-modal-in .46s cubic-bezier(.22,.78,.17,1) both}
.modal.altek-order-modal.altek-order-modal-exit{animation:altek-orders-backdrop-out .21s ease both}
.modal.altek-order-modal.altek-order-modal-exit > .sheet{animation:altek-orders-modal-out .21s ease both;pointer-events:none}
@keyframes altek-orders-modal-in{from{opacity:0;filter:blur(5px);transform:translateY(12px) scale(.94)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes altek-orders-modal-out{from{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}to{opacity:0;filter:blur(3px);transform:translateY(6px) scale(.97)}}
@keyframes altek-orders-backdrop-in{from{background-color:rgba(8,23,32,0);backdrop-filter:blur(0)}to{background-color:rgba(8,23,32,.67);backdrop-filter:blur(3px)}}
@keyframes altek-orders-backdrop-out{from{opacity:1}to{opacity:0}}
@media(max-width:820px){
  .workspace > .wrap:has(> #orderSearchCard){padding:10px}
  .workspace > .wrap:has(> #orderSearchCard) > .card{padding:14px!important}
  .workspace > .wrap:has(> #orderSearchCard) #orderRows > [data-order-row]{padding:14px!important;min-height:86px}
  .workspace > .wrap:has(> #orderSearchCard) .order-filter{padding:9px 12px}
  .modal.altek-order-modal{align-items:flex-end;padding:8px}
  .modal.altek-order-modal > .sheet{max-height:calc(100dvh - 16px);border-radius:18px 18px 8px 8px!important;padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .workspace > .wrap:has(> #orderSearchCard) *, .modal.altek-order-modal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .workspace > .wrap:has(> #orderSearchCard).altek-orders-enter,.modal.altek-order-modal{animation:none!important;filter:none!important;opacity:1!important}
}
/* Additional order-related windows (document/photo actions) preserve their native layout. */
.modal.altek-order-extra-modal:not(#modal){animation:altek-orders-backdrop-in .46s ease both}
.modal.altek-order-extra-modal:not(#modal) > .sheet{animation:altek-orders-modal-in .46s cubic-bezier(.22,.78,.17,1) both}
@media(prefers-reduced-motion:reduce){
  .modal.altek-order-extra-modal,.modal.altek-order-extra-modal > .sheet{animation:none!important;opacity:1!important;filter:none!important}
}

/* S5 — stable filter paint across synchronous SPA rerenders.
   :has() binds the visual tokens before the S4 observer adds .workspace > .wrap:has(> #orderSearchCard).
   This selector can only match the actual Orders route, never Plan or Dashboard. */
html .workspace > .wrap:has(> #orderSearchCard){
  --ao-raised:#F5FAFB;--ao-line:#D6E4E7;--ao-ink:#293741;
  --ao-hover:#D6E6E1;--ao-accent:#518D80;
}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard){
  --ao-raised:#2A4350;--ao-line:#43606D;--ao-ink:#EAF4F5;
  --ao-hover:#36545D;--ao-accent:#87BDB3;
}
/* Apply the final color at once, not interpolated through the legacy state.
   Preserve the approved motion on shadow/transform and keyboard focus. */
.workspace > .wrap:has(> #orderSearchCard) .order-filter,
html .workspace > .wrap:has(> #orderSearchCard) .order-filter{
  -webkit-appearance:none;appearance:none;
  background:var(--ao-raised)!important;
  border:1px solid var(--ao-line)!important;
  color:var(--ao-ink)!important;
  border-radius:12px!important;
  transition:box-shadow 180ms ease,transform 180ms ease!important;
}
.workspace > .wrap:has(> #orderSearchCard) .order-filter.on,
html .workspace > .wrap:has(> #orderSearchCard) .order-filter.on{
  background:var(--ao-hover)!important;
  border-color:var(--ao-accent)!important;
  box-shadow:inset 3px 0 0 var(--ao-accent)!important;
}
.workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on,
html .workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on{
  background:#F4E9CD!important;
  color:#805D20!important;
  border-color:#DABF87!important;
  box-shadow:inset 3px 0 0 #B58B38!important;
}
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on,
html[data-theme="dark"] .workspace > .wrap:has(> #orderSearchCard) .order-filter.special.on{
  background:#453A29!important;
  color:#F1D29B!important;
  border-color:#9F8251!important;
}
.workspace > .wrap:has(> #orderSearchCard) .order-filter:not(.on):hover,
html .workspace > .wrap:has(> #orderSearchCard) .order-filter:not(.on):hover{
  background:var(--ao-hover)!important;
  border-color:var(--ao-accent)!important;
}
.workspace > .wrap:has(> #orderSearchCard) .order-filter:focus:not(:focus-visible),
html .workspace > .wrap:has(> #orderSearchCard) .order-filter:focus:not(:focus-visible){outline:none}
.workspace > .wrap:has(> #orderSearchCard) .order-filter:focus-visible,
html .workspace > .wrap:has(> #orderSearchCard) .order-filter:focus-visible{
  outline:2px solid var(--ao-accent);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .workspace > .wrap:has(> #orderSearchCard) .order-filter,
  html .workspace > .wrap:has(> #orderSearchCard) .order-filter{
    transition:none!important;animation:none!important;
  }
}


/* S6 — first-frame geometry for the actual ORDER modal only.
   The order detail already contains .altek0549-order-hero when renderModal()
   inserts #modal, so these rules apply in the browser's *first style calculation*
   (without waiting for the async Orders MutationObserver to add a class).
   The existing S5 460/210ms animation and native actions are unchanged. */
#modal:has(.altek0549-order-hero){
  --ao-modal-card:#E9EBEA;--ao-modal-raised:#DFE3E2;
  --ao-modal-line:#C3CBCA;--ao-modal-ink:#293741;
  --ao-modal-muted:#54666C;--ao-modal-hover:#D6E6E1;
  --ao-modal-accent:#518D80;
  background:rgba(8,23,32,.67)!important;
  align-items:center;
  padding:16px;
  backdrop-filter:blur(3px);
}
html[data-theme="dark"] #modal:has(.altek0549-order-hero){
  --ao-modal-card:#1B2E38;--ao-modal-raised:#2A4350;
  --ao-modal-line:#43606D;--ao-modal-ink:#EAF4F5;
  --ao-modal-muted:#BCD0D7;--ao-modal-hover:#36545D;
  --ao-modal-accent:#87BDB3;
}
/* Explicit height is intentional: async photos, audit and source documents
   change only the scrollable content, never the modal's outer box or top.
   scrollbar-gutter prevents scrollbar introduction from changing content width. */
#modal:has(.altek0549-order-hero) > .sheet,
#modal.altek-order-modal > .sheet{
  box-sizing:border-box;
  flex:0 1 auto;
  width:min(890px, calc(100vw - 32px))!important;
  height:min(760px, calc(100dvh - 32px))!important;
  min-height:0;
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  background:var(--ao-modal-card)!important;
  color:var(--ao-modal-ink)!important;
  border:1px solid var(--ao-modal-line)!important;
  border-radius:20px!important;
  padding:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.29);
}
#modal:has(.altek0549-order-hero) > .sheet .modal-head{
  background:var(--ao-modal-card)!important;
  color:var(--ao-modal-ink);
  border-color:var(--ao-modal-line);
}
#modal:has(.altek0549-order-hero) > .sheet .card{
  background:var(--ao-modal-card)!important;
  color:var(--ao-modal-ink);
  border:1px solid var(--ao-modal-line);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(12,32,40,.065);
}
#modal:has(.altek0549-order-hero) > .sheet .muted{color:var(--ao-modal-muted)}
@media(max-width:820px){
  #modal:has(.altek0549-order-hero){align-items:flex-end;padding:8px}
  #modal:has(.altek0549-order-hero) > .sheet,
  #modal.altek-order-modal > .sheet{
    width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:18px 18px 8px 8px!important;
    padding:14px;
  }
}
/* Reduced-motion users get the final fixed geometry with no reveal effect. */
@media(prefers-reduced-motion:reduce){
  #modal:has(.altek0549-order-hero),
  #modal:has(.altek0549-order-hero) > .sheet{
    animation:none!important;transition:none!important;
    opacity:1!important;filter:none!important;transform:none!important;
  }
}

/* S7 — order rows are styled from persistent native DOM structure.
   Background polling/realtime patches may strip JS-applied classes, but the
   route and list identifiers remain; therefore hover never reverts to legacy.
   No changes to data polling or workflow actions. */

/* ALTEK 0.5.64 R3 — special-control confirmation dialog / UI-MODAL-01 */
.altek-sc-confirm-overlay{
  --sc-surface:#E9EBEA;--sc-ink:#293741;--sc-muted:#54666C;
  --sc-line:#C3CBCA;--sc-accent:#518D80;
  position:fixed;inset:0;z-index:15000;display:grid;place-items:center;
  padding:16px;background:rgba(8,23,32,.67);backdrop-filter:blur(3px);
}
html[data-theme="dark"] .altek-sc-confirm-overlay{
  --sc-surface:#1B2E38;--sc-ink:#EAF4F5;--sc-muted:#BCD0D7;
  --sc-line:#43606D;--sc-accent:#87BDB3;
}
.altek-sc-confirm-surface{
  width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  padding:22px;border:1px solid var(--sc-line);border-radius:20px;
  background:var(--sc-surface);color:var(--sc-ink);
  box-shadow:0 24px 80px rgba(0,0,0,.29);
}
.altek-sc-confirm-header{padding-bottom:14px;border-bottom:1px solid var(--sc-line)}
.altek-sc-confirm-eyebrow{display:block;margin-bottom:7px;color:var(--sc-accent);font-size:11px;font-weight:750;letter-spacing:.075em}
.altek-sc-confirm-header h2{font-size:18px;line-height:1.3;margin:0;font-weight:750;color:var(--sc-ink)}
.altek-sc-confirm-surface p{margin:16px 0 0;color:var(--sc-ink);font-size:13px;line-height:1.65}
.altek-sc-confirm-surface p.altek-sc-confirm-note{color:var(--sc-muted);font-size:12px}
.altek-sc-confirm-actions{margin-top:22px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px}
.altek-sc-confirm-actions .btn{min-height:40px;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;
  transition:background-color .22s,border-color .22s,box-shadow .22s,transform .22s}
.altek-sc-confirm-actions .btn:enabled:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.altek-sc-confirm-actions .btn:focus-visible{outline:2px solid var(--sc-accent);outline-offset:2px}
.altek-sc-confirm-overlay.is-enter{animation:altek-orders-backdrop-in .46s ease both}
.altek-sc-confirm-overlay.is-enter .altek-sc-confirm-surface{animation:altek-orders-modal-in .46s cubic-bezier(.22,.78,.17,1) both}
.altek-sc-confirm-overlay.is-exit{animation:altek-orders-backdrop-out .21s ease both}
.altek-sc-confirm-overlay.is-exit .altek-sc-confirm-surface{animation:altek-orders-modal-out .21s ease both;pointer-events:none}
@media(max-width:520px){
 .altek-sc-confirm-overlay{padding:12px;place-items:end center}
 .altek-sc-confirm-surface{width:100%;border-radius:18px;padding:19px}
 .altek-sc-confirm-actions{display:grid;grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
 .altek-sc-confirm-overlay,.altek-sc-confirm-surface{animation:none!important;transition:none!important;filter:none!important}
}