/* =============================================================
   PlantOS — אפליקציית שטח (Mobile)
   מסגרת טלפון בדסקטופ, מסך מלא במובייל.
   ============================================================= */
:root {
  --brand-900:#0f2942; --brand-700:#1b4269; --brand-600:#235284; --brand-500:#2f6aa8;
  --accent:#f59e0b; --accent-600:#d97706;
  --green:#16a34a; --green-bg:#dcfce7; --red:#dc2626; --red-bg:#fee2e2;
  --orange:#ea580c; --orange-bg:#ffedd5; --blue:#2563eb; --blue-bg:#dbeafe;
  --purple:#7c3aed; --purple-bg:#ede9fe; --gray:#64748b; --gray-bg:#e2e8f0;
  --bg:#f1f5f9; --surface:#fff; --surface-2:#f8fafc; --border:#e6ebf1;
  --text:#0f172a; --text-2:#475569; --text-3:#94a3b8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Assistant","Rubik","Heebo",system-ui,"Segoe UI",Arial,sans-serif;
  direction: rtl; color: var(--text); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1000px 500px at 70% -10%, #1b4269, transparent 60%), #0f2942;
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.ic { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* ---- מסגרת טלפון ---- */
.phone {
  width: 400px; height: 840px; max-height: calc(100vh - 48px);
  background: #0b0f17; border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.06);
  position: relative;
}
.phone::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #0b0f17; border-radius: 0 0 16px 16px; z-index: 20;
}
.screen {
  width: 100%; height: 100%; background: var(--bg); border-radius: 34px;
  overflow: hidden; position: relative; display: flex; flex-direction: column;
}
.home-hint {
  position: fixed; bottom: 20px; inset-inline-start: 20px; color: #8fa9c8; font-size: 12.5px;
  max-width: 220px; line-height: 1.5;
}
.home-hint a { color: #f7b955; }

@media (max-width: 480px) {
  body { padding: 0; display: block; background: var(--bg); }
  .phone { width: 100%; height: 100vh; max-height: none; border-radius: 0; padding: 0; box-shadow: none; }
  .phone::before { display: none; }
  .screen { border-radius: 0; }
  .home-hint { display: none; }
}

/* ---- מבנה מסך ---- */
.m-header {
  background: linear-gradient(160deg, var(--brand-700), var(--brand-900));
  color: #fff; padding: 34px 20px 18px; flex: 0 0 auto;
}
.m-header.compact { padding: 34px 16px 14px; }
.m-header .row { display: flex; align-items: center; gap: 12px; }
.m-back { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }
.m-header h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.m-header .sub { font-size: 13px; color: #a9c1de; }
.m-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #3a2600; display: grid; place-items: center; font-weight: 800; font-size: 17px; margin-inline-start: auto; }

.m-body { flex: 1; overflow-y: auto; padding: 18px 16px 28px; }
.m-body::-webkit-scrollbar { width: 0; }

/* ---- כפתורי בית ---- */
.big-actions { display: grid; gap: 14px; margin-bottom: 22px; }
.big-btn {
  display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 4px 16px rgba(15,41,66,.06); text-align: start; width: 100%;
  border: 1px solid var(--border); transition: transform .12s;
}
.big-btn:active { transform: scale(.98); }
.big-btn .b-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto; }
.big-btn .b-ic .ic { width: 30px; height: 30px; }
.big-btn.report .b-ic { background: var(--red-bg); color: var(--red); }
.big-btn.tasks .b-ic { background: var(--blue-bg); color: var(--blue); }
.big-btn.tpm .b-ic { background: var(--green-bg); color: var(--green); }
.big-btn .b-txt .t { font-size: 18px; font-weight: 800; }
.big-btn .b-txt .d { font-size: 13.5px; color: var(--text-3); margin-top: 2px; }
.big-btn .b-count { margin-inline-start: auto; background: var(--brand-600); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 11px; border-radius: 999px; }
.big-btn .chev { margin-inline-start: auto; color: var(--text-3); }

/* ---- כותרת קטע ---- */
.m-section { font-size: 13px; font-weight: 800; color: var(--text-3); margin: 6px 4px 10px; }

/* ---- התראות ---- */
.m-alerts { display: flex; flex-direction: column; gap: 10px; }
.m-alert { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; }
.m-alert .a-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; }
.m-alert .a-txt { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.m-alert .a-time { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* ---- כרטיסי ציוד / רשימות ---- */
.m-card {
  display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 12px;
  width: 100%; text-align: start; transition: transform .12s;
}
.m-card:active { transform: scale(.985); }
.m-card .grow { flex: 1; min-width: 0; }
.m-card .t { font-weight: 800; font-size: 15.5px; }
.m-card .d { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.m-thumb { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; font-size: 26px; }
.chev { color: var(--text-3); }

/* ---- badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-green{background:var(--green-bg);color:#15803d}
.badge-red{background:var(--red-bg);color:#b91c1c}
.badge-orange{background:var(--orange-bg);color:#c2410c}
.badge-blue{background:var(--blue-bg);color:#1d4ed8}
.badge-purple{background:var(--purple-bg);color:#6d28d9}
.badge-gray{background:var(--gray-bg);color:#475569}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-orange{background:var(--orange)}
.dot-blue{background:var(--blue)}.dot-purple{background:var(--purple)}.dot-gray{background:var(--gray)}
.dot-pulse{box-shadow:0 0 0 0 rgba(220,38,38,.5);animation:pls 1.8s infinite}
@keyframes pls{70%{box-shadow:0 0 0 8px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}

/* ---- טפסים ---- */
.m-field { margin-bottom: 16px; }
.m-field .lbl { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; display: block; }
.m-input, .m-select, .m-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 13px 14px; font: inherit; color: var(--text); outline: none;
}
.m-input:focus, .m-select:focus, .m-textarea:focus { border-color: var(--brand-500); }
.m-textarea { min-height: 96px; resize: none; }

/* choice chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 700; color: var(--text-2);
}
.chip.on { border-color: var(--brand-500); background: var(--brand-500); color: #fff; }
.chip.sev-critical.on { background: var(--red); border-color: var(--red); }
.chip.sev-high.on { background: var(--red); border-color: var(--red); }
.chip.sev-medium.on { background: var(--orange); border-color: var(--orange); }
.chip.sev-low.on { background: var(--gray); border-color: var(--gray); }

/* photo */
.photo-btn {
  width: 100%; border: 1.5px dashed var(--border); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-3);
  background: var(--surface-2); font-weight: 700; font-size: 13.5px;
}
.photo-btn .ic { width: 30px; height: 30px; }
.photo-preview { border-radius: 14px; overflow: hidden; position: relative; aspect-ratio: 16/10; }
.photo-preview .rm { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(0,0,0,.6); color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 18px; }

/* ---- footer action ---- */
.m-footer {
  flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.m-btn {
  width: 100%; padding: 16px; border-radius: 15px; font-size: 16.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.m-btn-primary { background: var(--brand-600); color: #fff; }
.m-btn-danger { background: var(--red); color: #fff; }
.m-btn-success { background: var(--green); color: #fff; }
.m-btn-accent { background: var(--accent); color: #3a2600; }
.m-btn-ghost { background: var(--surface-2); color: var(--text-2); border: 1.5px solid var(--border); }
.m-btn:active { filter: brightness(.95); }
.m-btn:disabled { opacity: .45; }

/* ---- pill row ---- */
.pill-row { display: flex; gap: 8px; margin-bottom: 16px; }
.pill { flex: 1; padding: 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--border); text-align: center; font-weight: 700; font-size: 13px; color: var(--text-2); }
.pill.on { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }

/* ---- detail blocks ---- */
.m-block { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.m-block h3 { font-size: 15px; margin: 0 0 12px; }
.m-kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.m-kv:last-child { border-bottom: none; }
.m-kv .k { color: var(--text-3); font-weight: 600; }
.m-kv .v { font-weight: 700; }

/* ---- checklist ---- */
.m-check { display: flex; align-items: center; gap: 13px; padding: 15px 14px; border: 1.5px solid var(--border); border-radius: 14px; margin-bottom: 10px; background: var(--surface); transition: .12s; }
.m-check.done { background: var(--green-bg); border-color: #bbf7d0; }
.m-check .box { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--border); display: grid; place-items: center; color: transparent; flex: 0 0 auto; }
.m-check.done .box { background: var(--green); border-color: var(--green); color: #fff; }
.m-check .box .ic { width: 18px; height: 18px; }
.m-check .lbl { font-weight: 700; font-size: 14.5px; }
.m-check.done .lbl { text-decoration: line-through; color: var(--text-2); }

.m-progress { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.m-progress > span { display: block; height: 100%; background: linear-gradient(90deg,var(--green),#22c55e); }

.eq-emoji { filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }

/* ---- empty ---- */
.m-empty { text-align: center; padding: 50px 20px; color: var(--text-3); }
.m-empty .ic { width: 46px; height: 46px; opacity: .35; margin-bottom: 10px; }

/* ---- success overlay ---- */
.m-success {
  position: absolute; inset: 0; background: var(--surface); z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; text-align: center;
  animation: fade .3s;
}
@keyframes fade { from { opacity: 0 } }
.m-success .circle { width: 96px; height: 96px; border-radius: 50%; background: var(--green-bg); display: grid; place-items: center; animation: pop .4s; }
.m-success .circle .ic { width: 52px; height: 52px; color: var(--green); }
@keyframes pop { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
.m-success h2 { font-size: 24px; }
.m-success p { color: var(--text-3); margin: 0; max-width: 260px; }

/* toast */
.m-toast-wrap { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.m-toast { background: var(--brand-900); color: #fff; padding: 13px 16px; border-radius: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translateY(20px); opacity: 0; transition: .25s; }
.m-toast.show { transform: none; opacity: 1; }
.m-toast .ic { color: #4ade80; }