/* לוּנָה — back office, same world: emerald fields, coral signals, sharp, space-only */
.adm-body{padding:0;background:var(--em);min-height:100vh}
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-art{background:var(--co);color:var(--em);padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art .wordmark{color:var(--co-deep);position:absolute;inset-block-end:-3vw;inset-inline-start:-1vw;font-size:22vw}
.login-art h1{font-family:var(--f-display);font-size:var(--s5);line-height:1;max-width:9ch;position:relative}
.login-art p{position:relative;max-width:34ch;font-size:1.125rem}
.login-form{display:grid;align-content:center;gap:16px;padding:48px;max-width:520px;width:100%;justify-self:center}
.login-form h2{font-family:var(--f-display);font-size:var(--s3);line-height:1.1}
.login-form .field input{background:var(--iv)}
.login-form .note{font-size:.875rem;color:var(--iv-dim)}
.adm{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--em-deep);padding:22px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.side .logo{background:none;padding:6px 8px}
.side nav{display:grid;gap:2px}
.side nav a{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding-inline:12px;text-decoration:none;color:var(--iv-dim);transition:background .2s,color .2s}
.side nav a:hover{background:rgba(246,241,233,.06);color:var(--iv)}
.side nav a[aria-current="page"]{background:var(--co);color:var(--em);font-weight:500}
.side nav a b{font-weight:500;font-size:.75rem;background:var(--co);color:var(--em);min-width:22px;height:22px;display:grid;place-items:center}
.side nav a[aria-current="page"] b{background:var(--em);color:var(--iv)}
.side-foot{margin-block-start:auto;display:grid;gap:6px;font-size:.875rem}
.side-foot a,.side-foot button{color:var(--iv-dim);text-align:start;min-height:36px;text-decoration:underline;text-underline-offset:4px}
.main{padding:28px 36px 60px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-block-end:28px;flex-wrap:wrap}
.top h1{font-family:var(--f-display);font-size:var(--s4);line-height:1}
.top p{color:var(--iv-dim);margin-block-start:6px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.kpi{background:var(--em-lift);padding:18px 18px 20px;display:grid;gap:6px}
.kpi:first-child{background:var(--co);color:var(--em)}
.kpi span{font-size:.8125rem;opacity:.8}
.kpi b{font-family:var(--f-display);font-size:var(--s3);line-height:1;font-variant-numeric:tabular-nums}
.kpi small{font-size:.75rem;opacity:.75}
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:4px;margin-block-start:4px}
.box{background:var(--em-lift);padding:20px}
.box h2{font-family:var(--f-display);font-size:var(--s1);margin-block-end:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.box h2 small{font-family:var(--f-ui);font-weight:400;font-size:.8125rem;color:var(--iv-dim)}
.chart{width:100%;height:auto;overflow:visible}
.rows{display:grid;gap:2px}
.row{display:grid;gap:12px;align-items:center;padding:10px 12px;background:rgba(246,241,233,.04);min-height:56px}
.row:nth-child(even){background:rgba(246,241,233,.07)}
.row.head{background:none;min-height:0;padding-block:4px;font-size:.75rem;color:var(--iv-dim)}
.row img{width:44px;height:55px;object-fit:cover;background:var(--em)}
.row .nm{font-weight:500;line-height:1.3}
.row .sub{font-size:.8125rem;color:var(--iv-dim)}
.r-prod{grid-template-columns:44px minmax(0,2fr) 1fr 1fr .8fr 90px 150px}
.r-ord{grid-template-columns:110px minmax(0,1.6fr) 1fr .9fr 1fr 110px}
.r-low{grid-template-columns:minmax(0,1fr) auto auto}
.tag{display:inline-flex;align-items:center;min-height:26px;padding-inline:10px;font-size:.75rem;font-weight:500;background:rgba(246,241,233,.12);white-space:nowrap}
.tag.s-חדש{background:var(--co);color:var(--em)}
.tag.s-בטיפול{background:var(--gold);color:var(--em)}
.tag.s-נשלח{background:var(--iv);color:var(--em)}
.tag.s-נמסר{background:rgba(246,241,233,.12);color:var(--iv)}
.abtn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding-inline:12px;background:rgba(246,241,233,.08);font-size:.875rem;gap:6px;text-decoration:none;transition:background .2s,color .2s}
.abtn:hover{background:var(--iv);color:var(--em)}
.abtn.danger:hover{background:var(--co);color:var(--em)}
.acts{display:flex;gap:4px;justify-content:flex-end}
.switch{position:relative;width:46px;height:26px;background:rgba(246,241,233,.15);flex:none;transition:background .25s}
.switch::after{content:"";position:absolute;inset-block-start:4px;inset-inline-start:4px;width:18px;height:18px;background:var(--iv);transition:transform .3s var(--ease)}
.switch[aria-checked="true"]{background:var(--co)}
.switch[aria-checked="true"]::after{transform:translateX(-20px);background:var(--em)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-block-end:16px}
.tabs button{min-height:40px;padding-inline:14px;background:rgba(246,241,233,.07);font-size:.875rem}
.tabs button[aria-pressed="true"]{background:var(--iv);color:var(--em)}
.empty{padding:30px;color:var(--iv-dim)}
/* side sheet */
.sheet{position:fixed;inset-block:0;inset-inline-end:0;z-index:100;width:min(100%,640px);background:var(--em-deep);display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .5s var(--ease);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet .drawer-body{padding-block-start:4px}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form .field label,.form .lbl{color:var(--iv-dim)}
.form .field input,.form .field select,.form .field textarea{background:var(--iv);color:var(--em)}
.vars{display:grid;gap:4px}
.var-ed{display:grid;grid-template-columns:1fr 110px 44px;gap:4px}
.var-ed input{min-height:44px;padding:8px 12px;background:var(--iv);color:var(--em);border:0}
.img-pick{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.img-pick .prev{width:120px;height:150px;object-fit:cover;background:var(--em);border-radius:100vmax 100vmax 0 0}
.gal{display:flex;flex-wrap:wrap;gap:4px;margin-block-start:8px}
.gal button{width:48px;height:60px;padding:0;opacity:.7;transition:opacity .2s}
.gal button:hover,.gal button[aria-pressed="true"]{opacity:1;outline:2px solid var(--co);outline-offset:1px}
.gal img{width:100%;height:100%;object-fit:cover}
.upl{display:inline-flex;align-items:center;min-height:42px;padding-inline:14px;background:var(--co);color:var(--em);font-weight:500;cursor:pointer;font-size:.875rem}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--em-deep);padding-block:14px}
.ord-items{display:grid;gap:2px;margin-block:12px}
.ord-items .row{grid-template-columns:44px 1fr auto}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 14px;font-size:.9375rem}
.kv dt{color:var(--iv-dim)}
.kv dd{margin:0}
.status-set{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-block:14px}
.status-set button{min-height:48px;background:rgba(246,241,233,.07);font-weight:500}
.status-set button[aria-pressed="true"]{background:var(--co);color:var(--em)}
/* try-on analytics */
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(120px,1.2fr) 3fr 70px;gap:12px;align-items:center;font-size:.875rem}
.bar-track{position:relative;height:22px;background:rgba(246,241,233,.05)}
.bar-track i{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(246,241,233,.25)}
.bar-track u{position:absolute;inset-block:0;inset-inline-start:0;background:var(--co);text-decoration:none}
.bar .conv{text-align:end;font-variant-numeric:tabular-nums;font-weight:500}
.legend{display:flex;gap:16px;font-size:.75rem;color:var(--iv-dim)}
.legend i{display:inline-block;width:10px;height:10px;margin-inline-end:6px;vertical-align:-1px}
.tune{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.tune-prev{background:var(--em);aspect-ratio:4/5;width:100%;display:block}
.stones{display:flex;gap:4px;flex-wrap:wrap}
.stones button{width:40px;height:40px;transform:rotate(45deg) scale(.72);transition:transform .25s}
.stones button[aria-pressed="true"]{transform:rotate(45deg) scale(.95);outline:2px solid var(--iv);outline-offset:3px}
.seg-d{display:flex;gap:4px;flex-wrap:wrap}
.seg-d button{min-height:42px;padding-inline:14px;background:rgba(246,241,233,.07);font-size:.875rem}
.seg-d button[aria-pressed="true"]{background:var(--iv);color:var(--em)}
.danger-zone{background:rgba(255,122,89,.12);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.adm-menu{display:none}
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.tune{grid-template-columns:minmax(0,1fr)}
  .kpi b{font-size:var(--s2)}
  .r-prod{grid-template-columns:44px minmax(0,2fr) 1fr 90px 110px}
  .r-prod .c-col,.r-prod .c-stock{display:none}
}
@media (max-width:899px){
  .login{grid-template-columns:1fr}
  .login-art{min-height:38vh;padding:28px}
  .login-art h1{font-size:var(--s4)}
  .login-form{padding:28px 20px}
  .adm{grid-template-columns:minmax(0,1fr)}
  .login-art .wordmark{display:none}
  .side{position:sticky;top:0;z-index:50;height:auto;flex-direction:row;align-items:center;gap:8px;padding:8px 10px;overflow-x:auto;scrollbar-width:none}
  .side .logo{flex:none;font-size:var(--s1)}
  .side .logo small{display:none}
  .side nav{display:flex;gap:2px}
  .side nav a{flex:none;min-height:42px;padding-inline:10px;font-size:.875rem}
  .side nav a b{display:none}
  .side-foot{display:none}
  .main{padding:20px 14px 60px}
  .top h1{font-size:var(--s3)}
  .r-ord{grid-template-columns:1fr auto;grid-auto-flow:row}
  .r-ord .c-date,.r-ord .c-total,.r-ord .c-del{display:none}
  .r-ord.head{display:none}
  .r-prod{grid-template-columns:44px minmax(0,1fr) 60px}
  .r-prod .c-price,.r-prod .c-pub{display:none}
  .r-prod.head{display:none}
  .r-prod .acts{grid-column:1 / -1;justify-content:flex-start}
  .bar{grid-template-columns:1fr 60px;}
  .bar .bar-track{grid-column:1 / -1;grid-row:2}
  .form .two,.form .three{grid-template-columns:1fr}
  .status-set{grid-template-columns:1fr 1fr}
}
