<!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>
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" href="shared.css">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#2070b0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}

/* ── DESIGN TOKENS ──
   ONE blue family, ONE accent (red for brand only),
   ONE green for auto-calc. Clean. Professional.        */
:root{
  --navy:   #1a5c8a;   /* header gradient dark end */
  --blue:   #4a9fd4;   /* header gradient light end */
  --blue2:  #3a8fc4;   /* secondary header */
  --blue-lt:#cce4f5;   /* metric box bg */
  --blue-md:#85b8d8;   /* borders */
  --red:    #e31837;   /* brand accent */
  --green:  #2d2d2d;   /* auto-calc text */
  --green-bg:#f0f0f0;  /* auto-calc background */
  --green-brd:#c0c0c0; /* auto-calc border */
  --bg:     #b4cfe3;   /* page background */
  --white:  #ffffff;
  --text:   #1a1a1a;
  --lbl:    #1a3a5c;
  --muted:  #5a7a9a;
  --border: #85b8d8;
  --gap:    7px;
}

body{font-family:'Assistant',Arial,sans-serif;color:var(--text);
  background:var(--bg);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;padding-bottom:44px}

/* ══ TOPBAR ══ */
.topbar{width:100%;background:linear-gradient(135deg,#2070b0 0%,#5aaad8 100%);padding:0 22px;
  display:flex;align-items:stretch;justify-content:space-between;
  box-shadow:0 2px 14px rgba(0,20,60,.28);position:sticky;top:0;z-index:100}
.brand{color:#fff;font-size:14.5px;font-weight:800;
  display:flex;align-items:center;gap:8px;padding:11px 0}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}


/* ══ TOOLBAR ══ */
.toolbar{width:780px;display:flex;align-items:center;gap:8px;margin:14px 0 8px}
.btn{border:none;border-radius:9px;padding:8px 20px;
  font-family:'Assistant',Arial,sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:.14s}
