/* ==========================================================================
   רון ירקות — backoffice stylesheet

   Shares design 04's warm market palette (sand/kraft ground, tomato red, leaf
   green, morning yellow) but dialled down: this is a tool Ron uses every
   morning, not a shopfront. Calm surfaces, big targets, obvious state.

   Self-contained. No external requests, no webfonts.
   RTL throughout — logical properties only, never left/right.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */

:root{
  /* ground + surfaces */
  --bg:            #f5f1e6;   /* warm sand */
  --surface:       #fffdf8;
  --surface-2:     #efe9da;
  --surface-3:     #e5dcc8;
  --line:          #ddd3bd;
  --line-soft:     #e9e1d0;

  /* ink */
  --text:          #23301f;
  --muted:         #6b7364;
  --faint:         #8d9484;

  /* brand */
  --leaf:          #2f6b35;
  --leaf-strong:   #234f28;
  --leaf-soft:     #e4efdf;
  --tomato:        #c23b22;
  --tomato-soft:   #fbe6e0;
  --sun:           #d9a021;
  --sun-soft:      #fdf1d6;
  --kraft:         #a9743f;

  /* semantic */
  --ok:            #2f6b35;
  --ok-soft:       #e4efdf;
  --warn:          #9a6708;
  --warn-soft:     #fdf1d6;
  --danger:        #b3301c;
  --danger-soft:   #fbe1db;
  --ring:          #d9a021;

  /* geometry */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* type */
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;
  --font: "Assistant","Rubik","Heebo","Arial Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shadow-sm: 0 1px 2px rgb(43 34 18 / .07);
  --shadow-md: 0 4px 14px rgb(43 34 18 / .09);
  --shadow-lg: 0 14px 38px rgb(43 34 18 / .14);

  --side-w: 248px;
  --top-h: 64px;
  --dur: .18s;

  /* Aliases — the view modules were written against the storefront's `--c-*`
     naming. Mapping them here keeps both vocabularies working. */
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-surface-2: var(--surface-2);
  --c-border: var(--line);
  --c-text: var(--text);
  --c-text-muted: var(--muted);
  --c-brand: var(--leaf);
  --c-brand-strong: var(--leaf-strong);
  --c-brand-soft: var(--leaf-soft);
  --c-accent: var(--tomato);
  --c-success: var(--ok);
  --c-success-soft: var(--ok-soft);
  --c-warn: var(--warn);
  --c-warn-soft: var(--warn-soft);
  --c-danger: var(--danger);
  --c-danger-soft: var(--danger-soft);
}

/* ------------------------------------------------------------- 2. base */

*,*::before,*::after{ box-sizing:border-box }

/* Component `display` rules below out-specify the UA's [hidden] rule, which left
   hidden error slots and badges visible. This has to win. */
[hidden]{ display:none!important }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.55;
  min-block-size:100dvh;
}

img{ max-inline-size:100%; block-size:auto }   /* intrinsic w/h would defeat aspect-ratio */

h1,h2,h3,h4{ margin:0; line-height:1.25; letter-spacing:-.01em }
p{ margin:0 }

button,input,select,textarea{ font:inherit; color:inherit }

a{ color:var(--leaf-strong) }

:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:var(--r-sm) }

.muted{ color:var(--muted) }
.faint{ color:var(--faint) }
.num{ font-variant-numeric:tabular-nums }

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--sp-4);
  background:var(--surface); color:var(--text); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); box-shadow:var(--shadow-md); z-index:100;
}
.skip-link:focus{ inset-block-start:var(--sp-3) }

.visually-hidden{
  position:absolute!important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------- 3. shell */

.shell{ display:flex; min-block-size:100dvh }

.side{
  inline-size:var(--side-w); flex:0 0 var(--side-w);
  background:var(--surface); border-inline-end:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; inset-block-start:0; block-size:100dvh;
}

.side__brand{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-4);
  border-block-end:1px solid var(--line-soft);
}
.side__mark{
  inline-size:40px; block-size:40px; flex:none;
  display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--leaf-soft); color:var(--leaf-strong);
}
.side__name strong{ display:block; font-size:var(--fs-md) }
.side__name span{ display:block; font-size:var(--fs-xs); color:var(--muted) }

.side__nav{ padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-1); flex:1 }

.side__link{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-3); min-block-size:48px;
  border-radius:var(--r-md); text-decoration:none; color:var(--text);
  font-weight:600; font-size:var(--fs-sm);
  transition:background var(--dur) ease, color var(--dur) ease;
  position:relative;
}
.side__link svg{ inline-size:20px; block-size:20px; flex:none; color:var(--muted) }
.side__link:hover{ background:var(--surface-2) }
.side__link.is-active{ background:var(--leaf-soft); color:var(--leaf-strong) }
.side__link.is-active svg{ color:var(--leaf) }

