/* ============================================================ qeevs.css v2 — الأساس البصري الموحّد لكيفز (2026-09-09) المواصفة: أبيض/رمادي دافئ · نص أسود ناعم · الأزرق لون الفعل الوحيد · حدود رقيقة بدل الظلال · خط واحد · صدفة واحدة (قائمة جانبية + شريط علوي + شريط جوال) الاستعمال: ============================================================ */ /* الخطوط تُحمَّل من عبر favicon_tag() (preconnect + غير حاجبة) — لا @import هنا (PageSpeed: سلسلة حجب 3s على الجوال) */ /* ---------- 1. الرموز ---------- */ :root{ --bg:#f7f7f5; /* أرضية دافئة */ --panel:#ffffff; --panel-2:#f2f2ef; /* سطح ثانٍ: العنصر النشط، الشرائح */ --line:#e7e7e3; --line-2:#d9d9d4; /* حدود الحقول والأزرار */ --txt:#14171a; /* أسود ناعم */ --txt-2:#3d4349; --muted:#6f7680; --faint:#737b84; /* WCAG ≥4.5:1 على الأبيض */ --blue:#2f6bff; /* الفعل الوحيد */ --blue-hover:#2559e0; --blue-soft:#e8efff; --blue-txt:#1f4fd1; --up:#16a34a; --up-soft:#e6f6ec; --down:#dc2626; --down-soft:#fdeaea; --warn:#b45309; --warn-soft:#fff4e0; --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --r-sm:8px; --r-md:12px; --r-lg:16px; --shadow-pop:0 12px 40px rgba(20,23,26,.14), 0 1px 2px rgba(20,23,26,.06); --sidebar:256px; --topbar:56px; --content:1080px; --mobilebar:60px; /* أسماء متوارثة تبقى حتى تُنزع من الصفحات القديمة */ --bg-soft:var(--panel-2); --ink:var(--bg); --ink-2:var(--panel-2); --ink2:var(--panel); --panel2:var(--panel-2); --green:var(--blue); --green-dark:var(--blue-hover); --green-soft:var(--blue-soft); --gold:var(--blue); --gold-soft:var(--blue-hover); --gold2:var(--blue-hover); --txt-soft:var(--txt-2); --line-soft:var(--line); --purple:#6d5cff; --neutral:var(--blue); --shadow:none; --shadow-lg:var(--shadow-pop); --radius:var(--r-lg); } /* ---------- 2. القاعدة ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);font-size:14px;line-height:1.7;color:var(--txt);background:var(--bg)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3;letter-spacing:-.01em} h1{font-size:26px} h2{font-size:20px} h3{font-size:16px} h4{font-size:14px} p{margin:0} .num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0} .muted{color:var(--muted)} .faint{color:var(--faint)} .up{color:var(--up)} .down{color:var(--down)} :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .ic.sm{width:16px;height:16px} .ic.lg{width:22px;height:22px} /* ---------- 3. الصدفة ---------- */ .shell{min-height:100vh} .sidebar{position:fixed;top:0;inset-inline-start:0;width:var(--sidebar);height:100vh;background:var(--panel);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;z-index:30;overflow-y:auto} .sb-brand{display:flex;align-items:center;gap:10px;height:var(--topbar);padding:0 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:18px} .sb-brand .mark{width:30px;height:30px;flex-shrink:0} .sb-group{padding:14px 12px 4px} .sb-title{font-size:11px;font-weight:600;color:var(--faint);padding:0 10px 6px;letter-spacing:.02em} .sb-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);color:var(--txt-2);font-weight:500;transition:background .12s,color .12s} .sb-link:hover{background:var(--bg);color:var(--txt)} .sb-link.active{background:var(--panel-2);color:var(--txt);font-weight:600} .sb-link .ic{color:var(--muted)} .sb-link.active .ic{color:var(--txt)} .sb-link .count{margin-inline-start:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-family:var(--mono)} .sb-link .count.hot{background:var(--blue);color:#fff} .sb-link .tag{margin-inline-start:auto;font-size:11px;color:var(--faint);border:1px solid var(--line-2);border-radius:999px;padding:0 7px} .sb-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:10px} .sb-foot .avatar{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--txt-2);flex-shrink:0;font-size:13px} .sb-foot .who{min-width:0;flex:1} .sb-foot .who b{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sb-foot .who span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:end} .sb-foot .out{color:var(--muted);padding:6px;border-radius:var(--r-sm)} .sb-foot .out:hover{background:var(--bg);color:var(--txt)} .topbar{position:sticky;top:0;z-index:20;height:var(--topbar);background:rgba(247,247,245,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px} .topbar .crumb{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--txt)} .topbar .crumb .ic{color:var(--muted)} .topbar .search{margin:0 auto;width:min(420px,40vw);position:relative} .topbar .search input{width:100%;height:36px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);padding:0 36px 0 12px;font-size:13px} .topbar .search .ic{position:absolute;inset-inline-start:11px;top:9px;color:var(--faint);width:16px;height:16px} .topbar .search input{padding-inline-start:34px;padding-inline-end:12px} .topbar .acts{display:flex;align-items:center;gap:4px} .ibtn{width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;position:relative} .ibtn:hover{background:var(--panel);border-color:var(--line);color:var(--txt)} .ibtn .dot{position:absolute;top:8px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--blue);border:2px solid var(--bg)} .main{margin-inline-start:var(--sidebar);min-height:100vh;min-width:0} .content{max-width:var(--content);margin:0 auto;padding:24px 24px 48px} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px} .page-head p{color:var(--muted);margin-top:4px} .page-head .acts{display:flex;gap:8px} /* شريط الجوال + قائمة «المزيد» */ .mobilebar{display:none} .sheet-overlay,.sheet{display:none} @media(max-width:900px){ .sidebar{display:none} .main{margin-inline-start:0;padding-bottom:calc(var(--mobilebar) + 12px)} .topbar{padding:0 14px} .topbar .search{display:none} .content{padding:16px 14px 40px;overflow-x:hidden} body{overflow-x:hidden} /* الجداول تتمرّر داخل بطاقتها بدل أن تدفع الصفحة كلها جانبياً */ .card{overflow-x:auto} .table th,.table td{white-space:nowrap} .hide-sm{display:none!important} .mobilebar{display:flex;position:fixed;bottom:0;inset-inline:0;height:var(--mobilebar);background:var(--panel);border-top:1px solid var(--line);z-index:30;padding:0 6px env(safe-area-inset-bottom)} .mobilebar a,.mobilebar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer;border-radius:var(--r-sm);position:relative} .mobilebar .active{color:var(--txt)} .mobilebar .active .ic{color:var(--blue)} .mobilebar .ic{width:22px;height:22px} .mobilebar .badge{position:absolute;top:8px;inset-inline-start:calc(50% + 6px);min-width:16px;height:16px;line-height:16px;font-size:10px;font-weight:600;background:var(--blue);color:#fff;border-radius:999px;padding:0 4px;font-family:var(--mono);text-align:center} .sheet-overlay{display:block;position:fixed;inset:0;background:rgba(20,23,26,.35);z-index:40;opacity:0;visibility:hidden;transition:opacity .2s} .sheet-overlay.open{opacity:1;visibility:visible} .sheet{display:block;position:fixed;bottom:0;inset-inline:0;background:var(--panel);border-radius:18px 18px 0 0;z-index:50;padding:8px 12px calc(16px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s cubic-bezier(.4,0,.2,1);max-height:80vh;overflow-y:auto} .sheet.open{transform:translateY(0)} .sheet .grip{width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:6px auto 12px} .sheet .sb-group{padding:6px 0} } /* ---------- 4. الأزرار والحقول ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;font-size:14px;font-weight:600;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--txt);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;line-height:1} .btn:hover{background:var(--panel-2)} .btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)} .btn.dark{background:var(--txt);border-color:var(--txt);color:#fff} .btn.dark:hover{background:#000} .btn.ghost{border-color:transparent;background:transparent;color:var(--txt-2)} .btn.ghost:hover{background:var(--panel-2);color:var(--txt)} .btn.danger{color:var(--down)} .btn.danger:hover{background:var(--down-soft);border-color:#f3b5b2} .btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px} .btn.lg{height:46px;padding:0 22px;font-size:15px;border-radius:12px} .btn.block{display:flex;width:100%} .btn.pill{border-radius:999px} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .seg{display:inline-flex;background:var(--panel-2);border-radius:10px;padding:3px;gap:2px} .seg button,.seg a{height:30px;padding:0 12px;border:0;background:transparent;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer} .seg .on{background:var(--panel);color:var(--txt);font-weight:600;box-shadow:0 1px 2px rgba(20,23,26,.08)} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .field label{font-size:13px;font-weight:600;color:var(--txt-2)} .input{width:100%;height:42px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);font-size:14px;transition:border-color .12s,box-shadow .12s} textarea.input{height:auto;padding:10px 14px;min-height:96px;resize:vertical} .input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)} .input::placeholder{color:#8a919a} .help{font-size:12px;color:var(--muted)} .error{font-size:12px;color:var(--down)} .switch{position:relative;width:40px;height:22px;border-radius:999px;background:var(--line-2);border:0;cursor:pointer;transition:background .15s;flex-shrink:0} .switch::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)} .switch.on{background:var(--blue)} .switch.on::after{transform:translateX(18px)} html[dir="rtl"] .switch.on::after{transform:translateX(-18px)} /* ---------- 5. السطوح ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px} .card.tight{padding:14px 16px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .card-head h3{font-size:15px} .card-head .more{font-size:13px;color:var(--blue-txt);font-weight:500} .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px} .stat .k{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)} .stat .k .ic{color:var(--faint)} .stat .v{font-family:var(--mono);font-size:28px;font-weight:600;line-height:1.1;margin-top:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .stat .v small{font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted)} .stat .delta{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--txt-2)} .stat .delta.up{background:var(--up-soft);color:var(--up)} .stat .delta.down{background:var(--down-soft);color:var(--down)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid-3-2{display:grid;grid-template-columns:3fr 2fr;gap:14px} @media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.grid-4{grid-template-columns:1fr 1fr}.grid-2,.grid-3-2{grid-template-columns:1fr}.stat{padding:14px 16px}.stat .v{font-size:24px}} @media(max-width:420px){.grid-4{grid-template-columns:1fr}} .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel-2);color:var(--txt-2)} .chip.blue{background:var(--blue-soft);color:var(--blue-txt)} .chip.up{background:var(--up-soft);color:var(--up)} .chip.down{background:var(--down-soft);color:var(--down)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .notice{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel);font-size:13px;line-height:1.6} .notice .ic{margin-top:2px;color:var(--muted)} .notice.info{border-color:#c9d8ff;background:var(--blue-soft);color:var(--blue-txt)} .notice.info .ic{color:var(--blue)} .notice.warn{border-color:#f0d3a3;background:var(--warn-soft);color:var(--warn)} .notice.warn .ic{color:var(--warn)} .notice.bad{border-color:#f3b5b2;background:var(--down-soft);color:#991b1b} .notice.bad .ic{color:var(--down)} .empty{text-align:center;padding:40px 20px;color:var(--muted)} .empty .ic{width:36px;height:36px;margin:0 auto 10px;color:var(--faint)} .empty b{display:block;color:var(--txt);font-weight:600;margin-bottom:4px} /* الجداول والقوائم */ .table{width:100%;border-collapse:collapse;font-size:13px} .table th{text-align:start;font-weight:500;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap} .table td{padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .table tr:last-child td{border-bottom:0} .table tbody tr:hover td{background:var(--bg)} .table .num{text-align:start} .card > .table{margin:0 -20px;width:calc(100% + 40px)} .card > .table th:first-child,.card > .table td:first-child{padding-inline-start:20px} .card > .table th:last-child,.card > .table td:last-child{padding-inline-end:20px} .list{display:flex;flex-direction:column} .list .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .list .row:last-child{border-bottom:0} .list .row .ico{width:36px;height:36px;border-radius:10px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--txt-2);flex-shrink:0} .list .row .t{flex:1;min-width:0} .list .row .t b{display:block;font-weight:600;font-size:13px} .list .row .t span{font-size:12px;color:var(--muted)} .list .row .r{text-align:end;font-family:var(--mono);font-size:13px;font-weight:600} .list .row .r span{display:block;font-family:var(--font);font-weight:400;font-size:11px;color:var(--faint)} .bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden} .bar i{display:block;height:100%;background:var(--blue);border-radius:3px} /* النوافذ المنبثقة */ .modal-bg{position:fixed;inset:0;background:rgba(20,23,26,.4);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .15s} .modal-bg.open{opacity:1;visibility:visible} .modal{background:var(--panel);border-radius:var(--r-lg);width:100%;max-width:440px;box-shadow:var(--shadow-pop);padding:24px;position:relative} .modal .close{position:absolute;top:12px;inset-inline-start:12px} @media(max-width:600px){.modal-bg{align-items:flex-end;padding:0}.modal{border-radius:18px 18px 0 0;max-width:none;padding-bottom:calc(24px + env(safe-area-inset-bottom))}} /* ---------- 6. الفوتر الخفيف ---------- */ .footer-lite{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:12px;color:var(--faint);padding:20px} .footer-lite a:hover{color:var(--txt)}