.btn-p{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);color:#1a2a3a;box-shadow:0 2px 8px rgba(0,85,165,.2)}
.btn-p:hover{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%)}
.btn-s{background:#cce4f5;color:#1a5c8a}
.btn-s:hover{background:#a8ccdf}
.legend{font-size:11px;color:#555;background:#f0f0f0;
  border:1px solid #c0c0c0;border-radius:6px;padding:3px 8px}

/* ══ PAGE / CARD ══ */
.pg{display:none;flex-direction:column;align-items:center;width:100%}
.pg.on{display:flex}
.card{width:780px;background:var(--white);border-radius:14px;
  box-shadow:0 6px 28px rgba(0,30,80,.16);padding:20px 24px 16px;
  display:flex;flex-direction:column;gap:var(--gap);margin-bottom:14px}

/* ══ PAGE HEADER ══ */
.ph{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;border-bottom:2px solid #85b8d8;gap:10px}
.ph img{height:40px;object-fit:contain;flex-shrink:0}
.phc{text-align:center;flex:1}
.phc h2{color:#1a5c8a;font-size:18px;font-weight:800;margin-bottom:2px}
.phc .sub{color:var(--red);font-size:11.5px;font-weight:700;background:transparent}

/* ══ HOUR BANNER ══ */
.hbanner{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);
  border-radius:11px;padding:10px 18px;
  display:flex;align-items:center;justify-content:center;gap:18px}
.hlbl{color:#1a2a3a;font-size:13px;font-weight:700;white-space:nowrap}
.hinput{background:rgba(255,255,255,.45);border:2px solid rgba(26,42,58,.3);
  border-radius:8px;color:#1a2a3a;font-family:'Assistant',Arial,sans-serif;
  font-size:28px;font-weight:800;text-align:center;width:140px;height:46px;
  outline:none;padding:0 6px;letter-spacing:3px}
.hinput::placeholder{color:rgba(26,42,58,.35);font-size:20px}
.hinput:focus{border-color:rgba(26,42,58,.7)}
.swrap{display:flex;align-items:center;gap:6px}
.swrap label{color:#1a2a3a;font-size:13px;font-weight:700;white-space:nowrap}
.swrap input{background:rgba(255,255,255,.35);border:none;
  border-bottom:2px solid rgba(26,42,58,.4);color:#1a2a3a;
  font-family:'Assistant',Arial,sans-serif;font-size:13.5px;font-weight:700;
  width:148px;height:30px;outline:none;padding:0 5px}
.swrap input:focus{border-bottom-color:rgba(26,42,58,.8)}

/* ══ SECTION HEADER — ALL the same deep navy ══ */
.sec{text-align:center;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);
  border-radius:8px;padding:6px 0;
  letter-spacing:.3px;margin-top:3px;margin-bottom:1px}

/* ══ SUB-SECTION (inside shift blocks) ══ */
.ssub{font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);
  border-radius:6px;padding:5px 0;
  text-align:center;margin-top:5px;margin-bottom:4px;
  letter-spacing:.2px}

/* ══ METRIC GRID ══ */
.mg{display:grid;gap:6px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* metric box */
.mb{background:var(--blue-lt);border:1px solid var(--blue-md);
  border-radius:9px;padding:6px 9px;
  display:flex;flex-direction:column;gap:2px}
.mb.auto{background:var(--green-bg);border-color:var(--green-brd)}
.mb-lbl{font-size:11px;font-weight:700;color:#162d48;
  text-align:center;line-height:1.3;letter-spacing:.05px}
.mb input{border:none;border-bottom:1.5px solid #85b8d8;background:transparent;
  width:100%;height:27px;font-family:'Assistant',Arial,sans-serif;
  font-size:16px;font-weight:700;color:var(--text);
  outline:none;text-align:center;padding:0 2px}
.mb input:focus{border-bottom-color:var(--blue)}
.mb-val{font-size:19px;font-weight:800;color:#444;
  text-align:center;min-height:26px;
  display:flex;align-items:center;justify-content:center}

/* ══ CHECK FIELD (בדיקות) ══ */
.cf{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:#cce4f5;border:1px solid #85b8d8;
  border-radius:9px;padding:6px 10px;cursor:pointer;transition:.12s}
.cf.done{background:var(--green-bg);border-color:var(--green-brd)}
.cf-lbl{font-size:10.5px;font-weight:700;color:#075993;text-align:center;flex:1}
.cf input[type="checkbox"]{display:none}
.cbox{width:24px;height:24px;border-radius:5px;flex-shrink:0;
  border:2px solid var(--blue-md);background:#fff;position:relative;transition:.12s}
.cf input:checked+.cbox{background:#2c7cb8;border-color:#2c7cb8}
.cf input:checked+.cbox::after{content:'✓';color:#fff;font-weight:800;font-size:14px;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}

/* ══ SHIFT BLOCKS ══ */
.shead{color:#fff;font-size:14px;font-weight:800;
  border-radius:10px 10px 0 0;padding:8px 14px;
  background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%)}
.sbody{border-radius:0 0 11px 11px;padding:10px 12px;background:var(--white);
  border:2px solid #85b8d8;border-top:none}
/* evening — slightly differentiated header only */
/* evening shead uses inline gradient */

/* ══ CHECKLIST ══ */
.clist{display:flex;flex-direction:column;gap:4px}
.ci{display:flex;align-items:center;gap:8px;padding:5px 9px;
  border-radius:7px;border:1px solid #85b8d8;
  background:#cce4f5;cursor:pointer;transition:.12s}
.ci:hover{background:#a8ccdf}
.ci input[type="checkbox"]{display:none}
.ckbox{width:19px;height:19px;border-radius:4px;flex-shrink:0;
  border:2px solid var(--blue-md);background:#fff;position:relative;transition:.12s}
.ci input:checked+.ckbox{background:#2c7cb8;border-color:#2c7cb8}
.ci input:checked+.ckbox::after{content:'✓';color:#fff;font-weight:800;font-size:12px;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}
.clbl{font-size:12.5px;font-weight:600;color:#075993;flex:1}
.ci input:checked~.clbl{color:#1a5c8a}

/* ══ DUAL TABLES ══ */
.dual{display:flex;gap:8px}
.half{flex:1;min-width:0}
.dh{border-radius:8px 8px 0 0;color:#fff;padding:6px 10px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;font-weight:700;background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%)}
.dh2{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%)}   /* transferred */
.dtot{display:flex;align-items:center;gap:4px}
.dtot span{color:rgba(255,255,255,.85);font-size:10.5px}
.dtot input{background:rgba(255,255,255,.35);border:none;
  border-bottom:1.5px solid #1a2a3a;color:#1a1a1a;
  font-family:'Assistant',Arial,sans-serif;font-size:13px;font-weight:700;
  width:54px;height:21px;outline:none;text-align:center}
.dbody{border:1px solid var(--border);border-top:none;
  border-radius:0 0 8px 8px;overflow:hidden}
.drow{display:flex;border-bottom:1px solid var(--border);align-items:stretch}
.drow:last-child{border-bottom:none}
.drow:nth-child(odd){background:#e6f2f9}
.drow:nth-child(even){background:#cce4f5}
.dnum{width:24px;flex-shrink:0;background:#85b8d8;
  border-left:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:var(--lbl)}
.dname{flex:1;min-width:0}
.dname input,.dcnt input{border:none;background:transparent;
  font-family:'Assistant',Arial,sans-serif;font-size:12px;color:var(--text);
  outline:none;padding:3px 5px;width:100%;height:25px;display:block}
.dcnt{width:46px;flex-shrink:0;border-right:1px solid var(--border)}
.dcnt input{text-align:center}

/* ══ TOP10 ══ */
table.t10{width:100%;border-collapse:collapse}
table.t10 thead th{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);color:#fff;
  font-size:11px;font-weight:700;padding:5px 7px;text-align:right;
  border-right:1px solid rgba(255,255,255,.35)}
table.t10 thead th:first-child{border-radius:7px 0 0 0;text-align:center}
table.t10 thead th:last-child{border-radius:0 7px 0 0;border-right:none}
table.t10 tbody td{padding:2px 7px;font-size:12.5px;border-bottom:1px solid var(--border)}
table.t10 tbody tr:nth-child(even) td{background:#cce4f5}
table.t10 tbody td.rk{width:28px;text-align:center;
  background:#85b8d8;font-weight:800;color:#075993;font-size:11px}
table.t10 tbody td input{width:100%;border:none;background:transparent;
  font-family:'Assistant',Arial,sans-serif;font-size:12.5px;color:var(--text);
  outline:none;padding:0 2px}
table.t10 td.nc{width:68px;text-align:center}
table.t10 td.nc input{text-align:center}
table.t10 tbody tr:last-child td{border-bottom:none}
table.t10 tbody tr:last-child td.rk{border-radius:0 0 0 7px}
table.t10 tbody tr:last-child td:last-child{border-radius:0 0 7px 0}

/* ══ OPS TABLE ══ */
table.ops{width:100%;border-collapse:collapse}
table.ops thead th{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);color:#fff;
  font-size:11px;font-weight:700;padding:5px 7px;text-align:right;
  border-right:1px solid rgba(255,255,255,.35)}
table.ops thead th:first-child{border-radius:7px 0 0 0}
table.ops thead th:last-child{border-radius:0 7px 0 0;border-right:none}
table.ops tbody td{padding:2px 6px;font-size:12px;
  border-bottom:1px solid var(--border);vertical-align:middle}
table.ops tbody tr:nth-child(even) td{background:#cce4f5}
table.ops tbody td input{width:100%;border:none;background:transparent;
  font-family:'Assistant',Arial,sans-serif;font-size:12px;color:var(--text);
  outline:none;padding:0 2px}
table.ops tbody tr:last-child td{border-bottom:none}
table.ops tbody tr:last-child td:first-child{border-radius:0 0 0 7px}
table.ops tbody tr:last-child td:last-child{border-radius:0 0 7px 0}

/* ══ PAGE FOOTER ══ */
.pf{text-align:center;font-size:10.5px;color:#94a3b8;
  border-top:1px solid var(--border);padding-top:6px;margin-top:2px}

/* ══ DAILY CATEGORY WRAPPER ══ */
.dcat{border:1.5px solid #85b8d8;border-radius:10px;overflow:hidden}
.dcat-body{padding:10px 10px 6px;background:var(--white);display:flex;flex-direction:column;gap:0}
.dcat .sec{border-radius:0;margin:0}


/* ══ REQUESTED UPDATES — FONT SIZES + HOURLY ALERTS ══ */
#pg0 .phc h2{font-size:20px}
#pg0 .phc .sub{font-size:13px}
#pg0 .sec{font-size:14px;padding:7px 0}
#pg0 .ssub{font-size:12.5px}
#pg0 .mb-lbl{font-size:12.2px}
#pg0 .dh{font-size:13.8px}
#pg0 table.t10 thead th,#pg0 table.ops thead th{font-size:12px}
#pg1 .phc h2,#pg2 .phc h2{font-size:19px}

.warn-soft{background:#fbe3e7!important;border-color:#e6a3ad!important}
.warn-soft .mb-lbl,.warn-soft .mb-val{color:#9f1d2f!important}
.dh.warn-soft{background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%)!important;color:#8d1425!important}
.dh.warn-soft span,.dh.warn-soft .dtot span{color:#8d1425!important}
.dh.warn-soft input{border-bottom-color:#8d1425!important;color:#8d1425!important}

/* ══ PRINT ══ */
@media print{
  @page{size:A4 portrait;margin:8mm 8mm}
  body{background:transparent;padding:0;display:block}
  .topbar,.toolbar{display:none}
  .pg{display:flex!important}
  .pg:not(.on){display:none!important}
  .card{width:100%;border-radius:0;box-shadow:none;padding:10px 12px;gap:6px}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sbody,.mg{break-inside:avoid;page-break-inside:avoid}
}
/* ══ PROFESSIONAL READABILITY UPGRADE ══ */
.mb{
  padding:9px 11px;
  gap:5px;
  border-radius:11px;
  box-shadow:0 2px 8px rgba(26,92,138,.10);
}
.mb-lbl{
  font-size:13.4px;
  font-weight:800;
  color:#12385c;
  line-height:1.25;
}
.mb input{
  height:34px;
  font-size:20px;
  font-weight:800;
  color:#101820;
  letter-spacing:.2px;
}
.mb-val{
  font-size:24px;
  font-weight:900;
  min-height:34px;
  color:#101820;
}
.mb.auto{
  background:#f4f6f8;
  border-color:#b8c5cf;
}
.sec{
  font-size:15px;
  padding:8px 0;
  border-radius:10px;
}
.ssub{
  font-size:13.5px;
  padding:7px 0;
  border-radius:8px;
}
.phc h2{font-size:20px}
.hinput{font-size:31px;height:50px}
.swrap input{font-size:16px;font-weight:800}
.swrap label,.hlbl{font-size:14.5px}
.cf-lbl{font-size:12.3px;font-weight:800}
.clbl{font-size:13.7px;font-weight:700}
.dh{font-size:13.8px;padding:7px 11px}
.dtot span{font-size:12px}
.dtot input{height:26px;font-size:16px;font-weight:800}
.dname input,.dcnt input{font-size:13.5px;height:28px;font-weight:700}
.dnum{font-size:12px}
table.t10 thead th, table.ops thead th{font-size:12.5px;padding:7px 8px}
table.t10 tbody td, table.ops tbody td{font-size:13.5px;padding:4px 8px}
table.t10 tbody td input, table.ops tbody td input{font-size:13.8px;font-weight:700}
table.t10 tbody td.rk{font-size:12.5px}
.warn-soft{
  background:#ffe9ed!important;
  border-color:#e58a99!important;
  box-shadow:0 0 0 2px rgba(227,24,55,.08),0 3px 10px rgba(227,24,55,.10)!important;
}
.warn-soft .mb-lbl,.warn-soft .mb-val,.warn-soft input{color:#9f1d2f!important}

@media print{
  .mb{box-shadow:none}
}


/* ══ HOURLY REPORT — compact dashboard layout only ══ */
#pg0 .toolbar,
#pg0 .card{width:900px}
#pg0 .card{
  gap:5px;
  padding:18px 22px 14px;
}
#pg0 .ph{padding-bottom:8px}
#pg0 .ph img{height:36px}
#pg0 .hbanner{
  padding:7px 15px;
  border-radius:10px;
  gap:14px;
}
#pg0 .hinput{
  height:42px;
  font-size:29px;
  width:126px;
}
#pg0 .swrap input{height:28px;width:138px}
#pg0 .sec{
  padding:6px 0;
  margin-top:2px;
  margin-bottom:0;
}
#pg0 .mg{gap:5px}
#pg0 .h-hourly-wide{grid-template-columns:repeat(6,1fr)}
#pg0 .mb{
  padding:6px 7px;
  gap:2px;
  border-radius:10px;
}
#pg0 .mb-lbl{
  font-size:12.7px;
  line-height:1.16;
}
#pg0 .mb input{
  height:29px;
  font-size:18px;
}
#pg0 .mb-val{
  font-size:22px;
  min-height:29px;
}
#pg0 .cf{padding:5px 8px;border-radius:8px}
#pg0 .cf-lbl{font-size:11.8px;line-height:1.15}
#pg0 .cbox{width:21px;height:21px}
#pg0 .dh{padding:5px 9px;font-size:13.2px}
#pg0 .dtot input{height:22px;font-size:14px;width:50px}
#pg0 .dtot span{font-size:11px}
#pg0 .dname input,
#pg0 .dcnt input{
  height:22px;
  font-size:12.2px;
  padding:2px 5px;
}
#pg0 .dnum{font-size:11px;width:22px}
#pg0 .dcnt{width:42px}
#pg0 .pf{padding-top:5px}
@media print{
  #pg0 .card{width:100%;padding:8px 10px;gap:4px}
  #pg0 .toolbar{display:none}
  #pg0 .h-hourly-wide{grid-template-columns:repeat(6,1fr)}
}


/* ══ DAILY SUMMARY — A4 COMPACT + OPS APPENDIX SEPARATION ══ */
#pg2 .card{
  gap:5px;
  padding:14px 20px 12px;
}
#pg2 .ph{
  padding-bottom:7px;
}
#pg2 .ph img{
  height:34px;
}
#pg2 .phc h2{
  font-size:19px;
}
#pg2 .phc .sub{
  font-size:12px;
}
#pg2 .dcat{
  border-radius:9px;
}
#pg2 .dcat-body{
  padding:7px 8px 5px;
}
#pg2 .sec{
  font-size:13.8px;
  padding:5px 0;
  border-radius:8px;
}
#pg2 .mg{
  gap:5px;
}
#pg2 .mb{
  padding:5px 7px;
  gap:1px;
  border-radius:9px;
}
#pg2 .mb-lbl{
  font-size:12px;
  line-height:1.15;
}
#pg2 .mb input{
  height:26px;
  font-size:16px;
}
#pg2 .mb-val{
  min-height:26px;
  font-size:19px;
}
#pg2 table.t10 thead th{
  font-size:11.5px;
  padding:4px 7px;
}
#pg2 table.t10 tbody td{
  padding:1px 7px;
  font-size:12px;
}
#pg2 table.t10 tbody td input{
  font-size:12px;
  height:18px;
}
#pg2 table.t10 tbody td.rk{
  font-size:11px;
}
#pg2 .daily-report-end{
  margin-top:3px;
  border-top:2px dashed #9bbbd2;
  color:#6d8295;
  font-size:11px;
  font-weight:700;
  text-align:center;
  padding-top:5px;
}
#pg2 .ops-appendix{
  margin-top:14px;
  page-break-before:always;
  break-before:page;
  border:2px dashed #9bbbd2;
  background:#eef6fc;
}
#pg2 .ops-appendix .sec{
  background:linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%);
}
#pg2 .ops-note{
  font-size:11.5px;
  font-weight:700;
  color:#6d8295;
  text-align:center;
  background:#eef5fa;
  padding:6px 8px;
  border-bottom:1px solid #bcd2e2;
}
@media print{
  #pg2 .card{
    padding:7px 9px;
    gap:4px;
  }
  #pg2 .daily-report-end{
    display:block;
  }
  #pg2 .ops-appendix{
    page-break-before:always;
    break-before:page;
    margin-top:0;
  }
}


