:root{
  /* הצהרה שהדף בהיר. בלעדיה, כשמערכת ההפעלה במצב כהה, כרום במחשב מצייר את
     החלון הנפתח של <select> בצבעי הערכה הכהה — טקסט לבן — על הרקע הלבן
     שאנחנו כופים ב-CSS, והרשימה נראית ריקה. */
  color-scheme: light;

  --cream:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F7EE;
  --primary:#6BCB2A; --primary-d:#4A9A10; --primary-soft:#E0F2CC;
  --teal:#3A8A10; --teal-soft:#D4EEC4;
  --banner1:#1a3d06; --banner2:#0d2b04; --banner3:#1e4a08; /* גווני הבאנר — נדרסים ע"י applyThemeColor */
  --ink:#333333; --muted:#777777; --line:#E0EDD6;
  --b1:#E76F51; --b2:#F4A261; --b3:#E9C46A; --b4:#8AB17D; --b5:#2A9D8F;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --shadow-sm:0 4px 16px rgba(0,0,0,.07);
  --radius:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;direction:ltr}
body{
  font-family:'Heebo','Segoe UI',system-ui,-apple-system,sans-serif;
  background-color:#F4F7F5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='200'%3E%3Cpath d='M0,100 Q200,40 400,100 Q600,160 800,100' fill='none' stroke='%23C8D4C8' stroke-width='60' opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 800px 200px;
  color:var(--ink);
  display:flex; justify-content:center; min-height:100vh;
}
/* full-screen app — centered column on wide screens, full-width on phone */
.device{position:relative; width:100%; max-width:480px; background:transparent; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; direction:rtl;}
/* ===== top bar ===== */
.topbar{position:sticky; top:0; z-index:40; background:linear-gradient(135deg,var(--banner1) 0%,var(--banner2) 50%,var(--banner3) 100%); padding:calc(env(safe-area-inset-top) + 18px) 20px 12px; display:flex; align-items:center; gap:12px; min-height:60px; box-shadow:0 2px 12px rgba(0,0,0,.3);}
.topbar h1{color:#fff;}
.topbar .brand{color:#fff;}
.topbar .back{background:rgba(255,255,255,.15);color:#fff;border:none;}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px}
.topbar .brand .logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-d));display:grid;place-items:center;font-size:18px;box-shadow:0 4px 10px rgba(224,106,32,.35)}
.demo-pill{font-size:10px;font-weight:700;color:var(--primary-d);background:var(--primary-soft);padding:3px 8px;border-radius:20px}
.topbar h1{font-size:19px;font-weight:800;margin:0}
.topbar .back{width:38px;height:38px;border:none;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-sm);font-size:20px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.sub{font-size:12.5px;color:var(--muted);font-weight:500}
/* ===== scroll area ===== */
.content{flex:1;overflow-y:auto;padding:78px 16px 24px;scrollbar-width:none;background:transparent}
.mobile-back-btn{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--primary-d);font-size:14px;font-weight:700;cursor:pointer;padding:4px 0 12px;font-family:inherit}
@media(max-width:767px){.tabbar.sub-screen{display:none!important}}
.content::-webkit-scrollbar{display:none}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
#screen-map.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== cards & bits ===== */
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:0 6px 28px rgba(0,0,0,.07);margin-bottom:14px;border:1.5px solid #C8E6B0}
.section-t{font-size:14px;font-weight:800;margin:18px 4px 10px;display:flex;align-items:center;gap:7px}
.section-t .all{margin-inline-start:auto;font-size:12px;color:var(--primary-d);font-weight:700;cursor:pointer}
.row{display:flex;align-items:center;gap:12px}
.tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.tag.train{background:var(--teal-soft);color:var(--teal)}
.tag.stay{background:#E5EEF8;color:#3B7DC4}
.tag.med{background:#FCE4E4;color:#D7544F}
.tag.diet{background:#FFF1CF;color:#C79008}
.tag.allergy{background:#F1E6FB;color:#9457C7}
.tag.rescue{background:#E8F5E9;color:#2E7D32;font-weight:800}
.btn{border:none;border-radius:14px;padding:14px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;width:100%;background:linear-gradient(135deg,var(--primary),#3A8A10);color:#fff;box-shadow:0 6px 16px rgba(58,138,16,.30)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--surface);color:var(--primary-d);box-shadow:var(--shadow-sm)}
.btn.teal{background:linear-gradient(135deg,var(--primary),var(--teal));box-shadow:0 6px 16px rgba(58,138,16,.3)}
.avatar{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;flex-shrink:0}
/* ===== dashboard ===== */
.hero-greet{font-size:23px;font-weight:900;margin:6px 4px 2px}
.occ{background:var(--surface);color:var(--ink);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px;position:relative;overflow:hidden;border:1.5px solid #C8E6B0}
.occ .paw{position:absolute;font-size:120px;opacity:.06;left:-14px;bottom:-34px;transform:rotate(-18deg)}
.occ .lbl{font-size:13px;font-weight:600;color:var(--muted)}
.occ .big{font-size:40px;font-weight:900;line-height:1.05;margin:2px 0 8px;color:var(--primary-d)}
.occ .big small{font-size:18px;font-weight:700;color:var(--muted)}
.occ .bar{height:9px;border-radius:10px;background:var(--line);overflow:hidden}
.occ .bar i{display:block;height:100%;background:var(--primary);border-radius:10px}
.edit-dog-btn{display:block;width:100%;margin-top:10px;padding:9px;background:#fff;color:var(--primary);border:2px solid var(--primary);border-radius:12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .15s}
.edit-dog-btn:hover{background:var(--primary);color:#fff}
.map-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:9px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .15s}
.map-btn:hover{background:var(--primary-d)}
.home-task-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #EEF5E8;cursor:pointer}
.home-task-row:last-child{border-bottom:none}
.home-task-row.done{opacity:0.6}
.done-divider{font-size:11px;color:#aaa;text-align:center;padding:6px 0;border-top:1px solid #eee;margin-top:4px}
.home-task-time{font-size:15px;font-weight:900;min-width:42px;text-align:center}
.home-task-info{flex:1}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px}
.stat{background:var(--surface);border-radius:14px;padding:8px 4px;text-align:center;box-shadow:var(--shadow-sm)}
.stat .n{font-size:18px;font-weight:900}
.stat .t{font-size:9px;color:var(--muted);font-weight:600;margin-top:2px}
.stat .ic{font-size:14px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick a{background:var(--surface);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px;cursor:pointer}
.quick a .qi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.task{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.task .when{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:4px 9px;border-radius:10px}
/* ===== dog list ===== */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow-sm);margin:6px 0 12px}
.search input{border:none;outline:none;font-family:inherit;font-size:14px;width:100%;background:transparent;color:var(--ink)}
.filters{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.filters::-webkit-scrollbar{display:none}
.fchip{border:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:20px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--ink);color:#fff}
.dog-card{display:flex;align-items:center;gap:13px;cursor:pointer}
.dog-card .meta{flex:1;min-width:0}
.dog-card .nm{font-weight:800;font-size:16px;display:flex;align-items:center;gap:7px}
.dog-card .br{font-size:12.5px;color:var(--muted);margin-top:1px}
.dog-card .tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.dog-card .chev{color:var(--muted);font-size:22px}
/* ===== profile ===== */
.prof-head{background:linear-gradient(135deg,var(--surface),var(--surface-2));border-radius:24px;padding:20px;text-align:center;box-shadow:var(--shadow-sm);margin-bottom:14px}
.prof-head .avatar{width:84px;height:84px;font-size:44px;margin:0 auto 10px;box-shadow:var(--shadow)}
.prof-head .nm{font-size:23px;font-weight:900}
.prof-head .sub{margin-top:3px}
.prof-head .badges{display:flex;gap:7px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.kv{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{font-weight:700;text-align:left}
.owner-card{display:flex;align-items:center;gap:12px}
.owner-card .call{width:44px;height:44px;border-radius:14px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:20px;text-decoration:none;flex-shrink:0}
.trait{background:var(--primary-soft);border-radius:14px;padding:13px;font-size:13.5px;font-weight:600;line-height:1.5;display:flex;gap:9px}
/* ===== form ===== */
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);outline:none;transition:.15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
select option{background:#FFFFFF;color:#333333}
/* ===== בורר מותאם (מחשב בלבד) ===== */
.cs-wrap{position:relative}
.cs-btn{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--ink);text-align:start;
  cursor:pointer;display:flex;align-items:center;gap:8px}
.cs-btn:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.cs-btn .cs-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn .cs-arr{color:var(--muted);font-size:12px}
.cs-panel{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 4px);background:#fff;
  border:1.5px solid var(--line);border-radius:13px;box-shadow:0 10px 30px rgba(0,0,0,.16);
  max-height:320px;display:flex;flex-direction:column;overflow:hidden}
.cs-search{border:none;border-bottom:1px solid var(--line);padding:11px 13px;font-family:inherit;
  font-size:14px;color:#333;background:#fff;outline:none;width:100%}
.cs-list{overflow-y:auto}
.cs-opt{padding:10px 13px;font-size:14px;color:#333;background:#fff;cursor:pointer;
  border-bottom:1px solid #F2F5EF}
.cs-opt:last-child{border-bottom:none}
.cs-opt:hover,.cs-opt.cs-hi{background:var(--primary-soft)}
.cs-opt.cs-sel{background:var(--primary-soft);font-weight:800}
.cs-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
.field input.invalid{border-color:var(--b1);box-shadow:0 0 0 3px #FCE4E4}
.err-hint{display:none;font-size:11.5px;font-weight:700;color:var(--b1);margin:6px 2px 0}
.field input.invalid ~ .err-hint{display:block}
.field textarea{resize:none;min-height:70px}
.frow{display:flex;gap:11px}.frow .field{flex:1}
.type-toggle{display:flex;gap:10px;margin-bottom:16px}
.type-toggle button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px}
.type-toggle button .e{font-size:22px}
.type-toggle button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.type-toggle button.on.t{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.pick-mode{display:flex;gap:10px;margin-bottom:12px}
.pick-mode button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;padding:12px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px}
.pick-mode button.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}
.pick-hint{font-size:12px;color:var(--muted);font-weight:600;margin:-4px 2px 12px}
.photo-up{border:2px dashed var(--line);border-radius:18px;padding:24px;text-align:center;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer}
.photo-up .e{font-size:34px;display:block;margin-bottom:6px}
.form-sec{font-size:13px;font-weight:800;color:var(--primary-d);margin:20px 2px 11px;display:flex;align-items:center;gap:7px}
/* ===== questionnaire (yes/no + consent) ===== */
.q-card{background:#fff;border-radius:var(--radius);padding:2px 14px;box-shadow:0 4px 18px rgba(0,0,0,.06);margin-bottom:13px;border:1.5px solid #C8E6B0}
.q-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:none}
.q-label{flex:1;font-size:13.5px;font-weight:600;line-height:1.35}
.yn{display:flex;gap:6px;flex-shrink:0}
.yn button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 15px;font-family:inherit;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer}
.yn button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.yn button.on.yes{background:var(--teal);border-color:var(--teal)}
.yn button.on.no{background:var(--b1);border-color:var(--b1)}
.check{display:flex;gap:11px;align-items:flex-start;padding:13px 0;font-size:13px;font-weight:600;line-height:1.45;cursor:pointer;color:var(--ink)}
.check + .check{border-top:1px solid var(--line)}
.check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary);margin-top:1px}
.reveal{display:none}
/* ===== training form ===== */
.scale-legend{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border-radius:14px;padding:13px;margin-bottom:14px}
.scale-legend .sl{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;line-height:1.4}
.scale-legend .num{width:24px;height:24px;border-radius:8px;color:#fff;font-weight:900;display:grid;place-items:center;flex-shrink:0;font-size:13px}
.cmd{background:var(--surface);border-radius:16px;padding:13px 14px;box-shadow:var(--shadow-sm);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.cmd .cname{font-weight:800;font-size:15.5px;flex:1}
.cmd input.cname{border:none;background:transparent;outline:none;font-family:inherit;width:100%;min-width:0;padding:0;color:var(--ink)}
.cmd input.cname::placeholder{color:var(--muted);font-weight:700}
.cmd-note-btn{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:5px 11px;font-family:inherit;font-weight:700;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.cmd-note-btn.active{background:var(--primary-soft);color:var(--primary-d);border-color:var(--primary)}
.cmd-note-wrap{display:none;padding:0 4px 10px}
.cmd-note-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13px;outline:none;box-sizing:border-box}
.seg{display:flex;gap:5px}
.seg button{width:36px;height:38px;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;font-family:inherit;font-weight:900;font-size:14px;cursor:pointer;color:var(--muted);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.seg button.snil{width:auto;padding:0 10px;font-size:12px;color:#888;min-width:44px}
.seg button.snil.on{background:#E0E0E0;border-color:#999;color:#333;font-weight:800}
.seg button.s1.on{background:var(--b1);border-color:var(--b1);color:#fff}
.seg button.s2.on{background:var(--b2);border-color:var(--b2);color:#fff}
.seg button.s3.on{background:var(--b3);border-color:var(--b3);color:#fff}
.seg button.s4.on{background:var(--b4);border-color:var(--b4);color:#fff}
.seg button.s5.on{background:var(--b5);border-color:var(--b5);color:#fff}
.score-box{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 4px 18px rgba(0,0,0,.06);margin:6px 0 4px;border:1.5px solid #C8E6B0}
.score-title{font-size:12px;font-weight:800;color:var(--primary-d);margin-bottom:10px}
.score-box .top{display:flex;align-items:baseline;gap:8px}
.score-box .total{font-size:36px;font-weight:900}
.score-box .max{font-size:16px;color:var(--muted);font-weight:700}
.score-box .band{margin-inline-start:auto;font-weight:800;font-size:14px;padding:6px 13px;border-radius:20px;color:#fff}
.score-bar{height:10px;border-radius:10px;background:var(--line);overflow:hidden;margin:11px 0}
.score-bar i{display:block;height:100%;border-radius:10px;transition:.3s}
.band-scale{display:flex;gap:3px;margin-top:4px}
.band-scale div{flex:1;text-align:center;font-size:8.5px;font-weight:700;color:var(--muted);padding:5px 1px;border-radius:7px;line-height:1.2;opacity:.45;transition:.2s}
.band-scale div.on{opacity:1;color:#fff}
/* ===== charts ===== */
.range-tabs{display:flex;gap:7px;margin-bottom:14px}
.range-tabs button{flex:1;border:none;font-family:inherit;font-weight:700;font-size:13px;padding:9px;border-radius:12px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer}
.range-tabs button.on{background:var(--teal);color:#fff}
.chart-card{background:var(--surface);border-radius:20px;padding:16px 12px 10px;box-shadow:var(--shadow-sm)}
.chart-summary{display:flex;gap:10px;margin-bottom:14px}
.chart-summary .s{flex:1;background:var(--surface);border-radius:16px;padding:13px;box-shadow:var(--shadow-sm);text-align:center}
.chart-summary .s .n{font-size:22px;font-weight:900}
.chart-summary .s .t{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.up{color:var(--b5)} .dn{color:var(--b1)}
.dog-select{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px;padding-bottom:2px}
.dog-select::-webkit-scrollbar{display:none}
.dog-pick{border:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:20px;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.dog-pick.on{background:var(--ink);color:#fff}
/* ===== calendar ===== */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:800}
.cal-nav-btn{background:var(--surface-2);border:1.5px solid var(--line);border-radius:8px;width:28px;height:28px;font-size:16px;font-weight:800;cursor:pointer;color:var(--ink);font-family:inherit;line-height:1}
.cal-nav-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.cal-cell.selected{outline:2.5px solid var(--primary);outline-offset:-2.5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .dn{font-size:11px;color:var(--muted);font-weight:700;text-align:center;padding:4px 0}
.cal-cell{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--surface);box-shadow:var(--shadow-sm);position:relative;gap:2px}
.cal-cell.empty{background:transparent;box-shadow:none}
.cal-cell.today{background:var(--primary);color:#fff;font-weight:900}
.cal-cell .dots{display:flex;gap:2px}
.cal-cell .dots i{width:5px;height:5px;border-radius:50%}
.demo-badge{display:inline-block;margin-right:8px;font-size:11px;font-weight:700;color:#888;background:#F0F0F0;border:1px solid #DDD;border-radius:8px;padding:2px 8px;vertical-align:middle}
.prof-sec-wrap{border:1.5px solid #C8E6B0;border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.prof-sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-weight:800;font-size:15px;cursor:pointer;background:var(--surface);user-select:none}
.prof-sec-hdr:hover{background:#F0F9EA}
.prof-sec-arr{font-size:18px;color:var(--muted);transition:transform .2s;display:inline-block}
.prof-sec-hdr.open .prof-sec-arr{transform:rotate(90deg)}
.prof-sec-body .card,.prof-sec-body .trait{margin:0;border:none;border-radius:0}
#rep-dog-select{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
#rep-dog-select .fchip{font-size:14px;padding:8px 16px}
.rep-arrow{transition:transform .2s;display:inline-block}
.cal-tip{display:none;position:absolute;bottom:calc(100% + 6px);right:50%;transform:translateX(50%);background:#fff;border:1.5px solid #C8E6B0;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:100;line-height:1.8;text-align:right}
.cal-cell:hover .cal-tip{display:block}
.booking{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.booking:last-child{border-bottom:none}
.booking .dt{width:46px;text-align:center;flex-shrink:0}
.booking .dt .d{font-size:19px;font-weight:900;line-height:1}
.booking .dt .m{font-size:10px;color:var(--muted);font-weight:700}
.booking .info{flex:1}
.booking .info .nm{font-weight:800;font-size:14.5px}
.booking .info .ty{font-size:12px;color:var(--muted)}
/* ===== rooms ===== */
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.room{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:0 4px 18px rgba(0,0,0,.06);border:1.5px solid #C8E6B0}
.room .rt{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;margin-bottom:8px}
.room .rt .st{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.room .occu{display:flex;align-items:center;gap:8px}
.room .occu .av{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.room .occu + .occu{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.room.free{border:2px dashed var(--line);box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:13px;min-height:84px}
/* ===== yards — daily schedule ===== */
.yard-date-label{font-size:19px;font-weight:900;color:var(--ink);margin:8px 4px 0;display:flex;align-items:center;gap:9px}
.yard-today-pill{font-size:10px;font-weight:800;color:var(--primary-d);background:var(--primary-soft);padding:3px 9px;border-radius:20px}
.datestrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 2px 4px}
.datestrip::-webkit-scrollbar{display:none}
.daypill{flex-shrink:0;width:50px;text-align:center;background:var(--surface);border-radius:16px;padding:9px 0;box-shadow:var(--shadow-sm);cursor:pointer;border:2px solid transparent}
.daypill .dn{font-size:11px;color:var(--muted);font-weight:700}
.daypill .dd{font-size:18px;font-weight:900;color:var(--ink);margin-top:1px}
.daypill.on{background:linear-gradient(135deg,var(--primary),var(--primary-d));border-color:transparent}
.daypill.on .dn,.daypill.on .dd{color:#fff}
.daypill.today{border-color:var(--primary)}
.daypill.today.on{border-color:transparent}
.yard-summary{font-size:12.5px;color:var(--muted);font-weight:600;margin:8px 4px 12px}
.yvt{border:none;background:transparent;padding:7px 13px;font-size:13px;font-weight:700;color:#666;cursor:pointer;font-family:inherit}
.yvt.on{background:var(--primary);color:#fff}
.yard-card{background:#fff;border-radius:14px;border:1.5px solid #C8E6B0;margin-bottom:12px;overflow:hidden}
.yard-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:900;font-size:15px}
.yard-card-body{padding:4px 14px 12px}
.yard-card-stat{font-size:12px;font-weight:700;margin-inline-start:auto;opacity:.75}
.yard-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1.5px dashed var(--primary);background:var(--primary-soft);color:var(--primary-d);border-radius:14px;padding:13px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;margin-bottom:14px}
.yard-add:active{transform:scale(.99)}
.yslot{display:flex;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.yslot:last-child{border-bottom:none}
.yslot.done{opacity:.5}
.ytime{flex-shrink:0;text-align:center;width:48px}
.ytime .t{font-size:16px;font-weight:900;color:var(--ink);line-height:1.05}
.ytime .e{font-size:11px;color:var(--muted)}
.ybar{width:4px;border-radius:4px;flex-shrink:0}
.ybody{flex:1;min-width:0}
.ytag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.ydogs{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.ydogs .yd{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--surface-2);padding:3px 11px 3px 5px;border-radius:20px}
.ydogs .yd .av{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.ynote{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600}
.yard-empty{text-align:center;padding:34px 20px;color:var(--muted);font-weight:600}
/* ===== bottom sheet ===== */
.sheet-overlay{position:absolute;inset:0;background:rgba(40,30,20,.45);z-index:90;display:none;align-items:flex-end}
.sheet-overlay.show{display:flex}
.sheet{background:var(--cream);width:100%;border-radius:26px 26px 0 0;padding:14px 18px calc(env(safe-area-inset-bottom) + 18px);animation:slideup .26s ease;max-height:88%;overflow-y:auto}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:42px;height:4px;border-radius:4px;background:var(--line);margin:2px auto 14px}
.sheet h3{font-size:18px;font-weight:900;margin:0 0 4px}
.sheet .sh-sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:14px}
/* ===== recurring slots ===== */
.recur-toggle{display:flex;align-items:center;gap:9px;margin:10px 0 6px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;user-select:none}
.recur-toggle input{display:none}
.recur-box{width:20px;height:20px;border-radius:6px;border:2px solid #C8E6B0;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.recur-toggle input:checked~.recur-box{background:var(--primary);border-color:var(--primary)}
.recur-toggle input:checked~.recur-box::after{content:'✓';color:#fff;font-size:13px;font-weight:900}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;background:#fff;border-bottom:1px solid #E8F5E0;font-size:12px;font-weight:700;color:#444}
.ml-item{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ml-box{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid #ccc;flex-shrink:0}
.daychk-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.daychk{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#555;cursor:pointer}
.daychk input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.reg-yard-slot{background:#F0FAF0;border-radius:12px;border:1.5px solid #C8E6B0;padding:10px 12px;margin-bottom:10px}
.rys-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rys-row select{flex:1;min-width:140px}
.rys-row input[type=time]{width:90px}
.rys-remove{background:none;border:none;color:#e53935;font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.add-yard-slot-btn{width:100%;padding:9px;border-radius:10px;border:2px dashed var(--primary);background:#F8FFF2;color:var(--primary-d);font-size:14px;font-weight:800;cursor:pointer;margin-bottom:12px}
.add-yard-slot-btn:hover{background:#E8F5E0}
.recur-section{background:#F0FAF0;border-radius:14px;border:1.5px solid #C8E6B0;padding:12px 14px;margin-bottom:14px}
.recur-section-hdr{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:900;color:var(--primary-d);margin-bottom:10px}
.recur-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #D9EFD0;font-size:13px}
.recur-row:last-child{border-bottom:none}
.recur-del{background:none;border:none;color:#C0392B;font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px;flex-shrink:0}
.recur-del:hover{background:#FDECEA}
.recur-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.recur-days{font-size:11px;color:#888;font-weight:700}
/* ===== work-log placeholder ===== */
.soon-hero{text-align:center;padding:34px 20px 8px}
.soon-hero .ic{font-size:46px}
.soon-hero h2{font-size:21px;font-weight:900;color:var(--ink);margin:14px 0 6px}
.soon-hero p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
.mock{opacity:.55}
.mock .ml{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.mock .ml:last-child{border-bottom:none}
.mock .ml .h{margin-inline-start:auto;font-weight:900;color:var(--ink)}
/* ===== top nav ===== */
.tabbar{position:absolute;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;justify-content:space-around}
.tabbar button{border:none;background:none;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-weight:700;font-size:10.5px;cursor:pointer;padding:5px 12px;border-radius:14px}
.tabbar button .ti{font-size:21px;line-height:1}
.tabbar button.on{color:var(--primary-d)}
.tabbar button.on .ti{transform:translateY(-1px)}
.fab{position:absolute;bottom:24px;left:18px;z-index:55;width:56px;height:56px;border-radius:18px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-d));color:#fff;font-size:28px;font-weight:300;box-shadow:0 10px 24px rgba(224,106,32,.45);cursor:pointer}
.fab:active{transform:scale(.94)}
/* ===== toast ===== */
.toast{position:absolute;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:16px;font-weight:700;font-size:14px;box-shadow:var(--shadow);z-index:95;opacity:0;pointer-events:none;transition:.3s;display:flex;align-items:center;gap:9px;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== desktop layout (768px+) ===== */
@media (min-width: 768px) {
  body { justify-content: flex-start; }

  .device {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: 90px 1fr;
    grid-template-areas:
      "topbar  sidebar"
      "content sidebar";
    overflow: visible;
    min-height: 100vh;
  }

  .topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    padding: 0 36px;
    border-bottom: none;
    z-index: 40;
    background:
      radial-gradient(ellipse at 20% 80%, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--banner1) 55%, transparent) 0%, transparent 50%),
      radial-gradient(ellipse at 60% 60%, color-mix(in srgb, var(--banner2) 65%, transparent) 0%, transparent 60%),
      linear-gradient(135deg, var(--banner1) 0%, var(--banner2) 40%, var(--banner3) 70%, var(--banner2) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }

  .content {
    grid-area: content;
    padding: 28px 40px 60px;
    overflow-y: scroll;
    height: calc(100vh - 64px);
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
    direction: ltr;
  }
  .content > * { direction: rtl; }
  .content::-webkit-scrollbar { width: 8px; display: block; }
  .content::-webkit-scrollbar-track { background: transparent; }
  .content::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; }

  .tabbar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 24px 12px;
    border-top: none;
    border-inline-start: 1px solid var(--line);
    background: #F0F7EA;
    backdrop-filter: none;
  }

  .tabbar button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 14px;
    width: 100%;
  }

  .tabbar button .ti { font-size: 20px; }

  .tabbar button.on {
    background: var(--primary-soft);
    color: var(--primary-d);
  }

  .fab {
    position: fixed;
    bottom: 28px;
    left: 28px;
    border-radius: 18px;
    z-index: 55;
  }

  .sheet-overlay { position: fixed; }
  .toast { position: fixed; }
}

/* ===== סרגל שלבי אילוף — ציון = שלב (1–8) ===== */
.cmd .cname-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cmd .cname-col .cname{flex:0 1 auto}
/* מחוון "שלב אחרון" ליד שם הפקודה (צבע נקבע inline לפי השלב) */
.stage-badge{align-self:flex-start;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;white-space:nowrap;line-height:1.5;color:#fff}

/* סרגל 8 השלבים — שורה אחת (נגלל אופקית אם צר) */
.stage-legend-box{margin:0 0 14px}
.stage-legend-head{font-size:12.5px;font-weight:800;color:var(--primary-d);margin:0 2px 8px}
.stage-legend-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.sl-cell{flex:1 0 74px;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px 5px;text-align:center}
.sl-cell-n{width:24px;height:24px;border-radius:7px;color:#fff;font-weight:900;font-size:13px;display:grid;place-items:center}
.sl-cell-t{font-size:9.5px;color:var(--muted);font-weight:700;line-height:1.2}

/* תפריט נפתח לבחירת השלב (1–8) לכל פקודה — נפרד מהציון (1–5) */
.stage-select{border:1.5px solid var(--line);background:var(--surface);border-radius:11px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);padding:6px 8px;cursor:pointer;max-width:132px;flex-shrink:0}
.stage-select:focus{outline:none;border-color:var(--primary)}
/* שורת פקודה באימון: שם+תג שלב קודם | בחירת שלב | ציון 1–5 | הערות — נשבר לשורה חדשה במסכים צרים */
.cmd-train-row{flex-wrap:wrap;row-gap:8px}
@media (max-width:420px){
  .cmd-train-row .cname-col{flex:1 1 100%;order:1}
  .cmd-train-row .stage-select{order:2}
  .cmd-train-row .seg{order:3}
  .cmd-train-row .cmd-note-btn{order:4}
}

/* שורת פקודה/מיומנות בתוך חלון עריכת דוח (צר, עד 420px) — נשברת לשורות במקום לגלוש אופקית */
.cmd-edit-row{flex-wrap:wrap;row-gap:8px}
.cmd-edit-row .cname{flex:1 1 100%;order:1}
.cmd-edit-row .stage-select{order:2}
.cmd-edit-row .seg{order:3}
.cmd-edit-row .cmd-note-btn{order:4}

/* צ'קבוקס "נדרש" למיומנות + שורת שלב ממוצע קטנה מתחת לציון הפקודות */
.req-check{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--muted);cursor:pointer;flex-shrink:0;user-select:none;white-space:nowrap}
.req-check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;margin:0}
.score-sub{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}

/* כפתורי ציון פקודות 1–8 (ראמפ צבעים לפי שלב) */
.seg.cmd8{flex-wrap:wrap}
.seg.cmd8 button.s1.on{background:#E76F51;border-color:#E76F51;color:#fff}
.seg.cmd8 button.s2.on{background:#EE8A5E;border-color:#EE8A5E;color:#fff}
.seg.cmd8 button.s3.on{background:#F2A65E;border-color:#F2A65E;color:#fff}
.seg.cmd8 button.s4.on{background:#E9C46A;border-color:#E9C46A;color:#fff}
.seg.cmd8 button.s5.on{background:#C7BE6E;border-color:#C7BE6E;color:#fff}
.seg.cmd8 button.s6.on{background:#9DB86F;border-color:#9DB86F;color:#fff}
.seg.cmd8 button.s7.on{background:#5EA98A;border-color:#5EA98A;color:#fff}
.seg.cmd8 button.s8.on{background:#2A9D8F;border-color:#2A9D8F;color:#fff}

/* מצב תרגול: פס עליון קבוע + רשימת צעדים (נבנה ב-practiceRender, app.js) */
#practice-bar{direction:rtl;position:fixed;top:0;left:0;right:0;width:100%;z-index:250;background:#8A4B00;color:#fff;font-size:13px;line-height:1.35;box-shadow:0 2px 8px #0003}
#practice-bar .pr-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 12px}
#practice-bar .pr-row span{flex:1 1 180px;opacity:.92}
#practice-bar button{font:inherit;font-size:12px;font-weight:700;color:#fff;background:#ffffff26;border:1px solid #ffffff55;border-radius:8px;padding:5px 10px;cursor:pointer}
#practice-bar button.pr-exit{background:#fff;color:#8A4B00}
#practice-bar .pr-list{list-style:none;margin:0;padding:4px 12px 10px;background:#fff;color:#2b2b2b;border-top:1px solid #0001}
#practice-bar .pr-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #0000000f}
#practice-bar .pr-list li i{font-style:normal;font-weight:800;color:#8A4B00;width:18px;flex:none;text-align:center}
#practice-bar .pr-list li.ok{opacity:.55}
#practice-bar .pr-list li.ok i{color:#2e7d32}
#practice-bar .pr-list small{display:block;color:#666;font-size:12px}
#practice-bar .pr-list li.pr-fin{display:block;font-weight:700;color:#2e7d32;border:0}
body.practice .topbar{top:var(--practice-h,0)}

/* כפתור עזרה צף + חלונית העוזר (helpFabInit / helpOpen, app.js) */
#help-fab{position:fixed;z-index:120;left:max(14px,calc(50% - 226px));bottom:calc(env(safe-area-inset-bottom) + 88px);display:flex;align-items:center;gap:6px;height:48px;padding:0 18px 0 14px;border:none;border-radius:24px;background:var(--brand,var(--primary-d,#2B4C7E));color:#fff;font:inherit;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer}
#help-fab .hf-ic{font-size:20px;line-height:1}
@media (min-width:768px){#help-fab{left:24px;bottom:24px}}
body.help-open #help-fab,body[data-screen="training"] #help-fab,body[data-screen="register"] #help-fab{display:none}
#help-ov{display:none;position:fixed;inset:0;z-index:9500;background:rgba(28,29,32,.42);align-items:flex-end;justify-content:center;direction:rtl}
#help-ov.show{display:flex}
.help-sheet{background:#fff;width:100%;max-width:520px;max-height:88vh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden}
@media (min-width:768px){#help-ov{align-items:center;padding:24px}.help-sheet{border-radius:18px}}
.help-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #0001;font-size:16px}
.help-x{width:34px;height:34px;border-radius:50%;border:1px solid #d7dde4;background:#fff;font-size:20px;line-height:1;cursor:pointer}
.help-log{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:12px 16px;flex:1 1 auto;min-height:200px}
.help-log>*{flex:none}
.help-sub{color:#666;font-size:13px;margin:0}
.help-b{max-width:88%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5}
.help-b.u{align-self:flex-start;background:var(--brand,var(--primary-d,#2B4C7E));color:#fff}
.help-b.a{align-self:flex-end;background:#f0f1f3;color:#222}
.help-b.err{background:#fdecea;color:#7a1c14}
.help-q{display:block;width:100%;margin:0;text-align:right;padding:10px 12px;border:1px solid var(--brand,var(--primary-d,#2B4C7E));border-radius:10px;background:#fff;color:var(--brand,var(--primary-d,#2B4C7E));font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.help-more{margin-top:8px}
.help-more summary{cursor:pointer;color:#555;font-size:13px;padding:6px 0}
.help-more .help-q{margin:6px 0}
.help-cat{display:block;margin:12px 0 2px;font-size:13px;color:#444}
.help-chips{display:flex;flex-direction:column;gap:6px}
.help-chips small{color:#777}
.help-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.help-acts button,.help-cancel{font:inherit;font-size:13px;border:1px solid #0003;background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer}
.help-acts .help-primary{background:var(--brand,var(--primary-d,#2B4C7E));border-color:transparent;color:#fff}
.help-cancel{margin-inline-start:8px;padding:2px 10px;font-size:12px}
.help-foot{display:flex;flex-direction:column;gap:6px;padding:8px 16px calc(env(safe-area-inset-bottom) + 14px);border-top:1px solid #0001}
.help-tools{display:flex;justify-content:flex-start}
.help-tools button{font:inherit;font-size:13px;background:#f0f1f3;border:none;border-radius:14px;color:#444;cursor:pointer;padding:4px 12px}
.help-form{display:flex;gap:8px;width:100%}
.help-form input{flex:1;min-width:0;font:inherit;padding:10px 12px;border:1px solid #cfd3d8;border-radius:10px}
.help-send{font:inherit;font-weight:700;color:#fff;background:var(--brand,var(--primary-d,#2B4C7E));border:none;border-radius:10px;padding:0 18px;cursor:pointer}

/* ===== לוח מצב (הועבר מגרין דוג, 6.10.2026) ===== */
/* ============================================================
   TV — לוח מצב לטלוויזיה שבפנסיון.
   מסך אחד עם כל היום: מפה, כניסות, יציאות, רפואה ומשימות.
   נועד למסך גדול שנצפה מרחוק, ולכן הכול גדול ובניגודיות גבוהה.
   אינטראקטיבי: לחיצה על חדר פותחת חלונית, לחיצה על כלב פותחת כרטיס.
   ============================================================ */
body.tv-mode .topbar,
body.tv-mode .tabbar,
body.tv-mode #fab{display:none!important}
body.tv-mode #content{padding:0!important}
#screen-tv{padding:0;flex-direction:column;background:#0E1A12;color:#EAF2EC;overflow:hidden}
.tv-head{display:flex;align-items:center;gap:22px;padding:12px 20px;background:#14261A;border-bottom:2px solid #24402C;flex-shrink:0}
.tv-brand{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800}
.tv-logo{font-size:30px}
.tv-when{display:flex;align-items:baseline;gap:14px;color:#9DBCA8;font-size:19px;font-weight:700}
.tv-clock{font-size:30px;font-weight:800;color:#EAF2EC;font-variant-numeric:tabular-nums}
.tv-occ{margin-inline-start:auto;display:flex;align-items:baseline;gap:8px;font-size:19px;color:#9DBCA8;font-weight:700}
.tv-occ b{font-size:34px;color:#7FD6A0;font-weight:800;font-variant-numeric:tabular-nums}
.tv-exit{background:transparent;border:1.5px solid #3A5C44;color:#9DBCA8;border-radius:10px;width:40px;height:40px;font-size:19px;cursor:pointer;font-family:inherit;flex-shrink:0}
.tv-exit:hover{background:#24402C;color:#fff}
.tv-grid{flex:1;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1.6fr 1fr;gap:10px;padding:10px 12px 12px;min-height:0}
/* שורה עליונה: ממתינים לשיבוץ + המפה. שורה תחתונה: חמש הרשימות.
   המפה מקבלת חצי מהרוחב כדי שהיחס שלה (980x700) יישאר קרוב למכל
   ולא ייווצר שטח ריק גדול סביבה. */
/* המפה היא המרכז: ממנה מסמנים שיבוץ, האכלה וניקיון, ולכן היא מקבלת
   את החלק העליון כמעט כולו. */
#tv-card-un{grid-column:1/5;grid-row:1}
.tv-map{grid-column:5/13;grid-row:1}
/* שורה 2: ארבעה כרטיסים קצרים. שורה 3: "טיפול נדרש" על כל הרוחב —
   הוא הרשימה הארוכה ביותר (עשרות מרחבים), וברוחב מלא נכנסות ארבע
   כותרות מרחב בשורה במקום שתיים. */
/* שורה תחתונה אחת: קבלות · שחרורים · טיפול מיוחד · האכלות.
   ההאכלות מקבלות חצי מהשורה כי יש בהן עשרות קיבוצים. */
#tv-card-in{grid-column:1/3;grid-row:2}
#tv-card-out{grid-column:3/5;grid-row:2}
#tv-card-med{grid-column:5/8;grid-row:2}
#tv-card-feed{grid-column:8/13;grid-row:2}
/* שורה 3: האכלות ושגרת יום — שני דברים שונים, שני כרטיסים. */
/* אילופים ושגרת יום נפתחים מכפתור, ולכן אינם תופסים שטח קבוע בלוח. */
/* קבלות ושחרורים: שם בלבד, ולכן שורה חד-שורתית ונמוכה יותר —
   נכנסים יותר שמות באותו שטח, והמפה מקבלת את מה שהתפנה. */
#tv-card-in .tv-row,#tv-card-out .tv-row{padding:2px 8px}
#tv-card-in .tv-av,#tv-card-out .tv-av{width:26px;height:26px;border-width:1.5px}
.tv-card h3{flex-wrap:nowrap}
.tv-card h3 span{white-space:nowrap}
.tv-n,.tv-h-act{flex-shrink:0;white-space:nowrap}
.tv-search{width:100%;box-sizing:border-box;margin-bottom:6px;padding:4px 9px;font:600 14px inherit;font-family:inherit;background:#1C3323;border:1.5px solid #3A5C44;border-radius:9px;color:#EAF2EC;direction:rtl;flex-shrink:0}
.tv-search::placeholder{color:#6E8C79}
.tv-card.tv-drawer{position:fixed;inset-inline:3vw;bottom:3vh;height:52vh;z-index:61;display:none;box-shadow:0 14px 44px rgba(0,0,0,.6)}
.tv-card.tv-drawer.open{display:flex}
.tv-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none}
body.tv-drawer-open .tv-scrim{display:block}
.tv-drawer-btn{background:#1C3323;border:1.5px solid #3A5C44;color:#CFE7D6;border-radius:10px;padding:6px 12px;font:800 16px inherit;font-family:inherit;cursor:pointer;flex-shrink:0;margin-inline-start:8px}
.tv-drawer-btn:hover{background:#24402C;color:#fff}
.tv-drawer-btn span{background:#24402C;color:#7FD6A0;border-radius:7px;padding:0 7px;margin-inline-start:5px}
.tv-drawer-x{background:transparent;border:1.5px solid #3A5C44;color:#9DBCA8;border-radius:8px;width:30px;height:28px;font-size:15px;cursor:pointer;font-family:inherit;margin-inline-start:8px}
.tv-drawer-x:hover{background:#24402C;color:#fff}
.tv-card{background:#16281C;border:1.5px solid #24402C;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tv-card h3{margin:0 0 8px;font-size:21px;font-weight:800;color:#BFE3CC;display:flex;align-items:center;gap:9px;flex-shrink:0}
.tv-n{margin-inline-start:auto;background:#24402C;color:#7FD6A0;border-radius:9px;padding:1px 12px;font-size:21px;font-variant-numeric:tabular-nums}

.tv-map-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#F4F7F2;border-radius:10px;padding:8px}
.tv-map-wrap svg{width:100%;height:100%;max-height:100%}
.tv-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;min-height:0}
.tv-list::-webkit-scrollbar{width:8px}
.tv-list::-webkit-scrollbar-thumb{background:#2E5038;border-radius:4px}
.tv-row{display:flex;align-items:center;gap:8px;background:#1C3323;border:1px solid #2A4632;border-radius:10px;padding:7px 10px;font-size:17px;cursor:pointer;white-space:nowrap;overflow:hidden}
.tv-row:hover{background:#24402C;border-color:#4C7A5A}
.tv-row .nm{font-weight:800;color:#F0F7F2;overflow:hidden;text-overflow:ellipsis}
.tv-row .sub{color:#9DBCA8;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tv-row .tag{margin-inline-start:auto;font-size:15px;font-weight:800;border-radius:8px;padding:2px 10px;white-space:nowrap}
.tv-row .tag.ok{background:#1E4A2E;color:#7FD6A0}
.tv-row .tag.wait{background:#4A3A14;color:#F2C24E}
.tv-row .tag.time{background:#26384A;color:#8FC4EE}
.tv-empty{color:#6E8C79;font-size:18px;font-weight:600;padding:10px 2px}
.tv-foot{flex-shrink:0;padding:5px 20px 9px;color:#5E7A68;font-size:14px;font-weight:600}
/* בטלפון לוח המצב מבוטל לגמרי — גם הכניסה אליו מוסתרת.
   אותו גבול כמו TV_MIN_W ב-app.js. */
@media (max-width:999px){ #btn-enter-tv{display:none} }
@media (max-width:1100px){
  .tv-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.2fr 1fr 1fr 1fr}
  .tv-map{grid-row:1/2;grid-column:1/3}
}

/* מפה מוגדלת — הכרטיס תופס את כל הלוח ושאר הפאנלים מוסתרים.
   לחיצה על חדר ממשיכה לפתוח את חלונית השיבוץ גם במצב הזה. */
.tv-zoom{background:transparent;border:1.5px solid #3A5C44;color:#9DBCA8;border-radius:9px;width:34px;height:30px;font-size:16px;cursor:pointer;font-family:inherit;flex-shrink:0;margin-inline-start:10px}
.tv-zoom:hover{background:#24402C;color:#fff}
.tv-grid.map-big .tv-card:not(.tv-map){display:none}
.tv-grid.map-big{grid-template-columns:1fr;grid-template-rows:1fr}
.tv-grid.map-big .tv-map{grid-row:1/4;grid-column:1/13}

/* גוף כרטיס המפה: רשימת הממתינים לשיבוץ לצד המפה.
   ברשימה ארוכה (עשרות כלבים) היא גוללת בתוך עצמה ולא דוחפת את המפה. */

/* רשימת הממתינים לשיבוץ נפרסת לכמה עמודות ומנצלת את רוחב הכרטיס,
   במקום עמודה אחת ארוכה שנגמרת אחרי תשעה שמות. */
.tv-map-side{flex:1;overflow-y:auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(236px,100%),1fr));gap:6px;align-content:start;overflow-x:hidden;grid-auto-rows:min-content}
.tv-map-side:empty{display:none}
.tv-map-side::-webkit-scrollbar{width:8px}
.tv-map-side::-webkit-scrollbar-thumb{background:#2E5038;border-radius:4px}
/* במפה מוגדלת הרשימה מתכווצת — המפה היא מה שרוצים לראות */



/* תמונת הכלב בשורות הלוח — זיהוי בתמונה מהיר מקריאת שם */
.tv-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #2E5038;background:#1C3323}
.tv-av-e{display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}

/* הכרחי: .screen.active הוא display:block כברירת מחדל, ולכן הפריסה
   הפנימית לא נחסמה בגובה והרשימות מתחו את הלוח מחוץ למסך. */
#screen-tv.active{display:flex;height:100%;min-height:0}
.tv-grid{overflow:hidden}
/* רשימה מקופלת — מציגים את הראשונים, והשאר נפתח בלחיצה */
.tv-more{margin-top:4px;background:#1C3323;border:1px dashed #3A5C44;color:#9DBCA8;border-radius:10px;padding:6px 11px;font:700 16px inherit;cursor:pointer;font-family:inherit;width:100%;text-align:center}
.tv-more:hover{background:#24402C;color:#EAF2EC}
.tv-map-side.collapsed{max-height:none}
.tv-side-more{margin-top:6px}

/* שורת קיבוץ ב"טיפול נדרש" — כותרת אחת לכל סוג משימה, עם מונה וחץ */
.tv-grp{background:#20392A;border-color:#3A5C44;font-weight:800}
.tv-grp .gi{font-size:20px;flex-shrink:0}
.tv-grp .chev{color:#7FD6A0;font-size:15px;margin-inline-start:6px;flex-shrink:0}
.tv-grp .tag{margin-inline-start:auto}
.tv-sub-row{margin-inline-start:16px;background:#16281C;font-size:16px}
/* שם הכלב והמיקום בשתי שורות — בעמודה צרה שורה אחת חתכה את השם
   ל"נ.. חד..." והיה אי אפשר לזהות את מי מדובר */
.tv-row{align-items:center}
.tv-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.tv-txt .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-txt .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
/* כפתור סימון בוצע ישירות מהשורה */
.tv-done{flex-shrink:0;width:34px;height:34px;border-radius:9px;border:1.5px solid #3A5C44;background:#16281C;color:#7FD6A0;font:800 17px inherit;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tv-done:hover{background:#2E5038;color:#fff}
.tv-done.on{background:#1E4A2E;border-color:#4C7A5A;color:#7FD6A0}
.tv-done-all{width:auto;padding:0 10px;font-size:14px;margin-inline-start:6px}

/* מצב השורה בצבע במקום במילה: אדום = טרם בוצע, ירוק = בוצע.
   המילה "ממתין" גזלה את הרוחב והשם נחתך ל"ב..", והצבע אומר את אותו
   דבר מיד ובלי לקרוא. */
.tv-row.st-wait{border-inline-start:3px solid #C25A52;background:#1C3323}
.tv-row.st-ok{border-inline-start:3px solid #43A047;background:#16281C;opacity:.7}
.tv-row.st-ok .nm{text-decoration:line-through;color:#9DBCA8}
.tv-done.off{border-color:#7A3B36;color:#E38179;background:#241E1C}
.tv-done.off:hover{background:#3A211E;color:#fff}
.tv-done.on{background:#1E4A2E;border-color:#43A047;color:#8FE3AC}
/* השם מקבל עדיפות על הכל — הוא הדבר היחיד שחייב להיקרא */
.tv-txt{flex:1 1 auto;min-width:0}
.tv-txt .nm{font-size:17px}
.tv-row .tag{flex-shrink:0}

/* כפתור אמצעי (טרם הושלם) בשורת אילוף */
.tv-done.mid{border-color:#8A6D1F;color:#F2C24E;background:#2A2416}
.tv-done.mid:hover{background:#3D3420;color:#fff}
.tv-row .tv-done+.tv-done{margin-inline-start:4px}

/* פעולות מהירות בכותרת הלוח */
.tv-act{background:#1E4A2E;border:1.5px solid #3A5C44;color:#CFEBD9;border-radius:10px;padding:7px 12px;font:800 15px inherit;font-family:inherit;cursor:pointer;flex-shrink:0;white-space:nowrap}
.tv-act:hover{background:#2E5038;color:#fff}

/* תפריט הפעולות — קיפול הכפתורים מהכותרת כדי לפנות רוחב לנתונים */
.tv-burger{background:#1E4A2E;border:1.5px solid #3A5C44;color:#CFEBD9;border-radius:10px;width:42px;height:40px;font-size:20px;cursor:pointer;font-family:inherit;flex-shrink:0}
.tv-burger:hover{background:#2E5038;color:#fff}
.tv-menu{position:absolute;inset-inline-start:14px;top:60px;z-index:70;background:#16281C;border:1.5px solid #3A5C44;border-radius:12px;padding:6px;min-width:230px;box-shadow:0 12px 34px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:2px}
.tv-menu button{background:none;border:0;color:#EAF2EC;text-align:start;padding:10px 12px;border-radius:9px;font:700 16px inherit;font-family:inherit;cursor:pointer}
.tv-menu button:hover{background:#24402C}
.tv-menu-sep{height:1px;background:#2A4632;margin:4px 6px}
.tv-head{position:relative}

/* רצועת התראות — שורה דקה מעל הלוח, מוסתרת כשאין מה להתריע */
.tv-alerts{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 4px;flex-shrink:0}
.tv-alert{border-radius:10px;padding:6px 13px;font:700 15px inherit;font-family:inherit;cursor:pointer;border:1.5px solid}
.tv-alert b{font-size:17px;font-weight:900;margin-inline-end:4px}
.tv-alert.bad{background:#3A211E;border-color:#8A3A33;color:#F0A69C}
.tv-alert.bad:hover{background:#4C2A26;color:#fff}
.tv-alert.warn{background:#2A2416;border-color:#8A6D1F;color:#F2C24E}
.tv-alert.warn:hover{background:#3D3420;color:#fff}
.tv-alert.info{background:#1C2A38;border-color:#38536E;color:#8FC4EE}
.tv-alert.info:hover{background:#26384A;color:#fff}

/* פעולה בכותרת הכרטיס — צמודה לאזור שהיא שייכת לו */
.tv-h-act{margin-inline-start:auto;background:#1E4A2E;border:1.5px solid #3A5C44;color:#CFEBD9;border-radius:9px;padding:4px 11px;font:800 14px inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.tv-h-act:hover{background:#2E5038;color:#fff}
.tv-card h3 .tv-h-act+.tv-n{margin-inline-start:8px}

/* הכרטיסים התרחבו ל-700px, והשורה נמתחה איתם: הטקסט קיבל 530px לשם
   שצריך 80, ונוצר חור ריק באמצע שנראה כמו שדה שבור. עכשיו הרשימות
   נשפכות לשתי עמודות בתוך הכרטיס הרחב — המקום מנוצל, ורואים יותר
   שורות בלי גלילה. */
.tv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:7px;align-content:start;overflow-x:hidden}
/* כותרת קבוצה תופסת שורה שלמה, והכלבים שתחתיה נשפכים לעמודות מתחתיה */
.tv-grp{grid-column:1/-1}
.tv-sub-row{margin-inline-start:0}
.tv-empty{grid-column:1/-1}
.tv-more{grid-column:1/-1}


.tv-exit.tv-close{width:auto;padding:0 14px;font-size:15px;font-weight:800;color:#CFEBD9;border-color:#5A8368}

/* שביעות רצון + "יש לי הערה": חלונית pv-ov, באותו מבנה כמו חלונית העזרה */
#pv-ov{display:none;position:fixed;inset:0;z-index:9500;background:rgba(28,29,32,.42);align-items:flex-end;justify-content:center;direction:rtl}
#pv-ov.show{display:flex}
@media (min-width:768px){#pv-ov{align-items:center;padding:24px}}
.pv-body{gap:10px}
.pv-msg{background:#f0f1f3;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.55;white-space:pre-wrap}
.pv-btn{display:block;width:100%;padding:12px;border:1px solid var(--brand,var(--primary-d,#2B4C7E));border-radius:10px;background:#fff;color:var(--brand,var(--primary-d,#2B4C7E));font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.pv-btn.pv-p{background:var(--brand,var(--primary-d,#2B4C7E));color:#fff}
.pv-btn:disabled{opacity:.6}
.pv-ta{width:100%;box-sizing:border-box;border:1px solid #d7dde4;border-radius:8px;padding:10px 12px;font:inherit;font-size:16px;resize:vertical}
.pv-err{color:#B3261E;font-weight:700;font-size:14px;margin:0;min-height:0}
.pv-del{border:0;background:none;color:#B3261E;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:0}