/* =============================================================
   Quicker External Portal — Design System / Theme
   מקור אמת ל-tokens וסגנונות ליבה. נגזר מאפיון ה-UX/UI שאושר.
   מותג: #62CB31 (Quicker $color-green) · רדיוס כרטיס: 8px (.section-card)
   נטען כ-<link> ב-index.html (public/) — נתיבי פונט אבסולוטיים, לא עוברים bundler.
   ============================================================= */

/* ---------- Heebo (fallback אמיתי, ארוז מקומית) ---------- */
@font-face{
  font-family:"Heebo"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/heebo/heebo-regular.ttf") format("truetype");
}

/* ---------- Ploni (production, Fontef) — /public/fonts/ploni/ · 8 משקלים ---------- */
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:200; font-display:swap; src:url("/fonts/ploni/ploni-ultralight-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:300; font-display:swap; src:url("/fonts/ploni/ploni-light-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/ploni/ploni-regular-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/ploni/ploni-medium-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/ploni/ploni-demibold-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/ploni/ploni-bold-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/ploni/ploni-ultrabold-aaa.woff2") format("woff2"); }
@font-face{ font-family:"Ploni"; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/ploni/ploni-black-aaa.woff2") format("woff2"); }

/* ============================ TOKENS ============================ */
:root{
  /* --- brand (Quicker green) --- */
  --brand:#62cb31;          /* $color-green — הזהות */
  --brand-deep:#4a9f24;     /* טקסט-על-גוון / hover / קריאוּת */
  --brand-tint:#eaf7e1;
  --brand-ghost:#f3fbec;

  /* --- two worlds --- */
  --client:#62cb31;         --client-tint:#eaf7e1;
  --advisor:#2f5d8f;        --advisor-deep:#234a73;
  --advisor-tint:#e8eef6;   --advisor-ghost:#f3f7fb;

  /* --- neutrals --- */
  --ink:#14231d; --body:#47534d; --muted:#7c877f; --faint:#a7b0aa;
  --paper:#eef1ef; --card:#ffffff; --card-2:#f8faf9;
  --line:#e4e8e5; --line-2:#d3d9d5;

  /* --- semantic status --- */
  --info:#2f6fb0;   --info-tint:#e6eef7;    /* בטיפול */
  --amber:#bd8320;  --amber-tint:#f7edd6;   /* ממתין */
  --good:#4a9f24;   --good-tint:#eaf7e1;    /* הושלם */
  --danger:#c0473f; --danger-tint:#f7e7e5;  /* חסום/שגיאה */
  --neutral:#5a6570; --neutral-tint:#eceef0;/* הצעה */

  /* --- radius (כרטיס=8px, תואם .section-card של Quicker) --- */
  --r-xs:6px; --r-sm:8px; --r:8px; --r-lg:14px; --r-pill:999px;

  /* --- spacing (base 4) --- */
  --s-1:4px; --s-2:8px; --s-3:14px; --s-4:20px; --s-5:32px; --s-6:48px;

  /* --- elevation --- */
  --sh-1:0 1px 3px rgba(20,35,29,.06), 0 8px 24px rgba(20,35,29,.06);
  --sh-2:0 4px 14px rgba(20,35,29,.09), 0 14px 40px rgba(20,35,29,.10);

  /* --- type --- */
  --font:"Ploni","Heebo","Assistant","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Cascadia Code",Consolas,ui-monospace,monospace;
  --fs-display:44px; --fs-h1:28px; --fs-h2:20px; --fs-body:16px;
  --fs-sm:13px; --fs-tiny:11.5px;

  /* --- motion --- */
  --ease:cubic-bezier(.2,.6,.2,1); --dur:140ms;

  /* mobile viewport unit (set by app.js) */
  --vh:1vh;
}

/* ============================ RESET ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
[dir="rtl"]{direction:rtl}
img,svg{max-width:100%}
button,input,textarea,select{font:inherit; color:inherit}
a{color:var(--brand-deep); text-underline-offset:3px}
::selection{background:var(--brand-tint)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ============================ TYPOGRAPHY ============================ */
.t-display{font-size:var(--fs-display); font-weight:800; letter-spacing:-.02em; line-height:1.08; color:var(--ink); text-wrap:balance}
.t-h1{font-size:var(--fs-h1); font-weight:800; letter-spacing:-.015em; color:var(--ink); margin:0}
.t-h2{font-size:var(--fs-h2); font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0}
.t-label{font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em; color:var(--ink)}
.t-muted{color:var(--muted)}
.t-num{font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font); font-weight:700; font-size:15px; line-height:1;
  padding:12px 22px; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; min-height:44px;
  text-decoration:none; /* כפתורים שהם <a> — בלי קו תחתון */
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(74,159,36,.30); text-shadow:0 1px 1px rgba(20,50,10,.28)}
.btn--primary:hover{background:var(--brand-deep)}
.btn--advisor{background:var(--advisor); color:#fff; box-shadow:0 2px 8px rgba(47,93,143,.28)}
.btn--advisor:hover{background:var(--advisor-deep)}
.btn--ghost{background:var(--card); color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand-deep)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btn svg{width:17px; height:17px}

/* ============================ CARD (8px) ============================ */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); padding:16px}
.card__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.card__title{font-size:14px; font-weight:800; color:var(--ink)}
.card__meta{font-size:12px; color:var(--faint)}
.card--flat{box-shadow:none}
.card--lg{border-radius:var(--r-lg)}

