✏️ עריכת 20260705_224330_index.html

C:\TripServer\backups\uploaded_files\Moneyapp_main\20260705_224330_index.html

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ניהול תקציב חופשה</title>

const firebaseConfig = {
  apiKey: "AIzaSyDJVmdnQw6ZV3sFOc04EMkYob735XATKBM",
  authDomain: "vaction-budget.firebaseapp.com",
  projectId: "vaction-budget",
  storageBucket: "vaction-budget.firebasestorage.app",
  messagingSenderId: "1039853800467",
  appId: "1:1039853800467:web:6ab326be5e04fe8bbc43e6",
  measurementId: "G-35QMXX5D01"
};

const app = initializeApp(firebaseConfig);
const db = initializeFirestore(app, {
  localCache: persistentLocalCache({
    tabManager: persistentMultipleTabManager()
  })
});
const auth = getAuth(app);

const budgetILS = 93063;
const clothingBudgetILS = 20000;
const foodDailyBudgetILS = 750;

const allowedEmails = [
  "eitan.fridman@gmail.com",
  "eitan.friedman@gmail.com",
  "karin.enoshi@gmail.com"
].map(e => e.toLowerCase());

let pendingOfflineWrites = Number(localStorage.getItem("pendingOfflineWrites") || "0");
let appDataStarted = false;

function authMsg(text){
  const el = document.getElementById("authMessage");
  if(el) el.innerText = text || "";
}

function isAllowedUser(user){
  return !!(user && user.email && allowedEmails.includes(user.email.toLowerCase()));
}

window.logoutBudgetApp = async function(){
  await signOut(auth);
};

function showAppForUser(user){
  document.body.classList.remove("authLocked");
  const overlay = document.getElementById("authOverlay");
  if(overlay) overlay.style.display = "none";
  const topBar = document.getElementById("authTopBar");
  if(topBar) topBar.style.display = "flex";
  const label = document.getElementById("authUserLabel");
  if(label) label.innerText = "מחובר: " + (user.email || "");
  updateConnectionStatus();
  if(typeof initAppTabs === 'function') setTimeout(initAppTabs, 80);
}

function showAuthScreen(message){
  document.body.classList.add("authLocked");
  const overlay = document.getElementById("authOverlay");
  if(overlay) overlay.style.display = "flex";
  const topBar = document.getElementById("authTopBar");
  if(topBar) topBar.style.display = "none";
  authMsg(message || "");
}

function setSyncStatus(mode, text, sub){
  const bar = document.getElementById("syncStatusBar");
  const txt = document.getElementById("syncStatusText");
  const subEl = document.getElementById("syncStatusSub");
  if(!bar || !txt || !subEl) return;
  bar.classList.remove("online","offline","pending");
  bar.classList.add(mode);
  txt.innerText = text;
  subEl.innerText = sub || "";
}

window.addEventListener("online", () => {
  updateConnectionStatus();
  setTimeout(() => {
    pendingOfflineWrites = 0;
    localStorage.setItem("pendingOfflineWrites", "0");
    updateConnectionStatus();
    if(typeof renderAll === "function") renderAll();
  }, 2500);
});

window.addEventListener("offline", updateConnectionStatus);

function markLocalWriteAttempt(){
  if(!navigator.onLine){
    pendingOfflineWrites += 1;
    localStorage.setItem("pendingOfflineWrites", String(pendingOfflineWrites));
  }
  updateConnectionStatus();
}

function markWriteConfirmed(){
  if(navigator.onLine && pendingOfflineWrites > 0){
    pendingOfflineWrites = Math.max(0, pendingOfflineWrites - 1);
    localStorage.setItem("pendingOfflineWrites", String(pendingOfflineWrites));
  }
  updateConnectionStatus();
}

async function trackedWrite(operation){
  markLocalWriteAttempt();
  try{
    const result = await operation();
    markWriteConfirmed();
    return result;
  }catch(err){
    updateConnectionStatus();
    throw err;
  }
}

function trackedSetDoc(ref, data, options){
  return trackedWrite(() => setDoc(ref, data, options));
}

function trackedAddDoc(ref, data){
  return trackedWrite(() => addDoc(ref, data));
}

function trackedDeleteDoc(ref){
  return trackedWrite(() => deleteDoc(ref));
}

onAuthStateChanged(auth, async (user) => {
  if(!user){
    showAuthScreen("");
    return;
  }
  if(!isAllowedUser(user)){
    await signOut(auth);
    showAuthScreen("המשתמש הזה לא מורשה להיכנס לאפליקציה.");
    return;
  }
  showAppForUser(user);
  if(!appDataStarted){
    appDataStarted = true;
    startBudgetAppData();
  }
});

const tripBudgetDefaults = {
  japan_2026: {
    aliases: ["japan_2026", "יפן 2026", "Japan 2026"],
    dailyFoodBudget: 750,
    totalFoodBudget: 0,
    shoppingBudget: 20000,
    totalBudget: 93063
  },
  usa_2027: {
    aliases: [
      "usa_2027",
      "ארה״ב 2027",
      "ארהב 2027",
      "ארצות הברית 2027",
      "טיול ארה״ב 2027",
      "טיול ארהב 2027",
      "USA 2027",
      "US 2027",
      "United States 2027"
    ],
    dailyFoodBudget: 900,
    totalFoodBudget: 27000,
    shoppingBudget: 30000,
    totalBudget: 246000
  },
  custom: {
    aliases: [],
    dailyFoodBudget: foodDailyBudgetILS,
    totalFoodBudget: 0,
    shoppingBudget: clothingBudgetILS,
    totalBudget: budgetILS
  }
};

