/* =====================================================================
   מעקב אינסטגרם — קליפת אפליקציה
   בסיס דיו קר + מבטא ענבר יחיד. אדום שמור אך ורק לפעולה הרסנית.
   ===================================================================== */

:root{
  /* --- משטחים: שכבת ניווט נפרדת מהתוכן --- */
  --bg:          oklch(0.170 0.012 265);
  --surface:     oklch(0.212 0.012 265);
  --raised:      oklch(0.248 0.013 265);
  --raised-hi:   oklch(0.285 0.014 265);
  --line:        oklch(0.310 0.014 265);
  --line-hi:     oklch(0.405 0.016 265);

  /* --- טקסט --- */
  --text:        oklch(0.952 0.006 265);
  --text-2:      oklch(0.745 0.012 265);
  --text-3:      oklch(0.645 0.014 265);

  /* --- מבטא: פעולה ראשית, בחירה, מיקוד --- */
  --accent:      oklch(0.800 0.140 78);
  --accent-hi:   oklch(0.855 0.135 78);
  --accent-ink:  oklch(0.215 0.045 78);
  --accent-soft: oklch(0.800 0.140 78 / 0.13);
  --accent-line: oklch(0.800 0.140 78 / 0.38);

  /* --- סמנטיקה --- */
  --danger:      oklch(0.680 0.185 22);
  --danger-hi:   oklch(0.745 0.170 22);
  --danger-soft: oklch(0.680 0.185 22 / 0.13);
  --danger-line: oklch(0.680 0.185 22 / 0.40);
  --good:        oklch(0.760 0.140 158);
  --good-soft:   oklch(0.760 0.140 158 / 0.13);

  /* --- טיפוגרפיה --- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.6875rem;   /* 11   — תגיות, מיקרו */
  --fs-sm:   0.78125rem;  /* 12.5 — מטא */
  --fs-md:   0.875rem;    /* 14   — ממשק */
  --fs-base: 0.9375rem;   /* 15   — שם משתמש, גוף */
  --fs-lg:   1.0625rem;   /* 17 */
  --fs-xl:   1.3125rem;   /* 21   — כותרת תצוגה */

  /* --- מרחב --- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --rail-w: 236px;
  --top-h: 56px;

  /* --- תנועה: ease-out-quart, קצר --- */
  --ease: cubic-bezier(.22,1,.36,1);
  --t: 160ms var(--ease);

  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.sprite{display:none}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grow{flex:1}

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

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--line-hi);background-clip:content-box}

/* =====================================================================
   שלד
   ===================================================================== */
.app{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  grid-template-rows:var(--top-h) auto minmax(0,1fr) auto;
  grid-template-areas:
    "top   top"
    "sync  sync"
    "rail  main"
    "queue queue";
  height:100dvh;
}