/* unsaved-changes marker — a dot, plus the title attribute carries the meaning */
.side__link.is-dirty::after{
  content:""; inline-size:8px; block-size:8px; border-radius:50%;
  background:var(--sun); margin-inline-start:auto; flex:none;
}

.side__foot{
  padding:var(--sp-3); border-block-start:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:var(--sp-1);
}
.side__small{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); min-block-size:44px;
  border:0; background:none; border-radius:var(--r-md);
  color:var(--muted); font-size:var(--fs-sm); text-decoration:none;
  cursor:pointer; text-align:start; inline-size:100%;
}
.side__small svg{ inline-size:18px; block-size:18px; flex:none }
.side__small:hover{ background:var(--surface-2); color:var(--text) }

.body{ flex:1; min-inline-size:0; display:flex; flex-direction:column }

.topbar{
  block-size:var(--top-h); flex:none;
  display:flex; align-items:center; gap:var(--sp-3);
  padding-inline:var(--sp-5); background:var(--surface);
  border-block-end:1px solid var(--line);
  position:sticky; inset-block-start:0; z-index:20;
}
.topbar__title{ font-size:var(--fs-lg); font-weight:700 }
.topbar__right{ margin-inline-start:auto; display:flex; align-items:center; gap:var(--sp-2) }

.icon-btn{
  display:none; place-items:center;
  inline-size:44px; block-size:44px; flex:none;
  border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-md); cursor:pointer; color:var(--text);
}
.icon-btn svg{ inline-size:22px; block-size:22px }
.icon-btn:hover{ background:var(--surface-2) }

.main{ padding:var(--sp-5); flex:1; max-inline-size:1280px; inline-size:100% }

/* ------------------------------------------------------------- 4. cards */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-sm); margin-block-end:var(--sp-4);
}
.card__head{
  display:flex; align-items:center; gap:var(--sp-3);
  margin-block-end:var(--sp-4); padding-block-end:var(--sp-3);
  border-block-end:1px solid var(--line-soft);
}
.card__head h2,.card__head h3{ font-size:var(--fs-lg) }
.card__head .spacer{ margin-inline-start:auto }

/* crate-slat nod to design 04, used sparingly */
.card--crate{ border-block-start:3px solid var(--kraft) }

.grid{ display:grid; gap:var(--sp-4); grid-template-columns:1fr }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1120px){ .grid--3{ grid-template-columns:repeat(3,1fr) } }
.grid--1{ grid-template-columns:1fr!important }

.row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center }
.row--end{ justify-content:flex-end }

/* ------------------------------------------------------------- 5. buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-block-size:44px; padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-md); border:1px solid transparent;
  font-weight:700; font-size:var(--fs-sm); cursor:pointer;
  background:var(--surface-2); color:var(--text);
  transition:background var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease;
}
.btn svg{ inline-size:18px; block-size:18px; flex:none }
.btn:hover{ background:var(--surface-3) }
.btn:active{ transform:translateY(1px) }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }

.btn--primary{ background:var(--leaf); color:#fff; box-shadow:var(--shadow-sm) }
.btn--primary:hover{ background:var(--leaf-strong) }

.btn--danger{ background:var(--danger); color:#fff }
.btn--danger:hover{ filter:brightness(.92) }

.btn--ghost{ background:transparent; border-color:var(--line); color:var(--text) }
.btn--ghost:hover{ background:var(--surface-2) }

.btn--sm{ min-block-size:36px; padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs) }
.btn--block{ inline-size:100% }

.btn-icon{
  display:inline-grid; place-items:center;
  inline-size:40px; block-size:40px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--muted);
}
.btn-icon:hover{ background:var(--surface-2); color:var(--text) }
.btn-icon--danger:hover{ background:var(--danger-soft); color:var(--danger) }

/* ------------------------------------------------------------- 6. forms */

.field{ margin-block-end:var(--sp-4) }
.field > label{
  display:block; font-size:var(--fs-sm); font-weight:700;
  margin-block-end:var(--sp-2);
}
.field__hint{ display:block; font-size:var(--fs-xs); color:var(--muted); margin-block-start:var(--sp-1) }

.input,.select,.textarea{
  inline-size:100%; min-block-size:44px;
  padding:var(--sp-3); border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface);
  transition:border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.textarea{ min-block-size:96px; resize:vertical; line-height:1.6 }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--faint) }
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--leaf); box-shadow:0 0 0 3px var(--leaf-soft); outline:none;
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{
  border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft);
}
.input:disabled,.select:disabled,.textarea:disabled{ background:var(--surface-2); color:var(--muted) }

.select{ appearance:none; padding-inline-end:var(--sp-6) }

