/* FOOTER BUTTONS - CLEAN START */
/* All footer button specific styles will be defined below */

/* Note icon */
.note-icon {
  font-size: 1.1rem;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.6;
}

.note-icon:hover {
  transform: scale(1.15);
  opacity: 1;
}

.note-icon:active {
  transform: scale(0.95);
}

/* הערה - שורה נפרדת מתחת לפריט */
.item-note-row {
  grid-column: 1 / -1; /* תופס את כל הרוחב */
  margin-top: 0.3rem;
  padding: 0;
  display: flex;
  align-items: center;
}
.item-note {
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #222;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  box-sizing: border-box;
}
.item-note:focus {
  border-color: #6c757d;
  background: #fff;
}
body.dark-mode .item-note {
  background: #1f2937;
  color: #eee;
  border-color: #374151;
}
body.dark-mode .item-note:focus {
  background: #23272b;
  border-color: #4b5563;
}

/* CLEANED - footer button styles removed */
@media (max-width: 600px) {
  #btnSaveAsPreset {
    margin-right: 1rem
  }
  .item-note {
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
  }
  .note-icon {
    font-size: 1rem;
  }
}
/*
  === שליטה על מיקום הכמות והיחידה (qty) יחסית למחיר ===
  אפשר לשנות margin-right ו-margin-left כדי להזיז את הכמות והיחידה שמאלה/ימינה לפי הצורך, כולל במובייל.
  דוגמה: margin-right: 0.5rem (קרוב למחיר), margin-left: 0.2rem (מרחיק מהמחיר)
  שנה ערכים לפי מה שנוח לך.
*/
/* קרב את הכמות והיחידה לכיוון המחיר ע"י הגדלת margin-right */
.item .qty {
  margin-right: 0rem; /* ערך גבוה מקרב את הכמות/יחידה לכיוון המחיר */
  margin-left: 0rem;    /* ערך גבוה מקרב את הכמות/יחידה לכיוון השם */
}
    :root { font-size: 19px; } /* הבסיס גדל ב+3px (מ-16 ל-19) */

/* כללי */
body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  margin: 0;
  background: #ececec;
  color: #222;
  transition: background 0.25s, color 0.25s;
}

/* כותרת עליונה */
.app-header {
  background: #01283cd9; /* neutral gray for better contrast */
  color: white;
  padding: 0.375rem 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* allow wrapping to second row on small screens */
}
.app-header h1 { font-size: 1.625rem; font-weight: 800; margin: 0; }

/* Header controls */
.header-controls { display:flex; gap:0.3rem; align-items:center; }
.header-controls { flex-wrap: wrap; }
.header-actions { display:flex; gap:0.28rem; align-items:center; margin-inline-end: 0.18rem; }
.menu-container,
.font-menu-container {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
}

/* ===== HEADER BUTTONS - LUMINOUS STYLE ===== */
.header-btn {
  --accent: #d1d5db;
  --accent-glow: rgba(209,213,219,0.35);
  width: 2.4rem;
    height: 2.4rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 6px 14px rgba(15,23,42,0.12);
}

.header-btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: -1;
  filter: blur(16px);
}

.header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15,23,42,0.18);
}

.header-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}

.header-btn:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(15,23,42,0.14);
}

.header-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 7px var(--accent);
}