/* ---------- סרגל עליון ---------- */
.topbar{
  grid-area:top;
  display:flex;align-items:center;gap:18px;
  padding:0 18px;
  background:var(--surface);
  border-block-end:1px solid var(--line);
}
.identity{display:flex;align-items:center;gap:9px;min-width:0}
.mark{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--text-3);
  transition:background var(--t), box-shadow var(--t);
}
.mark.live{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.handle{
  font-size:var(--fs-md);font-weight:600;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.handle b{color:var(--text);direction:ltr;display:inline-block}

.totals{
  display:flex;gap:16px;font-size:var(--fs-sm);color:var(--text-3);
  white-space:nowrap;overflow:hidden;
}
.totals b{color:var(--text-2);font-weight:650;font-variant-numeric:tabular-nums}

.topbar-end{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.sync-meta{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}

/* ---------- פס סנכרון ---------- */
.syncline{
  grid-area:sync;
  display:flex;align-items:center;gap:14px;
  padding:9px 18px;
  background:var(--surface);
  border-block-end:1px solid var(--line);
}
.syncline[hidden]{display:none}
.syncline-txt{font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.syncline-track{flex:1;height:3px;border-radius:99px;background:var(--raised);overflow:hidden}
.syncline-fill{display:block;height:100%;width:0;background:var(--accent);transition:width 320ms var(--ease)}
.syncline-fill.indet{width:32%;animation:drift 1.15s var(--ease) infinite}
@keyframes drift{0%{transform:translateX(0)}50%{transform:translateX(-210%)}100%{transform:translateX(0)}}

/* ---------- סרגל ניווט ---------- */
.rail{
  grid-area:rail;
  display:flex;flex-direction:column;
  padding:12px 10px;
  background:var(--surface);
  border-inline-end:1px solid var(--line);
  overflow-y:auto;
}
.rail-group{display:flex;flex-direction:column;gap:2px}
.rail-foot{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--line)}
/* מספר הגרסה — כדי שמי שמדווח על תקלה יוכל לומר איזו גרסה יש לו */
.rail-ver{padding:8px 10px 0;font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}

.nav-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:8px 10px;
  background:none;border:0;border-radius:var(--r-md);
  color:var(--text-2);font:inherit;font-size:var(--fs-md);text-align:start;
  cursor:pointer;transition:background var(--t), color var(--t);
}
.nav-item:hover{background:var(--raised);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent-hi);font-weight:600}
.nav-item.on .ico{stroke-width:1.9}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-count{
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--text-3);
  background:var(--raised);border-radius:99px;padding:1px 7px;min-width:24px;text-align:center;
}
.nav-item.on .nav-count{background:var(--accent);color:var(--accent-ink);font-weight:700}
.nav-item.alarm .nav-count{color:var(--danger-hi)}
.nav-item.on.alarm .nav-count{background:var(--accent);color:var(--accent-ink)}

/* ---------- תוכן ---------- */
.main{grid-area:main;overflow-y:auto;padding:18px 20px 28px}
.view-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;margin-block-end:6px}
.view-lede{font-size:var(--fs-md);color:var(--text-2);max-width:68ch;margin-block-end:22px}
.view-actions{display:flex;gap:9px;flex-wrap:wrap;margin-block:20px}

/* =====================================================================
   רכיבים
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 14px;min-height:34px;
  background:var(--raised);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-md);
  font:inherit;font-size:var(--fs-md);font-weight:600;white-space:nowrap;
  cursor:pointer;transition:background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn:hover:not(:disabled){background:var(--raised-hi);border-color:var(--line-hi)}
.btn:active:not(:disabled){transform:translateY(.5px)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover:not(:disabled){background:var(--accent-hi);border-color:transparent}

.btn-ghost{background:none;border-color:var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--raised)}

.btn-danger{background:none;color:var(--danger-hi);border-color:var(--danger-line)}
.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}

.btn .ico{width:16px;height:16px}

/* ---------- שדות ---------- */
.field{position:relative;flex:1;min-width:170px;max-width:340px;display:flex;align-items:center}
.field-ico{position:absolute;inset-inline-start:10px;color:var(--text-3);pointer-events:none;width:16px;height:16px}
input[type=search],input[type=number],select{
  width:100%;padding:7px 12px;min-height:34px;
  background:var(--raised);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-md);
  font:inherit;font-size:var(--fs-md);outline:none;
  transition:border-color var(--t), background var(--t);
}
input[type=search]{padding-inline-start:32px}
input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}
input:hover,select:hover{border-color:var(--line-hi)}
input:focus,select:focus{border-color:var(--accent);background:var(--bg)}
select{width:auto;cursor:pointer;padding-inline-end:26px}
.fld-in input{width:auto}

.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;color:var(--text-2);font-size:var(--fs-md);white-space:nowrap}
.check input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex:none}
.check:hover{color:var(--text)}