/* money input with a ₪ affix */
.money{ position:relative; display:block }
.money .input{ padding-inline-start:var(--sp-6) }
.money::before{
  content:"₪"; position:absolute; inset-inline-start:var(--sp-3);
  inset-block-start:50%; translate:0 -50%;
  color:var(--muted); pointer-events:none; font-weight:700;
}

.error-text{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--danger); font-size:var(--fs-sm); font-weight:600;
  margin-block-start:var(--sp-2);
}

/* switch */
.switch{ display:inline-flex; align-items:center; gap:var(--sp-3); cursor:pointer; min-block-size:44px }
.switch input{ position:absolute; opacity:0; inline-size:1px; block-size:1px }
.switch__track{
  inline-size:48px; block-size:28px; flex:none; border-radius:var(--r-full);
  background:var(--surface-3); position:relative; transition:background var(--dur) ease;
}
.switch__track::after{
  content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px;
  inline-size:22px; block-size:22px; border-radius:50%;
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:translate var(--dur) ease;
}
.switch input:checked + .switch__track{ background:var(--leaf) }
.switch input:checked + .switch__track::after{ translate:-20px 0 }   /* RTL: moves toward start */
.switch input:focus-visible + .switch__track{ outline:3px solid var(--ring); outline-offset:2px }

/* ------------------------------------------------------------- 7. tabs */

.tabs{
  display:flex; gap:var(--sp-1); flex-wrap:wrap;
  border-block-end:1px solid var(--line); margin-block-end:var(--sp-5);
}
.tab{
  padding:var(--sp-3) var(--sp-4); min-block-size:44px;
  border:0; background:none; cursor:pointer;
  font-weight:700; font-size:var(--fs-sm); color:var(--muted);
  border-block-end:3px solid transparent; margin-block-end:-1px;
  display:inline-flex; align-items:center; gap:var(--sp-2);
}
.tab svg{ inline-size:18px; block-size:18px }
.tab:hover{ color:var(--text) }
.tab.is-active{ color:var(--leaf-strong); border-block-end-color:var(--leaf) }

/* ------------------------------------------------------------- 8. table */

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md) }

.table{ inline-size:100%; border-collapse:collapse; font-size:var(--fs-sm) }
.table th,.table td{
  padding:var(--sp-3); text-align:start;
  border-block-end:1px solid var(--line-soft); vertical-align:middle;
}
.table th{
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
  background:var(--surface-2); white-space:nowrap;
}
.table tbody tr:hover{ background:var(--surface-2) }
.table td.num,.table th.num{ font-variant-numeric:tabular-nums; white-space:nowrap }

/* ------------------------------------------------------------- 9. badge */

.badge{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:700;
  background:var(--surface-3); color:var(--text);
}
.badge svg{ inline-size:14px; block-size:14px }
.badge--ok{ background:var(--ok-soft); color:var(--ok) }
.badge--warn{ background:var(--warn-soft); color:var(--warn) }
.badge--danger{ background:var(--danger-soft); color:var(--danger) }
.badge--leaf{ background:var(--leaf-soft); color:var(--leaf-strong) }
.badge--sun{ background:var(--sun-soft); color:var(--warn) }

/* ------------------------------------------------------------- 10. stat */

.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-1);
}
.stat__label{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
}
.stat__label svg{ inline-size:16px; block-size:16px }
.stat__value{ font-size:var(--fs-2xl); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15 }
.stat__note{ font-size:var(--fs-xs); color:var(--faint) }
.stat--ok .stat__value{ color:var(--ok) }
.stat--danger .stat__value{ color:var(--danger) }

/* bars — hand-rolled, no chart library */
.bar-row{ display:flex; align-items:center; gap:var(--sp-3); margin-block-end:var(--sp-3) }
.bar-row__label{ inline-size:150px; flex:none; font-size:var(--fs-sm); color:var(--muted) }
.bar-row__track{ flex:1; block-size:12px; background:var(--surface-2); border-radius:var(--r-full); overflow:hidden }
.bar-row__fill{ block-size:100%; background:var(--kraft); border-radius:var(--r-full) }
.bar-row__value{ inline-size:96px; flex:none; text-align:end; font-variant-numeric:tabular-nums; font-weight:700 }

/* ------------------------------------------------------------- 11. states */

.empty-state{
  text-align:center; padding:var(--sp-7) var(--sp-4); color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.empty-state svg{ inline-size:32px; block-size:32px; color:var(--faint) }
.empty-state p{ max-inline-size:46ch }

.loading{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:var(--sp-8) var(--sp-4); color:var(--muted);
}
.spinner{
  inline-size:28px; block-size:28px; border-radius:50%;
  border:3px solid var(--surface-3); border-block-start-color:var(--leaf);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ rotate:360deg } }

/* ------------------------------------------------------------- 12. overlays */

.scrim{
  position:fixed; inset:0; background:rgb(30 24 12 / .48);
  z-index:50; display:grid; place-items:center; padding:var(--sp-4);
}
.scrim[hidden]{ display:none }