function normalizeTripText(v){
  return String(v || "")
    .trim()
    .replace(/"/g, "״")
    .replace(/\s+/g, " ")
    .toLowerCase();
}

function getTripDefaultBudgetProfile(trip = {}){
  const rawKeys = [trip.id, trip.name, trip.tripName, activeTripId].filter(Boolean);
  const keysToCheck = rawKeys.map(normalizeTripText);
  const joined = keysToCheck.join(" ");

if(joined.includes("usa") || joined.includes("us 2027") || joined.includes("ארהב") || joined.includes("ארה״ב") || joined.includes("ארצות הברית")){
    return tripBudgetDefaults.usa_2027;
  }

if(joined.includes("japan") || joined.includes("יפן")){
    return tripBudgetDefaults.japan_2026;
  }

for(const key of Object.keys(tripBudgetDefaults)){
    const cfg = tripBudgetDefaults[key];
    const aliases = [key, ...(cfg.aliases || [])].map(normalizeTripText);
    if(keysToCheck.some(k => aliases.includes(k))){
      return cfg;
    }
  }

return tripBudgetDefaults.custom;
}

function cleanBudgetNumber(value, fallback = 0){
  const n = Number(value);
  return Number.isFinite(n) && n >= 0 ? n : Number(fallback || 0);
}

function getTripBudgetConfig(trip = getActiveTrip()){
  const defaults = getTripDefaultBudgetProfile(trip);
  return {
    totalBudget: cleanBudgetNumber(trip.budgetILS, defaults.totalBudget),
    shoppingBudget: cleanBudgetNumber(trip.clothingBudgetILS, defaults.shoppingBudget),
    dailyFoodBudget: cleanBudgetNumber(trip.foodDailyBudgetILS, defaults.dailyFoodBudget),
    totalFoodBudget: cleanBudgetNumber(trip.totalFoodBudgetILS, defaults.totalFoodBudget || 0)
  };
}

function getCurrentTripBudgetConfig(){
  return getTripBudgetConfig(getActiveTrip());
}

function getTripExpenses(tripId){
  return expenses.filter(e => (e.tripId || defaultTrip.id) === tripId);
}

function getTripTotalILS(tripId){
  return getTripExpenses(tripId).reduce((s,e)=>s + expenseILS(e), 0);
}

function getTripShoppingILS(tripId){
  return getTripExpenses(tripId)
    .filter(e => {
      const cat = (e.category || "").trim();
      return cat.includes("קניות") || cat.includes("ביגוד");
    })
    .reduce((s,e)=>s + expenseILS(e), 0);
}

window.showAppTab = function(tabId){
  const map = {
    tabMain: "tab-main",
    tabSummary: "tab-summary",
    tabCharts: "tab-charts",
    tabCompare: "tab-compare",
    tabSettings: "tab-settings"
  };
  const cls = map[tabId] || "tab-main";

document.body.classList.remove("tab-main","tab-summary","tab-charts","tab-compare","tab-settings");
  document.body.classList.add(cls);

document.querySelectorAll(".tabPanel").forEach(p => p.classList.remove("active"));
  const panel = document.getElementById(tabId);
  if(panel) panel.classList.add("active");

document.querySelectorAll(".appTabs button").forEach(b => b.classList.remove("active"));
  const btn = document.querySelector(`[data-tab-btn="${tabId}"]`);
  if(btn) btn.classList.add("active");

localStorage.setItem("activeBudgetTab", tabId);

if(typeof renderExpenses === "function") setTimeout(renderExpenses, 60);
  if(tabId === "tabCharts" && typeof renderDashboard === "function") setTimeout(renderDashboard, 120);
  if(typeof applyMobileTableLabels === "function") setTimeout(applyMobileTableLabels, 90);
};

function initAppTabs(){
  const saved = localStorage.getItem("activeBudgetTab") || "tabMain";
  showAppTab(saved);
}

const defaultRates = {
  USD: 2.9090,
  JPY: 0.018511,
  EUR: 3.4225,
  GBP: 3.9572,
  CAD: 2.1282,
  source: "בנק ישראל",
  updatedAtText: "11/05/2026",
  note: "USD 2.9090, JPY 0.018511, EUR 3.4225, GBP 3.9572, CAD 2.1282"
};

let rates = {...defaultRates};
let expenses = [];
let tripName = "";
let legacyFreezeRunning = false;

const fixedCategories = [
  "כרטיסי סים",
  "אוכל",
  "קניות עידו",
  "קניות מיכאל",
  "ביגוד והנעלה",
  "תחבורה ציבורית",
  "אטרקציות",
  "תשלומים במזומן",
  "מלונות",
  "ביטוח נסיעות",
  "טיסות",
  "השכרת רכב",
  "דלק",
  "טיפים",
  "כביסות",
  "קרוז",
  "שונות"
];

let currentFilterType = "category";
let currentCategoryFilter = "ALL";
let currentDateFilter = "ALL";
let summaryCurrencyCode = "ILS";
let currentCompareMetric = "TOTAL";
let currentCompareDate = "ALL";

let trips = [];
let activeTripId = localStorage.getItem("activeTripId") || "japan_2026";
const defaultTrip = {
  id: "japan_2026",
  name: "יפן 2026",
  budgetILS: 93063,
  clothingBudgetILS: 20000,
  foodDailyBudgetILS: 750,
  created: 0
};

function safeTripId(name){
  const base = String(name || "trip").trim()
    .replace(/[\s]+/g, "_")
    .replace(/[^֐-׿a-zA-Z0-9_\-]/g, "")
    .slice(0, 40);
  return (base || "trip") + "_" + Date.now();
}

function getActiveTrip(){
  return trips.find(t => t.id === activeTripId) || defaultTrip;
}

function getActiveBudgetILS(){
  return Number(getCurrentTripBudgetConfig().totalBudget || 0);
}

function getActiveClothingBudgetILS(){
  return Number(getCurrentTripBudgetConfig().shoppingBudget || 0);
}

function getActiveFoodDailyBudgetILS(){
  return Number(getCurrentTripBudgetConfig().dailyFoodBudget || 0);
}

function allExpenses(){
  return expenses;
}

function activeExpenses(){
  return expenses.filter(e => (e.tripId || "japan_2026") === activeTripId);
}

function convertFromILS(amountILS, code){
  amountILS = Number(amountILS || 0);
  if(code === "ILS") return amountILS;
  return amountILS / Number(rates[code] || 1);
}

function currencyLabel(code){
  const labels = {
    ILS: "שקל ישראלי",
    USD: "דולר אמריקאי",
    JPY: "ין יפני",
    EUR: "יורו",
    GBP: "לירה סטרלינג",
    CAD: "דולר קנדי"
  };
  return labels[code] || "שקל ישראלי";
}

function todayText(){ return new Date().toLocaleDateString("he-IL"); }

function isoToday(){
  const d = new Date();
  const offset = d.getTimezoneOffset();
  const local = new Date(d.getTime() - offset * 60000);
  return local.toISOString().slice(0,10);
}

function isoToHeDate(iso){
  const s = String(iso || "").trim();
  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  if(!m) return todayText();
  return `${Number(m[3])}.${Number(m[2])}.${m[1]}`;
}

function dateSortKey(dateText){
  return heDateToISO(dateText) || String(dateText || "");
}

function expenseDateTextFromInput(){
  const input = document.getElementById("expenseDate");
  return input?.value ? isoToHeDate(input.value) : todayText();
}

function ensureExpenseDateDefault(){
  const input = document.getElementById("expenseDate");
  if(input && !input.value) input.value = isoToday();
}

function setExpenseDateInput(dateText){
  const input = document.getElementById("expenseDate");
  if(input) input.value = heDateToISO(dateText) || isoToday();
}

function escapeHtml(text){
  return String(text || "")
    .replaceAll("&","&amp;")
    .replaceAll("<","&lt;")
    .replaceAll(">","&gt;")
    .replaceAll('"',"&quot;")
    .replaceAll("'","&#039;");
}

function convertToILS(amount, currency, rateSnapshot = rates){
  amount = Number(amount || 0);
  if(currency === "ILS") return amount;
  if(currency === "USD") return amount * Number(rateSnapshot.USD);
  if(currency === "JPY") return amount * Number(rateSnapshot.JPY);
  if(currency === "EUR") return amount * Number(rateSnapshot.EUR);
  if(currency === "GBP") return amount * Number(rateSnapshot.GBP);
  if(currency === "CAD") return amount * Number(rateSnapshot.CAD);
  return amount;
}

function expenseILS(e){
  if(typeof e.ilsAtEntry === "number") return e.ilsAtEntry;
  return convertToILS(e.amount, e.currency, rates);
}

async function ensureDefaultSettings(){
  await trackedSetDoc(doc(db, "settings", "rates"), defaultRates, {merge:true});
  await trackedSetDoc(doc(db, "trips", "japan_2026"), {...defaultTrip, id:"japan_2026", name:"יפן 2026"}, {merge:true});
}

async function persistActiveRates(newRates, statusText){
  rates = {...rates, ...newRates};
  await trackedSetDoc(doc(db, "settings", "rates"), {
    ...rates,
    source: newRates.source || "עדכון אינטרנט",
    updatedAtText: newRates.updatedAtText || new Date().toLocaleString("he-IL"),
    updatedAt: Date.now()
  }, {merge:true});
  renderRates();
  renderAll();
}

window.updateRatesLive = async function(){
  try{
    document.getElementById("ratesStatus").innerText = "מעדכן שערים בזמן אמת...";
    const res = await fetch("https://open.er-api.com/v6/latest/ILS", {cache:"no-store"});
    const data = await res.json();

if(data.result !== "success" || !data.rates || !data.rates.USD || !data.rates.JPY || !data.rates.EUR || !data.rates.GBP || !data.rates.CAD){
      throw new Error("Invalid rates response");
    }

const usdIls = 1 / Number(data.rates.USD);
    const jpyIls = 1 / Number(data.rates.JPY);
    const eurIls = 1 / Number(data.rates.EUR);
    const gbpIls = 1 / Number(data.rates.GBP);
    const cadIls = 1 / Number(data.rates.CAD);

await trackedSetDoc(doc(db, "settings", "rates"), {
      USD: usdIls,
      JPY: jpyIls,
      EUR: eurIls,
      GBP: gbpIls,
      CAD: cadIls,
      source: "שער חי מהאינטרנט",
      updatedAtText: new Date().toLocaleString("he-IL"),
      note: "שער חי דרך API ציבורי"
    }, {merge:true});

document.getElementById("ratesStatus").innerText = "השערים נשמרו. הוצאות קיימות נשארות לפי השער שבו הוזנו.";
    alert("השערים נשמרו בהצלחה. הוצאות שכבר נוספו לא השתנו.");
  }catch(err){
    console.error(err);
    document.getElementById("ratesStatus").innerText = "עדכון חי נכשל. נשארים עם השערים האחרונים.";
    alert("לא הצלחתי לעדכן שערים בזמן אמת. בדוק חיבור אינטרנט או נסה שוב.");
  }
};

let editingExpenseId = null;

function buildExpensePayload(existing = {}){
  const category = document.getElementById("category")?.value || "";
  const note = document.getElementById("note")?.value.trim() || "";
  const amount = Number(document.getElementById("amount")?.value);
  const currency = document.getElementById("currency")?.value || "ILS";
  const date = expenseDateTextFromInput();

if(!category || !amount || amount <= 0){
    alert("נא לבחור קטגוריה ולהכניס סכום תקין.");
    return null;
  }

const rateSnapshot = {
    USD: Number(rates.USD),
    JPY: Number(rates.JPY),
    EUR: Number(rates.EUR),
    GBP: Number(rates.GBP),
    CAD: Number(rates.CAD),
    source: rates.source || "",
    updatedAtText: rates.updatedAtText || ""
  };

const ilsAtEntry = convertToILS(amount, currency, rateSnapshot);

return {
    ...existing,
    tripId: activeTripId,
    tripName: getActiveTrip().name || tripName || "",
    category,
    note,
    amount,
    currency,
    date,
    created: existing.created || Date.now(),
    updated: Date.now(),
    ilsAtEntry,
    rateUSDAtEntry: rateSnapshot.USD,
    rateJPYAtEntry: rateSnapshot.JPY,
    rateEURAtEntry: rateSnapshot.EUR,
    rateGBPAtEntry: rateSnapshot.GBP,
    rateCADAtEntry: rateSnapshot.CAD,
    rateSourceAtEntry: rateSnapshot.source,
    rateUpdatedAtEntry: rateSnapshot.updatedAtText
  };
}

function resetExpenseForm(){
  editingExpenseId = null;
  const note = document.getElementById("note");
  const amount = document.getElementById("amount");
  const category = document.getElementById("category");
  const currency = document.getElementById("currency");
  const button = document.getElementById("expenseSubmitButton");
  const cancel = document.getElementById("expenseCancelEditButton");
  const title = document.getElementById("expenseFormTitle");

if(note) note.value = "";
  if(amount) amount.value = "";
  if(category) category.selectedIndex = 0;
  if(currency) currency.value = "ILS";
  ensureExpenseDateDefault();
  if(button) button.innerText = "הוסף הוצאה";
  if(cancel) cancel.style.display = "none";
  if(title) title.innerText = "➕ הוספת הוצאה";
}

window.cancelExpenseEdit = function(){
  resetExpenseForm();
};

window.startEditExpense = function(id){
  const e = expenses.find(x => x.id === id);
  if(!e) return;
  editingExpenseId = id;
  const category = document.getElementById("category");
  const note = document.getElementById("note");
  const amount = document.getElementById("amount");
  const currency = document.getElementById("currency");
  const button = document.getElementById("expenseSubmitButton");
  const cancel = document.getElementById("expenseCancelEditButton");
  const title = document.getElementById("expenseFormTitle");

if(category) category.value = e.category || "";
  if(note) note.value = e.note || "";
  if(amount) amount.value = Number(e.amount || 0);
  if(currency) currency.value = e.currency || "ILS";
  setExpenseDateInput(e.date);
  if(button) button.innerText = "שמירת הוצאה";
  if(cancel) cancel.style.display = "block";
  if(title) title.innerText = "✏️ עריכת הוצאה";
  document.getElementById("quickExpenseCard")?.scrollIntoView({behavior:"smooth", block:"start"});
};

window.addExpense = async function(){
  const existing = editingExpenseId ? (expenses.find(e => e.id === editingExpenseId) || {}) : {};
  const payload = buildExpensePayload(existing);
  if(!payload) return;

if(editingExpenseId){
    await trackedSetDoc(doc(db, "expenses", editingExpenseId), payload, {merge:true});
  }else{
    await trackedAddDoc(collection(db, "expenses"), payload);
  }

const category = payload.category;
  const date = payload.date;
  resetExpenseForm();
  setTimeout(() => checkWarnings(category, date), 800);
};

async function freezeLegacyExpensesOnce(){
  if(legacyFreezeRunning) return;
  legacyFreezeRunning = true;
  try{
    const snap = await getDocs(collection(db, "expenses"));
    const updates = [];
    snap.forEach(d => {
      const e = d.data();
      if(typeof e.ilsAtEntry !== "number" || !e.tripId){
        const rateSnapshot = {USD: Number(rates.USD), JPY: Number(rates.JPY), EUR: Number(rates.EUR), GBP: Number(rates.GBP), CAD: Number(rates.CAD)};
        updates.push(trackedSetDoc(doc(db, "expenses", d.id), {
          tripId: e.tripId || defaultTrip.id,
          tripName: e.tripName || "יפן 2026",
          ilsAtEntry: typeof e.ilsAtEntry === "number" ? e.ilsAtEntry : convertToILS(e.amount, e.currency, rateSnapshot),
          rateUSDAtEntry: rateSnapshot.USD,
          rateJPYAtEntry: rateSnapshot.JPY,
          rateEURAtEntry: rateSnapshot.EUR,
          rateGBPAtEntry: rateSnapshot.GBP,
          rateCADAtEntry: rateSnapshot.CAD,
          rateSourceAtEntry: "נעילה אוטומטית להוצאה ישנה",
          rateUpdatedAtEntry: new Date().toLocaleString("he-IL")
        }, {merge:true}));
      }
    });
    if(updates.length) await Promise.all(updates);
  }catch(err){
    console.error("legacy freeze failed", err);
  }finally{
    legacyFreezeRunning = false;
  }
}

window.deleteExpense = async function(id){
  if(confirm("למחוק את ההוצאה הזו?")){
    await trackedDeleteDoc(doc(db, "expenses", id));
  }
};

function checkWarnings(category, date){
  const clothingTotal = activeExpenses().filter(e => e.category === "ביגוד והנעלה")
    .reduce((s,e)=>s + expenseILS(e), 0);

const foodTodayILS = activeExpenses().filter(e => e.category === "אוכל" && e.date === date)
    .reduce((s,e)=>s + expenseILS(e), 0);

const messages = [];

if(category === "ביגוד והנעלה" && clothingTotal > getActiveClothingBudgetILS()){
    messages.push("חריגה מתקציב ביגוד והנעלה: " + fmtILS(clothingTotal) + " מתוך " + fmtILS(getActiveClothingBudgetILS()));
  }

if(category === "אוכל" && foodTodayILS > getActiveFoodDailyBudgetILS()){
      messages.push("חריגה מתקציב אוכל יומי: " + fmtILS(foodTodayILS) + " מתוך " + fmtILS(getActiveFoodDailyBudgetILS()));
    }

if(messages.length) alert(messages.join("\\n"));
}

function renderHomeTripSelector(){
  const homeSelect = document.getElementById("homeTripSelector");
  if(!homeSelect) return;

const sorted = trips.slice().sort((a,b)=>(a.created||0)-(b.created||0));
  homeSelect.innerHTML = sorted.map(t => `<option value="${escapeHtml(t.id)}">${escapeHtml(t.name || t.id)}</option>`).join("");
  homeSelect.value = activeTripId;
}

window.switchTripFromHome = function(){
  const homeSelect = document.getElementById("homeTripSelector");
  if(!homeSelect) return;
  activeTripId = homeSelect.value || defaultTrip.id;
  localStorage.setItem("activeTripId", activeTripId);

const mainSelect = document.getElementById("tripSelector");
  if(mainSelect) mainSelect.value = activeTripId;

currentFilterType = "category";
  currentCategoryFilter = "ALL";
  currentDateFilter = "ALL";

renderTripSelector();
  renderHomeTripSelector();
  renderAll();
};

function renderTripSelector(){
  const select = document.getElementById("tripSelector");
  if(!select) return;

const sorted = trips.slice().sort((a,b)=>(a.created||0)-(b.created||0));
  select.innerHTML = sorted.map(t => `<option value="${escapeHtml(t.id)}">${escapeHtml(t.name || t.id)}</option>`).join("");

if(!sorted.find(t => t.id === activeTripId)){
    activeTripId = "japan_2026";
    localStorage.setItem("activeTripId", activeTripId);
  }

select.value = activeTripId;

const trip = getActiveTrip();
  const tripNameInput = document.getElementById("tripName");
  if(tripNameInput) tripNameInput.value = trip.name || "";
  tripName = trip.name || "";

const cfg = getTripBudgetConfig(trip);
  const budgetInput = document.getElementById("tripBudgetInput");
  const clothingInput = document.getElementById("tripClothingInput");
  const foodInput = document.getElementById("tripFoodInput");
  const totalFoodInput = document.getElementById("tripTotalFoodInput");
  if(budgetInput) budgetInput.value = Number(cfg.totalBudget || 0);
  if(clothingInput) clothingInput.value = Number(cfg.shoppingBudget || 0);
  if(foodInput) foodInput.value = Number(cfg.dailyFoodBudget || 0);
  if(totalFoodInput) totalFoodInput.value = Number(cfg.totalFoodBudget || 0);

const activeLabel = document.getElementById("activeTripLabel");
  if(activeLabel){
    activeLabel.innerHTML = `טיול פעיל: <b>${escapeHtml(trip.name || activeTripId)}</b>`;
  }
  const topBudget = document.getElementById("topBudgetLabel");
  const topClothing = document.getElementById("topClothingBudgetLabel");
  const topFood = document.getElementById("topFoodBudgetLabel");
  if(topBudget) topBudget.innerText = fmtILS(getActiveBudgetILS());
  if(topClothing) topClothing.innerText = fmtILS(getActiveClothingBudgetILS());
  if(topFood) topFood.innerText = fmtILS(getActiveFoodDailyBudgetILS());
}

window.switchTrip = function(){
  const select = document.getElementById("tripSelector");
  activeTripId = select?.value || defaultTrip.id;
  localStorage.setItem("activeTripId", activeTripId);
  currentFilterType = "category";
  currentCategoryFilter = "ALL";
  currentDateFilter = "ALL";
  renderTripSelector();
  toggleTripSettings(true);
  renderAll();
};

window.createNewTrip = async function(){
  const name = prompt("שם הטיול החדש:");
  if(!name || !name.trim()) return;

const id = safeTripId(name);
  const preset = getTripDefaultBudgetProfile({id, name:name.trim()});
  const newTrip = {
    id,
    name: name.trim(),
    budgetILS: preset.totalBudget,
    clothingBudgetILS: preset.shoppingBudget,
    foodDailyBudgetILS: preset.dailyFoodBudget,
    totalFoodBudgetILS: preset.totalFoodBudget || 0,
    created: Date.now()
  };

await trackedSetDoc(doc(db, "trips", id), newTrip, {merge:true});
  activeTripId = id;
  localStorage.setItem("activeTripId", activeTripId);
  renderTripSelector();
  renderAll();
};

window.saveTripSettings = async function(){
  const trip = getActiveTrip();
  const name = document.getElementById("tripName")?.value.trim() || trip.name || "טיול ללא שם";
  const cfg = getTripBudgetConfig(trip);
  const budget = cleanBudgetNumber(document.getElementById("tripBudgetInput")?.value, cfg.totalBudget);
  const clothing = cleanBudgetNumber(document.getElementById("tripClothingInput")?.value, cfg.shoppingBudget);
  const food = cleanBudgetNumber(document.getElementById("tripFoodInput")?.value, cfg.dailyFoodBudget);
  const totalFood = cleanBudgetNumber(document.getElementById("tripTotalFoodInput")?.value, cfg.totalFoodBudget || 0);

await trackedSetDoc(doc(db, "trips", activeTripId), {
    ...trip,
    id: activeTripId,
    name,
    budgetILS: budget,
    clothingBudgetILS: clothing,
    foodDailyBudgetILS: food,
    totalFoodBudgetILS: totalFood
  }, {merge:true});

alert("הגדרות הטיול נשמרו בהצלחה.");
};

let compareTripsPanelOpen = false;

window.toggleCompareTripsPanel = function(){
  compareTripsPanelOpen = !compareTripsPanelOpen;
  const panel = document.getElementById("compareTripsPanel");
  if(panel){
    panel.classList.toggle("open", compareTripsPanelOpen);
  }
};

function getSelectedCompareTripIds(){
  const checked = Array.from(document.querySelectorAll(".compareTripCheck:checked")).map(i => i.value);
  if(checked.length) return checked.slice(0,5);
  return trips.slice(0, Math.min(2, trips.length)).map(t => t.id);
}

function getTripExpensesById(tripId){
  return expenses.filter(e => (e.tripId || defaultTrip.id) === tripId);
}

function getAllComparisonCategories(){
  const cats = new Set(fixedCategories);
  expenses.forEach(e => { if(e.category) cats.add(e.category); });
  return Array.from(cats).sort();
}

function getAllComparisonDates(){
  const dates = new Set();
  expenses.forEach(e => { if(e.date) dates.add(e.date); });
  return Array.from(dates).sort((a,b)=>dateSortKey(a).localeCompare(dateSortKey(b)));
}

function renderComparisonTripChecks(){
  const box = document.getElementById("compareTripsBox");
  if(!box) return;

const existing = new Set(Array.from(document.querySelectorAll(".compareTripCheck:checked")).map(i => i.value));
  if(!existing.size){
    trips.slice(0, Math.min(2, trips.length)).forEach(t => existing.add(t.id));
  }

box.innerHTML = trips.slice().sort((a,b)=>(a.created||0)-(b.created||0)).map(t => {
    const checked = existing.has(t.id) ? "checked" : "";
    return `<label class="tripCheckItem"><input class="compareTripCheck" type="checkbox" value="${escapeHtml(t.id)}" ${checked} onchange="handleCompareTripCheck(this)"> ${escapeHtml(t.name || t.id)}</label>`;
  }).join("");

const panel = document.getElementById("compareTripsPanel");
  if(panel){
    panel.classList.toggle("open", compareTripsPanelOpen);
  }
}

window.handleCompareTripCheck = function(input){
  const checked = Array.from(document.querySelectorAll(".compareTripCheck:checked"));
  if(checked.length > 5){
    input.checked = false;
    alert("אפשר לבחור עד 5 טיולים להשוואה.");
    return;
  }
  renderTripComparison(false);
};

function renderCompareMetricOptions(){
  const metricSelect = document.getElementById("compareMetric");
  if(!metricSelect) return;

const current = currentCompareMetric || metricSelect.value || "TOTAL";
  const cats = getAllComparisonCategories();

metricSelect.innerHTML =
    `<option value="TOTAL">סה״כ הוצאות</option>` +
    `<option value="DATE">תאריך מסוים</option>` +
    `<option value="MOST_EXPENSIVE_DAY">יום הכי יקר</option>` +
    `<option value="CHEAPEST_DAY">יום הכי זול</option>` +
    cats.map(c => `<option value="CAT::${escapeHtml(c)}">${escapeHtml(c)}</option>`).join("");

const validValues = ["TOTAL","DATE","MOST_EXPENSIVE_DAY","CHEAPEST_DAY", ...cats.map(c => "CAT::" + c)];
  currentCompareMetric = validValues.includes(current) ? current : "TOTAL";
  metricSelect.value = currentCompareMetric;
}

function renderCompareDateOptions(){
  const dateSelect = document.getElementById("compareDate");
  if(!dateSelect) return;

const current = currentCompareDate || dateSelect.value || "ALL";
  const dates = getAllComparisonDates();
  dateSelect.innerHTML = `<option value="ALL">כל התאריכים יחד</option>` + dates.map(d => `<option value="${escapeHtml(d)}">${escapeHtml(d)}</option>`).join("");
  currentCompareDate = dates.includes(current) ? current : "ALL";
  dateSelect.value = currentCompareDate;
}

function renderCompareSelectors(){
  renderCompareMetricOptions();
  renderCompareDateOptions();

const metric = document.getElementById("compareMetric")?.value || "TOTAL";
  const dateBox = document.getElementById("compareDateBox");
  if(dateBox) dateBox.style.display = metric === "DATE" ? "block" : "none";
}

function metricLabel(metric, date){
  if(metric === "TOTAL") return "סה״כ הוצאות";
  if(metric === "DATE") return date && date !== "ALL" ? "תאריך " + date : "כל התאריכים";
  if(metric === "MOST_EXPENSIVE_DAY") return "יום הכי יקר";
  if(metric === "CHEAPEST_DAY") return "יום הכי זול";
  if(metric.startsWith("CAT::")) return metric.replace("CAT::", "");
  return metric;
}

function tripMetricTotal(tripId, metric, date){
  let list = getTripExpensesById(tripId);

if(metric === "DATE" && date !== "ALL"){
    list = list.filter(e => e.date === date);
  }

if(metric.startsWith("CAT::")){
    const cat = metric.replace("CAT::", "");
    list = list.filter(e => e.category === cat);
  }

if(metric === "MOST_EXPENSIVE_DAY" || metric === "CHEAPEST_DAY"){
    const byDate = {};
    list.forEach(e => {
      if(!e.date) return;
      byDate[e.date] = (byDate[e.date] || 0) + expenseILS(e);
    });
    const entries = Object.entries(byDate);
    if(!entries.length){
      return { total:0, count:0, extra:"אין נתונים" };
    }
    entries.sort((a,b) => metric === "MOST_EXPENSIVE_DAY" ? b[1]-a[1] : a[1]-b[1]);
    const [chosenDate, total] = entries[0];
    const count = list.filter(e => e.date === chosenDate).length;
    return { total, count, extra: chosenDate };
  }

return {
    total: list.reduce((s,e)=>s + expenseILS(e), 0),
    count: list.length,
    extra: ""
  };
}

window.setCompareMetricFromUI = function(){
  const metricSelect = document.getElementById("compareMetric");
  currentCompareMetric = metricSelect?.value || "TOTAL";
  if(currentCompareMetric !== "DATE"){
    currentCompareDate = "ALL";
  }
  renderTripComparison(false);
};

window.setCompareDateFromUI = function(){
  const dateSelect = document.getElementById("compareDate");
  currentCompareDate = dateSelect?.value || "ALL";
  renderTripComparison(false);
};

function renderTripComparison(rebuildChecks = true){
  const head = document.getElementById("tripComparisonHead");
  const body = document.getElementById("tripComparisonBody");
  const status = document.getElementById("compareStatus");
  if(!head || !body) return;

if(rebuildChecks) renderComparisonTripChecks();
  renderCompareSelectors();

const selectedIds = getSelectedCompareTripIds();
  const selectedTrips = trips.filter(t => selectedIds.includes(t.id));
  const metric = currentCompareMetric || document.getElementById("compareMetric")?.value || "TOTAL";
  const date = currentCompareDate || document.getElementById("compareDate")?.value || "ALL";

if(selectedTrips.length < 2){
    head.innerHTML = "";
    body.innerHTML = `<tr><td>בחר לפחות 2 טיולים להשוואה.</td></tr>`;
    if(status) status.innerHTML = `<span class="red">צריך לבחור לפחות 2 טיולים ועד 5.</span>`;
    return;
  }

if(selectedTrips.length > 5){
    head.innerHTML = "";
    body.innerHTML = `<tr><td>אפשר לבחור עד 5 טיולים בלבד.</td></tr>`;
    if(status) status.innerHTML = `<span class="red">בחרת יותר מדי טיולים.</span>`;
    return;
  }

const label = metricLabel(metric, date);
  if(status){
    status.innerHTML = `משווה: <b>${escapeHtml(label)}</b> בין <b>${selectedTrips.length}</b> טיולים.`;
  }

if(metric === "MOST_EXPENSIVE_DAY" || metric === "CHEAPEST_DAY"){
    head.innerHTML = `<tr><th>טיול</th><th>${escapeHtml(label)}</th><th>תאריך</th><th>מס׳ הוצאות</th></tr>`;
    body.innerHTML = selectedTrips.map(t => {
      const result = tripMetricTotal(t.id, metric, date);
      return `
        <tr>
          <td><b>${escapeHtml(t.name || t.id)}</b></td>
          <td>${fmtILS(result.total)}</td>
          <td>${escapeHtml(result.extra || "")}</td>
          <td>${result.count}</td>
        </tr>
      `;
    }).join("");
    return;
  }

head.innerHTML = `<tr><th>טיול</th><th>${escapeHtml(label)}</th><th>מס׳ הוצאות</th></tr>`;
  body.innerHTML = selectedTrips.map(t => {
    const result = tripMetricTotal(t.id, metric, date);
    return `
      <tr>
        <td><b>${escapeHtml(t.name || t.id)}</b></td>
        <td>${fmtILS(result.total)}</td>
        <td>${result.count}</td>
      </tr>
    `;
  }).join("");
}

function renderRates(){
  document.getElementById("usdRateTop").innerText = Number(rates.USD).toFixed(4);
  document.getElementById("jpyRateTop").innerText = Number(rates.JPY).toFixed(6);
  if(document.getElementById("jpy100RateTop")) document.getElementById("jpy100RateTop").innerText = (Number(rates.JPY) * 100).toFixed(4);
  if(document.getElementById("eurRateTop")) document.getElementById("eurRateTop").innerText = Number(rates.EUR).toFixed(4);
  if(document.getElementById("gbpRateTop")) document.getElementById("gbpRateTop").innerText = Number(rates.GBP).toFixed(4);
  if(document.getElementById("cadRateTop")) document.getElementById("cadRateTop").innerText = Number(rates.CAD).toFixed(4);
  document.getElementById("rateSource").innerText = rates.source || "";
  document.getElementById("rateUpdated").innerText = rates.updatedAtText || "";
  document.getElementById("usdRateInput").value = Number(rates.USD);
  document.getElementById("jpyRateInput").value = Number(rates.JPY);
  if(document.getElementById("eurRateInput")) document.getElementById("eurRateInput").value = Number(rates.EUR);
  if(document.getElementById("gbpRateInput")) document.getElementById("gbpRateInput").value = Number(rates.GBP);
  if(document.getElementById("cadRateInput")) document.getElementById("cadRateInput").value = Number(rates.CAD);
}

function getCategoryTotals(){
  const totals = {};
  activeExpenses().forEach(e => {
    totals[e.category] = (totals[e.category] || 0) + expenseILS(e);
  });
  return totals;
}

window.setSummaryCurrencyFromUI = function(){
  summaryCurrencyCode = document.getElementById("summaryCurrency")?.value || "ILS";
  renderSummary();
};

function renderSummary(){
  const totalILS = activeExpenses().reduce((s,e)=>s + expenseILS(e), 0);
  const remainingILS = getActiveBudgetILS() - totalILS;
  const totalsILS = getCategoryTotals();
  const clothingILS = totalsILS["ביגוד והנעלה"] || 0;

const select = document.getElementById("summaryCurrency");
  const selectedCurrency = select ? select.value : summaryCurrencyCode;
  summaryCurrencyCode = selectedCurrency || "ILS";

const totalDisplay = convertFromILS(totalILS, summaryCurrencyCode);
  const remainingDisplay = convertFromILS(remainingILS, summaryCurrencyCode);
  const clothingDisplay = convertFromILS(clothingILS, summaryCurrencyCode);
  const clothingBudgetDisplay = convertFromILS(getActiveClothingBudgetILS(), summaryCurrencyCode);

const box = document.getElementById("summaryFinal");
  if(!box) return;

box.innerHTML = `
    <b>מטבע תצוגה:</b> ${currencyLabel(summaryCurrencyCode)}<br><br>
    <b>סה״כ הוצאות:</b> ${fmtCurrencyByCode(totalDisplay, summaryCurrencyCode)}<br>
    <b>יתרה כללית:</b> <span class="${remainingILS < 0 ? "red" : "green"}">${fmtCurrencyByCode(remainingDisplay, summaryCurrencyCode)}</span><br><br>

<b>בקרת ביגוד, הנעלה, ואלקטרוניקה:</b><br>
    נוצל: <span class="${clothingILS > getActiveClothingBudgetILS() ? "red" : ""}">${fmtCurrencyByCode(clothingDisplay, summaryCurrencyCode)}</span>
    מתוך ${fmtCurrencyByCode(clothingBudgetDisplay, summaryCurrencyCode)}<br><br>

<b>סיכום לפי קטגוריות:</b><br>
    ${categoryHtml || "אין עדיין הוצאות"}
  `;
}

function renderDaily(){
  const tbody = document.getElementById("dailyBody");
  const thead = document.querySelector("#dailyTable thead");
  tbody.innerHTML = "";
  const days = getDailyTotals();
  const keys = Object.keys(days).sort((a,b)=>dateSortKey(a).localeCompare(dateSortKey(b)));
  const usedCats = Array.from(new Set(activeExpenses().map(e => e.category))).sort();

if(thead){
    thead.innerHTML = `<tr><th>תאריך</th><th>סה״כ יומי</th>${usedCats.map(c => `<th>${escapeHtml(c)}</th>`).join("")}</tr>`;
  }

if(!keys.length){
    tbody.innerHTML = `<tr><td colspan="2">אין עדיין הוצאות</td></tr>`;
    return;
  }

keys.forEach(date => {
    const d = days[date];
    tbody.innerHTML += `
      <tr>
        <td>${date}</td>
        <td><b>${fmtILS(d.total)}</b></td>
        ${usedCats.map(cat => {
          const val = d.categories[cat] || 0;
          const cls = cat === "אוכל" && val > getActiveFoodDailyBudgetILS() ? "red-cell" : "";
          return `<td class="${cls}">${val ? fmtILS(val) : "—"}</td>`;
        }).join("")}
      </tr>
    `;
  });
}

function refreshDynamicExpensesTableWidth(){
  const table = document.getElementById("expensesTable");
  if(!table) return;
  table.style.width = "auto";
  requestAnimationFrame(() => {
    table.style.width = "max-content";
  });
}

function renderExpenses(){
  const tbody = document.getElementById("expensesBody");
  if(!tbody) return;
  tbody.innerHTML = "";

updateFilterOptions();
  renderCategoryTotals();

const list = activeExpenses()
    .slice()
    .sort((a,b)=> dateSortKey(a.date).localeCompare(dateSortKey(b.date)) || (a.created||0)-(b.created||0));

if(!list.length){
    tbody.innerHTML = `<tr><td colspan="8">אין עדיין הוצאות בטיול הפעיל</td></tr>`;
    const summary = document.getElementById("selectedCategorySummary");
    if(summary) summary.innerHTML = "אין הוצאות בטיול הפעיל.";
    refreshDynamicExpensesTableWidth();
    return;
  }

let total = 0;

list.forEach(e => {
    const ils = expenseILS(e);
    total += ils;
    const rateText = e.currency === "USD" ? "USD " + Number(e.rateUSDAtEntry || rates.USD).toFixed(4) :
      e.currency === "JPY" ? "JPY " + Number(e.rateJPYAtEntry || rates.JPY).toFixed(6) :
      e.currency === "EUR" ? "EUR " + Number(e.rateEURAtEntry || rates.EUR).toFixed(4) :
      e.currency === "GBP" ? "GBP " + Number(e.rateGBPAtEntry || rates.GBP).toFixed(4) :
      e.currency === "CAD" ? "CAD " + Number(e.rateCADAtEntry || rates.CAD).toFixed(4) :
      "שקל";
    tbody.innerHTML += `
      <tr>
        <td>${compactDateForTable(e.date)}</td>
        <td>${escapeHtml(e.category)}</td>
        <td>${escapeHtml(e.note || "")}</td>
        <td>${Number(e.amount).toFixed(2)}</td>
        <td>${compactCurrencyLabel(e.currency)}</td>
        <td>${fmtILS(ils)}</td>
        <td>${compactRateLabel(e)}</td>
        <td>
          <div class="rowActions">
            <button class="secondaryBtn smallBtn" onclick="startEditExpense('${e.id}')">ערוך</button>
            <button class="danger smallBtn" onclick="deleteExpense('${e.id}')">×</button>
          </div>
        </td>
      </tr>
    `;
  });

tbody.innerHTML += `
    <tr>
      <td colspan="5"><b>סה״כ כל ההוצאות המוצגות</b></td>
      <td><b>${fmtILS(typeof total !== "undefined" ? total : filteredTotal)}</b></td>
      <td colspan="2"></td>
    </tr>
  `;

const summary = document.getElementById("selectedCategorySummary");
  if(summary){
    summary.innerHTML = `סה״כ הוצאות בטיול הפעיל: <b>${fmtILS(total)}</b>`;
  }

if(typeof applyMobileTableLabels === "function"){
    setTimeout(applyMobileTableLabels, 30);
  }
  refreshDynamicExpensesTableWidth();
}

function updateFilterOptions(){
  updateCategoryFilterOptions();
  updateDateFilterOptions();

const typeSelect = document.getElementById("filterType");
  if(typeSelect) typeSelect.value = currentFilterType;

const catBox = document.getElementById("categoryFilterBox");
  const dateBox = document.getElementById("dateFilterBox");
  if(catBox) catBox.style.display = currentFilterType === "category" ? "block" : "none";
  if(dateBox) dateBox.style.display = currentFilterType === "date" ? "block" : "none";
}

function updateCategoryFilterOptions(){
  const select = document.getElementById("categoryFilter");
  if(!select) return;
  const fromExpenses = Array.from(new Set(activeExpenses().map(e => e.category))).filter(Boolean);
  const cats = Array.from(new Set([...fixedCategories, ...fromExpenses])).sort();

select.innerHTML = `<option value="ALL">כל הקטגוריות</option>` + cats.map(c => `<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`).join("");

if(currentCategoryFilter !== "ALL" && !cats.includes(currentCategoryFilter)){
    currentCategoryFilter = "ALL";
  }
  select.value = currentCategoryFilter;
}

function updateDateFilterOptions(){
  const select = document.getElementById("dateFilter");
  const chips = document.getElementById("activeDatesChips");
  if(!select) return;

const dates = Array.from(new Set(activeExpenses().map(e => e.date).filter(Boolean))).sort((a,b)=>dateSortKey(a).localeCompare(dateSortKey(b)));

select.innerHTML = `<option value="ALL">כל התאריכים הפעילים</option>` + dates.map(d => `<option value="${escapeHtml(d)}">${escapeHtml(d)}</option>`).join("");

if(currentDateFilter !== "ALL" && !dates.includes(currentDateFilter)){
    currentDateFilter = "ALL";
  }
  select.value = currentDateFilter;

if(chips){
    if(!dates.length){
      chips.innerHTML = `<span class="small">אין עדיין תאריכים עם פעילות.</span>`;
    }else{
      chips.innerHTML = dates.map(d => `<button class="dateChip ${currentDateFilter === d ? "active" : ""}" onclick="selectDateFilter('${escapeHtml(d)}')">${escapeHtml(d)}</button>`).join("");
    }
  }
}

window.setFilterTypeFromUI = function(){
  const type = document.getElementById("filterType")?.value || "category";
  currentFilterType = type;
  renderAll();
};

window.setCategoryFilterFromUI = function(){
  const val = document.getElementById("categoryFilter")?.value || "ALL";
  currentFilterType = "category";
  currentCategoryFilter = val;
  renderAll();
};

window.setDateFilterFromUI = function(){
  const val = document.getElementById("dateFilter")?.value || "ALL";
  currentFilterType = "date";
  currentDateFilter = val;
  renderAll();
};

window.selectDateFilter = function(dateValue){
  currentFilterType = "date";
  currentDateFilter = dateValue;
  renderAll();
};

window.onFilterTypeChange = function(){
  currentFilterType = document.getElementById("filterType")?.value || "category";
  renderAll();
};

window.clearCategoryFilter = function(){
  currentFilterType = "category";
  currentCategoryFilter = "ALL";
  currentDateFilter = "ALL";
  renderAll();
};

window.toggleTheme = function(){
  document.body.classList.toggle("darkMode");
  localStorage.setItem("budgetTheme", document.body.classList.contains("darkMode") ? "dark" : "light");
};

function applySavedTheme(){
  if(localStorage.getItem("budgetTheme") === "dark"){
    document.body.classList.add("darkMode");
  }
}

const chartPalette = [
  "#2563eb","#16a34a","#f59e0b","#dc2626","#7c3aed","#0891b2",
  "#db2777","#65a30d","#ea580c","#475569","#0f766e","#9333ea",
  "#b45309","#1d4ed8","#be123c","#4d7c0f"
];

function setStatusClass(el, status){
  if(!el) return;
  el.classList.remove("statusGood","statusWarn","statusBad");
  if(status === "bad") el.classList.add("statusBad");
  else if(status === "warn") el.classList.add("statusWarn");
  else el.classList.add("statusGood");
}

function getStatusByPercent(percent){
  if(percent >= 100) return "bad";
  if(percent >= 80) return "warn";
  return "good";
}

function drawEmptyCanvas(canvas, text){
  if(!canvas) return;
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle = "#64748b";
  ctx.font = "18px Arial";
  ctx.textAlign = "center";
  ctx.fillText(text, canvas.width/2, canvas.height/2);
}

function drawPieChart(totals){
  const canvas = document.getElementById("categoryPie");
  const legend = document.getElementById("categoryLegend");
  if(!canvas || !legend) return;

const entries = Object.entries(totals).filter(([k,v]) => v > 0).sort((a,b)=>b[1]-a[1]);
  const sum = entries.reduce((s,[k,v])=>s+v,0);
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,canvas.width,canvas.height);
  legend.innerHTML = "";

if(!entries.length || sum <= 0){
    drawEmptyCanvas(canvas, "אין עדיין נתונים לגרף");
    return;
  }

const cx = canvas.width / 2;
  const cy = canvas.height / 2;
  const radius = Math.min(canvas.width, canvas.height) * 0.34;
  let start = -Math.PI / 2;

entries.forEach(([cat,val], i) => {
    const slice = (val / sum) * Math.PI * 2;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, radius, start, start + slice);
    ctx.closePath();
    ctx.fillStyle = chartPalette[i % chartPalette.length];
    ctx.fill();
    start += slice;
  });