/* ---------- סרגל כלים ובחירה ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:12px}
/* שקט עד שנבחר משהו; הפעולות ההרסניות נחשפות רק כשיש למה */
.selbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 13px;margin-block-end:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--fs-md);
  transition:background var(--t), border-color var(--t);
}
.selbar[hidden]{display:none}
.selbar strong{font-variant-numeric:tabular-nums;color:var(--text-3)}
.selbar .btn{display:none}
.selbar.active{background:var(--accent-soft);border-color:var(--accent-line)}
.selbar.active strong{color:var(--accent-hi)}
.selbar.active .btn{display:inline-flex}
.selbar.active .btn[hidden]{display:none}

/* ---------- שורות ---------- */
.rows{display:flex;flex-direction:column;gap:3px}
.row{
  display:flex;align-items:center;gap:11px;
  padding:7px 12px;
  border:1px solid transparent;border-radius:var(--r-md);
  transition:background var(--t), border-color var(--t), opacity var(--t);
}
.row:nth-child(odd){background:var(--surface)}
.row:hover{background:var(--raised);border-color:var(--line)}
.row.queued{opacity:.55}
.row.queued:hover{opacity:.8}
.row.failed .name{color:var(--text-3);text-decoration:line-through}

.row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex:none;cursor:pointer}

.av{
  width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--raised-hi);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;
}
.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.line{display:flex;align-items:center;gap:7px;min-width:0}
.name{
  /* השם לטיני בתוך הקשר עברי: סדר הגליפים LTR, היישור לקצה הימני */
  font-size:var(--fs-base);font-weight:650;direction:ltr;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sub{font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub time{font-variant-numeric:tabular-nums}

.tags{display:flex;gap:5px;flex:none}
.tag{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.01em;
  padding:2px 7px;border-radius:var(--r-sm);
  background:var(--raised-hi);color:var(--text-3);
}
.tag-new{background:var(--good-soft);color:var(--good)}
.tag-back{background:var(--accent-soft);color:var(--accent)}
.tag-ver{background:var(--raised-hi);color:var(--text-2)}

.acts{display:flex;align-items:center;gap:5px;flex:none;margin-inline-start:auto}
.act{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;min-height:28px;
  background:none;color:var(--text-3);
  border:1px solid transparent;border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:background var(--t), color var(--t), border-color var(--t);
}
.row:hover .act{border-color:var(--line)}
.act:hover{background:var(--raised-hi);color:var(--text);border-color:var(--line-hi)}
.act-danger:hover{background:var(--danger-soft);color:var(--danger-hi);border-color:var(--danger-line)}
.act.queued{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.act .ico{width:14px;height:14px}
.act-icon{padding:4px 6px}

.more{display:flex;margin:14px auto 0}
.more[hidden]{display:none}

/* ---------- שלד טעינה ---------- */
.skel{display:flex;align-items:center;gap:11px;padding:7px 12px}
.skel-av{width:30px;height:30px;border-radius:50%;flex:none}
.skel-bar{height:10px;border-radius:99px}
.skel-av,.skel-bar{background:var(--raised);animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- מצב ריק ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:56px 24px;text-align:center;color:var(--text-3);
}
.empty .ico{width:26px;height:26px;color:var(--line-hi)}
.empty b{font-size:var(--fs-lg);font-weight:650;color:var(--text-2)}
.empty p{font-size:var(--fs-md);max-width:46ch}

/* ---------- באנר והודעות ---------- */
.banner{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;margin-block-end:14px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);font-size:var(--fs-md);
}
.banner[hidden]{display:none}
.banner .ico{margin-block-start:1px}
.banner.err{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-hi)}
.banner.warn{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hi)}
.banner.ok{background:var(--good-soft);border-color:oklch(0.760 0.140 158 / 0.35);color:var(--good)}

.callout{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;margin-block-start:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--fs-md);color:var(--text-2);max-width:74ch;
}
.callout .ico{color:var(--text-3);margin-block-start:1px}
.callout strong{color:var(--text)}
.callout-danger{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger-hi)}
.callout-danger .ico{color:var(--danger)}