.confirm{
  background:var(--surface); border-radius:var(--r-lg);
  padding:var(--sp-5); max-inline-size:440px; inline-size:100%;
  box-shadow:var(--shadow-lg);
}
.confirm h2{ font-size:var(--fs-lg); margin-block-end:var(--sp-2) }
.confirm p{ color:var(--muted); margin-block-end:var(--sp-5) }
.confirm__actions{ display:flex; gap:var(--sp-3); justify-content:flex-end; flex-wrap:wrap }

.toasts{
  position:fixed; inset-block-end:var(--sp-5); inset-inline-start:var(--sp-5);
  z-index:80; display:flex; flex-direction:column; gap:var(--sp-2);
}
.toast{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--text); color:var(--surface);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); font-size:var(--fs-sm); font-weight:600;
  opacity:0; translate:0 8px; transition:opacity var(--dur) ease, translate var(--dur) ease;
  max-inline-size:min(420px,90vw);
}
.toast.is-in{ opacity:1; translate:0 0 }
.toast svg{ flex:none }
.toast--error{ background:var(--danger) }
.toast--info{ background:var(--leaf-strong) }

/* ------------------------------------------------------------- 13. login */

.login-body{ display:grid; place-items:center; min-block-size:100dvh; padding:var(--sp-4) }
.login{ inline-size:100%; max-inline-size:400px }
.login__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6);
  box-shadow:var(--shadow-md);
}
.login__brand{ display:flex; align-items:center; gap:var(--sp-3); margin-block-end:var(--sp-6) }
.login__mark{
  inline-size:48px; block-size:48px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-md); background:var(--leaf-soft); color:var(--leaf-strong);
}
.login__brand h1{ font-size:var(--fs-lg) }
.login__brand p{ font-size:var(--fs-sm); color:var(--muted) }
.login__error{
  background:var(--danger-soft); color:var(--danger);
  padding:var(--sp-3); border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:600; margin-block-end:var(--sp-4);
}
.login__note{
  margin-block-start:var(--sp-5); padding:var(--sp-3);
  background:var(--sun-soft); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--warn); line-height:1.7;
}
.login__note code{
  display:block; margin-block-start:var(--sp-2); padding:var(--sp-2);
  background:var(--surface); border-radius:var(--r-sm);
  font-family:ui-monospace,"Consolas",monospace; font-size:var(--fs-xs);
  color:var(--text); direction:ltr; text-align:start; overflow-x:auto;
}
.login__back{ margin-block-start:var(--sp-5); text-align:center; font-size:var(--fs-sm) }

/* ------------------------------------------------------------- 14. mobile */

@media (max-width:900px){
  .icon-btn{ display:grid }
  .side{
    position:fixed; inset-block:0; inset-inline-start:0;
    z-index:60; translate:100% 0;                 /* RTL: off-screen toward start */
    transition:translate var(--dur) ease; box-shadow:var(--shadow-lg);
  }
  body.side-open .side{ translate:0 0 }
  .main{ padding:var(--sp-4) }
  .topbar{ padding-inline:var(--sp-4) }
  .bar-row__label{ inline-size:100px }
  .toasts{ inset-inline:var(--sp-4); inset-block-end:var(--sp-4) }
}

@media (max-width:520px){
  .card{ padding:var(--sp-4) }
  .stat__value{ font-size:var(--fs-xl) }
  .confirm__actions{ flex-direction:column-reverse }
  .confirm__actions .btn{ inline-size:100% }
}

/* ------------------------------------------------------------- 15. motion */

/* --------------------------------------------------- 15b. class aliases

   The view modules use BEM sub-elements that mirror the storefront's
   conventions. Rather than force a rewrite of two large modules, alias them
   onto the equivalents defined above. */

.card__title{ font-size:var(--fs-lg); font-weight:700; line-height:1.25 }
.card__sub{ font-size:var(--fs-sm); color:var(--muted); margin-block-start:var(--sp-1) }

.field__label{
  display:block; font-size:var(--fs-sm); font-weight:700;
  margin-block-end:var(--sp-2);
}
.field__error{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--danger); font-size:var(--fs-sm); font-weight:600;
  margin-block-start:var(--sp-2);
}

.badge--success{ background:var(--ok-soft); color:var(--ok) }
.badge--muted{ background:var(--surface-3); color:var(--muted) }

.stat__title{ /* alias of .stat__label */
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
}
.stat--success .stat__value{ color:var(--ok) }

.section__title{ font-size:var(--fs-lg); font-weight:700; margin-block-end:var(--sp-4) }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media print{
  .side,.topbar,.toasts,.scrim{ display:none!important }
  .main{ padding:0 }
  .card{ box-shadow:none; border-color:#ccc }
}