entries.slice(0,10).forEach(([cat,val], i) => {
    const pct = ((val/sum)*100).toFixed(1);
    const div = document.createElement("div");
    div.className = "legendItem";
    div.innerHTML = `<span class="legendColor" style="background:${chartPalette[i % chartPalette.length]}"></span>
      <span>${escapeHtml(cat)} — ${fmtILS(val)} (${pct}%)</span>`;
    legend.appendChild(div);
  });
}

function drawDailyBarChart(days){
  const canvas = document.getElementById("dailyBar");
  if(!canvas) return;
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,canvas.width,canvas.height);

const entries = Object.keys(days).sort((a,b)=>dateSortKey(a).localeCompare(dateSortKey(b))).map(d => [d, days[d].total]);
  if(!entries.length){
    drawEmptyCanvas(canvas, "אין עדיין נתונים לגרף");
    return;
  }

const padding = 38;
  const chartW = canvas.width - padding * 2;
  const chartH = canvas.height - padding * 2;
  const maxVal = Math.max(...entries.map(e=>e[1]), 1);
  const barW = Math.max(8, chartW / entries.length * 0.65);
  const gap = chartW / entries.length;

ctx.strokeStyle = "#cbd5e1";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(padding, padding);
  ctx.lineTo(padding, padding + chartH);
  ctx.lineTo(padding + chartW, padding + chartH);
  ctx.stroke();