/* Ops appendix grey tones */
#pg2 .ops-appendix table.ops thead th{
  background: linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%) !important;
  color:#ffffff !important;
}
#pg2 .ops-appendix .sec{
  background: linear-gradient(135deg,#2c7cb8 0%,#6fb5e0 100%) !important;
}



/* clean mode for screenshot */
.clean-mode .topbar,
.clean-mode .toolbar{display:none!important}


/* ══ SCREENSHOT MODE — keep controls, mark capture areas ══ */
.shot-mode .shot-area{
  outline:3px dotted #e31837;
  outline-offset:7px;
  border-radius:14px;
  background:#ffffff;
  position:relative;
}
.shot-mode .shot-area::before{
  content:'אזור צילום מסך';
  position:absolute;
  top:-25px;
  right:10px;
  background:#e31837;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:6px;
  z-index:5;
}
.shot-mode #pg0 .card{
  padding-top:12px;
}
.shot-mode #pg0 .ph{
  display:none;
}
.shot-mode #pg0 .shot-area{
  padding:6px;
}
.shot-mode #pg0 .hbanner{
  margin-bottom:4px;
}
.shot-mode #pg0 .sec{
  padding:5px 0;
}
.shot-mode #pg0 .mb{
  padding:5px 6px;
}
.shot-mode #pg0 .dname input,
.shot-mode #pg0 .dcnt input{
  height:21px;
}
.shot-mode #pg1 .shot-area{
  padding:7px;
  margin-bottom:18px;
}
.shot-mode #pg1 .shot-area::before{
  content:'אזור צילום מסך';
}
.shot-mode #pg2 .shot-area{
  padding:7px;
}
.shot-mode #pg2 .shot-area::before{
  content:'אזור צילום מסך';
}
/* Daily summary auto zoom-out in screenshot mode */
.shot-mode #pg2 .shot-daily{
  transform: scale(0.80);
  transform-origin: top center;
  width: calc(100% / 0.88);
  margin-right: calc((100% - (100% / 0.88)) / 2);
  margin-left: calc((100% - (100% / 0.88)) / 2);
}
.shot-mode #pg2 .card{
  overflow:visible;
}
@media (max-height:760px){
  .shot-mode #pg2 .shot-daily{
    transform: scale(0.75);
    width: calc(100% / 0.82);
    margin-right: calc((100% - (100% / 0.82)) / 2);
    margin-left: calc((100% - (100% / 0.82)) / 2);
  }
}


