/* os-polish.css — DW OS v6 "עומק חם" (14.11.2026, גולן: "חייב חווית UI משופרת — צבעים, אנימציות… גם הצבעים לא נראים טוב").
   שכבה אחרונה מעל ds.css + os.css. לא משנה מבנה, רק צבע, עומק ותנועה.
   עקרונות: שחור + זהב שמפניה נשארים המותג · כל תחום מקבל צבע אמיתי (פס, אייקון, רקע עדין) במקום אפור אחיד ·
   טקסט משני בהיר יותר (קריאות) · כרטיסים עם עומק ותגובה למגע · תנועה רק transform/opacity, מכבד reduced-motion. */

html.os{
  --bg:#08080a;--bg2:#0d0d10;--panel:#131317;--panel2:#1a1a1f;--panel3:#232329;
  --line:rgba(255,255,255,.085);--line2:rgba(255,255,255,.16);--line-gold:rgba(226,190,92,.38);
  --fg:#f6f3ec;--fg2:#dedad0;--muted:#b0aba0;--faint:#8d8980;
  --gold:#E8C268;--gold-hi:#f7dc98;--gold-lo:#b8914a;--gold-soft:rgba(232,194,104,.12);--gold-glow:rgba(232,194,104,.28);
  --ok:#4ED69B;--ok-soft:rgba(78,214,155,.13);--bad:#FF7A6B;--bad-soft:rgba(255,122,107,.13);--warn:#FFB547;--warn-soft:rgba(255,181,71,.13);
  --info:#5AB8FF;--info-soft:rgba(90,184,255,.13);
  --os-mute:rgba(246,243,236,.72);--os-faint:rgba(246,243,236,.48);--os-ink:#f6f3ec;--os-gold:#E8C268;
  --os-card:#131317;--os-card2:#1a1a1f;--os-hair:rgba(255,255,255,.085);
  --sh-lift:0 14px 34px -14px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04);
  --pol-ease:cubic-bezier(.16,1,.3,1);
}

/* ── רקע: שחור עמוק עם הילות צבע עדינות של חמשת התחומים (קבוע, לא זז בגלילה) ── */
html.os body{background:
  radial-gradient(900px 520px at 100% -8%,rgba(232,194,104,.11),transparent 62%),
  radial-gradient(760px 520px at -6% 18%,rgba(90,184,255,.06),transparent 60%),
  radial-gradient(700px 600px at 60% 108%,rgba(167,139,250,.06),transparent 62%),
  var(--bg) fixed}

/* ── טיפוגרפיה: כותרות חזקות, טקסט משני קריא ── */
html.os #view h2,html.os .ph-title{letter-spacing:-.01em}
html.os .muted,html.os #view .muted{color:var(--muted)}
html.os .eyebrow{color:var(--acc,var(--gold));font-weight:700;opacity:.95}
html.os .eyebrow .os-crumb{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor;padding-bottom:1px;transition:opacity .15s}
html.os .eyebrow .os-crumb:hover{opacity:.75}

/* ── כרטיסים ושורות: עומק, פס צבע של התחום, תגובה לריחוף/מגע ── */
html.os #view .card,html.os #view .row,html.os #view .tile,html.os .os-mtile{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -18px rgba(0,0,0,.9);
  transition:transform .22s var(--pol-ease),border-color .22s,box-shadow .22s,background .22s}
html.os #view a.row,html.os #view a.tile,html.os #view a.card,html.os #view .row[data-id],html.os .os-mtile{position:relative;overflow:hidden}
html.os #view a.row::after,html.os #view a.tile::after,html.os .os-mtile::after{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-radius:0 3px 3px 0;
  background:var(--pc,var(--acc,var(--gold)));opacity:.55;transition:opacity .2s,inset-block .25s var(--pol-ease)}