entries.forEach(([date,val], i) => {
    const h = (val / maxVal) * chartH;
    const x = padding + i * gap + (gap - barW)/2;
    const y = padding + chartH - h;
    ctx.fillStyle = val >= 3000 ? "#dc2626" : val >= 2000 ? "#f59e0b" : "#16a34a";
    ctx.fillRect(x, y, barW, h);
  });

ctx.fillStyle = "#334155";
  ctx.font = "13px Arial";
  ctx.textAlign = "center";
  ctx.fillText("שיא יומי: " + fmtILS(maxVal), canvas.width/2, 20);
}

function renderDashboard(){
  const totalILS = activeExpenses().reduce((s,e)=>s + expenseILS(e), 0);
  const remaining = getActiveBudgetILS() - totalILS;
  const percent = getActiveBudgetILS() > 0 ? (totalILS / getActiveBudgetILS()) * 100 : 0;
  const status = getStatusByPercent(percent);
  const days = getDailyTotals();
  const totals = getCategoryTotals();
  const today = todayText();
  const todayTotal = days[today]?.total || 0;
  const foodTodayILS = days[today]?.food || 0;
  const foodTodayILSDisplay = foodTodayILS;
  const clothing = totals["ביגוד והנעלה"] || 0;
  const activeDays = Object.keys(days).length || 1;
  const avgDaily = totalILS / activeDays;

const elTotal = document.getElementById("dashTotal");
  const elRemaining = document.getElementById("dashRemaining");
  const elPercent = document.getElementById("dashPercent");
  const elAvg = document.getElementById("dashAvgDaily");
  const elToday = document.getElementById("dashToday");
  const elFood = document.getElementById("dashFoodToday");
  const elClothing = document.getElementById("dashClothing");
  const elCount = document.getElementById("dashCount");
  const bar = document.getElementById("budgetProgressBar");
  const statusText = document.getElementById("budgetStatusText");

if(elTotal) elTotal.innerText = fmtILS(totalILS);
  if(elRemaining) elRemaining.innerText = fmtILS(remaining);
  if(elPercent) elPercent.innerText = percent.toFixed(1) + "%";
  if(elAvg) elAvg.innerText = fmtILS(avgDaily);
  if(elToday) elToday.innerText = fmtILS(todayTotal);
  if(elFood) elFood.innerText = fmtILS(foodTodayILSDisplay);
  if(elClothing) elClothing.innerText = fmtILS(clothing);
  if(elCount) elCount.innerText = String(activeExpenses().length);

setStatusClass(elRemaining, remaining < 0 ? "bad" : status);
  setStatusClass(elPercent, status);
  setStatusClass(elFood, foodTodayILSDisplay > getActiveFoodDailyBudgetILS() ? "bad" : foodTodayILSDisplay >= getActiveFoodDailyBudgetILS()*0.8 ? "warn" : "good");
  setStatusClass(elClothing, clothing > getActiveClothingBudgetILS() ? "bad" : clothing >= getActiveClothingBudgetILS()*0.8 ? "warn" : "good");

if(bar){
    const capped = Math.min(percent, 100);
    bar.style.width = capped.toFixed(1) + "%";
    bar.style.background = status === "bad" ? "#dc2626" : status === "warn" ? "#f59e0b" : "#16a34a";
  }

if(statusText){
    if(percent >= 100){
      statusText.innerHTML = `<span class="statusBad"><b>חריגה:</b> עברתם את התקציב הכולל ב־${fmtILS(Math.abs(remaining))}.</span>`;
    }else if(percent >= 80){
      statusText.innerHTML = `<span class="statusWarn"><b>התראה:</b> ניצלתם ${percent.toFixed(1)}% מהתקציב. כדאי להאט קצב.</span>`;
    }else{
      statusText.innerHTML = `<span class="statusGood"><b>תקין:</b> אתם עדיין בטווח התקציב.</span>`;
    }
  }

drawPieChart(totals);
  drawDailyBarChart(days);
}