/* ---------- הגדרות ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:13px;max-width:800px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.fld-in{display:flex;align-items:center;gap:8px}
.fld-in input{max-width:110px;font-variant-numeric:tabular-nums}
.fld-in em{font-style:normal;font-size:var(--fs-sm);color:var(--text-3);font-weight:400}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;max-width:800px}
.facts>div{background:var(--surface);padding:13px 15px}
.facts dt{font-size:var(--fs-sm);color:var(--text-3);margin-block-end:3px}
.facts dd{font-size:var(--fs-lg);font-weight:650;font-variant-numeric:tabular-nums}

.accounts{max-width:800px;margin-block-start:14px;display:flex;flex-direction:column;gap:6px}
.accounts[hidden]{display:none}
.accounts h3{font-size:var(--fs-md);font-weight:650;margin-block-end:2px}
.acct{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-md)}
.acct .name{flex:1}
.acct .tag{margin:0}

/* =====================================================================
   פס התור
   ===================================================================== */
.queuebar{
  grid-area:queue;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 18px;
  background:var(--surface);
  border-block-start:1px solid var(--line);
}
.queuebar[hidden]{display:none}
.queuebar.running{border-block-start-color:var(--accent-line)}
.queuebar.blocked{background:var(--danger-soft);border-block-start-color:var(--danger-line)}

.q-state{display:flex;align-items:center;gap:9px;min-width:0}
.q-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex:none}
.queuebar.running .q-dot{background:var(--accent);animation:beat 1.6s var(--ease) infinite}
.queuebar.blocked .q-dot{background:var(--danger)}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 6px transparent}}
.q-line{font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queuebar.blocked .q-line{color:var(--danger-hi);font-weight:600}

.q-caps{display:flex;gap:14px;font-size:var(--fs-sm);color:var(--text-3);white-space:nowrap}
.q-caps b{color:var(--text-2);font-variant-numeric:tabular-nums}
.q-caps i{font-style:normal;opacity:.5;margin:0 1px}
.q-count b{color:var(--accent)}

.q-names{display:flex;gap:5px;overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(to left,#000 75%,transparent)}
.chip{
  font-size:var(--fs-xs);font-weight:600;direction:ltr;
  padding:2px 8px;border-radius:99px;white-space:nowrap;
  background:var(--raised);color:var(--text-3);border:1px solid var(--line);
}
.q-actions{display:flex;gap:7px;margin-inline-start:auto}

/* =====================================================================
   רספונסיביות — מבנית, לא טיפוגרפית
   ===================================================================== */
@media (max-width:1080px){
  .totals{display:none}
  .q-names{display:none}
}
@media (max-width:860px){
  .app{grid-template-columns:58px minmax(0,1fr)}
  :root{--rail-w:58px}
  .nav-label{display:none}
  .nav-item{justify-content:center;padding:9px 0;position:relative}
  .nav-count{
    position:absolute;inset-block-start:2px;inset-inline-end:2px;
    font-size:9px;padding:0 4px;min-width:16px;line-height:15px;
  }
  .rail{padding:10px 6px}
  .rail-ver{padding:8px 0 0;text-align:center;font-size:9px}
}
@media (max-width:680px){
  .app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--top-h) auto auto minmax(0,1fr) auto;
    grid-template-areas:"top" "sync" "rail" "main" "queue";
  }
  .rail{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-inline-end:0;border-block-end:1px solid var(--line);padding:7px 10px;gap:4px;
  }
  .rail-group{flex-direction:row;gap:4px}
  .rail-foot{margin-block-start:0;padding-block-start:0;border-block-start:0;padding-inline-start:8px;margin-inline-start:4px;border-inline-start:1px solid var(--line)}
  .nav-item{padding:8px 11px}
  .rail-ver{display:none}
  .main{padding:14px 13px 22px}
  .sync-meta{display:none}
  .acts{width:100%;margin-inline-start:0;justify-content:flex-end}
  .row{flex-wrap:wrap}
  .q-caps{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}