.header-btn.icon-load { --accent: #2563eb; --accent-glow: rgba(37,99,235,0.32); }
.header-btn.icon-reset { --accent: #f87171; --accent-glow: rgba(248,113,113,0.35); }
.header-btn.icon-add { --accent: #10b981; --accent-glow: rgba(16,185,129,0.32); }
.header-btn.icon-view-mode { --accent: #facc15; --accent-glow: rgba(250,204,21,0.32); }
.header-btn.icon-menu { --accent: #a855f7; --accent-glow: rgba(168,85,247,0.32); }
.header-btn.icon-font-size { --accent: #38bdf8; --accent-glow: rgba(56,189,248,0.32); }

/* Dark mode */
body.dark-mode .header-btn {
  background: transparent;
  border-color: var(--accent, #475569);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}

body.dark-mode .header-btn:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.55);
}

body.dark-mode .header-btn::after {
  mix-blend-mode: screen;
}

/* Mobile header - keep everything on one line now that we have space */
@media (max-width: 600px) {
  .app-header { 
    align-items: center; 
    gap: 0.5rem;
  }
  .app-header h1 {
    font-size: 1.5rem;
    margin: 0;
  }
  .header-controls {
    display: flex;
    gap: 0.3rem;
    align-items: center;
  }
  .menu-icon {
    padding: 0.28rem 0.5rem;
    font-size: 1.45rem;
  }
}

@media (max-width: 380px) {
  .app-header h1 { 
    font-size: 1.4rem; 
  }
}

/* תפריט */
.menu-icon {
  border: none;
  background: transparent;
  color: var(--accent);
  padding: 0;
  transition: transform 0.2s ease;
}
.menu-icon::before {
  display: inline-block;
  line-height: 1;
}
.menu-icon:hover {
  transform: translateY(-2px);
}
.menu-icon:active {
  transform: translateY(1px);
}
.menu-container { position: relative; display: inline-block; }
.menu-dropdown {
  display: none; position: absolute; top: 2.125rem; left: 0;
  background: white; border: 1px solid #ccc; border-radius: 0.375rem;
  min-width: 13rem; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.15); z-index:1000;
  padding: 1.8rem 0.5rem 0.5rem 0.5rem;
  text-align: center;
}

/* Menu sections */
.menu-section {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.menu-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.menu-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  text-align: right;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-dropdown .dropdown-close {
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #666;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

.menu-dropdown .dropdown-close:hover { background: rgba(0,0,0,0.06); }

.menu-dropdown .menu-item,
.menu-dropdown button:not(.dropdown-close) {
  width: 100%;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.3rem;
  border: 1px solid rgba(148,163,184,0.4);
  background-color: #ffffff;
  text-align: right;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease, background-color 0.2s ease;
}
.menu-dropdown button::before {
  font-size: 1.15rem;
}

.menu-dropdown .menu-item:hover,
.menu-dropdown button:not(.dropdown-close):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  border-color: rgba(99,102,241,0.65);
  background-color: #f5f5f5;
}
.menu-dropdown button::before {
  font-size: 1.15rem;
}

.menu-dropdown .menu-item:hover,
.menu-dropdown button:not(.dropdown-close):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  border-color: rgba(99,102,241,0.65);
}

.menu-dropdown .menu-item:active,
.menu-dropdown button:not(.dropdown-close):active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(15,23,42,0.08);
  background-color: #eeeeee;
}

.menu-dropdown .menu-item:last-child {
  margin-bottom: 0;
}

/* Ensure the close button is not affected by the generic dropdown button styles */
.menu-dropdown .dropdown-close { width: 1.6rem !important; padding: 0 !important; background: transparent !important; }

/* מצב כהה */
body.dark-mode { background:#222; color:#eee; }
body.dark-mode .app-header { background:#2e3236; }

/* תפריטים במצב לילה */
body.dark-mode .menu-dropdown {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.3);
}

body.dark-mode .menu-section {
  border-bottom-color: #374151;
}

body.dark-mode .menu-section-title {
  color: #9ca3af;
}

body.dark-mode .menu-dropdown .dropdown-close { 
  color: #aaa; 
}

body.dark-mode .menu-dropdown .dropdown-close:hover { 
  background: rgba(255,255,255,0.08); 
}

body.dark-mode .menu-dropdown .menu-item,
body.dark-mode .menu-dropdown button:not(.dropdown-close) {
  background-color: #3a3f44;
  border-color: #4b5563;
  color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body.dark-mode .menu-dropdown .menu-item:hover,
body.dark-mode .menu-dropdown button:not(.dropdown-close):hover {
  background-color: #4a4f54;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.dark-mode .menu-dropdown .menu-item:active,
body.dark-mode .menu-dropdown button:not(.dropdown-close):active {
  background-color: #3a3f44;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* מודאלים במצב לילה */
body.dark-mode .modal { background: rgba(0,0,0,0.6); }
body.dark-mode .modal-content { background: #111317; color: #e6e6e6; border: 1px solid rgba(255,255,255,0.06); }
body.dark-mode .modal-list li { background: #171a1f; color: #e6e6e6; }
body.dark-mode .modal-list li:hover { background: #1e2229; color: #bfe7cb; }

/* כותרות סקשנים */
.app-content h2 { font-size: 1.125rem; font-weight:700; margin:0.5rem 0; }

/* List header */
.list-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0.5rem 0; 
  flex-wrap: wrap; 
  gap: 0.25rem;
  position: relative;
}

.list-header #listMenuButton {
  font-size: 1.2rem;
  padding: 0.3rem 0.5rem;
  margin-left: 0.5rem;
}

/* List menu dropdown - same style as main menu */
#listMenuDropdown {
  position: absolute;
  top: 2.5rem;
  left: 0.5rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0.5rem;
  padding-top: 2rem;
  min-width: 180px;
  max-width: 250px;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
}

#listMenuDropdown .menu-section {
  margin-bottom: 0.5rem;
}

#listMenuDropdown .menu-section:last-child {
  margin-bottom: 0;
}

#listMenuDropdown .menu-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #666;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.2rem;
}

#listMenuDropdown .dropdown-close {
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.4rem;
}

body.dark-mode #listMenuDropdown {
  background: #2b2f33;
  border-color: #444;
}

body.dark-mode #listMenuDropdown .menu-section-title {
  color: #aaa;
}

@media (max-width: 600px) {
  #listMenuDropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 90vw;
    border-radius: 12px 12px 0 0;
    max-height: 60vh;
  }
}

/* קבוצות כפתורים - מיושרות לצדדים */
.choose-buttons, .clean-buttons { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  gap: 0.25rem; 
  margin: 0.5rem 0; 
}

/* כפתורים בכותרות - קטנים יותר */
.choose-header .btn-action, .list-header .btn-action {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* כפתור toggle הצג/הסתר */
.toggle-btn {
  font-size:1rem; padding:0.25rem 0.625rem; border:none; border-radius:0.25rem;
  background:#607D8B; color:white; cursor:pointer; font-weight:700;
}
.toggle-btn:hover { background:#2196F3; }
#toggleChoose {
  margin: 0.75rem 0;
  font-size: 0.875rem;         /* Bigger text */
  font-weight: 700;           /* Extra bold */
  padding: 0.15rem 0.4rem;   /* More space inside */
  border: 2px solid rgb(255, 255, 255);  /* Thicker border */
  border-radius: 0.5rem;
  background:#607D8B;  /* Softer gray */
  color: white;           /* Dark green text */
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.2s ease;
}

#toggleChoose:hover {
  background: #607D8B;
  transform: scale(1.03);
}


#toggleChoose.active {
  background: #eaf7f1;
  color: #2b7a2b;
  border-color: #2b7a2b;
}
body.dark-mode #toggleChoose {
  background: #444;
  color: #eee;
  border-color: #666;
}
body.dark-mode #toggleChoose:hover {
  background: #555;
  color: #fff;
}
body.dark-mode #toggleChoose.active {
  background: #2b7a2b;
  color: #fff;
  border-color: #1b5e1b;
}

/* רשימה */
#listGrid { display:flex; flex-direction:column; gap:0.375rem; }