function renderTripBudgetSummary(){
  const box = document.getElementById("tripBudgetSummaryBox");
  if(!box) return;

const cfg = getCurrentTripBudgetConfig();
  const activeTrip = trips.find(t => t.id === activeTripId) || {};
  const activeTripName = activeTrip.name || activeTripId || "טיול פעיל";
  const totalSpent = getTripTotalILS(activeTripId);
  const shoppingSpent = getTripShoppingILS(activeTripId);

const totalLeft = cfg.totalBudget - totalSpent;
  const shoppingLeft = cfg.shoppingBudget - shoppingSpent;

function cls(v){
    if(v < 0) return "tripBudgetBad";
    if(v < (cfg.totalBudget * 0.15)) return "tripBudgetWarn";
    return "tripBudgetGood";
  }

box.innerHTML = `
    <div class="tripBudgetSub" style="margin-bottom:12px;font-weight:800;">טיול פעיל: ${escapeHtml(activeTripName)}</div>
    <div class="tripBudgetSummaryGrid">
      <div class="tripBudgetCard">
        <h4>💰 תקציב כולל לטיול</h4>
        <div class="tripBudgetMain ${cls(totalLeft)}">${fmtILS(totalLeft)}</div>
        <div class="tripBudgetSub">
          תקציב כולל: ${fmtILS(cfg.totalBudget)}<br>
          נוצל עד עכשיו: ${fmtILS(totalSpent)}
        </div>
      </div>

<div class="tripBudgetCard">
        <h4>🛍️ תקציב קניות</h4>
        <div class="tripBudgetMain ${shoppingLeft < 0 ? "tripBudgetBad" : "tripBudgetGood"}">${fmtILS(shoppingLeft)}</div>
        <div class="tripBudgetSub">
          תקציב קניות: ${fmtILS(cfg.shoppingBudget)}<br>
          נוצל בקניות: ${fmtILS(shoppingSpent)}
        </div>
      </div>

<div class="tripBudgetCard">
        <h4>🍽️ תקציב אוכל</h4>
        <div class="tripBudgetMain tripBudgetGood">${fmtILS(cfg.dailyFoodBudget)}</div>
        <div class="tripBudgetSub">
          יעד יומי: ${fmtILS(cfg.dailyFoodBudget)}<br>
          ${cfg.totalFoodBudget ? "מסגרת אוכל כוללת: " + fmtILS(cfg.totalFoodBudget) : "ללא מסגרת אוכל כוללת"}
        </div>
      </div>
    </div>
  `;
}

function renderHomeSummary(){
  const trip = trips.find(t => t.id === activeTripId) || {};
  const cfg = getCurrentTripBudgetConfig ? getCurrentTripBudgetConfig() : {totalBudget:0,shoppingBudget:0,dailyFoodBudget:0};
  const totalSpent = getTripTotalILS ? getTripTotalILS(activeTripId) : 0;
  const shoppingSpent = getTripShoppingILS ? getTripShoppingILS(activeTripId) : 0;
  const totalLeft = Number(cfg.totalBudget || 0) - totalSpent;
  const shoppingLeft = Number(cfg.shoppingBudget || 0) - shoppingSpent;

const set = (id, value) => {
    const el = document.getElementById(id);
    if(el) el.innerText = value;
  };

set("homeTripName", trip.name || activeTripId || "—");
  set("homeTotalLeft", fmtILS(totalLeft));
  set("homeTotalUsed", "נוצל: " + fmtILS(totalSpent) + " מתוך " + fmtILS(cfg.totalBudget || 0));
  set("homeShoppingLeft", fmtILS(shoppingLeft));
  set("homeShoppingUsed", "נוצל בקניות: " + fmtILS(shoppingSpent) + " מתוך " + fmtILS(cfg.shoppingBudget || 0));
  set("homeFoodBudget", fmtILS(cfg.dailyFoodBudget || 0));
  set("homeFoodSub", cfg.totalFoodBudget ? "מסגרת אוכל כוללת: " + fmtILS(cfg.totalFoodBudget) : "יעד יומי פעיל");

const totalEl = document.getElementById("homeTotalLeft");
  const shopEl = document.getElementById("homeShoppingLeft");
  if(totalEl) totalEl.style.color = totalLeft < 0 ? "#dc2626" : "#15803d";
  if(shopEl) shopEl.style.color = shoppingLeft < 0 ? "#dc2626" : "#15803d";
}

function renderAll(){
  ensureExpenseDateDefault();
  renderTripSelector();
  renderRates();
  renderSummary();
  renderDaily();
  renderExpenses();
  renderDashboard();
  renderTripBudgetSummary();
  renderHomeSummary();
  renderHomeTripSelector();
  setTimeout(applyMobileTableLabels, 50);
  if(typeof initAppTabs === 'function') setTimeout(initAppTabs, 80);
  renderTripComparison();
}

window.exportHTML = function(){
  try{
    const generated = new Date().toLocaleString("he-IL");
    const activeTripTitle = getActiveTrip().name || tripName || "חופשה";

const expensesRows = activeExpenses().map(e => `
      <tr>
        <td>${compactDateForTable(e.date)}</td>
        <td>${escapeHtml(e.category)}</td>
        <td>${escapeHtml(e.note || "")}</td>
        <td>${Number(e.amount).toFixed(2)}</td>
        <td>${compactCurrencyLabel(e.currency)}</td>
        <td>${fmtILS(expenseILS(e))}</td>
        <td>${compactRateLabel(e)}</td>
      </tr>
    `).join("");

const blob = new Blob([report], {type:"text/html;charset=utf-8"});
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "דוח_תקציב_" + activeTripTitle + ".html";
    document.body.appendChild(a);
    a.click();
    a.remove();
  }catch(err){
    console.error("exportHTML failed", err);
    alert("ייצוא HTML נכשל. רענן את האפליקציה ונסה שוב.");
  }
};

function buildPrintableBudgetReport(){
  const activeTripTitle = getActiveTrip().name || tripName || "חופשה";
  const generated = new Date().toLocaleString("he-IL");

const rows = activeExpenses().map(e => `
    <tr>
      <td>${compactDateForTable(e.date)}</td>
      <td>${escapeHtml(e.category)}</td>
      <td>${escapeHtml(e.note || "")}</td>
      <td>${Number(e.amount).toFixed(2)}</td>
      <td>${compactCurrencyLabel(e.currency)}</td>
      <td>${fmtILS(expenseILS(e))}</td>
      <td>${compactRateLabel(e)}</td>
    </tr>
  `).join("");

return `
<div class="printReport">
  <h1>דוח תקציב חופשה</h1>
  <h2>${escapeHtml(activeTripTitle)}</h2>
  <div class="meta">נוצר: ${generated}</div>
  <div class="summary">${document.getElementById("summaryFinal")?.innerHTML || ""}</div>
  <h2>פירוט הוצאות</h2>
  <table>
    <thead><tr><th>תאריך</th><th>קטגוריה</th><th>פירוט</th><th>סכום</th><th>מטבע</th><th>בשקלים</th><th>שער</th></tr></thead>
    <tbody>${rows || `<tr><td colspan="7">אין הוצאות להצגה</td></tr>`}</tbody>
  </table>
</div>`;
}

window.closePdfPreview = function(){
  const overlay = document.getElementById("pdfPreviewOverlay");
  if(overlay) overlay.remove();
  const iframe = document.getElementById("pdfPrintFrame");
  if(iframe) iframe.remove();
  document.body.classList.remove("pdfPreviewOpen");
};

let iframe = document.getElementById("pdfPrintFrame");
    if(iframe) iframe.remove();

iframe = document.createElement("iframe");
    iframe.id = "pdfPrintFrame";
    iframe.style.position = "fixed";
    iframe.style.left = "0";
    iframe.style.bottom = "0";
    iframe.style.width = "1px";
    iframe.style.height = "1px";
    iframe.style.opacity = "0";
    iframe.style.border = "0";
    iframe.style.pointerEvents = "none";
    document.body.appendChild(iframe);

const doc = iframe.contentWindow.document;
    doc.open();
    doc.write(reportHtml);
    doc.close();

setTimeout(() => {
      try{
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
      }catch(err){
        console.error("iframe print failed", err);
        alert("הדפסה נכשלה. נסה לפתוח את הדוח שוב או להשתמש בייצוא HTML.");
      }
    }, 800);
  }catch(err){
    console.error("printPdfPreview failed", err);
    alert("הדפסה נכשלה. נסה שוב.");
  }
};

