:root{
  --bg:#f6f7f9; --panel:#fff; --fg:#16181d; --mut:#6b7280; --line:#e4e7ec;
  --accent:#1f6feb; --crit:#c0392b; --high:#d68910; --med:#2874a6; --ok:#1e8449;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1115; --panel:#171a21; --fg:#e8eaed; --mut:#9aa1ad;
        --line:#272b34; --accent:#589bff; --crit:#ff6b5b; --high:#f0b429;
        --med:#5dade2; --ok:#52be80; --shadow:none;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);direction:rtl;
  font-family:'Segoe UI',Rubik,Arial,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header{background:var(--panel);border-bottom:1px solid var(--line);
  padding:0 20px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.hrow{display:flex;align-items:center;gap:22px;max-width:1400px;margin:0 auto;
  height:56px;flex-wrap:wrap}
.brand{font-weight:700;font-size:17px;white-space:nowrap}
nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
nav a{padding:7px 12px;border-radius:7px;color:var(--fg);font-size:14px}
nav a:hover{background:var(--bg);text-decoration:none}
nav a.on{background:var(--accent);color:#fff}
.who{color:var(--mut);font-size:12.5px;white-space:nowrap}

main{max-width:1400px;margin:22px auto;padding:0 20px 60px}
h1{font-size:22px;margin:0 0 3px}
h2{font-size:16px;margin:30px 0 12px}
.lead{color:var(--mut);font-size:13px;margin-bottom:20px}

.grid{display:grid;gap:14px;margin-bottom:8px}
.g5{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px;box-shadow:var(--shadow)}
.kpi .n{font-size:30px;font-weight:650;line-height:1.15}
.kpi .l{font-size:12.5px;color:var(--mut);margin-top:3px}
/* מספר שניתן ללחוץ עליו: שומר על צבע המדד, ורומז על קישוריות בקו מקווקו */
.kpi .n a{color:inherit;border-bottom:2px dotted currentColor;padding-bottom:1px}
.kpi .n a:hover{border-bottom-style:solid}
.kpi .d{font-size:11.5px;margin-top:6px}
.crit{color:var(--crit)}.high{color:var(--high)}.med{color:var(--med)}
.ok{color:var(--ok)}.mut{color:var(--mut)}

.wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;
  background:var(--panel)}
tbody tr:hover{background:var(--bg)}
td.num{font-family:ui-monospace,Menlo,monospace;white-space:nowrap;font-size:12.5px}
td.nowrap,th.nowrap{white-space:nowrap}
td.desc{color:var(--mut);min-width:220px;max-width:330px;font-size:12.5px}
.dim{font-size:11px;color:var(--mut)}

.tag{display:inline-block;padding:1px 8px;border-radius:11px;font-size:11px;
  border:1px solid currentColor;white-space:nowrap}
.bar{height:7px;border-radius:4px;background:var(--accent);min-width:2px}
.barbg{background:var(--line);border-radius:4px;overflow:hidden;min-width:70px}

.btn{display:inline-block;padding:7px 14px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel);color:var(--fg);font-size:13.5px;cursor:pointer;
  font-family:inherit}
.btn:hover{background:var(--bg);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.danger{background:var(--crit);color:#fff;border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}

.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash.ok{background:rgba(30,132,73,.13);border:1px solid var(--ok);color:var(--ok)}
.flash.error{background:rgba(192,57,43,.12);border:1px solid var(--crit);color:var(--crit)}

.empty{color:var(--mut);padding:22px;text-align:center}
/* align-items ברירת המחדל היא stretch, וזה הכרחי:
   בלי גובה מוגדר לעמודה, אחוזי הגובה של העמודון לא נפתרים והגרף יוצא ריק */
.chart{display:flex;gap:5px;height:150px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:4px;min-width:0}
.chart .bwrap{width:100%;flex:1;display:flex;align-items:flex-end}
.chart .b{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px}
.chart .lab{font-size:10px;color:var(--mut);white-space:nowrap}
.chart .val{font-size:10.5px;color:var(--mut)}

.kv{display:grid;grid-template-columns:130px 1fr;gap:7px 14px;font-size:14px}
.kv dt{color:var(--mut);font-size:13px}
.kv dd{margin:0}
.blocks{margin:0;padding-inline-start:20px;color:var(--crit);font-size:13.5px}
.notes{margin:0;padding-inline-start:20px;color:var(--high);font-size:13.5px}
textarea,input[type=text],input[type=password]{width:100%;padding:8px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--fg);font-family:inherit;
  font-size:13.5px}
label{font-size:13px;color:var(--mut);display:block;margin-bottom:5px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}


/* ============================================================
   מסכי המשרד בטלפון.
   הם נבנו למחשב, ובטלפון התפריט העליון נדרס על הכותרת והטבלאות
   גלשו מהמסך. זו לא תצוגת העבודה של עובד שטח, אבל מנהל שפותח
   דשבורד מהנייד צריך לפחות לקרוא אותו.
   ============================================================ */
@media (max-width:760px){
  body{overflow-x:hidden}
  header,.topbar{flex-wrap:wrap;gap:8px}
  nav{display:flex;flex-wrap:wrap;gap:4px;width:100%}
  nav a{font-size:13px;padding:6px 9px}
  .container,main{padding-left:12px;padding-right:12px}
  h1{font-size:21px}
  .kpis,.grid{grid-template-columns:1fr 1fr !important}
  .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  .panel{padding:12px}
}