/* ============ المدرسة الذكية — نظام التصميم ============ */ :root{ /* ورق السجل وحبر القلم: أزرق للحاضر، أحمر التصحيح للغائب، قلم التظليل للمتأخر، رصاص رمادي لمن له عذر */ --bg:#F5F6FA; --surface:#FFFFFF; --surface-2:#EEF0F6; --border:#DDE1EC; --text:#141A33; --muted:#5E6584; --faint:#7D849E; --ink:#1F3A93; --ink-deep:#142766; --ink-soft:#E6EBFA; --primary:var(--ink); --primary-2:var(--ink-deep); --primary-soft:var(--ink-soft); --green:#12805C; --green-soft:#E3F3EC; --red:#D0243A; --red-soft:#FCE8EA; --amber:#E8B400; --amber-soft:#FFF4C2; --amber-text:#7A5C00; --blue:#8A8D99; --blue-soft:#EDEEF1; --pink:#B83280; --pink-soft:#F9E6F1; --margin:#E8505B; --shadow:0 1px 2px rgba(20,26,51,.05),0 4px 16px rgba(20,26,51,.05); --shadow-lg:0 24px 60px rgba(20,26,51,.22); --radius:14px; --radius-sm:8px; --grad:var(--ink); --sidebar:var(--surface); --sidebar-text:var(--text); --display:"Almarai","IBM Plex Sans Arabic",system-ui,sans-serif; } /* الوضع الليلي: سبورة خضراء داكنة وطباشير */ [data-theme="dark"]{ --bg:#122019; --surface:#18291F; --surface-2:#1E3227; --border:#2C4436; --text:#E9F0EA; --muted:#A3B5A8; --faint:#6B8273; --ink:#9DB6FF; --ink-deep:#C4D3FF; --ink-soft:#22364A; --green:#5FD3A0; --green-soft:#173A2B; --red:#FF7A86; --red-soft:#3D2226; --amber:#FFD54A; --amber-soft:#3A3315; --amber-text:#FFD54A; --blue:#C8C6BE; --blue-soft:#2B3530; --pink:#F48FC4; --pink-soft:#3A2233; --margin:#C9545E; --shadow:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.2); } *{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:"Almarai","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:var(--primary);text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800} .muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13px} .num{font-variant-numeric:tabular-nums} :focus-visible{outline:3px solid color-mix(in srgb,var(--ink) 55%,transparent);outline-offset:2px;border-radius:6px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ============ Layout ============ */ .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh} /* الشريط الجانبي: صفحة دفتر بخط الهامش الأحمر */ .sidebar{background:var(--surface);color:var(--text);position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 14px 20px 20px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--margin);box-shadow:-4px 0 0 -3px var(--margin)} .brand{display:flex;align-items:center;gap:12px;padding:4px 8px 20px} .brand-logo{width:42px;height:42px;flex:none;border-radius:11px;background:#1F6FA0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:"El Messiri","Almarai",sans-serif;font-weight:700;line-height:1.02;-webkit-print-color-adjust:exact;print-color-adjust:exact} .brand-logo em{font-style:normal;display:block;font-size:10.5px;white-space:nowrap} .brand-logo em+em{color:#F0D48A;font-size:13.5px} .brand-logo::after{content:"";width:9px;height:2px;border-radius:2px;background:#F0D48A;margin-top:2px} .brand-logo.big{width:60px;height:60px;border-radius:15px;margin-bottom:8px} .brand-logo.big em{font-size:14.5px} .brand-logo.big em+em{font-size:19px} .brand-logo.big::after{width:13px;height:3px;margin-top:3px} .brand b{font-size:18px;display:block;font-weight:800;letter-spacing:-.2px} .brand span{font-size:12px;color:var(--muted)} .nav-group{font-size:12px;color:var(--faint);padding:16px 12px 4px;font-weight:700} .nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--muted);font-size:14px} .nav a:hover{background:var(--surface-2);color:var(--text)} .nav a.active{background:var(--ink-soft);color:var(--ink);font-weight:700} .nav a .ic{width:20px;text-align:center;font-size:15px} .nav a .tag{margin-inline-start:auto;font-size:10.5px;color:var(--ink);border:1px solid currentColor;padding:0 7px;border-radius:20px;font-weight:700} .main{min-width:0;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px;padding:14px 32px;border-bottom:1px solid var(--border)} .search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;cursor:text;color:var(--muted)} .search kbd{margin-inline-start:auto;font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-family:inherit} .top-actions{display:flex;gap:8px;align-items:center;margin-inline-start:auto} .icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;font-size:16px;position:relative} .icon-btn:hover{border-color:var(--ink)} .icon-btn .dot{position:absolute;top:8px;left:9px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--surface)} .user-chip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:5px 12px 5px 6px;cursor:pointer} .avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0} .content{padding:28px 32px 64px;max-width:1440px;width:100%} .menu-btn{display:none} /* ============ Page header ============ */ .page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap} .page-head h1{font-family:var(--display);font-size:28px;font-weight:700} .page-head p{margin:4px 0 0;color:var(--muted)} .page-head .actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap} /* ============ Components ============ */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px} .card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .card-head h3{font-size:16px;font-weight:700} .card-head .actions{margin-inline-start:auto;display:flex;gap:6px} .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .span2{grid-column:span 2} /* عناصر الشبكة تنكمش مع الشاشة، فالجدول العريض يمرَّر داخل حاويته بدل أن يدفع الصفحة */ .g2>*,.g3>*,.g4>*{min-width:0} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .spacer{flex:1} .stack{display:flex;flex-direction:column;gap:10px} .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);padding:9px 16px;border-radius:11px;cursor:pointer;font-weight:600;font-size:14px;transition:.15s;white-space:nowrap} .btn:hover{border-color:var(--primary);color:var(--primary)} .btn.primary{background:var(--ink);color:#fff;border:1px solid var(--ink)} [data-theme="dark"] .btn.primary{color:#122019} .btn.primary:hover{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff} [data-theme="dark"] .btn.primary:hover{color:#122019} .btn.green{background:var(--green);color:#fff;border:0} .btn.red{background:var(--red);color:#fff;border:0} .btn.ghost{background:transparent;border-color:transparent} .btn.sm{padding:5px 11px;font-size:13px;border-radius:9px} .btn.lg{padding:13px 24px;font-size:16px} .btn:disabled{opacity:.5;cursor:not-allowed} .input,select.input,textarea.input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 13px;outline:none;transition:.15s} .input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)} label.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:500} textarea.input{min-height:90px;resize:vertical} .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap} #syncStatus[hidden]{display:none} .b-green{background:var(--green-soft);color:var(--green)} .b-red{background:var(--red-soft);color:var(--red)} .b-amber{background:var(--amber-soft);color:var(--amber-text)} .b-ink{background:var(--ink-soft);color:var(--ink)} .b-blue{background:var(--blue-soft);color:var(--blue)} .b-purple{background:var(--primary-soft);color:var(--primary)} .b-pink{background:var(--pink-soft);color:var(--pink)} .b-gray{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)} /* stat */ .stat{position:relative;overflow:hidden} .stat .lbl{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px} .stat .val{font-size:30px;font-weight:800;margin-top:6px} .stat .sub{font-size:12px;margin-top:2px} /* أيقونات الإحصاءات: النقر يعرض البيانات */ .stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .stat-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;font:inherit;color:inherit;cursor:pointer;padding:16px;transition:border-color .15s,transform .15s,box-shadow .15s} .stat-tile:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,26,51,.08)} .stat-tile:focus-visible{outline:3px solid var(--ink-soft);outline-offset:2px} .stat-tile .st-ic{font-size:24px;line-height:1;margin-bottom:6px} .stat-tile .val{font-size:26px;margin-top:2px} .up{color:var(--green)} /* table */ .table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--border)} table.t{width:100%;border-collapse:collapse;font-size:14px} .t th{background:var(--surface-2);text-align:right;font-weight:600;color:var(--muted);font-size:12.5px;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0} .t td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle} .t tr:last-child td{border-bottom:0} .t tbody tr:hover{background:var(--surface-2)} .person{display:flex;align-items:center;gap:10px} .person .avatar{width:34px;height:34px} /* tabs / segmented */ .tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:4px;gap:2px;flex-wrap:wrap} .tabs button{white-space:nowrap;border:0;background:transparent;padding:7px 14px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--muted);font-size:13.5px} .tabs button.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)} /* attendance roster */ .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .st-card{background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;transition:.15s;position:relative} .st-card:hover{transform:translateY(-1px)} .st-card .nm{font-weight:600;font-size:14px;line-height:1.35} .st-card .state{margin-inline-start:auto;font-size:11px} .st-card.P{border-color:color-mix(in srgb,var(--green) 55%,transparent);background:var(--green-soft)} .st-card.A{border-color:color-mix(in srgb,var(--red) 55%,transparent);background:var(--red-soft)} .st-card.L{border-color:color-mix(in srgb,var(--amber) 55%,transparent);background:var(--amber-soft)} .st-card.E{border-color:color-mix(in srgb,var(--blue) 55%,transparent);background:var(--blue-soft)} .st-card .risk{position:absolute;top:-7px;left:10px;font-size:10px} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px} /* progress */ .bar{height:8px;background:var(--surface-2);border-radius:20px;overflow:hidden} .bar>span{display:block;height:100%;border-radius:20px;background:var(--grad)} /* hero */ .hero{background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px 28px;position:relative;overflow:hidden} [data-theme="dark"] .hero{background:var(--ink-soft);color:var(--text)} .hero h2{font-family:var(--display);font-size:26px;font-weight:700} .hero p{opacity:.9;margin:6px 0 0} .hero .btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(4px)} .hero .btn:hover{background:rgba(255,255,255,.26);color:#fff} .hero-stats{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap;position:relative;z-index:1} .hero-stats b{font-family:var(--display);font-size:28px;display:block;font-weight:700} .hero-stats span{font-size:12.5px;opacity:.85} /* lists */ .list{display:flex;flex-direction:column} .list-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border)} .list-item:last-child{border-bottom:0} .list-item .grow{flex:1;min-width:0} .list-item .t1{font-weight:600;font-size:14px} .list-item .t2{font-size:12.5px;color:var(--muted)} /* modal */ .overlay{position:fixed;inset:0;background:rgba(10,12,25,.55);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .15s} .modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:min(640px,100%);max-height:90vh;overflow:auto;animation:pop .18s} .modal.wide{width:min(980px,100%)} .modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1} .modal-head h3{font-size:17px} .modal-body{padding:22px} .modal-foot{display:flex;gap:8px;justify-content:flex-start;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface-2)} @keyframes fade{from{opacity:0}} @keyframes pop{from{transform:scale(.96) translateY(8px);opacity:0}} /* toast */ .toasts{position:fixed;bottom:22px;left:22px;z-index:200;display:flex;flex-direction:column;gap:8px} .toast{background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow-lg);font-weight:500;animation:pop .2s;display:flex;gap:8px;align-items:center;max-width:380px} /* command palette */ .palette{width:min(680px,100%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;align-self:start;margin-top:10vh} .palette input{width:100%;border:0;outline:0;padding:20px 22px;font-size:17px;background:transparent;border-bottom:1px solid var(--border)} .palette .res{max-height:55vh;overflow:auto;padding:8px} .palette .it{padding:10px 14px;border-radius:10px;display:flex;gap:10px;align-items:center;cursor:pointer} .palette .it.sel,.palette .it:hover{background:var(--primary-soft)} .ai-answer{padding:16px 18px;margin:8px;border-radius:14px;background:linear-gradient(135deg,var(--primary-soft),var(--pink-soft))} /* chat */ .chat{display:flex;flex-direction:column;gap:12px;height:56vh;overflow:auto;padding:6px} .msg{max-width:78%;padding:12px 16px;border-radius:16px;white-space:pre-wrap} .msg.me{align-self:flex-start;background:var(--grad);color:#fff;border-bottom-right-radius:4px} .msg.bot{align-self:flex-end;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:6px 14px;cursor:pointer;font-size:13px} .chip:hover{border-color:var(--primary);color:var(--primary)} /* heatmap */ .heat{display:grid;gap:4px} .heat .cell{aspect-ratio:1;border-radius:5px;min-width:12px} /* pickup screen */ .pickup-screen{position:fixed;inset:0;z-index:150;background:radial-gradient(circle at 20% 0%,#312e81,#0b0d18 70%);color:#fff;display:flex;flex-direction:column;padding:30px} .pickup-screen .now{flex:1;display:grid;place-items:center;text-align:center} .pickup-screen .big{font-size:clamp(40px,7vw,96px);font-weight:800;line-height:1.2} .pickup-screen .queue{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .pickup-screen .queue div{background:rgba(255,255,255,.08);padding:12px 20px;border-radius:14px;font-size:20px} .pulse{animation:pulse 1.6s infinite} @keyframes pulse{50%{transform:scale(1.04);text-shadow:0 0 40px rgba(167,139,250,.8)}} /* id card */ .idcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .idcard{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);break-inside:avoid} .idcard .top{background:var(--grad);color:#fff;padding:10px 14px;display:flex;justify-content:space-between;font-size:13px} .idcard .body{padding:12px 14px;display:flex;gap:12px;align-items:center} .idcard svg{background:#fff;border-radius:6px} /* empty */ .empty{text-align:center;padding:40px 20px;color:var(--muted)} .empty .e-ic{font-size:44px;margin-bottom:8px} /* ============ شاشة الدخول: ورقة سجل تُحضَّر بالحبر ============ */ .login{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr;background:var(--bg)} .login-form{display:flex;align-items:center;justify-content:center;padding:48px 32px} .login-form .inner{width:min(420px,100%)} .login h1{font-family:var(--display);font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.3;margin:28px 0 12px;color:var(--ink-deep)} [data-theme="dark"] .login h1{color:var(--text)} .login .lead{font-size:16.5px;font-weight:700;color:var(--muted);max-width:40ch;margin:0 0 28px} .role-label{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px} .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px} .role{border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;background:var(--surface);display:flex;gap:10px;align-items:center;text-align:start} .role:hover{border-color:var(--ink)} .role.on{border-color:var(--ink);background:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--ink)} .role .r-ic{font-size:20px} .role b{font-size:14px} .login .enter{width:100%;justify-content:center;padding:13px} .login .note{font-size:15px;font-weight:600;color:var(--text);margin-top:16px} /* سطر اسم المستخدم: العنوان يمينًا ورابط المزايا والأسعار في أقصى اليسار */ .login .lbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .login .lbl-link{font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .login-art{background:var(--surface-2);display:flex;align-items:center;justify-content:center;padding:48px 40px;border-right:1px solid var(--border)} .sheet{width:min(520px,100%);border-radius:6px;box-shadow:var(--shadow-lg);padding:26px 0 18px;position:relative; background:var(--surface) repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--border) 47px,var(--border) 48px) 0 74px} .sheet::before{content:"";position:absolute;top:0;bottom:0;right:56px;border-right:1px solid var(--margin);box-shadow:3px 0 0 -2px var(--margin)} .sheet-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 76px 12px 24px;height:48px} .sheet-head b{font-family:var(--display);font-size:20px;font-weight:700} .sheet-head span{font-size:13px;color:var(--muted)} .sheet-row{display:flex;align-items:center;height:48px;padding:0 76px 0 24px;position:relative;font-size:15.5px} .sheet-row .no{position:absolute;right:20px;width:24px;text-align:center;color:var(--faint);font-size:13px} .sheet-row .mk{margin-inline-start:auto;width:40px;height:30px;overflow:visible} .sheet-row .mk path,.sheet-row .mk ellipse{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:ink .45s ease-out forwards} .sheet-row .hl{position:absolute;top:13px;bottom:13px;right:72px;width:44%;background:var(--amber);opacity:0;border-radius:3px;mix-blend-mode:multiply;animation:hl .4s ease-out forwards} [data-theme="dark"] .sheet-row .hl{mix-blend-mode:normal} @keyframes ink{to{stroke-dashoffset:0}} @keyframes hl{to{opacity:.4}} /* ============ لوحة القيادة: خريطة حضور المدرسة ============ */ .today{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px;overflow:hidden} .classes-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px} .cls-col{border:0;background:none;padding:8px;border-radius:10px;cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:8px} .cls-col:hover{background:var(--surface-2)} .cls-col .dots{display:grid;grid-template-columns:repeat(6,1fr);gap:4px} .cls-col .d{aspect-ratio:1;border-radius:50%;background:var(--ink)} .cls-col .d.A{background:var(--red)} .cls-col .d.L{background:var(--amber)} .cls-col .d.E{background:var(--blue)} .cls-col .d.none{background:none;box-shadow:inset 0 0 0 1.5px var(--faint)} .cls-col .nm{font-size:13px;font-weight:700;line-height:1.3} .cls-col .rt{font-size:12px;color:var(--muted)} .today-side{border-right:1px solid var(--border);padding:22px 24px;display:flex;flex-direction:column;gap:14px;background:var(--surface-2)} .today-date .hj{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.25;color:var(--ink-deep)} [data-theme="dark"] .today-date .hj{color:var(--text)} .today-date .gr{color:var(--muted);font-size:13.5px} .tally{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .tally li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:14.5px} .tally li:last-child{border-bottom:0} .tally li b{margin-inline-start:auto;font-size:18px;font-variant-numeric:tabular-nums} .tally .sw{width:12px;height:12px;border-radius:50%;flex-shrink:0} .today-side .btn{justify-content:center} .panel h3{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px} /* ============ سجل التحضير ============ */ .register{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .reg-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:56px;border-bottom:1px solid var(--border)} .reg-row:last-child{border-bottom:0} .reg-row .no{text-align:center;color:var(--faint);font-size:13px;align-self:stretch;display:grid;place-items:center;border-left:1px solid color-mix(in srgb,var(--margin) 60%,transparent)} .reg-row .who{padding:8px 14px;min-width:0;cursor:pointer} .reg-row .who b{font-size:15px;font-weight:700} .reg-row .who span{font-size:12.5px;color:var(--muted);display:block} /* الحالة تغيّر لون الاسم فقط */ .reg-row.P .who b{color:var(--ink)} .reg-row.A .who b{color:var(--red)} .reg-row.L .who b{color:color-mix(in srgb,var(--amber) 78%,var(--text,#141A33))} .reg-row.E .who b{color:var(--blue)} /* أيقونة ملف الطالب بجانب اسمه */ .reg-row .file-btn{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:4px 6px;margin-inline-start:4px;border-radius:8px;vertical-align:middle;opacity:.75} .reg-row .file-btn:hover,.reg-row .file-btn:focus-visible{opacity:1;background:var(--surface-2)} .reg-row .flag{font-size:11px;font-weight:700;color:var(--red);border:1px solid currentColor;border-radius:20px;padding:0 6px;margin-inline-start:6px} .marks{display:flex;gap:4px;padding:0 12px} .mark{width:42px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)} .mark:hover{border-color:var(--muted);color:var(--text)} .mark.on.P{background:var(--ink);border-color:var(--ink);color:#fff} .mark.on.A{background:var(--red);border-color:var(--red);color:#fff} .mark.on.L{background:var(--amber);border-color:var(--amber);color:#3d2e00} .mark.on.E{background:var(--blue);border-color:var(--blue);color:#fff} [data-theme="dark"] .mark.on{color:#122019} .reg-tab{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13.5px;display:flex;align-items:center;gap:8px} .reg-tab .pg{width:28px;height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden;display:inline-block} .reg-tab .pg i{display:block;height:100%;background:var(--ink)} .reg-tab.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--ink-soft)} .savebar{position:sticky;bottom:16px;z-index:15;margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px 12px 10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .savebar .cnt{display:flex;gap:14px;font-size:14px;flex-wrap:wrap} .savebar .cnt span{display:flex;align-items:center;gap:6px} .savebar .cnt i{width:10px;height:10px;border-radius:50%} .savebar .actions{margin-inline-start:auto;display:flex;gap:8px} /* switch */ .switch{position:relative;width:44px;height:24px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .switch span{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s} .switch span::before{content:"";position:absolute;width:18px;height:18px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s} .switch input:checked+span{background:var(--primary)} .switch input:checked+span::before{transform:translateX(-20px)} /* kanban-ish feature tiles */ .tile{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:.15s} .tile:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow)} .tile .t-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex-shrink:0} .tile b{display:block} .tile span{font-size:13px;color:var(--muted)} .scan-box{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3} .scan-box video{width:100%;height:100%;object-fit:cover} .scan-box .frame{position:absolute;inset:20% 12%;border:3px solid #a78bfa;border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35)} .letter{background:#fff;color:#111;padding:40px 48px;border-radius:8px;border:1px solid #ddd;font-size:15px;line-height:2} .letter h2{text-align:center;margin:14px 0 20px;font-size:20px} .letter .hdr{display:flex;justify-content:space-between;font-size:13px;border-bottom:2px solid #111;padding-bottom:10px} /* نتائج بحث المساعد الذكي داخل بطاقة الإجابة */ .ai-hits{display:grid;gap:6px} .ai-hits a{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;text-decoration:none;font-weight:600;font-size:13.5px} .ai-hits a:hover{border-color:var(--ink);background:var(--ink-soft)} .ai-hits a .muted{margin-inline-start:auto} /* وسم «متزامن» الأخضر في القائمة (حضوري) */ .nav a .tag.tag-ok{background:var(--green-soft,#e4f6ec);color:var(--green,#0f7a4d);border-color:transparent} /* أيقونات طرق الدفع داخل صفحة الاشتراك: أصغر قليلًا من الصفحة التعريفية */ .pay-sm{margin:0 0 10px} .pay-sm ul{gap:8px} .pay-sm li{transform:scale(.92);transform-origin:right center} /* القائمة الجانبية: بطاقة خطوات تجهيز المدرسة (للمدير والوكلاء حتى تكتمل) */ .sb-setup{display:grid;gap:6px;width:100%;text-align:start;background:var(--ink-soft);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:inherit;font:inherit;border-radius:14px;padding:10px 12px;margin-bottom:10px;cursor:pointer} .sb-setup:hover{border-color:var(--ink)} .sb-setup b{font-size:13.5px} .sb-setup .sb-setup-n{font-size:12px;color:var(--muted)} .sb-setup .bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 16%,transparent);overflow:hidden;display:block} .sb-setup .bar i{display:block;height:100%;background:var(--ink);border-radius:999px} /* شعار القائمة واسم المدرسة: زر يعيد للوحة القيادة */ #brandHome{cursor:pointer;border-radius:14px} #brandHome:hover{background:var(--surface-2)} #brandHome:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* لوحة المدير: أقسام المدرسة — بطاقات بتصميم إحصاءات الغياب، والنقر يفتح صفحات القسم منسدلة */ .desk{margin-top:22px} .desk .stat-tile{cursor:pointer} .desk .stat-tile[aria-expanded="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .desk-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:12px} .desk-panel[hidden]{display:none} .desk-panel a{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:inherit;text-decoration:none;font-weight:600;font-size:14px} .desk-panel a:hover{border-color:var(--ink);background:var(--ink-soft)} .desk-panel a .ic{font-size:17px} .desk-panel a .tag,.desk-panel a .lk{margin-inline-start:auto} @media (max-width:560px){.desk-panel{grid-template-columns:1fr}} /* النسخة التجريبية: مبدّلا الدور والباقة في الشريط العلوي */ .demo-pick{flex:0 0 auto;width:auto;min-width:140px;max-width:186px;padding-inline:10px;font-weight:700} @media (max-width:1200px){.demo-pick{min-width:132px;max-width:170px;font-size:13px;padding-inline:9px}} @media (max-width:640px){body:has(.demo-pick) .top-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:6px} .demo-pick{flex:1 1 44%;min-width:132px;max-width:none;font-size:12.5px}} /* الشاشات الضيقة: الشريط العلوي يلتف سطرين بدل أن يفيض بسبب مبدّلي التجربة */ @media (max-width:1200px){body:has(.demo-pick) .topbar{flex-wrap:wrap}} /* الجوال: الشريط الملتف أسطرًا لا يبقى ثابتًا فوق المحتوى فيغطي ثلث الشاشة */ @media (max-width:640px){body:has(.demo-pick) .topbar{position:relative}} /* حاجب القائمة وزر إغلاقها يظهران على الجوال فقط */ .sb-close,.sb-scrim{display:none} /* responsive */ @media (max-width:1200px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:960px){ .app{grid-template-columns:1fr} html,body{overflow-x:clip} .sidebar{position:fixed;inset:0 0 0 auto;width:280px;z-index:120;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s} .sidebar.open{transform:none;visibility:visible;box-shadow:var(--shadow-lg)} /* حاجب يُغلق القائمة بالنقر خارجها، وزر ✕ داخلها، لأن القائمة المفتوحة تغطي زر ☰ */ .sb-scrim{display:block;position:fixed;inset:0;z-index:110;background:rgba(10,12,25,.42);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s} .sidebar.open ~ .sb-scrim{opacity:1;visibility:visible} .sb-close{display:grid;place-items:center;position:absolute;top:12px;inset-inline-start:10px;width:34px;height:34px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:inherit;font-size:15px;line-height:1;cursor:pointer;z-index:2} .sidebar{padding-top:20px} .search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1} .search{min-width:0} .menu-btn{display:grid} .g2,.g3{grid-template-columns:1fr} .span2{grid-column:auto} .login{grid-template-columns:1fr} .login-art{padding:28px 16px;border-right:0;border-top:1px solid var(--border)} .today{grid-template-columns:1fr} .today-side{border-right:0;border-top:1px solid var(--border)} .reg-row{grid-template-columns:36px minmax(0,1fr)} .marks{grid-column:2;padding:0 14px 10px} .savebar .actions{margin-inline-start:0;width:100%} .savebar .actions .btn{flex:1;justify-content:center} .content{padding:18px 16px 60px} .topbar{padding:12px 16px} .user-chip .who{display:none} } @media (max-width:560px){.g4{grid-template-columns:1fr 1fr}.search kbd{display:none} /* أيقونات الإحصاءات: عمودان مضغوطان على الجوال */ .stat-tiles{grid-template-columns:1fr 1fr;gap:8px} .stat-tile{padding:11px 12px} .stat-tile .st-ic{font-size:19px;margin-bottom:2px} .stat-tile .lbl{font-size:12px} .stat-tile .val{font-size:21px} .stat-tile .small{font-size:11px} } @media print{ .sidebar,.topbar,.page-head .actions,.toasts{display:none!important} .app{display:block} .content{padding:0} body{background:#fff} .card{box-shadow:none;border:0} .overlay{position:static;background:none;backdrop-filter:none;padding:0} .modal{box-shadow:none;max-height:none;width:100%} .modal-head,.modal-foot{display:none} } /* ============ الجدول المدرسي ============ */ .tt-grid{width:100%;border-collapse:separate;border-spacing:4px;font-size:13px;min-width:720px} .tt-grid th{font-weight:700;color:var(--muted);font-size:12.5px;padding:6px 8px;text-align:center;white-space:nowrap} .tt-grid tbody th{text-align:start} .tt-grid td{border-radius:8px;padding:8px 6px;text-align:center;vertical-align:middle;min-width:84px;height:52px;border:1px solid var(--border)} .tt-grid td b{display:block;font-size:13px;line-height:1.3} .tt-grid td span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px} .tt-grid td.free{background:var(--surface-2);border-style:dashed} @media print{.tt-grid{min-width:0}.tt-grid td{border:1px solid #999}} /* اختيار المرحلة في المجمع التعليمي */ .stage-pick { width: auto; min-width: 150px; padding: 7px 12px; font-weight: 600; } @media (max-width: 640px) { .stage-pick { min-width: 0; max-width: 130px; font-size: 12.5px; } } /* ===== لوحة المعلم ===== */ @keyframes lhPulse { 50% { box-shadow: 0 0 0 8px rgba(255,255,255,.18); } } /* ===== تحضير الحصص ===== */ .att-list { display: flex; flex-direction: column; gap: 8px; } .att-row.focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft, #e8ecfa); } .att-cnt { display: inline-flex; gap: 4px; } .att-cnt.pos > .btn:first-child b { color: var(--green); } .att-cnt.neg > .btn:first-child b { color: var(--red); } .att-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .att-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer; } .att-seg button + button { border-inline-start: 1px solid var(--border); } .att-seg button.on { font-weight: 700; } .att-out { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-text); font-size: 13px; } /* لوحة المعلم: البحث في الأعلى مكرر مع المساعد الذكي أسفله */ body[data-role="teacher"][data-page="dashboard"] #openPalette { visibility: hidden; } /* ---------- بطاقات حصص اليوم (لوحة المعلم وتحضير الحصص) ---------- */ .lsn-card { margin-bottom: 16px; } .lsn-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .lsn { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 12px 14px 14px; text-align: start; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; } .lsn::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--ink); opacity: .25; } .lsn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .lsn-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; } .lsn-no { font-size: 12px; color: var(--muted); } .lsn-no b { font-size: 20px; color: var(--ink); margin-inline-start: 2px; } .lsn-st { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .lsn-cls { font-size: 16px; line-height: 1.4; } .lsn-sub { font-size: 13px; color: var(--ink); font-weight: 700; } .lsn-time { font-size: 12px; color: var(--muted); } .lsn-prog { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .lsn-prog i { display: block; height: 100%; background: var(--green); border-radius: 4px; } .lsn.now { border-color: var(--green); } .lsn.now::before { background: var(--green); opacity: 1; } .lsn.now .lsn-st { background: var(--green); color: #fff; } .lsn.past { background: var(--surface-2); } .lsn.past .lsn-cls, .lsn.past .lsn-no b { opacity: .6; } .lsn.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); } .lsn.on::before { opacity: 1; } /* ---------- مهامي اليوم ---------- */ .sec-t { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 0 0 10px; } .my-tasks { margin-bottom: 18px; } .mt-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .mt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: start; } .mt-go { cursor: pointer; } .mt-go:hover { border-color: var(--ink); } .mt-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ink-soft); font-size: 20px; } .mt-n { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; } .mt-none { padding: 12px 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); background: var(--surface); } /* ---------- فصولي اليوم ---------- */ .cls-card { margin-bottom: 16px; } .cls-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 14px; } .cls-kpis > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .cls-kpis b { display: block; font-size: 22px; line-height: 1.2; } .cls-kpis span { font-size: 12px; color: var(--muted); } .cls-kpis .k-g b { color: var(--green); } .cls-kpis .k-r b { color: var(--red); } .cls-kpis .k-b b { color: var(--muted); } .cls-kpis .k-a b { color: var(--ink); } .cls-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .cls-stat { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: start; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; } .cls-stat:hover { border-color: var(--ink); box-shadow: var(--shadow); } .cs-ring { --p: 0; width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--surface-2) 0); } .cs-ring b { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 14px; } .cs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cs-bar { display: flex; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .cs-bar i { display: block; height: 100%; } .cs-bar .g { background: var(--green); } .cs-bar .r { background: var(--red); } .cs-bar .b { background: var(--blue); } .cs-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; } .cs-leg .g { color: var(--green); } .cs-leg .r { color: var(--red); } .cs-leg .b { color: var(--muted); } .cs-leg .a { color: var(--ink); } /* ---------- صف الطالب في تحضير الحصص: لونه حسب حالته ---------- */ .att-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-inline-start: 4px solid var(--green); border-radius: 14px; background: var(--surface); } .att-row.st-A { border-inline-start-color: var(--red); background: color-mix(in srgb, var(--red-soft) 55%, var(--surface)); } .att-row.st-L { border-inline-start-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 45%, var(--surface)); } .att-row.st-S { border-inline-start-color: var(--ink); background: color-mix(in srgb, var(--ink-soft) 55%, var(--surface)); } .att-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .att-no { width: 22px; } .att-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; } .att-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-inline-start: 32px; } .att-seg { background: var(--surface); } @media (max-width: 560px) { .att-name { min-width: 100%; } .att-acts { padding-inline-start: 0; } .att-seg { width: 100%; } .att-seg button { flex: 1; } } /* ---------- سجل الدرجات ---------- */ .gb-table th small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; } .gb-table td { vertical-align: middle; } .gb-in { width: 76px; padding: 6px 8px; text-align: center; } .gb-table tr.focus td { background: var(--ink-soft); } .gb-start { padding-bottom: 20px; } .mark.wide{width:auto;min-width:56px;padding:0 10px;font-size:13px} .att-seg button.on.b-green { background: var(--green); color: #fff; } .att-seg button.on.b-red { background: var(--red); color: #fff; } .att-seg button.on.b-amber { background: var(--amber); color: #3d2e00; } .att-seg button.on.b-ink { background: var(--ink); color: #fff; } [data-theme="dark"] .att-seg button.on { color: #122019; } /* حصص اليوم داخل بطاقة الحصة */ /* ================= تحديث التصميم العام: خلفية وبطاقات وقوائم وتبويبات عصرية ================= */ :root:not([data-theme="dark"]) { --bg: #F2F4FA; } :root { --radius: 18px; --shadow: 0 1px 2px rgba(20,26,51,.04), 0 8px 28px rgba(31,58,147,.07); } [data-theme="dark"] { --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.25); } body { background: radial-gradient(1100px 520px at 100% -10%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 70%), radial-gradient(900px 480px at -10% 110%, color-mix(in srgb, var(--green) 7%, transparent), transparent 70%), var(--bg); background-attachment: fixed; } .card { border-color: color-mix(in srgb, var(--border) 65%, transparent); border-radius: var(--radius); } .card-head h3 { font-size: 16.5px; font-weight: 800; } .sidebar { border-left: 1px solid var(--border); box-shadow: none; } .nav a { border-radius: 12px; padding: 9px 12px; transition: background .15s, color .15s; } .nav a.active { background: var(--ink); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 30%, transparent); } [data-theme="dark"] .nav a.active { color: #122019; } .nav a.active .tag { color: inherit; } .btn { border-radius: 12px; } .btn.primary { background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 70%, #4f7be8)); box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 25%, transparent); } .btn:not(.primary):not(.ghost):hover { border-color: var(--ink); color: var(--ink); } .list-item { padding: 11px 12px; margin-inline: -12px; border-bottom: 0; border-radius: 12px; transition: background .15s; } .list-item + .list-item { margin-top: 2px; } .list-item:hover { background: var(--surface-2); } .tabs { background: var(--surface); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); } .tabs button { border-radius: 999px; padding: 7px 16px; } .tabs button.on { background: var(--ink); color: #fff; box-shadow: none; } [data-theme="dark"] .tabs button.on { color: #122019; } .t tbody tr { transition: background .12s; } .t tbody tr:hover td { background: color-mix(in srgb, var(--ink-soft) 45%, transparent); } .input { border-radius: 12px; } /* تبويبات الاختيار (الفصول وغيرها) */ /* بطاقات الحصص: رقم بارز، وخلفية متدرجة */ .lsn { padding: 14px; border-radius: 18px; background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--ink-soft) 55%, var(--surface))); border-color: color-mix(in srgb, var(--border) 70%, transparent); } .lsn::before { display: none; } .lsn-top { margin-bottom: 8px; } .lsn-no { display: inline-flex; align-items: center; gap: 6px; } .lsn-no b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; font-size: 17px; margin: 0; } .lsn-time::before { content: "🕘 "; font-size: 11px; } .lsn.on { box-shadow: 0 0 0 3px var(--ink-soft), var(--shadow); } .lsn.now .lsn-no b { background: var(--green); } /* لوحة المعلم: رأس مدمج وبطاقتان سريعتان في الأعلى */ .tq { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: inherit; font: inherit; text-align: start; } .tq .t1 { font-weight: 700; font-size: 14px; } .tq .t2 { font-size: 12.5px; color: var(--muted); } .tq-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ink-soft); font-size: 20px; } .tq-go { cursor: pointer; transition: .15s; } .tq-go:hover { border-color: var(--ink); transform: translateY(-1px); } /* صف الطالب: الحالة بجانب الاسم */ .att-name { flex: 0 1 auto; min-width: 180px; } /* إعداد سجل الدرجات */ .gb-h { margin: 0 0 4px; font-size: 15px; } .gb-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: 12px; background: var(--surface-2); } .gb-item > .input:not([type]), .gb-item > input.input:not(.num) { flex: 1; min-width: 140px; } .gb-item select.input { width: auto; } .gb-item > input.input[data-ci]:not([type]) { flex: none; width: 60px; min-width: 0; } /* لوحة المعلم: الترحيب وبطاقة الحصة المدمجة بمؤقتها في سطر واحد */ .t-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: 16px; align-items: center; margin-bottom: 14px; } .t-hello h1 { font-family: var(--display); font-size: 28px; font-weight: 800; } .t-hello p { color: var(--muted); margin: 2px 0 0; } .lh-mini { display: flex; align-items: stretch; gap: 12px; padding: 12px 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1f3a93, #3657c9 60%, #4f7be8); box-shadow: 0 10px 26px rgba(31,58,147,.28); } .lh-mini .lm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .lh-mini .lm-k { font-size: 12px; opacity: .8; } .lh-mini .lm-t { font-weight: 800; font-size: 16px; line-height: 1.4; } .lh-mini .lm-s { font-size: 13px; opacity: .9; } .lh-mini .lm-go { align-self: flex-start; margin-top: 6px; border: 0; border-radius: 999px; padding: 5px 12px; background: #fff; color: #1f3a93; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; } .lh-mini .lm-timer { flex: none; width: 172px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.14); } .lh-mini .lm-timer.now { background: rgba(255,255,255,.2); } .lh-mini .lm-n { font-size: 26px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; } .lh-mini .lm-prog { display: block; width: 100%; height: 4px; margin-top: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; } .lh-mini .lm-prog i { display: block; height: 100%; background: #fff; } /* إجابة المساعد الذكي مع زر إخفاء */ .ai-ans { position: relative; margin-top: 10px; padding: 10px 40px 10px 12px; border-radius: 12px; background: var(--surface-2); } .ai-x { position: absolute; top: 6px; inset-inline-start: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; } .ai-x:hover { color: var(--red); } /* اختيار أيقونة ملاحظة الحصة */ .ic-pick { position: relative; } .ic-btn { width: 48px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 20px; cursor: pointer; } .ic-pop { position: absolute; z-index: 5; top: 44px; inset-inline-start: 0; display: grid; grid-template-columns: repeat(6, 36px); gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); } .ic-pop button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; font-size: 20px; cursor: pointer; } .ic-pop button:hover, .ic-pop button.on { background: var(--ink-soft); } .ic-pop input { grid-column: 1 / -1; } /* لوحة المعلم: الترحيب والمساعد في الشريط العلوي، والصف الأول بطاقة الحصة والبطاقتان السريعتان */ body[data-role="teacher"][data-page="dashboard"] #openPalette { display: none; } .t-bar.t-hello { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .t-bar.t-hello b { font-family: var(--display); font-size: 19px; font-weight: 800; white-space: nowrap; } .t-bar.t-hello span { font-size: 12px; color: var(--muted); white-space: nowrap; } .t-bar.t-ai { position: relative; flex: 1; max-width: 560px; margin-inline: auto; } .t-ai form { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 8px; padding-inline-start: 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); } .t-ai form:focus-within { border-color: var(--ink); } .t-ai input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; } .t-ai .btn { border-radius: 999px; } .t-ai .ai-ans { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 30; margin: 0; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .t-ai .ai-x { background: var(--surface-2); } .t-top { grid-template-columns: minmax(300px, 1.3fr) minmax(220px, 1fr) minmax(220px, 1fr); align-items: stretch; } .t-top .tq { height: 100%; } @media (max-width: 1100px) { .t-top { grid-template-columns: 1fr 1fr; } .t-top .lh-mini { grid-column: 1 / -1; } } @media (max-width: 760px) { .t-bar.t-hello { display: none; } .t-top { grid-template-columns: 1fr; } } .t-bar.t-hello { flex: 0 1 auto; max-width: 300px; overflow: hidden; } .t-bar.t-hello b, .t-bar.t-hello span { overflow: hidden; text-overflow: ellipsis; } .t-bar.t-ai { min-width: 260px; } /* لجنتي: بطاقة اللجنة مع المسح، ثم الإبلاغ والطلبات جنبًا إلى جنب */ .cm-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 18px; margin-bottom: 14px; } .cm-info h2 { font-family: var(--display); font-size: 24px; font-weight: 800; } .cm-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cm-tally span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--muted); } .cm-tally b { font-size: 20px; } .cm-tally .P b { color: var(--ink); } .cm-tally .A b { color: var(--red); } .cm-tally .L b { color: var(--amber-text); } .cm-tally .N b { color: var(--muted); } .cm-scan { padding: 14px; border-radius: 14px; background: var(--surface-2); } .cm-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 14px; margin-bottom: 14px; } .cm-req { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .cm-req .btn { justify-content: center; white-space: normal; text-align: center; } .cm-list { max-height: 260px; overflow: auto; } @media (max-width: 900px) { .cm-head, .cm-row { grid-template-columns: 1fr; } } /* الترحيب بعرضه الكامل دون تداخل، والمساعد يتقلّص */ .topbar { gap: 16px; } .t-bar.t-hello { flex: none; max-width: none; overflow: visible; } .t-bar.t-ai { flex: 1 1 240px; min-width: 200px; max-width: 480px; margin-inline: 0 auto; } @media (max-width: 1200px) { .t-bar.t-hello span { display: none; } } .att-btns { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* سجل الدرجات: البند التلقائي قابل للتعديل */ .gb-auto-cell { display: inline-flex; align-items: center; gap: 4px; } .gb-in.auto { background: var(--ink-soft); color: var(--ink); font-weight: 700; border-color: transparent; } .gb-in.edited { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-text); font-weight: 700; } .gb-reset { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer; } .gb-reset:hover { color: var(--ink); } /* تحضير الحصص: آخر عودة للصف في سطر الملاحظات */ .att-back { font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); } .brand span { display: block; line-height: 1.5; } /* خارج الصف الآن: سطر صغير لكل طالب */ /* أزرار رأس الصفحة بمحاذاة العنوان */ .page-head { align-items: center; } /* إذن الخروج والإحالة في طرف سطر الطالب */ .att-btns { margin-inline-start: auto; } /* سجل الدرجات: صفحة الفصول، والملاحظة فوق الجدول */ .gb-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .gb-class { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; text-align: start; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: inherit; font: inherit; cursor: pointer; transition: .15s; } .gb-class:hover { border-color: var(--ink); transform: translateY(-2px); } .gb-class .gb-cn { font-size: 17px; font-weight: 800; } .gb-class .gb-cp { margin-top: 6px; font-size: 12.5px; color: var(--muted); } .gb-class .gb-cp b { font-size: 20px; color: var(--ink); } .gb-class.new { background: var(--surface-2); } .gb-note { margin: 0 0 10px; color: var(--red); font-size: 13px; font-weight: 600; } .paper-mis { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13.5px; } /* استلام موادي من الكنترول */ .tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; } .recv-card { border-inline-start: 4px solid var(--amber); } .recv-card.done { border-inline-start-color: var(--green); } .recv-sub { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--ink-soft); padding: 1px 10px; border-radius: 999px; margin-bottom: 4px; } .recv-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .recv-stats span { padding: 6px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--muted); } .recv-stats b { font-size: 18px; color: var(--text); margin-inline-end: 4px; } .recv-stats .r b { color: var(--red); } .recv-reps { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border); } /* شاشة الدخول: نقاط تسويقية، والكشف في أعلى جهته تحت عبارة «مدرستك بلا ورق» */ .lead-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lead-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text); } .lead-list li span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ink-soft); font-size: 15px; } .login-art { flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px; padding-top: 56px; } /* شاشة الدخول: عرض التنبيهات الذكية */ .al-stack { width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; } .al-label { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .2px; } .al-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-inline-start: 4px solid var(--ink); box-shadow: 0 10px 30px rgba(20,26,51,.08); opacity: 0; transform: translateY(14px) scale(.98); animation: alIn .5s cubic-bezier(.2,.8,.2,1) forwards; } .al-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--ink-soft); font-size: 21px; } .al-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .al-top { display: flex; align-items: baseline; gap: 10px; } .al-top b { flex: 1; font-size: 15px; } .al-top small { color: var(--faint); font-size: 12px; white-space: nowrap; } .al-body > span { font-size: 13.5px; color: var(--muted); } .al-out { border-inline-start-color: var(--red); } .al-out .al-ic { background: var(--red-soft); } .al-smart { border-inline-start-color: var(--ink); } .al-prep { border-inline-start-color: var(--amber); } .al-prep .al-ic { background: var(--amber-soft); } .al-quiet { border-inline-start-color: var(--blue); } .al-quiet .al-ic { background: var(--blue-soft); } @keyframes alIn { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .al-card { opacity: 1; transform: none; animation: none; } } .login .lead-list { margin-top: 0; } .login h1 em { font-style: normal; color: var(--ink); } .login h1 { font-size: clamp(26px, 2.8vw, 38px); } .login h1 .h-l { display: block; white-space: nowrap; } .login h1 { font-size: clamp(22px, 2.35vw, 32px); } @media (max-width: 420px) { .login h1 .h-l { white-space: normal; } } .al-top small { font-variant-numeric: tabular-nums; } /* البحث يُخفى حين يحل المساعد الذكي مكانه في الشريط العلوي (لوحات القيادة) */ .topbar:has(.t-ai) #openPalette { display: none; } /* استئذان الموظفين */ .leave-card { border-inline-start: 4px solid var(--amber); } .leave-card.approved { border-inline-start-color: var(--green); } .leave-card.rejected { border-inline-start-color: var(--red); } .leave-card.cancelled { border-inline-start-color: var(--border); opacity: .75; } /* ============ التصميم المعتمد (لوحة المعلم) لكل صفحات الموقع ============ رأس الصفحة بطاقة مدمجة: أيقونة في مربع ناعم، والعنوان والوصف بجانبها (كبطاقات «tq» في لوحة المعلم). مربعات الإحصاء أفقية مدمجة كبطاقات «مهامي اليوم»، وعناوين البطاقات بلا إيموجي. */ .page-head { margin-bottom: 16px; gap: 12px; } .page-head > .ph-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; } .ph-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--ink-soft); font-size: 22px; } .ph-txt { min-width: 0; } .page-head h1 { font-size: 22px; font-weight: 800; line-height: 1.35; } .page-head p { font-size: 13px; line-height: 1.6; margin: 2px 0 0; } .stat-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .stat-tile { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "ic lbl val" "ic sub val"; align-items: center; column-gap: 12px; row-gap: 0; padding: 12px 14px; border-radius: 16px; } .stat-tile:hover { transform: translateY(-1px); } .stat-tile .st-ic { grid-area: ic; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--ink-soft); font-size: 20px; margin: 0; } .stat-tile .lbl { grid-area: lbl; font-weight: 700; font-size: 14px; color: var(--text); } .stat-tile .val { grid-area: val; font-size: 22px; margin: 0; } .stat-tile > .small { grid-area: sub; font-size: 12px; } .card.stat:not(.stat-tile) { padding: 14px 16px; border-radius: 16px; } .card.stat:not(.stat-tile) .val { font-size: 24px; margin-top: 4px; } .card { border-radius: 16px; } @media (max-width: 600px) { .page-head h1 { font-size: 19px; } .ph-ic { width: 40px; height: 40px; font-size: 19px; } .page-head .actions { margin-inline-start: 0; } } /* أزرار رأس الصفحة هادئة كلوحة المعلم: الأحمر والأخضر لون نص على خلفية البطاقة، والأساسي وحده ملوّن */ .page-head .actions .btn.red, .page-head .actions .btn.green { background: var(--surface); border-color: var(--border); } .page-head .actions .btn.red { color: var(--red); } .page-head .actions .btn.green { color: var(--green); } .page-head .actions .btn.red:hover, .page-head .actions .btn.green:hover { border-color: currentColor; } /* بطاقة الحساب في القائمة الجانبية تحت الشعار (بدل الزاوية العليا) */ .sidebar .user-chip { width: 100%; margin: -6px 0 6px; padding: 8px 10px; gap: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); color: inherit; font: inherit; text-align: start; } .sidebar .user-chip:hover { border-color: var(--ink); } .sidebar .user-chip .avatar { width: 36px; height: 36px; border-radius: 11px; } .sidebar .user-chip .who { display: block !important; flex: 1; min-width: 0; } .sidebar .user-chip .u-name { font-weight: 700; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; } .sidebar .user-chip .u-role { font-size: 11.5px; color: var(--muted); } .sidebar .user-chip .u-more { color: var(--muted); font-weight: 800; } /* القائمة الجانبية: مسافات أقل، وأقسام تنطوي بالنقر على اسمها */ .brand { padding-bottom: 12px; } .sidebar .user-chip { margin: 0 0 4px; } .nav-sec { margin-top: 2px; } .nav-group { width: 100%; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--faint); cursor: pointer; text-align: start; } .nav-group:hover { background: var(--surface-2); color: var(--text); } .nav-group .ng-arrow { margin-inline-start: auto; font-size: 15px; line-height: 1; transition: transform .15s; } .nav-sec.open .nav-group { color: var(--muted); } .nav-sec.open .nav-group .ng-arrow { transform: rotate(-90deg); } .nav-sec:not(.open) .nav-items { display: none; } .nav-items { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; } /* لوحات القيادة: «مهام اليوم» أقرب لأعلى الصفحة */ body[data-page="dashboard"] .content { padding-top: 14px; } /* اختصارات لوحة القيادة بالسحب والإفلات من القائمة الجانبية وإليها */ .dash-pins { margin-bottom: 18px; border-radius: 18px; transition: background .15s, box-shadow .15s; } .dp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .dp-head .sec-t { margin: 0; } .dp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .pin { position: relative; text-decoration: none; min-height: 58px; } .pin .t1 { font-size: 14px; } .pin.dragging { opacity: .45; } .pin-x { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .15s; } .pin:hover .pin-x, .pin:focus-within .pin-x { opacity: 1; } @media (hover: none) { .pin-x { opacity: 1; } } .pin-add { border-style: dashed; box-shadow: none; background: transparent; color: var(--muted); cursor: pointer; font: inherit; } .pin-add:hover { border-color: var(--ink); color: var(--ink); } .pin-add .tq-ic { background: var(--surface-2); } .dash-pins.dp-empty .dp-row { grid-template-columns: minmax(200px, 320px); } /* أثناء السحب: اللوحة تستقبل، والقائمة الجانبية تزيل */ body.dp-dragging-page .dash-pins, body.dp-dragging-pin .dash-pins { background: var(--ink-soft); box-shadow: 0 0 0 2px var(--ink) inset; padding: 10px; } .dash-pins.over { box-shadow: 0 0 0 3px var(--ink) inset !important; } body.dp-dragging-pin #sidebar { box-shadow: inset 0 0 0 2px var(--red); } body.dp-dragging-pin #sidebar::before { content: "أفلت هنا لإزالة الاختصار"; display: block; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--red-soft, #fce8ea); color: var(--red); font-size: 12.5px; font-weight: 700; text-align: center; } #sidebar.dp-drop-remove { background: color-mix(in srgb, var(--red) 6%, var(--surface)); } .nav a[data-id] { -webkit-user-drag: element; } .dp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .dp-pick .tq { cursor: pointer; font: inherit; color: inherit; text-align: start; box-shadow: none; } .dp-ghost { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 220px; padding: 8px 12px; opacity: .92; box-shadow: 0 12px 30px rgba(20,26,51,.25); } .dp-ghost .tq-ic { width: 34px; height: 34px; font-size: 17px; } body.dp-dragging-page, body.dp-dragging-pin { cursor: grabbing; user-select: none; } .nav a[data-id], .pin { -webkit-user-drag: none; } .dp-touch { display: none; } @media (hover: none) { .dp-mouse { display: none; } .dp-touch { display: inline; } } /* ترتيب لوحات القيادة: أدوات القسم (سحب، رفع، خفض)، وسحب البطاقات داخل القسم */ .dash-blk { position: relative; } .dash-tools { position: absolute; top: -10px; left: 6px; z-index: 5; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); opacity: 0; transition: opacity .15s; } .dash-blk:hover > .dash-tools, .dash-tools:focus-within, body.dash-sorting .dash-dragging > .dash-tools { opacity: 1; } @media (hover: none) { .dash-tools { opacity: 1; } .dash-tools .dt-grip { display: none; } } .dash-tools button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; display: grid; place-items: center; } .dash-tools button:hover { background: var(--ink-soft); color: var(--ink); } .dash-tools .dt-grip { cursor: grab; font-size: 15px; } body.dash-sorting, body.dash-sorting * { cursor: grabbing !important; user-select: none; } .dash-dragging { opacity: .55; outline: 2px dashed var(--ink); outline-offset: 4px; border-radius: 16px; } .dash-moved { animation: dashMoved .6s ease; } @keyframes dashMoved { from { box-shadow: 0 0 0 3px var(--ink); } to { box-shadow: 0 0 0 0 transparent; } } .dash-items > * { cursor: grab; } .dp-reset { margin-inline-start: auto; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 8px; border-radius: 8px; } .dp-reset:hover { color: var(--ink); background: var(--surface-2); } @media (hover: none) { .dash-tools { position: static; width: max-content; margin: 0 0 6px; margin-inline-start: auto; box-shadow: none; } } /* ملاحظات التطوير (16 أكتوبر): «اسأل» في أقصى يسار الشريط، وإزالة خريطة الفصول من لوحة القيادة */ .t-bar.t-ai { flex: 0 1 340px; min-width: 200px; max-width: 380px; margin-inline: 0; } @media (max-width: 760px) { .t-bar.t-ai { flex: 1 1 100%; max-width: none; } } /* ملخص اليوم بعد حذف الخريطة: شريط أفقي عريض بدل العمود الجانبي */ .today { grid-template-columns: 1fr; } .today-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 24px; border-right: 0; border-top: 0; } .today-side .today-date { margin-inline-end: auto; } .today-side .tally { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; } .today-side .tally li { border-bottom: 0; padding: 4px 0; } .today-side .btn { width: auto; } /* أزرار الإجراءات في الجداول: مجموعة متصلة أنيقة بدل أزرار متكدّسة — تُطبَّق على كل جداول المشروع */ .acts, .t td .row:has(> .btn.sm + .btn.sm) { display: inline-flex; flex-wrap: nowrap; gap: 0 !important; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); vertical-align: middle; } .acts > .btn.sm, .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm { border: 0; border-radius: 0; border-inline-start: 1px solid var(--border); background: transparent; padding: 6px 11px; font-size: 12.5px; font-weight: 600; color: var(--text); } .acts > .btn.sm:first-child, .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm:first-child { border-inline-start: 0; } .acts > .btn.sm:hover, .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm:hover { background: var(--ink-soft); color: var(--ink); } .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm.primary { background: var(--ink); color: #fff; } .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm.primary:hover { background: var(--ink-deep); } .t td .row:has(> .btn.sm + .btn.sm) > .btn.sm.ghost { color: var(--muted); } .acts > .btn.sm { width: 34px; height: 32px; padding: 0; justify-content: center; font-size: 14px; } .t td:has(> .btn.sm + .btn.sm) { white-space: nowrap; } .btn.sm.st-do { height: 28px; padding: 0 11px; font-size: 12px; border-radius: 999px; } /* خلية المستوى وحالة التنفيذ */ .lvl-cell { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; } .lvl-chip { flex: none; min-width: 34px; padding: 3px 8px; border-radius: 8px; text-align: center; font-weight: 800; font-size: 12px; } .lvl-chip.ink { background: var(--ink-soft); color: var(--ink); } .lvl-chip.amber { background: var(--amber-soft); color: var(--amber); } .lvl-chip.red { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); } .st-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); } .st-pill.ok { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .t-proc td .person { white-space: nowrap; } .t-proc td .person .small { font-size: 12px; } /* مجموعة أزرار نصية (تعديل/حذف، قبول/رفض) بنفس شكل المجموعة المتصلة */ .acts.txt > .btn.sm.primary { background: var(--ink); color: #fff; } .acts.txt > .btn.sm.primary:hover { background: var(--ink-deep); color: #fff; } .acts.txt > .btn.sm.ghost { color: var(--muted); } .acts.txt > .btn.sm.ghost:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } .acts.txt > .btn.sm { width: auto; padding: 0 12px; font-size: 12.5px; gap: 5px; } /* ملاحظات المدير (16 أكتوبر) — تُعتمد في كل جداول المشروع: الرقم التسلسلي بدل الحرف في دائرة الاسم، والاسم وكل خلية في سطر واحد (والنص الطويل يُختصر بنقاط ويظهر كاملًا عند الوقوف عليه) */ .t tbody { counter-reset: rowno; } .t tbody tr { counter-increment: rowno; } .t tbody td:first-child .person > .avatar { font-size: 0; background: var(--surface-2) !important; color: var(--muted); border: 1px solid var(--border); width: 30px; height: 30px; border-radius: 9px; } .t tbody td:first-child .person > .avatar::after { content: counter(rowno); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .t td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .t td .person { white-space: nowrap; } .t td:has(.acts, .lvl-cell) { overflow: visible; } /* التبويبات أعلى الصفحة مباشرة تحت الشريط */ #view > .seg-tabs:first-child { margin-top: -26px !important; margin-bottom: 14px !important; } /* أزرار رأس الصفحة فوق الجدول مباشرة */ .tbl-bar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } .tbl-bar > .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .t th, .t td { padding-inline: 10px; } .t td { max-width: 170px; } .t td:first-child { max-width: 240px; } .t-proc th, .t-proc td { padding-inline: 7px; } .t-proc .acts > .btn.sm { width: 31px; } /* «لوحة القيادة» رابط مستقل أعلى القائمة بلا عنوان قسم */ .nav-solo-sec { margin: 2px 0 8px; } /* المؤشر الذكي: بطاقة التعريف وخلية الدرجة */ .def-card { margin-bottom: 16px; } .def-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; } .def-card summary::-webkit-details-marker { display: none; } .def-card summary b::before { content: 'ℹ️ '; } .def-card p { margin: 10px 0; line-height: 1.8; font-size: 14px; } .def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; } .def-lv { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6; border-inline-start: 4px solid; background: var(--surface-2); } .def-lv b { font-size: 13.5px; } .def-lv.red { border-color: var(--red); } .def-lv.red b { color: var(--red); } .def-lv.amber { border-color: var(--amber); } .def-lv.amber b { color: var(--amber); } .def-lv.green { border-color: var(--green); } .def-lv.green b { color: var(--green); } .rk-cell { display: flex; align-items: center; gap: 8px; min-width: 96px; } .rk-n { font-weight: 800; font-size: 15px; min-width: 24px; } .rk-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 56px; } .rk-bar i { display: block; height: 100%; border-radius: 99px; } /* سجل التحضير: أزرار الحالة بجانب الاسم مباشرة (ملاحظة المدير) */ @media (min-width: 961px) { .reg-row { grid-template-columns: 44px minmax(0, max-content) auto 1fr; } .reg-row .who { max-width: 560px; } } /* سجلات التحضير (اليومي ولجان الاختبارات): أزرار الحالة مجموعة متصلة بعرض ثابت في عمود محاذى، بنفس تصميم تحضير الحصص */ .reg-row .marks { display: inline-flex; gap: 0; padding: 0; margin: 0 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); justify-self: start; } .reg-row .mark, .reg-row .mark.wide { width: 70px; min-width: 0; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); } .reg-row .mark + .mark { border-inline-start: 1px solid var(--border); } .reg-row .mark:hover { background: var(--surface-2); color: var(--text); } .reg-row .mark.on { font-weight: 700; } .mark.on.S { background: var(--green); border-color: var(--green); color: #fff; } .reg-row.S .who b { color: var(--green); } @media (min-width: 961px) { .reg-row { grid-template-columns: 44px minmax(220px, 300px) auto 1fr; } .reg-row .who { max-width: none; } } @media (max-width: 960px) { .reg-row .marks { margin: 0 14px 10px; } .reg-row .mark, .reg-row .mark.wide { width: auto; flex: 1; padding: 0 8px; } .reg-row .marks { display: flex; } } .reg-row .mark.on.P { background: var(--ink); color: #fff; } .reg-row .mark.on.A { background: var(--red); color: #fff; } .reg-row .mark.on.L { background: var(--amber); color: #3d2e00; } .reg-row .mark.on.E { background: var(--blue); color: #fff; } .reg-row .mark.on.S { background: var(--green); color: #fff; } [data-theme="dark"] .reg-row .mark.on { color: #122019; } /* التاريخ الميلادي والهجري تحت كل حقل تاريخ */ .date-hint { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.4; white-space: nowrap; } /* عنوان الصفحة وأزراره أعلى الصفحة فوق التبويبات */ /* سطر التبويبات وبجانبه عنوان الصفحة */ #view > .tab-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } #view > .tab-line > .seg-tabs { margin: 0 !important; } #view > .tab-line > .ph-main { margin: 0; } /* الصف الذي فيه حقل تاريخ: محاذاة الحقول من الأعلى فتبقى العناوين والحقول على خط واحد، والتاريخ المكتوب تحته */ .row:has(> label.field > .date-hint) { align-items: flex-start; } #view > .tab-line > .ph-main { display: flex; align-items: center; gap: 10px; min-width: 0; } #view > .tab-line > .ph-main .ph-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; } #view > .tab-line > .ph-main h1 { margin: 0; font-size: 22px; line-height: 1.3; } /* حضور الطلاب: سطر علوي واحد — العنوان يمينًا، والتبويبات وزرا التحضير يسارًا */ #view > .tab-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -18px 0 14px; } #view > .tab-line > .tl-gap { flex: 1; } #view > .tab-line > .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } /* وصف طريقة التحضير بالأخضر */ .reg-hint { color: var(--green); font-weight: 600; } /* شارات الطالب في السجل: صغيرة وفي سطر الاسم نفسه */ .reg-row .who span.flag { display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 6px; margin-inline-start: 6px; vertical-align: middle; border-radius: 20px; } .reg-row .who span.flag.risk { background: var(--red); border-color: var(--red); color: #fff; } .reg-row .who span.flag.leave { background: color-mix(in srgb, var(--green) 14%, transparent); border-color: var(--green); color: var(--green) !important; } @media (min-width: 961px) { .reg-row { grid-template-columns: 44px minmax(240px, 440px) auto 1fr; } .reg-row .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 961px) { .reg-row .who { white-space: normal; overflow: visible; } .reg-row { grid-template-columns: 44px minmax(240px, 480px) auto 1fr; } } /* التاريخ المكتوب بجانب عنوان الحقل «التاريخ» في السطر نفسه، والحقل تحتهما (فلا تطول البطاقة) */ label.field:has(> .date-hint) { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 5px; align-items: baseline; min-width: 300px; } label.field:has(> .date-hint) > :is(input, select, textarea) { grid-column: 1 / -1; } label.field > .date-hint { margin: 0; text-align: end; overflow: hidden; text-overflow: ellipsis; } /* حضور الطلاب: التاريخ المكتوب يمينًا بجانب كلمة «التاريخ» */ label.field > .date-hint { text-align: start; } /* حقول بطاقة الفلترة (الفصل، التاريخ، البحث) بارتفاع وحواف واحدة */ .att-filter > label.field > .input { height: 42px; border-radius: 12px; box-sizing: border-box; } /* خلية الاسم: الاسم في سطر، وتحته أيقونة الملف والشارات */ .reg-row .who > b { display: block; } .reg-row .who-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; } .reg-row .who-sub:empty { display: none; } .reg-row .who-sub .file-btn { margin: 0; padding: 0 4px; font-size: 13px; } .reg-row .who-sub span.flag { margin: 0; } /* أزرار الحالة بجانب الاسم مباشرة مع بقائها محاذاة */ @media (min-width: 961px) { .reg-row { grid-template-columns: 44px 250px auto 1fr; } } /* حضور الطلاب: بطاقة الفلترة أصغر */ .att-filter-card { padding: 10px 14px; } .att-filter > label.field { font-size: 12px; gap: 3px; } .att-filter > label.field > .input { height: 36px; padding-block: 6px; } /* أزرار الحالة بجانب أطول اسم في القائمة */ @media (min-width: 961px) { .register .reg-row { grid-template-columns: 44px var(--who-w, 250px) auto 1fr; } } /* سطر التبويب: التبويبات ملاصقة للعنوان */ #view > .tab-line > .ph-main .ph-txt p { margin: 2px 0 0; font-size: 12.5px; } #view > .tl-desc { margin: -6px 0 14px; font-size: 13px; color: var(--muted); } .reg-row .who > b { display: inline-block; max-width: 100%; } /* حضور الحصص: جدول الفصول × الحصص بأوقاتها */ .pp-grid th, .pp-grid td { text-align: center; } .pp-grid th:first-child, .pp-grid td:first-child { text-align: start; } .pp-time { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; } .pp-ok { color: var(--green); font-weight: 800; } .pp-no { color: var(--faint); } .pp-sub { font-size: 11px; color: var(--muted); } button.pp-ok, button.st-pill { border: 0; background: none; cursor: pointer; font: inherit; } button.st-pill.ok { background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } button.pp-open:hover { text-decoration: underline; } button.pp-ok { font-size: 15px; font-weight: 800; color: var(--green); padding: 0 6px; } .pp-by { font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; } /* ترتيب القائمة الجانبية بالسحب: مكان الإفلات، و«لوحة القيادة» ثابتة */ .nav a.nav-drop-before { box-shadow: inset 0 3px 0 var(--ink); } .nav a.nav-drop-after { box-shadow: inset 0 -3px 0 var(--ink); } /* سحب الأقسام: خط فوق القسم أو تحته، وعنوان القسم يتلوّن حين تُفلت عليه صفحة */ .nav-sec.nav-sec-before { box-shadow: inset 0 3px 0 var(--ink); } .nav-sec.nav-sec-after { box-shadow: inset 0 -3px 0 var(--ink); } .nav-sec.dragging { opacity: .5; } .nav-group.nav-drop-into { background: var(--ink-soft); box-shadow: 0 0 0 2px var(--ink) inset; } body.dp-dragging-sec { cursor: grabbing; user-select: none; } .nav-sec > .nav-group { cursor: grab; } body.dp-dragging-page .nav a[data-id]:not([data-id="dashboard"]) { cursor: grabbing; } .nav a[data-id]:not([data-id="dashboard"]) { cursor: grab; } .nav a[data-id="dashboard"] { cursor: pointer; } /* «التحديثات» ثابتة آخر القائمة */ .nav-solo-sec[data-navg="التحديثات"] { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .nav a[data-id="news"] { cursor: pointer; } body[data-page="students"] #view > .page-head:first-child { margin-top: -18px; } /* بيانات الطلاب: قائمة «خيارات» لكل طالب */ .row-menu { position: fixed; z-index: 9990; min-width: 210px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(15, 23, 42, .18); display: flex; flex-direction: column; } .row-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; } .row-menu button:hover { background: var(--ink-soft); color: var(--ink); } .row-menu button span { width: 20px; text-align: center; } .t-stu .opt-btn { white-space: nowrap; } .t-stu td .person .small { font-size: 11.5px; } /* الطباعة وملفات PDF: لا يُختصر نص الخلايا ولا يُمنع التفافه */ @media print { .t td { white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; } } /* طباعة الصفحة: تُخفى الأزرار التي نُقلت فوق الجداول وبجانب التبويبات، وشريط التبويبات وزر الملاحظات */ @media print { .tbl-bar, .tab-line .actions, .tab-line .seg-tabs, .seg-tabs, .fb-fab, .fb-toast, .acts, .opt-btn { display: none !important; } } /* إزالة خط الهامش الأحمر (على طريقة الدفتر) من كل الكشوف والملفات واللوحات: الكشوف، والقائمة الجانبية، وعمود الأرقام في سجل التحضير */ .sheet::before { display: none !important; } .sidebar { border-left-color: var(--border) !important; } .reg-row .no { border-left-color: var(--border) !important; } /* الطباعة: تُطبع الألوان كما تظهر (الرسوم البيانية والخريطة الحرارية والشارات)، ويتكرر رأس الجدول أعلى كل صفحة، ولا ينقسم صف بين صفحتين */ @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } thead { display: table-header-group; } tr { break-inside: avoid; } .card { box-shadow: none !important; } .heat-t td:first-child { white-space: nowrap; } } /* سُلَّم تصعيد إجراءات الغياب والتأخر: المستويات تسلسل فعلي، فتُعرض كمسار واحد تتصل عقده بخط. اللون على العقد وحدها (من أصفر قلم التظليل إلى أحمر التصحيح)، والباقي ورق أبيض هادئ، والكتابة موسّطة تحت كل عقدة. */ .lvl-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 8px 14px; margin-bottom: 16px; box-shadow: var(--shadow); } .lvl-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 10px 10px; background: none; border: 0; border-radius: 14px; cursor: pointer; color: var(--text); font: inherit; } .lvl-step::after { content: ""; position: absolute; top: 22px; inset-inline-start: calc(50% + 26px); width: calc(100% - 52px); height: 3px; border-radius: 3px; background: linear-gradient(to left, var(--lvc), var(--lvn, var(--lvc))); opacity: .35; } [dir="ltr"] .lvl-step::after { background: linear-gradient(to right, var(--lvc), var(--lvn, var(--lvc))); } .lvl-step:last-child::after { display: none; } .lvl-node { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--lvc); background: var(--surface); color: var(--lvc); font-weight: 800; font-size: 15px; transition: background .15s, color .15s, transform .15s; } .lvl-step:hover .lvl-node { transform: scale(1.06); } .lvl-unit { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: -2px; } .lvl-count { margin-top: 4px; line-height: 1; } .lvl-count b { font-size: 30px; font-weight: 800; } .lvl-count small { font-size: 12px; color: var(--muted); font-weight: 600; margin-inline-start: 4px; } .lvl-act { font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; max-width: 22ch; } .lvl-pend { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-soft); border-radius: 999px; padding: 2px 10px; } .lvl-step.zero .lvl-count b { color: var(--faint); } .lvl-step.on { background: color-mix(in srgb, var(--lvc) 9%, transparent); } .lvl-step.on .lvl-node { background: var(--lvc); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--lvc) 22%, transparent); } .lvl-step.on .lvl-act { color: var(--text); } .lvl-step:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 2px; } /* الجوال: السلم عمودي، والخط ينزل بين العقد */ @media (max-width: 720px) { .lvl-track { grid-template-columns: 1fr; padding: 12px; gap: 4px; } .lvl-step { display: grid; grid-template-columns: 46px 1fr auto; grid-template-areas: "node act count" "node pend count"; align-items: center; text-align: start; gap: 2px 12px; padding: 8px; } .lvl-node { grid-area: node; } .lvl-unit { display: none; } .lvl-act { grid-area: act; max-width: none; } .lvl-pend { grid-area: pend; justify-self: start; } .lvl-count { grid-area: count; margin: 0; } .lvl-step::after { top: calc(50% + 26px); inset-inline-start: 30px; width: 3px; height: calc(100% - 44px); } } @media (prefers-reduced-motion: reduce) { .lvl-node { transition: none; } .lvl-step:hover .lvl-node { transform: none; } } /* الوضع الليلي: ألوان العقد أفتح قليلًا لتظهر على خلفية السبورة */ [data-theme="dark"] .lvl-node { border-color: color-mix(in srgb, var(--lvc) 70%, #fff); color: color-mix(in srgb, var(--lvc) 55%, #fff); } [data-theme="dark"] .lvl-step.on .lvl-node { color: #fff; } /* درجات السلم: خط عريض، وصفوف متساوية في كل الدرجات حتى تتحاذى الأعداد والإجراءات وشارات «لم يُنفَّذ» */ .lvl-step { display: grid; grid-template-rows: 46px auto auto 3em auto; justify-items: center; align-content: start; } .lvl-unit { font-weight: 800; color: var(--text); opacity: .75; } .lvl-count b { font-weight: 900; } .lvl-count small { font-weight: 800; color: var(--text); opacity: .75; } .lvl-act { font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; height: 3em; overflow: hidden; } .lvl-pend { font-weight: 800; } .lvl-pend:empty { visibility: hidden; } @media (max-width: 720px) { .lvl-step { display: grid; grid-template-rows: none; justify-items: stretch; } .lvl-act { justify-content: flex-start; height: auto; } } /* أزرار الصفحة تحت عنوان القسم مباشرة (السلوك والتحفيز)، بدل نقلها فوق الجدول */ #view .head-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 18px; } #view .head-acts .btn.red, #view .head-acts .btn.green { background: var(--surface); border-color: var(--border); } #view .head-acts .btn.red { color: var(--red); } #view .head-acts .btn.green { color: var(--green); } #view .head-acts .btn.red:hover, #view .head-acts .btn.green:hover { border-color: currentColor; } @media print { #view .head-acts { display: none !important; } } /* خلية «المستوى والإجراء» في جدول الإجراءات: النص يلتف داخل الخلية بدل أن يتداخل مع عمود «التنفيذ» */ .t td:has(.lvl-cell) { white-space: normal; max-width: 230px; min-width: 170px; } .lvl-cell > span:last-child { white-space: normal; min-width: 0; line-height: 1.45; } /* الخلية التي فيها شارة حالة تتسع لها كاملة، فلا تُقص الشارة عند حافة الخلية */ .t td:has(> .badge, > .st-pill) { max-width: none; } /* أزرار الأعذار (تسجيل عذر، رفض الكل، قبول الكل) في يمين السطر فوق الجدول، كما رسمها المدير */ .tbl-bar:has(> .acts-start) { justify-content: flex-start; } /* الأعذار: ملاحظة ولي الأمر في سطر واحد كاملة بلا اختصار بنقاط */ .t td.x-note { max-width: 260px; } /* جدول الأعذار يتسع في عرض الصفحة بلا تمرير جانبي */ .t-ex th, .t-ex td { padding-inline: 8px; } /* جداول زيارات أولياء الأمور والرسائل وأجهزة البصمة والمعلمين والملاحظات الصحية وساعات التطوع والصلاحيات: النص الطويل ينزل لسطر ثانٍ فيتسع الجدول في عرض الصفحة بلا تمرير جانبي ولا إخفاء */ .t-fit td { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; } .t-fit td .badge, .t-fit td .btn, .t-fit td .st-pill { white-space: nowrap; } /* وعناوين أعمدتها تنزل لسطر ثانٍ عند الحاجة (مثل أسماء الأدوار الطويلة في جدول الصلاحيات) */ .t-fit th { white-space: normal; line-height: 1.35; } /* جدول الإجراءات: «المستوى والإجراء» موسّط داخل خليته */ .lvl-cell { justify-content: center; text-align: center; } /* المؤشر الذكي: الأسباب تظهر كاملة بلا اختصار، وتنزل لسطر ثانٍ عند الحاجة */ .t td.r-why { white-space: normal; overflow: visible; text-overflow: clip; max-width: 300px; min-width: 210px; line-height: 1.5; } /* تلميح «اضغط للإخفاء أو الإظهار» في بطاقة تعريف المؤشر الذكي: أحمر وبخط كبير */ .def-hint { color: var(--red); font-size: 16px; font-weight: 800; } /* رأس كل صفحة أعلى ما يمكن تحت الشريط العلوي (في كل اللوحات): مسافة علوية صغيرة موحدة، وتُلغى الإزاحات السالبة الخاصة السابقة */ .content, body[data-page="dashboard"] .content { padding-top: 10px; } #view > .page-head:first-child, body[data-page="students"] #view > .page-head:first-child { margin-top: 0 !important; } #view > .seg-tabs:first-child { margin-top: 0 !important; } #view > .tab-line { margin-top: 0 !important; } @media (max-width: 960px) { .content { padding-top: 8px; } } @media (max-width: 960px) { body[data-page="dashboard"] .content { padding-top: 8px; } } /* رأس الصفحة الذي بقي فارغًا بعد نقل أزراره وعنوانه لا يأخذ مسافة (كان يباعد بين الوصف وما تحته) */ .page-head.acts-only:not(:has(*)) { display: none; } /* كل جداول المشروع: النص يظهر كاملًا بلا اختصار بنقاط، وينزل لسطر ثانٍ داخل خليته عند الحاجة (ملاحظة المدير 16 أكتوبر). الشارات والأزرار تبقى في سطر واحد */ .t td { white-space: normal; overflow: visible; text-overflow: clip; } .t td .person { white-space: normal; } .t td .badge, .t td .btn, .t td .st-pill, .t td .chip { white-space: nowrap; } /* سجلات الزيارات والملاحظات الصحية والتطوع: كل خلية في سطر واحد، والنص الطويل (ما تم، التفاصيل) وحده ينزل لسطر ثانٍ عند الحاجة. أزرار التعديل والحذف أيقونات بتلميح لتوفير المساحة */ .t-book th, .t-book td { white-space: nowrap; padding-inline: 7px; } .t-book td.wrap { white-space: normal; } /* الأرقام والتواريخ والأوقات في الجداول لا تنزل لسطر ثانٍ أبدًا */ .t td.num { white-space: nowrap; } /* اسم الشخص وأول عمود (الطالب، القسم...) في سطر واحد دائمًا */ .t td .person, .t td:first-child { white-space: nowrap; } /* الصورة الرمزية داخل خلية الجدول بجانب الاسم في السطر نفسه (كانت تنزل فوق الاسم في جدول المستخدمين) */ .t td > .avatar { display: inline-grid; vertical-align: middle; margin-inline-end: 8px; } /* حقل التاريخ الفارغ: متصفح كروم يعرض «يوم/شهر/سنة» مقلوب الحروف في الصفحات العربية، فيُخفى حتى يضغط المستخدم على الحقل */ input[type="date"].dt-empty:not(:focus)::-webkit-datetime-edit { color: transparent; } /* فلاتر الأرشيف في سطر واحد منظم: البحث أعرض، ثم النوع والحالة والتاريخان */ .flt-grid { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(90px, .8fr) minmax(90px, .8fr) minmax(150px, 1.3fr) minmax(150px, 1.3fr); gap: 10px 12px; align-items: end; } .flt-grid.one { grid-template-columns: 1fr; } .flt-grid .field { margin: 0; min-width: 0; } #view .flt-grid .input { width: 100%; min-width: 0; max-width: none; } #view .flt-grid label.field { min-width: 0; } @media (max-width: 760px) { .flt-grid { grid-template-columns: 1fr 1fr; } .flt-grid > .field:first-child { grid-column: 1 / -1; } } /* الرسائل: قائمة «أولياء الأمور في التطبيق» لكل الفصول داخل صندوق قصير يُمرَّر بدل أن تمدّ البطاقة بطول الصفحة */ .reg-list { max-height: 220px; overflow-y: auto; overflow-x: hidden; padding-inline-end: 4px; } #view .reg-list .list-item { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 10px; width: 100%; margin: 0; box-sizing: border-box; } .reg-list .list-item .grow { min-width: 0; } .reg-list .list-item { padding: 6px 2px; gap: 10px; } .reg-list .list-item .t1 { font-size: 13px; } #view .grid.g3:has(.reg-list) { align-items: start; } /* جدول الإجراءات: خمس أيقونات (عرض، رسالة، استدعاء، تعهد، تحويل للموجه) أضيق قليلًا حتى يتسع الجدول في عرض الصفحة */ #view .t-proc .acts > .btn.sm { width: 26px; padding-inline: 0; } /* حضور الطلاب: تنبيه بسيط فوق السجل في يوم بلا دوام (بدل البطاقة) */ .att-off-note { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--red); } /* أزرار القسم تحت العنوان أضيق قليلًا حتى تتسع في سطر واحد (بيانات الطلاب سبعة أزرار) */ #view .head-acts .btn { padding-inline: 13px; } /* أشرطة «أولياء الأمور في التطبيق» متحاذية: عمود العدد بعرض ثابت فتتساوى أطوال الأشرطة */ .reg-list .list-item > b { text-align: end; } /* مربع اليوم والساعة أعلى لوحات القيادة (غير المعلم) */ #view > .day-top { margin-bottom: 14px; } #view > .day-top > .day-hero { min-height: 119px; } /* بطاقات لوحة القيادة بجانب مربع اليوم: يختارها المستخدم (حتى ثلاث) */ #view > .day-top { position: relative; } #view > .day-top.dq-n3 { grid-template-columns: minmax(300px, 1.3fr) repeat(3, minmax(0, 1fr)); } @media (max-width: 1100px) { #view > .day-top.dq-n3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { #view > .day-top[class*="dq-n"] { grid-template-columns: 1fr; } } .dq-gear { position: absolute; top: -10px; inset-inline-end: -8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; font-size: 14px; display: grid; place-items: center; opacity: .95; } .dq-gear:hover { opacity: 1; border-color: var(--ink); } .gold-gear { color: var(--amber); } .dq-gear { display: inline-flex; align-items: center; justify-content: center; } /* ملف الإنجاز: عناصر الخطة التشغيلية */ .pf-plan { margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .pf-plan summary { cursor: pointer; display: flex; gap: 8px; align-items: center; } .pf-plan ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 16px; } .pf-plan li { margin: 6px 0; font-weight: 600; line-height: 1.7; } .pf-plan li.sub { padding-inline-start: 22px; } .pf-plan label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } /* الخطة التشغيلية المولدة */ .op-checks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; font-size: 13.5px; } .op-checks li { margin: 4px 0; break-inside: avoid; } .op-checks li.sub { padding-inline-start: 20px; } @media (max-width: 760px) { .op-checks { columns: 1; } } .op-doc h3 { font-size: 16px; } .op-doc p { line-height: 1.8; } .op-ready { margin-inline-start: 6px; padding: 2px 8px; font-size: 12px; } .pf-hint { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--ink-soft, var(--surface-2)); font-size: 12.5px; } .pf-hint p { margin: 0 0 6px; line-height: 1.7; } .pf-hint .op-ready { margin: 0; } .pf-hint .pf-link { margin-inline-start: 8px; font-weight: 600; } /* تنبيه أحمر بعناصر الخطة غير المتحققة */ .pf-warn { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft, color-mix(in srgb, var(--red) 10%, transparent)); color: var(--red); font-size: 13px; } .pf-warn ul { margin: 6px 0 0; padding-inline-start: 18px; } .pf-warn li { margin: 6px 0; } .pf-warn li > span { color: var(--text, inherit); font-weight: 600; } .pf-warn .op-ready { margin-inline-start: 6px; } .pf-warn .pf-link { color: var(--red); } /* أيقونة شرح المعيار في ملف الإنجاز */ .pf-info { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-inline-start: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 14px; line-height: 1; cursor: pointer; vertical-align: middle; opacity: .85; } .pf-info:hover { opacity: 1; background: var(--amber-soft); } /* سطر «المصدر» تحت عناصر الخطة: أوضح وأكبر */ .pf-plan .pf-hint { font-weight: 400; } /* ============ ملف الإنجاز: «الملف العلاقي» ============ غلاف أخضر كملف الإنجاز الورقي، وفي أسفله فواصل المعايير: الممتلئ فيه شواهد والفارغ ينقصه شاهد. العناوين والأرقام بخط «ريم كوفي» كلصاقات الملفات الرسمية، والمتن بخط التطبيق. */ .pfx { --file: #172C6E; --file-deep: #0F1F52; --file-ink: #F4F6FF; --kufi: "Reem Kufi", "Almarai", system-ui, sans-serif; } [data-theme="dark"] .pfx { --file: #1A2A57; --file-deep: #121E40; --file-ink: #EEF2FF; } .pfx-cover { position: relative; background: var(--file); color: var(--file-ink); border-radius: 22px 22px 0 0; padding: 26px 28px 0; overflow: hidden; } .pfx-cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px); pointer-events: none; } .pfx-cover-top { position: relative; display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; padding-bottom: 22px; } .pfx-id { max-width: 62ch; } .pfx-kind { margin: 0 0 4px; font-size: 13.5px; opacity: .8; } .pfx-title { margin: 0; font-family: var(--kufi); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; letter-spacing: 0; } .pfx-sub { grid-column: 1 / -1; max-width: 300px; margin: 10px 0 0; font-size: 15px; line-height: 1.9; color: var(--amber); font-weight: 800; } .pfx-prt { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 2px; vertical-align: middle; font-size: 18px; border-radius: 10px; border: 1.5px solid var(--amber); background: color-mix(in srgb, var(--amber) 18%, transparent); cursor: pointer; } .pfx-prt:hover { background: color-mix(in srgb, var(--amber) 32%, transparent); } .pfx-prt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .pfx-big { color: var(--amber); font-family: var(--kufi); font-weight: 700; font-size: clamp(56px, 7vw, 84px); line-height: .9; } .pfx-of { font-family: var(--kufi); font-size: 22px; opacity: .85; } .pfx-cap { grid-column: 1 / -1; font-size: 13.5px; opacity: .85; margin-top: 6px; } .pfx-cover .pf-info:hover { background: rgba(255,255,255,.18); } /* الفواصل: ألسنة تبرز من أسفل الغلاف */ .pfx-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px 4px; padding-top: 4px; align-items: flex-end; } .pfx-tab { flex: 1 1 auto; max-width: 260px; min-width: 0; padding: 9px 14px 8px; border-radius: 10px 10px 0 0; font-family: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--file-ink); background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.4); border-bottom: 0; } .pfx-tab.on { background: var(--surface); color: var(--file); border: 1px solid var(--surface); transform: none; font-weight: 700; } [data-theme="dark"] .pfx-tab.on { color: var(--ink); } .pfx-tab:not(.on):hover { background: rgba(255,255,255,.16); } .pfx-tab:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; } @media (prefers-reduced-motion: no-preference) { .pfx-tab.on { animation: pfx-file .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms + 150ms); } @keyframes pfx-file { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } } /* شريط الأدوات: جسم الملف تحت الغلاف */ .pfx-bar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 18px 18px; padding: 16px 20px 18px; margin-bottom: 22px; } .pfx-switch { margin: 0; align-self: center; } .pfx-field { min-width: 210px; margin: 0; } .pfx-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; flex: 1; min-width: 240px; font-size: 14px; color: var(--muted); } .pfx-facts b { font-family: var(--kufi); font-size: 20px; color: var(--text); margin-inline-end: 4px; } /* أوراق المعايير */ .pfx-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 1100px) { .pfx-sheets { grid-template-columns: 1fr; } } .pfx-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 0 16px 10px; scroll-margin-top: 90px; } .pfx-sheet.wide { grid-column: 1 / -1; } .pfx-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 0 10px; margin-bottom: 4px; border-bottom: 2px solid var(--green-soft); } .pfx-sheet.gap .pfx-head { border-bottom-color: var(--red-soft); } .pfx-head h3 { margin: 0; font-family: var(--kufi); font-weight: 700; font-size: 18px; line-height: 1.45; } .pfx-state { flex: none; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); white-space: nowrap; } .pfx-sheet.gap .pfx-state { background: var(--red-soft); color: var(--red); } .pfx-row .t1 { font-size: 15px; font-weight: 700; } .pfx-n { font-family: var(--kufi); font-size: 22px; color: var(--ink); min-width: 2ch; text-align: center; } [data-theme="dark"] .pfx-n { color: var(--ink); } .pfx-up { background: color-mix(in srgb, var(--amber-soft) 45%, transparent); border-radius: 10px; } .pfx-empty { margin: 10px 0 6px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 14px; } .pfx-flash { animation: pfx-flash 1.6s ease-out; } @keyframes pfx-flash { 0%, 30% { box-shadow: 0 0 0 4px var(--amber); } 100% { box-shadow: 0 0 0 0 transparent; } } .pfx .pf-env { margin-top: 18px !important; border-radius: 16px; } .pfx .pf-env h3 { font-family: var(--kufi); font-size: 18px; } @media (max-width: 640px) { .pfx-cover { padding: 20px 16px 0; border-radius: 18px 18px 0 0; } .pfx-cover-top { gap: 14px; } .pfx-bar { padding: 14px 14px 16px; } .pfx-field { min-width: 0; flex: 1 1 100%; } .pfx-sheet { padding: 0 12px 8px; } } .pfx-field .pf-info { margin-inline-start: 2px; } .pfx-lbl { display: flex; align-items: center; gap: 2px; } @media (max-width: 640px) { .pfx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .pfx-tabs::-webkit-scrollbar { display: none; } .pfx-tab { flex: 0 0 auto; max-width: 70vw; } } /* الغلاف بطاقة كاملة (بلا حافة مقصوصة)، والألسنة داخله، والشريط بطاقة مستقلة تحته */ .pfx-cover { border-radius: 22px; padding-bottom: 22px; } .pfx-tab { border-radius: 10px; border-bottom: 1px dashed rgba(255,255,255,.4); } .pfx-tab.on { border: 1px solid var(--surface); } .pfx-bar { border-top: 1px solid var(--border); border-radius: 18px; margin-top: 14px; } @media (max-width: 640px) { .pfx-cover { border-radius: 18px; padding-bottom: 18px; } } /* المرفقات في السجلات وملف الإنجاز */ .svc-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .svc-file { display: inline-flex; gap: 2px; } .pfx-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .pfx-file { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfx-file:hover { background: var(--ink-soft); } .pfx-file:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .pfx-print { margin-inline-start: auto; align-self: center; } /* اختيار تصميم طباعة ملف الإنجاز */ .prt-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .prt-card { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: center; } .prt-card.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); } .prt-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; } .prt-prev { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px; background: var(--s); border: 1px solid var(--border); height: 96px; } .prt-prev i { display: block; border-radius: 3px; } .prt-prev .b { height: 16px; background: var(--b); border-inline-end: 4px solid var(--a); } .prt-prev .b.o { background: #fff; border: 2px solid var(--b); } .prt-prev .t { height: 7px; width: 60%; margin: 2px auto; background: var(--t); } .prt-prev .l { height: 2px; background: var(--a); } .prt-prev .l.s { width: 70%; } .prt-prev .g { flex: 1; border: 1.5px solid var(--a); background: #fff; } /* المستندات الخارجية: شرح وزر «أضف شاهد» */ .ext-doc { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); } .ext-doc p { margin:0; flex:1; line-height:1.9; font-size:14px; } .ext-doc .ext-ic { font-size:20px; line-height:1.4; } .ext-doc .btn { flex:none; align-self:center; } .pfx-ext { border-inline-start:3px solid var(--amber); } /* التوقيع الإلكتروني */ .es-pad { display:block; width:100%; max-width:700px; height:auto; aspect-ratio:700/220; background:#fff; border:2px dashed var(--line, #ccc); border-radius:12px; touch-action:none; cursor:crosshair; } .es-doc .letter { box-shadow:none; margin:0; } /* ===== غلاف ملف الإنجاز: نقش إسلامي ذهبي، وإطار شهادة، وشريط المعايير ===== */ .pfx-cover { --gold: #F2C230; background: radial-gradient(120% 140% at 0% 0%, #2A4AA8 0%, transparent 55%), linear-gradient(160deg, #1B3486 0%, #14286A 55%, #0F1F55 100%); box-shadow: 0 18px 40px -22px rgba(15,31,85,.55); } .pfx-cover::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E8B400' stroke-width='1'%3E%3Crect x='21' y='21' width='30' height='30'/%3E%3Crect x='21' y='21' width='30' height='30' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M0 36h15M57 36h15M36 0v15M36 57v15'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; opacity: .22; -webkit-mask-image: radial-gradient(75% 110% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(75% 110% at 0% 0%, #000 0%, transparent 70%); } .pfx-cover::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(242,194,48,.35); border-radius: 16px; pointer-events: none; } .pfx-cover-top { padding-bottom: 20px; margin-bottom: 12px; border-bottom: 1px solid rgba(242,194,48,.25); align-items: center; } .pfx-kind { color: var(--gold); opacity: 1; font-weight: 700; } .pfx-title { font-size: clamp(30px, 4vw, 46px); text-shadow: 0 2px 18px rgba(0,0,0,.25); } .pfx-big { position: relative; color: var(--gold); font-size: clamp(64px, 8vw, 96px); text-shadow: 0 4px 24px rgba(242,194,48,.35); } .pfx-of { position: relative; color: #fff; } .pfx-segs { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 10px; width: 100%; max-width: 270px; } .pfx-segs i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); } .pfx-segs i.on { background: var(--gold); box-shadow: 0 0 8px rgba(242,194,48,.55); } .pfx-sub { color: var(--gold); max-width: 270px; margin-top: 12px; } .pfx-prt { border-color: var(--gold); background: var(--gold); color: #14286A; } .pfx-prt:hover { background: #FFD966; } .pfx-tab { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; } .pfx-tab.on { background: #fff; color: #14286A; border-color: #fff; box-shadow: 0 2px 0 var(--gold) inset; } @media (prefers-reduced-motion: no-preference) { .pfx-segs i.on { animation: pfx-seg .35s ease-out both; } .pfx-segs i:nth-child(2) { animation-delay: .06s } .pfx-segs i:nth-child(3) { animation-delay: .12s } .pfx-segs i:nth-child(4) { animation-delay: .18s } .pfx-segs i:nth-child(5) { animation-delay: .24s } .pfx-segs i:nth-child(6) { animation-delay: .3s } .pfx-segs i:nth-child(7) { animation-delay: .36s } .pfx-segs i:nth-child(8) { animation-delay: .42s } .pfx-segs i:nth-child(9) { animation-delay: .48s } .pfx-segs i:nth-child(10) { animation-delay: .54s } @keyframes pfx-seg { from { transform: scaleX(0); opacity: 0; } } } @media (max-width: 640px) { .pfx-cover::after { inset: 6px; border-radius: 13px; } } /* الخطة التشغيلية: زر تعديل تحت كل بند */ .op-edit { margin: 10px 0 4px; display: flex; justify-content: flex-start; } /* ملف إنجاز المدير: عناصر الخطة مجمّعة في جداول مرتبة (الحالة، العنصر وشرحه، المصدر) */ .pp { display: grid; gap: 16px; margin-top: 10px; } .pp-grp h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--muted); } .pp-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } .pp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 36%); gap: 12px; align-items: center; padding: 10px 14px; } .pp-row + .pp-row, .pp-subs { border-top: 1px solid var(--border); } .pp-st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--green-soft); color: var(--green); } .pp-row.no .pp-st { background: var(--amber-soft); color: var(--amber); } .pp-name { font-size: 15px; font-weight: 700; line-height: 1.6; min-width: 0; } .pp-name .pf-info { margin-inline-start: 4px; } .pp-name .pf-hint { margin-top: 6px; font-size: 13.5px; font-weight: 400; } .pp-name .pf-hint p { margin: 0 0 6px; } .pp-src { font-size: 13px; line-height: 1.6; color: var(--muted); text-decoration: none; text-align: end; } a.pp-src:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } a.pp-src:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } /* «📄 عرض الشاهد» بجانب اسم العنصر وشرحه */ .pp-view { font-size: 13px; white-space: nowrap; margin-inline-start: 4px; } .pp-src.pp-none { color: var(--amber); font-weight: 700; } .pp-subs { background: var(--surface-2); } .pp-subs .pp-row { padding-inline-start: 34px; } .pp-subs .pp-row + .pp-row { border-top-color: color-mix(in srgb, var(--border) 70%, transparent); } .pp-subs .pp-name { font-size: 14px; } .pp-subs .pp-st { width: 20px; height: 20px; font-size: 11px; } @media (max-width: 640px) { .pp-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; } .pp-src { grid-column: 2; text-align: start; } .pp-subs .pp-row { padding-inline-start: 22px; } } /* عناصر الخطة في قائمتين متجاورتين */ .pp { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 20px; } .pp-col { display: grid; gap: 16px; } .pp .pp-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 0; padding: 9px 12px; } .pp .pp-src { grid-column: 2; text-align: start; font-size: 12.5px; } .pp .pp-subs .pp-row { padding-inline-start: 26px; } @media (max-width: 900px) { .pp { grid-template-columns: 1fr; } } /* كل قسم من عناصر الخطة قائمة تُفتح وتُغلق */ .pp-grp > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: 15px; } .pp-grp > summary::-webkit-details-marker { display: none; } .pp-grp > summary::before { content: "‹"; display: inline-block; width: 14px; text-align: center; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .2s; } .pp-grp[open] > summary::before { transform: rotate(-90deg); } .pp-grp > summary .pp-gt { flex: 1; } .pp-grp > summary:hover { background: var(--surface-2); } .pp-grp > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .pp-grp[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; } .pp-grp[open] > .pp-list { border-top: 0; border-radius: 0 0 12px 12px; } .pp-col { gap: 12px; } @media (prefers-reduced-motion: reduce) { .pp-grp > summary::before { transition: none; } } /* الجداول لا تتجاوز عرض الصفحة: أزرار الحالة فوق أيقونات الإجراء، والخلايا المزدحمة تتراص */ .rec-acts, .cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .rec-acts > .btn, .rec-acts > .badge, .cell-stack > .btn, .cell-stack > .badge, .cell-stack > .st-pill { white-space: nowrap; } .t td:has(.rec-acts, .cell-stack) { white-space: normal; max-width: none; overflow: visible; } .rec-acts > .acts > .btn.sm { padding: 6px 10px; font-size: 14px; } .t-proc th, .t-proc td { padding-inline: 9px; } .t-proc td:first-child, .t-proc td:first-child .person { white-space: normal; } /* زر تقرير المعيار والعنصر في ملف الإنجاز */ /* صفحة الشاهد فوق ملف الإنجاز */ .pf-view { max-height: 70vh; overflow: auto; background: #fff; color: #1b1b1b; border-radius: 10px; padding: 10px; } .pf-view .pfp .pg { break-after: auto; } /* جداول السجلات: العنوان الطويل يلتف ولا يتداخل مع العمود التالي */ #tbl td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 180px; max-width: 320px; overflow: hidden; } #tbl td { overflow: hidden; } #tbl td:has(.rec-acts) { overflow: visible; } /* تقدّم البرنامج: شريط وعبارة «نُفّذ 6 من 7، باقٍ 1 · باقٍ 82 يومًا» */ .pg-prog { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 0; } .pg-prog.sm { font-size: 12px; font-weight: 500; color: var(--muted); } .pg-bar { flex: 0 0 110px; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); } .pg-prog.sm .pg-bar { flex-basis: 80px; height: 6px; } .pg-bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; } /* شريط تقدّم البرنامج في عناصر الخطة: تحت المصدر في عمود الاسم */ .pp-row > .pg-prog { grid-column: 2; margin: 2px 0 0; } .pp-row > .pg-prog span { white-space: normal; } /* جداول السجلات كثيرة الأعمدة: العناوين تلتف والمسافات أضيق */ #tbl th { white-space: normal; line-height: 1.4; } #tbl th, #tbl td { padding-inline: 8px; } /* رقم المؤشر الرسمي بجانب عناصر الخطة */ .pf-code { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; margin-inline: 2px; vertical-align: middle; } /* تاريخ تنفيذ السجل بجانب مرفقه في ملفات الإنجاز */ .pfx-fdate { font-size: 11px; color: var(--muted); font-weight: 400; margin-inline-start: 4px; } /* جدول أعمال البرنامج: النص يلتف داخل خلاياه فلا يمتد الجدول خارج النافذة */ .rec-t td, .rec-t td * { white-space: normal; } .rec-t td .pfx-file { max-width: 100%; text-align: start; overflow-wrap: anywhere; } /* زر «+ شاهد» أسفل كل معيار وبجانب كل عنصر في ملف الإنجاز */ .pfx-addrow { margin-top: 10px; } .pp-add { padding: 2px 10px; font-size: 12.5px; margin-inline-start: 4px; } /* «عناصر الخطة» في ملف الإنجاز مفتوحة دائمًا ولا تُطوى */ .pf-plan-fixed > summary { cursor: default; list-style: none; } .pf-plan-fixed > summary::-webkit-details-marker { display: none; } /* أزرار رأس المعيار بخط النص العادي لا خط العنوان */ .pfx-head .pf-setup, .pfx-head .pp-view { font-family: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 13px; font-weight: 700; vertical-align: middle; } /* ================= ملف الإنجاز — إعادة التصميم (2026-10-18) ================= الفكرة: الفهرس هو الملف. رقم المعيار هو العنصر البارز الوحيد (ريم الكوفي)، وما حوله هادئ: أوراق بلا ظلال، وخطوط فاصلة رفيعة، وروابط بحبر التطبيق. الألوان: كحلي الغلاف، وذهبي على الكحلي فقط، وذهبي داكن للنص على الأبيض. */ .pfx { --pf-navy: #13235C; --pf-navy-2: #1B3280; --pf-gold: #F2C230; --pf-brass: #9A7414; --pf-line: var(--border); --pf-ok: var(--green); --pf-gap: var(--red); --pf-kufi: "Reem Kufi", "Almarai", system-ui, sans-serif; --pf-sans: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif; font-family: var(--pf-sans); } /* التخطيط: فهرس جانبي ثابت + عمود المعايير */ .pfx .pfx-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 16px; } .pfx .pfx-rail { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; background: var(--surface); border: 1px solid var(--pf-line); border-radius: 14px; padding: 12px 8px 10px; } .pfx .pfx-rail-h { margin: 0 10px 8px; font-size: 13px; font-weight: 700; color: var(--muted); } .pfx .pfx-rail .pfx-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; } .pfx .pfx-rail .pfx-tab { all: unset; box-sizing: border-box; display: grid; width: 100%; text-align: start; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text); font-size: 14px; line-height: 1.45; max-width: none; border: 0; transform: none; background: transparent; } .pfx .pfx-rail .pfx-tab:hover { background: var(--surface-2); } .pfx .pfx-rail .pfx-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .pfx .pfx-rail .pfx-tn { font-family: var(--pf-kufi); font-size: 19px; color: var(--pf-navy); text-align: center; } .pfx .pfx-rail .pfx-tt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; } .pfx .pfx-rail .pfx-tm { font-size: 13px; font-weight: 800; text-align: center; color: var(--pf-ok); } .pfx .pfx-rail .pfx-tab:not(.on) .pfx-tm { color: var(--pf-gap); } .pfx .pfx-rail .pfx-tab:not(.on) .pfx-tn { color: var(--pf-gap); } /* أوراق المعايير: عمود واحد، بلا ظلال، والرقم الكبير في رأس كل ورقة */ .pfx .pfx-sheets { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .pfx .pfx-sheet { width: 100%; box-sizing: border-box; border-radius: 14px; padding: 0 22px 14px; box-shadow: none; border: 1px solid var(--pf-line); scroll-margin-top: 84px; } .pfx .pfx-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 18px 0 14px; margin-bottom: 2px; border-bottom: 1px solid var(--pf-line); } .pfx .pfx-num { font-family: var(--pf-kufi); font-size: 44px; line-height: 1; color: var(--pf-navy); width: 56px; text-align: center; } .pfx .pfx-sheet.gap .pfx-num { color: var(--pf-gap); } .pfx .pfx-head h3 { font-family: var(--pf-sans); font-weight: 800; font-size: 19px; line-height: 1.5; color: var(--text); } .pfx .pfx-head h3 .pp-view, .pfx .pfx-head h3 .pf-setup { margin-inline-start: 10px; } .pfx .pfx-state { font-size: 13px; padding: 4px 12px; } .pfx .pfx-sheet.gap .pfx-head { border-bottom-color: color-mix(in srgb, var(--pf-gap) 30%, var(--pf-line)); } /* صفوف الشواهد: خطوط فاصلة رفيعة بدل الصناديق، والعدد بأرقام الكوفي */ .pfx .pfx-sheet .pfx-row { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--pf-line); padding: 12px 0; margin: 0; box-shadow: none; } .pfx .pfx-sheet .pfx-row:last-of-type { border-bottom: 0; } .pfx .pfx-row .t1 { font-size: 15.5px; font-weight: 700; line-height: 1.6; } .pfx .pfx-row .t2 { font-size: 13px; color: var(--muted); margin-top: 2px; } .pfx .pfx-n { font-family: var(--pf-kufi); font-size: 26px; color: var(--pf-navy); width: 56px; flex: none; text-align: center; } .pfx .pfx-up { background: transparent; border-inline-start: 3px solid var(--pf-gold); padding-inline-start: 10px; border-radius: 0; } .pfx .pp-view { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .pfx .pp-view:hover { text-decoration: underline; text-underline-offset: 3px; } .pfx .pfx-addrow { margin-top: 12px; } .pfx .pfx-addrow .btn { background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 45%, var(--pf-line)); color: var(--ink); font-weight: 700; } .pfx .pfx-addrow .btn:hover { background: var(--ink-soft); border-style: solid; } .pfx .pfx-empty { border-style: dashed; background: transparent; } /* عناصر الخطة وملاحظة البيئة وبرامج الصفة: بالأسلوب نفسه */ .pfx .pf-plan { border: 0; border-radius: 0; padding: 12px 0 4px; margin: 0; border-bottom: 1px solid var(--pf-line); } .pfx .pf-plan > summary b { font-size: 16px; font-weight: 800; } .pfx .pp-grp { border-radius: 12px; } .pfx .pfx-sheets > .card { margin-top: 0 !important; border-radius: 14px; box-shadow: none; border: 1px solid var(--pf-line); } .pfx .pfx-sheets > .card h3 { font-family: var(--pf-sans); font-weight: 800; font-size: 19px; } /* الشاشات المتوسطة والجوال: الفهرس شريط أفقي يُسحب */ @media (max-width: 1100px) { .pfx .pfx-rail .pfx-tabs { align-items: center; } .pfx .pfx-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pfx .pfx-rail { position: sticky; top: 64px; z-index: 5; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 6px; border-radius: 12px; } .pfx .pfx-rail-h { display: none; } .pfx .pfx-rail .pfx-tabs { flex-direction: row; gap: 4px; width: max-content; padding-inline: 4px; } .pfx .pfx-rail .pfx-tab { grid-template-columns: auto auto auto; gap: 6px; padding: 6px 10px; white-space: nowrap; } .pfx .pfx-rail .pfx-tt { -webkit-line-clamp: 1; max-width: 16ch; } } @media (max-width: 640px) { .pfx .pfx-head { grid-template-columns: auto minmax(0, 1fr); } .pfx .pfx-head .pfx-state { grid-column: 2; justify-self: start; } .pfx .pfx-num { font-size: 34px; } .pfx .pfx-head h3 { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .pfx * { scroll-behavior: auto; } } /* الوضع الليلي: أرقام المعايير بحبر فاتح لا بالكحلي */ [data-theme="dark"] .pfx { --pf-navy: var(--ink); } /* خطابات الشكر مربعًا بجانب «التطوير والمتابعة» في عناصر الخطة */ .pfx .pp-col .pfx-row.pp-thanks { border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin: 0; background: var(--surface); align-items: center; gap: 10px; } .pfx .pp-col .pfx-row.pp-thanks .t1 { font-size: 15px; line-height: 1.5; } .pfx .pp-col .pfx-row.pp-thanks .pfx-n { font-size: 22px; } .pfx .pp-col .pfx-row.pp-thanks:last-of-type { border-bottom: 1px solid var(--pf-line, var(--border)); } /* ================= خطة التحسين ================= */ .imp-in { width: 92px; padding: 6px 8px; text-align: center; } .imp-swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .imp-swot > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; border-inline-start-width: 4px; } .imp-swot > .s { border-inline-start-color: var(--green); } .imp-swot > .w { border-inline-start-color: var(--red); } .imp-swot > .o { border-inline-start-color: var(--ink); } .imp-swot > .t { border-inline-start-color: var(--amber, #c98a00); } .imp-swot h4 { margin: 0 0 6px; font-size: 15px; } .imp-swot ul { margin: 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.8; max-height: 260px; overflow: auto; } .imp-list { display: flex; flex-direction: column; gap: 8px; } .imp-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .imp-card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 14px; } .imp-card > summary::-webkit-details-marker { display: none; } .imp-card > summary:hover { background: var(--surface-2); border-radius: 12px; } .imp-card > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .imp-rank { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-soft, var(--surface-2)); color: var(--ink); font-weight: 800; font-size: 14px; } .imp-card.keep .imp-rank { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .imp-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.5; } .imp-sum b { font-size: 15px; } .imp-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); } .imp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 10px; } .imp-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .imp-grid textarea { min-height: 96px; } .imp-h { margin: 14px 0 0; font-size: 14px; } @media (max-width: 760px) { .imp-swot, .imp-grid, .imp-grid.three { grid-template-columns: minmax(0, 1fr); } .imp-in { width: 72px; } } .imp-doc .imp-pg { break-before: page; } .imp-doc .imp-pg:first-of-type { break-before: auto; } .imp-doc .imp-pt { margin-bottom: 8px; } .imp-doc .imp-pt th { background: #0f7c7a; color: #fff; } .imp-ev { margin: 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.9; } .imp-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; margin-bottom: 10px; border: 1px dashed var(--border); border-radius: 12px; } .imp-period label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .imp-period .input { width: auto; padding: 6px 8px; } /* التقويم الذاتي وخطة التحسين بتصميم ملف الإنجاز */ .pfx .imp-row { display: flex; align-items: center; gap: 12px; } .pfx .imp-row .imp-in { width: 96px; flex: none; } .pfx .imp-row .badge { flex: none; min-width: 64px; text-align: center; } .pfx .imp-cov-link { color: var(--pf-gold, #F2C230); font-weight: 700; } .pfx .imp-file .pfx-bar, .pfx.imp-file .pfx-bar { flex-wrap: wrap; } .pfx.imp-file .imp-period { margin: 0; border-style: solid; } .pfx.imp-file .pfx-sheet .imp-card { border-radius: 12px; } .pfx.imp-file .imp-list { margin-top: 12px; } @media (max-width: 640px) { .pfx .imp-row { flex-wrap: wrap; } .pfx .imp-row .grow { flex-basis: 100%; } } @media (max-width: 640px) { .pfx.imp-file .imp-period label { flex-wrap: wrap; width: 100%; } .pfx.imp-file .imp-period .input { width: 100%; min-width: 0; } } .imp-team > span:first-child { display: block; margin-bottom: 4px; } .imp-tpick { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .imp-tpick > summary { cursor: pointer; padding: 8px 12px; font-size: 14px; list-style: none; } .imp-tpick > summary::-webkit-details-marker { display: none; } .imp-tbox { padding: 8px 12px 10px; max-height: 260px; overflow: auto; border-top: 1px solid var(--border); } .imp-tg { margin-top: 6px; } .imp-tg > b { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; } .imp-tg label { gap: 8px; padding: 2px 0; } .wk-plan { margin-top: 16px; } .imp-dlist { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px; } .imp-dstd > b { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--ink); } .imp-drow { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; line-height: 1.6; } .imp-drow input { margin-top: 5px; } .imp-dteam { display: block; } /* نموذج الجاهزية: أقسامه السبعة */ .rdy-sec { border: 1px solid var(--border); border-radius: 12px; margin: 6px 0; background: var(--surface); } .rdy-sec.on { border-color: color-mix(in srgb, var(--green, #1a7f4b) 45%, var(--border)); } .rdy-sec > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; } .rdy-sec > summary::-webkit-details-marker { display: none; } .rdy-sec > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; } .rdy-n { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink-soft); font-weight: 800; font-size: 13px; flex: none; } .rdy-sec.on .rdy-n { background: var(--green, #1a7f4b); color: #fff; } .rdy-body { padding: 0 12px 12px; } .rdy-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; margin: 0; } .rdy-dl > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--border); padding: 4px 0; min-width: 0; } .rdy-dl dt { color: var(--muted, #666); font-size: 13px; } .rdy-dl dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; } .rdy-miss { color: var(--red, #b42318); font-weight: 700; } .rdy-act { gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .rdy-act label.btn { cursor: pointer; gap: 6px; } /* أقسام الملف في الغلاف: ملف الإنجاز، والتقويم الذاتي، وخطة التحسين */ .pfx-secs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; } .pfx-sec { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: inherit; text-decoration: none; font-weight: 700; font-size: 14px; transition: background .15s, border-color .15s; } .pfx-sec:hover { background: rgba(255,255,255,.18); } .pfx-sec:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .pfx-sec.on { background: var(--gold, #C9A24B); border-color: var(--gold, #C9A24B); color: #1b1b1b; } .pfx-sec-ic { font-size: 16px; line-height: 1; } @media (max-width: 640px) { .pfx-sec { padding: 6px 11px; font-size: 13px; } } @media print { .pfx-secs { display: none; } } /* ===== غلاف «ج1»: ورقة رسمية، والعنوان بهامش ذهبي، وختم الإنجاز، وألسنة الأقسام أسفله ===== */ .pfx-c1 { --c1-bg: #FBF8F0; --c1-line: #E6DCC3; --c1-bar: #F6F1E3; --c1-ink: #14286A; --c1-mut: #3B4A7A; --c1-gold: #C9A24B; --c1-gold-ink: #8A6A12; --c1-num: #B8862B; background: var(--c1-bg); color: var(--c1-ink); border: 1px solid var(--c1-line); border-radius: 18px; padding: 0; box-shadow: none; overflow: hidden; } [data-theme="dark"] .pfx-c1 { --c1-bg: #1C2233; --c1-line: #3A3424; --c1-bar: #232A3D; --c1-ink: #EEF2FF; --c1-mut: #B9C2E0; --c1-gold: #D9B65C; --c1-gold-ink: #E3C779; --c1-num: #E3C779; } .pfx-c1::before, .pfx-c1::after { content: none; display: none; } .pfx-c1 .pfx-cover-top { margin: 16px 0 0; padding: 22px 24px 20px; border: 0; border-inline-start: 6px solid var(--c1-gold); align-items: center; gap: 20px; flex-wrap: nowrap; } .pfx-c1 .pfx-id { max-width: none; flex: 1; min-width: 0; } .pfx-c1 .pfx-kind { color: var(--c1-gold-ink); font-weight: 700; font-size: 13.5px; margin: 0 0 6px; opacity: 1; } .pfx-c1 .pfx-title { color: var(--c1-ink); text-shadow: none; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.2; } .pfx-c1 .pfx-school { margin: 8px 0 0; font-size: 15px; color: var(--c1-mut); } .pfx-c1 .pfx-sub { margin: 8px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.8; font-weight: 400; color: var(--c1-mut); } .pfx-c1 .pfx-sub a { color: var(--c1-ink); font-weight: 700; } .pfx-c1 .pfx-prt { border-color: var(--c1-gold); background: transparent; color: var(--c1-ink); } .pfx-c1 .pfx-segs { display: flex; gap: 4px; margin-top: 12px; width: 100%; max-width: 280px; } .pfx-c1 .pfx-segs i { flex: 1; height: 5px; border-radius: 3px; background: var(--c1-line); box-shadow: none; } .pfx-c1 .pfx-segs i.on { background: var(--c1-gold); box-shadow: none; } .pfx-seal { flex: none; width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--c1-gold); display: grid; place-items: center; } .pfx-seal > div { width: 108px; height: 108px; border-radius: 50%; border: 1px dashed var(--c1-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .pfx-c1 .pfx-big { color: var(--c1-num); font-size: 44px; line-height: 1; text-shadow: none; } .pfx-c1 .pfx-of { color: var(--c1-mut); font-family: inherit; font-size: 12px; opacity: 1; margin-top: 2px; } .pfx-c1 .pfx-cap { color: var(--c1-gold-ink); font-size: 11.5px; margin-top: 2px; opacity: 1; } .pfx-c1 .pfx-secs { margin: 0; padding: 0 22px; gap: 22px; border-top: 1px solid var(--c1-line); background: var(--c1-bar); } .pfx-c1 .pfx-sec { padding: 12px 0 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--c1-mut); font-weight: 700; } .pfx-c1 .pfx-sec:hover { background: none; color: var(--c1-ink); } .pfx-c1 .pfx-sec.on { background: none; color: var(--c1-ink); border-bottom-color: var(--c1-gold); font-weight: 800; } @media (max-width: 640px) { .pfx-c1 .pfx-cover-top { flex-wrap: wrap; padding: 18px 16px 16px; } .pfx-seal { width: 104px; height: 104px; } .pfx-seal > div { width: 88px; height: 88px; } .pfx-c1 .pfx-big { font-size: 34px; } .pfx-c1 .pfx-id { flex-basis: 100%; } .pfx-c1 .pfx-secs { padding: 0 12px; gap: 12px; flex-wrap: nowrap; overflow-x: auto; } .pfx-c1 .pfx-sec { white-space: nowrap; flex: none; gap: 4px; font-size: 12.5px; } } /* ===== شريط التبويبات تحت الغلاف «أ»: خط ذهبي تحت التبويب الحالي، بألوان غلاف «ج1» ===== */ .pfx { --c1-bg: #FBF8F0; --c1-line: #E6DCC3; --c1-bar: #F6F1E3; --c1-ink: #14286A; --c1-mut: #3B4A7A; --c1-gold: #C9A24B; --c1-gold-ink: #8A6A12; --c1-num: #B8862B; } [data-theme="dark"] .pfx { --c1-bg: #1C2233; --c1-line: #3A3424; --c1-bar: #232A3D; --c1-ink: #EEF2FF; --c1-mut: #B9C2E0; --c1-gold: #D9B65C; --c1-gold-ink: #E3C779; --c1-num: #E3C779; } .pfx .pfx-bar { background: var(--c1-bg); border: 1px solid var(--c1-line); border-radius: 14px; margin-top: 14px; padding: 0 18px 14px; gap: 12px 18px; align-items: center; color: var(--c1-ink); } .pfx .pfx-switch { flex: 1 0 100%; display: flex; gap: 22px; margin: 0 -18px 2px; padding: 0 18px; background: transparent; border: 0; border-bottom: 1px solid var(--c1-line); border-radius: 0; box-shadow: none; } .pfx .pfx-switch button { padding: 12px 0 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; box-shadow: none; color: var(--c1-mut); font-weight: 700; font-size: 14px; } .pfx .pfx-switch button:hover { color: var(--c1-ink); background: none; } .pfx .pfx-switch button.on { color: var(--c1-ink); font-weight: 800; border-bottom-color: var(--c1-gold); background: none; box-shadow: none; } .pfx .pfx-switch button:focus-visible { outline: 2px solid var(--c1-gold); outline-offset: 2px; } .pfx .pfx-bar .input { background: #fff; border-color: var(--c1-line); color: var(--c1-ink); } [data-theme="dark"] .pfx .pfx-bar .input { background: var(--c1-bar); } .pfx .pfx-bar .pfx-lbl, .pfx .pfx-bar .field > span:first-child { color: var(--c1-mut); } .pfx .pfx-facts { color: var(--c1-mut); } .pfx .pfx-facts b { color: var(--c1-num); } .pfx .pfx-print { border: 1px solid var(--c1-gold); border-radius: 999px; background: transparent; color: var(--c1-ink); font-weight: 700; } .pfx .pfx-print:hover { background: var(--c1-bar); } @media (max-width: 640px) { .pfx .pfx-bar { padding: 0 12px 12px; } .pfx .pfx-switch { margin: 0 -12px 2px; padding: 0 12px; gap: 16px; flex-wrap: nowrap; overflow-x: auto; } .pfx .pfx-switch button { white-space: nowrap; flex: none; font-size: 13px; } } /* ===== الفهرس والأوراق بتصميم «ج»: فهرس بأرقام كبيرة، ورأس كحلي لكل ورقة ===== */ .pfx .pfx-rail { background: var(--surface); border-color: var(--c1-line); } .pfx .pfx-rail-h { color: var(--c1-gold-ink); } .pfx .pfx-rail .pfx-tab { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; padding: 7px 8px; } .pfx .pfx-rail .pfx-tab:hover { background: var(--c1-bar); } .pfx .pfx-rail .pfx-tn, .pfx .pfx-rail .pfx-tab:not(.on) .pfx-tn { font-family: var(--kufi); font-size: 22px; color: var(--c1-gold); text-align: start; } .pfx .pfx-rail .pfx-tab.on .pfx-tt { color: var(--c1-ink); font-weight: 800; } .pfx .pfx-rail .pfx-tab:not(.on) .pfx-tt { color: var(--c1-mut); font-weight: 700; } .pfx .pfx-rail .pfx-tm { color: #2E7D4F; } .pfx .pfx-rail .pfx-tab:not(.on) .pfx-tm { color: #B3261E; } .pfx .pfx-sheet { border-color: var(--c1-line); padding: 0 20px 14px; overflow: hidden; } .pfx .pfx-head, .pfx .pfx-sheet.gap .pfx-head { margin: 0 -20px 6px; padding: 14px 20px; background: #172C6E; color: #F4F6FF; border-bottom: 0; } .pfx .pfx-num, .pfx .pfx-sheet.gap .pfx-num { font-family: var(--kufi); font-size: 32px; color: #F2C230; width: auto; min-width: 44px; } .pfx .pfx-head h3 { color: #F4F6FF; font-family: var(--kufi); font-weight: 700; } .pfx .pfx-head h3 .muted, .pfx .pfx-head .small.muted { color: rgba(244,246,255,.75) !important; } .pfx .pfx-head a:not(.btn) { color: #F2C230; } .pfx .pfx-head .btn { background: rgba(255,255,255,.1); color: #F4F6FF; border-color: rgba(255,255,255,.3); } .pfx .pfx-head .btn.primary { background: #F2C230; color: #14286A; border-color: #F2C230; } .pfx .pfx-head .pf-info { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #F4F6FF; } .pfx .pfx-head .pp-view, .pfx .pfx-head .pf-setup { color: #F2C230; } .pfx .pfx-state { background: #F2C230; color: #14286A; } .pfx .pfx-sheet.gap .pfx-state { background: #FBE4E1; color: #B3261E; } @media (max-width: 640px) { .pfx .pfx-sheet { padding: 0 14px 12px; } .pfx .pfx-head, .pfx .pfx-sheet.gap .pfx-head { margin: 0 -14px 6px; padding: 12px 14px; } .pfx .pfx-num { font-size: 26px; } } .pfx .pfx-head h3 > span:not(.pfx-num), .pfx .pfx-head h3 .small { font-family: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 13px; font-weight: 700; } /* ===== صفوف الشواهد بتصميم «ب»: بطاقة بحافة ذهبية، والعدد في دائرة ذهبية أولها ===== */ .pfx .pfx-sheet .pfx-row { border: 1px solid var(--c1-line) !important; border-inline-start: 4px solid var(--c1-gold) !important; border-radius: 0 10px 10px 0 !important; background: var(--c1-bg) !important; padding: 10px 12px !important; margin: 8px 0 !important; gap: 12px; } .pfx .pfx-sheet .pfx-row .pfx-n { order: -1; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--c1-gold); display: grid; place-items: center; font-family: var(--kufi); font-size: 16px; color: var(--c1-num); } /* ===== بطاقات المبادرات بتصميم «ب»: حافة ذهبية، والنسبة الحالية في عمود بخط كبير وشريط نحو المستهدف ===== */ .imp-card, .imp-mcard { --c1-bg: #FBF8F0; --c1-line: #E6DCC3; --c1-bar: #F6F1E3; --c1-ink: #14286A; --c1-mut: #3B4A7A; --c1-gold: #C9A24B; --c1-num: #B8862B; --kufi: "Reem Kufi", "Almarai", system-ui, sans-serif; } [data-theme="dark"] .imp-card, [data-theme="dark"] .imp-mcard { --c1-bg: #1C2233; --c1-line: #3A3424; --c1-bar: #232A3D; --c1-ink: #EEF2FF; --c1-mut: #B9C2E0; --c1-gold: #D9B65C; --c1-num: #E3C779; } .imp-card, .imp-mcard, .pfx.imp-file .pfx-sheet .imp-card { border: 1px solid var(--c1-line); border-inline-start: 4px solid var(--c1-gold); border-radius: 0 12px 12px 0; background: var(--c1-bg); } .imp-card > summary, .imp-mcard > .imp-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) 170px; gap: 12px; align-items: center; padding: 12px 14px; } .imp-card > summary:hover { background: var(--c1-bar); border-radius: 0 12px 12px 0; } .imp-card .imp-rank, .imp-mcard .imp-rank { grid-row: auto; width: 40px; height: 40px; border: 2px solid var(--c1-gold); background: transparent; color: var(--c1-num); font-family: var(--kufi); font-size: 16px; } .imp-mcard.keep .imp-rank { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .imp-card .imp-sum, .imp-mcard .imp-sum { gap: 4px; } .imp-card .imp-sum b, .imp-mcard .imp-sum b { color: var(--c1-ink); font-size: 16px; } .imp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; font-size: 13px; } .imp-gauge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-inline-start: 14px; border-inline-start: 1px dashed var(--c1-line); } .imp-p { font-family: var(--kufi); font-size: 28px; line-height: 1; color: var(--c1-num); } .imp-lv { font-size: 12px; color: var(--c1-mut); line-height: 1.5; } .imp-bar { display: block; width: 100%; height: 6px; border-radius: 4px; background: var(--c1-line); overflow: hidden; } .imp-bar > i { display: block; height: 100%; background: var(--c1-gold); } .imp-card .imp-body { border-top-color: var(--c1-line); } .imp-mbody { padding: 0 14px 12px; border-top: 1px solid var(--c1-line); } @media (max-width: 640px) { .imp-card > summary, .imp-mcard > .imp-top { grid-template-columns: 40px minmax(0, 1fr); } .imp-gauge { grid-column: 1 / -1; padding: 8px 0 0; border-inline-start: 0; border-top: 1px dashed var(--c1-line); } } /* بطاقات برامج الخطة التشغيلية بتصميم «ب» نفسه */ .op-card .imp-mbody { padding-top: 8px; line-height: 1.9; } .op-card .imp-sum b a { color: inherit; } /* ===== تصاميم التقارير المطبوعة الثلاثة: أ الكحلي الرسمي، ب الورقة الذهبية، ج الموفّر للحبر ===== */ .print-doc .letter { font-family: Almarai, system-ui, sans-serif; } .print-doc:not(.pv-plain) table:not(.pfp *) { border-collapse: collapse; } /* أ الكحلي الرسمي */ .print-doc.pv-a .hdr { border-bottom: 0; position: relative; padding-bottom: 12px; color: #172C6E; font-weight: 700; } .print-doc.pv-a .hdr::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5px; border-top: 3px solid #172C6E; border-bottom: 1px solid #C9A24B; } .print-doc.pv-a h2:not(.pfp *) { font-family: "Reem Kufi", Almarai, sans-serif; color: #172C6E; } .print-doc.pv-a h2:not(.pfp *)::after { content: ""; display: block; width: 70px; height: 3px; background: #C9A24B; margin: 8px auto 0; border-radius: 2px; } .print-doc.pv-a table:not(.pfp *) th { background: #172C6E; color: #fff; border: 1px solid #172C6E; } .print-doc.pv-a table:not(.pfp *) td { border: 1px solid #D5DAEA; } .print-doc.pv-a table:not(.pfp *) tbody tr:nth-child(even) td { background: #F4F6FF; } /* ب الورقة الذهبية */ .print-doc.pv-b .letter { border: 0; border-inline-start: 8px solid #C9A24B; border-radius: 0; } .print-doc.pv-b .hdr { background: #FBF8F0; border: 1px solid #E6DCC3; border-radius: 10px; padding: 10px 14px; color: #14286A; } .print-doc.pv-b h2:not(.pfp *) { font-family: "Reem Kufi", Almarai, sans-serif; color: #14286A; } .print-doc.pv-b .letter h2 { text-align: right; border-inline-start: 5px solid #C9A24B; padding-inline-start: 12px; } .print-doc.pv-b table:not(.pfp *) th { background: #F6F1E3; color: #14286A; border: 0; border-bottom: 2px solid #C9A24B; } .print-doc.pv-b table:not(.pfp *) td { border: 0; border-bottom: 1px solid #E6DCC3; } .print-doc.pv-b table:not(.pfp *) td:first-child { color: #B8862B; font-weight: 700; } /* ج الموفّر للحبر */ .print-doc.pv-c .hdr { border-bottom: 1px solid #111; } .print-doc.pv-c table:not(.pfp *) th { background: #fff; color: #111; border: 0; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; } .print-doc.pv-c table:not(.pfp *) td { border: 0; border-bottom: 1px solid #bbb; } /* شريط اختيار التصميم في نافذة الطباعة، ولا يُطبع */ .pv-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -20px -20px 16px; padding: 10px 16px; background: #14286A; color: #fff; font: 700 14px Almarai, sans-serif; } .pv-bar button { font: inherit; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; } .pv-bar button.on { background: #C9A24B; border-color: #C9A24B; color: #14286A; } .pv-bar .pv-go { margin-inline-start: auto; background: #fff; color: #14286A; border-color: #fff; } @media print { .pv-bar { display: none !important; } } /* ملف الإنجاز المطبوع بالتصاميم الثلاثة */ .print-doc.pv-a .pfp { --band: #172C6E; --acc: #C9A24B; --ttl: #172C6E; --soft: #F4F6FF; } .print-doc.pv-b .pfp { --band: #9A7224; --acc: #14286A; --ttl: #14286A; --soft: #FBF8F0; } .print-doc.pv-c .pfp { --band: #222222; --acc: #888888; --ttl: #111111; --soft: #FFFFFF; } .print-doc.pv-a .pfp .cover h1, .print-doc.pv-b .pfp .cover h1, .print-doc.pv-a .pfp .band, .print-doc.pv-b .pfp .band { font-family: "Reem Kufi", Almarai, sans-serif; } .print-doc.pv-c .pfp .band { background: #fff; color: #111; border: 2px solid #222; } .print-doc.pv-c .pfp .sh, .print-doc.pv-c .pfp .cover h1 { color: #111; } /* ===== تصاميم الموقع الاختيارية: الحالي هو الرسمي، والأربعة يختارها المستخدم من زر 🎨 (للوضع النهاري) ===== */ html.sd-1:not([data-theme="dark"]){--bg:#F7F3E8;--surface:#FFFDF8;--surface-2:#F6F1E3;--border:#E6DCC3;--text:#14286A;--muted:#4A5785;--faint:#9A8F70;--ink:#14286A;--ink-deep:#0E1D52;--ink-soft:#F1E7CC;--radius:14px;--display:"Reem Kufi","Almarai",sans-serif} html.sd-1:not([data-theme="dark"]) .sidebar{background:#14286A;color:#EEF2FF;border:0} html.sd-1:not([data-theme="dark"]) .sidebar .nav a,html.sd-1:not([data-theme="dark"]) .sidebar .brand span,html.sd-1:not([data-theme="dark"]) .sidebar .nav-group{color:#C9D2F0} html.sd-1:not([data-theme="dark"]) .sidebar .brand b{color:#fff;font-family:"Reem Kufi"} html.sd-1:not([data-theme="dark"]) .nav a:hover{background:rgba(255,255,255,.08);color:#fff} html.sd-1:not([data-theme="dark"]) .nav a.active{background:#C9A24B;color:#14286A;box-shadow:none} html.sd-1:not([data-theme="dark"]) .card{border-top:3px solid #C9A24B;box-shadow:none} html.sd-1:not([data-theme="dark"]) .page-head h1,html.sd-1:not([data-theme="dark"]) .card-head h3{font-family:"Reem Kufi",Almarai;color:#14286A} html.sd-1:not([data-theme="dark"]) .tile{background:#FFFDF8;border-inline-start:4px solid #C9A24B} html.sd-1:not([data-theme="dark"]) .topbar{background:rgba(247,243,232,.9)} html.sd-2:not([data-theme="dark"]){--bg:#EEF1F7;--surface:#fff;--surface-2:#E9EDF5;--border:#D6DCE8;--text:#0F1F52;--muted:#56607E;--ink:#0F1F52;--ink-deep:#081338;--ink-soft:#E3E8F4;--radius:6px;--radius-sm:4px} html.sd-2:not([data-theme="dark"]) .sidebar{background:#0F1F52;border:0} html.sd-2:not([data-theme="dark"]) .sidebar .nav a,html.sd-2:not([data-theme="dark"]) .sidebar .brand span,html.sd-2:not([data-theme="dark"]) .sidebar .nav-group{color:#AEB9DA} html.sd-2:not([data-theme="dark"]) .sidebar .brand b{color:#fff} html.sd-2:not([data-theme="dark"]) .nav a{border-radius:0!important} html.sd-2:not([data-theme="dark"]) .nav a:hover{background:rgba(255,255,255,.06);color:#fff} html.sd-2:not([data-theme="dark"]) .nav a.active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset -4px 0 0 #3FA9F5} html.sd-2:not([data-theme="dark"]) .topbar{background:#fff;border-bottom:3px solid #0F1F52} html.sd-2:not([data-theme="dark"]) .card{box-shadow:none;border-radius:6px} html.sd-2:not([data-theme="dark"]) .card-head{border-bottom:1px solid var(--border);padding-bottom:10px} html.sd-2:not([data-theme="dark"]) .tile{border-radius:6px} html.sd-2:not([data-theme="dark"]) .tile .t-ic{border-radius:4px} html.sd-3:not([data-theme="dark"]){--bg:#F1F7F5;--surface:#fff;--surface-2:#E6F1EE;--border:#D3E5E0;--text:#0E2E2A;--muted:#4D6B66;--ink:#0F7C74;--ink-deep:#0A5C56;--ink-soft:#DDF0EC;--radius:18px} html.sd-3:not([data-theme="dark"]) .sidebar{background:#fff;border-left:1px solid #D3E5E0} html.sd-3:not([data-theme="dark"]) .nav a.active{background:#0F7C74;color:#fff;box-shadow:0 6px 16px rgba(15,124,116,.25)} html.sd-3:not([data-theme="dark"]) .topbar{background:linear-gradient(90deg,#0F7C74,#16968C);border:0} html.sd-3:not([data-theme="dark"]) .topbar .search,html.sd-3:not([data-theme="dark"]) .topbar .icon-btn,html.sd-3:not([data-theme="dark"]) .topbar select,html.sd-3:not([data-theme="dark"]) .topbar .user-chip{background:rgba(255,255,255,.92);border-color:transparent} html.sd-3:not([data-theme="dark"]) .card{box-shadow:0 2px 10px rgba(15,124,116,.07);border-color:#E0EEEA} html.sd-3:not([data-theme="dark"]) .tile .t-ic{border-radius:50%} html.sd-4:not([data-theme="dark"]){--bg:#F8F8FC;--surface:#fff;--surface-2:#F2F1FA;--border:#ECEBF5;--text:#1E1B3A;--muted:#6B6890;--ink:#5B4BDB;--ink-deep:#3F31B5;--ink-soft:#EEEBFF;--radius:22px;--shadow:0 8px 30px rgba(60,50,140,.08)} html.sd-4:not([data-theme="dark"]) .sidebar{background:#fff;border:0;box-shadow:0 0 0 1px #ECEBF5} html.sd-4:not([data-theme="dark"]) .nav a{border-radius:14px} html.sd-4:not([data-theme="dark"]) .nav a.active{background:#EEEBFF;color:#5B4BDB;box-shadow:none} html.sd-4:not([data-theme="dark"]) .topbar{background:rgba(248,248,252,.8);border:0} html.sd-4:not([data-theme="dark"]) .search{border-radius:30px;border-color:#ECEBF5} html.sd-4:not([data-theme="dark"]) .card{border:0;box-shadow:var(--shadow)} html.sd-4:not([data-theme="dark"]) .tile{border:0;box-shadow:0 4px 18px rgba(60,50,140,.07);border-radius:20px} html.sd-4:not([data-theme="dark"]) .icon-btn,html.sd-4:not([data-theme="dark"]) .user-chip{border-radius:14px;border-color:#ECEBF5} /* شارة «جديد» في القائمة الداكنة: لونها كان لون القائمة نفسه فلا تظهر */ html.sd-1:not([data-theme="dark"]) .sidebar .nav a:not(.active) .tag{color:#C9A24B} html.sd-2:not([data-theme="dark"]) .sidebar .nav a:not(.active) .tag{color:#8FC8F5} html.sd-1:not([data-theme="dark"]) .sidebar .user-chip,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)} html.sd-1:not([data-theme="dark"]) .sidebar .user-chip .u-name,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip .u-name{color:#fff} html.sd-1:not([data-theme="dark"]) .sidebar .user-chip *,html.sd-2:not([data-theme="dark"]) .sidebar .user-chip *{color:#D5DCF2} html.sd-1:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#14286A,#24408F);box-shadow:none;border-bottom:4px solid #C9A24B} html.sd-2:not([data-theme="dark"]) .lh-mini{background:#0F1F52;box-shadow:none;border-radius:6px} html.sd-3:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#0A5C56,#0F7C74 60%,#1FA39A);box-shadow:0 10px 26px rgba(15,124,116,.25)} html.sd-4:not([data-theme="dark"]) .lh-mini{background:linear-gradient(135deg,#3F31B5,#5B4BDB 60%,#7B6CF6);box-shadow:0 10px 26px rgba(91,75,219,.25);border-radius:22px} /* بطاقة الباقة أسفل القائمة الجانبية: بألوان القائمة في كل التصاميم والوضعين */ .sb-plan { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-top: 20px; font-size: 12.5px; } .sb-plan b { color: var(--text); } .sb-plan .sb-plan-t { margin: 4px 0 10px; color: var(--muted); } html.sd-1:not([data-theme="dark"]) .sb-plan, html.sd-2:not([data-theme="dark"]) .sb-plan { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } html.sd-1:not([data-theme="dark"]) .sb-plan b, html.sd-2:not([data-theme="dark"]) .sb-plan b { color: #fff; } html.sd-1:not([data-theme="dark"]) .sb-plan .sb-plan-t, html.sd-2:not([data-theme="dark"]) .sb-plan .sb-plan-t { color: #AEB9DA; } .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .skin-opt { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 10px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: start; } .skin-opt.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); } .skin-prev { display: grid; grid-template-columns: 34% 1fr; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .skin-prev i { display: block; } .skin-prev .sp-main { display: flex; flex-direction: column; gap: 6px; padding: 8px; } .skin-prev .sp-bar { height: 10px; border-radius: 4px; } .skin-prev .sp-card { flex: 1; border-radius: 5px; } /* ===== حضور اليوم في لوحة القيادة: حلقة نسب المدرسة، وشريط لكل فصل (يتسع لثلاثين فصلًا وأكثر) ===== */ .today.tdx { display: block; padding: 20px 22px; } .tdx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); } .tdx-head .today-date { min-width: 150px; } .tdx-ring { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; flex: none; } .tdx-ring > div { width: 86px; height: 86px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border); } .tdx-ring b { font-family: var(--display); font-size: 24px; line-height: 1.1; color: var(--ink-deep); } [data-theme="dark"] .tdx-ring b { color: var(--text); } .tdx-ring span { font-size: 11px; color: var(--muted); } .tdx-legend { flex: 1; min-width: 260px; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 18px; } .tdx-legend li { border-bottom: 0 !important; padding: 4px 0 !important; font-size: 13.5px !important; } .tdx-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 10px; } .tdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 22px; } .tdx-row { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) 42px; align-items: center; gap: 10px; padding: 6px 8px !important; border-radius: 8px; flex-direction: row !important; } .tdx-nm { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tdx-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-2); gap: 1px; } .tdx-bar i { display: block; min-width: 3px; } .tdx-rt { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: end; } @media (max-width: 640px) { .today.tdx { padding: 16px; } .tdx-ring { width: 96px; height: 96px; } .tdx-ring > div { width: 70px; height: 70px; } .tdx-ring b { font-size: 19px; } .tdx-legend { min-width: 0; } } /* مربع اليوم لمدرسة بمراحل تختلف توقيتاتها: صف لكل مرحلة بحصتها الجارية وعدّادها وشريط تقدمها */ .lh-mini.multi .dh-rows { gap: 6px; } .lh-mini.multi .lm-timer { width: 150px; } .dh-row { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; } .dh-row .dh-st { font-size: 13px; font-weight: 800; white-space: nowrap; } .dh-row .dh-t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dh-row .dh-n { font-size: 15px; font-weight: 800; letter-spacing: .5px; } .dh-row .dh-prog { grid-column: 1 / -1; margin-top: 0; height: 3px; } .dh-row.end { opacity: .75; } /* تنبيهات صفحة الدخول: ملف الإنجاز وخطة التحسين */ .al-pf { border-inline-start-color: #C9A24B; } .al-pf .al-ic { background: #F6F1E3; } .al-imp { border-inline-start-color: var(--green); } .al-imp .al-ic { background: var(--green-soft); } /* تسجيل مدرسة جديدة: حقل بأيقونة في بدايته والنص دليل داخله، ومفتاح الدولة +966 للجوال */ .ireg { gap: 12px; } .ifld { position: relative; display: flex; align-items: center; } .ifld .input { padding-right: 46px; padding-left: 14px; min-height: 50px; border-radius: 14px; background: var(--surface-2); } .ifld .input[dir="ltr"]:placeholder-shown { direction: rtl; text-align: right; } .ifld .input:focus { background: var(--surface); } .ifld .if-ic { position: absolute; right: 16px; color: #16A085; display: grid; place-items: center; pointer-events: none; } .ifld .if-cc { position: absolute; left: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 0 13px 13px 0; background: var(--border); font-weight: 700; font-size: 14px; } .ifld .if-cc { border-radius: 13px 0 0 13px; } .ifld:has(.if-cc) .input { padding-left: 104px; } /* تنبيهات صفحة الدخول في أعلى الصفحة، ووسم «للاطلاع» */ .login-art { justify-content: flex-start !important; padding-top: 28px !important; } .al-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ink); background: var(--ink-soft); border-radius: 999px; padding: 1px 10px; margin-bottom: 2px; } /* شعار «مدرسة بلس» الكامل: الاسم بسطرين، وفاصل، والعبارة التعريفية */ .ss-logo{display:inline-flex;align-items:center;gap:13px;background:#1F6FA0;color:#fff;border-radius:14px;padding:12px 18px 12px 20px;font-family:"El Messiri","Almarai",sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact} .ss-logo .sl-n{display:flex;flex-direction:column;align-items:flex-start;line-height:1} .ss-logo .sl-n em{font-style:normal;font-weight:700;font-size:28px;white-space:nowrap} .ss-logo .sl-n em+em{font-size:33px;color:#F0D48A;margin-top:-1px} .ss-logo .sl-n::after{content:"";width:22px;height:3px;border-radius:3px;background:#F0D48A;margin-top:9px} .ss-logo>i{position:relative;width:2px;align-self:stretch;margin:6px 0 2px;border-radius:2px;background:linear-gradient(#F0D48A,transparent)} .ss-logo>i::before{content:"";position:absolute;top:-6px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#F0D48A} .ss-logo .sl-t{font-family:"Almarai",sans-serif;line-height:1.65;white-space:nowrap} .ss-logo .sl-t div:first-child{font-size:12.5px;font-weight:800} .ss-logo .sl-t div+div{font-size:11px;font-weight:700;opacity:.82} /* صفحة الدخول: الشعار في المنتصف وبحجم كبير */ .brand-hero{justify-content:center;text-align:center} .brand-hero>div{display:flex;flex-direction:column;align-items:center} .brand-hero .brand-logo.big{width:104px;height:104px;border-radius:26px;margin-bottom:10px} .brand-hero .brand-logo.big em{font-size:24px} .brand-hero .brand-logo.big em+em{font-size:32px} .brand-hero .brand-logo.big::after{width:22px;height:4px;margin-top:5px} /* صفحة الدخول: وصف المنصة تحت الشعار بخط أكبر ولون النص الأساسي */ .brand-hero span{font-size:17px;font-weight:700;color:var(--text)} /* القائمة الجانبية: الشعار وأسماء المدارس في المنتصف */ .brand-mid{justify-content:center;text-align:center} .brand-mid>div{display:flex;flex-direction:column;align-items:center} /* صفحة الدخول: التنبيهات قوائم متجاورة (عمودان) */ .al-stack { width: min(680px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .al-stack > .al-label { grid-column: 1 / -1; font-size: 17px; font-weight: 800; color: var(--text); } .al-stack .al-card { padding: 14px 14px; gap: 11px; height: 100%; box-sizing: border-box; } .al-stack .al-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; } .al-stack .al-top { flex-wrap: wrap; gap: 4px 8px; } .al-stack .al-top b { font-size: 14px; } .al-stack .al-body > span { font-size: 12.5px; } @media (max-width: 1100px) { .al-stack { grid-template-columns: minmax(0, 1fr); } } /* لوحة القيادة: مربع «حضور اليوم» الصغير، والنقر يفتح الإحصائيات */ .today.tdx-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 14px 18px; cursor: pointer; transition: box-shadow .15s, transform .15s; } .today.tdx-mini:hover, .today.tdx-mini:focus-visible { box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--ink) 45%, transparent); transform: translateY(-1px); outline: none; } .tdm-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; } .tdm-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); } .tdm-ring b { position: relative; font-family: var(--display); font-size: 16px; color: var(--ink-deep); } [data-theme="dark"] .tdm-ring b { color: var(--text); } .tdm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 150px; } .tdm-txt b { font-size: 16px; } .tdm-txt span { font-size: 12.5px; color: var(--muted); } .tdm-k { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1; font-size: 13px; color: var(--muted); } .tdm-k li { display: flex; align-items: center; gap: 6px; } .tdm-k i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .tdm-k b { color: var(--text); } .tdm-go { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--ink-soft); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } /* نافذة إحصائيات حضور اليوم */ .tds { display: flex; flex-direction: column; gap: 6px; } .tds-hero { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, var(--ink-soft), color-mix(in srgb, var(--surface) 70%, var(--ink-soft))); } .tds-ring { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--ink) 60%, transparent); } .tds-ring > div { width: 128px; height: 128px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; box-sizing: border-box; } .tds-ring b { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--ink-deep); } [data-theme="dark"] .tds-ring b { color: var(--text); } .tds-ring span { font-size: 12px; color: var(--muted); margin-top: 4px; } .tds-ring small { font-size: 10.5px; color: var(--faint); } .tds-kpis { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tds-kpi { background: var(--surface); border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; border-top: 3px solid var(--c); } .tds-kpi span { font-size: 12.5px; color: var(--muted); } .tds-kpi b { font-family: var(--display); font-size: 22px; grid-row: span 2; align-self: center; } .tds-kpi i { display: block; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .tds-kpi em { display: block; height: 100%; background: var(--c); border-radius: 4px; } .tds-kpi small { grid-column: 1 / -1; font-size: 11px; color: var(--faint); } .tds-h { margin: 16px 0 8px; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .tds-h small { font-weight: 400; font-size: 12px; color: var(--muted); } .tds-stages { display: grid; gap: 8px; } .tds-stage { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 4px 12px; } .tds-stage small { grid-column: 2 / -1; font-size: 11.5px; color: var(--muted); } .tds-sbar { height: 12px; border-radius: 8px; background: var(--surface-2); overflow: hidden; } .tds-sbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--ink) 60%, var(--green, #16a34a))); } .tds-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .tds-cell { border: 0; border-radius: 12px; padding: 10px 8px; background: var(--h); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; text-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .12s; } .tds-cell:hover:not([disabled]) { transform: translateY(-2px); } .tds-cell[disabled] { cursor: default; } .tds-cell b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tds-cell span { font-family: var(--display); font-size: 17px; } .tds-cell small { font-size: 10.5px; opacity: .92; } .tds-cell[style*="surface-2"] { color: var(--muted); text-shadow: none; } .tds-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tds-box { background: var(--surface-2); border-radius: 14px; padding: 4px 14px 14px; } .tds-trend { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; } .tds-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11px; color: var(--muted); } .tds-col i { width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--ink) 45%, var(--surface)); } .tds-col.on i { background: var(--ink); } .tds-col.on span { color: var(--ink); font-weight: 700; } .tds-late > div { display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; } .tds-late i { display: block; height: 10px; border-radius: 6px; background: var(--amber); min-width: 4px; } .tds-rank { margin: 0; padding-inline-start: 22px; } .tds-rank li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 13px; } .tds-rank li span { color: var(--red); } @media (max-width: 720px) { .tds-two { grid-template-columns: minmax(0, 1fr); } .tds-ring { width: 140px; height: 140px; } .tds-ring > div { width: 104px; height: 104px; } .tds-ring b { font-size: 28px; } .tds-stage { grid-template-columns: 90px 1fr 46px; } } /* صفحة الدخول: الدخول بقوقل، وفاصل «أو» */ .g-wrap { margin-top: 4px; } .login .or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; margin: 6px 0 12px; } .login .or::before, .login .or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .g-btn { display: flex; justify-content: center; min-height: 44px; } /* شريط الجولة التجريبية */ #ss-tour { position: fixed; inset-inline: 0; bottom: 0; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 16px; background: #B42318; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 -6px 20px -10px rgb(0 0 0 / .4); } #ss-tour .btn { background: #F0D48A; color: #14286A; border: 0; } /* خطوات تجهيز المدرسة الجديدة (لوحة المدير) */ .su-card { margin-bottom: 18px; border-top: 3px solid #1F6FA0; } .su-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 2px 0 12px; } .su-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1F6FA0, #F0D48A); border-radius: 6px; } .su-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .su-list li { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .su-list li.now { background: var(--ink-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); } .su-list li.ok { opacity: .72; } .su-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface); color: var(--ink); flex: none; } .su-list li.ok .su-n { background: var(--green, #16a34a); color: #fff; } .su-t { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .su-t small { color: var(--muted); font-size: 12.5px; } .su-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .g-btn:empty { display: none; } /* صفحة الاشتراك: بطاقات الباقات */ .bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .bp { text-align: start; font: inherit; color: inherit; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; } .bp:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--border)); } .bp.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); } .bp.top { border-top: 4px solid #C9A24B; } .bp-n { font-weight: 800; font-size: 15px; } .bp-p { font-family: var(--display); font-size: 24px; color: var(--ink); } .bp-p small, .bp-t small { font-size: 12px; color: var(--muted); font-family: inherit; } .bp-s { font-size: 12.5px; color: var(--muted); font-weight: 700; } .bp ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.75; color: var(--text); flex: 1; } .bp-t { border-top: 1px dashed var(--border); padding-top: 8px; font-weight: 800; } /* القائمة: صفحة ضمن باقة أعلى */ .nav a.plan-lock { opacity: .62; } .nav a .lk { margin-inline-start: auto; font-size: 11px; } /* الواتس الذكي: خيار الاشتراك، ورمز الربط */ .ws-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px dashed var(--border); border-radius: 12px; margin-bottom: 12px; cursor: pointer; } .ws-opt input { margin-top: 4px; } .ws-opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.7; } .ws-qr { background: #fff; padding: 10px; border-radius: 14px; display: inline-block; box-shadow: 0 6px 20px -10px rgba(0,0,0,.3); } .ws-qr svg { display: block; width: 240px; height: 240px; } /* نهاري دائمًا مهما كان وضع الجوال، والليلي فقط باختيار المستخدم */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* تذييل ثابت في كل صفحات الموقع: اسم المنصة والمؤسسة */ .site-foot{text-align:center;font-weight:700;color:var(--text);font-size:14px;padding:18px 16px;margin-top:auto} .site-foot:has(.seal-foot:not(:empty)){display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} /* ختما التوثيق جنب بعض في التذييل: «متجر موثّق» ثم TrustedSite، بلا طفو ولا بطاقة منبثقة */ .seal-foot{display:inline-flex;align-items:center;gap:10px;height:42px} .sbc-foot-frame{border:0;width:126px;height:42px;background:transparent;color-scheme:normal;border-radius:999px;pointer-events:none} .seal-sbc,.seal-ts{display:block;line-height:0} .seal-sbc{border-radius:999px} .seal-ts img{display:block;width:92px;height:38px;border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.14)} /* الختم الأجنبي العائم في الزاوية يُخفى حيث يظهر الختمان في التذييل */ body[data-seal="foot"] #trustedsite-tm-image,body[data-seal="foot"] #trustedsite-tm-frame{display:none!important} .seal-foot:empty{display:none} /* ختم TrustedSite يجلس في الزاوية اليمنى أسفل الصفحة، فيرتفع فوقه ختم «متجر موثّق» */ body:has(#trustedsite-tm-image) .sbc-seal-frame{bottom:44px!important} .login .site-foot{padding:24px 0 0;margin-top:18px;border-top:1px solid var(--border)} /* صفحة الدخول: عبارة المنصة ووصفها تحت الشعار (نسخة من الصفحة التعريفية) */ .login-pitch{text-align:center;margin:14px 0 22px;padding:14px 16px;border-radius:14px;background:var(--ink-soft)} .login-pitch b{display:block;font-family:var(--display,inherit);font-size:21px;color:var(--ink-deep)} [data-theme="dark"] .login-pitch b{color:var(--text)} .login-pitch p{margin:6px 0 0;font-size:14.5px;font-weight:600;line-height:1.8;color:var(--text)} /* صفحة الدخول (1448/05/16هـ – 2026-10-27م): الشعار في أعلى الصفحة داخل لوحة فاتحة بلوني الشعار، ونموذج الدخول بطاقة مستقلة تحتها */ .login-form{align-items:flex-start;padding:14px 32px 28px} .login-form .inner{width:min(440px,100%)} .lg-head{position:relative;overflow:hidden;text-align:center;color:var(--ink-deep);border-radius:22px;padding:20px 24px 22px;border:1px solid #DCE7F0;background:radial-gradient(60% 90% at 100% 0,rgba(240,212,138,.5),transparent 64%),radial-gradient(60% 90% at 0 0,rgba(240,212,138,.5),transparent 64%),linear-gradient(170deg,#EAF3FA 0%,#F6F9FC 100%)} [data-theme="dark"] .lg-head{color:var(--text);border-color:var(--border);background:var(--surface-2)} .lg-head .brand-hero span{color:var(--text)} .lg-head .brand-logo{box-shadow:0 14px 28px -14px rgba(31,111,160,.7)} .lg-head .login-pitch{background:none;padding:0;margin:14px 0 0;border-radius:0} .lg-head .login-pitch b{color:var(--ink-deep);font-size:24px;line-height:1.4} .lg-head .login-pitch b::after{content:"";display:block;width:110px;height:3px;border-radius:3px;background:#C9A24B;margin:10px auto 0} .lg-head .login-pitch p{color:var(--text);font-weight:600} .lg-head h1{margin:14px 0 14px} .lg-head h1 em{color:#1F6FA0} .lg-head .lead-list{margin:0;text-align:start} .lg-head .lead-list li{font-size:14.5px} .lg-head .lead-list li span{background:#fff} .lg-card{position:relative;margin:18px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px 22px 20px;box-shadow:0 30px 54px -32px rgba(20,39,102,.55)} .lg-head+.lg-card{margin:20px 0 0} .login .lg-card h1{font-size:26px;line-height:1.35;margin:0 0 4px} .login .lg-card .lead{font-size:14.5px;font-weight:600;margin:0 0 18px} .lg-card .note:last-child{margin-bottom:0} .login .ifld .if-ic{color:var(--ink)} .if-eye{position:absolute;left:7px;width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center} .if-eye:hover,.if-eye[aria-pressed="true"]{color:var(--ink);background:var(--ink-soft)} .ifld:has(.if-eye) .input{padding-left:50px} .lg-card .role-grid{margin-bottom:16px} @media (max-width:960px){.login-form{padding:12px 16px 24px}.lg-head{padding:18px 18px 20px}} /* الاشتراك والفواتير: وسم «الأوفر» على مدة العام الدراسي، كما في صفحة الأسعار */ .per-best{font-size:11px;font-weight:800;color:#7A5A12;background:#F6E7BD;border-radius:999px;padding:1px 8px;margin-inline-start:4px} /* الاشتراك والفواتير: بطاقات الباقات بتصميم صفحة الأسعار (1448/05/16هـ – 2026-10-27م) */ .bp-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding-top:12px} .bp{position:relative;gap:0;padding:22px 20px 20px;border-radius:22px;border:1px solid #DCE7F0;background:radial-gradient(circle at 100% 0,rgba(240,212,138,.4),transparent 130px),radial-gradient(circle at 0 0,rgba(240,212,138,.4),transparent 130px),linear-gradient(170deg,#EAF3FA,#F6F9FC)} [data-theme="dark"] .bp{background:var(--surface);border-color:var(--border)} .bp.top{border:1.5px solid #D9B45A;background:radial-gradient(circle at 100% 0,rgba(240,212,138,.38),transparent 150px),radial-gradient(circle at 0 0,rgba(240,212,138,.3),transparent 150px),linear-gradient(160deg,#3556B4 0%,#2643A0 50%,#1C3486 100%);color:#fff;box-shadow:inset 0 0 0 1px rgba(240,212,138,.25)} .bp.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 35%,transparent)} .bp.top.on{box-shadow:0 0 0 3px #F0D48A} .bp-tag{position:absolute;top:-12px;inset-inline-start:20px;background:#F0D48A;color:#14286A;font-weight:800;font-size:12px;padding:2px 12px;border-radius:999px} .bp-hd{display:flex;align-items:center;gap:10px} .bp-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--ink-soft)} .bp.top .bp-ic{background:rgba(255,255,255,.14)} .bp-n{display:block;font-size:17px} .bp-s{display:block;font-weight:600} .bp.top .bp-s{color:rgba(255,255,255,.78)} .bp-pr{display:flex;align-items:flex-end;gap:8px;margin:18px 0 2px} .bp-p{font-size:46px;line-height:.95;color:var(--ink-deep)} .bp.top .bp-p{color:#fff} .bp-u{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.5;padding-bottom:3px} .bp.top .bp-u{color:rgba(255,255,255,.78)} .bp-eq{font-size:12.5px;font-weight:700;color:#1E8E5A;min-height:19px} .bp.top .bp-eq{color:#9FE3BD} .bp-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 14px;padding:10px 12px;border:0;border-radius:12px;background:rgba(20,39,102,.06);font-size:13px;font-weight:700} .bp-t b{font-size:17px;color:var(--ink-deep)} .bp.top .bp-t{background:rgba(255,255,255,.1)}.bp.top .bp-t b{color:#F0D48A} .bp ul{list-style:none;padding:0;font-size:13.5px;display:flex;flex-direction:column;gap:5px} .bp li{position:relative;padding-inline-start:20px} .bp li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--ink);font-weight:800} .bp.top ul{color:#fff}.bp.top li::before{color:#F0D48A} /* ختم التجارة جنب اسم المؤسسة في التذييل، والختم الأجنبي وحده في مكانه القديم */ .site-foot.foot-3{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .foot-org{text-align:center} .seal-inline{display:inline-flex;align-items:center;vertical-align:middle;line-height:0} .seal-inline .sbc-foot-frame{border:0;display:block} /* شارة السجل الوطني لحماية البيانات الشخصية بجانب ختم التجارة */ .seal-inline{gap:10px} .seal-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:400px;height:52px;text-decoration:none;font-family:Tajawal,system-ui,sans-serif;line-height:1.25;max-width:100%} .seal-badge .sb-t{display:flex;flex-direction:column;justify-content:center} .seal-badge .sb-t b{font-weight:800;white-space:nowrap}.seal-badge .sb-t small{font-weight:500;white-space:nowrap} /* «متجر موثّق» بتصميم ختم المركز السعودي للأعمال الرسمي */ .sb-sbc{gap:10px;padding:0 8px 0 20px;border-radius:999px;background:linear-gradient(160deg,#0A1F63 0%,#081B38 100%);color:#fff;box-shadow:0 4px 14px rgb(8 27 56/.22)} .sb-sbc .sb-chip{flex:none;width:38px;height:38px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center} .sb-sbc .sb-chip img{display:block;width:30px;height:auto} .sb-sbc .sb-t b{font-size:16px;color:#fff}.sb-sbc .sb-t small{font-size:11px;color:#C9D4F2} .sb-sbc:hover{background:linear-gradient(160deg,#0D2780 0%,#0A2148 100%)} /* السجل الوطني لحماية البيانات الشخصية بهوية منصة حوكمة البيانات الوطنية */ .sb-ndgp{gap:12px;padding:0 14px;border-radius:14px;background:#fff;border:1px solid #E3E6EE;color:#1F2A37;box-shadow:0 4px 14px rgb(16 24 40/.08)} .sb-ndgp img{display:block;flex:none;height:32px;width:auto}.sb-ndgp .sb-emb{display:none} .sb-ndgp .sb-t{border-inline-start:1px solid #E3E6EE;padding-inline-start:12px} .sb-ndgp .sb-t b{font-size:12.5px;color:#1F2A37}.sb-ndgp .sb-t small{font-size:11px;color:#5B6475} .sb-ndgp:hover{border-color:#B9C2D6} /* التسجيل في بوابة حصين: بطاقة بيضاء بدرع أخضر مزرق (رمز خاص بنا، لا شعار الهيئة) */ .sb-haseen{gap:12px;padding:0 14px;border-radius:14px;background:#fff;border:1px solid #DCEBE9;color:#1F2A37;box-shadow:0 4px 14px rgb(16 24 40/.08)} .sb-haseen .sb-shield{display:block;flex:none} .sb-haseen .sb-t{border-inline-start:1px solid #DCEBE9;padding-inline-start:12px} .sb-haseen .sb-t b{font-size:13.5px;color:#0B5F59}.sb-haseen .sb-t small{font-size:11px;color:#5B6475} .sb-haseen:hover{border-color:#9FCFC9} @media (max-width:600px){.site-foot.foot-3{flex-direction:column;justify-content:center}.seal-inline,.seal-foot{flex-direction:column;align-items:center;height:auto}.seal-badge{width:300px;max-width:calc(100vw - 32px);height:46px}.sb-sbc{padding:0 6px 0 14px}.sb-sbc .sb-chip{width:34px;height:34px}.sb-sbc .sb-chip img{width:27px}.sb-sbc .sb-t b{font-size:14px}.sb-ndgp{padding:0 10px;gap:10px}.sb-ndgp .sb-logo{display:none}.sb-ndgp .sb-emb{display:block;height:34px}.sb-ndgp .sb-t{padding-inline-start:10px}.sb-ndgp .sb-t b{font-size:12px}.sb-haseen{padding:0 10px;gap:10px}.sb-haseen .sb-t{padding-inline-start:10px}.sb-haseen .sb-t b{font-size:12.5px}} /* أيقونات طرق الدفع في سطر واحد، تبدأ بالتحويل البنكي */ .pay.pay-row ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .pay.pay-row ul::-webkit-scrollbar{display:none} .pay.pay-row li{flex:0 0 auto} /* بطاقات الباقات في الاشتراك: الموروث باهت والجديد بارز، مثل الصفحة التعريفية */ .plan ul li.inh{opacity:.5;font-weight:800} .plan ul li.own{font-weight:800} .plan ul li.inc{opacity:1;font-weight:800;margin-top:4px} .plan ul li.inh-h{opacity:.6} .plan ul li.new-h{color:var(--ink)} .plan.top ul li.new-h{color:#F0D48A} /* ختم التوثيق العائم في الدخول والتجهيز: يتحرك مع الصفحة ويفتح صفحة الشهادة */ .seal-float{position:fixed;bottom:18px;right:18px;left:auto;z-index:49;line-height:0;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgb(0 0 0/.18)} .seal-float .sbc-foot-frame{display:block;border:0;width:120px;height:44px} /* شارة سدايا عائمة فوق ختم التجارة في الدخول والتجهيز والصفحة التعريفية */ .seal-stack{position:fixed;bottom:18px;right:18px;left:auto;z-index:49;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .seal-stack .seal-badge{box-shadow:0 6px 18px rgb(0 0 0/.16)} /* الجوال: الختمان في آخر الصفحة بدل أن يطفوا فوق نصوصها */ @media (max-width:600px){.seal-stack{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;padding:16px 16px 4px}.seal-stack .seal-badge{box-shadow:none}.site-foot{padding-bottom:84px}} /* عنصر جاهز في التطبيق ينتظر إرسال المدير: ليس ناقصًا ولا متحققًا */ .pp-row.ready .pp-st { background: var(--blue-soft, color-mix(in srgb, var(--blue) 12%, transparent)); color: var(--blue); } .pp-src.pp-ready { color: var(--blue); font-weight: 700; } .pf-warn.pf-ready { border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); } .pf-warn.pf-ready .pf-link { color: var(--blue); } /* حضور المعلمين: خط تجوال عريض أسود، وبطاقة إعدادات مرتبة بخلفية واضحة، وجدول بعرض محتواه وكل خانة في سطر */ .tj, .tj td, .tj th, .tj label, .tj .input, .tj p { font-family: Tajawal, Almarai, system-ui, sans-serif; font-weight: 700; color: var(--text); } .ta-set { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); padding: 12px 16px; } .ta-set .ta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .ta-set .ta-row .field { flex-direction: row; align-items: center; gap: 8px; } .ta-set .ta-row .input { width: auto; padding: 5px 10px; } .ta-set .ta-sec { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } .ta-set .ta-h { font-size: 14.5px; font-weight: 800; margin: 0 0 8px; } .ta-toggles { display: flex; flex-wrap: wrap; gap: 8px 24px; } .ta-toggles label, .ta-time label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; } .ta-time { display: flex; flex-wrap: wrap; gap: 8px 28px; } .ta-time .ta-in { width: 120px; height: 34px; padding: 4px 8px; font-size: 14px; text-align: center; } .ta-time input[type=number].ta-in { width: 64px; -moz-appearance: textfield; } .ta-time input[type=number].ta-in::-webkit-inner-spin-button, .ta-time input[type=number].ta-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ta-note { font-size: 13px; line-height: 1.7; margin: 8px 0 0; } .ta-tbl { width: 100%; } .ta-tbl th, .ta-tbl td { white-space: nowrap; } /* منتقي الوقت بأسلوب منبّه الجوال: عجلات الساعة والدقيقة وص/م، والمختار في الشريط الأوسط */ .ta-clock { font: 800 15px Tajawal, Almarai, system-ui, sans-serif; color: var(--text); background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: 10px; padding: 6px 14px; cursor: pointer; direction: rtl; } .ta-clock:hover { border-color: var(--ink, var(--primary)); } .alarm { position: relative; display: flex; justify-content: center; gap: 6px; direction: ltr; height: 200px; margin: 6px auto; max-width: 280px; } .alarm::before { content: ''; position: absolute; inset-inline: 0; top: 80px; height: 40px; border-radius: 10px; background: var(--surface-2, rgba(0,0,0,.05)); border: 1px solid var(--border); pointer-events: none; } .alarm-col { position: relative; flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; padding: 80px 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); } .alarm-col::-webkit-scrollbar { display: none; } .alarm-col > div { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center; font: 700 22px Tajawal, Almarai, system-ui, sans-serif; color: var(--muted); cursor: pointer; } .alarm-col > div.on { color: var(--text); font-weight: 800; font-size: 26px; } /* شارة حالة حضوري في حضور المعلمين: كبيرة واضحة، خضراء إذا اتصل وحمراء إذا انقطع */ .hud-badge { font: 800 15px Tajawal, Almarai, system-ui, sans-serif; padding: 8px 16px; border-radius: 999px; } .hud-badge, .hud-badge.b-green, .hud-badge.b-red, .hud-badge.b-gray { background: transparent; padding-inline: 0; } .hud-badge.b-green { color: #12805C; } .hud-badge.b-red { color: #C62828; } /* رابط العودة للرئيسية في رأس كل صفحة: بأيقونة القائمة الجانبية وخطها */ .page-head .home-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--border); background: var(--surface); white-space: nowrap; } .page-head .actions ~ .home-link { margin-inline-start: 0; } .page-head .home-link:hover { color: var(--text); background: var(--surface-2, var(--surface)); } /* عناوين حقول النماذج في كل الموقع: تجوال عريض */ label.field { font-family: Tajawal, Almarai, system-ui, sans-serif; font-weight: 700; } label.field :is(input, select, textarea) { font-family: "Almarai", system-ui, sans-serif; font-weight: 400; } /* زر كحلي ممتلئ للتمييز (إنشاء المساءلات، وإضافة مدرسة بلس) في كل التصاميم */ .btn.hot, html[class] .btn.hot { background: #1F3A93 !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 12px rgba(31,58,147,.25); } .btn.hot:hover { filter: brightness(1.08); } /* العرض التوضيحي عند الدخول (intro-tour.js) */ .it-wrap{position:fixed;inset:0;z-index:9999;pointer-events:none} .it-ring{position:fixed;border-radius:12px;box-shadow:0 0 0 4px var(--primary),0 0 0 9999px rgba(10,20,50,.45);transition:all .45s ease;pointer-events:none} .it-ghost{position:fixed;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--card,#fff);color:var(--text,#111);border:2px dashed var(--primary);box-shadow:0 12px 30px rgba(0,0,0,.25);font-weight:700;transition:transform 2.2s ease;z-index:9001} .it-card{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);width:min(440px,calc(100vw - 32px));background:var(--card,#fff);color:var(--text,#111);border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.3);pointer-events:auto;z-index:9002} [dir="ltr"] .it-card{transform:translateX(-50%)} .it-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .it-t{font-size:17px} .it-d{margin:8px 0 12px;line-height:1.9;font-size:14.5px} .it-bar{height:6px;border-radius:6px;background:var(--primary-soft);overflow:hidden} .it-bar i{display:block;height:100%;width:0;background:var(--primary)} .it-left{display:block;margin-top:6px;color:var(--muted,#667);font-size:12px} .dash-tools.it-pulse{opacity:1!important;outline:3px solid var(--primary);outline-offset:3px;border-radius:8px} .it-ring[hidden],.it-ghost[hidden]{display:none} @media (prefers-reduced-motion:reduce){.it-ring,.it-ghost{transition:none}} /* أيقونات طرق الدفع في الاشتراك: بشكل صفحة الدخول نفسه */ .pay ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .pay li{height:34px;min-width:64px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:14px;color:#1c2033;direction:ltr} .pm-mada{color:#1D74BB!important;font-size:15px!important} .pm-visa{color:#1A1F71!important;font-style:italic;letter-spacing:.5px} .pm-mc i{width:14px;height:14px;border-radius:50%;background:#EB001B;display:inline-block}.pm-mc i+i{background:#F79E1B;margin-inline-start:-7px;margin-inline-end:4px;opacity:.9} .pm-mc{font-size:12.5px!important} .pm-apple{background:#000!important;color:#fff!important;border-color:#000!important} .pm-stc{color:#4F008C!important} .pm-gpay b{color:#4285F4} .pm-bank{direction:rtl!important;color:var(--ink-deep)!important} /* زر في الزاوية اليسرى من سطر عنوان الصفحة (تقرير حضوري) */ @media (min-width: 700px) { .page-head:has(> .ph-corner) { position: relative; } .page-head > .ph-corner { position: absolute; top: 0; inset-inline-end: 0; } .page-head:has(> .ph-corner) > .ph-main { padding-inline-end: 150px; } } /* أزرار التشغيل في «ما يتم تلقائيًا» بلون واحد في كل التصاميم (لون «العصري الهادئ») */ .ta-set .switch input:checked+span, html[class] .ta-set .switch input:checked+span { background: #5B4BDB; } /* حضور المعلمين: زر «⚙️ الإعدادات» تنسدل منه أزرار الاستيراد وبطاقة الإعداد وقوالب الرسائل */ .ta-menu { position: static; } .page-head:has(.ta-menu) { position: relative; } .ta-menu > summary { list-style: none; cursor: pointer; } .ta-menu > summary::-webkit-details-marker { display: none; } .ta-menu-panel { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; width: auto; max-height: 75vh; overflow: auto; box-shadow: 0 14px 34px rgba(0,0,0,.18); } .ta-imp { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .ta-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 8px; } @media (max-width: 700px) { .ta-tpls { grid-template-columns: 1fr; } .ta-menu-panel { position: fixed; inset-inline: 16px; top: 70px; width: auto; } } /* قائمة «⚙️ الإعدادات»: أقسام مرتبة بلا إطار داخل إطار */ .ta-menu-panel { padding: 16px 18px; } .ta-menu-panel .ta-set { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; } .ta-menu-panel .ta-imp { padding-bottom: 12px; margin-bottom: 0; border-bottom: 1px solid var(--border); } .ta-menu-panel .ta-set .ta-row { padding-top: 12px; } .ta-menu-panel .ta-imp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ta-menu-panel .ta-imp .btn { justify-content: center; width: 100%; } @media (max-width: 700px) { .ta-menu-panel .ta-imp { grid-template-columns: 1fr 1fr; } } /* حضور المعلمين: «⚙️ الإعدادات» في سطر مستقل فوق الأيقونات، وقائمتها بعرض الصفحة، وأزرارها لا تتداخل */ .ta-bar { position: relative; margin: 0 0 14px; } .ta-bar .ta-menu-panel { inset-inline: 0; } .ta-menu-panel .ta-imp { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .ta-menu-panel .ta-imp .btn { white-space: normal; height: auto; min-height: 44px; line-height: 1.4; text-align: center; } @media (max-width: 700px) { .ta-menu-panel .ta-imp { grid-template-columns: 1fr; } } /* حضور المعلمين: «الإعدادات» بحجم تبويب «حاضر» فوقه، و«لوحة القيادة» أقصى اليسار فوق «غائب»، والقائمة لوحة ثابتة تنفتح تحته */ .ta-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ta-bar > .ta-menu { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .ta-bar > .ta-menu > summary { grid-column: 1; min-height: 67px; justify-content: center; font-size: 17px; border-radius: 16px; } .ta-bar > .ta-menu::details-content { grid-column: 1 / -1; } .ta-bar > .ta-menu > summary { align-self: start; } .ta-bar > .home-link { grid-column: -2 / -1; grid-row: 1; justify-self: end; align-self: start; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); border: 1px solid var(--border); background: var(--surface); white-space: nowrap; } .ta-bar > .home-link:hover { color: var(--text); } .ta-bar .ta-menu-panel { position: static; grid-column: 1 / -1; max-height: none; overflow: visible; box-shadow: none; } .ta-menu-panel .ta-imp { grid-template-columns: repeat(3, 1fr); } .ta-menu-panel .ta-sec .ta-toggles { flex-wrap: nowrap; gap: 8px 18px; } @media (max-width: 900px) { .ta-menu-panel .ta-sec .ta-toggles { flex-wrap: wrap; } } @media (max-width: 700px) { .ta-bar .ta-menu-panel { position: static; inset: auto; } .ta-menu-panel .ta-imp { grid-template-columns: 1fr 1fr 1fr; } .ta-menu-panel .ta-imp .btn { font-size: 12px; padding: 6px; } } @media (max-width: 500px) { .ta-bar, .ta-bar > .ta-menu { grid-template-columns: 1fr 1fr; } } /* «التقويم الذاتي» و«خطة التحسين» تحت «ملف الإنجاز» أعلى القائمة الجانبية: مزاحتان لتظهرا تابعتين له */ .nav a[data-id="selfeval"], .nav a[data-id="improve"], .nav a[data-id="opplan"] { padding-inline-start: 34px; font-size: 13.5px; } /* التوضيحات في كل الصفحات واللوحات: أغمق وأعرض قليلًا لتُقرأ بسهولة */ #view .page-head p, #view p.muted, #view p.small.muted, #view .ta-note, #view .small.muted:not(td *):not(.t2):not(.badge) { color: var(--text); font-weight: 600; } /* القائمة الجانبية: أسماء الصفحات بالأسود وبخط أعرض قليلًا */ .nav a { color: var(--text); font-weight: 700; } /* زر العودة لترتيب القائمة الافتراضي (يظهر بعد ترتيبها بالسحب) */ .sb-reset { display: block; width: 100%; margin: 6px 0 0; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; } .sb-reset:hover { color: var(--text); border-color: var(--ink); } /* لوحة توقيت اليوم: خط «المسيري» عريض، و«ص/م» صغيرة بجانب الساعة */ .lh-mini, .lh-mini .lm-k, .lh-mini .lm-t, .lh-mini .lm-n, .lh-mini b { font-family: "El Messiri", "Almarai", sans-serif; font-weight: 700; } .lh-mini .lm-n { white-space: nowrap; } .lh-mini .lm-ap { font-size: .42em; font-weight: 700; margin-inline-start: 3px; opacity: .9; } .sb-reset { font-family: "El Messiri", "Almarai", sans-serif; font-weight: 700; font-size: 13px; } .sb-reset { background: #1F3A93; color: #fff; border: 0; padding: 8px 12px; } .sb-reset:hover { background: #142766; color: #fff; } /* الساعة والعدّادات لا تهتز مع تغير الأرقام: أرقام متساوية العرض وعرض ثابت */ .lh-mini .lm-n, .lh-mini .dh-n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .lh-mini .lm-timer .lm-n { display: inline-block; min-width: 6.2em; text-align: center; } .lh-mini .dh-n { display: inline-block; min-width: 3.4em; text-align: end; } /* زر «↺ الترتيب الافتراضي» في لوحة القيادة مثل زر القائمة: كحلي بخط المسيري */ .dp-reset { font-family: "El Messiri", "Almarai", sans-serif !important; font-weight: 700 !important; font-size: 13px; background: #1F3A93 !important; color: #fff !important; border: 0 !important; border-radius: 10px; padding: 6px 12px; cursor: pointer; } .dp-reset:hover { background: #142766 !important; } /* زر الترتيب الافتراضي لا يقع تحت أدوات سحب القسم (⠿ ▲ ▼) في الزاوية اليسرى */ .dash-pins .dp-reset { margin-inline-end: 6px; align-self: flex-start; margin-top: 30px; } @media (hover: none) { .dash-pins .dp-reset { margin-top: 30px; } } /* بطاقة «حضور اليوم»: أدوات سحب القسم فوق البطاقة خارجها لا على حافتها */ section.today.dash-blk { margin-top: 44px; } section.today.dash-blk > .dash-tools { top: -36px; }