/* ============================ STATUS PILLS ============================ */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); white-space:nowrap}
.pill .dot{width:7px; height:7px; border-radius:50%}
.pill--offer{background:var(--neutral-tint); color:var(--neutral)}    .pill--offer .dot{background:var(--neutral)}
.pill--work{background:var(--info-tint); color:var(--info)}          .pill--work .dot{background:var(--info)}
.pill--wait{background:var(--amber-tint); color:var(--amber)}        .pill--wait .dot{background:var(--amber)}
.pill--done{background:var(--good-tint); color:var(--good)}          .pill--done .dot{background:var(--good)}
.pill--blocked{background:var(--danger-tint); color:var(--danger)}   .pill--blocked .dot{background:var(--danger)}

/* ============================ WORLD BADGES ============================ */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 11px; border-radius:var(--r-pill)}
.badge .dot{width:7px; height:7px; border-radius:50%}
.badge--client{background:var(--client-tint); color:var(--brand-deep)}      .badge--client .dot{background:var(--client)}
.badge--advisor{background:var(--advisor-tint); color:var(--advisor-deep)}   .badge--advisor .dot{background:var(--advisor)}

/* ============================ FORM FIELDS ============================ */
.field{display:block; margin-bottom:14px}
.field__label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px}
.input{width:100%; font-size:15px; color:var(--ink); background:var(--card); padding:13px 15px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); min-height:44px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ghost)}
.input--invalid{border-color:var(--danger)}
.input--invalid:focus{box-shadow:0 0 0 4px var(--danger-tint)}

/* OTP */
.otp{display:flex; gap:10px; direction:ltr; justify-content:center}
.otp__cell{width:46px; height:56px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:var(--ink); background:var(--card); text-align:center}
.otp__cell:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ghost)}
.otp__cell--filled{border-color:var(--brand)}

