/* =====================================================================
   Natura design system v1 (29.10.2026). Loaded AFTER style.css.
   Warm ivory, deep forest, muted sage, restrained terracotta. 8px grid.
   Only visual: no element is hidden that the app logic relies on.
   ===================================================================== */
:root{
  --n-bg:#F7F5EF; --n-surface:#FFFFFF; --n-surface-2:#FBFAF6; --n-sunk:#F0EDE4;
  --n-forest:#173E32; --n-forest-2:#22543F; --n-forest-3:#2F6B52; --n-deep:#0F2C23;
  --n-sage:#DDE8D8; --n-sage-2:#EDF3EA; --n-mint:#7FA88E;
  --n-terra:#B8603C; --n-terra-soft:#F6E7DE;
  --n-ink:#22262A; --n-ink-2:#3C423F; --n-muted:#6A6F68; --n-line:#E7E3D8; --n-line-2:#DCD7CA;
  --n-ok:#2F7A4F; --n-warn:#A8700F; --n-high:#B4532A; --n-danger:#A62B2B;
  --n-r-sm:12px; --n-r:16px; --n-r-lg:24px;
  --n-s1:8px; --n-s2:16px; --n-s3:24px; --n-s4:32px;
  --n-shadow:0 1px 2px rgba(23,62,50,.05),0 4px 16px rgba(23,62,50,.05);
  --n-shadow-lg:0 2px 6px rgba(23,62,50,.06),0 18px 40px rgba(23,62,50,.10);
  --n-ease:cubic-bezier(.2,.7,.2,1);
  /* legacy tokens remapped so every existing screen follows the new palette */
  --olive:var(--n-forest); --olive-d:var(--n-deep); --sage:var(--n-sage); --leaf:var(--n-mint);
  --cream:var(--n-bg); --navy:var(--n-ink); --muted:var(--n-muted); --line:var(--n-line);
  --ok:var(--n-ok); --warn:var(--n-warn); --high:var(--n-high); --danger:var(--n-danger);
  --r:var(--n-r); --shadow:var(--n-shadow); --shadow-lg:var(--n-shadow-lg);
}

/* ---------- base & typography ---------- */
html,body{background:var(--n-bg);color:var(--n-ink);font-family:Heebo,Assistant,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--n-bg)!important}
button,input,select,textarea{font-family:inherit}
h1{font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-.4px;color:var(--n-ink)}
h2{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.2px;margin:var(--n-s3) 0 var(--n-s2)}
h3{font-weight:700;letter-spacing:-.1px}
.sub,.hint{color:var(--n-muted)}
a{color:var(--n-forest-3)}
::selection{background:var(--n-sage);color:var(--n-deep)}
.metric .val,.dk-kpi b,.ov-k b,#sh-n{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--n-terra);outline-offset:2px;border-radius:10px}
.wrap{padding-inline:var(--n-s2)}

/* ---------- header ---------- */
header{background:rgba(247,245,239,.88)!important;border-bottom:1px solid transparent;padding:12px var(--n-s2) 10px!important;margin:0 calc(-1 * var(--n-s2))!important;gap:10px}
header img{width:40px;height:40px;border-radius:12px;box-shadow:none;border:1px solid var(--n-line)}
header .t b{font-size:17px;font-weight:800;letter-spacing:-.2px}
header .t span{font-size:13px;color:var(--n-muted)}
.hdr-btns{gap:6px}
.hdr-btns button{background:var(--n-surface);border:1px solid var(--n-line);color:var(--n-forest);font-weight:600;border-radius:999px;min-height:38px;padding:6px 12px;font-size:13.5px;transition:background .15s var(--n-ease)}
.hdr-btns button:hover{background:var(--n-sage-2)}
@media (max-width:430px){header .t span{display:none}.hdr-btns button{padding:6px 10px;font-size:13px}}
@media (max-width:360px){header .t b{font-size:15px}}

/* ---------- cards ---------- */
.card{background:var(--n-surface);border:1px solid var(--n-line);border-radius:var(--n-r-lg);padding:var(--n-s2) 20px;box-shadow:var(--n-shadow)}
.card h3{font-size:17px;margin:0 0 var(--n-s1)}
.alert.info{background:var(--n-sage-2);border:1px solid var(--n-sage);color:var(--n-deep);border-radius:var(--n-r);padding:12px var(--n-s2);line-height:1.5}