/* Base styling for items */
.choose-item, .item {
  border:1px solid #ccc; 
  border-radius:0.375rem; 
  background:#f7f7fa;
  cursor:pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* List items (keep original styling) */
.item {
  padding:0.625rem 0.75rem;
  font-size:1.125rem; 
  font-weight:700;
}

/* Choose items default (will be overridden in modal) */
.choose-item {
  padding:0.625rem 0.75rem;
  font-size:1.125rem; 
  font-weight:700;
}

/* פריט ברשימה – שורה אחת: שם + כמות + מחיר, ואז הערה בשורה נפרדת */
#listGrid .item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
}
#listGrid .item .name { 
  min-width: 0; 
  text-align: right; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
  font-size: 1.08rem;
}
#listGrid .item .qty { 
  min-width: 3.2rem; 
  text-align: left;
  font-size: 1.08rem;
}
#listGrid .item .price {
  min-width: 4.5rem;
  text-align: left;
  font-weight: 700;
  color: #1b7a2b;
  justify-self: end;
}

/* Mobile adjustments for items */
@media (max-width: 420px) {
  #listGrid .item {
    gap: 0.3rem;
    padding: 0.38rem 0.3rem;
  }
  #listGrid .item .name {
    font-size: 0.97rem;
  }
}

.item.checked { text-decoration:line-through; opacity:0.65; }

/* badge */
.badge { background:red; color:white; border-radius:999px; padding:0.125rem 0.375rem; font-size:0.75rem; margin-right:0.375rem; }

/* כפתורים עיקריים - גודל וסגנון אחיד */
.choose-buttons button, .clean-buttons button, .btn-action {
  font-size: 0.92rem; 
  font-weight: 600; 
  padding: 0.36rem 0.7rem; 
  border-radius: 7px; 
  margin: 0.25rem; 
  border: none; 
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
}
#btnResetChoices { background:#ff9800; color:white; }
#btnAddCustom { background:#2196F3; color:white; }
#btnLoadPreset {
  background: #4CAF50;
  color: white;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.36rem 0.7rem;
  border-radius: 7px;
  margin: 0.25rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
}
#btnLoadChooseItems { background:#607D8B; color:white; }
#btnClearList { background:#f44336; color:white; }
#btnClearChecked { background:#9C27B0; color:white; }
#btnSaveAsPreset { background:#FF9800; color:white; }
/* CLEANED - header button specific styles removed */

/* בחירה חזותית לפריטי 'בחר פריטים' */
.choose-item.selected { background:#eaf7f1; border-color:#9fe0c9; transition:background 0.25s, transform 0.18s; }
@keyframes choosePulse { 0%{transform:scale(1);box-shadow:none;}50%{transform:scale(1.03);box-shadow:0 6px 18px rgba(34,139,95,0.12);}100%{transform:scale(1);box-shadow:none;} }
.choose-item.pulse { animation:choosePulse 360ms ease; }
.choose-item.resetting { transition: background 0.22s, opacity 0.18s; opacity:0.9; }

.choose-item { position: relative; padding-top: 1.1rem; }
.choose-item .badge {
  position: absolute; top: 0.35rem; left: 0.35rem;
  width: 1.2rem; height: 1.2rem; padding: 0; font-size: 0.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:red; color:white; pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.12); margin:0;
}

/* הסרנו את הבלוק הכפול - משתמשים בהגדרה למעלה */