@media (hover:hover){
  html.os #view a.row:hover,html.os #view a.tile:hover,html.os #view a.card:hover,html.os .os-mtile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pc,var(--acc,var(--gold))) 45%,transparent);
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -20px color-mix(in srgb,var(--pc,var(--acc,var(--gold))) 40%,#000)}
  html.os #view a.row:hover::after,html.os #view a.tile:hover::after,html.os .os-mtile:hover::after{opacity:1;inset-block:6px}
}
html.os #view a.row:active,html.os #view a.tile:active,html.os .os-mtile:active{transform:scale(.985);transition-duration:.08s}

/* מספרים גדולים = זהב מבריק */
html.os #view .tile b,html.os .sum b,html.os .os-mtile b{background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── כפתורים: זהב ראשי עם ברק, משני שקוף, לחיצה מורגשת ── */
html.os #view button:not([class]),html.os #view button[class="sm"],html.os .sheet button:not([class]),html.os .sheet button[class="sm"]{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#17130a;border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 20px -10px var(--gold-glow);transition:transform .15s var(--pol-ease),box-shadow .2s,filter .2s}
html.os #view button:not([class]):not(:disabled):hover,html.os #view button[class="sm"]:not(:disabled):hover{filter:brightness(1.06)}
html.os #view button:not(:disabled):active,html.os .chip:active,html.os .os-chip:active{transform:scale(.965)}
html.os #view button.ghost,html.os .sheet button.ghost{background:rgba(255,255,255,.035);border:1px solid var(--line2);color:var(--fg2);box-shadow:none}
html.os #view button.ghost:hover{border-color:var(--line-gold);color:var(--gold)}

/* ── צ'יפים / לשוניות: מצב פעיל ברור ── */
html.os .chip{border-color:var(--line2);color:var(--fg2);transition:color .15s,border-color .15s,background .15s,transform .12s}
html.os .chip:hover{border-color:var(--line-gold);color:var(--fg)}
html.os .chip.on{color:#17130a!important;background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;border-color:transparent!important;font-weight:700}
html.os .subnav{background:rgba(8,8,10,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
html.os .subnav a{color:var(--muted)}html.os .subnav a:hover{color:var(--fg)}
html.os .subnav a.on{color:var(--gold)!important;font-weight:700}
html.os .subnav .pill{background:var(--gold-soft)!important;box-shadow:0 0 0 1px var(--line-gold) inset;transition:left .32s var(--pol-ease),width .32s var(--pol-ease)!important}

/* ── תגיות סטטוס: רקע רך בצבע, לא רק מסגרת ── */
html.os .badge{font-weight:600;border-color:transparent;background:rgba(255,255,255,.06);color:var(--fg2)}
html.os .b-active,html.os .b-paid,html.os .b-signed,html.os .b-won,html.os .b-approved,html.os .b-published{color:var(--ok)!important;background:var(--ok-soft)!important;border-color:transparent!important}
html.os .b-ready,html.os .b-question,html.os .b-lead,html.os .b-proposed,html.os .b-new,html.os .b-quote,html.os .b-quote_sent,html.os .b-quote_approved,html.os .b-agreement_sent,html.os .b-due,html.os .b-sent,html.os .b-review,html.os .b-in_production{color:var(--warn)!important;background:var(--warn-soft)!important;border-color:transparent!important}
html.os .b-late,html.os .b-lost,html.os .b-cancelled,html.os .b-arch{color:var(--bad)!important;background:var(--bad-soft)!important;border-color:transparent!important}

/* ── שדות קלט: מיקוד זהוב רך ── */
html.os input,html.os textarea,html.os select{background:rgba(255,255,255,.03);border-color:var(--line2);transition:border-color .15s,box-shadow .2s,background .15s}
html.os input:focus,html.os textarea:focus,html.os select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,194,104,.18);background:rgba(255,255,255,.05)}
html.os :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── ריק / טעינה ── */
html.os .empty{border-color:var(--line2);background:rgba(255,255,255,.02);color:var(--muted);text-align:center}
html.os .skel,html.os .os-skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.09) 40%,rgba(255,255,255,.04) 80%) 0 0/220% 100%;animation:pol-shim 1.3s linear infinite}
@keyframes pol-shim{to{background-position:-220% 0}}

/* ── סרגל עליון + כפתור חזרה (os-nav.js) ── */
html.os .os-top{background:rgba(8,8,10,.8);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(232,194,104,.12)}
.os-back{display:inline-flex;align-items:center;gap:4px;width:auto;flex:none;min-height:44px;min-width:44px;margin:0;padding:0 12px 0 10px;border-radius:12px;
  background:rgba(232,194,104,.1);border:1px solid rgba(232,194,104,.3);color:var(--gold,#E8C268);font:700 14px Rubik,system-ui,sans-serif;cursor:pointer;box-shadow:none;
  transition:background .15s,transform .15s var(--pol-ease,ease),opacity .2s}
.os-back[hidden]{display:none}
.os-back i{display:grid;place-items:center}.os-back i svg{width:18px;height:18px;transition:transform .2s var(--pol-ease,ease)}
.os-back:hover{background:rgba(232,194,104,.18)}.os-back:hover i svg{transform:translateX(3px)}
.os-back:active{transform:scale(.94)}
@media (max-width:420px){.os-back span{display:none}.os-back{padding:0 10px}html.os .os-logo b{display:none}}

/* ── מעבר מסך ── */
@keyframes pol-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view.os-enter>*{animation:pol-in .42s var(--pol-ease) both}
#view.os-enter>*:nth-child(2){animation-delay:.04s}#view.os-enter>*:nth-child(3){animation-delay:.08s}#view.os-enter>*:nth-child(4){animation-delay:.12s}#view.os-enter>*:nth-child(n+5){animation-delay:.16s}

/* ── טבלאות ── */
html.os #view table{border-collapse:separate;border-spacing:0}
html.os #view th{color:var(--muted);font-weight:600;background:rgba(255,255,255,.025)}
html.os #view tbody tr{transition:background .15s}html.os #view tbody tr:hover{background:rgba(232,194,104,.05)}

/* ── גלילה ── */
html.os ::-webkit-scrollbar{width:10px;height:10px}html.os ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
html.os ::-webkit-scrollbar-thumb:hover{background:rgba(232,194,104,.35);background-clip:padding-box}
html.os ::selection{background:rgba(232,194,104,.35);color:#fff}

@media (prefers-reduced-motion:reduce){
  #view.os-enter>*{animation:none}
  html.os #view a.row,html.os #view a.tile,html.os .os-mtile,html.os .chip,html.os #view button{transition:none!important}
  html.os .skel,html.os .os-skel{animation:none}
}