.shot-mode #last_update{display:none!important}


/* Positive live status */

.good-soft .mb-lbl,
.good-soft .mb-val,
.good-soft input{
  color:#1f7a3a!important;
}





.good-soft {
  background:#e8f7ee !important;
  border-color:#8fcf9f !important;
}
.mb.good-soft *,
.metric.good-soft *,
.cf.good-soft *,
.good-soft * {
  color:#1f7a3a !important;
}

.mb.bad-soft,
.metric.bad-soft,
.cf.bad-soft,
.bad-soft {
  background:#fdeaea !important;
  border-color:#e6a3ad !important;
}
.mb.bad-soft *,
.metric.bad-soft *,
.cf.bad-soft *,
.bad-soft * {
  color:#8d1425 !important;
}

.dh.bad-soft {
  background:#fdeaea !important;
  background-image:none !important;
  border-color:#e6a3ad !important;
  color:#8d1425 !important;
}
.dh.bad-soft * {
  color:#8d1425 !important;
}


/* ── MOBILE ≤640px ── */
@media (max-width: 640px) {
  body { padding-bottom: 24px; }

  .card, .toolbar {
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 8px !important;
    margin: 8px 0 6px !important;
    padding-bottom: 4px;
  }
  .btn { padding: 7px 13px !important; font-size: 12.5px !important; }
  .legend { display: none !important; }

  /* grids */
  .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .h-hourly-wide { grid-template-columns: repeat(2, 1fr) !important; }

  /* dual tables stack */
  .dual { flex-direction: column !important; gap: 8px !important; }
  .dt { width: 100% !important; }

  /* hbanner / hour selector */
  .hbanner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    justify-content: center !important;
  }
  .hinput { width: 100px !important; font-size: 22px !important; height: 38px !important; }
  .swrap input { width: 120px !important; font-size: 13.5px !important; }
  .hlbl, .swrap label { font-size: 12.5px !important; }

  /* section headers */
  .sec { font-size: 12.5px !important; padding: 7px 10px !important; }
  .ssub { font-size: 11.5px !important; }

  /* metric boxes */
  .mb-lbl { font-size: 11px !important; line-height: 1.2 !important; }
  .mb-val { font-size: 17px !important; }
  .mb input { font-size: 15px !important; height: 28px !important; }
  .mg { gap: 6px !important; }

  /* shift bar */
  #shiftBar { flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; padding: 5px 14px; }

  /* topbar */
  .brand { font-size: 12.5px !important; }
  #liveClock .clock-time { font-size: 13px !important; }
  #liveClock .clock-date { display: none; }

  /* dcat spacing */
  .dcat { margin-bottom: 8px !important; }
  .dcat-body { padding: 8px 8px !important; }

  /* dual table rows */
  .dname input, .dcnt input { font-size: 12px !important; height: 22px !important; }
  .dh { font-size: 12px !important; padding: 5px 8px !important; }
  .dtot span { font-size: 11.5px !important; }

  /* ph header logos */
  .ph img { height: 28px !important; }
  .phc h2 { font-size: 16px !important; }
  .phc .sub { font-size: 11px !important; }

  /* tables */
  table.t10 thead th { font-size: 11px !important; padding: 5px 4px !important; }
  table.t10 tbody td { font-size: 12px !important; padding: 2px 4px !important; }
  table.t10 tbody td input { font-size: 12px !important; }
  table.ops thead th { font-size: 11px !important; padding: 5px 4px !important; }
  table.ops tbody td { font-size: 12px !important; }
  table.ops tbody td input { font-size: 12px !important; }
}

