/* ============================================================
   רשימת קניות — עיצוב
   מובייל-first, RTL, מצב כהה אוטומטי
   ============================================================ */

/* מצב כהה קבוע — לא עוקב אחרי הגדרת המערכת.
   color-scheme הוא מה שגורם לדפדפן לצבוע בכהה גם את מה שהוא
   מצייר בעצמו: פס הגלילה, תיבות הבחירה ושדות הקלט. בלעדיו
   פס הגלילה נשאר בהיר, וב-RTL כרום מציב אותו בצד שמאל — מה
   שנראה כמו רצועת מסך תקועה.                                */
:root {
  color-scheme: dark;

  --bg:        #16161a;
  --card:      #1f1f24;
  --card-2:    #26262c;
  --text:      #eceae4;
  --text-2:    #a3a19a;
  --text-3:    #6f6e68;
  --line:      #2e2e35;
  --line-2:    #3d3d45;
  --need-bg:   #3a1a1a;
  --need-fg:   #f09595;
  --done-bg:   #1d2b12;
  --done-fg:   #97c459;
  --accent:    #85b7eb;
  --accent-bg: #16283c;
  --radius:    10px;
  --safe-b:    env(safe-area-inset-bottom, 0px);

  scrollbar-color: var(--line-2) var(--bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 20px;
  border: 2px solid var(--bg);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* חובה: בלי זה כל display מפורש למטה גובר על תכונת hidden */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Rubik, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

body {
  padding-bottom: calc(76px + var(--safe-b));
}

/* ---------- באנרים ---------- */
.netbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  background: var(--need-bg);
  color: var(--need-fg);
}
.netbar.localbar { background: var(--accent-bg); color: var(--accent); }

/* ---------- סרגל עליון ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 0;
}

.topbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.titles h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.sub {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text-2);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mode-btn {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}
body.shop .mode-btn {
  background: var(--done-fg);
  border-color: var(--done-fg);
  color: var(--bg);
}

/* ---------- חיפוש ---------- */
.search-wrap { position: relative; margin: 10px 0 0; }
.search-icon {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--text-3);
  pointer-events: none;
}
#search {
  width: 100%;
  height: 40px;
  padding: 0 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
#search::-webkit-search-cancel-button { display: none; }
#search:focus { outline: none; border-color: var(--accent); }
.search-clear {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 17px;
  cursor: pointer;
}

/* ---------- צ'יפים של קטגוריות ---------- */
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  height: 31px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.chip .n { font-size: 11.5px; opacity: .7; }

/* ---------- הרשימה ---------- */
.list { padding: 4px 0 0; }

.cat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 14px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .02em;
}
.cat-head i { font-size: 15px; }

.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  user-select: none;
}
.row:active { background: var(--card-2); }

.box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
}
.row.needed .box { background: var(--need-bg); border-color: var(--need-bg); color: var(--need-fg); }
.row.cart   .box { background: var(--done-fg); border-color: var(--done-fg); color: var(--bg); }

.name { flex: 1; font-size: 15.5px; min-width: 0; }
.name .qty { font-size: 13px; color: var(--text-3); margin-inline-start: 5px; }
.name .note { display: block; font-size: 12px; color: var(--text-3); }
.name .catpill {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--card-2);
  color: var(--text-3);
  font-size: 11px;
  vertical-align: 1px;
}

.row.home { opacity: .45; }
.row.cart .name { color: var(--text-3); text-decoration: line-through; }
.row.cart { background: var(--card-2); }

.meta { flex-shrink: 0; font-size: 11px; color: var(--text-3); text-align: end; }

.pen {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  cursor: pointer;
}

/* ---------- מצב סופר ---------- */
body.shop .row { padding: 15px 14px; }
body.shop .box { width: 28px; height: 28px; font-size: 17px; }
body.shop .name { font-size: 17.5px; }
body.shop { padding-bottom: calc(80px + var(--safe-b)); }

/* ---------- ריק ---------- */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 15px;
}
.empty i { display: block; font-size: 34px; margin-bottom: 10px; opacity: .6; }

/* ---------- שדה הוספה ---------- */
.composer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 55;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 9px 12px calc(9px + var(--safe-b));
}
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.input-wrap { position: relative; flex: 1; min-width: 0; }

#add-input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
#add-input:focus { outline: none; border-color: var(--accent); }

.add-btn {
  flex-shrink: 0;
  width: 46px;
  height: 42px;
  border: 0;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-size: 21px;
  cursor: pointer;
}
.add-btn:active { transform: scale(.96); }

.suggest {
  position: absolute;
  inset-inline: 0;
  bottom: 48px;
  max-height: 210px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
}
.suggest button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}
.suggest button:last-child { border-bottom: 0; }
.suggest button:active { background: var(--card-2); }
.suggest .s-cat { font-size: 11.5px; color: var(--text-3); margin-inline-start: auto; }

/* ---------- סרגל סיום קנייה ---------- */
.shopbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 55;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px 12px calc(10px + var(--safe-b));
}
.finish-btn {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: var(--radius);
  background: var(--done-fg);
  color: #fff;
  font-size: 15.5px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.finish-btn:disabled { background: var(--line-2); color: var(--text-3); }

/* ---------- גיליון תחתון ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: flex-end;
}
.sheet {
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + var(--safe-b));
}
.sheet h2 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.sheet label {
  display: block;
  margin: 13px 0 5px;
  font-size: 12.5px;
  color: var(--text-2);
}
.sheet input, .sheet select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.sheet input:focus, .sheet select:focus { outline: none; border-color: var(--accent); }
.gate-hint { margin: -6px 0 12px; font-size: 13px; color: var(--text-2); }

.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sheet-actions button {
  flex: 1;
  min-width: 96px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.sheet-actions .primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.sheet-actions .danger {
  flex-basis: 100%;
  background: transparent;
  border-color: transparent;
  color: var(--need-fg);
  font-size: 14px;
}

/* ---------- טוסט ---------- */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(86px + var(--safe-b));
  z-index: 95;
  margin: 0 auto;
  width: max-content;
  max-width: 88%;
  padding: 10px 17px;
  border-radius: 22px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  text-align: center;
}

@media (min-width: 720px) {
  .topbar, .list, .composer, .shopbar { max-width: 640px; margin-inline: auto; }
  .composer, .shopbar { inset-inline: 0; }
  .row { border-radius: 0; }
}