:root{ --ink:#241E22; --ink-soft:#6B5F66; --ink-faint:#9C919A; --paper:#FBFAF8; --card:#FFFFFF; --rule:#E4DDE0; --plum:#6B2D4E; --plum-dark:#4A1C36; --plum-tint:#F5EBF0; --gold:#B8761A; --gold-tint:#FBF2E2; --leaf:#2F6B4F; --leaf-tint:#E9F3ED; --flag:#A8322B; --flag-tint:#FBECEB; --on-plum:#FFFFFF; /* لون النص فوق أي خلفية بلون الهوية */ --head-fg:#F6EEF2; /* نص الترويسة */ --bd-late:#EBC9C6; --bd-due:#EBD8AE; --bd-good:#C6DFD1; --off-bg:#CFC7CB; --off-fg:#8B8288; /* الزر المقفول */ --hl-bg:#FDF0C4; --hl-fg:#241E22; /* تظليل نتيجة البحث */ --r:10px; --r-sm:6px; --shadow:0 1px 2px rgba(36,30,34,.06),0 4px 14px rgba(36,30,34,.05); color-scheme:light; } /* ---------- الوضع الليلي ---------- نفس الهوية، بس الأسطح غامقة والألوان اتفتحت عشان تتقرا عليها. ui.js بيحط data-theme على ، ولو المستخدم مختارش البرنامج بيمشي على إعداد الجهاز. */ :root[data-theme="dark"]{ --ink:#F1EAED; --ink-soft:#B6A8AF; --ink-faint:#877A81; --paper:#171216; --card:#221B20; --rule:#3A2E35; --plum:#C87FA4; --plum-dark:#2A1C24; --plum-tint:#33222C; --gold:#E2A84E; --gold-tint:#3A2C18; --leaf:#63B98C; --leaf-tint:#1C3428; --flag:#E4746D; --flag-tint:#3B2020; --on-plum:#25141C; --head-fg:#F1E3EA; --bd-late:#5A2E2C; --bd-due:#5A4523; --bd-good:#28503C; --off-bg:#332A30; --off-fg:#7C6E76; --hl-bg:#6A5312; --hl-fg:#FFF3D0; --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35); color-scheme:dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#F1EAED; --ink-soft:#B6A8AF; --ink-faint:#877A81; --paper:#171216; --card:#221B20; --rule:#3A2E35; --plum:#C87FA4; --plum-dark:#2A1C24; --plum-tint:#33222C; --gold:#E2A84E; --gold-tint:#3A2C18; --leaf:#63B98C; --leaf-tint:#1C3428; --flag:#E4746D; --flag-tint:#3B2020; --on-plum:#25141C; --head-fg:#F1E3EA; --bd-late:#5A2E2C; --bd-due:#5A4523; --bd-good:#28503C; --off-bg:#332A30; --off-fg:#7C6E76; --hl-bg:#6A5312; --hl-fg:#FFF3D0; --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35); color-scheme:dark; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} body{margin:0;background:var(--paper);color:var(--ink); font:400 16px/1.55 "IBM Plex Sans Arabic",system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)} .mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed} button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit} button{cursor:pointer;border:0;background:none} :focus-visible{outline:2px solid var(--plum);outline-offset:2px} a{color:var(--plum);text-decoration:none} header{position:sticky;top:0;z-index:30;background:var(--plum-dark);color:var(--head-fg); padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top)); display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* ---------- اسم المحل ---------- */ .wordmark{text-decoration:none;font-family:"Reem Kufi",serif;font-weight:600; font-size:19px;color:inherit;letter-spacing:.01em;flex-shrink:0} .wordmark i{font-style:normal;color:var(--gold)} @media(max-width:600px){ .wordmark{font-size:16px} } .navlink{font-size:13.5px;color:#D8C3CE;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 12px} .navlink[aria-current="page"]{background:var(--gold);color:#2A1C24;font-weight:500} .conn{margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:#D8C3CE} .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)} .dot.live{background:#5FD39A} .wrap{max-width:1120px;margin:0 auto;padding:14px 14px 40px} .card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow)} .pad{padding:14px} .eyebrow{font-family:"Reem Kufi",serif;font-size:12px;letter-spacing:.08em;color:var(--ink-faint); margin:0 0 10px;display:flex;align-items:center;gap:8px} .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)} .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px} @media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}} .kpi{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:12px 13px} .kpi span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:3px} .kpi b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums; font-size:21px;font-weight:600;line-height:1.2} .kpi small{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:3px} .kpi.late{border-color:var(--bd-late);background:var(--flag-tint)} .kpi.late b{color:var(--flag)} .kpi.due{border-color:var(--bd-due);background:var(--gold-tint)} .kpi.due b{color:var(--gold)} .kpi.good{border-color:var(--bd-good);background:var(--leaf-tint)} .kpi.good b{color:var(--leaf)} .tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{border:1px solid var(--rule);border-radius:999px;padding:7px 15px;font-size:14px; color:var(--ink-soft);background:var(--card);white-space:nowrap} .tab[aria-selected="true"]{background:var(--plum);border-color:var(--plum);color:var(--on-plum);font-weight:500} .searchbar{display:flex;gap:8px;align-items:center;border:1.5px solid var(--rule); border-radius:var(--r);padding:0 12px;background:var(--card);margin-bottom:10px} .searchbar:focus-within{border-color:var(--plum)} .searchbar input{flex:1;border:0;outline:0;padding:12px 0;background:none;min-width:0} .row{display:flex;align-items:center;gap:10px;padding:12px 4px; border-bottom:1px solid var(--rule);width:100%;text-align:start} .row:last-child{border-bottom:0} .row:active{background:var(--plum-tint)} .row-main{flex:1;min-width:0} .row-name{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row-meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px; display:flex;gap:8px;flex-wrap:wrap;align-items:center} .row-end{text-align:end;flex-shrink:0} .row-end b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums; font-weight:600;font-size:15px} .pill{border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:500} .p-late{background:var(--flag-tint);color:var(--flag)} .p-due{background:var(--gold-tint);color:var(--gold)} .p-open{background:var(--plum-tint);color:var(--plum-dark)} .p-ok{background:var(--leaf-tint);color:var(--leaf)} .empty{padding:30px 10px;text-align:center;color:var(--ink-soft);font-size:14.5px} .empty b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px} .tbl{border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;margin-top:10px} .tr{display:grid;gap:6px 10px;padding:9px 11px;font-size:13px; border-bottom:1px solid var(--rule);align-items:baseline} .tr:last-child{border-bottom:0} .tr:nth-child(even){background:var(--paper)} .tr.head{background:var(--plum-dark);color:var(--head-fg);font-weight:500;font-size:12.5px} .tr.total{background:var(--gold-tint);font-weight:600;border-top:1px solid var(--rule)} .num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums; text-align:end;white-space:nowrap} .dim{color:var(--ink-faint);font-size:12px} .neg{color:var(--flag)} .pos{color:var(--leaf)} .bars{display:flex;flex-direction:column;gap:8px} .bar-row{display:flex;align-items:center;gap:10px;font-size:13.5px} .bar-lbl{width:110px;flex-shrink:0;color:var(--ink-soft);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .bar-track{flex:1;height:22px;background:var(--paper);border-radius:var(--r-sm);overflow:hidden} .bar-fill{height:100%;border-radius:var(--r-sm)} .bar-amt{width:92px;text-align:end;font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;font-weight:500} .btn{background:var(--plum);color:var(--on-plum);font-weight:500;border-radius:var(--r-sm);padding:12px 18px} .btn:active{transform:scale(.985)} .btn:disabled{background:var(--off-bg);color:var(--off-fg);cursor:not-allowed} .btn-ghost{background:none;color:var(--plum);border:1px solid var(--rule); padding:11px 14px;font-size:14.5px;border-radius:var(--r-sm)} .btn-sm{font-size:13.5px;padding:8px 13px} .btn-danger{background:var(--flag)} .field{margin-bottom:12px} .field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:5px} .field input,.field select,.field textarea{width:100%;border:1.5px solid var(--rule); border-radius:var(--r-sm);padding:11px 12px;background:var(--card);outline:0} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--plum)} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} .segs{display:flex;gap:6px;flex-wrap:wrap} .seg{border:1px solid var(--rule);border-radius:var(--r-sm);padding:9px 13px;font-size:14px; color:var(--ink-soft);background:var(--card);flex:1;min-width:70px;text-align:center} .seg[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--on-plum);font-weight:500} .hint{font-size:12.5px;color:var(--ink-faint);margin-top:5px} .note{font-size:12.5px;padding:9px 11px;border-radius:var(--r-sm);margin-top:8px} .note.info{background:var(--plum-tint);color:var(--plum-dark)} .note.warn{background:var(--gold-tint);color:var(--gold)} .note.bad{background:var(--flag-tint);color:var(--flag)} .err{background:var(--flag-tint);color:var(--flag);border-radius:var(--r-sm); padding:10px 12px;font-size:13.5px;margin-bottom:12px} .stepper{display:flex;align-items:center;border:1px solid var(--rule); border-radius:var(--r-sm);overflow:hidden} .stepper button{width:32px;height:32px;font-size:17px;color:var(--plum);font-weight:500} .stepper button:active{background:var(--plum-tint)} .stepper span{min-width:32px;text-align:center;font-family:"IBM Plex Mono",monospace; font-weight:600;font-size:14px} .mini{border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 8px; width:82px;text-align:center;background:var(--paper)} .mini-lbl{font-size:11.5px;color:var(--ink-faint)} .kill{color:var(--flag);font-size:13px;margin-inline-start:auto;padding:6px} .sheet-bg{position:fixed;inset:0;z-index:50;background:rgba(36,30,34,.42); display:flex;align-items:flex-end;justify-content:center} @media(min-width:700px){.sheet-bg{align-items:center}} .sheet{background:var(--card);width:100%;max-width:560px;max-height:90vh;overflow-y:auto; border-radius:14px 14px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom))} @media(min-width:700px){.sheet{border-radius:14px}} .sheet h2{font-family:"Reem Kufi",serif;font-size:17px;font-weight:600;margin:0 0 4px} .sheet p.sub{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft)} .ok{text-align:center} .ok .mark{width:52px;height:52px;border-radius:50%;background:var(--leaf-tint);color:var(--leaf); display:grid;place-items:center;font-size:26px;margin:0 auto 12px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* [hidden] بتاعت المتصفح أضعف من قواعد الملف دا (زي .tr{display:grid}) فلازم تتكتب صريحة، وإلا العناصر المخفية تفضل بانة */ [hidden]{display:none!important} @media print{header,.tabs,.searchbar,.btn,.btn-ghost{display:none!important} body{background:#fff}.card{border:0;box-shadow:none}} /* ---------- الرسوم البيانية ---------- */ .ch-wrap{margin-top:10px} .ch-wrap svg{width:100%;height:auto;display:block;overflow:visible} .ch-donut{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px} .ch-donut svg{width:180px;height:180px;flex-shrink:0} .ch-legend{list-style:none;margin:0;padding:0;flex:1;min-width:210px} .ch-legend li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px; border-bottom:1px solid var(--rule)} .ch-legend li:last-child{border-bottom:0} .ch-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ch-val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:500} .ch-pct{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-faint); width:46px;text-align:end} .ch-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0} .ch-keys{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 0;padding:0; font-size:12.5px;color:var(--ink-soft)} .ch-keys li{display:flex;align-items:center;gap:6px} @media(max-width:600px){ .ch-donut{gap:10px} .ch-donut svg{width:150px;height:150px;margin:0 auto} .ch-legend{min-width:100%} } @media print{ .ch-wrap svg,.ch-donut svg{max-width:170mm} .ch-donut{page-break-inside:avoid} }