/* ── TABLET 641–860px ── */
@media (min-width: 641px) and (max-width: 860px) {
  .card { width: calc(100vw - 28px) !important; max-width: 100% !important; }
  .g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .dual { gap: 8px !important; }
}

</style>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="icon" href="favicon.ico" sizes="32x32">
</head>
<body>
<div id="mainNavbar"></div>
<div class="pg on" id="pg2">
  <div class="toolbar">
    <button class="btn btn-s" onclick="toggleShotMode(this)">מצב צילום</button>
    <button class="btn btn-s" onclick="clr('pg2')">ניקוי</button>
    <button class="btn btn-p" id="btnSaveDaily" onclick="saveDaily()">💾 שמור דוח</button>
    <a href="reports-history.html" class="btn btn-s">היסטוריית דוחות</a>
    <span class="legend">✦ אפור = מתמלא אוטומטית</span>
  </div>
  <div class="card">
    <div class="shot-area shot-daily">
    <div class="ph">
      <img src="https://sspark.genspark.ai/cfimages?u1=uT1M55YLlO4o%2BmAqsdScs5CEQKkS5vVE1gnih9cmP134T48dL98qH4QSniUOPGdCJNWfxBg5EJEqwk%2BZqOH0fqfGlTuKtWC1rka%2BuRXAXw%3D%3D&u2=f4yiW0gHMxkghAjw&width=800" alt="Domino's">
      <div class="phc"><h2>דוח סיכום יומי</h2><div class="sub">Domino's Pizza — מוקד שירות לקוחות</div></div>
      <img src="https://sspark.genspark.ai/cfimages?u1=%2Bjt1kluljTGvYDvPFeFlipuuR%2FgTCvMyEGhZMYM7trxEjeViEhl7bZD8aHt10oKRHWS4YnSdSowFpGEUjTi0Xg%2Bi99Ts&u2=2m2VJH1kQVcIJSvY&width=800" alt="GAV">
    </div>

    <!-- כוח אדם -->
    <div class="dcat">
      <div class="sec">👥 כוח אדם</div>
      <div class="dcat-body">
        <div class="mg g3">
          <div class="mb"><div class="mb-lbl">תאריך</div><input type="text" id="d_date"></div>
          <div class="mb"><div class="mb-lbl">אחמ"ש בוקר</div><input type="text" id="d_sup_m"></div>
          <div class="mb"><div class="mb-lbl">אחמ"ש ערב</div><input type="text" id="d_sup_e"></div>
        </div>
        <div class="mg g3" style="margin-top:6px">
          <div class="mb"><div class="mb-lbl">עובדים משובצים</div><input type="text" id="d_asgn"></div>
          <div class="mb"><div class="mb-lbl">עובדים בפועל</div><input type="text" id="d_act"></div>
          <div class="mb"><div class="mb-lbl">עובדים משמרת ערב</div><input type="text" id="d_eve"></div>
        </div>
      </div>
    </div>

    <!-- טלפוניה -->
    <div class="dcat">
      <div class="sec">📞 טלפוניה</div>
      <div class="dcat-body">
        <div class="mg g4">
          <div class="mb"><div class="mb-lbl">נענו</div><input type="number" id="d_ans" oninput="cDay()" placeholder="0"></div>
          <div class="mb"><div class="mb-lbl">ננטשות</div><input type="number" id="d_aba" oninput="cDay()" placeholder="0"></div>
          <div class="mb"><div class="mb-lbl">סה"כ גולשות</div><input type="number" id="d_ov" placeholder="0"></div>
          <div class="mb"><div class="mb-lbl">ממוצע זמן המתנה</div><input type="text" id="d_wait" placeholder="00:00:00"></div>
        </div>
        <div class="mg g4" style="margin-top:6px">
          <div class="mb auto"><div class="mb-lbl">סה"כ שיחות ✦</div><div class="mb-val" id="d_tot">—</div></div>
          <div class="mb auto"><div class="mb-lbl">אחוז מענה ✦</div><div class="mb-val" id="d_pct">—</div></div>
          <div class="mb"><div class="mb-lbl">ממוצע סקר טלפוני</div><input type="text" id="d_srv_tel" placeholder="1–5"></div>
          <div class="mb"><div class="mb-lbl">ממוצע אורך שיחה</div><input type="text" id="d_avglen" placeholder="00:00:00"></div>
        </div>
      </div>
    </div>

    <!-- דיגיטל -->
    <div class="dcat">
      <div class="sec">💬 דיגיטל</div>
      <div class="dcat-body">
        <div class="mg g4">
          <div class="mb"><div class="mb-lbl">סה"כ פניות שטופלו</div><input type="number" id="d_dig_tot" oninput="cTag()" placeholder="0"></div>
          <div class="mb"><div class="mb-lbl">זמן תגובה נטו</div><input type="text" id="d_dig_net" placeholder="00:00:00"></div>
          <div class="mb"><div class="mb-lbl">ממוצע סקר דיגיטל</div><input type="text" id="d_srv_dig" placeholder="1–5"></div>
          <div class="mb"><div class="mb-lbl">זמן מענה נציג ראשוני</div><input type="text" id="d_dig_fst" placeholder="00:00:00"></div>
        </div>
      </div>
    </div>

    <!-- פניות פתוחות -->
    <div class="dcat">
      <div class="sec">📂 פניות פתוחות</div>
      <div class="dcat-body">
        <div class="mg g3">
          <div class="mb"><div class="mb-lbl">שיחות מנהל פתוחות</div><input type="text" id="d_mgr"></div>
          <div class="mb"><div class="mb-lbl">בק אופיס פתוח</div><input type="text" id="d_back"></div>
          <div class="mb"><div class="mb-lbl">רשתות חברתיות</div><input type="text" id="d_soc"></div>
        </div>
      </div>
    </div>

    <!-- תיוג פניות -->
    <div class="dcat">
      <div class="sec">🏷️ תיוג פניות</div>
      <div class="dcat-body">
        <div class="mg g3">
          <div class="mb"><div class="mb-lbl">סה"כ פניות מתויגות</div><input type="number" id="d_tagged" oninput="cTag()" placeholder="0"></div>
          <div class="mb auto"><div class="mb-lbl">סה"כ פניות דיגיטל ✦</div><div class="mb-val" id="d_tag_ref">—</div></div>
          <div class="mb auto"><div class="mb-lbl">אחוז תיוג ✦</div><div class="mb-val" id="d_tag_pct">—</div></div>
        </div>
      </div>
    </div>

    <div class="dcat">
    <div class="sec">📊 TOP 10 — סיבות פנייה</div>
    <table class="t10" style="border-radius:0 0 10px 10px;overflow:hidden">
      <thead><tr><th style="width:28px">#</th><th>סיבת פנייה</th><th style="width:70px;text-align:center">כמות</th></tr></thead>
      <tbody>
        <tr><td class="rk">1</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">2</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">3</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">4</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">5</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">6</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">7</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">8</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">9</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
        <tr><td class="rk">10</td><td><input type="text"></td><td class="nc"><input type="number" placeholder="0"></td></tr>
      </tbody>
    </table>
    </div>

    <div class="daily-report-end">סוף דוח הסיכום היומי להדפסה / שליחה</div>
    </div>

    <div class="dcat ops-appendix">
    <div class="sec">🔧 הודעות תפעול קיימות — פנימי</div>
    <div class="ops-note"></div>
    <table class="ops">
      <thead>
        <tr>
          <th style="width:82px">תאריך</th><th>סניף</th>
          <th style="width:82px">אשכול</th><th>פעולה</th><th>הערות</th>
        </tr>
      </thead>
      <tbody>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
      </tbody>
    </table>
    </div>

    <div class="pf">✦ מתמלא אוטומטי &nbsp;|&nbsp; יש לשמור כ-PDF בסוף כל יום.</div>
  </div>
