:root{
  --bg:#f4f9fd; --surface:#ffffff; --sidebar:#f3f8fc;
  --ink:#27374a; --text:#566377; --muted:#90a0b2; --line:#e6edf4; --line2:#eef3f9;
  --primary:#2e90db; --primary-d:#1f78bf; --primary-soft:#e6f3fc;
  --accent:#1f78bf; --gold:#2e90db; --gold-d:#1f78bf; --gold-soft:#e6f3fc;
  --l20:#ec6f63; --l40:#ef9a4d; --l60:#f0c34e; --l80:#4f9fe0; --l100:#2bb673; --na:#b0b9c8;
}
*{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{margin:0}
body{font-family:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif;background:var(--bg);
  color:var(--text);direction:rtl;line-height:1.5;padding:18px;font-size:14px}
.wrap{max-width:1200px;margin:0 auto}

.topbar{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:14px 20px;margin-bottom:14px;box-shadow:0 8px 26px rgba(74,120,194,.08);
  border-top:3px solid var(--gold)}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{height:46px;width:auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt .t1{font-weight:800;color:var(--ink);font-size:17px;white-space:nowrap}
.brand-txt .t2{font-size:12px;color:var(--muted);white-space:nowrap}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:none;border-radius:999px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-save{background:var(--primary);color:#fff}
.btn-print{background:#5b7aa6;color:#fff}
.btn-reset{background:#eef3f8;color:#5d6b7d;border:1px solid #dde5ee}
.btn:hover{filter:brightness(1.05)}

.cycle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.cycle .lbl{font-size:12.5px;font-weight:800;color:var(--gold-d)}
.cycle select,.cycle input{font-family:inherit;font-size:13px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;outline:none}
.cycle select:focus,.cycle input:focus{border-color:var(--primary)}
.cycle input{min-width:170px}
.cycle .sep{color:var(--muted);font-size:12px}

.layout{display:flex;gap:14px;align-items:flex-start}
.sidebar{flex:0 0 274px;background:var(--sidebar);border:1px solid var(--line);border-radius:18px;padding:10px;position:sticky;top:18px;box-shadow:0 8px 26px rgba(74,120,194,.06)}
.sb-title{font-size:11.5px;color:var(--muted);font-weight:800;padding:8px 10px 6px;letter-spacing:.3px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;cursor:pointer;color:var(--text);font-weight:700;font-size:13.5px;margin-bottom:3px;transition:background .15s,color .15s}
.nav-item:hover{background:#e9eff8}
.nav-ov{font-weight:800}
.nav-dot{width:8px;height:8px;border-radius:50%;background:#c6d3e6;flex:0 0 auto}
.nav-name{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.3}
.nav-pct{font-size:12px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 9px;min-width:44px;text-align:center}

.content{flex:1 1 auto;min-width:0}
.page{display:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 8px 26px rgba(74,120,194,.06)}
.page.active{display:block}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 6px 14px rgba(31,120,191,.30)}
.nav-item.active .nav-dot{background:#fff}
.nav-item.active .nav-pct{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
#deptNav{display:contents}
.add-dept{margin-top:8px;width:100%;background:var(--primary-soft);color:var(--primary-d);border:1px dashed #b9d3ea;border-radius:12px;padding:11px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.add-dept:hover{filter:brightness(.98)}
.rm-dept{border:none;background:#f5e5e3;color:#c0655c;border-radius:8px;padding:2px 9px;font-size:11px;font-weight:800;cursor:pointer;margin-right:8px;font-family:inherit;vertical-align:middle}
.dept-title:empty:before{content:attr(data-ph);color:#bcc6d8;font-weight:600}
.ov-dh-title{margin:18px 4px 4px;font-size:12.5px;font-weight:800;color:var(--primary-d)}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line2);padding-bottom:16px;margin-bottom:8px}
.ph-info{min-width:0;flex:1 1 auto}
.ph-eyebrow{font-size:12px;color:var(--gold-d);font-weight:800;letter-spacing:.4px;margin-bottom:3px;white-space:nowrap}
.ph-title{margin:0;color:var(--ink);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(16px,2.4vw,22px)}
.ph-meta{font-size:12.5px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gauge{position:relative;width:118px;height:118px;flex:0 0 auto}
.ring{transform:rotate(-90deg);width:118px;height:118px}
.ring-bg{fill:none;stroke:#e8eff8;stroke-width:11}
.ring-fg{fill:none;stroke:var(--primary);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .6s ease,stroke .3s}
.gauge-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:29px;font-weight:800;color:var(--ink)}
.gauge-num small{font-size:14px;font-weight:700;color:var(--muted);margin-right:1px}

.ov-list{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.ov-row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;cursor:pointer;transition:background .15s;border:1px solid transparent}
.ov-row:hover{background:#eef2fb;border-color:var(--line)}
.ov-name{flex:0 0 250px;font-weight:700;color:var(--ink);font-size:13.5px;white-space:normal;line-height:1.35}
.ov-track{flex:1 1 auto;height:13px;background:#e9eef7;border-radius:999px;overflow:hidden}
.ov-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--primary);transition:width .6s ease,background .3s}
.ov-pct{flex:0 0 56px;text-align:left;font-weight:800;color:var(--ink);font-size:14px}

.tasks{margin-top:14px}
.task{padding:12px 4px;border-bottom:1px solid var(--line2)}
.task:last-child{border-bottom:none}
.task-txt{font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:10px;line-height:1.5}
.sug{display:inline-block;font-size:10.5px;font-weight:800;color:var(--gold-d);background:var(--gold-soft);border:1px solid #ecdcb4;border-radius:999px;padding:1px 8px;margin-right:7px;vertical-align:middle}
.rate{display:flex;flex-wrap:wrap;gap:6px}
.rate .radio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.lv{font-size:12.5px;font-weight:700;color:#7b879b;background:#f1f4fa;border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;cursor:pointer;transition:all .12s;user-select:none}
.lv:hover{border-color:#cdd9ec}
.radio:focus-visible + .lv{outline:2px solid var(--primary);outline-offset:1px}
.radio:checked + .lv.lv20{background:var(--l20);border-color:var(--l20);color:#fff}
.radio:checked + .lv.lv40{background:var(--l40);border-color:var(--l40);color:#fff}
.radio:checked + .lv.lv60{background:var(--l60);border-color:var(--l60);color:#4a3d12}
.radio:checked + .lv.lv80{background:var(--l80);border-color:var(--l80);color:#fff}
.radio:checked + .lv.lv100{background:var(--l100);border-color:var(--l100);color:#fff}
.radio:checked + .lv.lvna{background:var(--na);border-color:var(--na);color:#fff}

.task.custom .task-txt{outline:none;border-bottom:1px dashed #cdd9ec;padding-bottom:3px}
.task-txt[contenteditable="true"]:empty:before{content:attr(data-ph);color:#bcc6d8;font-weight:500}
.task .rm{float:left;border:none;background:none;color:#cf8d86;font-size:15px;cursor:pointer;line-height:1;padding:2px 4px;margin-right:6px}
.add-task{margin-top:14px;background:var(--gold-soft);color:var(--gold-d);border:1px dashed #e3cd96;border-radius:12px;padding:11px 16px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;width:100%}
.add-task:hover{background:#f3e8c9}

.notes-wrap{margin-top:18px;border-top:1px solid var(--line2);padding-top:14px}
.notes-label{font-size:12.5px;font-weight:800;color:var(--gold-d);margin-bottom:7px}
.notes{min-height:64px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;color:var(--ink);background:#fbfcfe;outline:none}
.notes:focus{border-color:var(--primary);background:#fff}
.notes:empty:before{content:attr(data-ph);color:#b8c2d4}

/* ---- Goals (الأهداف) ---- */
.goals-wrap{margin-top:20px;border-top:2px dashed #d7e3f0;padding-top:16px}
.goals-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.goals-title{font-size:14px;font-weight:800;color:var(--ink)}
.goals-pct{font-size:12.5px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.goals{margin-top:2px}
.goal{padding:12px 4px;border-bottom:1px solid var(--line2)}
.goal:last-child{border-bottom:none}
.goal-txt{font-weight:700;color:var(--ink);font-size:14.5px;margin-bottom:10px;line-height:1.5;outline:none}
.goal-txt:empty:before{content:attr(data-ph);color:#bcc6d8;font-weight:500}
.goal .rm{float:left;border:none;background:none;color:#cf8d86;font-size:15px;cursor:pointer;line-height:1;padding:2px 4px;margin-right:6px}
.grate{display:flex;flex-wrap:wrap;gap:6px}
.grate .gradio{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.glv{font-size:12.5px;font-weight:700;color:#7b879b;background:#f1f4fa;border:1.5px solid var(--line);border-radius:999px;padding:6px 15px;cursor:pointer;transition:all .12s;user-select:none}
.glv:hover{border-color:#cdd9ec}
.gradio:focus-visible + .glv{outline:2px solid var(--primary);outline-offset:1px}
.gradio:checked + .glv.glv-full{background:#2bb673;border-color:#2bb673;color:#fff}
.gradio:checked + .glv.glv-partial{background:#f0c34e;border-color:#f0c34e;color:#4a3d12}
.gradio:checked + .glv.glv-none{background:#ec6f63;border-color:#ec6f63;color:#fff}
.gradio:checked + .glv.glv-wrong{background:#8e4bb0;border-color:#8e4bb0;color:#fff}
.add-goal{margin-top:14px;background:#f1e9f8;color:#7a3f96;border:1px dashed #d9bfe9;border-radius:12px;padding:11px 16px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;width:100%}
.add-goal:hover{background:#ead9f2}
.goal-notes-wrap{margin-top:16px;border-top:1px solid var(--line2);padding-top:14px}
.goal-notes-label{font-size:12.5px;font-weight:800;color:#7a3f96;margin-bottom:7px}
.goal-notes{min-height:64px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;color:var(--ink);background:#fbfcfe;outline:none}
.goal-notes:focus{border-color:#8e4bb0;background:#fff}
.goal-notes:empty:before{content:attr(data-ph);color:#b8c2d4}
.ov-gpct{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#7a3f96;background:#f1e9f8;border:1px solid #e2cdef;border-radius:999px;padding:3px 10px;text-align:center;white-space:nowrap}
.ov-row{flex-wrap:wrap}
.hist-btn{margin-top:8px;background:#fff;color:var(--primary-d);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.hist-btn:hover{background:var(--primary-soft)}
.hist-overlay{position:fixed;inset:0;background:rgba(20,30,45,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.hist-card{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:80vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.hist-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:#fff}
.hist-h b{font-size:15px;color:var(--ink)}
.hist-x{border:none;background:#f1f4fa;color:#5d6b7d;border-radius:999px;width:28px;height:28px;font-size:13px;cursor:pointer}
.hist-tbl{width:100%;border-collapse:collapse;font-size:13px}
.hist-tbl th{background:var(--primary-soft);color:var(--primary-d);padding:9px 10px;font-size:12px;font-weight:800;text-align:center}
.hist-tbl td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--line2);color:var(--ink)}
.hist-tbl tr:last-child td{border-bottom:none}

@media (max-width:760px){
  .goal-txt{font-size:13.5px}
  .glv{font-size:12px;padding:6px 13px}
}


.hint{font-size:11.5px;color:var(--muted);text-align:center;margin:14px 4px 0;line-height:1.6}

@media (max-width:820px){
  body{padding:10px}
  .layout{flex-direction:column}
  .sidebar{position:static;flex:1 1 auto;width:100%;display:flex;gap:6px;overflow-x:auto;padding:8px;border-radius:14px}
  .sb-title{display:none}
  .nav-item{flex:0 0 auto;flex-direction:column;gap:5px;text-align:center;font-size:11px;padding:9px 12px;min-width:128px;margin:0}
  .add-dept{width:auto;flex:0 0 auto;min-width:120px;margin-top:0}
  .nav-name{white-space:normal;line-height:1.2}
  .page{padding:16px 14px}
  .gauge,.ring{width:92px;height:92px}
  .gauge-num{font-size:23px}
  .ph-title{font-size:clamp(14px,4.6vw,19px)}
  .ov-name{flex:0 0 150px;font-size:12px;line-height:1.3}
  .ov-pct{flex:0 0 46px;font-size:13px}
  .lv{font-size:12px;padding:6px 13px}
  .actions{width:100%}.actions .btn{flex:1 1 auto;justify-content:center}
  .cycle input{flex:1 1 auto;min-width:0}
}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;padding:0}
  .topbar{box-shadow:none;border-color:#ccc}
  .actions,.sidebar,.add-task,.hint,.rm{display:none !important}
  .layout{display:block}
  .page{box-shadow:none;border:none;padding:0}
  .lv{border-color:#ccc}
  .radio:not(:checked) + .lv{opacity:.25}
}