/* ============================ UPLOAD ============================ */
.dropzone{border:1.8px dashed var(--line-2); border-radius:var(--r); padding:22px 16px; text-align:center; background:var(--card-2); cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease)}
.dropzone:hover,.dropzone--over{border-color:var(--brand); background:var(--brand-ghost)}
.file-row{display:flex; align-items:center; gap:11px; padding:10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card)}
.file-row__name{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-row__meta{font-size:11px; color:var(--muted)}
.upload-blocked-note{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 16px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--card-2); color:var(--muted); font-size:13px}
.upload-blocked-note svg{width:15px; height:15px; flex-shrink:0}
.upload-progress{margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card)}
.upload-progress__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.upload-progress__name{flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.upload-progress__meta{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.upload-progress__track{height:7px; background:var(--line); border-radius:999px; overflow:hidden}
.upload-progress__bar{height:100%; width:0; background:var(--brand); border-radius:999px; transition:width .2s var(--ease)}
.progress{height:5px; background:var(--line); border-radius:3px; overflow:hidden}
.progress__bar{height:100%; background:var(--brand); border-radius:3px; transition:width var(--dur) var(--ease)}

/* ============ REQUIRED-DOC ROWS + PORTAL UPLOADS ============ */
/* משותף ללקוח (גוון ירוק) וליועץ (ctx-advisor מסב את --brand ל"ענבר").
   ה"התקבל" תמיד ירוק, וה"לא משויך" תמיד אדום — ללא תלות בהקשר. */
.req-doc-hint{font-size:12px; color:var(--muted); margin:-2px 0 8px}
.req-doc{display:flex; align-items:center; gap:11px; padding:10px 2px; border-radius:var(--r-sm); transition:background .12s ease, box-shadow .12s ease}
.req-doc + .req-doc{border-top:1px solid var(--line)}
.req-doc--over{background:var(--brand-tint); box-shadow:inset 0 0 0 1.5px var(--brand); border-top-color:transparent}
.req-doc__ic{flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.req-doc__ic svg{width:17px; height:17px}
.req-doc__ic.is-done{background:rgba(98,203,49,.14); color:#2f7d16}
.req-doc__ic.is-wait{background:var(--brand-tint); color:var(--brand-deep)}
.req-doc__t{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.req-doc__title{font-size:13.5px; font-weight:600; color:var(--ink)}
.req-doc__note{display:flex; align-items:flex-start; gap:5px; max-width:100%; font-size:12px; line-height:1.45; color:var(--muted)}
.req-doc__note svg{width:13px; height:13px; flex-shrink:0; margin-top:2px; color:var(--brand)}
.req-doc__act{flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--brand); color:var(--brand-deep); border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer; background:var(--card)}
.req-doc__act svg{width:15px; height:15px}
.req-doc__act:hover{background:var(--brand-tint)}
.req-doc__prog{flex-shrink:0; display:flex; align-items:center; gap:8px; width:120px}
.req-doc__prog .upload-progress__track{flex:1}
.req-doc__pct{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.up-item{margin-bottom:12px}
.up-item .file-row{align-items:center}
.up-link{flex-shrink:0; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; line-height:1.35; padding:4px 9px; border-radius:999px}
.up-link--yes{background:rgba(98,203,49,.14); color:#2f7d16}
.up-link--no{background:#fde7e2; color:#b3502a}
.up-assign-btn{flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px solid var(--line-2); background:var(--card); color:var(--body); border-radius:999px; font-size:12px; font-weight:600; cursor:pointer}
.up-assign-btn svg{width:14px; height:14px}
.up-assign-btn:hover{border-color:var(--brand); color:var(--brand-deep)}
.up-assign{margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2)}
.up-assign__label{font-size:12px; font-weight:700; color:var(--muted); margin-bottom:7px}
.up-assign__reqs{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.up-assign__req{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid var(--brand); color:var(--brand-deep); background:var(--card); border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer}
.up-assign__req:hover{background:var(--brand-tint)}
.up-assign__req:disabled{opacity:.5; cursor:default}
.up-assign__has{color:#2f7d16; font-weight:800}
.up-assign__rename{display:flex; gap:8px}
.up-assign__name{flex:1; min-width:0; display:flex; align-items:center; padding:0 11px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card)}
.up-assign__name:focus-within{border-color:var(--brand)}
.up-assign__input{flex:1; min-width:0; padding:8px 0; border:none; background:transparent; font:inherit; color:var(--ink)}
.up-assign__input:focus{outline:none}
.up-assign__ext{flex-shrink:0; color:var(--muted); font-size:13px; direction:ltr; padding-inline-start:2px}
@media (max-width:600px){
  .up-item .file-row{flex-wrap:wrap}
  .up-link{max-width:none}
  .req-doc{gap:9px}
  .req-doc__act span{display:none}
  .req-doc__act{padding:7px}
}

/* ============================ CHAT ============================ */
.bubble{max-width:80%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.5}
.bubble--in{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-top-right-radius:5px; color:var(--ink)}
.bubble--out{align-self:flex-end; background:var(--brand-deep); color:#fff; border-top-left-radius:5px}

/* ============================ SKELETON ============================ */
.skeleton{background:linear-gradient(90deg,#e9edeb,#f2f5f3,#e9edeb); background-size:200% 100%; border-radius:6px; animation:skeleton 1.2s infinite}
@keyframes skeleton{from{background-position:200% 0}to{background-position:-200% 0}}

/* ============================ ADVISOR CONTEXT ============================ */
/* עוטפים אזור יועץ ב-.ctx-advisor כדי להסב את הגוון ל"ענבר" בלי לשכפל רכיבים */
.ctx-advisor{--brand:var(--advisor); --brand-deep:var(--advisor-deep); --brand-tint:var(--advisor-tint); --brand-ghost:var(--advisor-ghost)}

/* ============================ UTILITIES ============================ */
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)} .gap-4{gap:var(--s-4)}
.mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mb-3{margin-bottom:var(--s-3)}
.grow{flex:1} .center{align-items:center; justify-content:center}
.scroll-x{overflow-x:auto}
.app-shell{min-height:100vh; min-height:calc(var(--vh,1vh) * 100); display:flex; flex-direction:column}
/* הפוטר גלוי תמיד: ה-view נמתח למלא את הגובה הפנוי במקום לכפות 100vh משלו
   (min-height של מסכי-הרוחב מבוטל כאן מרכזית — הרקע ממילא על ה-body) */
.app-shell>[ui-view]{flex:1; display:flex; flex-direction:column}
.app-shell>[ui-view]>*{flex:1 0 auto; min-height:0 !important}
@media (max-width:600px){ .adv-home__body{ padding-left:16px; padding-right:16px } }

/* ============================ FOOTER ============================ */
/* פוטר מותג קבוע — מופיע בכל מסכי הפורטל (לקוח + יועץ).
   גובה קבוע (--footer-h) כדי שמסכי height:100vh יוכלו לקזז אותו. */
:root{ --footer-h:46px }
.portal-footer{
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border-top:1px solid var(--line);
  padding:0 20px;
}
.portal-footer__brand{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted); text-decoration:none;
}
.portal-footer__brand img{width:18px; height:18px; object-fit:contain}
.portal-footer__brand b{color:var(--ink); font-weight:700}
.portal-footer__brand:hover span{color:var(--body)}