</div>






<script>
function sv(id,v){const e=document.getElementById(id);if(e)e.textContent=v}
function clr(id){
  if(!confirm('לנקות את כל השדות?'))return;
  const pg=document.getElementById(id)||document;
  pg.querySelectorAll('input[type="text"],input[type="number"]').forEach(i=>i.value='');
  pg.querySelectorAll('.warn-soft,.good-soft').forEach(el=>el.classList.remove('warn-soft','good-soft'));
  sv('d_tot','—');sv('d_pct','—');sv('d_tag_ref','—');sv('d_tag_pct','—');
  setToday();
}
function cDay(){
  const a=+document.getElementById('d_ans').value||0,b=+document.getElementById('d_aba').value||0,t=a+b;
  sv('d_tot',t>0?t:'—');sv('d_pct',t>0?(a/t*100).toFixed(1)+'%':'—');
  cTag(); saveData();
}
function cTag(){
  const dig=+document.getElementById('d_dig_tot').value||0,tag=+document.getElementById('d_tagged').value||0;
  sv('d_tag_ref',dig>0?dig:'—');
  sv('d_tag_pct',(dig>0&&tag>0)?(tag/dig*100).toFixed(1)+'%':'—');
  saveData();
}
function setToday(){
  const now = new Date();
  const d = String(now.getDate()).padStart(2,'0') + '/' + String(now.getMonth()+1).padStart(2,'0') + '/' + now.getFullYear();
  ['d_date'].forEach(id=>{const el=document.getElementById(id); if(el && !el.value) el.value=d;});
}
function saveData(){
  const data={};
  document.querySelectorAll('input').forEach((i,idx)=>{ const key=i.id || ('input_'+idx); data[key]=i.value; });
  localStorage.setItem('dailyPageData',JSON.stringify(data));
}
function loadData(){
  const data=JSON.parse(localStorage.getItem('dailyPageData')||'{}');
  document.querySelectorAll('input').forEach((i,idx)=>{ const key=i.id || ('input_'+idx); if(Object.prototype.hasOwnProperty.call(data,key)) i.value=data[key]; });
  cDay(); cTag();
}
function toggleShotMode(btn){
  document.body.classList.toggle('shot-mode');
  btn.innerText = document.body.classList.contains('shot-mode') ? 'בטל מצב צילום' : 'מצב צילום';
}
window.addEventListener('load',()=>{
  setToday(); loadData();
  document.querySelectorAll('input').forEach(i=>i.addEventListener('input',saveData));
});
document.addEventListener('keydown', function(e){
  if(e.key === 'Enter'){
    const inputs = Array.from(document.querySelectorAll('input,select'));
    const i = inputs.indexOf(document.activeElement);
    if(i>-1 && i < inputs.length-1){ inputs[i+1].focus(); e.preventDefault(); }
  }
});
</script>