/* סגנון אחיד לכפתורי הגדרות */
.btn-settings {
  background:#888; color:white; border:none; padding:0.5rem 0.625rem; border-radius:0.375rem; cursor:pointer; font-weight:700;
}
.btn-settings:hover { background:#666; }
/* צבעים לפי תפקיד */
.btn-settings.add { background:#4CAF50; }
.btn-settings.assign { background:#FF9800; }
.btn-settings.save { background:#2196F3; }
.btn-settings.add:hover { background:#45a049; }
.btn-settings.assign:hover { background:#e68900; }
.btn-settings.save:hover { background:#1976d2; }

/* Settings header */
.settings-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  position: relative;
}
.settings-header h2 {
  margin: 0;
  flex: 1;
  text-align: center;
}
.settings-header button {
  position: absolute;
  left: 0;
}

/* Settings controls and actions */
.settings-controls, .settings-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

/* קטגוריות */
#categoriesList { list-style:none; padding:0; margin:0 0 0.625rem 0; }
#categoriesList li { padding:0.5rem; margin-bottom:0.25rem; background:#eee; border:1px solid #ccc; display:flex; justify-content:space-between; align-items:center; }
#categoriesList li button { margin-right:0.25rem; padding:0.25rem 0.5rem; font-size:0.875rem; }

/* אנימציות כלליות */
@keyframes fadeIn { from{opacity:0;transform:translateY(-0.3125rem);} to{opacity:1;transform:translateY(0);} }
.fade-in { animation:fadeIn 0.35s ease; }
.item.moving { opacity:0; transform:translateX(1.875rem); }

/* גלילה לסקשן הגדרות */
#settingsSection { 
  scroll-margin-top:4.375rem; 
  text-align: center;
}
/* Store selector */
.store-selector { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin:0.5rem 0; direction:rtl; justify-content: center; }
.store-group { display:flex; gap:0.4rem; align-items:center; }
.store-group label { font-size:1.1rem; color:var(--text-color,#222); font-weight: 500; }
.store-group select { padding:0.3rem 0.6rem; font-size:1.05rem; border:1px solid #ddd; border-radius:6px; background:#fff; }

/* Controls */
.store-controls { display:flex; gap:0.5rem; align-items:center; margin-right:0.25rem; }
.btn { padding:0.3rem 0.6rem; background:#2b7a2b; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.95rem; }
.btn:active { transform:translateY(1px); }

/* Toggle */
.price-toggle { display:flex; align-items:center; gap:0.4rem; cursor:pointer; user-select:none; }
.price-toggle input { width:1.1rem; height:1.1rem; }
.toggle-label { font-size:1.1rem; color:var(--muted,#444); font-weight: 500; }

/* Price span inside list items: leave space from name/qty, avoid overlapping edit box */
.item .price { margin-left:0.6rem; color:#2b7a2b; font-weight:600; display:none; min-width:4.6rem; text-align:left; direction:ltr; }

/* Responsive tweaks */
@media (max-width:480px){
  .store-selector { gap:0.35rem; }
  .store-group select { font-size:0.9rem; }
  .btn { padding:0.25rem 0.5rem; font-size:0.9rem; }
  .item .price { min-width:4.5rem; font-size:0.95rem; }
  /* כותרת 'הרשימה שלי' */
  .list-header h2 {
    font-size: 2.1rem;
    font-weight: 900;
  }
  /* כל הפריטים ברשימה שלי */
  #listGrid .item {
    font-size: 1.35rem;
  }
  /* כותרת 'בחר פריטים' בלבד */
  .choose-header h2 {
    font-size: 2.1rem;
    font-weight: 900;
  }
}

/* ===== Fixed footer actions ===== */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
  background: #f3f4f6; /* light gray for contrast */
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 1000;
}

/* ===== FOOTER BUTTONS - CLEAN REBUILD ===== */
.footer-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 9px;
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
  color: #333;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.header-btn {
  --accent: #d1d5db;
  --accent-glow: rgba(209,213,219,0.35);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  border: 2px solid var(--accent);
  background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
  color: #333;
  font-size: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 6px 14px rgba(15,23,42,0.12);
}

.header-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15,23,42,0.18);
}

.header-btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: -1;
  filter: blur(16px);
}

.header-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}

.header-btn:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(15,23,42,0.14);
}

.header-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 7px var(--accent);
}
.footer-btn:hover {
  transform: translateY(-2px);
}

.footer-btn:active {
  transform: translateY(1px);
}

.footer-btn[aria-label="שמור רשימה"] {
  border-color: #10b981;
  box-shadow: 0 0 0 6px #10b98155;
}

.footer-btn[aria-label="נקה רשימה"] {
  border-color: #f87171;
  box-shadow: 0 0 0 6px #f8717155;
}

.footer-btn[aria-label="נקה סימונים"] {
  border-color: #f59e42;
  box-shadow: 0 0 0 6px #f59e4255;
}

.footer-btn[aria-label="שתף רשימה"] {
  border-color: #6b7280;
  box-shadow: 0 0 0 6px #6b728055;
}

.footer-btn[aria-label="שתף ב-WhatsApp"] {
  border-color: #25d366;
  box-shadow: 0 0 0 6px #25d36655;
}

.footer-btn[aria-label="שתף ב-SMS"] {
  border-color: #3b82f6;
  box-shadow: 0 0 0 6px #3b82f655;
}

/* Hide general share button on mobile */
@media (max-width: 600px) {
  .footer-btn[aria-label="שתף רשימה"] {
    display: none;
  }
}

/* Add bottom padding to main content - footer removed */
main.app-content { padding-bottom: 1rem; }

/* Dark mode footer */
body.dark-mode .app-footer {
  background: #23272b;
  border-top-color: rgba(255,255,255,0.06);
}
/* שורה כללית */
#toggleChoose {
  margin: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
#toggleChoose:hover { background: rgba(0,0,0,0.05); transform: scale(1.02); }
body.dark-mode #toggleChoose { border-color: rgba(255,255,255,0.28); }
body.dark-mode #toggleChoose:hover { background: rgba(255,255,255,0.1); }


/* מחיר - רוחב קבוע, בולט */
.item .price {
  flex: 0 0 auto;
  min-width: 5rem;       /* כוונן לפי פורמט הש"ח (ש״ח XXX) */
  text-align: left;
  font-weight: 700;
  color: #1b7a2b;
}

/* התאמות לנייד: מקטין רוחב price/qty ומקצר שם יותר אגרסיבי */
@media (max-width: 480px) {
  .item .qty { min-width: 3.4rem; font-size: 0.88rem; }
  .item .price { min-width: 4.2rem; font-size: 0.92rem; }
  .item .name { font-size: 0.95rem; }
}


/* price container: LTR internally so invisible input (if any) sits safely; visual order via CSS */
/* צמצום אגרסיבי של price: מינימום רווחים */
.item .price {
  display: inline-flex;
  align-items: center;
  gap: 0.03rem;
  flex: 0 0 auto;
  min-width: 0.1rem;
  padding: 0;
  text-align: left;
  font-weight: 700;
  color: #1b7a2b;
  cursor: default;
  direction: ltr;
}

/* מספר נקי */
.item .price .amount {
  order: 0;
  font-size: 0.98rem;
  white-space: nowrap;
}

/* סימן המטבע קטן יחסית לחסכון מקום */
.item .price .currency { order: 0; font-size: 0.92rem; opacity: 0.95; }

/* התאמה לנייד */
@media (max-width:480px) {
  .item .price { min-width: 3.8rem; font-size: 0.96rem; gap:0.18rem; }
  .item .price .currency { font-size:0.9rem; }
}
/* ensure compact spacing */
.item .price { gap:0.18rem; }
.item .price .amount { font-size:0.98rem; white-space:nowrap; order: 1; }
.item .price .currency { font-size:0.9rem; opacity:0.95; order: 0; }

.list-footer { 
  margin-top:0.5rem; 
  padding-top:0.5rem; 
  border-top:1px solid #eee; 
  display:flex; 
  justify-content:flex-end; 
  direction:rtl; 
  padding-left: 1rem; /* מוסיף ריווח לשמאל */
}
.total-row { display:flex; gap:0.5rem; align-items:center; font-weight:700; }
.total-label { color:#333; font-size:0.95rem; }
.total-amount { color:#1b7a2b; font-size:1rem; min-width:4.5rem; text-align:left; direction:rtl; }
/* --- למצב לילה: הצג מחיר (label) לא מטושטש --- */
body.dark-mode label[for="togglePrices"],
body.dark-mode #togglePrices {
  color: #e6e6e6;
  opacity: 1;
  font-weight: 500;
  font-size: 0.95rem;
}

/* --- כפתור שמור בחירה קטן וקריא --- */
#btnSaveStore {
  padding: 0.36rem 0.7rem;
  font-size: 0.92rem;
  border-radius: 6px;
  background: #2b7a2b;
  color: #fff;
  border: none;
  margin-right: auto;
  margin-left: 0;
  display: block;
  align-self: flex-start;
}
body.dark-mode #btnSaveStore {
  background: transparent;
  color: #e6e6e6;
  border: 1px solid rgba(255,255,255,0.06);
}

/* --- צמצום רווח מתון שלא ידחוף אלמנטים אחרים --- */
.item .price { gap: 0.16rem; padding: 0 0.06rem; }
.item .price .currency { flex: 0 0 auto; font-size:0.92rem; }
.item .price .amount { padding-right: 0.04rem; }

/* --- עקיפה קלה ל־qty ללא שינוי HTML רציני --- */
/*
  === שליטה על ריווח בין כמות ליחידה (ללא space-between) ===
  justify-content הוסר כדי שה-gap יעבוד תמיד, גם בכמות 1.
*/
.item .qty {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem; /* ריווח בין כמות ליחידה */
  flex: 0 0 5.0rem;
  padding: 0 0.06rem;
  box-sizing: border-box;
  direction: rtl; /* מבנה פנימי: amount מימין, unit משמאל */
  font-size: 0.95rem;
}
/*
  === שליטה על רוחב מינימלי של המספר (q-amount) ===
  אם רוצים שהמספר תמיד יתפוס מקום קבוע (גם ב-1), אפשר להחזיר min-width.
  ברירת מחדל: אין min-width, gap שולט על הריווח.
*/
.item .qty .q-amount { text-align: right; font-weight:600; /* אין min-width, gap בלבד */ }
/*
  === שליטה על ריווח בין כמות ליחידה ===
  כדי לקרב או להרחיק את הכמות מהיחידה, שלטו רק ב-gap של .item .qty
  דוגמה: .item .qty { gap: 0.05rem; } // צמוד מאוד
         .item .qty { gap: 0.3rem; }  // רווח גדול
  אין מרג'ין ליחידה, כל הריווח נשלט ע"י gap בלבד!
*/
.item .qty .q-unit   { text-align: left; opacity:0.85; /* אין מרג'ין, כל הריווח ב-gap של .qty */ }

/* מובייל */
@media (max-width:480px) {
  .item .price { flex:0 0 4.2rem; gap:0.08rem; }
  .item .qty   { flex:0 0 4.2rem; }
  .item .qty .q-amount { min-width:0.9rem; }
}
/* ===== Dark mode improvements (contrast + readability) ===== */
body.dark-mode {
  --bg: #0f1115;
  --panel: #111317;
  --muted: #b4b6b8;
  --text: #ececec;
  --btn-bg: #265f26;      /* darker for better contrast */
  --btn-text: #ffffff;
  --panel-border: rgba(255,255,255,0.04);
}
body.dark-mode .item { background: transparent; }
body.dark-mode .item .name {
  color: #f5f5f5;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  font-weight: 600;
}
body.dark-mode .item .qty { color: var(--muted); }
body.dark-mode .item .price { color: #b6f0c9; }
body.dark-mode .list-footer .total-label { color: #eeeeee; font-weight: 600; }
body.dark-mode .list-footer .total-amount { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.28); }

/* Stronger contrast for action button in dark mode */
body.dark-mode .btn-action { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--panel-border); }

/* ===== Responsive tweaks ===== */
@media (max-width: 480px) {
  .item { gap: 0.35rem; padding: 0.35rem; }
  .item .icon { width: 1.8rem; font-size: 0.98rem; }
  .item .name { font-size: 0.96rem; }
  .item .qty { min-width: 3.4rem; font-size: 0.88rem; }
  .item .price { flex: 0 1 4.2rem; font-size: 0.96rem; gap: 0.14rem; }
  .item .price .currency { font-size: 0.88rem; }
  .total-amount { min-width: 3.6rem; font-size: 0.96rem; }
  
  /* כפתורים במובייל - אותו גודל לכל הכפתורים */
  .choose-buttons button, .clean-buttons button, .btn-action {
    padding: 0.32rem 0.6rem; 
    font-size: 0.86rem; 
    border-radius: 6px;
    margin: 0.15rem;
    flex: 0 1 auto;
    min-width: fit-content;
  }
  
  /* הבטחה שהכפתורים יסודרו יפה */
  .choose-buttons, .clean-buttons { 
    justify-content: space-around;
    gap: 0.2rem;
  }
  
  /* כותרות עם כפתורים במובייל */
  .choose-header, .list-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap; /* מניעת שבירה לשורות */
  }
  
  .choose-header h2, .list-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1rem; /* הקטנת הכותרת מעט */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* כפתורים בכותרות - קטנים מאוד במובייל */
  .choose-header .btn-action, .list-header .btn-action {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* מסכים קטנים מאוד */
@media (max-width: 360px) {
  .choose-buttons button, .clean-buttons button, .btn-action {
    padding: 0.28rem 0.5rem; 
    font-size: 0.82rem; 
    margin: 0.1rem;
  }
  
  .choose-buttons, .clean-buttons {
    gap: 0.15rem;
  }
  
  /* כפתורים בכותרות - קטנים עוד יותר */
  .choose-header .btn-action, .list-header .btn-action {
    font-size: 0.7rem;
    padding: 0.15rem 0.3rem;
  }
  
  .choose-header h2, .list-header h2 {
    font-size: 0.95rem;
  }
}

/* מסכים קטנים במיוחד - 320px ומטה */
@media (max-width: 320px) {
  .choose-header .btn-action, .list-header .btn-action {
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
  }
  
  .choose-header h2, .list-header h2 {
    font-size: 0.9rem;
  }
  
  .choose-header, .list-header {
    gap: 0.3rem;
  }
}
/* ====== מצב לילה מורחב ====== */
body.dark-mode { --bg:#0f1115; --panel:#111317; --muted:#b4b6b8; --text:#ececec; --btn-bg:#265f26; --btn-text:#ffffff; --panel-border:rgba(255,255,255,0.04); }
body.dark-mode .item { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); }
body.dark-mode .item .name { color: #f5f5f5; text-shadow: 0 1px 0 rgba(0,0,0,0.25); font-weight: 600; }
body.dark-mode .item .qty { color: var(--muted); }
body.dark-mode .item .price .currency { color: #cfead6; }
body.dark-mode .item .price .amount { color: #eaffea; font-weight:700; }
body.dark-mode .list-footer .total-label { color:#eeeeee; font-weight:600; }
body.dark-mode .list-footer .total-amount { color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.28); }

/* הרחבה לאזור 'בחר פריטים', כפתורים וריבועים */
body.dark-mode .panel, body.dark-mode .card, body.dark-mode .choose-item, body.dark-mode .list-footer, body.dark-mode #categoriesList, body.dark-mode #settingsSection {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--text,#e6e6e6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
body.dark-mode .choose-item { background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); color:#f5f5f5; }
body.dark-mode .choose-item.selected { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); border-color: rgba(255,255,255,0.06); }
body.dark-mode .choose-section-title, body.dark-mode .section-title, body.dark-mode .app-header h2, body.dark-mode .app-header .subtitle { color:#f1f1f1; text-shadow:0 1px 0 rgba(0,0,0,0.22); }
body.dark-mode .controls button, body.dark-mode .btn-action, body.dark-mode .choose-buttons button, body.dark-mode .clean-buttons button,
body.dark-mode button#btnAddCustom, body.dark-mode button#btnResetChoices, body.dark-mode button#btnLoadPreset, 
body.dark-mode button#btnLoadChooseItems, body.dark-mode button#btnClearList, body.dark-mode button#btnClearChecked, body.dark-mode button#btnSaveAsPreset { 
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06)); 
  border: 1px solid rgba(255,255,255,0.04); 
  color: #f7f7f7; 
}

/* חיזוק ניגודיות לכפתור פעולה במצב לילה ומשתני צבע לשימוש חוזר */
body.dark-mode .btn-action { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--panel-border); }

/* קטגוריות */
body.dark-mode #categoriesList, body.dark-mode #settingsSection { background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); color:#eee; }
body.dark-mode #categoriesList li { color:#efefef; border-bottom:1px solid rgba(255,255,255,0.02); padding:0.45rem 0.5rem; }
body.dark-mode .choose-item .badge { background:#e05555; color:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.35); }
body.dark-mode .item:hover, body.dark-mode .choose-item:hover, body.dark-mode #categoriesList li:hover { background: rgba(255,255,255,0.02); }
body.dark-mode .item .qty, body.dark-mode .item .unit, body.dark-mode .item .meta { color:#bdbfc1; }
body.dark-mode .category-controls button { background:transparent; border:1px solid rgba(255,255,255,0.03); color:#eee; }

/* Dark mode store selector and price toggle */
body.dark-mode .store-group label { color:#f0f0f0; }
body.dark-mode .store-group select { background:#2b2f33; color:#eee; border-color:#444; }
body.dark-mode .toggle-label { color:#e0e0e0; }

/* Dark mode list enhancements */
body.dark-mode #listGrid { gap: 0.45rem; }
body.dark-mode .item:hover { background: rgba(255,255,255,0.06); box-shadow: 0 1px 8px rgba(0,0,0,0.4); }
body.dark-mode .item.checked { background: rgba(255,255,255,0.03); }
body.dark-mode .item.checked .name { color: #a5a7aa; text-decoration-color: rgba(255,255,255,0.35); }
body.dark-mode .item .qty .q-unit { color: #bdbfc1; }
body.dark-mode .item .price:hover { background: rgba(255,255,255,0.06); }

@media (max-width: 480px) {
  .list-header h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
  #listGrid .item { font-size: 1.35rem !important; }
  #listGrid .item .name { font-size: 1.35rem !important; }
  #listGrid .item .price { font-size: 1.35rem !important; }
  .choose-header h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
}

/* הזזת btnSaveAsPreset לימין מוחלט בתוך .total-row */
.total-row {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  font-weight: 700;
}
#btnSaveAsPreset {
  margin-right: auto;
  order: -1;
}

/* בוטל: שינוי גודל כפתור טען פריטים במובייל */

/* ===== Modal בחירת רשימה לטעינה ===== */
.modal {
  display: none; /* מוסתר כברירת מחדל */
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; width: 100vw; height: 100vh;
  overflow: auto;
  background: rgba(0,0,0,0.45);
  justify-content: center; align-items: center;
}
.modal-content {
  background: #fff;
  margin: 0;
  padding: 2rem 1.2rem 1.2rem 1.2rem;
  border-radius: 12px;
  max-width: 95vw;
  width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 2px 24px rgba(0,0,0,0.18);
  position: relative;
  text-align: center;
}
.close-modal {
  position: absolute; left: 1rem; top: 1rem;
  font-size: 2.2rem; color: #e53935; cursor: pointer;
  z-index: 2;
  background: #fff;
  border-radius: 50%;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #eee;
  transition: background 0.18s, color 0.18s;
}
.close-modal:hover { background: #ffeaea; color: #b71c1c; }
.modal-title {
  font-size: 1.45rem; font-weight: 800; margin-bottom: 1.2rem;
}
.modal-list {
  list-style: none; padding: 0; margin: 0;
}
.modal-list li {
  font-size: 1.25rem;
  padding: 0.7rem 0.5rem;
  margin-bottom: 0.5rem;
  background: #f5f5f5;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  font-weight: 700;
}
.modal-list li:hover {
  background: #e0f7fa;
  color: #00796b;
}
@media (max-width: 600px) {
  .modal-content {
    width: 90vw;
    max-height: 65vh;
    overflow-y: auto;
    padding: 0.9rem 0.2rem;
  }
  .modal-title { font-size: 1.15rem; }
  .modal-list li { font-size: 1rem; padding: 0.6rem 0.1rem; }
  
  /* Fix for settingsSection visibility on mobile portrait */
  #settingsSection {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.625rem;
    box-sizing: border-box;
    margin: 1rem 0;
  }
  
  /* Fix dropdowns in mobile to be fixed instead of absolute */
  .menu-dropdown,
  .font-dropdown {
    position: fixed;
    top: auto;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ===== Context Menu for List Items ===== */
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10000;
  padding: 0.5rem;
  min-width: 150px;
}

.context-menu-btn {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin: 0.2rem 0;
  border: 1px solid rgba(148,163,184,0.4);
  background-color: #ffffff;
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: right;
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease, background-color 0.2s ease;
}

.context-menu-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  border-color: rgba(99,102,241,0.65);
  background-color: #f5f5f5;
}

.context-menu-btn.delete {
  background: #ffebee;
  color: #c62828;
}

.context-menu-btn.delete:hover {
  background: #ffcdd2;
}

/* Dark mode for context menu */
body.dark-mode .context-menu {
  background: #2b2f33;
  border-color: #444;
}

body.dark-mode .context-menu-btn {
  background-color: #3a3f44;
  border-color: #4b5563;
  color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body.dark-mode .context-menu-btn:hover {
  background-color: #4a4f54;
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

body.dark-mode .context-menu-btn.delete {
  background: #4a1f1f;
  color: #ff6b6b;
}

body.dark-mode .context-menu-btn.delete:hover {
  background: #5a2f2f;
}

.context-menu-btn.select {
  background: #e3f2fd;
  color: #1976d2;
}

.context-menu-btn.select:hover {
  background: #bbdefb;
}

body.dark-mode .context-menu-btn.select {
  background: #1a3a52;
  color: #64b5f6;
}

body.dark-mode .context-menu-btn.select:hover {
  background: #244a65;
}

/* ===== Multi-Selection Mode ===== */
.selection-toolbar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 0.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 150px;
  max-width: 200px;
}

.selection-toolbar .context-menu-btn {
  font-size: 0.95rem;
  padding: 0.6rem 0.8rem;
  margin: 0.2rem 0;
  width: 100%;
  text-align: right;
}

/* Selection mode item styling */
.selection-mode-item {
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.selection-mode-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #2196f3;
  border-radius: 4px;
  background: white;
  transition: all 0.2s;
  z-index: 10;
}

.selection-mode-item.selected-for-action::after {
  content: '✓';
  background: #2196f3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.5rem;
  text-align: center;
}

.selection-mode-item.selected-for-action {
  background: rgba(33, 150, 243, 0.1);
  border-color: #2196f3;
}

/* Dark mode for selection toolbar */
body.dark-mode .selection-toolbar {
  background: #2b2f33;
  border-color: #444;
}

body.dark-mode .selection-mode-item::after {
  border-color: #42a5f5;
  background: #2b2f33;
}

body.dark-mode .selection-mode-item.selected-for-action::after {
  background: #42a5f5;
}

body.dark-mode .selection-mode-item.selected-for-action {
  background: rgba(66, 165, 245, 0.15);
  border-color: #42a5f5;
}

/* Mobile adjustments for selection toolbar */
@media (max-width: 600px) {
  .selection-toolbar {
    left: 0.5rem;
    bottom: 0.5rem;
    min-width: 140px;
    max-width: 180px;
    padding: 0.4rem;
  }
  
  .selection-toolbar .context-menu-btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
  }
  
  .selection-mode-item::after {
    width: 1.2rem;
    height: 1.2rem;
    right: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.2rem;
  }
}

/* ===== Inline Add Item (looks like a regular item) ===== */
.add-item-inline {
  border: 2px dashed #bbb;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: #fafafa;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

.add-item-inline:hover {
  border-color: #4CAF50;
  background: #f0f9f0;
}

.add-item-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 600;
  color: #666;
  outline: none;
  padding: 0.25rem;
  text-align: right;
  direction: rtl;
}

.add-item-input::placeholder {
  color: #999;
  font-weight: 500;
}

.add-item-input:focus {
  color: #333;
}

/* Dark mode for inline add item */
body.dark-mode .add-item-inline {
  background: rgba(255,255,255,0.03);
  border-color: #555;
}

body.dark-mode .add-item-inline:hover {
  border-color: #4CAF50;
  background: rgba(76,175,80,0.1);
}

body.dark-mode .add-item-input {
  color: #ccc;
}

body.dark-mode .add-item-input::placeholder {
  color: #888;
}

body.dark-mode .add-item-input:focus {
  color: #eee;
}

/* ===== Icon Picker Modal ===== */
#iconPickerModal {
  z-index: 10000; /* Higher than other modals */
}

.icon-picker-content {
  width: 85vw;
  max-width: 450px;
}

.icon-search-container {
  margin: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding: 0.75rem 1rem;
}

.icon-search-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.icon-search-input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.icon-search-input::placeholder {
  color: #999;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem 0;
}

.icon-option {
  font-size: 2.5rem;
  padding: 0.75rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
}

.icon-option:hover {
  transform: scale(1.15);
  background: #e3f2fd;
  border-color: #2196F3;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.icon-option:active {
  transform: scale(1.05);
}

/* Dark mode for icon picker */
body.dark-mode .icon-picker-content {
  background: #2b2f33;
}

body.dark-mode .icon-search-container {
  background: #2b2f33;
}

body.dark-mode .icon-search-input {
  background: #3a3f44;
  border-color: #555;
  color: #eee;
}

body.dark-mode .icon-search-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

body.dark-mode .icon-search-input::placeholder {
  color: #888;
}

body.dark-mode .icon-grid {
  background: #23272b;
}

body.dark-mode .icon-option {
  background: #3a3f44;
  border-color: #555;
}

body.dark-mode .icon-option:hover {
  background: #4a4f54;
  border-color: #4CAF50;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .icon-grid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 0.4rem;
  }
  
  .icon-option {
    font-size: 2rem;
    padding: 0.5rem;
  }
}

/* ===== Choose Items Modal ===== */
#chooseItemsModal {
  z-index: 9999; /* Lower than icon picker but higher than other modals */
}

.choose-modal-trigger {
  text-align: center;
  padding: 1rem 0;
  margin-bottom: 0.5rem;
}

.btn-open-choose {
  font-size: 1rem;
  font-weight: 800;
  padding: 0.6rem 1.2rem;
  border: 2px solid #4CAF50;
  border-radius: 12px;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 0.3px;
}

.btn-open-choose:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.btn-open-choose:active {
  transform: translateY(0);
}

.choose-items-modal-content {
  width: 85vw;
  max-width: 550px;
  max-height: 90vh;
  padding: 1.2rem 1rem 1rem 1rem;
}

.choose-search-container {
  margin: 0.5rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding: 0.5rem 0.75rem;
}

.choose-search-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  text-align: right;
  direction: rtl;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.choose-search-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.choose-search-input::placeholder {
  color: #999;
}

.choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Choose item styling in modal - compact with large icons */
.choose-grid .choose-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 90px;
  word-wrap: break-word;
  position: relative;
}

.choose-grid .choose-item::before {
  content: attr(data-icon);
  font-size: 2.8rem;
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1;
}

/* Badge positioning in grid layout */
.choose-grid .choose-item .badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.7rem;
}

/* Category headers in choose modal */
.choose-category-header {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary, #333);
  background-color: var(--bg-secondary, #f5f5f5);
  padding: 0.5rem 0.8rem;
  margin-top: 0.6rem;
  border-right: 4px solid var(--primary-color, #4CAF50);
  text-align: right;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.choose-category-header:first-child {
  margin-top: 0;
}

/* Mobile - even more compact category headers */
@media (max-width: 600px) {
  .choose-category-header {
    font-size: 1rem;
    font-weight: 800;
    padding: 0.4rem 0.65rem;
    margin-top: 0.5rem;
  }
}

/* + button in category headers - both light and dark modes */
.choose-category-header button {
  background: transparent;
  border: 1px solid rgba(76,175,80,0.4);
  color: #4CAF50;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.choose-category-header button:hover {
  background: rgba(76,175,80,0.1);
  transform: scale(1.1);
}

body.dark-mode .choose-category-header {
  background-color: var(--bg-tertiary, #2b2f33);
  border-right-color: var(--primary-light, #66bb6a);
  color: #e5e7eb;
}

body.dark-mode .choose-category-header button {
  border-color: rgba(102,187,106,0.5);
  color: #66bb6a;
}

body.dark-mode .choose-category-header button:hover {
  background: rgba(102,187,106,0.15);
}

.add-item-inline-modal {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 0.5rem;
  border-top: 2px solid #eee;
}

/* Dark mode for choose modal */
body.dark-mode .choose-items-modal-content {
  background: #2b2f33;
}

body.dark-mode .choose-search-container {
  background: #2b2f33;
}

body.dark-mode .choose-search-input {
  background: #3a3f44;
  border-color: #555;
  color: #eee;
}

body.dark-mode .choose-search-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

body.dark-mode .choose-search-input::placeholder {
  color: #888;
}

body.dark-mode .add-item-inline-modal {
  border-top-color: #444;
}

body.dark-mode .btn-open-choose {
  background: linear-gradient(135deg, #2b7a2b 0%, #1e5e1e 100%);
  border-color: #2b7a2b;
}

/* Mobile adjustments for choose modal */
@media (max-width: 600px) {
  .choose-items-modal-content {
    width: 95vw;
    max-height: 92vh;
    padding: 0.8rem 0.75rem 0.75rem 0.75rem;
  }
  
  .choose-search-container {
    margin: 0.3rem 0;
    padding: 0.4rem 0.5rem;
  }
  
  .choose-search-input {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
  }
  
  .choose-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.4rem;
    max-height: 60vh;
    padding: 0.3rem 0;
  }
  
  .choose-grid .choose-item {
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 85px;
    padding: 0.55rem 0.35rem;
  }
  
  .choose-grid .choose-item::before {
    font-size: 2.3rem;
    margin-bottom: 0.35rem;
  }
  
  .btn-open-choose {
    font-size: 1.25rem;
    font-weight: 800;
    padding: 0.75rem 1.4rem;
    letter-spacing: 0.3px;
  }
  
  .add-item-inline-modal {
    margin: 0.75rem 0 0.5rem 0;
    padding: 0.75rem 0.3rem;
  }
}