window.exportPDF = function(){
  try{
    const old = document.getElementById("pdfPreviewOverlay");
    if(old) old.remove();

const overlay = document.createElement("div");
    overlay.id = "pdfPreviewOverlay";
    overlay.innerHTML = `
      <div class="pdfPreviewToolbar noPrint">
        <button type="button" onclick="closePdfPreview()">⬅ חזרה לאפליקציה</button>
        <button type="button" class="export" onclick="printPdfPreview()">🖨️ הדפסה / שמירה כ-PDF</button>
      </div>
      <div class="pdfPreviewContent">
        ${buildPrintableBudgetReport()}
      </div>
    `;
    document.body.appendChild(overlay);
    document.body.classList.add("pdfPreviewOpen");
    setTimeout(() => window.scrollTo(0, 0), 50);
  }catch(err){
    console.error("exportPDF failed", err);
    alert("פתיחת תצוגת PDF נכשלה. אפשר להשתמש בייצוא HTML כחלופה.");
  }
};

applySavedTheme();
setTimeout(initAppTabs, 50);

async function forceFirebaseServerRefresh(reason = "כניסה לאפליקציה"){
  try{
    setSyncStatus("pending", "מרענן נתונים מהענן...", "מבצע קריאה ישירה מ-Firebase ולא מסתמך רק על זיכרון מקומי.");

const [ratesSnap, tripsSnap, expensesSnap] = await Promise.all([
      getDocFromServer(doc(db, "settings", "rates")),
      getDocsFromServer(collection(db, "trips")),
      getDocsFromServer(collection(db, "expenses"))
    ]);

if(ratesSnap.exists()){
      rates = {...rates, ...ratesSnap.data()};
    }

trips = [];
    tripsSnap.forEach(d => trips.push({id:d.id, ...d.data()}));
    if(!trips.find(t => t.id === defaultTrip.id)){
      trips.push(defaultTrip);
    }

expenses = [];
    expensesSnap.forEach(d => expenses.push({id:d.id, ...d.data()}));

renderAll();
    setSyncStatus("online", "מחובר ומסונכרן", "הנתונים רועננו ישירות מהענן: " + reason);
  }catch(err){
    console.error("forceFirebaseServerRefresh failed", err);
    setSyncStatus("pending", "הרענון הישיר נכשל", "ממשיך לעבוד עם הסנכרון הרגיל. בדוק חיבור אינטרנט ונסה שוב.");
  }
}

window.forceFirebaseServerRefresh = forceFirebaseServerRefresh;

async function startBudgetAppData(){
  await ensureDefaultSettings();
  await forceFirebaseServerRefresh('כניסה לאפליקציה');

onSnapshot(doc(db, "settings", "rates"), async (snap) => {
  if(snap.exists()){
    rates = {...rates, ...snap.data()};
  }
  renderAll();
  await freezeLegacyExpensesOnce();
});

onSnapshot(collection(db, "trips"), (snap) => {
  trips = [];
  snap.forEach(d => trips.push({id:d.id, ...d.data()}));
  if(!trips.find(t => t.id === defaultTrip.id)){
    trips.push(defaultTrip);
  }
  renderTripSelector();
  renderAll();
});

onSnapshot(collection(db, "expenses"), (snap) => {
  expenses = [];
  snap.forEach(d => expenses.push({id:d.id, ...d.data()}));
  renderAll();
});

}
</script>

<style>