<script type="module">
import { initApp } from './app.js';
document.addEventListener('DOMContentLoaded', () => initApp('daily'));
</script>
<script type="module">
import { requireUser } from './auth-local.js';
const user = requireUser();
if (user) {
  const el = document.getElementById('topUserName');
  if (el) el.textContent = 'היי ' + user.name + '!';
}
</script>

<script>
window.cDayAlerts = function(){
  const pctEl = document.getElementById('d_pct');
  if (pctEl) {
    const pct = parseFloat((pctEl.textContent || '').replace('%',''));
    const box = pctEl.closest('.mb');
    if (box) {
      box.classList.remove('good-soft','bad-soft');
      if (!isNaN(pct) && pct < 90) box.classList.add('bad-soft');
      else if (!isNaN(pct) && pct > 92) box.classList.add('good-soft');
    }
  }

  const ovEl = document.getElementById('d_ov');
  const trEl = document.getElementById('d_tr');
  const ov = parseFloat(ovEl?.value || 0);
  const tr = parseFloat(trEl?.value || 0);

  if (ovEl) {
    const box = ovEl.closest('.mb');
    if (box) box.classList.toggle('bad-soft', ov > 100);
  }
  if (trEl) {
    const box = trEl.closest('.mb');
    if (box) box.classList.toggle('bad-soft', tr > 100);
  }
};