/* ---------- buttons ---------- */
.btn{background:var(--n-forest)!important;color:#fff;border-radius:14px;min-height:50px;font-weight:700;font-size:17px;box-shadow:none!important;transition:transform .12s var(--n-ease),background .15s}
.btn:hover{background:var(--n-forest-2)!important}
.btn:active{transform:scale(.985);background:var(--n-deep)!important}
.btn.ghost{background:var(--n-sage-2)!important;color:var(--n-forest)!important;border:1px solid var(--n-sage)}
.btn.ghost:hover{background:var(--n-sage)!important}
.btn.small{min-height:40px;padding:8px 16px;font-size:15px;border-radius:12px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- forms ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{background:var(--n-surface);border:1px solid var(--n-line-2)!important;border-radius:var(--n-r-sm);color:var(--n-ink);min-height:48px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--n-forest-3)!important;box-shadow:0 0 0 4px rgba(47,107,82,.14)}
label{color:var(--n-ink-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--n-forest)}

/* ---------- tabs / segmented ---------- */
.tabs{background:var(--n-sunk);border-radius:14px;padding:4px;gap:4px}
.tabs button{border-radius:11px;font-weight:600;color:var(--n-ink-2);min-height:42px}
.tabs button.on{background:var(--n-surface);color:var(--n-forest);box-shadow:0 1px 3px rgba(23,62,50,.10)}
.seg{background:var(--n-sunk);border-radius:12px}
.seg button{color:var(--n-ink-2);font-weight:600}
.seg button.on{background:var(--n-surface);color:var(--n-forest);box-shadow:0 1px 3px rgba(23,62,50,.10)}

/* ---------- pills / statuses ---------- */
.pill{font-weight:600;border-radius:999px;padding:3px 10px}
.s-ok{background:#E4F0E7;color:var(--n-ok)}.s-warn{background:#F8EED8;color:var(--n-warn)}.s-high{background:var(--n-terra-soft);color:var(--n-high)}
.s-danger{background:#F7E1E1;color:var(--n-danger)}.s-info{background:var(--n-sage-2);color:var(--n-forest)}

/* ---------- bottom navigation (mobile) ---------- */
nav{background:rgba(255,255,255,.94)!important;border:1px solid var(--n-line)!important;border-radius:22px!important;box-shadow:var(--n-shadow-lg)!important;left:var(--n-s2)!important;right:var(--n-s2)!important}
nav .in{max-width:480px}
nav button{color:var(--n-muted);font-weight:600;font-size:11.5px;min-height:58px;transition:color .15s}
nav button svg{transition:background .2s var(--n-ease)}
nav button.on{color:var(--n-forest)}
nav button.on svg{background:var(--n-sage)!important;border-radius:12px}
nav button:focus-visible{outline-offset:-4px}

/* ---------- toast & sheets ---------- */
.toast{background:var(--n-deep);border-radius:14px;box-shadow:var(--n-shadow-lg);font-weight:600}
.sheet{background:var(--n-bg);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(15,44,35,.18)}
.sheet::before{content:'';display:block;width:40px;height:4px;border-radius:4px;background:var(--n-line-2);margin:-8px auto 14px}
.sheet .x{background:var(--n-sunk)!important;border-radius:50%;color:var(--n-ink-2)}
.sheet-bg{background:rgba(15,28,23,.42)!important}

/* =====================================================================
   PATIENT HOME
   ===================================================================== */
#v-home:not(.hidden){display:flex;flex-direction:column}
#v-home>*{order:50}
#v-home>.home-hero{order:1}
#v-home>#goal-banner,#v-home>#email-banner{order:2}
#v-home>#checkin{order:3}
#v-home>.grid2{order:4}
#v-home>.quick{order:5}
#v-home>.plan-today{order:6}
#v-home>.myday2{order:7}
#v-home>#meet-card{order:8}
#v-home>#first-steps{order:9}
#v-home>#meir-seen,#v-home>#my-coach,#v-home>#meir-offer,#v-home>#coach-bar{order:10}
#v-home>#ask{order:11}
#v-home>.steps-home{order:12}
#v-home>.seg-card{order:13}
#v-home>#nudge,#v-home>#push-card,#v-home>#today,#v-home>#qa-card,#v-home>#store-card{order:14}
#v-home>.home-duo{order:20}
#v-home>.disc{order:30}
#v-home>*{margin-top:12px}
#v-home>.home-hero{margin-top:4px}
#v-home>#today:empty,#v-home>#push-card:empty,#v-home>#meet-card:empty,#v-home>#nudge:empty{display:none!important}

.home-hero{padding:var(--n-s1) 2px 0}
.home-hero .h-date{font-size:13px;font-weight:600;color:var(--n-terra);letter-spacing:.2px;margin:0 0 2px}
.home-hero h1{font-size:30px;margin:0 0 2px}
.home-hero .sub{font-size:16px}

/* health summary */
.grid2{gap:10px}
.card.metric{padding:14px var(--n-s2);border-radius:20px;transition:transform .15s var(--n-ease),box-shadow .15s}
.card.metric:hover{box-shadow:var(--n-shadow-lg)}
.card.metric:active{transform:scale(.985)}
.metric .lbl{font-size:14px;font-weight:600;color:var(--n-muted)}
.metric .val{font-size:30px;font-weight:800;color:var(--n-ink);letter-spacing:-.6px}
.metric .when{font-size:12.5px}
.metric .plus{background:var(--n-sage-2)!important;color:var(--n-forest);border:1px solid var(--n-sage);width:32px;height:32px;font-size:20px;top:12px;left:12px}

/* quick actions */
.quick{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.quick button{background:var(--n-surface)!important;border:1px solid var(--n-line)!important;border-radius:18px!important;box-shadow:var(--n-shadow)!important;padding:12px 4px!important;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--n-ink)!important;font-weight:600!important;font-size:13px!important;line-height:1.25;cursor:pointer;transition:transform .12s var(--n-ease)}
.quick button svg{width:22px!important;height:22px!important;padding:9px;box-sizing:content-box;border-radius:14px;background:var(--n-sage-2);color:var(--n-forest)}
.quick button:active{transform:scale(.97)}
.quick button.q-main svg{background:var(--n-forest);color:#fff}
.quick-more{display:flex;gap:8px;flex-wrap:wrap;order:5;margin-top:8px!important}
.quick-more button{flex:1 1 0;min-height:40px;border:1px solid var(--n-line);background:transparent;border-radius:999px;color:var(--n-forest);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;padding:6px 10px}
.quick-more button:hover{background:var(--n-sage-2)}
#v-home>.quick-more{order:5}

/* program hero */
.plan-today{border-radius:var(--n-r-lg)!important;background:var(--n-forest)!important;box-shadow:var(--n-shadow-lg)!important}
.hero{background:var(--n-forest)!important}

/* habits with ring */
.myday2 .md-head{display:flex;align-items:center;gap:12px}
.md-score.ring{--p:0;width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--n-forest);background:conic-gradient(var(--n-forest) calc(var(--p)*1%),var(--n-sage) 0);position:relative;padding:0!important;transition:--p .5s}
.md-score.ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--n-surface)}
.md-score.ring>span{position:relative;font-variant-numeric:tabular-nums}
.myday2 .md-bar{display:none}
.md-t{border-radius:18px!important}

/* steps + weekly chart */
.steps-home{background:var(--n-surface)!important;border:1px solid var(--n-line)!important;border-radius:20px!important;box-shadow:var(--n-shadow)!important}
.seg-card .legend i{border-radius:4px}

/* contact */
.home-duo .card h3{font-size:17px}
.wa{border-radius:var(--n-r)!important}
.disc{color:var(--n-muted);font-size:13px;text-align:center}

/* checkin */
.checkin button{border-radius:14px!important;min-height:48px}

/* ---------- desktop: sidebar navigation for patients ---------- */
@media (min-width:1024px){
  body:not(.staff) .wrap{max-width:1040px;padding-inline-start:272px!important;padding-inline-end:32px!important;padding-bottom:48px}
  body:not(.staff) nav#nav{top:0;bottom:0!important;right:0!important;left:auto!important;width:240px;border-radius:0!important;border:0!important;border-inline-start:1px solid var(--n-line)!important;box-shadow:none!important;background:var(--n-surface)!important;display:block;padding:96px 12px 24px}
  body:not(.staff) nav#nav .in{flex-direction:column;gap:4px;max-width:none}
  body:not(.staff) nav#nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 14px;font-size:16px;border-radius:12px;min-height:48px}
  body:not(.staff) nav#nav button svg{width:22px;height:22px;padding:0!important;margin:0!important;background:none!important}
  body:not(.staff) nav#nav button:hover{background:var(--n-sage-2)}
  body:not(.staff) nav#nav button.on{background:var(--n-sage);color:var(--n-deep)}
  body:not(.staff) header{max-width:none}
  #v-home .grid2{grid-template-columns:repeat(3,1fr)}
  #v-home .metric.wide{grid-column:auto;display:block}
  .chat-in{right:240px}
  .toast{bottom:32px}
}

/* =====================================================================
   PROFESSIONAL DASHBOARD (staff). Light, high-contrast, classic.
   ===================================================================== */
body.staff{background:var(--n-bg)!important}
body.staff .card,body.staff .dk-kpi,body.staff .lead,body.staff .ib-list,body.staff .ib-conv,body.staff .sh-item{border-color:var(--n-line);border-radius:var(--n-r)}
body.staff #admin-tabs button.on{background:var(--n-forest);color:#fff}
body.staff #admin-tabs button svg{color:var(--n-forest-3)}
.dk-kpi b{color:var(--n-ink)}
.dk-kpi.warn{border-color:#E2B66B;background:#FFFAF0}
.dk-bars i{background:var(--n-mint)}.dk-bars div:last-child i{background:var(--n-forest)}
.dk-time{background:var(--n-sage-2);color:var(--n-forest)}
.dk-link{color:var(--n-forest-3)}
.ib-item.on{background:var(--n-sage-2)}
.ib-msgs{background:var(--n-surface-2)}
table th{color:var(--n-ink-2);font-weight:700}
@media (min-width:900px){
  body.staff #admin-tabs{background:var(--n-surface)!important;border-inline-start:1px solid var(--n-line)!important}
  body.staff #admin-tabs button:hover:not(.on){background:var(--n-sage-2)}
  body.staff #admin-tabs button.on{background:var(--n-sage-2);color:var(--n-deep);box-shadow:inset -4px 0 0 var(--n-forest)}
  body.staff #admin-tabs button.on svg{color:var(--n-forest)}
}

/* ---------- chat ---------- */
.msg{border-radius:18px;line-height:1.5}
.chat-in{background:rgba(247,245,239,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ---------- motion ---------- */
section:not(.hidden){animation:n-in .28s var(--n-ease)}
@keyframes n-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* =====================================================================
   DARK MODE (opt-in from the profile: "מצב כהה"). Patient app only.
   ===================================================================== */
body.dark:not(.staff){
  --n-bg:#101714; --n-surface:#18211D; --n-surface-2:#1C2622; --n-sunk:#0C120F;
  --n-sage:#29473A; --n-sage-2:#1F3129; --n-forest-3:#8CC7A8; --n-mint:#6FA587;
  --n-ink:#ECEFEA; --n-ink-2:#CDD3CB; --n-muted:#9AA59D; --n-line:#27332D; --n-line-2:#34423B;
  --n-terra:#E0906C; --n-terra-soft:#3A271E;
  --n-shadow:0 1px 2px rgba(0,0,0,.3); --n-shadow-lg:0 10px 30px rgba(0,0,0,.4);
  color-scheme:dark;
}
body.dark:not(.staff),body.dark:not(.staff) .wrap{color:var(--n-ink)}
body.dark:not(.staff) header{background:rgba(16,23,20,.9)!important}
body.dark:not(.staff) nav{background:rgba(24,33,29,.96)!important}
body.dark:not(.staff) nav button.on{color:#BFE3CF}
body.dark:not(.staff) .card,body.dark:not(.staff) .meal,body.dark:not(.staff) .exc,body.dark:not(.staff) .alrow,body.dark:not(.staff) .lock-card,body.dark:not(.staff) .steps-home,body.dark:not(.staff) .quick button{background:var(--n-surface)!important;color:var(--n-ink)!important}
body.dark:not(.staff) .metric .val,body.dark:not(.staff) h1,body.dark:not(.staff) h2,body.dark:not(.staff) h3,body.dark:not(.staff) b{color:var(--n-ink)}
body.dark:not(.staff) .btn.ghost,body.dark:not(.staff) .metric .plus,body.dark:not(.staff) .hdr-btns button,body.dark:not(.staff) .quick-more button{color:#BFE3CF!important}
body.dark:not(.staff) .hdr-btns button{background:var(--n-surface)}
body.dark:not(.staff) .quick button svg{background:var(--n-sage-2);color:#BFE3CF}
body.dark:not(.staff) .quick button.q-main svg{background:#2F6E57;color:#fff}
body.dark:not(.staff) .btn{background:#2F6E57!important}
body.dark:not(.staff) .md-score.ring{color:#BFE3CF;background:conic-gradient(#6FBF95 calc(var(--p)*1%),var(--n-sage) 0)}
body.dark:not(.staff) .md-t{filter:saturate(.8) brightness(.92)}
body.dark:not(.staff) .md-t.water{--bg:#16283A}body.dark:not(.staff) .md-t.sleep{--bg:#1F1F38}body.dark:not(.staff) .md-t.move{--bg:#33261A}body.dark:not(.staff) .md-t.plan{--bg:#1C2D1A}
body.dark:not(.staff) .md-t b,body.dark:not(.staff) .md-t span{color:inherit}
body.dark:not(.staff) .tabs button.on,body.dark:not(.staff) .seg button.on{background:var(--n-surface-2);color:#BFE3CF}
body.dark:not(.staff) .alert.info{color:var(--n-ink)}
body.dark:not(.staff) .chat-in{background:rgba(16,23,20,.96)}
body.dark:not(.staff) .sheet .x{color:var(--n-ink)}
body.dark:not(.staff) img{filter:none}

/* ---------- v1 refinements after visual review ---------- */
.myday2 .md-head{margin-bottom:14px}
.seg-card .seg{display:flex;width:100%;overflow-x:auto;scrollbar-width:none}.seg-card .seg::-webkit-scrollbar{display:none}
.seg-card .seg button{flex:1 0 auto}
.first-steps .md-bar i,.fs-head+.md-bar i{background:var(--n-forest)!important}
@media (max-width:560px){.home-duo{grid-template-columns:1fr!important}}
#ask .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* unify legacy teal accents to forest */
.tr-hero{background:var(--n-forest)!important;box-shadow:var(--n-shadow-lg)!important}
.tr-go{background:var(--n-forest)!important;box-shadow:none!important}
.tr-week i{background:var(--n-forest-3)!important}
.pt-go,.plan-acts button svg,.fs-head span{color:var(--n-forest)!important}
.tr-ex-t span,.fs-n,.tl-n{background:var(--n-sage-2)!important;color:var(--n-forest)!important}
.fs-row.done .fs-n{background:var(--n-forest)!important;color:#fff!important}
/* desktop patient layout: content centered in the space beside the sidebar */
@media (min-width:1024px){
  body:not(.staff){padding-right:240px}
  body:not(.staff) .wrap{max-width:1080px!important;margin:0 auto!important;padding:0 40px 48px!important}
  body:not(.staff) .preview-bar{margin-right:-240px}
}
/* dark refinements */
body.dark:not(.staff) .checkin button{background:var(--n-surface-2)!important;color:var(--n-ink)!important}
body.dark:not(.staff) .s-ok{background:#1E3A2A;color:#9FD8B3}body.dark:not(.staff) .s-warn{background:#3A2E14;color:#E9C677}body.dark:not(.staff) .s-high{background:#3A2219;color:#EDA383}body.dark:not(.staff) .s-danger{background:#3B1C1C;color:#F0A3A3}

/* ---------------------------------------------------------------------
   Admin panel in blue (29.10.2026, Meir's request). Staff screens only
   (body.staff); the patient app keeps the forest palette.
   Legacy tokens are redefined too: they resolve at :root otherwise.
   --------------------------------------------------------------------- */
body.staff{
  --n-forest:#1E40AF; --n-forest-2:#1D4ED8; --n-forest-3:#2563EB; --n-deep:#172554;
  --n-sage:#DBEAFE; --n-sage-2:#EFF6FF; --n-mint:#60A5FA;
  --n-shadow:0 1px 2px rgba(30,64,175,.05),0 4px 16px rgba(30,64,175,.06);
  --n-shadow-lg:0 2px 6px rgba(30,64,175,.07),0 18px 40px rgba(30,64,175,.12);
  --olive:#1E40AF; --olive-d:#172554; --sage:#DBEAFE; --leaf:#60A5FA;
  --shadow:var(--n-shadow); --shadow-lg:var(--n-shadow-lg);
}
body.staff .adm-mode button.on{background:linear-gradient(135deg,#EFF6FF,#fff);box-shadow:0 4px 14px rgba(30,64,175,.15)}