*{box-sizing:border-box}
html{direction:rtl}
body{
  font-family:Arial,"Noto Sans Hebrew",sans-serif;
  background:#f4f7fb;
  color:#111827;
  padding:15px;
  margin:0;
}
.container{
  max-width:980px;
  margin:auto;
  background:#fff;
  padding:18px;
  border-radius:18px;
  box-shadow:0 2px 14px rgba(15,23,42,.10);
}
.card{
  background:#eef6ff;
  border:1px solid #dbeafe;
  border-radius:16px;
  padding:14px;
  margin-top:14px;
  line-height:1.7;
}
h1,h2,h3{margin-top:0}
input,select,button{
  width:100%;
  box-sizing:border-box;
  padding:13px;
  margin-top:10px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:16px;
}
button{
  background:#007aff;
  color:white;
  border:none;
  font-weight:900;
  cursor:pointer;
}
button.export{background:#2e7d32}
button.orange{background:#ef6c00}
button.danger{background:#c62828}
button.secondaryBtn,.secondaryBtn{background:#475569}
.smallBtn{padding:6px;margin:0;font-size:12px}
.small{font-size:13px;color:#555}

.rowActions{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
.rowActions .smallBtn{width:auto;min-width:54px}
label{display:block;margin-top:10px;color:#1f2937}
#expenseCancelEditButton{margin-top:8px}
.red{color:#b71c1c;font-weight:900}
.green{color:#1b5e20;font-weight:900}
.red-cell{background:#ffcdd2;color:#b71c1c;font-weight:900}
.noPrint{}

.authOverlay{
  position:fixed;
  inset:0;
  z-index:999999;
  background:linear-gradient(135deg,#0f172a,#1e293b,#111827);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  direction:rtl;
}
.authCard{
  width:100%;
  max-width:460px;
  background:#fff;
  border-radius:26px;
  padding:24px;
  box-shadow:0 22px 60px rgba(0,0,0,.32);
}
.authCard h1{margin:0 0 8px;font-size:30px;text-align:center}
.authCard p{color:#475569;text-align:center;margin:0 0 18px;font-weight:700}
.authCard label{font-weight:900;margin-top:10px;display:block}
.authCard input{direction:ltr;text-align:left}
.authCard button{background:linear-gradient(135deg,#2563eb,#06b6d4)}
.authCard .authSecondary{background:#475569}
.authMessage{margin-top:12px;text-align:center;font-weight:900;color:#991b1b;min-height:24px}
.authHint{
  margin-top:14px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px;
  font-size:14px;
  color:#475569;
  line-height:1.45;
}
body.authLocked .container,
body.authLocked #floatingBottomButton,
body.authLocked #force-cloud-refresh-btn{display:none!important}

.authTopBar,.syncStatusBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:16px;
  padding:10px 12px;
  margin:10px 0 14px;
  font-size:14px;
  font-weight:900;
}
.authTopBar{background:#ecfeff;border:1px solid #a5f3fc;color:#155e75}
.authTopBar button{width:auto;padding:8px 12px;border-radius:12px;background:#0f766e}
.syncStatusBar{background:#f8fafc;border:1px solid #cbd5e1;color:#334155}
.syncStatusBar .dot{width:11px;height:11px;border-radius:999px;display:inline-block;margin-left:7px;background:#64748b}
.syncStatusBar.online .dot{background:#16a34a}
.syncStatusBar.offline .dot{background:#f97316}
.syncStatusBar.pending .dot{background:#dc2626}
.syncStatusBar small{display:block;font-size:12px;color:#64748b;font-weight:700;margin-top:2px}

.proHeader{
  padding:18px 16px;
  border-radius:28px;
  background:linear-gradient(135deg,#0f172a,#1e3a8a 58%,#0891b2);
  color:#fff;
  margin:12px 0 14px;
  box-shadow:0 16px 40px rgba(15,23,42,.28);
}
.proHeader h1{font-size:28px;margin:0;color:#fff}
.proHeaderSub{margin-top:8px;font-weight:800;opacity:.9;line-height:1.35}

.appTabs{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:12px 6px;
  margin:10px 0 16px;
  background:rgba(248,250,252,.96);
  backdrop-filter:blur(10px);
  border:1px solid #dbeafe;
  border-radius:18px;
  -webkit-overflow-scrolling:touch;
}
.appTabs button{
  width:auto;
  min-width:max-content;
  flex:0 0 auto;
  border-radius:999px;
  padding:12px 18px;
  font-size:16px;
  background:#e2e8f0;
  color:#0f172a;
  margin:0;
  box-shadow:none;
}
.appTabs button.active{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;
}

.tabPanel{display:none!important}
.tabPanel.active{display:block!important}
body.tab-main #tabMain,
body.tab-summary #tabSummary,
body.tab-charts #tabCharts,
body.tab-compare #tabCompare,
body.tab-settings #tabSettings{display:block!important}
body.tab-main #tabSummary,body.tab-main #tabCharts,body.tab-main #tabCompare,body.tab-main #tabSettings,
body.tab-summary #tabMain,body.tab-summary #tabCharts,body.tab-summary #tabCompare,body.tab-summary #tabSettings,
body.tab-charts #tabMain,body.tab-charts #tabSummary,body.tab-charts #tabCompare,body.tab-charts #tabSettings,
body.tab-compare #tabMain,body.tab-compare #tabSummary,body.tab-compare #tabCharts,body.tab-compare #tabSettings,
body.tab-settings #tabMain,body.tab-settings #tabSummary,body.tab-settings #tabCharts,body.tab-settings #tabCompare{display:none!important}

.homeKpiGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.homeKpi{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.homeKpiTitle{font-size:13px;color:#64748b;font-weight:900;margin-bottom:8px}
.homeKpiValue{font-size:22px;font-weight:1000;color:#0f172a}
.homeKpiSub{font-size:12px;color:#64748b;margin-top:6px;line-height:1.35;font-weight:700}
.homeQuickActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.homeQuickActions button{border-radius:18px;padding:14px 12px;font-weight:1000;font-size:15px;background:#e0f2fe;color:#075985}
.homeQuickActions button.primary{background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff}
.homeMiniNote{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

table{width:100%;border-collapse:collapse;margin-top:12px;background:white;font-size:13px}
th,td{border:1px solid #ddd;padding:8px;text-align:center}
th{background:#007aff;color:white}
.tableWrap{overflow-x:auto}

.expensesLedgerWrap{
  width:100%;
  max-height:520px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  margin-top:14px;
  background:#fff;
  border:1px solid #d7dce5;
}
#expensesTable.expensesLedgerTable{
  width:max-content;
  min-width:100%;
  max-width:none;
  table-layout:auto;
  border-collapse:collapse;
  direction:rtl;
  background:#fff;
  color:#111827;
  font-size:clamp(9px,2.45vw,13px);
}
#expensesTable.expensesLedgerTable :is(thead,tbody,tr,th,td){display:revert}
#expensesTable.expensesLedgerTable :is(th,td){
  border:1px solid #d7dce5;
  padding:6px 4px;
  text-align:center;
  vertical-align:middle;
  line-height:1.18;
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}
#expensesTable.expensesLedgerTable thead th{
  background:#0b84f3;
  color:#fff;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:6;
}
#expensesTable.expensesLedgerTable tbody tr:nth-child(odd) td{background:#fff}
#expensesTable.expensesLedgerTable tbody tr:nth-child(even) td{background:#fafafa}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(1){min-width:54px}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(2){min-width:64px;font-weight:800}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(3){min-width:120px}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(4){min-width:58px}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(5){min-width:38px}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(6){min-width:70px;font-weight:900}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(7){min-width:48px}
#expensesTable.expensesLedgerTable :is(th,td):nth-child(8){min-width:42px}
#expensesTable.expensesLedgerTable td::before{content:none!important;display:none!important}
#expensesTable.expensesLedgerTable .danger.smallBtn{
  background:#d32027;
  color:#fff;
  border:none;
  border-radius:10px;
  width:100%;
  max-width:42px;
  height:28px;
  padding:0;
  font-size:12px;
  line-height:28px;
  font-weight:900;
}

.dashboardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.dashCard{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:16px;
  padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.dashTitle{font-size:13px;color:#475569;font-weight:bold}
.dashValue{font-size:22px;font-weight:900;margin-top:4px}
.statusGood{color:#1b5e20}
.statusWarn{color:#ef6c00}
.statusBad{color:#b71c1c}
.progressWrap{width:100%;height:22px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:10px;border:1px solid #cbd5e1}
.progressBar{height:100%;width:0%;background:#16a34a;transition:width .25s ease,background .25s ease}
.dashboardNote{margin-top:8px;font-size:14px;color:#475569}
.chartGrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px}
.chartBox{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px}
.chartCanvas{width:100%;max-width:100%;height:220px}
.legendItem{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:14px}
.legendColor{width:14px;height:14px;border-radius:4px;display:inline-block;flex:0 0 auto}

.filterPanel,.compareControls{
  background:#f8fafc;
  border:1px solid #dbeafe;
  border-radius:14px;
  padding:12px;
  margin-top:12px;
}
.categoryTotalsGrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.categoryTotalItem{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;font-weight:800}
.dateChips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.dateChip{
  width:auto;
  padding:8px 10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  border:1px solid #7dd3fc;
  font-size:13px;
  font-weight:800;
}
.dateChip.active{background:#2563eb;color:white;border-color:#2563eb}
.tripCheckGrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.tripCheckItem{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
}
.tripCheckItem input{width:auto;margin:0}
.compareResultCard{margin-top:12px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px}
.collapsiblePanel{display:none;margin-top:12px}
.collapsiblePanel.open{display:block}
.tripActions{display:flex;gap:8px;flex-wrap:wrap}
.tripActions button{flex:1 1 160px}

.tripBudgetSummaryBox{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 100%);
  border:1px solid #bfdbfe;
}
.tripBudgetSummaryGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tripBudgetCard{background:white;border-radius:16px;padding:14px;border:1px solid #dbeafe}
.tripBudgetCard h4{margin:0 0 10px;font-size:16px}
.tripBudgetMain{font-size:22px;font-weight:900;margin-bottom:6px}
.tripBudgetSub{font-size:13px;color:#475569;line-height:1.45}
.tripBudgetGood{color:#15803d}
.tripBudgetWarn{color:#d97706}
.tripBudgetBad{color:#dc2626}

.ratesHeadline{
  background:#fff8e1;
  border:2px solid #ffca28;
  border-radius:12px;
  padding:12px;
  margin-top:10px;
  font-size:17px;
}
.rateLine{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  direction:rtl;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:6px 0;
}
.rateLine:last-child{border-bottom:0}
.rateLine span:first-child{font-weight:700}
.rateLine b{white-space:nowrap}
.rateInputWrap{margin-top:12px}
.rateInputWrap label{display:block;font-weight:900;margin:10px 0 4px}

.appCreatorFooter{
  margin-top:40px;
  padding:18px;
  border-top:1px solid #dbeafe;
  text-align:center;
  font-size:14px;
  color:#475569;
  opacity:.95;
}
.appCreatorFooter .creatorName{font-weight:800;font-size:16px;margin-bottom:6px}

#force-cloud-refresh-btn{
  position:fixed;
  left:14px;
  bottom:calc(126px + env(safe-area-inset-bottom,0px));
  z-index:2147483647;
  min-width:118px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:linear-gradient(135deg,#0f766e,#2563eb);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}

#pdfPreviewOverlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  background:#f8fafc;
  color:#111827;
  direction:rtl;
  overflow:hidden;
  height:100vh;
}
body.pdfPreviewOpen{
  overflow:hidden;
  height:100vh;
}
.pdfPreviewToolbar{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  padding:12px;
  background:rgba(248,250,252,.96);
  border-bottom:1px solid #d7dce5;
  backdrop-filter:blur(10px);
  z-index:10;
}
.pdfPreviewToolbar button{
  width:auto;
  flex:1;
  margin:0;
  border-radius:14px;
  padding:12px;
  font-weight:900;
}
.pdfPreviewContent{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:18px;
}
.printReport{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  border:1px solid #d7dce5;
  border-radius:16px;
  padding:18px;
}
.printReport h1,.printReport h2{text-align:center;margin:10px 0}
.printReport .meta{text-align:center;color:#475569;margin-bottom:18px}
.printReport .summary{border:1px solid #d7dce5;border-radius:14px;padding:14px;margin:14px 0;line-height:1.8}
.printReport table{width:100%;border-collapse:collapse;margin-top:14px;font-size:12px;background:#fff}
.printReport th,.printReport td{border:1px solid #d7dce5;padding:8px;text-align:center;vertical-align:middle;color:#111827}
.printReport th{background:#0b84f3!important;color:#fff!important}
.printReport tr:nth-child(even) td{background:#fafafa}
body.pdfPreviewOpen .container,
body.pdfPreviewOpen #authOverlay,
body.pdfPreviewOpen #force-cloud-refresh-btn{display:none!important}
#pdfPrintFrame{display:block!important}

body.darkMode{
  background:#0f172a;
  color:#e5e7eb;
}
body.darkMode .container,
body.darkMode .card,
body.darkMode .chartBox,
body.darkMode .dashCard,
body.darkMode .categoryTotalItem,
body.darkMode .compareResultCard,
body.darkMode .tripCheckItem{
  background:#111827;
  color:#e5e7eb;
  border-color:#374151;
}
body.darkMode input,body.darkMode select{
  background:#0f172a;
  color:#e5e7eb;
  border-color:#475569;
}
body.darkMode .appTabs{background:rgba(15,23,42,.96);border-color:#334155}
body.darkMode .appTabs button{background:#1f2937;color:#e5e7eb}
body.darkMode .appTabs button.active{background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff}
body.darkMode .homeKpi,
body.darkMode .tripBudgetCard{background:#1f2937;border-color:#374151}
body.darkMode .homeKpiValue{color:#e5e7eb}
body.darkMode .homeKpiTitle,body.darkMode .homeKpiSub,body.darkMode .dashboardNote,body.darkMode .small{color:#cbd5e1}
body.darkMode .expensesLedgerWrap,
body.darkMode #expensesTable.expensesLedgerTable{background:#fff!important;color:#111827!important}
body.darkMode #expensesTable.expensesLedgerTable th,
body.darkMode #expensesTable.expensesLedgerTable td{border-color:#d7dce5!important;color:#111827!important}
body.darkMode #expensesTable.expensesLedgerTable thead th{background:#0b84f3!important;color:#fff!important}

@media(min-width:650px){
  .categoryTotalsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:700px){
  .tripCheckGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:760px){
  .dashboardGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chartGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  body{padding:10px}
  .container{padding:12px;border-radius:14px}
  .homeKpiGrid,.homeQuickActions{grid-template-columns:1fr}
  .proHeader h1{font-size:24px}
  .appTabs button{font-size:14px;padding:10px 14px}
  .chartGrid{grid-template-columns:1fr}
  .chartCanvas{width:100%;max-width:100%}
  table.mobileCards,table.mobileCards thead,table.mobileCards tbody,table.mobileCards tr,table.mobileCards th,table.mobileCards td{display:block;width:100%}
  table.mobileCards thead{display:none}
  table.mobileCards tr{background:rgba(255,255,255,.92);border:1px solid #e5e7eb;border-radius:16px;margin:10px 0;padding:10px;box-shadow:0 4px 12px rgba(15,23,42,.06)}
  table.mobileCards td{border:0!important;padding:8px 4px!important;text-align:right!important;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;white-space:normal!important;word-break:break-word}
  table.mobileCards td::before{content:attr(data-label);font-weight:900;color:#64748b;min-width:100px;flex:0 0 42%}
}
@media(max-width:430px){
  .expensesLedgerWrap{max-height:500px;margin-left:-10px;margin-right:-10px}
  #expensesTable.expensesLedgerTable{font-size:9px}
  #expensesTable.expensesLedgerTable th,#expensesTable.expensesLedgerTable td{padding:5px 2px}
}
@media print{
  .noPrint,.pdfPreviewToolbar,#force-cloud-refresh-btn{display:none!important}
  body.pdfPreviewOpen{overflow:visible!important;height:auto!important;background:#fff!important}
  body.pdfPreviewOpen #pdfPreviewOverlay{position:static!important;display:block!important;height:auto!important;overflow:visible!important;background:#fff!important}
  body.pdfPreviewOpen .pdfPreviewContent{overflow:visible!important;padding:0!important}
  body.pdfPreviewOpen .printReport{border:0!important;border-radius:0!important;padding:0!important}
  .container{box-shadow:none}
}

</style>
</head>
<body class="authLocked tab-main">
<div id="authOverlay" class="authOverlay">
  <div class="authCard">
    <h1>🔐 כניסה מאובטחת</h1>
    <p>אפליקציית ניהול תקציב החופשה</p>
    <label for="authEmail">אימייל</label>
    <input id="authEmail" type="email" autocomplete="username" placeholder="example@gmail.com">
    <label for="authPassword">סיסמה</label>
    <input id="authPassword" type="password" autocomplete="current-password" placeholder="הכנס סיסמה">
    <button onclick="loginBudgetApp()">כניסה לאפליקציה</button>
    <button class="authSecondary" onclick="createBudgetUser()">יצירת משתמש מורשה ראשון</button>
    <div id="authMessage" class="authMessage"></div>
    <div class="authHint">ניתן לשמור את הסיסמה באייפון ולהשתמש ב־Face ID למילוי מהיר.</div>
  </div>
</div>
<div class="container">
<div id="authTopBar" class="authTopBar" style="display:none;">
  <span id="authUserLabel">מחובר</span>
  <button onclick="logoutBudgetApp()">התנתקות</button>
</div>
<div id="syncStatusBar" class="syncStatusBar offline">
  <div>
    <span class="dot"></span><span id="syncStatusText">בודק חיבור וסנכרון...</span>
    <small id="syncStatusSub">שינויים שתזין אופליין יישמרו מקומית ויסונכרנו כשיחזור אינטרנט.</small>
  </div>
</div>
<div class="proHeader">
  <div class="proHeaderTop">
    <h1>ניהול תקציב חופשה</h1>
  </div>
  <div class="proHeaderSub">תקציב חי, הוצאות, סיכומים והשוואת טיולים</div>
</div>
<div class="appTabs noPrint">
  <button data-tab-btn="tabMain" onclick="showAppTab('tabMain')">🏠 ראשי</button>
  <button data-tab-btn="tabSummary" onclick="showAppTab('tabSummary')">💰 סיכומים</button>
  <button data-tab-btn="tabCharts" onclick="showAppTab('tabCharts')">📊 מידע גרפי</button>
  <button data-tab-btn="tabCompare" onclick="showAppTab('tabCompare')">⚖️ השוואה</button>
  <button data-tab-btn="tabSettings" onclick="showAppTab('tabSettings')">⚙️ הגדרות וייצוא</button>
</div>

<div id="tabMain" class="tabPanel active">
<div class="card section-main-home noPrint">
  <h2>🧳 בחירת טיול פעיל</h2>
  <label><b>טיול פעיל:</b></label>
  <select id="homeTripSelector" onchange="switchTripFromHome()"></select>
</div>

<div class="card section-main-home">
  <h2>🏠 מסך ראשי</h2>
  <div class="homeKpiGrid">
    <div class="homeKpi">
      <div class="homeKpiTitle">טיול פעיל</div>
      <div class="homeKpiValue" id="homeTripName">—</div>
      <div class="homeKpiSub">לפי בחירת הטיול הפעיל</div>
    </div>
    <div class="homeKpi">
      <div class="homeKpiTitle">נותר בתקציב הכולל</div>
      <div class="homeKpiValue" id="homeTotalLeft">—</div>
      <div class="homeKpiSub" id="homeTotalUsed">—</div>
    </div>
    <div class="homeKpi">
      <div class="homeKpiTitle">נותר בקניות</div>
      <div class="homeKpiValue" id="homeShoppingLeft">—</div>
      <div class="homeKpiSub" id="homeShoppingUsed">—</div>
    </div>
    <div class="homeKpi">
      <div class="homeKpiTitle">תקציב אוכל יומי</div>
      <div class="homeKpiValue" id="homeFoodBudget">—</div>
      <div class="homeKpiSub" id="homeFoodSub">יעד יומי פעיל</div>
    </div>
  </div>
  <div class="homeQuickActions noPrint">
    <button class="primary" onclick="document.getElementById('quickExpenseCard')?.scrollIntoView({behavior:'smooth'});">➕ הוספת הוצאה</button>
    <button onclick="showAppTab('tabSummary')">💰 סיכום מלא</button>
    <button onclick="showAppTab('tabCharts')">📊 גרפים</button>
    <button onclick="showAppTab('tabCompare')">⚖️ השוואת טיולים</button>
  </div>
  <div class="homeMiniNote">עדכון מהיר של הוצאות ומעקב תקציב בזמן אמת.</div>
</div>

<div id="quickExpenseCard" class="card noPrint section-main">
<h2 id="expenseFormTitle">➕ הוספת הוצאה</h2>
<label for="category"><b>קטגוריה:</b></label>
<select id="category" aria-label="קטגוריה">
<option value="">בחר קטגוריה</option>
<option>כרטיסי סים</option>
<option>אוכל</option>
<option>קניות עידו</option>
<option>קניות מיכאל</option>
<option>ביגוד והנעלה</option>
<option>תחבורה ציבורית</option>
<option>אטרקציות</option>
<option>תשלומים במזומן</option>
<option>מלונות</option>
<option>ביטוח נסיעות</option>
<option>טיסות</option>
<option>השכרת רכב</option>
<option>דלק</option>
<option>טיפים</option>
<option>כביסות</option>
<option>קרוז</option>
<option>שונות</option>
</select>
<label for="note"><b>פירוט:</b></label>
<input id="note" placeholder="שם מקום / פירוט" autocomplete="off" aria-label="פירוט ההוצאה">
<label for="amount"><b>סכום:</b></label>
<input id="amount" type="number" inputmode="decimal" min="0" step="0.01" placeholder="סכום" aria-label="סכום ההוצאה">
<label for="currency"><b>מטבע:</b></label>
<select id="currency" aria-label="מטבע">
<option value="ILS">₪ שקל</option>
<option value="USD">$ דולר אמריקאי</option>
<option value="JPY">¥ ין</option>
<option value="EUR">€ יורו</option>
<option value="GBP">£ לירה סטרלינג</option>
<option value="CAD">C$ דולר קנדי</option>
</select>
<label for="expenseDate"><b>תאריך ההוצאה:</b></label>
<input id="expenseDate" type="date" aria-label="תאריך ההוצאה">
<button id="expenseSubmitButton" onclick="addExpense()">הוסף הוצאה</button>
<button id="expenseCancelEditButton" class="secondaryBtn" style="display:none" onclick="cancelExpenseEdit()">ביטול עריכה</button>
</div>

<div class="card section-main">
<h2 id="mainExpensesAnchor">פירוט כל ההוצאות בטיול הפעיל</h2>

<button id="refreshMainExpensesButton" class="noPrint" onclick="renderExpenses()">רענון טבלת הוצאות</button>
<div class="expensesLedgerWrap">
<table id="expensesTable" class="expensesLedgerTable">
<thead><tr><th>תאריך</th><th>קטגוריה</th><th>פירוט</th><th>סכום</th><th>מטבע</th><th>₪</th><th>שער</th><th>פעולות</th></tr></thead>
<tbody id="expensesBody"></tbody>
</table>
</div>
</div>
</div>

<div id="tabSummary" class="tabPanel">
<div class="card section-summary">
<h2>💰 סיכום סופי ותקציבים</h2>
<div class="noPrint" style="margin-bottom:12px;">
<label><b>בחר מטבע להצגת הסיכום:</b></label>
<select id="summaryCurrency" onchange="setSummaryCurrencyFromUI()">
<option value="ILS">₪ שקל ישראלי</option>
<option value="USD">$ דולר אמריקאי</option>
<option value="JPY">¥ ין יפני</option>
<option value="EUR">€ יורו</option>
<option value="GBP">£ לירה סטרלינג</option>
<option value="CAD">C$ דולר קנדי</option>
</select>
</div>
<div class="small">תצוגת הסיכום לפי המטבע שנבחר.</div>
<div id="summaryFinal"></div>
<div class="summaryUnifiedBox"><div id="tripBudgetSummaryBox" class="tripBudgetSummaryBox"></div></div>
</div>

<div class="card section-summary">
<h2>סיכום יומי</h2>
<div class="tableWrap">
<table id="dailyTable" class="mobileCards">
<thead><tr><th>תאריך</th><th>סה״כ יומי</th></tr></thead>
<tbody id="dailyBody"></tbody>
</table>
</div>
</div>

</div>

<div class="card noPrint section-summary">
<h2>🔎 סינון וסיכום לפי קטגוריה</h2>
<div class="filterPanel">
<label for="filterType"><b>סוג סינון:</b></label>
<select id="filterType" onchange="setFilterTypeFromUI()">
<option value="category">לפי קטגוריה</option>
<option value="date">לפי תאריך</option>
</select>

<div id="categoryFilterBox">
<label for="categoryFilter"><b>בחר קטגוריה להצגה:</b></label>
<select id="categoryFilter" onchange="setCategoryFilterFromUI()">
<option value="ALL">כל הקטגוריות</option>
</select>
</div>

<div id="dateFilterBox" style="display:none;">
<label for="dateFilter"><b>בחר תאריך פעיל:</b></label>
<select id="dateFilter" onchange="setDateFilterFromUI()">
<option value="ALL">כל התאריכים</option>
</select>
<div id="activeDatesChips" class="dateChips"></div>
</div>

<button onclick="clearCategoryFilter()">נקה סינון</button>
<div id="selectedCategorySummary" class="dashboardNote"></div>
</div>
<h3>סה״כ לפי קטגוריות</h3>

</div>
</div>
</div>
</div>

<div id="tabCharts" class="tabPanel">
<div class="card section-charts">
<h2>📊 דשבורד תקציב מקצועי</h2>

<div class="dashboardGrid">
  <div class="dashCard">
    <div class="dashTitle">סה״כ הוצאות</div>
    <div class="dashValue" id="dashTotal">₪0</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">יתרה מהתקציב</div>
    <div class="dashValue" id="dashRemaining">₪0</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">ניצול תקציב</div>
    <div class="dashValue" id="dashPercent">0%</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">ממוצע יומי</div>
    <div class="dashValue" id="dashAvgDaily">₪0</div>
  </div>
</div>

<div class="progressWrap">
  <div class="progressBar" id="budgetProgressBar"></div>
</div>
<div class="dashboardNote" id="budgetStatusText">אין עדיין נתונים.</div>

<div class="dashboardGrid">
  <div class="dashCard">
    <div class="dashTitle">הוצאות היום</div>
    <div class="dashValue" id="dashToday">₪0</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">אוכל היום מול יעד יומי</div>
    <div class="dashValue" id="dashFoodToday">₪0</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">ביגוד, הנעלה, ואלקטרוניקה</div>
    <div class="dashValue" id="dashClothing">₪0</div>
  </div>
  <div class="dashCard">
    <div class="dashTitle">מספר הוצאות</div>
    <div class="dashValue" id="dashCount">0</div>
  </div>
</div>

</div>

<div class="card section-charts">
<h2>📊 מידע גרפי</h2>
<div class="chartGrid section-charts">
  <div class="chartBox">
    <h3>🍰 פריסת הוצאות לפי קטגוריה</h3>
    <canvas id="categoryPie" class="chartCanvas" width="420" height="240"></canvas>
    <div id="categoryLegend"></div>
  </div>
  <div class="chartBox">
    <h3>📈 הוצאות לפי יום</h3>
    <canvas id="dailyBar" class="chartCanvas" width="420" height="240"></canvas>
  </div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="tabCompare" class="tabPanel">
<div class="card section-compare">
<h2>⚖️ השוואה בין טיולים</h2>
<div class="compareControls">
<div class="small">בחר טיולים ומדד להשוואה.</div>

<button class="secondaryBtn" onclick="toggleCompareTripsPanel()">🧳 בחירת טיולים להשוואה</button>
<div id="compareTripsPanel" class="collapsiblePanel">
<label><b>סמן טיולים להשוואה:</b></label>
<div id="compareTripsBox" class="tripCheckGrid"></div>
</div>

<label for="compareMetric"><b>בחר מדד להשוואה:</b></label>
<select id="compareMetric" onchange="setCompareMetricFromUI()">
<option value="TOTAL">סה״כ הוצאות</option>
<option value="DATE">תאריך מסוים</option>
<option value="MOST_EXPENSIVE_DAY">יום הכי יקר</option>
<option value="CHEAPEST_DAY">יום הכי זול</option>
<option value="CAT::כרטיסי סים">כרטיסי סים</option>
<option value="CAT::אוכל">אוכל</option>
<option value="CAT::קניות עידו">קניות עידו</option>
<option value="CAT::קניות מיכאל">קניות מיכאל</option>
<option value="CAT::ביגוד והנעלה">ביגוד והנעלה</option>
<option value="CAT::תחבורה ציבורית">תחבורה ציבורית</option>
<option value="CAT::אטרקציות">אטרקציות</option>
<option value="CAT::תשלומים במזומן">תשלומים במזומן</option>
<option value="CAT::מלונות">מלונות</option>
<option value="CAT::ביטוח נסיעות">ביטוח נסיעות</option>
<option value="CAT::טיסות">טיסות</option>
<option value="CAT::השכרת רכב">השכרת רכב</option>
<option value="CAT::דלק">דלק</option>
<option value="CAT::טיפים">טיפים</option>
<option value="CAT::כביסות">כביסות</option>
<option value="CAT::קרוז">קרוז</option>
<option value="CAT::שונות">שונות</option>
</select>

<div id="compareDateBox" style="display:none;">
<label for="compareDate"><b>בחר תאריך פעיל:</b></label>
<select id="compareDate" onchange="setCompareDateFromUI()"></select>
</div>

</div>
</div>
</div>

<div id="tabSettings" class="tabPanel">
<div class="card section-settings">
<h2>🧳 ניהול טיולים</h2>
<div class="small">הטיול הראשון מוגדר כ־<b>יפן 2026</b>. ניתן ליצור טיולים נוספים ולבחור ביניהם.</div>

<div class="tripActions noPrint">
<button onclick="createNewTrip()">➕ יצירת טיול חדש</button>
<button class="secondaryBtn" onclick="toggleTripSettings()">⚙️ הגדרות הטיול הפעיל</button>
</div>

<div id="tripSettingsPanel" class="filterPanel collapsiblePanel">
<label for="tripName"><b>שם הטיול:</b></label>
<input id="tripName" placeholder="לדוגמה: יפן 2026 / ארה״ב 2027" oninput="saveTripName()">

<label for="tripBudgetInput"><b>תקציב כולל בשקלים:</b></label>
<input id="tripBudgetInput" type="number" inputmode="decimal" placeholder="לדוגמה: 93063">

<label for="tripClothingInput"><b>תקציב ביגוד, הנעלה, ואלקטרוניקה בשקלים:</b></label>
<input id="tripClothingInput" type="number" inputmode="decimal" placeholder="לדוגמה: 20000">

<label for="tripFoodInput"><b>תקציב אוכל יומי בשקלים:</b></label>
<input id="tripFoodInput" type="number" inputmode="decimal" min="0" placeholder="לדוגמה: 750">

<label for="tripTotalFoodInput"><b>מסגרת אוכל כוללת בשקלים:</b></label>
<input id="tripTotalFoodInput" type="number" inputmode="decimal" min="0" placeholder="0 אם אין מסגרת כוללת">

<button class="noPrint" onclick="saveTripSettings()">💾 שמירת הגדרות טיול</button>
</div>
</div>

</div>

<div class="card section-settings">
<b>תקציב כולל:</b> <span id="topBudgetLabel">₪93,063</span><br>
<b>תקציב ביגוד, הנעלה, ואלקטרוניקה:</b> <span id="topClothingBudgetLabel">₪20,000</span><br>
<b>תקציב אוכל יומי:</b> <span id="topFoodBudgetLabel">₪750</span><br><br>
<div class="ratesHeadline">
<b>שערי המרה פעילים להוצאות חדשות:</b><br>
<div class="rateLine"><span>USD דולר אמריקאי</span><b><span id="usdRateTop">2.9070</span> ₪</b></div>
<div class="rateLine"><span>JPY ין יפני</span><b><span id="jpyRateTop">0.018548</span> ₪</b></div>
<div class="rateLine"><span>100 ין יפני</span><b><span id="jpy100RateTop">1.8548</span> ₪</b></div>
<div class="rateLine"><span>EUR יורו</span><b><span id="eurRateTop">3.4225</span> ₪</b></div>
<div class="rateLine"><span>GBP לירה סטרלינג</span><b><span id="gbpRateTop">3.9572</span> ₪</b></div>
<div class="rateLine"><span>CAD דולר קנדי</span><b><span id="cadRateTop">2.1282</span> ₪</b></div>

</div>
<span class="small">מקור: <span id="rateSource"></span> | עודכן: <span id="rateUpdated"></span></span><br>
<span class="small"><b>חשוב:</b> הוצאות שכבר הוזנו נשארות לפי שער הכניסה שלהן ולא משתנות אחרי עדכון שערים.</span>
</div>

<div class="card noPrint section-settings">
<h2>עדכון שערים</h2>
<button onclick="updateRatesLive()">עדכון שערים בזמן אמת מהאינטרנט</button>
<div id="ratesStatus" class="small"></div><div class="small">שערים שעודכנו מהאינטרנט או ידנית נשמרים ומשמשים לכל הוצאה חדשה עד העדכון הבא.</div>
<div class="rateInputWrap">
<label for="usdRateInput">דולר אמריקאי (USD) — שער בשקלים</label>
<input id="usdRateInput" type="number" step="0.0001" placeholder="לדוגמה: 2.9090">

<label for="jpyRateInput">ין יפני (JPY) — שער בשקלים ל־1 ין</label>
<input id="jpyRateInput" type="number" step="0.000001" placeholder="לדוגמה: 0.018511">

<label for="eurRateInput">יורו (EUR) — שער בשקלים</label>
<input id="eurRateInput" type="number" step="0.0001" placeholder="לדוגמה: 3.4225">

<label for="gbpRateInput">לירה סטרלינג (GBP) — שער בשקלים</label>
<input id="gbpRateInput" type="number" step="0.0001" placeholder="לדוגמה: 3.9572">

<label for="cadRateInput">דולר קנדי (CAD) — שער בשקלים</label>
<input id="cadRateInput" type="number" step="0.0001" placeholder="לדוגמה: 2.1282">
</div>
<button onclick="saveManualRates()">עדכון שערים ידני וסנכרון</button>
</div>

<div class="card noPrint section-settings">
<h2>ייצוא ואיפוס</h2>
<button class="export" onclick="exportHTML()">ייצוא HTML</button>
<button class="export" type="button" onclick="exportPDF()">תצוגת PDF / הדפסה</button>
<div class="small">נפתח בתוך האפליקציה עם כפתור חזרה ברור.</div>
<button class="orange" onclick="clearTrip()">איפוס והתחלת חופשה חדשה</button>
</div>

<div class="appCreatorFooter section-settings">
  <div class="creatorName">פותח ועוצב על ידי: איתן פרידמן</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>