(function(){
  const oldCDay = window.cDay;
  window.cDay = function(){
    if (typeof oldCDay === 'function') oldCDay();
    window.cDayAlerts();
  };
  document.addEventListener('input', function(e){
    if (['d_ov','d_tr','d_ans','d_aba'].includes(e.target?.id)) {
      setTimeout(window.cDayAlerts, 0);
    }
  });
})();
</script>

<script src="shared.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  if (typeof initDraft === 'function') initDraft('daily');
  if (typeof updateShiftBar === 'function') updateShiftBar();
});
</script>

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
  }
</script>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js";
import { requireUser, USERS } from './auth-local.js';

const app = initializeApp({
  apiKey: "AIzaSyCee0MuVpuYF_G55127ndWgFoNY0_7wbeU",
  authDomain: "dominos-moqed.firebaseapp.com",
  databaseURL: "https://dominos-moqed-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "dominos-moqed",
  storageBucket: "dominos-moqed.firebasestorage.app",
  messagingSenderId: "229650977369",
  appId: "1:229650977369:web:9b4e8933c9aab62ffe9748"
});
const db = getDatabase(app);

window.saveDaily = async function() {
  const user = requireUser();
  if (!user) return;
  const info = USERS[user.email];

  const btn = document.getElementById('btnSaveDaily');
  btn.disabled = true;
  btn.textContent = 'שומר...';

  try {
    const v = id => (document.getElementById(id)?.value || '').trim();
    const t = id => (document.getElementById(id)?.textContent || '').trim();

    const date = v('d_date');
    if (!date) {
      if (typeof showToast === 'function') showToast('יש למלא תאריך לפני השמירה', 'warn');
      btn.disabled = false; btn.textContent = '💾 שמור דוח'; return;
    }

    const now = new Date();
    const month = now.getFullYear() + '-' + String(now.getMonth()+1).padStart(2,'0');

    const data = {
      savedBy:    info?.name || user.email,
      savedAt:    Date.now(),
      month,
      // כוח אדם
      date:       date,
      sup_m:      v('d_sup_m'),
      sup_e:      v('d_sup_e'),
      assigned:   v('d_asgn'),
      actual:     v('d_act'),
      evening:    v('d_eve'),
      // טלפוניה
      ans:        v('d_ans'),
      aba:        v('d_aba'),
      tot:        t('d_tot'),
      pct:        t('d_pct'),
      ov:         v('d_ov'),
      wait:       v('d_wait'),
      srv_tel:    v('d_srv_tel'),
      avglen:     v('d_avglen'),
      // דיגיטל
      dig_tot:    v('d_dig_tot'),
      dig_net:    v('d_dig_net'),
      srv_dig:    v('d_srv_dig'),
      dig_fst:    v('d_dig_fst'),
      // פניות פתוחות
      mgr:        v('d_mgr'),
      back:       v('d_back'),
      soc:        v('d_soc'),
      // תיוג
      tagged:     v('d_tagged'),
      tag_pct:    t('d_tag_pct'),
      // TOP 10
      top10: Array.from(document.querySelectorAll('.t10 tbody tr')).map(tr => {
        const inputs = tr.querySelectorAll('input');
        return { reason: inputs[0]?.value || '', count: inputs[1]?.value || '' };
      }).filter(r => r.reason),
      // הודעות תפעול
      ops: Array.from(document.querySelectorAll('.ops tbody tr')).map(tr => {
        const inputs = tr.querySelectorAll('input');
        return {
          date:   inputs[0]?.value || '',
          branch: inputs[1]?.value || '',
          cluster:inputs[2]?.value || '',
          action: inputs[3]?.value || '',
          notes:  inputs[4]?.value || ''
        };
      }).filter(r => r.branch || r.action)
    };

    const newRef = push(ref(db, 'dailyReports'));
    await set(newRef, data);

    if (typeof showToast === 'function') showToast('הדוח היומי נשמר בהצלחה', 'success');
    btn.textContent = '✓ נשמר';
    setTimeout(() => { btn.textContent = '💾 שמור דוח'; btn.disabled = false; }, 2500);

  } catch(e) {
    if (typeof showToast === 'function') showToast('שגיאה בשמירה: ' + e.message, 'error', 5000);
    btn.disabled = false; btn.textContent = '💾 שמור דוח';
  }
};
</script>

</body>
</html>