/* حضور المعلمين: خط تجوال عريض أسود، وبطاقة إعدادات مرتبة بخلفية واضحة، وجدول بعرض محتواه وكل خانة في سطر */
.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-reset-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.dash-pins > .dash-tools { position: static; width: max-content; margin: 0 0 8px; margin-inline-start: auto; }
/* بطاقة «حضور اليوم»: أدوات سحب القسم فوق البطاقة خارجها لا على حافتها */
section.today.dash-blk { margin-top: 44px; }
section.today.dash-blk > .dash-tools { top: -36px; }
/* أهداف لمس مريحة على الجوال (44px): أزرار الأيقونات في الشريط العلوي، والأزرار الصغيرة ومجموعات الإجراءات في الجداول */
@media (max-width: 640px), (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .demo-pick { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .acts > .btn.sm { width: 40px; height: 40px; }
}
/* الأختام داخل عمود الدخول: في مكانها تحت البطاقة، لا تطفو فوق الحقول */
.seal-stack.seal-inflow{position:static;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:20px 0 6px;padding:0}
.seal-stack.seal-inflow .seal-badge{box-shadow:none;max-width:100%}
/* شريط الجولة: زر الإخفاء، وفي الجوال سطر واحد مضغوط لا يأكل أسفل الشاشة، وآخر التذييل لا يبقى وراءه */
#ss-tour .tour-x{background:transparent;border:0;color:#fff;font-size:16px;line-height:1;padding:4px 6px;cursor:pointer;opacity:.85}
#ss-tour .tour-x:hover{opacity:1}
html.has-tour .site-foot{margin-bottom:12px}
@media (max-width:600px){#ss-tour{flex-wrap:nowrap;gap:8px;padding:6px 10px;font-size:12px;justify-content:space-between}#ss-tour span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}#ss-tour .btn{padding:4px 10px;font-size:12px;white-space:nowrap;flex:none}}