/* ========================================================================== quran-center.css — ورقة التنسيق الوحيدة (تُخدَم عبر /assets/quran-center.css). دُمج فيها ما كان `ikd-redesign.css` كقسم في النهاية؛ ترتيب الطبقات القديم محفوظ. خريطة التتالي (selectors مكرّرة عبر القسمين — أيّها المرجعي): - .app-shell / .app-sidebar / .app-content__inner : المرجع = تعريفات `.ikd-redesign …` (خصوصية (0,2,0)+، وأحدث مصدرًا). التعريفات القديمة بلا `.ikd-redesign` تُهزَم. - .daily-record-table .student-row.is-editing : كتلة أساس + استكمالات لاحقة، كلها بنفس المُحدِّد، تتراكم بترتيب المصدر. لوحة التحرير تُنقَل بجافاسكربت إلى #daily-record-editor-portal في (P0). - .data-table / .table : `min-width: 720px` من `.ikd-redesign .table`؛ وضع البطاقات على الجوال يتفوّق عليه بـ `table.data-table--cards` (P2). نقاط تبديل الاستجابة: - هيكل التطبيق (app-shell + القائمة الجانبية + تخطيطات اللوحات): @media max-width 1024px (P1). يجب أن تطابقها `window.matchMedia` في `layouts/app.blade.php`. - صفحات الهبوط/الدخول/إعدادات الهوية: 1024px أيضًا. - صفحة القراءات (كثيفة): 1180px عمدًا (مستقلة). - وضع بطاقات الجداول على الجوال: @media max-width 640px (P2). تنظيف التكرارات الكامل بين القسمين مؤجَّل كمشروع مستقل — لا تُضِف تعريفًا جديدًا إلا مرة واحدة هنا. ========================================================================== */ :root { --brand-primary: #4F5A3A; --brand-primary-dark: #394229; --brand-primary-light: #EEF2E6; --brand-secondary: #C8A96A; --brand-secondary-dark: #A88B4A; --brand-secondary-light: #F4E8C9; --brand-accent: #B89655; --brand-bg: #FAF7EF; --brand-bg-soft: #F6F0E4; --brand-surface: #FFFDF8; --brand-surface-muted: #F9F4EA; --brand-text: #1F1B16; --brand-text-muted: #756D60; --brand-border: #E8DDC8; --brand-success: #4F6F45; --brand-warning: #C79A3B; --brand-danger: #B45A4A; --brand-info: #607D8B; --brand-font-heading: "IBM Plex Sans Arabic", "Tajawal", "Cairo", sans-serif; --brand-font-body: "IBM Plex Sans Arabic", "Tajawal", "Cairo", sans-serif; --brand-radius-card: 24px; --brand-radius-control: 14px; --qc-bg: var(--brand-bg); --qc-surface: var(--brand-surface); --qc-text: var(--brand-text); --qc-muted: var(--brand-text-muted); --qc-border: var(--brand-border); --qc-primary: var(--brand-primary); --qc-primary-dark: var(--brand-primary-dark); --qc-success: var(--brand-success); --qc-danger: var(--brand-danger); --qc-warning: var(--brand-warning); --qc-info: var(--brand-info); --qc-shadow: 0 10px 30px rgba(31, 27, 22, .07); --qc-shadow-soft: 0 8px 22px rgba(31, 27, 22, .045); --qc-safe-top: env(safe-area-inset-top, 0px); --qc-safe-right: env(safe-area-inset-right, 0px); --qc-safe-bottom: env(safe-area-inset-bottom, 0px); --qc-safe-left: env(safe-area-inset-left, 0px); --qc-viewport-height: 100vh; } @supports (height: 100dvh) { :root { --qc-viewport-height: 100dvh; } } @supports (-webkit-touch-callout: none) { html, body { min-height: -webkit-fill-available; } } * { box-sizing: border-box; } html { min-height: 100%; overflow-x: hidden; } body { position: relative; margin: 0; min-height: 100%; overflow-x: hidden; background: linear-gradient(135deg, rgba(200, 169, 106, .10), transparent 32%), linear-gradient(315deg, rgba(79, 90, 58, .08), transparent 34%), var(--qc-bg); color: var(--qc-text); font-family: var(--brand-font-body); line-height: 1.65; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; } body::before { background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); background-size: 112px 112px; opacity: .035; mask-image: linear-gradient(135deg, var(--brand-text), transparent 38%, transparent 64%, var(--brand-text)); } body::after { background: linear-gradient(0deg, rgba(31, 27, 22, .016) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 27, 22, .012) 1px, transparent 1px); background-size: 42px 42px; opacity: .45; } .app-navbar, .app-shell, main.container, .flash-stack { position: relative; z-index: 2; } .brand-page-ornament { position: fixed; z-index: 1; display: block; pointer-events: none; background-repeat: no-repeat; background-size: contain; } .brand-page-ornament--top { top: 82px; right: 26px; width: 240px; height: 270px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); opacity: .16; } .brand-page-ornament--bottom { bottom: 10px; left: 16px; width: 270px; height: 270px; background-image: url("/assets/brand/ikd/patterns/sidebar-ornament.png"); opacity: .13; } .brand-page-ornament--pattern { top: 22%; left: -74px; width: 160px; height: 430px; background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); opacity: .065; } .public-shell .brand-page-ornament--top, .auth-page .brand-page-ornament--top, .landing-page .brand-page-ornament--top { opacity: .60; } .public-shell .brand-page-ornament--bottom, .auth-page .brand-page-ornament--bottom, .landing-page .brand-page-ornament--bottom { opacity: .52; } .auth-page .brand-page-ornament--pattern, .landing-page .brand-page-ornament--pattern { opacity: .18; } .has-app-shell .brand-page-ornament--top { width: 150px; height: 165px; opacity: .075; } .has-app-shell .brand-page-ornament--bottom { width: 185px; height: 178px; opacity: .06; } .has-app-shell .brand-page-ornament--pattern { opacity: .035; } h1, h2, h3, h4, h5, h6, .page-title, .navbar-brand { font-family: var(--brand-font-heading); letter-spacing: 0; } a { color: var(--qc-primary); text-decoration: none; } a:hover { color: var(--qc-primary-dark); text-decoration: underline; } button, input, select, textarea { font: inherit; } button, [type="button"], [type="submit"], [type="reset"], input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { -webkit-appearance: none; appearance: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--qc-primary); } .container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; } .py-3 { padding-block: 1rem; } .py-2 { padding-block: .5rem; } .py-4 { padding-block: 1.5rem; } .py-5 { padding-block: 3rem; } .p-3 { padding: 1rem; } .p-4 { padding: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-20 { margin-top: 1.25rem; } .me-2 { margin-inline-end: .5rem; } .ms-2 { margin-inline-start: .5rem; } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .text-nowrap { white-space: nowrap; } .text-muted { color: var(--qc-muted) !important; } .text-success { color: var(--qc-success) !important; } .text-danger { color: var(--qc-danger) !important; } .text-warning { color: var(--qc-warning) !important; } .text-info { color: var(--qc-info) !important; } .fw-bold { font-weight: 700; } .fw-semibold { font-weight: 600; } .fw-normal { font-weight: 400; } .small, small { font-size: .86rem; } .muted { color: var(--qc-muted); } .w-100 { width: 100%; } .h-100 { height: 100%; } .min-w-0 { min-width: 0; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mb-1 { margin-bottom: .25rem; } .mb-5 { margin-bottom: 3rem; } .my-2 { margin-block: .5rem; } .my-3 { margin-block: 1rem; } .mx-auto { margin-inline: auto; } .me-auto { margin-inline-end: auto; } .ms-auto { margin-inline-start: auto; } .p-0 { padding: 0; } .p-1 { padding: .25rem; } .p-2 { padding: .5rem; } .p-5 { padding: 3rem; } .pt-2 { padding-top: .5rem; } .pt-3 { padding-top: 1rem; } .pb-2 { padding-bottom: .5rem; } .pb-3 { padding-bottom: 1rem; } .rounded { border-radius: var(--brand-radius-control); } .rounded-3 { border-radius: var(--brand-radius-card); } .border { border: 1px solid var(--qc-border) !important; } .border-top { border-top: 1px solid var(--qc-border) !important; } .border-bottom { border-bottom: 1px solid var(--qc-border) !important; } .border-primary { border-color: var(--qc-primary) !important; } .border-success { border-color: var(--qc-success) !important; } .border-warning { border-color: var(--qc-warning) !important; } .border-danger { border-color: var(--qc-danger) !important; } .border-info { border-color: var(--qc-info) !important; } .border-0 { border: 0 !important; } .overflow-auto { overflow: auto; } .content-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); padding: 1.2rem; } .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; } .detail-grid div { display: grid; gap: .2rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .detail-grid dt { color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; } .detail-grid span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; } .detail-grid dd { margin: 0; color: var(--brand-text); font-weight: 800; } .responsive-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .list-row, .timeline-row { padding: .85rem 0; border-bottom: 1px solid var(--brand-border); } .list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .list-row--stacked { display: grid; align-items: start; justify-content: stretch; } .list-row:last-child, .timeline-row:last-child { border-bottom: 0; } .timeline-row p { margin: 0 0 .35rem; } /* AR: يحافظ على الحجم البصري لعنوان الصف (كان h3) بعد ترقيته دلاليًا إلى h2 لإصلاح ترتيب العناوين (heading-order) - بلا تغيير مرئي واسع في صفحة أولياء الأمور. EN: Preserves the row title's visual size (was h3) after promoting it semantically to h2 to fix the heading-order violation - no wide visual change on the parents page. */ .list-row-title { font-size: 1.17em; } .pagination-wrap { margin-top: 1rem; } .inline-action-form { display: inline-flex; align-items: center; gap: .45rem; margin: .25rem; } .alert-list { margin-top: .5rem; margin-bottom: 0; } .table-row-unread { background: var(--brand-primary-light); } .minw-180 { min-width: 180px; } .minw-220 { min-width: 220px; } .minw-240 { min-width: 240px; } .minw-260 { min-width: 260px; } .minw-360 { min-width: 360px; } .w-60 { width: 60px; } .w-140 { width: 140px; } .w-160 { width: 160px; } .w-180 { width: 180px; } .w-220 { width: 220px; } .w-260 { width: 260px; } .maxw-70 { max-width: 70px; } .maxw-90 { max-width: 90px; } .maxw-110 { max-width: 110px; } .maxw-130 { max-width: 130px; } .maxw-220 { max-width: 220px; } .audit-json { font-size: .75rem; direction: ltr; text-align: left; white-space: pre-wrap; max-height: 260px; overflow: auto; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-surface-muted) 64%, #fff); color: var(--brand-text); margin: 0; } .audit-log-table details { max-width: 520px; } .audit-details summary { cursor: pointer; font-weight: 800; color: var(--brand-primary-dark); } .audit-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; } .audit-detail-grid h3 { font-size: .82rem; margin: 0 0 .35rem; color: var(--brand-text-muted); } .audit-detail-grid__full { grid-column: 1 / -1; } .audit-source-stack { display: flex; flex-wrap: wrap; gap: .35rem; } .audit-filter-form .field--actions { align-items: end; display: flex; gap: .5rem; flex-wrap: wrap; } .admin-surface { /* AR: width:100% ضروري — هذا العنصر عنصر شبكة (grid item) داخل .app-content__inner، و margin-inline:auto وحده على عنصر شبكة بلا عرض صريح يلغي التمدد ويُقلّص العنصر إلى عرض محتواه (fit-content) ويوسّطه. ظهر ذلك كصفحة "مضغوطة كالجوال" في صفحات ضيقة المحتوى مثل /services/{service}. نفس إصلاح .teacher-affairs-surface (PR #80). */ /* EN: width:100% is required — this is a grid item of .app-content__inner, and an auto inline-margin on a grid item without an explicit width cancels the stretch, collapsing the box to fit-content and centring it. Showed up as a narrow "mobile-looking" column on content-light pages such as /services/{service}. */ width: 100%; max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .admin-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .admin-metric { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .admin-metric span { color: var(--brand-text-muted); font-weight: 800; } .admin-metric strong { color: var(--brand-primary-dark); font-size: 2rem; line-height: 1; } .admin-metric--warning { border-color: color-mix(in srgb, var(--brand-warning) 32%, var(--brand-border)); } .admin-metric--success { border-color: color-mix(in srgb, var(--brand-success) 32%, var(--brand-border)); } .admin-metric--danger { border-color: color-mix(in srgb, var(--brand-danger) 32%, var(--brand-border)); } .platform-access-map { margin-top: 1rem; } .platform-access-map__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .platform-access-map__section { display: grid; align-content: start; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--brand-border) 88%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--brand-surface) 94%, var(--brand-bg-soft)); } .platform-access-map__header { display: grid; gap: .35rem; } .platform-access-map__header h3 { margin: 0; color: var(--brand-primary-dark); font-size: 1.05rem; } .platform-access-map__header p { margin: 0; color: var(--brand-text-muted); font-size: .92rem; line-height: 1.8; } .platform-access-map__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .platform-access-map__link { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; min-height: 76px; padding: .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); color: var(--brand-text); text-decoration: none; } .platform-access-map__link:hover { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary-light) 72%, var(--brand-surface)); color: var(--brand-primary-dark); text-decoration: none; } .platform-access-map__link span { display: grid; gap: .25rem; min-width: 0; } .platform-access-map__link strong { line-height: 1.35; } .platform-access-map__link small { color: var(--brand-text-muted); line-height: 1.55; } .platform-access-map__link em { flex: 0 0 auto; min-width: 2rem; padding: .18rem .45rem; border-radius: 999px; background: var(--brand-primary-light); color: var(--brand-primary-dark); font-size: .76rem; font-style: normal; font-weight: 900; text-align: center; } .platform-access-map__link--disabled { opacity: .62; } @media (max-width: 1100px) { .platform-access-map__grid, .platform-access-map__links { grid-template-columns: 1fr; } } .admin-form { display: grid; gap: 1rem; } .admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } .admin-form-grid__full { grid-column: 1 / -1; } /* AR: كل حاويات شبكات النماذج تُحاذي حقولها لأعلى. عناصر `.field` كلها `display:grid` (عنوان فوق حقل)؛ بلا هذا السطر تُمطّ الحقولُ الأقصر لارتفاع أطول خلية في الصف (حقل فيه `` تلميحي أو رسالة خطأ تحقّق)، فيوزّع `align-content` الافتراضي الفراغَ داخل مسار العنوان ← فجوة كبيرة بين العنوان وحقله. أُصلح سابقًا قطعةً‑قطعة في `.teacher-form-grid` و `.admission-workspace .admin-form-grid`؛ هذه القاعدة تعمّمه. EN: form-field grids align items to the top so shorter fields don't stretch and open a label↔control gap when a sibling field is taller. */ .admin-form-grid, .form-grid, .exam-form-grid, .committee-form-grid, .halaqah-form-grid, .plan-form-grid, .teacher-form-grid, .recitations-page .form-grid, .platform-support-review-form .admin-form-grid { align-items: start; } .admin-page .content-card { display: grid; gap: .9rem; } .admin-page .content-card .table-responsive { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow-soft); overflow: hidden; } .admin-page .content-card > .table-responsive:first-child { margin-top: 0; } .admin-page .table { margin-bottom: 0; } .admin-page .table th { color: var(--brand-text-muted); font-weight: 900; white-space: nowrap; } .admin-page .inline-action-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .admin-page .inline-action-form input, .admin-page .inline-action-form select, .admin-page .admin-form input, .admin-page .admin-form select, .admin-page .admin-form textarea { border-color: var(--brand-border); border-radius: var(--brand-radius-control); } .admin-page .inline-action-form input:focus, .admin-page .inline-action-form select:focus, .admin-page .admin-form input:focus, .admin-page .admin-form select:focus, .admin-page .admin-form textarea:focus { outline: 0; border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--brand-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .institution-application-list .list-row h5 { margin: 0; color: var(--brand-primary-dark); font-size: 1.05rem; font-weight: 900; } .admissions-surface, .printable-report-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .admissions-surface { grid-template-columns: minmax(0, 1fr); } .admissions-page .card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .admissions-page .card-header { border-bottom: 1px solid var(--brand-border); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 900; } .admissions-page .card-body { padding: 1.15rem; } .admissions-page .border, .admissions-page .border-bottom { border-color: var(--brand-border) !important; } .admission-status-card { color: var(--brand-text); text-decoration: none; transition: transform .2s ease, border-color .2s ease; } .admission-status-card:hover { border-color: var(--brand-primary); color: var(--brand-text); text-decoration: none; transform: translateY(-2px); } .admission-portal { display: grid; gap: 1rem; } .admission-portal form { display: grid; gap: 1rem; } .admission-portal .content-card { position: relative; overflow: hidden; } .admission-portal .content-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); opacity: .86; } .admission-portal .section-heading { align-items: center; padding-bottom: .85rem; border-bottom: 1px solid var(--brand-border); } .admission-portal .section-heading h2, .admission-portal .section-heading strong { color: var(--brand-primary-dark); font-size: 1.05rem; } .admission-portal .field, .admissions-page .field { display: grid; gap: .35rem; } .admission-portal .field label, .admissions-page .field label { color: var(--brand-text); font-weight: 900; } .admission-review-surface .content-card > div > h5, .admission-review-surface .content-card .section-heading h2 { color: var(--brand-primary-dark); font-size: 1.08rem; font-weight: 900; } .admission-review-surface .content-card > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; } .admission-review-surface .content-card > div > h5, .admission-review-surface .content-card > div > h6, .admission-review-surface .content-card > div > .section-heading, .admission-review-surface .content-card > div > .alert, .admission-review-surface .content-card > div > hr, .admission-review-surface .content-card > div > form, .admission-review-surface .content-card > div > .table-responsive, .admission-review-surface .content-card > div > .text-muted, .admission-review-surface .content-card > div > div:not(.border) { grid-column: 1 / -1; } .admission-review-surface .content-card > div > p, .admission-portal .admin-form .field p { margin: 0; padding: .7rem .8rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); color: var(--brand-text); } .admission-review-surface .content-card > div > p + p { margin-top: 0; } .admission-review-surface .content-card > div > p strong, .admission-portal .admin-form .field p strong { display: inline-block; margin-inline-end: .35rem; color: var(--brand-text-muted); font-size: .86rem; } .admission-review-surface .content-card .border.rounded { display: grid; gap: .5rem; border-color: var(--brand-border) !important; border-radius: var(--brand-radius-control) !important; background: var(--brand-surface-muted); } .admission-review-surface .content-card .border.rounded p { margin: 0; } .admission-review-surface .content-card > div > form { display: grid; gap: .85rem; } .admission-review-surface .content-card > div > form + form, .admission-review-surface .content-card > div > form + .mb-3 { margin-top: 1rem; } .settings-surface, .permissions-surface, .institution-users-surface, .attendance-excuses-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .settings-page .card, .permissions-page .card, .institution-users-page .card, .attendance-excuses-page .card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .settings-page .card-header, .permissions-page .card-header, .attendance-excuses-page .card-header { border-bottom: 1px solid var(--brand-border); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 900; } .settings-link-grid { display: flex; flex-wrap: wrap; gap: .55rem; } .settings-page .content-card { display: grid; gap: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .settings-surface > form { display: grid; gap: 1rem; } .settings-page .content-card .table-responsive { border-radius: var(--brand-radius-card); box-shadow: none; overflow: auto; } .settings-page .content-card.table-responsive { padding: 0; overflow: auto; } .riwayat-add-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .riwayat-add-form .form-control { flex: 1 1 260px; } .riwayat-move-cell { display: flex; flex-direction: column; gap: .3rem; align-items: center; } .riwayat-move-form { margin: 0; } .riwayat-rename-form { display: inline-flex; gap: .4rem; align-items: center; margin-inline-end: .5rem; } .riwayat-rename-form .form-control { max-width: 14rem; } .settings-page .table { min-width: 860px; margin-bottom: 0; } .settings-page .content-card .admin-form, .settings-page .content-card .field { display: grid; gap: .45rem; } .settings-page .form-check { display: flex; align-items: flex-start; gap: .55rem; min-height: 48px; margin: 0; padding: .75rem .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .settings-page .form-check-input { flex: 0 0 auto; margin: .15rem 0 0; } .settings-page .form-check-label { color: var(--brand-text); font-weight: 800; } .settings-page .form-switch { padding-inline-start: .85rem; padding-inline-end: .85rem; } .settings-page .settings-item-panel { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .settings-page .settings-item-panel h5 { margin: 0; color: var(--brand-primary-dark); font-weight: 900; } .settings-page form > .form-actions { display: flex; justify-content: flex-start; } .field--actions { align-self: end; } .field--actions .btn { width: 100%; } .parent-surface, .indicators-surface, .institution-structure-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .parent-register-surface { max-width: 720px; } .parent-register-card { padding: 1.5rem; } .parent-dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; } .parent-dashboard-page .content-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .parent-dashboard-page .content-card.table-responsive { padding: 0; overflow: auto; } .parent-dashboard-page .content-card > .table-responsive { box-shadow: none; } .parent-dashboard-page .content-card .table { min-width: 780px; margin-bottom: 0; } .parent-dashboard-page .admin-form, .parent-dashboard-page .field { display: grid; gap: .45rem; } .parent-dashboard-page .responsive-card-grid > .content-card { display: grid; align-content: start; gap: .9rem; } .parent-dashboard-page .section-heading { align-items: center; } .parent-dashboard-page .detail-grid > div, .parent-child-card .detail-grid > div { border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .parent-child-card { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 58%, transparent), transparent 64%), var(--brand-surface); } .parent-order-card { border-color: color-mix(in srgb, var(--brand-secondary) 35%, var(--brand-border)); } .parent-order-card ul { padding-inline-start: 1.2rem; color: var(--brand-text-muted); } .parent-order-card .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .parent-order-card .form-actions form { margin: 0; } .student-dashboard-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .daily-record-portal { display: grid; gap: 1rem; } .daily-record-portal__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: .7rem; } .daily-record-portal__summary > div { display: grid; gap: .2rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .daily-record-portal__summary span, .daily-record-portal__grid span { color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; } .daily-record-portal__summary strong { color: var(--brand-text); font-size: 1.35rem; line-height: 1; } .daily-record-portal__list { display: grid; gap: 1rem; } .daily-record-portal__card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 88%, var(--brand-bg-soft)); } .daily-record-portal__card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .daily-record-portal__card-header h3 { margin: .15rem 0 0; font-size: 1.05rem; } .daily-record-portal__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; } .daily-record-portal__grid section { display: grid; gap: .35rem; padding: .85rem; border: 1px solid color-mix(in srgb, var(--brand-border) 80%, transparent); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .daily-record-portal__grid p { margin: 0; color: var(--brand-text); font-weight: 700; } .daily-record-portal__footer { display: flex; flex-wrap: wrap; gap: .5rem .85rem; color: var(--brand-text-muted); font-size: .86rem; } .student-plan-portal { display: grid; gap: 1rem; } .student-plan-portal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .student-plan-portal__header h3 { margin: .15rem 0 0; color: var(--brand-text); font-size: 1.12rem; } .student-plan-portal__metrics, .student-plan-portal__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; } .student-plan-portal__metrics > div, .student-plan-portal__details section { display: grid; gap: .35rem; padding: .9rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .student-plan-portal__metrics span, .student-plan-portal__details span { color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; } .student-plan-portal__metrics strong { color: var(--brand-primary); font-size: 1.35rem; } .student-plan-portal__metrics small, .student-plan-portal__details small { color: var(--brand-text-muted); } .student-plan-portal__details p { margin: 0; color: var(--brand-text); font-weight: 700; } .student-plan-portal__badges { display: flex; flex-wrap: wrap; gap: .5rem; } .student-plan-portal__days { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); padding: .85rem; } .student-plan-portal__days summary { cursor: pointer; color: var(--brand-primary); font-weight: 900; } .teacher-student-plan-card + .teacher-student-plan-card { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); } @media (max-width: 720px) { .daily-record-portal__card-header { display: grid; } .student-plan-portal__header { display: grid; } } .parent-register-page .admin-form, .parent-register-page .field { display: grid; gap: .45rem; } .parent-register-page .admin-form { gap: .9rem; } .parent-register-page .required-star { color: var(--brand-danger); } .parent-page .card, .indicators-page .card, .institution-structure-page .card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .parent-page .card-header, .indicators-page .card-header, .institution-structure-page .card-header { border-bottom: 1px solid var(--brand-border); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 900; } .institution-structure-page .content-card { display: grid; gap: 1rem; } .institution-structure-page .content-card .table-responsive { box-shadow: none; } .institution-structure-page .field { display: grid; gap: .4rem; } .institution-structure-page .field label { color: var(--brand-text); font-weight: 800; font-size: .85rem; } .institution-structure-page .field input, .institution-structure-page .field select, .institution-structure-page .field textarea { width: 100%; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-text); padding: .55rem .75rem; } .institution-structure-page .field input:focus, .institution-structure-page .field select:focus, .institution-structure-page .field textarea:focus { outline: 0; border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--brand-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .institution-structure-page .toggle-line { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-text-muted); font-weight: 800; } .institution-structure-page .mutun-inline-form { display: block; } .institution-structure-page .mutun-inline-grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr .7fr .9fr 1.6fr .8fr; align-items: center; gap: .6rem; } .institution-structure-page .mutun-inline-grid .field { gap: 0; } .institution-structure-page .mutun-inline-grid .field label, .institution-structure-page .mutun-inline-grid .toggle-line span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .institution-structure-page .mutun-inline-grid .toggle-line { justify-content: center; } .institution-structure-page .mutun-inline-grid .field.actions { align-self: center; } .institution-structure-page .mutun-inline-grid .field.actions .btn { width: 100%; } @media (max-width: 720px) { .institution-structure-page .mutun-inline-grid { grid-template-columns: 1fr; } .institution-structure-page .mutun-inline-grid .field label { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .institution-structure-page .mutun-inline-grid .field { gap: .3rem; } } .structure-subtitle { margin: 0; color: var(--brand-primary-dark); font-size: 1rem; font-weight: 900; } .structure-unit-list { display: grid; gap: .55rem; } .structure-unit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .9rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 800; } .public-application-surface { max-width: 980px; margin-inline: auto; display: grid; gap: 1rem; } .public-application-surface--narrow { max-width: 720px; } .public-application-surface form { display: grid; gap: 1rem; } .public-application-surface .page-heading { align-items: center; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 42%), var(--brand-surface); } .public-application-surface .alert-info { border-color: color-mix(in srgb, var(--brand-info) 22%, var(--brand-border)); background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); color: var(--brand-text); } .public-application-surface .content-card { display: grid; gap: 1rem; position: relative; overflow: hidden; } .public-application-surface .content-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); opacity: .82; } .public-application-surface .section-heading { align-items: center; padding-bottom: .85rem; border-bottom: 1px solid var(--brand-border); } .public-application-surface .section-heading h2 { color: var(--brand-primary-dark); font-size: 1.08rem; } .public-application-surface .admin-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .public-application-surface .field { display: grid; gap: .4rem; } .public-application-surface .field label { color: var(--brand-text); font-weight: 900; } .public-application-surface .required-star { color: var(--brand-danger); } .public-application-surface input[type="file"].form-control { padding-block: .5rem; } .public-application-surface .alert-danger ul { margin: .75rem 0 0; padding-inline-start: 1.15rem; } .public-application-surface .field-error { margin: 0; font-size: .85rem; font-weight: 700; color: var(--brand-danger); } .public-application-surface .form-control.is-invalid { border-color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 6%, var(--brand-surface)); } .public-application-surface .attachments-note { margin: 0 0 .35rem; padding: .7rem .85rem; border-radius: .6rem; font-size: .85rem; line-height: 1.8; color: var(--brand-text); background: color-mix(in srgb, var(--brand-warning, var(--brand-secondary)) 10%, var(--brand-surface)); border: 1px solid color-mix(in srgb, var(--brand-warning, var(--brand-secondary)) 24%, var(--brand-border)); } .public-application-surface .password-hint { margin: .1rem 0 .35rem; font-size: .82rem; color: var(--brand-text-muted); } .public-application-surface .password-checklist { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; } .public-application-surface .password-checklist[data-password-checklist] li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; color: var(--brand-text-muted); transition: color .15s ease; } .public-application-surface .password-checklist__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; font-size: .7rem; line-height: 1; } .public-application-surface .password-checklist__icon::before { content: "\00d7"; } .public-application-surface .password-checklist[data-password-checklist] li.is-met { color: var(--brand-success) !important; } .public-application-surface .password-checklist li.is-met .password-checklist__icon { border-color: var(--brand-success); background: var(--brand-success); color: #fff; } .public-application-surface .password-checklist li.is-met .password-checklist__icon::before { content: "\2713"; } .public-success-card, .admission-portal .portal-success-card { max-width: 720px; margin-inline: auto; justify-items: center; text-align: center; } .public-success-card h1, .admission-portal .portal-success-card h1 { margin: .45rem 0 0; color: var(--brand-primary-dark); font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 900; } .public-success-card p, .admission-portal .portal-success-card p { max-width: 56ch; margin: 0; color: var(--brand-text-muted); line-height: 1.9; } .niqati-surface { display: grid; gap: 1rem; } .admin-page .field { display: grid; gap: .4rem; } .admin-page .field label { color: var(--brand-text); font-weight: 900; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-grid { display: grid; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-none { display: none !important; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-end { justify-content: flex-end; } .justify-content-around { justify-content: space-around; } .justify-content-evenly { justify-content: space-evenly; } .align-items-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .align-self-start { align-self: flex-start; } .align-self-center { align-self: center; } .align-self-end { align-self: flex-end; } .gap-0 { gap: 0; } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; } .row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; } .row > * { padding-inline: .75rem; width: 100%; } /* AR: شبكة أعمدة على نمط Bootstrap. كانت تُعرّف عرضًا حقيقيًا لتسع فئات فقط (col-md-3/4/5/6/8/12, col-lg-3/4/6)، فأي عمود آخر (col-md-1/2/7/9/10/11, كل col-sm/xl, col المجرّد، col-N بلا لاحقة) يبقى width: 100% عند كل العروض ولا ينقسم صفّه أبدًا — فخّ صامت لكل صفحة جديدة. أُكملت الآن للطقم الكامل 1–12 عبر sm/md/lg/xl + col التلقائي. القاعدة الأساسية (‎.row > *‎ أعلاه) تكفّلت بعرض 100% الافتراضي، فهذه إضافات نقاط التوقّف فقط. */ .row > .col { flex: 1 0 0%; width: auto; } .col-1 { width: 8.333333%; } .col-2 { width: 16.666667%; } .col-3 { width: 25%; } .col-4 { width: 33.333333%; } .col-5 { width: 41.666667%; } .col-6 { width: 50%; } .col-7 { width: 58.333333%; } .col-8 { width: 66.666667%; } .col-9 { width: 75%; } .col-10 { width: 83.333333%; } .col-11 { width: 91.666667%; } .col-12 { width: 100%; } @media (min-width: 576px) { .col-sm-1 { width: 8.333333%; } .col-sm-2 { width: 16.666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.333333%; } .col-sm-5 { width: 41.666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.333333%; } .col-sm-8 { width: 66.666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.333333%; } .col-sm-11 { width: 91.666667%; } .col-sm-12 { width: 100%; } } @media (min-width: 768px) { .col-md-1 { width: 8.333333%; } .col-md-2 { width: 16.666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.333333%; } .col-md-5 { width: 41.666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.333333%; } .col-md-8 { width: 66.666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.333333%; } .col-md-11 { width: 91.666667%; } .col-md-12 { width: 100%; } } @media (min-width: 992px) { .col-lg-1 { width: 8.333333%; } .col-lg-2 { width: 16.666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.333333%; } .col-lg-5 { width: 41.666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.333333%; } .col-lg-8 { width: 66.666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.333333%; } .col-lg-11 { width: 91.666667%; } .col-lg-12 { width: 100%; } } @media (min-width: 1200px) { .col-xl-1 { width: 8.333333%; } .col-xl-2 { width: 16.666667%; } .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.333333%; } .col-xl-5 { width: 41.666667%; } .col-xl-6 { width: 50%; } .col-xl-7 { width: 58.333333%; } .col-xl-8 { width: 66.666667%; } .col-xl-9 { width: 75%; } .col-xl-10 { width: 83.333333%; } .col-xl-11 { width: 91.666667%; } .col-xl-12 { width: 100%; } } .g-2 { row-gap: .5rem; } .g-3 { row-gap: 1rem; } .navbar { min-height: 64px; display: flex; align-items: center; } .navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .navbar-brand { color: var(--qc-text); font-size: 1.1rem; font-weight: 800; } .navbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; } .public-navbar-links { display: flex; align-items: center; justify-content: center; flex: 1 1 420px; gap: .18rem; min-width: min(100%, 280px); flex-wrap: wrap; } .public-navbar-links a { display: inline-flex; align-items: center; min-height: 36px; padding: .42rem .68rem; border-radius: 999px; color: var(--brand-text-muted); font-size: .88rem; font-weight: 800; text-decoration: none; white-space: nowrap; } .public-navbar-links a:hover, .public-navbar-links a.is-active { background: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface)); color: var(--brand-primary-dark); } .public-footer { position: relative; z-index: 2; margin-top: 3rem; padding: 2.2rem 0 1.4rem; border-top: 1px solid color-mix(in srgb, var(--brand-border) 84%, var(--brand-secondary)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-surface) 92%, transparent), color-mix(in srgb, var(--brand-bg-soft) 82%, var(--brand-surface))), var(--brand-surface); } .public-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(170px, .8fr)); gap: 1.25rem; align-items: start; } .public-footer__brand { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; } .public-footer__brand .brand-lockup__mark { width: 46px; height: 46px; background-size: 39px 39px; } .public-footer__brand strong, .public-footer__links strong { display: block; color: var(--brand-text); font-size: 1rem; font-weight: 900; } .public-footer__brand p { max-width: 56ch; margin: .35rem 0 0; color: var(--brand-text-muted); } .public-footer__links { display: grid; gap: .42rem; } .public-footer__links a { color: var(--brand-text-muted); font-weight: 750; text-decoration: none; } .public-footer__links a:hover { color: var(--brand-primary-dark); text-decoration: underline; } .public-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.45rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--brand-border) 70%, transparent); color: var(--brand-text-muted); font-size: .9rem; font-weight: 750; } .language-switcher { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem; border: 1px solid var(--qc-border); border-radius: 8px; background: var(--brand-surface-muted); } .language-switcher form { margin: 0; } .language-switcher__option { min-height: 30px; padding: .25rem .55rem; border: 0; border-radius: 6px; background: transparent; color: var(--qc-muted); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; } .language-switcher__option.is-active { background: var(--qc-primary); color: var(--brand-surface); cursor: default; } .bg-white { background-color: var(--brand-surface) !important; } .bg-light { background-color: var(--qc-bg) !important; } .border-bottom { border-bottom: 1px solid var(--qc-border); } .card { background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--brand-radius-card); box-shadow: var(--qc-shadow); } .card-header, .card-footer { padding: 1rem 1.25rem; border-color: var(--qc-border); } .card-header { border-bottom: 1px solid var(--qc-border); } .card-footer { border-top: 1px solid var(--qc-border); } .card-body { padding: 1.25rem; } .card-title { margin: 0 0 .75rem; } .shadow-sm { box-shadow: var(--qc-shadow); } .alert { padding: .875rem 1rem; border: 1px solid transparent; border-radius: var(--brand-radius-control); margin-bottom: 1rem; background: var(--brand-surface); } .alert-success { color: var(--brand-success); background: color-mix(in srgb, var(--brand-success) 12%, var(--brand-surface)); border-color: color-mix(in srgb, var(--brand-success) 28%, var(--brand-border)); } .alert-danger { color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 10%, var(--brand-surface)); border-color: color-mix(in srgb, var(--brand-danger) 26%, var(--brand-border)); } .alert-warning { color: var(--brand-warning); background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)); border-color: color-mix(in srgb, var(--brand-warning) 30%, var(--brand-border)); } .alert-info { color: var(--brand-info); background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); border-color: color-mix(in srgb, var(--brand-info) 24%, var(--brand-border)); } .alert-light { color: var(--qc-text); background: var(--brand-surface-muted); border-color: var(--qc-border); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 38px; padding: .45rem .85rem; border: 1px solid transparent; border-radius: var(--brand-radius-control); background: var(--brand-surface); font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { text-decoration: none; } .btn-sm { min-height: 32px; padding: .32rem .65rem; font-size: .875rem; } .btn-primary { color: var(--brand-surface); background: var(--qc-primary); border-color: var(--qc-primary); } .btn-primary:hover { color: var(--brand-surface); background: var(--qc-primary-dark); border-color: var(--qc-primary-dark); } .btn-success { color: var(--brand-surface); background: var(--qc-success); border-color: var(--qc-success); } .btn-danger { color: var(--brand-surface); background: var(--qc-danger); border-color: var(--qc-danger); } .btn-warning { color: var(--brand-text); background: var(--brand-warning); border-color: var(--brand-warning); } .btn-info { color: var(--brand-surface); background: var(--qc-info); border-color: var(--qc-info); } .btn-secondary { color: var(--brand-surface); background: var(--brand-text-muted); border-color: var(--brand-text-muted); } .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger, .btn-outline-warning, .btn-outline-info { background: var(--brand-surface); } .btn-outline-primary { color: var(--qc-primary); border-color: var(--qc-primary); } .btn-outline-success { color: var(--qc-success); border-color: var(--qc-success); } .btn-outline-secondary { color: var(--brand-text-muted); border-color: var(--brand-border); } .btn-outline-danger { color: var(--qc-danger); border-color: var(--qc-danger); } .btn-outline-warning { color: var(--qc-warning); border-color: var(--qc-warning); } .btn-outline-info { color: var(--qc-info); border-color: var(--qc-info); } .btn-outline-primary:hover, .btn-outline-secondary:hover { color: var(--brand-surface); background: var(--qc-primary); border-color: var(--qc-primary); } .btn-outline-success:hover { color: var(--brand-surface); background: var(--qc-success); border-color: var(--qc-success); } .btn-outline-danger:hover { color: var(--brand-surface); background: var(--qc-danger); border-color: var(--qc-danger); } .btn-outline-warning:hover { color: var(--brand-text); background: var(--brand-warning); border-color: var(--brand-warning); } .btn-outline-info:hover { color: var(--brand-surface); background: var(--qc-info); border-color: var(--qc-info); } .btn-light { color: var(--qc-text); background: var(--brand-surface-muted); border-color: var(--brand-border); } .btn-link { border-color: transparent; background: transparent; color: var(--qc-primary); padding-inline: 0; } .form-label { display: inline-block; margin-bottom: .35rem; font-weight: 700; } .form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], input[type="file"] { width: 100%; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--qc-text); font: inherit; } /* AR: صندوق بحث مدمج واحد (نص + قائمة عائمة) فوق أي — now the one implementation for every searchable dropdown site-wide (there used to be two: this name as two stacked boxes, and a separate .combobox-select single-box implementation isolated to the page-number field only — unified here). */ .searchable-select { position: relative; min-width: 0; width: 100%; } .searchable-select__input { width: 100%; min-width: 0; } .searchable-select__listbox { position: absolute; inset-inline: 0; top: calc(100% + .25rem); z-index: 20; max-height: 14rem; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; background: var(--brand-surface); border: 1px solid var(--qc-border); border-radius: .5rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12); } .searchable-select__listbox[hidden] { display: none; } .searchable-select__option { padding: .4rem .6rem; border-radius: .35rem; cursor: pointer; font-size: .92rem; } .searchable-select__option:hover, .searchable-select__option.is-active { background: var(--brand-primary-light); } .searchable-select__option.is-selected { font-weight: 600; color: var(--qc-primary); } .searchable-select__empty { color: var(--brand-text-muted); font-size: .82rem; padding: .4rem .6rem; } .phone-input-group .searchable-select { align-self: start; } textarea { min-height: 100px; } .form-check { display: flex; align-items: center; gap: .5rem; } .form-check-input { width: 1rem; height: 1rem; } .table { width: 100%; border-collapse: collapse; background: var(--brand-surface); } .table-responsive { width: 100%; overflow-x: auto; } .table th, .table td { padding: .75rem; border-bottom: 1px solid var(--qc-border); text-align: right; vertical-align: top; } .table th { background: var(--brand-surface-muted); font-weight: 800; } .table tbody tr { transition: background-color .16s ease; } .table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary-light) 56%, var(--brand-surface)); } .table-bordered th, .table-bordered td { border: 1px solid var(--qc-border); } .table-striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--brand-surface-muted) 72%, var(--brand-surface)); } .table-success { background: color-mix(in srgb, var(--brand-success) 12%, var(--brand-surface)) !important; } .table-warning { background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)) !important; } .table-danger { background: color-mix(in srgb, var(--brand-danger) 10%, var(--brand-surface)) !important; } .table-info { background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)) !important; } .table-secondary { background: var(--brand-surface-muted) !important; } .table-light { background: var(--brand-surface-muted) !important; } .badge { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; border: 1px solid color-mix(in srgb, var(--brand-border) 78%, transparent); background: var(--brand-surface-muted); color: var(--brand-text-muted); } .bg-primary { background: var(--qc-primary) !important; color: var(--brand-surface) !important; } .bg-success { background: var(--qc-success) !important; color: var(--brand-surface) !important; } .bg-danger { background: var(--qc-danger) !important; color: var(--brand-surface) !important; } .bg-warning { background: var(--brand-warning) !important; color: var(--brand-text) !important; } .bg-info { background: var(--qc-info) !important; color: var(--brand-surface) !important; } .bg-secondary { background: var(--brand-text-muted) !important; color: var(--brand-surface) !important; } .bg-dark { background: var(--brand-primary-dark) !important; color: var(--brand-surface) !important; } .bg-transparent { background: transparent !important; } .flash-stack { padding-top: 1rem; } .text-danger { color: var(--qc-danger) !important; } .text-success { color: var(--qc-success) !important; } .text-warning { color: var(--qc-warning) !important; } .text-info { color: var(--qc-info) !important; } .text-start { text-align: start !important; } .text-end { text-align: end !important; } .small { font-size: .875rem; } .ms-auto { margin-inline-start: auto; } .me-auto { margin-inline-end: auto; } .align-middle { vertical-align: middle !important; } .list-group { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; } .list-group-item { padding: .75rem 1rem; background: var(--brand-surface); border: 1px solid var(--qc-border); border-radius: 8px; } .nav { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; } .nav-link { display: inline-flex; padding: .45rem .75rem; border-radius: 8px; color: var(--qc-primary); } .nav-link.active { color: var(--brand-surface); background: var(--qc-primary); } .input-group { display: flex; align-items: stretch; } .input-group > .form-control, .input-group > .form-select, .input-group > input { flex: 1 1 auto; } .input-group-text { display: inline-flex; align-items: center; padding: .5rem .75rem; border: 1px solid var(--brand-border); background: var(--brand-surface-muted); } .pagination { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; } .page-link { display: inline-flex; min-width: 34px; min-height: 34px; align-items: center; justify-content: center; border: 1px solid var(--qc-border); border-radius: 8px; background: var(--brand-surface); } .hero { display: grid; gap: 1.5rem; align-items: center; padding: clamp(2rem, 6vw, 4rem) 0; } .hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.2; } .hero p { max-width: 720px; margin: .75rem 0 0; color: var(--qc-muted); font-size: 1.05rem; } .quick-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .owner-dashboard { display: grid; gap: 1.5rem; padding-bottom: 2.5rem; } .owner-hero, .owner-panel, .owner-metric-card, .owner-system { background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: 8px; box-shadow: var(--qc-shadow); } .owner-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 1.5rem; align-items: stretch; padding: clamp(1.25rem, 3vw, 2rem); } .owner-hero__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .owner-kicker { display: inline-flex; width: fit-content; margin-bottom: .45rem; color: var(--qc-primary-dark); font-size: .82rem; font-weight: 800; } .owner-hero h1, .owner-section h2, .owner-panel h2, .owner-system h3, .owner-metric-card h3 { margin: 0; letter-spacing: 0; } .owner-hero h1 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.25; overflow-wrap: anywhere; } .owner-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .owner-meta span, .owner-chip, .owner-link-count, .owner-date { display: inline-flex; align-items: center; min-height: 30px; padding: .25rem .7rem; border: 1px solid var(--qc-border); border-radius: 999px; background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; } .owner-hero__summary { display: grid; gap: 1rem; align-content: space-between; min-width: 0; } .owner-status { display: grid; gap: .2rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--brand-info) 26%, var(--brand-border)); border-radius: 8px; background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); } .owner-status--good { border-color: color-mix(in srgb, var(--brand-success) 28%, var(--brand-border)); background: color-mix(in srgb, var(--brand-success) 12%, var(--brand-surface)); } .owner-status--warning { border-color: color-mix(in srgb, var(--brand-warning) 30%, var(--brand-border)); background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)); } .owner-status span { color: var(--qc-muted); font-size: .85rem; font-weight: 800; } .owner-status strong { font-size: 1.5rem; line-height: 1.2; } .owner-status small { color: var(--qc-muted); overflow-wrap: anywhere; } .owner-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .owner-alerts { display: grid; gap: .75rem; } .owner-alert { padding: .85rem 1rem; border: 1px solid var(--qc-border); border-radius: 8px; background: var(--brand-surface); font-weight: 700; } .owner-alert--info { border-color: color-mix(in srgb, var(--brand-info) 24%, var(--brand-border)); background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); color: var(--brand-info); } .owner-alert--warning { border-color: color-mix(in srgb, var(--brand-warning) 30%, var(--brand-border)); background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)); color: var(--brand-warning); } .owner-alert--danger { border-color: color-mix(in srgb, var(--brand-danger) 26%, var(--brand-border)); background: color-mix(in srgb, var(--brand-danger) 10%, var(--brand-surface)); color: var(--brand-danger); } .owner-section { display: grid; gap: 1rem; } .owner-section__header, .owner-panel__header, .owner-system__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .owner-section__header h2, .owner-panel__header h2 { font-size: 1.35rem; line-height: 1.35; } .owner-panel__header a { flex: 0 0 auto; font-weight: 800; } .owner-metric-grid, .owner-system-grid { display: grid; gap: 1rem; } .owner-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .owner-metric-card { display: grid; gap: .85rem; padding: 1rem; } .owner-metric-card h3, .owner-foundation-grid h3 { font-size: .98rem; color: var(--brand-primary-dark); } .owner-metric-list, .owner-admission-bars { display: grid; gap: .6rem; } .owner-metric-row, .owner-admission-row > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .owner-metric-row span, .owner-admission-row span { color: var(--qc-muted); font-size: .92rem; } .owner-metric-row strong, .owner-admission-row strong { font-size: 1.2rem; color: var(--qc-text); } .daily-operations-monitor { gap: 1rem; } .daily-operations-monitor__summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; } .daily-operations-monitor__summary > div { display: grid; gap: .35rem; min-width: 0; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--brand-surface) 86%, var(--brand-primary) 14%); } .daily-operations-monitor__summary span { color: var(--qc-muted); font-size: .84rem; line-height: 1.35; } .daily-operations-monitor__summary strong { color: var(--brand-primary-dark); font-size: 1.45rem; line-height: 1; } .daily-operations-monitor__table td { vertical-align: top; } .daily-operations-monitor__actions { display: flex; flex-wrap: wrap; gap: .4rem; } .owner-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; } .owner-panel { display: grid; gap: 1rem; padding: 1rem; } .owner-progress { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--brand-border); border: 0; } .owner-progress::-webkit-progress-bar { border-radius: 999px; background: var(--brand-border); } .owner-progress::-webkit-progress-value, .owner-progress::-moz-progress-bar { border-radius: 999px; background: var(--brand-primary); } .owner-foundation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .owner-foundation-grid > div { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; min-width: 0; } .owner-foundation-grid h3 { width: 100%; margin: 0 0 .2rem; } .owner-empty { color: var(--qc-muted); font-size: .9rem; } .owner-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .owner-system { display: grid; gap: 1rem; align-content: start; padding: 1rem; } .owner-system__header { display: grid; gap: .35rem; } .owner-system__header h3 { font-size: 1.05rem; } .owner-system__header p { margin: 0; color: var(--qc-muted); font-size: .92rem; } .owner-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .owner-system-link { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-height: 72px; padding: .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); color: var(--qc-text); text-decoration: none; } .owner-system-link:hover { border-color: var(--qc-primary); background: color-mix(in srgb, var(--brand-primary-light) 72%, var(--brand-surface)); color: var(--qc-primary-dark); text-decoration: none; } .owner-system-link span { display: grid; gap: .25rem; min-width: 0; } .owner-system-link strong { line-height: 1.35; overflow-wrap: anywhere; } .owner-system-link small { color: var(--qc-muted); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; } .owner-system-link em { flex: 0 0 auto; max-width: 95px; padding: .12rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-info) 12%, var(--brand-surface)); color: var(--brand-info); font-size: .72rem; font-style: normal; font-weight: 800; text-align: center; overflow-wrap: anywhere; } .owner-system-link--disabled { color: var(--brand-text-muted); background: var(--brand-surface-muted); border-style: dashed; } .owner-system-link--disabled:hover { border-color: var(--qc-border); background: var(--brand-surface-muted); color: var(--brand-text-muted); } .owner-system-link--disabled em { background: var(--brand-border); color: var(--brand-text-muted); } @media (max-width: 1080px) { .owner-metric-grid, .owner-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .daily-operations-monitor__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .owner-hero, .owner-split, .owner-foundation-grid, .owner-link-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .container { width: min(100% - 20px, 1180px); } .navbar .container, .d-flex { flex-wrap: wrap; } .table { display: block; overflow-x: auto; white-space: nowrap; } .owner-hero, .owner-panel, .owner-metric-card, .owner-system { padding: .9rem; } .owner-section__header, .owner-panel__header { display: grid; } .owner-metric-grid, .owner-system-grid { grid-template-columns: 1fr; } .daily-operations-monitor__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .owner-hero__actions .btn { width: 100%; } } /* IKD institutional theme layer */ .app-navbar { position: sticky; top: 0; z-index: 40; margin-bottom: 0; background: color-mix(in srgb, var(--brand-surface) 92%, transparent) !important; backdrop-filter: blur(14px); } .app-navbar .container { flex-wrap: wrap; } .brand-lockup { display: inline-flex; align-items: center; gap: .78rem; min-width: 0; max-width: min(560px, 100%); padding: .35rem .55rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 24%, var(--brand-border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-surface) 94%, transparent), color-mix(in srgb, var(--brand-bg-soft) 72%, var(--brand-surface))), var(--brand-surface); color: var(--brand-text); text-decoration: none; box-shadow: 0 10px 26px rgba(31, 27, 22, .055); } .brand-lockup:hover { text-decoration: none; } .brand-lockup__mark, .brand-lockup__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--brand-border)); border-radius: 13px; background-color: var(--brand-surface); color: var(--brand-primary); font-size: 0; font-weight: 900; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-surface) 70%, transparent); } .brand-lockup__mark { background-image: url("/assets/brand/ikd/logos/logo-icon.png"); background-position: center; background-repeat: no-repeat; background-size: 46px 46px; } .brand-lockup__icon { object-fit: contain; padding: .22rem; } .brand-lockup__text { display: grid; gap: .02rem; min-width: 0; line-height: 1.15; } .brand-lockup__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-lockup__name--ar { font-weight: 900; font-size: 1.08rem; } .brand-lockup__name--en { color: var(--brand-text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .01em; } .language-switcher { border-color: var(--brand-border); background: var(--brand-surface-muted); } .language-switcher__option { color: var(--brand-text-muted); } .language-switcher__option.is-active { background: var(--brand-primary); } .card { background: var(--brand-surface); border-color: var(--brand-border); border-radius: var(--brand-radius-card); box-shadow: var(--qc-shadow); } .card-header, .card-footer { background: color-mix(in srgb, var(--brand-surface) 86%, var(--brand-secondary-light)); } .btn { border-radius: var(--brand-radius-control); font-weight: 800; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn-primary, .btn-outline-primary:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-surface); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary) 26%, transparent); } .btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: var(--brand-surface); } .btn-secondary, .btn-outline-secondary { background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-primary); } .btn-secondary:hover, .btn-outline-secondary:hover { background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary-dark); } .btn-outline-primary { background: transparent; border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border)); color: var(--brand-primary); } .btn-outline-success { border-color: color-mix(in srgb, var(--brand-success) 45%, var(--brand-border)); color: var(--brand-success); } .btn-danger { background: var(--brand-danger); border-color: var(--brand-danger); color: var(--brand-surface); } .form-control, .form-select, input, select, textarea { border-color: var(--brand-border); border-radius: var(--brand-radius-control); color: var(--brand-text); background-color: var(--brand-surface); } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent); outline: none; } .form-label { color: var(--brand-text); font-weight: 800; } .table { border-color: var(--brand-border); } .table th { color: var(--brand-text); background: color-mix(in srgb, var(--brand-surface-muted) 80%, var(--brand-secondary-light)); } .table td, .table th { border-color: var(--brand-border); } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); } .data-table thead th { border-bottom: 1px solid var(--brand-border); background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-light) 58%, transparent), transparent), var(--brand-surface-muted); color: var(--brand-primary-dark); font-size: .83rem; font-weight: 900; white-space: nowrap; } .data-table tbody tr { transition: background .18s ease; } .data-table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary-light) 36%, transparent); } .data-table td, .data-table th { padding: .82rem .9rem; vertical-align: middle; } .data-table td { color: var(--brand-text); } .data-table .btn-sm { min-height: 34px; } .badge, .status-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 900; } .badge-success, .status-active { background: color-mix(in srgb, var(--brand-success) 16%, var(--brand-surface)); color: var(--brand-success); } .badge-warning, .status-pending { background: color-mix(in srgb, var(--brand-warning) 18%, var(--brand-surface)); color: color-mix(in srgb, var(--brand-warning) 72%, var(--brand-text)); } .badge-danger, .status-danger { background: color-mix(in srgb, var(--brand-danger) 14%, var(--brand-surface)); color: var(--brand-danger); } .status-badge--primary, .status-badge--active { background: color-mix(in srgb, var(--brand-primary) 14%, var(--brand-surface)); color: var(--brand-primary-dark); } .status-badge--success { background: color-mix(in srgb, var(--brand-success) 14%, var(--brand-surface)); color: var(--brand-success); } .status-badge--approved, .status-badge--active, .status-badge--issued, .status-badge--resolved, .status-badge--closed { background: color-mix(in srgb, var(--brand-success) 14%, var(--brand-surface)); color: var(--brand-success); } .status-badge--warning { background: color-mix(in srgb, var(--brand-warning) 18%, var(--brand-surface)); color: color-mix(in srgb, var(--brand-warning) 72%, var(--brand-text)); } .status-badge--new, .status-badge--open, .status-badge--under-review, .status-badge--pending { background: color-mix(in srgb, var(--brand-warning) 18%, var(--brand-surface)); color: color-mix(in srgb, var(--brand-warning) 72%, var(--brand-text)); } .status-badge--assign, .status-badge--transfer { background: color-mix(in srgb, var(--brand-info) 14%, var(--brand-surface)); color: var(--brand-info); } .status-badge--release { background: color-mix(in srgb, var(--brand-secondary) 18%, var(--brand-surface)); color: var(--brand-secondary-dark); } .status-badge--danger { background: color-mix(in srgb, var(--brand-danger) 14%, var(--brand-surface)); color: var(--brand-danger); } .status-badge--low { background: var(--brand-surface-muted); color: var(--brand-text-muted); } .status-badge--medium { background: color-mix(in srgb, var(--brand-warning) 14%, var(--brand-surface)); color: color-mix(in srgb, var(--brand-warning) 72%, var(--brand-text)); } .status-badge--high, .status-badge--critical, .status-badge--rejected, .status-badge--cancelled { background: color-mix(in srgb, var(--brand-danger) 14%, var(--brand-surface)); color: var(--brand-danger); } .status-badge--info { background: color-mix(in srgb, var(--brand-info) 14%, var(--brand-surface)); color: var(--brand-info); } .status-badge--muted, .status-badge--secondary, .status-badge--inactive, .status-badge--archived { background: var(--brand-surface-muted); color: var(--brand-text-muted); } .status-badge--dark { background: color-mix(in srgb, var(--brand-text) 12%, var(--brand-surface)); color: var(--brand-text); } .page-heading, .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; color: var(--brand-text); font-weight: 800; } .page-heading h1, .section-heading h2 { margin: 0; color: var(--brand-text); } .page-heading p, .section-heading p { max-width: 760px; margin: .35rem 0 0; color: var(--brand-text-muted); } /* AR: شريط أزرار رأس الصفحة (مثل لوحة المعلم) — يلتفّ بدل أن يتجاوز ويتبعثر. */ /* EN: Page-heading action toolbar (e.g. teacher dashboard) — wraps instead of overflowing. */ .page-heading__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: flex-end; } .page-heading__actions .toolbar-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } @media (max-width: 768px) { .page-heading__actions { width: 100%; justify-content: flex-start; } .page-heading__actions .btn, .page-heading__actions .toolbar-form, .page-heading__actions .toolbar-form .btn, .page-heading__actions .toolbar-form .form-control { flex: 1 1 auto; } } .section-heading > strong { color: var(--brand-text); font-size: 1.05rem; font-weight: 800; } .eyebrow { margin: 0 0 .35rem; color: var(--brand-secondary-dark); font-size: .82rem; font-weight: 900; } .section-title { margin: 0 0 1rem; color: var(--brand-text); font-size: 1.15rem; } .app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.25rem; width: min(1440px, calc(100% - 28px)); margin: 1.25rem auto; align-items: start; } [dir="rtl"] .app-shell { grid-template-columns: 280px minmax(0, 1fr); } .app-sidebar { position: sticky; top: 86px; min-height: calc(var(--qc-viewport-height) - 110px); padding: 1rem; border-radius: 0 var(--brand-radius-card) var(--brand-radius-card) 0; background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); color: var(--brand-surface); box-shadow: 0 22px 54px rgba(31, 27, 22, .16); } [dir="ltr"] .app-sidebar { border-radius: var(--brand-radius-card) 0 0 var(--brand-radius-card); } .app-sidebar__brand { display: grid; min-height: 78px; place-items: center; padding: .75rem; margin-bottom: .75rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 32%, var(--brand-border)); border-radius: 18px; background: color-mix(in srgb, var(--brand-surface) 96%, var(--brand-secondary)); font-weight: 900; box-shadow: 0 14px 28px rgba(31, 27, 22, .14); } .app-sidebar__brand img { max-width: 100%; max-height: 58px; object-fit: contain; } .app-sidebar__brand span { display: block; width: 100%; height: 62px; overflow: hidden; background: url("/assets/brand/ikd/logos/logo-horizontal.png") center / contain no-repeat; color: transparent; text-indent: -9999px; white-space: nowrap; } .app-sidebar__nav { display: grid; gap: .35rem; } .sidebar-link { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .65rem .75rem; border-radius: var(--brand-radius-control); color: rgba(255, 255, 255, .80); text-decoration: none; font-weight: 800; } .sidebar-link:hover, .sidebar-link.active { background: rgba(255, 255, 255, .14); color: var(--brand-surface); text-decoration: none; } .sidebar-link__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: var(--brand-secondary-light); font-size: .66rem; font-weight: 900; letter-spacing: 0; line-height: 1; } .app-content { min-width: 0; } .app-content__inner { min-width: 0; } .landing-page .app-navbar, .auth-page .app-navbar { position: relative; } .landing-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 2rem; align-items: center; min-height: calc(var(--qc-viewport-height) - 112px); padding: 4rem 0 2rem; } .landing-hero::before { content: ""; position: absolute; inset-inline-start: -42px; top: 58px; width: 360px; height: 460px; background-image: url("/assets/brand/ikd/backgrounds/hero-bg.png"); background-repeat: no-repeat; background-size: contain; opacity: .72; pointer-events: none; z-index: -1; } .landing-hero__content h1 { max-width: 780px; margin: 0; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.08; color: var(--brand-primary-dark); } .landing-hero__lead { max-width: 680px; margin: 1.25rem 0 0; color: var(--brand-text-muted); font-size: 1.18rem; } .landing-hero__lead::after, .auth-card__header::after { content: ""; display: block; width: 150px; height: 22px; margin-top: 1rem; background-image: none; background-repeat: no-repeat; background-size: contain; opacity: .78; } .quick-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; } .landing-hero--expanded { padding-bottom: 3rem; } .landing-hero__highlights { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; } .landing-hero__highlights span, .institution-showcase-card__meta span { display: inline-flex; align-items: center; min-height: 34px; padding: .42rem .75rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 28%, var(--brand-border)); border-radius: 999px; background: color-mix(in srgb, var(--brand-surface) 82%, transparent); color: var(--brand-primary-dark); font-size: .84rem; font-weight: 900; } .landing-hero__visual, .auth-visual { display: grid; place-items: center; min-height: 420px; } .landing-hero__visual--showcase { position: relative; } .landing-brand-card { display: grid; place-items: center; width: min(100%, 520px); min-height: 280px; margin: 0; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--brand-border)); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-surface) 96%, transparent), color-mix(in srgb, var(--brand-bg-soft) 76%, var(--brand-surface))), var(--brand-surface); box-shadow: 0 28px 70px rgba(31, 27, 22, .10); } .landing-brand-card img { display: block; width: min(100%, 440px); height: auto; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(31, 27, 22, .08)); } .landing-visual-note { position: absolute; inset-inline-start: 8%; bottom: 7%; display: grid; gap: .2rem; min-width: 220px; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--brand-border)); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-surface) 88%, transparent); box-shadow: var(--qc-shadow-soft); } .landing-visual-note strong { color: var(--brand-primary-dark); } .landing-visual-note span { color: var(--brand-text-muted); font-size: .86rem; font-weight: 800; } .mishkat-arch { position: relative; width: min(100%, 380px); aspect-ratio: 3 / 4; border: 1px solid color-mix(in srgb, var(--brand-secondary) 40%, var(--brand-border)); border-radius: 180px 180px var(--brand-radius-card) var(--brand-radius-card); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-surface) 88%, var(--brand-secondary-light)), var(--brand-surface-muted)); box-shadow: 0 28px 70px rgba(31, 27, 22, .10); overflow: hidden; } .mishkat-arch::before, .mishkat-arch::after { content: ""; position: absolute; inset: 26px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 42%, transparent); border-radius: 160px 160px var(--brand-radius-card) var(--brand-radius-card); } .mishkat-arch::before { border: 0; background: url("/assets/brand/ikd/backgrounds/auth-bg-clean.png") center top / cover no-repeat; opacity: .48; } .mishkat-arch::after { inset: auto 12%; bottom: 18%; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--brand-secondary), transparent); } .mishkat-arch__book { position: absolute; inset-inline: 5%; bottom: 9%; width: auto; height: 64%; border: 0; border-radius: 28px; background: url("/assets/brand/ikd/logos/logo-stacked.png") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 26px 42px rgba(31, 27, 22, .14)); z-index: 1; } .mishkat-arch__book::before { content: none; } .mishkat-arch__line { position: absolute; right: 22%; bottom: 18%; width: 56%; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-secondary), transparent); opacity: .72; } .mishkat-arch__leaf { display: none; } .mishkat-arch__leaf--one { top: 28%; right: 12%; transform: rotate(28deg); } .mishkat-arch__leaf--two { bottom: 30%; left: 12%; transform: rotate(210deg); } .mishkat-arch--compact { width: min(100%, 290px); min-height: auto; } .landing-section { padding: 2.5rem 0; } .section-heading--stacked { display: grid; align-items: start; justify-content: stretch; } .section-heading--stacked::after { content: ""; display: block; width: 164px; height: 22px; margin-top: .7rem; background-image: none; background-repeat: no-repeat; background-size: contain; opacity: .74; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .feature-card, .formal-panel, .mini-stat-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .feature-card { padding: 1.25rem; } .feature-card__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: .75rem; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); font-weight: 900; } .feature-card h3, .formal-panel h2 { margin: 0 0 .45rem; } .feature-card p, .formal-panel p { margin: 0; color: var(--brand-text-muted); } .landing-section--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 1rem; align-items: stretch; } .formal-panel { padding: 1.5rem; } .mini-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .mini-stat-card { display: grid; align-content: center; gap: .25rem; min-height: 130px; padding: 1rem; text-align: center; } .mini-stat-card strong { color: var(--brand-primary); font-size: 1.55rem; } .mini-stat-card span { color: var(--brand-text-muted); font-size: .9rem; font-weight: 800; } .landing-section--systems { position: relative; } .landing-section--systems::before { content: ""; position: absolute; inset-inline-end: -54px; top: 18px; width: 180px; height: 180px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-repeat: no-repeat; background-size: contain; opacity: .16; pointer-events: none; } .service-tabs { position: relative; display: grid; gap: 1rem; } .service-tabs > input { position: absolute; opacity: 0; pointer-events: none; } .service-tab-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: .55rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 84%, transparent); box-shadow: var(--qc-shadow-soft); } .service-tab-list label { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--brand-radius-control); color: var(--brand-text-muted); font-weight: 900; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .service-tab-list label:hover { border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--brand-border)); color: var(--brand-primary-dark); } #service-tab-all:checked ~ .service-tab-list label[for="service-tab-all"], #service-tab-admin:checked ~ .service-tab-list label[for="service-tab-admin"], #service-tab-teacher:checked ~ .service-tab-list label[for="service-tab-teacher"], #service-tab-parent:checked ~ .service-tab-list label[for="service-tab-parent"], #service-tab-student:checked ~ .service-tab-list label[for="service-tab-student"] { background: var(--brand-primary); color: var(--brand-surface); border-color: var(--brand-primary); box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary) 18%, transparent); } .service-grid { align-items: start; } #service-tab-admin:checked ~ .service-grid .service-card, #service-tab-teacher:checked ~ .service-grid .service-card, #service-tab-parent:checked ~ .service-grid .service-card, #service-tab-student:checked ~ .service-grid .service-card { display: none; } #service-tab-all:checked ~ .service-grid .service-card, #service-tab-admin:checked ~ .service-grid .service-card--admin, #service-tab-teacher:checked ~ .service-grid .service-card--teacher, #service-tab-parent:checked ~ .service-grid .service-card--parent, #service-tab-student:checked ~ .service-grid .service-card--student { display: grid; } .service-card { position: relative; display: grid; gap: 1rem; align-content: space-between; min-height: 210px; padding: 1.2rem; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .service-card:hover, .service-card:focus-visible { border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--brand-border)); box-shadow: 0 20px 42px color-mix(in srgb, var(--brand-primary) 14%, transparent); color: inherit; text-decoration: none; transform: translateY(-2px); } .service-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 30%, transparent); outline-offset: 3px; } .service-card__header { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .85rem; align-items: start; } .service-card__icon { width: 58px; height: 58px; margin-bottom: 0; border-radius: 14px; } .service-card__icon img { display: grid; width: 38px; height: 38px; object-fit: contain; } .service-card__title { display: grid; gap: .45rem; } .service-card__title strong { color: var(--brand-primary-dark); font-size: 1.08rem; } .service-card__title small { color: var(--brand-text-muted); line-height: 1.75; } .service-card__footer { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; color: var(--brand-primary); font-size: .88rem; font-weight: 900; } .service-card__footer::after { content: "→"; font-weight: 900; } html[dir="rtl"] .service-card__footer::after { content: "←"; } .system-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .system-detail-card, .news-card, .institution-showcase-card { position: relative; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 94%, transparent); box-shadow: var(--qc-shadow); overflow: hidden; } .system-detail-card { padding: 0; } .system-detail-card::before, .news-card::before, .institution-showcase-card::before, .formal-panel--ornamented::before { content: ""; position: absolute; inset-inline-end: -38px; bottom: -44px; width: 116px; height: 116px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-repeat: no-repeat; background-size: contain; opacity: .16; pointer-events: none; } .system-detail-card summary { position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .85rem; align-items: start; min-height: 118px; padding: 1.1rem; cursor: pointer; list-style: none; } .system-detail-card summary::-webkit-details-marker { display: none; } .system-detail-card summary::after { content: "+"; position: absolute; inset-inline-end: 1rem; top: 1rem; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); font-weight: 900; } .system-detail-card[open] summary::after { content: "-"; } .system-detail-card summary strong { display: block; max-width: calc(100% - 34px); color: var(--brand-primary-dark); font-size: 1.02rem; } .system-detail-card summary small { display: block; margin-top: .35rem; color: var(--brand-text-muted); line-height: 1.7; } .system-detail-card ul { position: relative; z-index: 1; display: grid; gap: .45rem; margin: 0; padding: 0 1.4rem 1rem; color: var(--brand-text); font-weight: 800; } .system-detail-card li { margin-inline-start: 1rem; } .system-detail-card > p { position: relative; z-index: 1; margin: 0; padding: 1rem 1.1rem 1.15rem; border-top: 1px solid color-mix(in srgb, var(--brand-border) 74%, transparent); color: var(--brand-text-muted); } .system-detail-card:not([open]) > ul, .system-detail-card:not([open]) > p { display: none; } .formal-panel--ornamented { position: relative; overflow: hidden; } .formal-panel--ornamented > * { position: relative; z-index: 1; } .news-grid, .institution-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .news-card { display: grid; align-content: start; gap: .65rem; min-height: 190px; padding: 1.2rem; } .news-card span { width: max-content; padding: .28rem .65rem; border-radius: 999px; background: var(--brand-secondary-light); color: var(--brand-secondary-dark); font-size: .78rem; font-weight: 900; } .news-card h3, .institution-showcase-card h3 { margin: 0; color: var(--brand-primary-dark); } .news-card p, .institution-showcase-card p, .institution-showcase-card blockquote { margin: 0; color: var(--brand-text-muted); } .landing-operational-list { position: relative; z-index: 1; display: grid; gap: .4rem; margin: .1rem 0 0; padding-inline-start: 1.15rem; color: var(--brand-text); font-size: .9rem; font-weight: 800; line-height: 1.7; } .institution-showcase-grid { align-items: stretch; } .institution-showcase-card { display: grid; align-content: start; gap: 1rem; padding: 1.2rem; } .institution-showcase-card__header { display: flex; align-items: center; gap: .85rem; } .institution-showcase-card__header > span, .institution-showcase-card__header img { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--institution-color, var(--brand-primary)) 36%, var(--brand-border)); border-radius: 50%; background: color-mix(in srgb, var(--institution-color, var(--brand-primary)) 10%, var(--brand-surface)); color: var(--institution-color, var(--brand-primary)); font-weight: 900; } .institution-showcase-card__header img { object-fit: contain; padding: .45rem; } .institution-showcase-card__header small { color: var(--institution-color, var(--brand-primary)); font-size: .8rem; font-weight: 900; } .institution-showcase-card blockquote { padding: .85rem 1rem; border-inline-start: 3px solid color-mix(in srgb, var(--institution-color, var(--brand-primary)) 42%, var(--brand-secondary)); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .institution-showcase-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; } .auth-shell { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: 2rem; align-items: center; min-height: calc(var(--qc-viewport-height) - 120px); padding: 2rem 0 calc(2rem + var(--qc-safe-bottom)); } .auth-shell--single { grid-template-columns: minmax(320px, 480px); justify-content: center; } .auth-card { position: relative; overflow: hidden; width: 100%; padding: 2rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 92%, transparent); box-shadow: 0 24px 60px rgba(31, 27, 22, .09); backdrop-filter: blur(10px); } .auth-card::before { content: ""; position: absolute; inset: 1rem 1.5rem auto; height: 190px; background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); background-position: top center; background-repeat: no-repeat; background-size: contain; opacity: .55; pointer-events: none; } .auth-card::after { content: ""; position: absolute; inset-inline-end: -36px; bottom: -42px; width: 124px; height: 124px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-repeat: no-repeat; background-size: contain; opacity: .24; pointer-events: none; } .auth-card > * { position: relative; z-index: 1; } .auth-card__header { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; } .auth-card__header { flex-wrap: wrap; } .auth-card__header::after { flex-basis: 100%; margin-top: .35rem; } .auth-card__header h1 { margin: 0; } .auth-card__header p { margin-bottom: 0; } .auth-card__footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--brand-border); text-align: center; } .auth-visual { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--brand-border)); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 55%, transparent), transparent 50%), var(--brand-surface-muted); padding: 2rem; } .auth-visual::before { content: ""; position: absolute; inset: 1.15rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 22%, transparent); border-radius: calc(var(--brand-radius-card) - 6px); pointer-events: none; } .auth-visual::after { content: ""; position: absolute; inset-inline-start: 1.25rem; bottom: 1rem; width: 92px; height: 42px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-repeat: no-repeat; background-size: contain; opacity: .45; pointer-events: none; } .auth-visual blockquote { max-width: 460px; margin: 1.5rem auto 0; color: var(--brand-primary-dark); font-family: var(--brand-font-heading); font-size: 1.1rem; font-weight: 800; text-align: center; } .brand-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; } .brand-settings-page .page-heading, .brand-settings-page .settings-system-nav, .brand-settings-page .brand-settings-grid { max-width: 1280px; margin-inline: auto; } .brand-settings-preview { position: sticky; top: 90px; } .brand-settings-page .content-card { display: grid; gap: 1rem; } .brand-settings-page .section-title { margin: 0 0 .85rem; color: var(--brand-primary-dark); font-size: 1.05rem; font-weight: 900; } .brand-settings-page .form-label { color: var(--brand-text); font-weight: 900; } .brand-settings-page textarea[name="custom_css_variables"] { direction: ltr; min-height: 180px; text-align: left; } .form-grid, .color-grid, .toggle-grid { display: grid; gap: 1rem; } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-section-title { grid-column: 1 / -1; padding-top: .75rem; margin-top: .25rem; border-top: 1px solid var(--brand-border); font-weight: 800; font-size: 1rem; color: var(--qc-text); } .form-grid > .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; } .form-field--wide, .form-actions--full { grid-column: 1 / -1; } .dual-date-secondary { margin-top: .4rem; } .dual-date-hint { display: block; min-height: 1.1em; margin-top: .35rem; color: var(--brand-text-muted); font-size: .8rem; } /* AR: مكوّن — عرض تاريخ موحّد: النوع المعتمد للمؤسسة سطرًا رئيسيًا، والنوع الآخر (.date-secondary) سطرًا ثانويًا صغيرًا تحته. مستخدم في الجداول والبطاقات. EN: component — unified date display: the institution's preferred calendar as the primary line, the other type (.date-secondary) as a small secondary line beneath it. */ .app-date { display: inline-flex; flex-direction: column; line-height: 1.3; } .app-date--empty { color: var(--brand-text-muted); } .date-secondary { color: var(--brand-text-muted); font-size: .78rem; } /* AR: صفحة الموسم — الأيام مجمَّعة أكورديون شهري (

) بدل جدول واحد طويل. كل صفوف الأيام تبقى في الـDOM؛

المغلق يخفيها فقط. EN: Season page — days grouped into a monthly

accordion instead of one long table. Every day row stays in the DOM; a closed

merely hides it. */ .season-month { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); margin-bottom: .6rem; } .season-month > .season-month__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .7rem .9rem; cursor: pointer; font-weight: 700; list-style: none; } .season-month > .season-month__summary::-webkit-details-marker { display: none; } .season-month > .season-month__summary::before { content: "▸"; color: var(--brand-text-muted); font-size: .8rem; } .season-month[open] > .season-month__summary::before { content: "▾"; } .season-month[open] > .season-month__summary { border-bottom: 1px solid var(--brand-border); } .season-month__label { color: var(--brand-primary); } .season-month__counts { color: var(--brand-text-muted); font-weight: 400; font-size: .82rem; } .season-month__apply { margin-inline-start: auto; } /* AR: أسابيع متداخلة داخل كل شهر (السبت→الجمعة) — نفس نمط الأكورديون بمسافة بادئة وخط أخف. */ .season-week { border-block-start: 1px solid var(--brand-border); } .season-week:first-of-type { border-block-start: 0; } .season-week > .season-week__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .9rem .5rem 1.6rem; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; } .season-week > .season-week__summary::-webkit-details-marker { display: none; } .season-week > .season-week__summary::before { content: "▸"; color: var(--brand-text-muted); font-size: .72rem; } .season-week[open] > .season-week__summary::before { content: "▾"; } .season-week__label { color: var(--brand-text); } .season-week__counts { color: var(--brand-text-muted); font-weight: 400; font-size: .78rem; } .season-week__apply { margin-inline-start: auto; } .season-day__date { min-width: 8.5rem; } .season-day__date .date-secondary, .season-day__primary { display: block; } .season-day__primary { font-weight: 600; } .season-day__date .form-control { margin-block: .15rem; } /* AR: مكوّن تقويم مدمج (هجري/ميلادي) يحل محل حقلي "تاريخ ميلادي بتقويم + تاريخ هجري نصي" — صندوق واحد بزر تبديل بين النظامين، فوق نفس حقلي الإدخال الأصليين (يبقيان في الـDOM مخفيين ليحملا القيمة الفعلية المرسلة للخادم دون أي تعديل على الـBackend). EN: A merged dual-calendar component (Hijri/Gregorian) replacing the old pattern of "a native Gregorian date input + a plain Hijri text field" — one box with a system toggle, layered over the same original inputs (kept hidden in the DOM so they still carry the actual submitted value, with no backend changes needed). */ .dual-calendar { position: relative; min-width: 0; width: 100%; } .dual-calendar__trigger { width: 100%; min-width: 0; min-height: 40px; padding: .5rem .65rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--qc-text); font: inherit; text-align: start; cursor: pointer; } .dual-calendar__trigger--placeholder { color: var(--brand-text-muted); } .dual-calendar__popover { position: absolute; inset-inline: 0; top: calc(100% + .25rem); z-index: 30; width: max-content; min-width: 100%; max-width: 20rem; padding: .65rem; background: var(--brand-surface); border: 1px solid var(--qc-border); border-radius: .6rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12); } .dual-calendar__popover[hidden] { display: none; } .dual-calendar__mode-toggle { display: flex; gap: .35rem; margin-bottom: .5rem; } .dual-calendar__mode-btn { flex: 1; padding: .3rem .5rem; border: 1px solid var(--brand-border); border-radius: .4rem; background: var(--brand-surface-muted); color: var(--qc-text); font-size: .82rem; font-weight: 600; cursor: pointer; } .dual-calendar__mode-btn.is-active { background: var(--qc-primary); border-color: var(--qc-primary); color: #fff; } .dual-calendar__nav { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; } .dual-calendar__nav-btn { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-border); border-radius: .4rem; background: var(--brand-surface); color: var(--qc-text); cursor: pointer; font-size: .9rem; line-height: 1; } .dual-calendar__nav-btn:hover { background: var(--brand-primary-light); } .dual-calendar__nav select { flex: 1 1 auto; min-width: 0; padding: .3rem .35rem; font-size: .82rem; } .dual-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; } .dual-calendar__weekday { text-align: center; font-size: .72rem; font-weight: 700; color: var(--brand-text-muted); padding-block: .2rem; } .dual-calendar__day { aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .4rem; background: transparent; color: var(--qc-text); font-size: .82rem; cursor: pointer; } .dual-calendar__day:hover:not(:disabled) { background: var(--brand-primary-light); } .dual-calendar__day--muted { color: var(--brand-text-muted); opacity: .55; } .dual-calendar__day--today { border-color: var(--qc-primary); } .dual-calendar__day--selected { background: var(--qc-primary); border-color: var(--qc-primary); color: #fff; font-weight: 700; } .dual-calendar__day:disabled { cursor: not-allowed; opacity: .35; } .dual-calendar__footer { display: flex; justify-content: space-between; gap: .4rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--qc-border); } .dual-calendar__footer button { flex: 1; padding: .3rem .5rem; border: 1px solid var(--brand-border); border-radius: .4rem; background: var(--brand-surface-muted); color: var(--qc-text); font-size: .8rem; cursor: pointer; } .dual-calendar__footer button:hover { background: var(--brand-primary-light); } @media (max-width: 640px) { .dual-calendar__popover { max-width: none; } } .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .color-control { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 800; } .color-control input { width: 100%; height: 44px; padding: 0; border: 0; background: transparent; } .toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toggle-row { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); font-weight: 800; } .brand-upload-preview { display: block; max-width: 220px; max-height: 72px; margin-top: .75rem; object-fit: contain; } .brand-upload-preview--icon { width: 56px; height: 56px; } .brand-preview { display: grid; gap: 1rem; } .brand-preview__header { display: flex; align-items: center; gap: .75rem; } .brand-preview__header img, .brand-preview__header span { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); font-weight: 900; } .brand-preview__header img { object-fit: contain; padding: .35rem; } .brand-preview__header small { display: block; color: var(--brand-text-muted); } .brand-preview__surface { padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .brand-preview__surface h3 { margin-top: 0; } .brand-preview-card { box-shadow: var(--qc-shadow); } .brand-preview .table { overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .wallet-card { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: var(--brand-surface); border-radius: var(--brand-radius-card); box-shadow: 0 24px 60px rgba(31, 27, 22, .18); } .admission-portal { max-width: 1040px; margin-inline: auto; } .admission-portal--wide { width: min(100%, 1240px); max-width: 1240px; } .admission-portal-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.25rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: radial-gradient(circle at top right, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 32%), var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .admission-portal-hero span, .admission-context-card span, .readonly-field span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .admission-portal-hero h1 { margin: .25rem 0 0; color: var(--brand-primary-dark); font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 900; } .admission-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .admission-context-card, .readonly-field { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .admission-context-card strong, .readonly-field strong { color: var(--brand-text); font-size: 1rem; font-weight: 900; } .locked-profile-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--brand-border)); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-primary-light) 64%, var(--brand-surface)); } .locked-profile-card strong { color: var(--brand-primary-dark); } .readonly-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .section-subheading { margin-top: .3rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); color: var(--brand-primary-dark); font-weight: 900; } .admission-portal--wide .admin-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admission-portal--parent .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admission-field--wide { grid-column: span 2; } .admission-phone-field, .admission-portal .field, .phone-input-group > * { min-width: 0; } .phone-input-group { display: grid; grid-template-columns: minmax(118px, .8fr) minmax(0, 1fr); gap: .55rem; } .phone-input-group .form-control { min-width: 0; width: 100%; } .admission-progress-panel { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 48%, transparent), transparent 70%), var(--brand-surface); box-shadow: var(--qc-shadow); } .admission-progress-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .admission-progress-card { display: grid; gap: .35rem; padding: .8rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .admission-progress-card span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; } .admission-progress-card strong { color: var(--brand-primary-dark); font-size: 1.05rem; } .admission-progress-card progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: var(--brand-primary-light); } .admission-progress-card progress::-webkit-progress-bar { background: var(--brand-primary-light); } .admission-progress-card progress::-webkit-progress-value, .admission-progress-card progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); } .conditional-panel { display: grid; gap: .85rem; transition: opacity .2s ease, transform .2s ease; } .conditional-panel.is-collapsed { display: none; } .option-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; } .option-card-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .option-card { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: .75rem .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-text); font-weight: 700; } .option-card input { width: 16px; height: 16px; accent-color: var(--brand-primary); } .health-panel { display: grid; gap: .85rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--brand-info) 18%, var(--brand-border)); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-info) 7%, var(--brand-surface)); } .admission-portal form > .content-card, .admission-portal > .content-card { display: grid; gap: 1rem; } .admission-portal .content-card .admin-form { gap: 1rem; } .admission-portal .admin-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .admission-portal > h2 { position: relative; margin-inline: auto; max-width: 760px; color: var(--brand-primary-dark); font-size: clamp(1.65rem, 3vw, 2.45rem); } .admission-portal > h2::after { content: ""; display: block; width: 84px; height: 2px; margin: .9rem auto 0; background: linear-gradient(90deg, transparent, var(--brand-secondary), transparent); } .admission-portal .alert-info { border-color: color-mix(in srgb, var(--brand-info) 22%, var(--brand-border)); background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); color: var(--brand-text); } .admission-portal .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; } .admission-portal .form-actions .btn { min-width: 150px; } .admission-portal .form-actions form { display: block; margin: 0; } .admission-portal .content-card > .section-heading:first-child { margin-bottom: .2rem; } .admission-portal .content-card hr { width: 100%; border: 0; border-top: 1px solid var(--brand-border); } .admission-portal .form-check { display: flex; align-items: flex-start; gap: .55rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .admission-portal .form-check-input { flex: 0 0 auto; } .admission-portal input[type="file"].form-control { padding-block: .5rem; } .admission-file-list { display: grid; gap: .75rem; } .admission-file-field { display: grid; gap: .5rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .admission-file-input { min-height: 48px; width: 100%; } .admission-portal .card { overflow: hidden; } .admission-card { max-width: 980px; margin-inline: auto; padding: 1.35rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .admission-card__header { margin-bottom: 1.2rem; text-align: center; } .admission-card__header span { color: var(--brand-secondary-dark); font-size: .82rem; font-weight: 900; } .admission-card__header h1 { margin: .35rem 0 0; color: var(--brand-primary-dark); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; } .admission-card .field { display: grid; gap: .4rem; } .admission-card .form-grid__full, .form-grid__full { grid-column: 1 / -1; } .admission-portal .card-header { display: flex; align-items: center; gap: .65rem; min-height: 58px; border-bottom-color: var(--brand-border); background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-light) 72%, transparent), transparent), var(--brand-surface-muted); color: var(--brand-primary-dark); font-weight: 900; } .admission-portal .step-badge, .admission-portal .badge.bg-primary { background: var(--brand-primary) !important; color: var(--brand-surface); } .admission-portal .required-star { color: var(--brand-danger) !important; } .admission-portal .d-grid { display: grid; } .admission-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem; } .admission-type-card { display: grid; align-content: start; gap: .55rem; min-height: 230px; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-text); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } a.admission-type-card:hover, a.admission-type-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--brand-border)); box-shadow: var(--qc-shadow-soft); color: var(--brand-text); } .admission-type-card span { width: fit-content; padding: .22rem .55rem; border-radius: 999px; background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .76rem; font-weight: 900; } .admission-type-card strong { color: var(--brand-primary-dark); font-size: 1.05rem; font-weight: 900; } .admission-type-card p, .admission-type-card small { margin: 0; color: var(--brand-text-muted); line-height: 1.75; } .admission-type-card small { font-size: .82rem; } .admission-type-card em { align-self: end; margin-top: .3rem; color: var(--brand-secondary-dark); font-style: normal; font-weight: 900; } .admission-type-card--primary { border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--brand-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 55%, transparent), transparent 72%), var(--brand-surface); } .admission-type-card--disabled { background: color-mix(in srgb, var(--brand-surface-muted) 72%, var(--brand-surface)); } .admission-type-card--disabled span { background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)); color: var(--brand-warning); } .admission-portal .btn-lg { min-height: 56px; justify-content: flex-start; padding-inline: 1rem; font-size: 1rem; } .admission-portal .btn-warning, .admission-portal .btn-success { color: var(--brand-surface); } .admission-portal .btn-warning { background: var(--brand-warning); border-color: var(--brand-warning); } .admission-portal .btn-success { background: var(--brand-success); border-color: var(--brand-success); } .admission-portal .border.rounded { border-color: var(--brand-border) !important; border-radius: var(--brand-radius-card) !important; } .daily-operations { max-width: 1280px; margin-inline: auto; } .daily-session-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 72%, transparent), transparent 68%), var(--brand-surface); box-shadow: var(--qc-shadow); } .daily-session-hero span { display: block; margin-bottom: .35rem; color: var(--brand-secondary-dark); font-size: .86rem; font-weight: 900; } .daily-session-hero h1 { margin: 0; color: var(--brand-primary-dark); font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 900; } .daily-session-hero p { margin: .45rem 0 0; color: var(--brand-text-muted); } .daily-session-quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; max-width: 620px; } .daily-operations .content-card { margin-bottom: 1rem; } .daily-session-toolbar, .daily-session-state-card { align-items: stretch; border-bottom: 1px solid var(--brand-border); } .daily-session-date-form, .daily-session-date-navigation, .daily-session-actions, .daily-session-reopen-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .daily-session-date-form .form-control { min-width: 180px; } .daily-session-date-navigation, .daily-session-actions { justify-content: flex-end; } .daily-session-state { display: flex; align-items: center; } .daily-session-reopen-form { padding: .45rem; border: 1px solid color-mix(in srgb, var(--brand-danger) 24%, var(--brand-border)); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-danger) 7%, var(--brand-surface)); } .daily-record-readiness-card { display: grid; gap: 1rem; border-inline-start: 4px solid var(--brand-warning); } .daily-record-readiness-card[data-readiness-status="ready"], .daily-record-readiness-card[data-readiness-status="closed"] { border-inline-start-color: var(--brand-success); } .daily-record-readiness-card[data-readiness-status="blocked"] { border-inline-start-color: var(--brand-danger); } .daily-record-readiness-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .daily-record-readiness-card__header strong { display: block; color: var(--brand-text); margin-bottom: .25rem; } .daily-record-readiness-card__header p { margin: 0; color: var(--brand-text-muted); } .daily-record-readiness-card__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; } .daily-record-readiness-card__metrics div { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-soft); } .daily-record-readiness-card__metrics span { color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; } .daily-record-readiness-card__metrics strong { color: var(--brand-text); font-size: 1.25rem; line-height: 1; } .daily-record-readiness-card__notes { display: flex; flex-wrap: wrap; gap: .5rem; } .before-lesson-rule-hint { display: block; line-height: 1.4; } .daily-session-search-card { position: sticky; top: .75rem; z-index: 10; padding: .9rem; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-light) 58%, transparent), transparent 70%), var(--brand-surface); } .daily-session-search-card .form-control { min-width: 0; } .daily-operations > h1, .daily-operations > h2 { margin-bottom: 1rem; color: var(--brand-primary-dark); } .daily-operations .alert-info { border-color: color-mix(in srgb, var(--brand-info) 24%, var(--brand-border)); background: color-mix(in srgb, var(--brand-info) 10%, var(--brand-surface)); color: var(--brand-text); } .daily-operations .alert-warning { border-color: color-mix(in srgb, var(--brand-warning) 34%, var(--brand-border)); background: color-mix(in srgb, var(--brand-warning) 12%, var(--brand-surface)); } .daily-operations .table { min-width: 980px; margin-bottom: 0; } .daily-operations .table-responsive, .daily-operations table { border-radius: var(--brand-radius-card); } .daily-operations table { overflow: hidden; box-shadow: 0 8px 24px rgba(31, 27, 22, .04); } .daily-operations td, .daily-operations th { vertical-align: middle; } .daily-operations .form-control { min-width: 120px; } .daily-operations .attendance-status { min-width: 150px; } .attendance-status-shortcuts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; } .attendance-status-chip { min-height: 36px; padding: .38rem .6rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-text); font-size: .8rem; font-weight: 900; line-height: 1.2; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .attendance-status-chip:hover, .attendance-status-chip:focus-visible, .attendance-status-chip.is-selected { border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--brand-border)); background: var(--brand-primary); color: var(--brand-surface); } .attendance-status-chip:disabled { cursor: not-allowed; opacity: .55; } .daily-attendance-panel { display: grid; gap: 1rem; } .daily-attendance-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(280px, auto); align-items: center; gap: 1rem; } .daily-attendance-stats, .daily-attendance-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .linked-attendance-summary { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 1rem; border-inline-start: 4px solid var(--brand-warning); } .linked-attendance-summary.is-ready { border-inline-start-color: var(--brand-success); } .linked-attendance-summary strong { display: block; color: var(--brand-text); margin-bottom: .25rem; } .linked-attendance-summary p, .linked-attendance-summary small { color: var(--brand-text-muted); margin: 0; } .linked-attendance-summary__badges, .attendance-policy-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .attendance-policy-strip { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); } .attendance-policy-strip span { border: 1px solid var(--brand-border); border-radius: 999px; color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; padding: .4rem .65rem; } .attendance-autosave-status { min-width: 92px; color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .attendance-autosave-status[data-state="saving"] { color: var(--brand-warning); } .attendance-autosave-status[data-state="saved"] { color: var(--brand-success); } .attendance-autosave-status[data-state="failed"], [data-attendance-row][data-autosave-state="failed"] { color: var(--brand-danger); } [data-attendance-row][data-autosave-state="saving"] { background: color-mix(in srgb, var(--brand-warning) 8%, transparent); } [data-attendance-row][data-autosave-state="saved"] { background: color-mix(in srgb, var(--brand-success) 7%, transparent); } .daily-attendance-quick-actions { justify-content: flex-end; } .daily-attendance-panel .content-card.table-responsive { padding: 0; overflow: hidden; } .daily-attendance-actions, .daily-attendance-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; } .daily-attendance-actions { justify-content: flex-start; padding: .35rem 0; } .daily-attendance-review-actions { justify-content: center; } .daily-operations .badge.bg-success, .daily-operations .badge.bg-danger, .daily-operations .badge.bg-warning, .daily-operations .badge.bg-secondary { color: var(--brand-surface) !important; } .daily-operations .badge.bg-success { background: var(--brand-success) !important; } .daily-operations .badge.bg-danger { background: var(--brand-danger) !important; } .daily-operations .badge.bg-warning { background: var(--brand-warning) !important; } .daily-operations .badge.bg-secondary { background: var(--brand-text-muted) !important; } .daily-operations .d-flex.gap-2 { row-gap: .6rem; } @media (max-width: 992px) { .daily-attendance-toolbar, .linked-attendance-summary { grid-template-columns: 1fr; } .daily-attendance-quick-actions { justify-content: flex-start; } .daily-attendance-panel .table-responsive { border: 0; background: transparent; } .daily-attendance-panel table, .daily-attendance-panel thead, .daily-attendance-panel tbody, .daily-attendance-panel tr, .daily-attendance-panel th, .daily-attendance-panel td { display: block; width: 100%; } /* AR: خصوصية أعلى من ‎.ikd-redesign .table‎ (min-width: 720px) حتى لا يبقى تمرير أفقي داخل البطاقات. */ /* EN: Higher specificity than .ikd-redesign .table (min-width: 720px) so cards don't keep an inner horizontal scroll. */ .daily-attendance-panel table.table { min-width: 0; box-shadow: none; } .daily-attendance-panel thead { display: none; } .daily-attendance-panel tr { margin: .75rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .daily-attendance-panel td { padding: .45rem 0; border: 0; text-align: start; } /* AR: بعد إخفاء رؤوس الجدول على الجوال تظهر تسمية كل خلية فوقها (خاصة حقلي الوقت). */ /* EN: With table headings hidden on mobile, each cell shows its label above it (esp. the time fields). */ .daily-attendance-panel td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .35rem; color: var(--brand-text-muted); font-size: .78rem; font-weight: 900; } .daily-attendance-panel .form-control, .daily-attendance-panel .attendance-status { width: 100%; min-width: 0; } .attendance-status-chip { flex: 1 1 118px; } } .daily-record-workspace { position: relative; overflow: visible; padding: 0; } .daily-record-table { min-width: 720px !important; border-radius: var(--brand-radius-card); } .daily-record-workspace .daily-record-table { box-shadow: none; } /* AR: حاوية تمرير أفقي لجدول التسجيل اليومي حتى لا يُقصّ على الشاشات الصغيرة (الجوال). */ /* EN: Horizontal scroll wrapper for the daily record table so it is not clipped on small screens (mobile). */ .daily-record-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .daily-record-workspace { overflow: hidden; } .daily-record-scroll { border-radius: var(--brand-radius-card); } /* AR: لوحة تحرير الطالب تبقى ثابتة بملء الشاشة ولا تتأثر بحاوية التمرير. */ /* EN: The student edit panel stays full-screen and unaffected by the scroll wrapper. */ .daily-record-scroll .student-row.is-editing { position: fixed; } } .daily-record-table .daily-input-heading, .daily-record-table .daily-input-cell { display: none; } .daily-student-main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .daily-student-name { display: block; color: var(--brand-text); font-weight: 900; } .daily-student-id { color: var(--brand-text-muted); font-size: .82rem; } .daily-row-buttons { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; } .daily-row-close { display: none; } .daily-record-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(31, 27, 22, .34); backdrop-filter: blur(4px); } body.daily-record-panel-open { overflow: hidden; } /* AR: منفذ لوحة تحرير الطالب — حاوية شفافة تُرفع لتكون ابنًا مباشرًا لـ. لا يوجد هنا transform ولا overflow ولا ‎-webkit-overflow-scrolling، كي يبقى صفّ ‎.is-editing المُنسَّق بـ position: fixed منسوبًا لإطار العرض ويظهر على Safari iOS (كان يُقصّ داخل ‎.daily-record-scroll). الجدول يحمل صنف ‎.daily-record-table فتنطبق عليه كل قواعد ‎.student-row.is-editing دون تكرار. */ .daily-record-editor-portal[hidden] { display: none; } .daily-record-editor-portal { position: static; } .daily-record-editor-portal .daily-record-editor-portal__table { min-width: 0 !important; width: auto; margin: 0; border: 0; background: transparent; box-shadow: none; } .daily-record-editor-portal .daily-record-editor-portal__table > tbody { display: block; } .daily-record-table .student-row.is-editing { position: fixed; inset: clamp(.75rem, 3vw, 2rem); z-index: 1051; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 1rem; padding: 1rem; overflow: auto; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: 0 26px 70px rgba(31, 27, 22, .22); text-align: start; } .daily-record-table .student-row.is-editing td { display: block; padding: 0; border: 0; background: transparent; } .daily-record-table .student-row.is-editing .daily-student-cell { grid-column: 1 / -1; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .daily-record-table .student-row.is-editing .daily-input-cell, .daily-record-table .student-row.is-editing .daily-summary-cell, .daily-record-table .student-row.is-editing .daily-save-cell, .daily-record-table .student-row.is-editing .daily-status-cell, .daily-record-table .student-row.is-editing .daily-approval-cell { padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); } .daily-record-table .student-row.is-editing td[data-section-title]::before { content: attr(data-section-title); display: block; margin-bottom: .75rem; color: var(--brand-primary-dark); font-weight: 900; } .daily-record-table .student-row.is-editing .daily-input-cell > .d-flex { display: grid !important; gap: .75rem !important; } .daily-record-table .student-row.is-editing .lesson-fields, .daily-record-table .student-row.is-editing .start-surah-fields, .daily-record-table .student-row.is-editing .before-lesson-fields, .daily-record-table .student-row.is-editing .review-range-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem !important; } .daily-record-table .student-row.is-editing .review-range-row[hidden] { display: none !important; } /* AR: وضع الصفحات: عمودان ثابتان لضمان بقاء زوجي (سورة+آية) البداية والنهاية كل زوج في صفه الخاص، بدل auto-fit العام الذي قد يفرّق سورة النهاية عن آيتها حسب عرض الحاوية. */ /* EN: Pages mode: a fixed 2-column grid so each (surah+ayah) pair for start/end always stays on its own row, instead of the generic auto-fit which can split "end surah" from "end ayah" depending on the container width. */ .daily-record-table .student-row.is-editing .review-range-row.review-range-row--pages { grid-template-columns: repeat(2, minmax(120px, 1fr)) !important; } .daily-record-table .student-row.is-editing .review-range-row .btn { min-height: 42px; } .daily-record-table .student-row.is-editing .form-control, .daily-record-table .student-row.is-editing .form-select { min-width: 0; } .daily-record-table .student-row.is-editing .start-surah-select.is-locked { border-color: color-mix(in srgb, var(--brand-secondary) 50%, var(--brand-border)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand-secondary-light) 46%, transparent), transparent), var(--brand-surface-muted); color: var(--brand-primary-dark); pointer-events: none; } .daily-record-table .student-row.is-editing .start-surah-auto-hint[hidden] { display: none !important; } .daily-record-table .student-row.is-editing .daily-row-close { display: inline-flex; } .daily-record-table .student-row.is-editing .daily-save-cell .btn, .daily-record-table .student-row.is-editing .daily-approval-cell .btn { width: 100%; } @media (max-width: 760px) { .daily-session-hero { display: grid; } .daily-session-quick-actions { justify-content: stretch; } .daily-session-quick-actions .btn { width: 100%; } .daily-session-toolbar, .daily-session-state-card, .daily-record-readiness-card__header, .daily-session-date-form, .daily-session-date-navigation, .daily-session-actions, .daily-session-reopen-form { display: grid; grid-template-columns: 1fr; width: 100%; } .daily-session-toolbar .btn, .daily-session-state-card .btn, .daily-session-date-form .form-control, .daily-session-reopen-form .form-control { width: 100%; } .daily-session-search-card { position: static; } .daily-record-table { min-width: 0 !important; } .daily-record-table thead { display: none; } .daily-record-table, .daily-record-table tbody, .daily-record-table tr, .daily-record-table td { display: block; width: 100%; } .daily-record-table .student-row { margin-bottom: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: 0 8px 24px rgba(31, 27, 22, .04); } .daily-record-table .student-row > td { border: 0; padding: .8rem; } .daily-record-table .student-row.is-editing { grid-template-columns: 1fr; } } @media (max-width: 920px) { .daily-record-table .student-row.is-editing { grid-template-columns: 1fr; } } .niqati-surface { max-width: 1220px; margin-inline: auto; } .niqati-page .niqati-surface.py-4 { padding-block: 0 !important; } .niqati-surface > .page-heading { margin-bottom: 1.25rem; } .niqati-page .page-heading { padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 70%, transparent), transparent 68%), var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .niqati-page .niqati-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .niqati-page .section { margin-top: 1.5rem; } .niqati-page .section > h2, .niqati-page .section > h3, .niqati-page h4 { color: var(--brand-primary-dark); font-weight: 900; } .niqati-page .wallet-card { position: relative; overflow: hidden; min-height: 250px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, rgba(200, 169, 106, .22), transparent 42%), linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: var(--brand-surface); box-shadow: 0 24px 60px rgba(31, 27, 22, .18); } .niqati-page .wallet-card::after { position: absolute; inset-inline-end: -46px; inset-block-start: -62px; width: 170px; height: 170px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; content: ""; } .niqati-page .wallet-card h2, .niqati-page .wallet-card h3 { color: var(--brand-surface); } .niqati-page .wallet-card .muted { color: rgba(255, 255, 255, .78); } .niqati-page .wallet-number { margin: 1.2rem 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: 2px; } .niqati-page .small-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .niqati-page .stat-box { padding: .8rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--brand-radius-control); background: rgba(255, 255, 255, .12); } .niqati-page .niqati-stat-card { display: grid; align-content: center; min-height: 150px; } .niqati-page .value { margin-top: .45rem; color: var(--brand-primary); font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 900; } .niqati-page .muted, .niqati-page .text-muted { color: var(--brand-text-muted) !important; } .niqati-page .empty { padding: 1rem; border: 1px dashed var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); color: var(--brand-text-muted); } .niqati-page .list { display: grid; gap: .75rem; } .niqati-page .list-item { padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .niqati-page .label { margin-bottom: .35rem; color: var(--brand-text); font-weight: 800; } .niqati-page .card { height: auto; padding: 1.15rem; } .niqati-page .content-card, .store-admin-page .content-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .niqati-page .responsive-card-grid > .content-card, .store-admin-page .responsive-card-grid > .content-card { display: grid; align-content: start; gap: .85rem; } .niqati-page .content-card > .section-heading:first-child, .store-admin-page .content-card > .section-heading:first-child { margin-bottom: .25rem; } .niqati-page .content-card .admin-form-grid, .store-admin-page .content-card .admin-form-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .niqati-page .content-card { display: grid; gap: .9rem; } .niqati-page .content-card > div { min-width: 0; } .store-table-card { gap: .75rem; } .store-table-card .table-responsive { box-shadow: none; } .niqati-reward-panel { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .niqati-reward-panel .section-heading { margin-bottom: .15rem; } .niqati-grant-card__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; cursor: pointer; list-style: none; } .niqati-grant-card__summary::-webkit-details-marker { display: none; } .niqati-grant-card__name { font-weight: 800; color: var(--brand-text); margin-inline-end: auto; } .niqati-grant-card__body { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); } .niqati-page .field--actions { align-self: end; } .niqati-page .detail-grid > div, .store-admin-page .detail-grid > div { border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .niqati-page .content-card.table-responsive, .store-admin-page .content-card.table-responsive { padding: 0; overflow: auto; } .niqati-page .content-card .table-responsive { box-shadow: none; } .niqati-page .table-responsive { border-radius: var(--brand-radius-card); box-shadow: var(--qc-shadow); } .niqati-page .table { min-width: 760px; margin-bottom: 0; } .niqati-page .table th { color: var(--brand-text-muted); font-weight: 900; white-space: nowrap; } .niqati-page .table .form-control, .niqati-page .table .form-select { min-width: 150px; } .niqati-page .badge.bg-warning, .niqati-page .badge.bg-info, .niqati-page .badge.bg-primary, .niqati-page .badge.bg-success, .niqati-page .badge.bg-dark, .niqati-page .badge.bg-danger, .niqati-page .badge.bg-secondary { color: var(--brand-surface) !important; } .niqati-page .badge.bg-warning { background: var(--brand-warning) !important; } .niqati-page .badge.bg-info { background: var(--brand-info) !important; } .niqati-page .badge.bg-primary, .niqati-page .badge.bg-dark { background: var(--brand-primary) !important; } .niqati-page .badge.bg-success { background: var(--brand-success) !important; } .niqati-page .badge.bg-danger { background: var(--brand-danger) !important; } .niqati-page .badge.bg-secondary { background: var(--brand-text-muted) !important; } .store-admin-page .card-header { background: var(--brand-surface-muted); color: var(--brand-primary-dark); font-weight: 900; } .store-admin-page label.me-3 { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: var(--brand-text-muted); font-weight: 700; } .store-admin-page .admin-form { display: grid; gap: .9rem; } .store-admin-page .form-actions { gap: .55rem; } .store-admin-page h4 { color: var(--brand-primary-dark); font-weight: 900; } .finance-page__surface { display: grid; gap: 1rem; } .finance-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; } .finance-summary-card { display: grid; gap: .35rem; min-width: 0; } .finance-summary-card span { color: var(--qc-muted); font-size: .86rem; line-height: 1.35; } .finance-summary-card strong { color: var(--qc-primary-dark); font-size: 1.28rem; line-height: 1.1; overflow-wrap: anywhere; } .finance-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .finance-filter-form { display: grid; gap: 1rem; } .finance-actions { display: flex; flex-wrap: wrap; gap: .35rem; } .finance-actions form { margin: 0; } .finance-table td { vertical-align: top; } .finance-accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .finance-account-card { display: grid; gap: .75rem; } .finance-account-card h3 { margin: 0; font-size: 1rem; } .finance-checkbox-field { display: flex; align-items: center; } .finance-checkbox-field .form-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; } .finance-settle-details { display: inline-block; } .finance-settle-details summary { list-style: none; cursor: pointer; } .finance-settle-details summary::-webkit-details-marker { display: none; } .finance-settle-form { display: grid; gap: .4rem; margin-top: .5rem; min-width: 220px; } .finance-settle-form label { font-size: .82rem; color: var(--qc-muted); } .status-badge--overdue { background: color-mix(in srgb, var(--brand-danger) 14%, var(--brand-surface)); color: var(--brand-danger); } @media (max-width: 1080px) { .finance-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .finance-workbench { grid-template-columns: 1fr; } } @media (max-width: 680px) { .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .exam-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .exam-surface--narrow { max-width: 760px; } .exam-page .page-heading { margin-bottom: .25rem; } .exam-page .content-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); padding: 1.15rem; } .exam-action-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; } .exam-action-panel .inline-action-form { margin: 0; } .exam-result-readiness { display: grid; gap: .35rem; min-width: 11rem; max-width: 17rem; } .exam-result-readiness small { color: var(--brand-text-muted); line-height: 1.45; } .exam-result-action { margin: .55rem 0 0; } .exam-table-card { padding: 0; overflow: hidden; } .exam-table-card .table-responsive { border-radius: inherit; } .exam-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .exam-page .field, .exam-page .form-field { display: grid; gap: .4rem; } .exam-page .field.full, .exam-page .full { grid-column: 1 / -1; } .exam-page .field label, .exam-page .form-field label { color: var(--brand-text); font-weight: 800; } .exam-page .field small, .exam-page .muted, .exam-page .small, .exam-page .small-note { color: var(--brand-text-muted); font-size: .86rem; } .exam-page .actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; } .exam-session-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: .75rem; } .exam-page .student-list, .exam-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; } .exam-page .student-card, .exam-summary-cards .exam-summary-card, .exam-page .result-box, .exam-page .info-box, .exam-page .segments-box { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); padding: 1rem; } .exam-page .result-box--spaced, .exam-page .exam-toolbar-form { margin-bottom: 1.25rem; } .exam-page .autosave-status { margin-bottom: .75rem; } .exam-page .exam-live-timer { display: inline-flex; align-items: center; justify-content: center; min-width: 6.8rem; padding: .32rem .65rem; border: 1px solid rgba(200, 169, 106, .45); border-radius: 999px; background: rgba(244, 232, 201, .42); color: var(--brand-primary-dark); font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: .04em; } .exam-page .evaluation-stepper { display: grid; grid-template-columns: 2.2rem minmax(3.2rem, 1fr) 2.2rem; align-items: stretch; overflow: hidden; min-width: 8.2rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .exam-page .evaluation-stepper__button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; border: 0; background: var(--brand-surface-muted); color: var(--brand-primary-dark); font-size: 1.1rem; font-weight: 900; cursor: pointer; transition: all .2s ease; } .exam-page .evaluation-stepper__button:hover, .exam-page .evaluation-stepper__button:focus { background: var(--brand-primary-light); color: var(--brand-primary); } .exam-page .evaluation-stepper__input { min-width: 0; width: 100%; min-height: 2.5rem; border: 0; border-inline: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-text); text-align: center; font-weight: 900; -moz-appearance: textfield; } .exam-page .evaluation-stepper__input:focus { outline: 2px solid rgba(79, 90, 58, .18); outline-offset: -2px; } .exam-page .evaluation-stepper__input::-webkit-outer-spin-button, .exam-page .evaluation-stepper__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .exam-page .exam-evaluate-page .btn { min-height: 2.75rem; padding-inline: 1rem; font-weight: 900; } .exam-page .exam-evaluate-page .exam-session-actions .btn, .exam-page .exam-evaluate-page .exam-evaluation-form .actions .btn { min-width: 10rem; } .exam-page .exam-evaluate-page .evaluation-stepper { grid-template-columns: 2.75rem minmax(4rem, 1fr) 2.75rem; min-width: 10rem; } .exam-page .exam-evaluate-page .evaluation-stepper__button, .exam-page .exam-evaluate-page .evaluation-stepper__input { min-height: 3rem; font-size: 1.15rem; } .exam-page .exam-evaluate-page .exam-evaluation-table textarea { min-height: 6rem; } .exam-page .question-change-note, .exam-page .text-danger { margin-top: .25rem; color: var(--brand-danger); font-size: .78rem; } .exam-page .question-actions { margin-top: .5rem; } .exam-page .student-card label { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 800; } .exam-page .already-added, .exam-page .yes { color: var(--brand-success); font-weight: 800; } .exam-page .no { color: var(--brand-danger); font-weight: 800; } .exam-page .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .exam-page .exam-meta, .exam-page .meta { color: var(--brand-text-muted); line-height: 1.9; } .exam-page .exam-committee-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem; } .exam-page .exam-committee-meta > div { padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .exam-page .section-title { margin-top: 2rem; margin-bottom: .9rem; color: var(--brand-primary-dark); font-weight: 900; } .exam-page .inline-form { display: inline-grid; gap: .35rem; margin-bottom: .4rem; } .exam-page .inline-action-form { display: inline-flex; align-items: center; margin: .25rem; } .exam-page .action-btn, .exam-page .delete-btn, .exam-page table button:not(.btn) { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-bottom: .35rem; padding: .45rem .75rem; border: 0; border-radius: var(--brand-radius-control); color: var(--brand-surface); text-decoration: none; cursor: pointer; } .exam-page .btn-blue, .exam-page .btn-purple, .exam-page table button:not(.delete-btn):not(.btn) { background: var(--brand-primary); } .exam-page .btn-teal { background: var(--brand-info); } .exam-page .btn-orange { background: var(--brand-warning); } .exam-page .btn-success { background: var(--brand-success); } .exam-page .delete-btn { background: var(--brand-danger); } .exam-page .segments-list { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .6rem; } .exam-page .segment-item { padding: .65rem .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .exam-page .segment-range { margin-top: .4rem; color: var(--brand-text); } .exam-page .small-note--success, .text-success { color: var(--brand-success); } .exam-page .small-note--warning { color: var(--brand-warning); } .committee-create-card { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .committee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-bottom: .85rem; } .exam-page .tall-select { min-height: 130px; } .exam-page .tall-select--large { min-height: 180px; } .committee-member-row, .assigned-student-row { margin-bottom: .5rem; } .assigned-student-row { padding-bottom: .45rem; border-bottom: 1px dashed var(--brand-border); } .exam-page .checkbox-wrap { display: grid; gap: .45rem; justify-items: start; } .exam-page .exam-evaluation-form { padding: 0; overflow: hidden; } .exam-page .exam-evaluation-form .actions { margin: 0; padding: 1rem; border-top: 1px solid var(--brand-border); background: var(--brand-surface-muted); } .exam-page .exam-evaluation-table { min-width: 960px; margin-bottom: 0; } .exam-page .exam-evaluation-table input[type="number"] { min-width: 80px; } .exam-page .exam-evaluation-table textarea { min-width: 180px; min-height: 72px; } .exam-print-toolbar { display: flex; justify-content: flex-end; gap: .65rem; } .exam-print-header { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); padding: 1.15rem; } .exam-print-header h1 { margin: .25rem 0 .85rem; } .exam-print-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .exam-print-results-table { background: var(--brand-surface); } .exam-page .error-box { padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--brand-danger) 32%, var(--brand-border)); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-danger) 9%, var(--brand-surface)); color: var(--brand-danger); font-weight: 800; } .exam-page td.success { background: color-mix(in srgb, var(--brand-success) 14%, var(--brand-surface)); color: var(--brand-success); } .exam-page td.danger { background: color-mix(in srgb, var(--brand-danger) 12%, var(--brand-surface)); color: var(--brand-danger); } .exam-page td.warning { background: color-mix(in srgb, var(--brand-warning) 14%, var(--brand-surface)); color: var(--brand-warning); } .exam-page .badge-available { background: color-mix(in srgb, var(--brand-success) 18%, var(--brand-surface)); color: var(--brand-success); } .exam-page .badge-picked { background: color-mix(in srgb, var(--brand-info) 18%, var(--brand-surface)); color: var(--brand-info); } .exam-page .badge-completed { background: color-mix(in srgb, var(--brand-primary) 18%, var(--brand-surface)); color: var(--brand-primary); } .exam-page .badge-warning { background: color-mix(in srgb, var(--brand-warning) 20%, var(--brand-surface)); color: var(--brand-warning); } @media (max-width: 720px) { /* AR: استمارات الاختبار (إنشاء/تعديل موضع/لجنة) عمود واحد على الجوال. */ /* EN: Exam forms (create/edit position/committee) collapse to one column on mobile. */ .exam-form-grid { grid-template-columns: 1fr; } .exam-page .field.full, .exam-page .full { grid-column: auto; } .exam-page .exam-evaluation-form { padding: .85rem; } .exam-page .exam-evaluation-form .table-responsive { overflow: visible; } .exam-page .exam-evaluation-table, .exam-page .exam-evaluation-table tbody, .exam-page .exam-evaluation-table tr, .exam-page .exam-evaluation-table td { display: block; width: 100%; } /* AR: خصوصية أعلى من ‎.ikd-redesign .data-table‎ (min-width: 720px). */ /* EN: Higher specificity than .ikd-redesign .data-table (min-width: 720px). */ .exam-page table.exam-evaluation-table { min-width: 0; } .exam-page .exam-evaluation-table thead { display: none; } .exam-page .exam-evaluation-table tr { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); padding: .85rem; margin-bottom: .85rem; } .exam-page .exam-evaluation-table td { border: 0; padding: .55rem 0; } .exam-page .exam-evaluation-table td::before { content: attr(data-label); display: block; color: var(--brand-text-muted); font-size: .78rem; font-weight: 900; margin-bottom: .35rem; } .exam-page .evaluation-stepper { min-width: 0; width: 100%; grid-template-columns: 3rem minmax(4rem, 1fr) 3rem; } .exam-page .exam-evaluate-page .exam-session-actions .btn, .exam-page .exam-evaluate-page .exam-evaluation-form .actions .btn { width: 100%; min-width: 0; } .exam-page .exam-evaluate-page .evaluation-stepper { grid-template-columns: 3.25rem minmax(4.5rem, 1fr) 3.25rem; } .exam-page .exam-evaluation-table textarea { min-width: 0; width: 100%; } .exam-print-meta { grid-template-columns: 1fr; } } @media print { body.exam-print-page { background: #fff; } .no-print, .app-sidebar, .app-topbar, .mobile-menu-toggle { display: none !important; } .exam-print-surface { max-width: none; margin: 0; color: #111; } .exam-print-header, .exam-print-results-table { box-shadow: none; border-color: #999; } .exam-print-results-table th, .exam-print-results-table td { border-color: #999 !important; color: #111; } } /* AR: عزل بطاقة بيانات الدخول المؤقتة عند الطباعة، أيًا كانت الصفحة (مستخدمو المؤسسة، المعلمون...). */ /* EN: Isolates the temporary-credential card when printing, regardless of which page hosts it (institution users, teachers...). */ @media print { body.printing-credential [class*="-surface"] > *:not(.credential-print-card) { display: none !important; } body.printing-credential .credential-print-card { box-shadow: none; border-color: #999; } } .exam-show-page > .row, .exam-show-page .exam-detail-grid > .row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 1rem; margin-bottom: .75rem; padding: .75rem 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .exam-show-page .exam-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; } .exam-show-page .exam-detail-grid > .row { margin-bottom: 0; background: var(--brand-surface-muted); } .exam-show-page .label { color: var(--brand-text-muted); font-weight: 900; } .exam-show-page .value { color: var(--brand-text); } .report-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .official-report-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); box-shadow: var(--qc-shadow); } .official-report-header__logos { display: flex; align-items: center; gap: .75rem; } .official-report-header__logo { display: block; width: auto; max-width: 150px; max-height: 58px; object-fit: contain; } .official-report-header__logo--institution { max-width: 86px; max-height: 58px; } .official-report-header__body { display: grid; gap: .35rem; min-width: 0; } .official-report-header__institution { color: var(--brand-text-muted); font-size: .88rem; font-weight: 800; } .official-report-header__title { color: var(--brand-text); font-size: 1.35rem; font-weight: 950; } .official-report-header__meta { display: flex; flex-wrap: wrap; gap: .45rem .9rem; color: var(--brand-text-muted); font-size: .82rem; font-weight: 700; } .reports-page .page-heading { margin-bottom: 1.25rem; } .reports-page .table-responsive { border-radius: var(--brand-radius-card); box-shadow: var(--qc-shadow); background: var(--brand-surface); border: 1px solid var(--brand-border); overflow: hidden; } .reports-page .content-card, .indicators-page .content-card { display: grid; gap: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .reports-page .admin-metric, .indicators-page .admin-metric { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 55%, transparent), transparent 70%), var(--brand-surface); } .reports-page .table, .indicators-page .table { margin-bottom: 0; } .reports-page .table th, .indicators-page .table th { color: var(--brand-text-muted); font-weight: 900; white-space: nowrap; } .reports-page .content-card .table-responsive, .indicators-page .content-card .table-responsive { box-shadow: none; } .reports-page .content-card .table .table, .indicators-page .content-card .table .table { background: var(--brand-surface-muted); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); } .reports-page .empty-state, .report-debug { border: 1px dashed var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); padding: 1.2rem; color: var(--brand-text-muted); } .report-debug { margin-top: 1.5rem; } .report-debug pre { margin: 0; padding: 1rem; overflow-x: auto; border-radius: var(--brand-radius-control); background: var(--brand-primary-dark); color: var(--brand-primary-light); direction: ltr; text-align: left; } .student-profile { display: grid; gap: 1rem; max-width: 1280px; margin-inline: auto; } .profile-header, .profile-section { padding: 1.15rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; overflow: hidden; position: relative; } .profile-header::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); } .profile-title { margin: 0 0 .45rem; color: var(--brand-primary-dark); font-size: 1.65rem; font-weight: 900; } .profile-muted { margin: 0; color: var(--brand-text-muted); } .profile-header__meta { display: flex; flex-wrap: wrap; gap: .45rem; color: var(--brand-text-muted); } .profile-header__meta span { display: inline-flex; align-items: center; min-height: 30px; padding: .25rem .6rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-surface-muted); font-size: .86rem; font-weight: 800; } .profile-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; } .profile-badge { display: inline-flex; align-items: center; padding: .35rem .7rem; border-radius: 999px; background: var(--brand-primary-light); color: var(--brand-primary-dark); font-size: .85rem; font-weight: 900; white-space: nowrap; } .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; } .profile-stat { padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .profile-stat span { display: block; margin-bottom: .35rem; color: var(--brand-text-muted); font-size: .82rem; } .profile-stat strong { display: block; color: var(--brand-text); font-size: 1.15rem; } .profile-stat--success { border-color: color-mix(in srgb, var(--brand-success) 30%, var(--brand-border)); } .profile-stat--warning { border-color: color-mix(in srgb, var(--brand-warning) 34%, var(--brand-border)); } .profile-stat--danger { border-color: color-mix(in srgb, var(--brand-danger) 34%, var(--brand-border)); } .profile-section h2 { margin: 0 0 .75rem; color: var(--brand-primary-dark); font-size: 1.15rem; font-weight: 900; } .profile-table { width: 100%; border-collapse: collapse; } .profile-table th, .profile-table td { padding: .7rem; border-bottom: 1px solid var(--brand-border); text-align: start; vertical-align: top; } .profile-table th { background: var(--brand-surface-muted); color: var(--brand-text-muted); font-weight: 900; } .profile-empty { margin: 0; padding: .9rem; border: 1px dashed var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); color: var(--brand-text-muted); } .student-system-nav, .platform-system-nav, .report-system-nav, .niqati-system-nav, .plan-system-nav, .exam-system-nav, .settings-system-nav, .halaqah-system-nav, .settings-inline-tabs, .assistant-lifecycle-tabs { display: flex; flex-wrap: wrap; gap: .55rem; padding: .7rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 86%, var(--brand-bg-soft)); box-shadow: var(--qc-shadow-soft); } .settings-inline-tabs, .assistant-lifecycle-tabs { margin-bottom: 1.25rem; } .settings-inline-tabs__link, .assistant-lifecycle-tabs__link { display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .9rem; border: 1px solid transparent; border-radius: 999px; background: var(--brand-surface); color: var(--brand-text-muted); font-size: .88rem; font-weight: 900; cursor: pointer; transition: all .2s ease; } .settings-inline-tabs__link:hover, .settings-inline-tabs__link.is-active, .assistant-lifecycle-tabs__link:hover, .assistant-lifecycle-tabs__link.is-active { border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 74%, var(--brand-surface)); color: var(--brand-primary-dark); } .exam-system-nav { margin-bottom: 1.25rem; } .settings-system-nav { margin-bottom: 1rem; } .halaqah-system-nav { margin-bottom: 1.25rem; } .student-system-nav__link, .platform-system-nav__link, .report-system-nav__link, .niqati-system-nav__link, .plan-system-nav__link, .exam-system-nav__link, .settings-system-nav__link, .halaqah-system-nav__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .35rem .78rem; border: 1px solid transparent; border-radius: 999px; background: var(--brand-surface); color: var(--brand-text-muted); font-size: .88rem; font-weight: 900; text-decoration: none; transition: all .2s ease; } .student-system-nav__icon, .platform-system-nav__icon, .report-system-nav__icon, .niqati-system-nav__icon, .plan-system-nav__icon, .exam-system-nav__icon, .settings-system-nav__icon, .halaqah-system-nav__icon { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-secondary-light) 80%, var(--brand-surface)); color: var(--brand-primary-dark); font-size: .68rem; font-weight: 900; letter-spacing: 0; } .student-system-nav__link:hover, .student-system-nav__link.is-active, .platform-system-nav__link:hover, .platform-system-nav__link.is-active, .report-system-nav__link:hover, .report-system-nav__link.is-active, .niqati-system-nav__link:hover, .niqati-system-nav__link.is-active, .plan-system-nav__link:hover, .plan-system-nav__link.is-active, .exam-system-nav__link:hover, .exam-system-nav__link.is-active, .settings-system-nav__link:hover, .settings-system-nav__link.is-active, .halaqah-system-nav__link:hover, .halaqah-system-nav__link.is-active { border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 74%, var(--brand-surface)); color: var(--brand-primary-dark); } .student-system-nav__link.is-active .student-system-nav__icon, .platform-system-nav__link.is-active .platform-system-nav__icon, .report-system-nav__link.is-active .report-system-nav__icon, .niqati-system-nav__link.is-active .niqati-system-nav__icon, .plan-system-nav__link.is-active .plan-system-nav__icon, .exam-system-nav__link.is-active .exam-system-nav__icon, .settings-system-nav__link.is-active .settings-system-nav__icon, .halaqah-system-nav__link.is-active .halaqah-system-nav__icon { background: var(--brand-primary); color: var(--brand-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); } .student-account-metrics, .page-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; } .super-admin-page .content-card, .subscription-plans-page .content-card, .platform-requests-page .content-card, .institution-applications-page .content-card { display: grid; gap: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .super-admin-page .content-card .table-responsive, .subscription-plans-page .content-card .table-responsive, .platform-requests-page .content-card .table-responsive, .institution-applications-page .content-card .table-responsive { border-radius: var(--brand-radius-control); box-shadow: none; overflow: auto; } .super-admin-page .table, .subscription-plans-page .table, .platform-requests-page .table, .institution-applications-page .table { min-width: 820px; margin-bottom: 0; } .super-admin-page .list-row, .subscription-plans-page .list-row, .platform-requests-page .list-row, .institution-applications-page .list-row { border-color: var(--brand-border); border-radius: var(--brand-radius-control); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 46%, transparent), transparent 64%), var(--brand-surface-muted); } .subscription-plans-page .admin-form, .platform-requests-page .admin-form, .institution-applications-page .admin-form { display: grid; gap: .9rem; } .subscription-plans-page .field, .platform-requests-page .field, .institution-applications-page .field { display: grid; gap: .4rem; } .subscription-plans-page .form-check, .platform-requests-page .form-check { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .75rem .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 800; } .platform-requests-page .detail-grid { margin-bottom: 0; } .platform-requests-page .detail-grid dd { overflow-wrap: anywhere; } .student-accounts-page .content-card, .parents-directory-page .content-card, .student-affairs-page .content-card, .student-profile .profile-section, .student-profile .profile-header { box-shadow: var(--qc-shadow); } .student-accounts-page .admin-form { display: grid; gap: .75rem; } .student-accounts-page .account-save-button { justify-self: start; } .family-accounts-page .content-card { display: grid; gap: 1rem; } .family-accounts-page .family-account-filter-form { display: grid; gap: .85rem; } .family-accounts-page .family-credential-input[readonly] { font-weight: 900; color: var(--brand-primary-dark); background: color-mix(in srgb, var(--brand-primary-light) 42%, var(--brand-surface)); } .family-accounts-page .table { min-width: 980px; } .parents-directory-page .list-row { border-color: var(--brand-border); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 54%, transparent), transparent 62%), var(--brand-surface); } .teacher-affairs-surface { /* AR: width:100% ضروري — هذا العنصر عنصر شبكة (grid item) داخل .app-content__inner، و margin-inline:auto وحده على عنصر شبكة بلا عرض صريح يلغي التمدد ويُقلّص العنصر إلى عرض محتواه (fit-content) ويوسّطه. ظهر ذلك كصفحة "مضغوطة كالجوال" في نماذج ضيقة المحتوى مثل /teacher/requests/create. */ width: 100%; max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .teacher-affairs-page .page-heading { margin-bottom: 1.25rem; } .teacher-affairs-nav { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .25rem; padding: .7rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: color-mix(in srgb, var(--brand-surface) 82%, var(--brand-bg-soft)); box-shadow: var(--qc-shadow-soft); } .teacher-affairs-nav__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .35rem .75rem; border-radius: 999px; color: var(--brand-text-muted); font-size: .88rem; font-weight: 900; text-decoration: none; background: var(--brand-surface); border: 1px solid transparent; transition: all .2s ease; } .teacher-affairs-nav__icon { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 999px; color: var(--brand-primary-dark); background: color-mix(in srgb, var(--brand-secondary-light) 80%, var(--brand-surface)); font-size: .68rem; font-weight: 900; letter-spacing: 0; } .teacher-affairs-nav__link:hover, .teacher-affairs-nav__link.is-active { color: var(--brand-primary-dark); border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 74%, var(--brand-surface)); } .teacher-affairs-nav__link.is-active .teacher-affairs-nav__icon { color: var(--brand-surface); background: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); } .teacher-affairs-page .table-responsive { border-radius: var(--brand-radius-card); box-shadow: var(--qc-shadow); } .teacher-affairs-page .content-card.table-responsive { padding: 0; overflow: hidden; } .teacher-affairs-page .content-card:not(.table-responsive) { display: grid; gap: 1rem; } .teacher-affairs-page .responsive-card-grid > .content-card { align-content: start; } .teacher-affairs-page .content-card > .section-heading { margin-bottom: .15rem; } .teacher-affairs-page form.content-card > div, .teacher-affairs-page .responsive-card-grid .content-card > form { display: grid; gap: 1rem; } .teacher-affairs-page .table { overflow: hidden; border-radius: var(--brand-radius-card); } .teacher-affairs-page .table td, .teacher-affairs-page .table th { vertical-align: middle; } .teacher-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; } .teacher-affairs-page .field { display: grid; gap: .4rem; } .teacher-affairs-page .field.full, .teacher-form-grid .full { grid-column: 1 / -1; } .teacher-affairs-page .field label { color: var(--brand-text); font-weight: 800; } .teacher-affairs-page .field input, .teacher-affairs-page .field select, .teacher-affairs-page .field textarea, .teacher-affairs-page .inline-action-form input, .teacher-affairs-page .inline-action-form select { width: 100%; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-text); padding: .65rem .8rem; } .teacher-affairs-page .field input:focus, .teacher-affairs-page .field select:focus, .teacher-affairs-page .field textarea:focus, .teacher-affairs-page .inline-action-form input:focus, .teacher-affairs-page .inline-action-form select:focus { outline: 0; border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--brand-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .teacher-affairs-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } .teacher-affairs-page .actions > form, .teacher-affairs-page .actions > .inline-action-form { margin: 0; } .teacher-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; } .teacher-detail-grid p { display: grid; gap: .25rem; min-height: 74px; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); overflow-wrap: anywhere; } .teacher-detail-grid p, .teacher-list-item p, .teacher-affairs-page .detail-grid dd { margin: 0; } .teacher-detail-grid strong, .teacher-list-item strong { color: var(--brand-primary-dark); } .teacher-detail-grid strong { display: block; color: var(--brand-text-muted); font-size: .82rem; } .teacher-list { display: grid; gap: .75rem; } .teacher-list-item { display: grid; gap: .45rem; padding: .9rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface-muted); } .teacher-affairs-page .inline-action-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .teacher-affairs-page .inline-action-form input { min-width: min(260px, 100%); } .teacher-affairs-page .toggle-line { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-text-muted); font-weight: 800; } .teacher-affairs-page .toggle-line.full { grid-column: 1 / -1; } .teacher-affairs-page .detail-grid > div { min-height: 74px; } .teacher-dashboard-metrics, .attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; } .teacher-dashboard-metric, .attention-card { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .teacher-dashboard-metric span, .attention-card span { color: var(--brand-text-muted); font-weight: 800; } .teacher-dashboard-metric strong, .attention-card strong { color: var(--brand-primary-dark); font-size: 1.8rem; line-height: 1; } .teacher-dashboard-metric--warning { border-color: color-mix(in srgb, var(--brand-warning) 32%, var(--brand-border)); } .teacher-dashboard-metric--danger { border-color: color-mix(in srgb, var(--brand-danger) 32%, var(--brand-border)); } .teacher-dashboard-actions { display: flex; justify-content: center; } .toolbar-form, .assistant-lifecycle-form { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; } .assistant-lifecycle-form select, .assistant-lifecycle-form input { min-width: 150px; } .table-row-risk { background: color-mix(in srgb, var(--brand-danger) 7%, var(--brand-surface)); } .table-row-watch { background: color-mix(in srgb, var(--brand-warning) 8%, var(--brand-surface)); } .review-plans-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .review-plans-surface--narrow { max-width: 880px; } .review-toolbar { display: grid; gap: .65rem; justify-items: end; } .review-toolbar form, .review-toolbar > div { max-width: 100%; } .review-plans-page .table { min-width: 900px; margin-bottom: 0; } .review-plans-page .content-card.table-responsive, .review-plans-page .content-card > .table-responsive { border-radius: var(--brand-radius-card); box-shadow: none; } .review-plans-page .content-card.table-responsive { padding: 0; overflow: auto; } .review-plans-page .content-card { display: grid; gap: .9rem; } .review-plans-page .content-card form { display: grid; gap: .85rem; } .review-plans-page .status-badge { white-space: nowrap; } .review-readiness-card { border-inline-start: 4px solid var(--brand-warning); } .review-readiness-card[data-readiness-status="ready"] { border-inline-start-color: var(--brand-success); } .review-readiness-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .review-readiness-card__header span:not(.status-badge) { display: block; color: var(--brand-text-muted); font-size: .8rem; font-weight: 900; } .review-readiness-card__header strong { display: block; color: var(--brand-text); margin-top: .2rem; } .review-readiness-card__header p { margin: .3rem 0 0; color: var(--brand-text-muted); } .review-readiness-card__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .7rem; } .review-readiness-card__metrics div { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-soft); } .review-readiness-card__metrics span { color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; } .review-readiness-card__metrics strong { color: var(--brand-text); font-size: 1.2rem; line-height: 1; } /* AR: كشف المراجعة اليومي يتحول لبطاقات متراصة على الجوال بدل التمرير الأفقي. */ /* EN: The daily review sheet stacks into cards on mobile instead of horizontal scrolling. */ @media (max-width: 992px) { /* AR: خصوصية أعلى من ‎.ikd-redesign .table‎ (min-width: 720px). */ /* EN: Higher specificity than .ikd-redesign .table (min-width: 720px). */ .review-plans-page table.review-plans-table { min-width: 0; box-shadow: none; } .review-plans-page .review-plans-table, .review-plans-page .review-plans-table tbody, .review-plans-page .review-plans-table tr, .review-plans-page .review-plans-table td { display: block; width: 100%; } .review-plans-page .review-plans-table thead { display: none; } .review-plans-page .review-plans-table tr { margin: .75rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .review-plans-page .review-plans-table td { padding: .45rem 0; border: 0; text-align: start; } .review-plans-page .review-plans-table .review-plans-table__index { display: none; } .review-plans-page .review-plans-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--brand-text-muted); font-size: .78rem; font-weight: 900; } } .halaqahs-surface { max-width: 1280px; margin-inline: auto; } .halaqahs-page .page-heading { margin-bottom: 1.25rem; } .halaqah-list { display: grid; gap: .75rem; } .halaqahs-page .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .halaqah-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .halaqah-form-grid .full, .halaqahs-page .full { grid-column: 1 / -1; } .halaqahs-page .field, .halaqahs-page .mb-3, .halaqahs-page .mb-2 { display: grid; gap: .4rem; } .halaqahs-page .form-label, .halaqahs-page label { color: var(--brand-text); font-weight: 800; } .halaqahs-page .toggle-line { display: inline-flex; align-items: center; gap: .5rem; color: var(--brand-text-muted); } .halaqah-edit-tabs__nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .halaqah-edit-tabs__btn { appearance: none; border: 1px solid var(--brand-border); background: var(--brand-surface-muted); color: var(--brand-text-muted); font-weight: 800; font-size: .92rem; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .halaqah-edit-tabs__btn:hover { color: var(--brand-text); } .halaqah-edit-tabs__btn.is-active { background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-surface)); color: var(--brand-primary); border-color: var(--brand-primary); } .halaqah-edit-tabs__panel { display: none; } .halaqah-edit-tabs__panel.is-active { display: block; } .optional-field__toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--brand-text); font-weight: 700; } .optional-field__body { margin-top: .6rem; padding-inline-start: 1.6rem; } .optional-field__body--row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .halaqah-program-policy, .attendance-source-picker { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); padding: 1rem; } .halaqah-program-policy { display: grid; gap: .35rem; } .halaqah-program-policy strong, .attendance-source-picker__heading strong { color: var(--brand-text); } .halaqah-program-policy p, .attendance-source-picker__heading p, .attendance-source-mode small, .attendance-source-option small { margin: 0; color: var(--brand-text-muted); line-height: 1.6; } .attendance-source-picker__heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .attendance-source-picker__heading > span { flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-surface)); color: var(--brand-primary); padding: .25rem .55rem; font-size: .78rem; font-weight: 800; } .attendance-source-mode, .attendance-source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .attendance-source-mode > div, .attendance-source-option { display: grid; gap: .3rem; min-width: 0; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); padding: .85rem; } .attendance-source-option { grid-template-columns: auto 1fr; align-items: flex-start; cursor: pointer; } .attendance-source-option input { margin-top: .2rem; } .attendance-source-option span { display: grid; gap: .2rem; min-width: 0; } .attendance-source-option:has(input:checked) { border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-surface)); } .halaqah-operational-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; } @media (max-width: 720px) { .attendance-source-picker__heading { display: grid; } .attendance-source-mode, .attendance-source-options { grid-template-columns: 1fr; } } .plans-surface { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .plans-surface--narrow { max-width: 880px; } .plan-preparation-table { min-width: 1280px; } .plan-preparation-table .form-control { min-width: 150px; } .plan-preparation-table textarea.form-control { min-width: 220px; resize: vertical; } .badge-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-surface-muted); color: var(--brand-primary); font-size: 0.82rem; font-weight: 800; white-space: nowrap; } .badge-soft--approved, .badge-soft--plan_created { background: color-mix(in srgb, var(--brand-success) 12%, var(--brand-surface)); color: var(--brand-success); } .badge-soft--ready_for_approval, .badge-soft--teacher_submitted { background: color-mix(in srgb, var(--brand-warning) 14%, var(--brand-surface)); color: var(--brand-warning); } .badge-soft--reverse { background: color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface)); } .plan-summary-card, .plan-commitment-card, .plan-start-source-card, .plans-page .content-card { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); padding: 1.25rem; } .plans-page .plan-table-card { padding: 0; overflow: hidden; } .plans-page .plan-table-card .section-heading { padding: 1rem 1rem 0; } .plans-page .plan-table-card .table-responsive { border-radius: 0; } .plans-page .plan-table-card .table { margin-bottom: 0; } .plans-page .table th { color: var(--brand-text-muted); font-weight: 900; white-space: nowrap; } .plans-page .table td { vertical-align: middle; } .plans-page .table .form-control, .plans-page .table .form-select { min-width: 150px; } .plans-page .detail-grid { margin-bottom: 1rem; } .plan-summary-card__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; } .plan-summary-card__header span, .plan-summary-grid span { display: block; color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .plan-summary-card__header strong, .plan-summary-grid strong { color: var(--brand-text); font-weight: 900; } .plan-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .plan-summary-grid > div { display: grid; gap: .3rem; padding: .8rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .plan-summary-grid__wide { grid-column: span 2; } .plan-commitment-card h2 { margin-top: 0; color: var(--brand-primary-dark); } .plan-commitment-card--success { border-color: color-mix(in srgb, var(--brand-success) 28%, var(--brand-border)); } .plan-commitment-card--danger { border-color: color-mix(in srgb, var(--brand-danger) 28%, var(--brand-border)); } .plan-commitment-card--info { border-color: color-mix(in srgb, var(--brand-info) 28%, var(--brand-border)); } .plan-start-source-card { display: grid; gap: .9rem; border-inline-start: 4px solid var(--brand-warning); } .plan-start-source-card--ready { border-inline-start-color: var(--brand-success); } .plan-start-source-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .plan-start-source-card__header span:not(.status-badge), .plan-start-source-card__grid span { display: block; color: var(--brand-text-muted); font-size: .8rem; font-weight: 900; } .plan-start-source-card__header strong, .plan-start-source-card__grid strong { color: var(--brand-text); } .plan-start-source-card p { margin: 0; color: var(--brand-text-muted); } .plan-start-source-card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } .plan-start-source-card__grid div { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } @media (max-width: 720px) { .review-readiness-card__header, .plan-start-source-card__header { display: grid; } .plan-start-source-card__grid { grid-template-columns: 1fr; } } .plan-actions { display: flex; flex-wrap: wrap; gap: .65rem; } .plan-form { display: grid; gap: 1rem; } .plan-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .plan-form-grid__full { grid-column: 1 / -1; } .plans-page .field { display: grid; gap: .4rem; } .plans-page .field label { color: var(--brand-text); font-weight: 900; } .manual-start-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: .85rem; border: 1px dashed var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .segmented-options { display: flex; flex-wrap: wrap; gap: .65rem; } .segmented-options label { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .8rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-surface-muted); cursor: pointer; } .plan-review-form { display: grid; gap: .6rem; min-width: min(100%, 360px); } .plan-raw-json { direction: ltr; text-align: left; overflow: auto; padding: 1rem; border-radius: var(--brand-radius-control); background: var(--brand-primary-dark); color: var(--brand-primary-light); } .plan-day-text { font-weight: 800; } .plan-day-text--revision { color: var(--brand-info); } .plan-day-text--memorization { color: var(--brand-success); } .status-badge--draft, .status-badge--pending { background: var(--brand-secondary-light); color: var(--brand-secondary-dark); } .status-badge--teacher-approved, .status-badge--admin-approved, .status-badge--active, .status-badge--committed, .status-badge--completed { background: color-mix(in srgb, var(--brand-success) 14%, white); color: var(--brand-success); } .status-badge--delayed, .status-badge--rejected, .status-badge--missed { background: color-mix(in srgb, var(--brand-danger) 14%, white); color: var(--brand-danger); } .status-badge--advanced, .status-badge--revision { background: color-mix(in srgb, var(--brand-info) 14%, white); color: var(--brand-info); } .recitations-page .start-recitation, .recitations-page .recitation-workspace { max-width: 1280px; margin-inline: auto; display: grid; gap: 1rem; } .recitations-page .start-recitation { max-width: 1120px; } .recitations-page .start-header, .recitations-page .start-card, .recitations-page .recitation-topbar, .recitations-page .recitation-stage, .recitations-page .recitation-side, .recitations-page .recitation-panel, .recitations-page .counter-card, .recitations-page .mushaf-page, .recitations-page .mode-option, .recitations-page .event-row { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .recitations-page .start-header, .recitations-page .start-card, .recitations-page .recitation-side, .recitations-page .recitation-panel { padding: 1rem; } .recitations-page .content-card.recitation-panel, .recitations-page .recitation-panel { display: grid; gap: .9rem; } .recitations-page .recitation-panel .table-responsive, .recitations-page .content-card .table-responsive { border-radius: var(--brand-radius-card); box-shadow: none; overflow: auto; } .recitations-page .table { min-width: 820px; margin-bottom: 0; } .recitations-page .table th { color: var(--brand-text-muted); font-weight: 900; white-space: nowrap; } .recitations-page .start-header { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 70%, transparent), transparent 72%), var(--brand-surface); } .recitations-page .start-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; } .recitations-page .start-header h1, .recitations-page .recitation-title h1, .recitations-page .mushaf-hidden strong, .recitations-page .counter-card strong, .recitations-page .mode-option strong, .recitations-page .settings-item h3 { margin: 0; color: var(--brand-primary-dark); } .recitations-page .start-header p, .recitations-page .mode-option span, .recitations-page .technical-panel, .recitations-page .counter-card span, .recitations-page .small-note { color: var(--brand-text-muted); } .recitations-page .form-grid, .recitations-page .recitation-main { display: grid; gap: .9rem; } .recitations-page .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .recitations-page .start-system-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--brand-border); } .recitations-page .start-summary-line { min-height: 76px; display: grid; gap: .15rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); padding: .65rem .75rem; } .recitations-page .start-summary-line span { color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; } .recitations-page .start-summary-line strong { color: var(--brand-primary-dark); font-size: 1rem; line-height: 1.35; } .recitations-page .start-summary-line em { color: var(--brand-text-muted); font-size: .76rem; font-style: normal; font-weight: 800; } .recitations-page .start-summary-line.pending strong { color: var(--brand-warning); } .recitations-page .range-tools { display: grid; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--brand-border); } .recitations-page .range-tool-actions { display: flex; flex-wrap: wrap; gap: .45rem; } .recitations-page .range-tool-button { min-height: 36px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); color: var(--brand-primary-dark); padding: .45rem .7rem; font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; } .recitations-page .range-tool-button:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); } .recitations-page .range-preview { display: grid; gap: .2rem; border: 1px solid color-mix(in srgb, var(--brand-info) 24%, white); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-info) 8%, white); padding: .7rem .8rem; } .recitations-page .range-preview strong { color: var(--brand-info); font-size: .84rem; } .recitations-page .range-preview span { color: var(--brand-text); font-size: .9rem; line-height: 1.7; } .recitations-page .range-warning { border: 1px solid color-mix(in srgb, var(--brand-warning) 32%, white); border-radius: var(--brand-radius-control); background: color-mix(in srgb, var(--brand-warning) 10%, white); color: color-mix(in srgb, var(--brand-warning) 84%, black); padding: .62rem .75rem; font-size: .82rem; font-weight: 800; line-height: 1.7; } .recitations-page .range-warning.ok { border-color: color-mix(in srgb, var(--brand-success) 28%, white); background: color-mix(in srgb, var(--brand-success) 8%, white); color: var(--brand-success); } .recitations-page .form-field { display: grid; gap: .4rem; } .recitations-page .form-field label { color: var(--brand-text); font-weight: 800; } .recitations-page .form-field select, .recitations-page .form-field input, .recitations-page .recitation-select { width: 100%; min-height: 42px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .55rem .75rem; background: var(--brand-surface); color: var(--brand-text); } .recitations-page .mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; } .recitations-page .mode-option { cursor: pointer; display: grid; gap: .35rem; padding: .9rem; } .recitations-page .mode-option:has(input:checked), .recitations-page .recitation-chip { border-color: var(--brand-primary); background: var(--brand-primary-light); color: var(--brand-primary-dark); } .recitations-page .mode-option input { inline-size: 18px; block-size: 18px; } .recitations-page .start-actions { display: flex; justify-content: flex-end; margin-top: 1rem; } .recitations-page .start-button, .recitations-page .recitation-btn { border: 0; border-radius: var(--brand-radius-control); min-height: 42px; padding: .65rem 1rem; color: var(--brand-surface); background: var(--brand-primary); font-weight: 900; cursor: pointer; } .recitations-page .recitation-btn.primary { background: var(--brand-primary); } .recitations-page .recitation-btn.warning { background: var(--brand-warning); } .recitations-page .recitation-btn.secondary { background: var(--brand-text-muted); } .recitations-page .recitation-btn:disabled { opacity: .55; cursor: not-allowed; } .recitations-page .recitation-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: 1rem; align-items: center; } .recitations-page .recitation-title, .recitations-page .technical-panel, .recitations-page .event-list, .recitations-page .recitation-side { display: grid; gap: .75rem; } .recitations-page .recitation-title h1 { font-size: 1.4rem; line-height: 1.45; } .recitations-page .recitation-meta { display: flex; gap: .5rem; flex-wrap: wrap; } .recitations-page .recitation-chip { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 800; white-space: nowrap; text-decoration: none; } .recitations-page .recitation-chip.warn { background: var(--brand-secondary-light); color: var(--brand-secondary-dark); } .recitations-page .recitation-chip.danger { background: color-mix(in srgb, var(--brand-danger) 14%, white); color: var(--brand-danger); } .recitations-page .recitation-main { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); align-items: start; } .recitations-page .recitation-stage { min-height: 540px; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; } .recitations-page .recitation-toolbar { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--brand-border); padding: .75rem; background: var(--brand-surface-muted); } .recitations-page .recitation-buttons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .recitations-page .audio-meter { display: grid; grid-template-columns: 92px minmax(120px, 220px); gap: .5rem; align-items: center; color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .recitations-page .audio-meter-track { height: 10px; border-radius: 999px; background: var(--brand-border); overflow: hidden; } .recitations-page .audio-meter-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-success)); transition: width .08s linear; } .recitations-page .audio-meter-fill[data-signal="quiet"] { background: var(--brand-text-muted); } .recitations-page .audio-meter-fill[data-signal="low"] { background: var(--brand-warning); } .recitations-page .audio-meter-fill[data-signal="clear"] { background: var(--brand-success); } .recitations-page .mic-diagnostics { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: .45rem; } .recitations-page .mic-diagnostic-item { min-height: 58px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .5rem .65rem; background: var(--brand-surface); display: grid; gap: .15rem; } .recitations-page .mic-diagnostic-item span { color: var(--brand-text-muted); font-size: .74rem; font-weight: 800; } .recitations-page .mic-diagnostic-item strong { color: var(--brand-text); font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; } .recitations-page .mic-help { width: 100%; border: 1px solid color-mix(in srgb, var(--brand-info) 24%, white); border-radius: var(--brand-radius-control); padding: .65rem .75rem; background: color-mix(in srgb, var(--brand-info) 9%, white); color: var(--brand-info); font-size: .82rem; font-weight: 800; line-height: 1.7; } .recitations-page .mic-help[data-tone="success"] { border-color: color-mix(in srgb, var(--brand-success) 28%, white); background: color-mix(in srgb, var(--brand-success) 9%, white); color: var(--brand-success); } .recitations-page .mic-help[data-tone="warning"] { border-color: color-mix(in srgb, var(--brand-warning) 32%, white); background: color-mix(in srgb, var(--brand-warning) 12%, white); color: color-mix(in srgb, var(--brand-warning) 82%, black); } .recitations-page .mic-help[data-tone="danger"] { border-color: color-mix(in srgb, var(--brand-danger) 28%, white); background: color-mix(in srgb, var(--brand-danger) 9%, white); color: var(--brand-danger); } .recitations-page .mushaf-session-tabs { display: inline-flex; gap: .25rem; padding: .55rem .75rem; border-bottom: 1px solid var(--brand-border); background: var(--brand-surface); } .recitations-page .mushaf-view-button { min-height: 34px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .35rem .7rem; background: var(--brand-surface-muted); color: var(--brand-text-muted); font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; } .recitations-page .mushaf-view-button.active { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-surface); } .recitations-page .mushaf-session-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); min-height: 0; } .recitations-page .mushaf-session-layout[data-view="interactive"] { grid-template-columns: minmax(0, 1fr); } .recitations-page .mushaf-session-layout[data-view="page"] { grid-template-columns: minmax(0, 1fr); } .recitations-page .mushaf-session-layout[data-view="interactive"] [data-mushaf-panel="page"], .recitations-page .mushaf-session-layout[data-view="page"] [data-mushaf-panel="interactive"] { display: none; } .recitations-page .mushaf-interactive-shell { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; } .recitations-page .mushaf-area { padding: 1rem; overflow: auto; background: var(--brand-surface); } .recitations-page .mushaf-page-reference { border-inline-start: 1px solid var(--brand-border); background: var(--brand-surface); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; } .recitations-page .mushaf-page-viewer iframe { width: 100%; min-height: 620px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .recitations-page .mushaf-page-image-shell { min-height: 0; overflow: auto; padding: .75rem; background: var(--brand-surface-muted); } .recitations-page .mushaf-page-reference img { display: block; width: min(100%, 390px); margin-inline: auto; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); } .recitations-page .mushaf-session-layout[data-view="page"] .mushaf-page-reference img { width: min(100%, 720px); } .recitations-page .mushaf-page-status { border-top: 1px solid var(--brand-border); padding: .45rem .75rem; color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; background: var(--brand-surface); } .recitations-page .qul-mushaf-area { background: var(--brand-bg-soft); } /* Authentic Madinah-mushaf page frame */ .recitations-page .qul-mushaf-page { max-width: 640px; margin-inline: auto; background: linear-gradient(180deg, #fdfaf2 0%, #faf5e9 100%); border: 1px solid #cdb27a; border-radius: 10px; box-shadow: inset 0 0 0 4px #fdfaf2, inset 0 0 0 5px #d8c290, inset 0 0 0 10px #fdfaf2, inset 0 0 0 11px rgba(205, 178, 122, .55), 0 10px 26px rgba(74, 56, 22, .12); overflow: hidden; } .recitations-page .qul-mushaf-page .mushaf-page-header { display: flex; justify-content: space-between; padding: 1rem 1.6rem .2rem; color: #8a723f; font-size: .74rem; font-weight: 800; letter-spacing: .02em; background: transparent; border: 0; } .recitations-page .qul-page-body { direction: rtl; padding: .8rem 1.7rem 1rem; font-family: "QPC V2", "KFGQPC Uthmanic Script HAFS", "Amiri Quran", serif; font-size: 1.45rem; line-height: 2.3; color: #1e1a12; } .recitations-page .qul-mushaf-line { position: relative; min-height: 3.1rem; white-space: nowrap; text-align: justify; text-align-last: justify; } /* Gilded ayah-end markers, like the printed mushaf's ornamental numerals */ .recitations-page .qul-word-token.ayah-marker { color: #a8842f; text-shadow: 0 0 .5px rgba(168, 132, 47, .6); } /* Juz/hizb badges floating in the page margin at their starting line */ .recitations-page .qul-margin-badge { position: absolute; inset-inline-start: -1.62rem; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; padding: .45rem .12rem; border-radius: 999px; font-family: var(--brand-font-heading, inherit); font-size: .58rem; font-weight: 800; letter-spacing: .06em; line-height: 1; white-space: nowrap; color: #6d5522; background: linear-gradient(180deg, rgba(216, 194, 144, .5), rgba(216, 194, 144, .25)); border: 1px solid rgba(176, 143, 74, .6); } .recitations-page .qul-margin-badge-hizb { color: #7a6a45; background: linear-gradient(180deg, rgba(216, 194, 144, .3), rgba(216, 194, 144, .14)); } .recitations-page .qul-mushaf-line.centered, .recitations-page .qul-mushaf-line.qul-line-marker { text-align: center; text-align-last: center; } /* Decorated surah-name band, echoing the printed mushaf cartouche */ .recitations-page .qul-mushaf-line[data-line-type="surah_name"] { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: .45rem 0; padding: .32rem .9rem; min-height: 2.6rem; font-family: var(--brand-font-heading, inherit), "Traditional Arabic", serif; font-size: 1.18rem; font-weight: 800; color: #6d5522; background: linear-gradient(90deg, transparent 0%, rgba(216, 194, 144, .28) 18%, rgba(216, 194, 144, .38) 50%, rgba(216, 194, 144, .28) 82%, transparent 100%); border-block: 2px solid rgba(176, 143, 74, .65); box-shadow: inset 0 0 0 1px rgba(216, 194, 144, .4); } .recitations-page .qul-mushaf-line[data-line-type="surah_name"]::before, .recitations-page .qul-mushaf-line[data-line-type="surah_name"]::after { content: "۞"; font-size: 1.25rem; color: #b08f4a; line-height: 1; } /* Basmallah in the traditional ligature style */ .recitations-page .qul-mushaf-line[data-line-type="basmallah"] { font-family: "QPC V2", "Traditional Arabic", "Arabic Typesetting", serif; font-size: 1.9rem; min-height: 3.4rem; color: #2a2416; } /* Centered page number, as in the printed mushaf footer */ .recitations-page .qul-page-footer { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .15rem 1.6rem 1.05rem; color: #8a723f; font-size: .95rem; font-weight: 800; } .recitations-page .qul-page-footer::before, .recitations-page .qul-page-footer::after { content: ""; height: 1px; width: 56px; background: linear-gradient(90deg, transparent, #cdb27a, transparent); } .recitations-page .qul-word-token { display: inline-block; padding: .02rem .1rem; border-radius: .3rem; transition: background-color .18s ease, box-shadow .18s ease; } .recitations-page .qul-word-token.current { background: rgba(216, 176, 74, .3); box-shadow: 0 0 0 1px rgba(176, 143, 74, .6); } .recitations-page .qul-word-token.match { background: rgba(76, 156, 106, .18); color: #1d5c38; } .recitations-page .qul-word-token.alert { background: rgba(222, 168, 62, .26); } .recitations-page .qul-word-token.error, .recitations-page .qul-word-token.fath { background: rgba(196, 84, 74, .22); color: #7c231b; } .recitations-page .qul-word-token.hesitation { background: rgba(140, 128, 180, .2); } .recitations-page .ayah-resources-panel h2 { margin-bottom: .65rem; } .recitations-page .resource-readiness-panel h2 { margin-bottom: .65rem; } .recitations-page .resource-counter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .recitations-page .resource-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .recitations-page .resource-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .recitations-page .resource-mini-list { display: grid; gap: .45rem; } .recitations-page .resource-mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .55rem .7rem; background: var(--brand-surface-muted); } .recitations-page .resource-mini-row span { color: var(--brand-text); font-size: .84rem; font-weight: 800; overflow-wrap: anywhere; } .recitations-page .resource-mini-row strong { color: var(--brand-primary-dark); font-size: .9rem; } .recitations-page .readiness-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .55rem; border-top: 1px solid var(--brand-border); padding: .62rem 0; } .recitations-page .readiness-line:first-of-type { border-top: 0; padding-top: 0; } .recitations-page .readiness-line span { color: var(--brand-text); font-size: .84rem; font-weight: 900; } .recitations-page .readiness-line strong { justify-self: end; color: var(--brand-primary-dark); font-size: .86rem; } .recitations-page .readiness-line em { grid-column: 1 / -1; color: var(--brand-text-muted); font-size: .76rem; font-style: normal; font-weight: 800; } .recitations-page .readiness-line code { grid-column: 1 / -1; display: block; direction: ltr; text-align: left; white-space: normal; overflow-wrap: anywhere; border-radius: .65rem; padding: .45rem .55rem; background: color-mix(in srgb, var(--brand-primary-light) 64%, var(--brand-surface)); color: var(--brand-primary-dark); font-size: .72rem; font-weight: 800; } .recitations-page .readiness-line.ready span::before, .recitations-page .readiness-line.pending span::before, .recitations-page .readiness-line.warning span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; margin-inline-end: .38rem; vertical-align: middle; background: var(--brand-success); } .recitations-page .readiness-line.pending span::before { background: var(--brand-warning); } .recitations-page .readiness-line.warning span::before { background: var(--brand-info); } .recitations-page .asr-status-note { border-top: 1px solid var(--brand-border); padding-top: .65rem; color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; line-height: 1.75; } .recitations-page .ayah-resource-section { border-top: 1px solid var(--brand-border); padding: .65rem 0; } .recitations-page .ayah-resource-section:first-child { border-top: 0; padding-top: 0; } .recitations-page .ayah-resource-section strong { display: block; color: var(--brand-primary); font-size: .86rem; margin-bottom: .25rem; } .recitations-page .ayah-resource-section p { margin: 0; color: var(--brand-text); font-size: .86rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; } .recitations-page .ayah-resources-panel { max-height: 720px; overflow-y: auto; scrollbar-width: thin; } .recitations-page .resource-path-row span { display: grid; gap: .18rem; } .recitations-page .resource-path-row small { direction: ltr; text-align: left; color: var(--brand-text-muted); font-size: .72rem; font-weight: 800; overflow-wrap: anywhere; } .recitations-page .resource-command-list { display: grid; gap: .55rem; } .recitations-page .training-problem-list { margin-top: 1rem; } .recitations-page .training-export-actions { margin-top: .85rem; } .recitations-page .resource-command-row { display: grid; gap: .35rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .65rem .75rem; background: var(--brand-surface-muted); } .recitations-page .resource-command-row span { color: var(--brand-text); font-size: .84rem; font-weight: 900; } .recitations-page .resource-command-row code { direction: ltr; text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--brand-primary-dark); font-size: .74rem; font-weight: 800; } .recitations-page .mushaf-page-viewer img { display: block; max-width: 100%; margin-inline: auto; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); } .recitations-page .mushaf-hidden { min-height: 430px; display: grid; place-items: center; text-align: center; color: var(--brand-text-muted); } .recitations-page .mushaf-hidden strong { display: block; font-size: 1.75rem; margin-bottom: .65rem; } .recitations-page .ghayb-reveal { margin-top: 1rem; min-height: 54px; display: grid; place-items: center; border: 1px dashed var(--brand-secondary); border-radius: var(--brand-radius-control); background: var(--brand-secondary-light); color: var(--brand-secondary-dark); padding: .7rem 1rem; font-size: 1.1rem; font-weight: 900; } .recitations-page .mushaf-page { margin-bottom: 1rem; overflow: hidden; } .recitations-page .mushaf-page.current-page { border-color: color-mix(in srgb, var(--brand-info) 42%, var(--brand-border)); } .recitations-page .mushaf-page-header { display: flex; justify-content: space-between; gap: .7rem; padding: .55rem .85rem; background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; border-bottom: 1px solid var(--brand-border); } .recitations-page .ayah-block { padding: .8rem; border-bottom: 1px solid var(--brand-border); line-height: 2.55; font-size: 1.55rem; color: var(--brand-text); } .recitations-page .ayah-label { display: inline-flex; align-items: center; min-width: 46px; height: 28px; justify-content: center; border-radius: 999px; margin-left: .5rem; background: var(--brand-primary-light); color: var(--brand-primary-dark); font-size: .82rem; font-weight: 900; vertical-align: middle; } .recitations-page .word-token { display: inline-block; padding: 1px 4px; margin: 0 1px; border-radius: .4rem; transition: background .14s ease, color .14s ease, box-shadow .14s ease; } .recitations-page .word-token.current { background: color-mix(in srgb, var(--brand-info) 18%, white); color: var(--brand-info); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-info) 24%, white) inset; } .recitations-page .word-token.match { background: color-mix(in srgb, var(--brand-success) 16%, white); color: var(--brand-success); } .recitations-page .word-token.hesitation { background: var(--brand-secondary-light); color: var(--brand-secondary-dark); } .recitations-page .word-token.alert, .recitations-page .word-token.error, .recitations-page .word-token.fath { background: color-mix(in srgb, var(--brand-danger) 16%, white); color: var(--brand-danger); } .recitations-page .counter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .recitations-page .counter-card { padding: .75rem; min-height: 72px; box-shadow: none; } .recitations-page .counter-card span { display: block; font-size: .78rem; font-weight: 800; } .recitations-page .counter-card strong { display: block; margin-top: .35rem; font-size: 1.5rem; } .recitations-page .technical-line { display: flex; justify-content: space-between; gap: .65rem; border-bottom: 1px solid var(--brand-border); padding-bottom: .45rem; } .recitations-page .event-list { max-height: 260px; overflow: auto; } .recitations-page .event-row { padding: .65rem; gap: .25rem; font-size: .82rem; box-shadow: none; } .recitations-page .event-row.success { border-color: color-mix(in srgb, var(--brand-success) 38%, white); } .recitations-page .event-row.warning { border-color: color-mix(in srgb, var(--brand-warning) 38%, white); } .recitations-page .event-row.danger { border-color: color-mix(in srgb, var(--brand-danger) 38%, white); } .recitations-page .reference-audio { width: 100%; display: block; } .recitations-page .notice-box { border: 1px solid color-mix(in srgb, var(--brand-info) 24%, white); background: color-mix(in srgb, var(--brand-info) 9%, white); color: var(--brand-info); border-radius: var(--brand-radius-control); padding: .75rem; font-size: .82rem; line-height: 1.8; } .recitations-page .settings-toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; } .recitations-page .settings-toggle { display: flex; align-items: center; gap: .55rem; min-height: 44px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .55rem .7rem; background: var(--brand-surface-muted); color: var(--brand-text); font-weight: 800; } .recitations-page .settings-toggle input { inline-size: 18px; block-size: 18px; } .recitations-page .settings-items { display: grid; gap: .85rem; } .recitations-page .settings-item { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .85rem; background: var(--brand-surface-muted); } .recitations-page .settings-item h3 { font-size: 1rem; margin-bottom: .75rem; } .recitations-page .objection-form, .recitations-page .objection-review-form { display: grid; gap: .55rem; margin-top: .75rem; } .recitations-page .objection-form textarea, .recitations-page .objection-review-form textarea { width: 100%; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .65rem .75rem; color: var(--brand-text); background: var(--brand-surface); } .recitations-page .objection-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .recitations-page .mushaf-page-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto; gap: .75rem; align-items: end; } .recitations-page .mushaf-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: .35rem; } .recitations-page .mushaf-page-link { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); color: var(--brand-primary-dark); font-weight: 900; text-decoration: none; } .recitations-page .mushaf-page-link.current { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-surface); } .recitations-page .mushaf-page-link.missing { background: color-mix(in srgb, var(--brand-danger) 10%, white); color: var(--brand-danger); opacity: .72; } .recitations-page .review-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 1rem; align-items: start; } .recitations-page .manual-event-form, .recitations-page .review-events, .recitations-page .review-decision-actions { display: grid; gap: .75rem; } .recitations-page .clip-review-card { display: grid; gap: .65rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .recitations-page .clip-review-meta, .recitations-page .transcript-summary { display: flex; gap: .5rem; flex-wrap: wrap; color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .recitations-page .clip-review-meta strong { color: var(--brand-text); } .recitations-page .transcript-summary span { border: 1px solid var(--brand-border); border-radius: 999px; padding: .2rem .55rem; background: var(--brand-surface); } .recitations-page .clip-transcript-form { display: grid; gap: .55rem; } .recitations-page .transcript-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .recitations-page .clip-asr-form { display: flex; justify-content: flex-start; } .recitations-page .clip-transcript-form label { color: var(--brand-text); font-weight: 900; } .recitations-page .clip-transcript-form button { justify-self: start; } .recitations-page .transcript-preview-result { display: grid; gap: .65rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface); padding: .75rem; } .recitations-page .transcript-preview-result[data-tone="success"] { border-color: color-mix(in srgb, var(--brand-success) 28%, white); } .recitations-page .transcript-preview-result[data-tone="warning"] { border-color: color-mix(in srgb, var(--brand-warning) 32%, white); } .recitations-page .transcript-preview-result[data-tone="danger"] { border-color: color-mix(in srgb, var(--brand-danger) 28%, white); } .recitations-page .transcript-preview-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; } .recitations-page .transcript-preview-card { min-height: 62px; display: grid; align-content: center; gap: .15rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); padding: .5rem .6rem; } .recitations-page .transcript-preview-card span { color: var(--brand-text-muted); font-size: .74rem; font-weight: 800; } .recitations-page .transcript-preview-card strong { color: var(--brand-primary-dark); font-size: 1.05rem; } .recitations-page .transcript-preview-events { display: grid; gap: .45rem; } .recitations-page .transcript-preview-event { display: grid; grid-template-columns: minmax(90px, 140px) minmax(70px, 100px) minmax(0, 1fr); gap: .35rem .65rem; align-items: start; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .55rem .65rem; background: var(--brand-surface-muted); font-size: .82rem; } .recitations-page .transcript-preview-event.success { border-color: color-mix(in srgb, var(--brand-success) 30%, white); } .recitations-page .transcript-preview-event.warning { border-color: color-mix(in srgb, var(--brand-warning) 34%, white); } .recitations-page .transcript-preview-event.danger { border-color: color-mix(in srgb, var(--brand-danger) 30%, white); } .recitations-page .transcript-preview-event strong { color: var(--brand-primary-dark); } .recitations-page .transcript-preview-event span, .recitations-page .transcript-preview-event em { color: var(--brand-text-muted); font-style: normal; font-weight: 800; } .recitations-page .transcript-preview-event p { margin: 0; color: var(--brand-text); line-height: 1.7; } .recitations-page .review-event-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(140px, 180px) minmax(120px, 160px) minmax(180px, 1fr) auto; align-items: center; } .recitations-page .review-event-row select, .recitations-page .review-event-row textarea, .recitations-page .review-decision-actions input, .recitations-page .manual-event-form textarea { width: 100%; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); padding: .55rem .7rem; background: var(--brand-surface); color: var(--brand-text); } .recitations-page .review-decision-actions { grid-template-columns: auto minmax(0, 1fr); } .recitations-page .review-decision-actions form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .owner-hero, .owner-panel, .owner-metric-card, .owner-system, .owner-system-link { border-color: var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow); } .owner-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 72%, transparent), transparent 68%), var(--brand-surface); } .owner-kicker, .owner-section__header span, .owner-panel__header span { color: var(--brand-secondary-dark); } .owner-hero h1, .owner-metric-card h3, .owner-foundation-grid h3, .owner-system__header h3 { color: var(--brand-text); } .owner-progress { background: var(--brand-primary-light); } .owner-progress::-webkit-progress-bar { background: var(--brand-primary-light); } .owner-progress::-webkit-progress-value, .owner-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); } .owner-system-link { background: var(--brand-surface-muted); color: var(--brand-text); } .owner-system-link:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); color: var(--brand-primary-dark); } .owner-system-link em { background: var(--brand-secondary-light); color: var(--brand-secondary-dark); } /* AR: تخطيطات صفحات الهبوط/الدخول/إعدادات الهوية — تُطوى لعمود واحد عند 1024px لتوافق نقطة تبديل هيكل التطبيق (P1، خُفِّضت من 1180 إلى 1024). صفحات الهبوط عامة بلا قائمة جانبية، فبقاء عمودين حتى 1024px مقبول. EN: Landing / auth / brand-settings layouts collapse to one column at 1024px, matching the app-shell breakpoint (P1, lowered 1180→1024). Landing pages are public with no sidebar, so two columns down to 1024px is fine. */ @media (max-width: 1024px) { .brand-settings-grid, .landing-hero, .auth-shell, .landing-section--split { grid-template-columns: 1fr; } .brand-settings-preview { position: static; } } /* AR: صفحة القراءات (تسميع) كثيفة جدًا — تخطيطاتها الداخلية تُطوى مبكرًا عند 1180px عمدًا، مستقلةً عن نقطة تبديل الهيكل (1024px). لا قائمة جانبية داخلية هنا. EN: The recitations (tasmee) page is very dense — its inner layouts intentionally collapse earlier, at 1180px, independent of the shell breakpoint (1024px). */ @media (max-width: 1180px) { .recitations-page .recitation-main, .recitations-page .recitation-topbar, .recitations-page .start-header-row, .recitations-page .start-system-summary, .recitations-page .resource-counter-grid, .recitations-page .resource-dashboard-grid, .recitations-page .resource-health-grid, .recitations-page .mushaf-session-layout, .recitations-page .review-detail-grid { grid-template-columns: 1fr; } .recitations-page .mushaf-page-reference { border-inline-start: 0; border-top: 1px solid var(--brand-border); } .plan-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .readonly-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .app-sidebar { position: static; min-height: auto; border-radius: var(--brand-radius-card); } .app-sidebar__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid, .system-detail-grid, .news-grid, .institution-showcase-grid, .mini-stat-grid, .form-grid, .color-grid, .toggle-grid { grid-template-columns: 1fr; } .landing-hero { min-height: auto; padding-top: 2rem; } .landing-hero__visual, .auth-visual { min-height: auto; } .landing-visual-note { position: static; margin-top: 1rem; } .recitations-page .form-grid, .recitations-page .mode-switch, .recitations-page .settings-toggle-grid, .recitations-page .mic-diagnostics, .recitations-page .transcript-preview-summary, .recitations-page .transcript-preview-event, .recitations-page .mushaf-page-controls, .recitations-page .review-event-row, .recitations-page .review-decision-actions { grid-template-columns: 1fr; } .recitations-page .audio-meter { grid-template-columns: 80px minmax(120px, 1fr); width: 100%; } .committee-form-grid, .halaqah-form-grid { grid-template-columns: 1fr; } .admin-metric-grid, .admin-form-grid, .detail-grid { grid-template-columns: 1fr; } .admin-form-grid__full { grid-column: auto; } .admission-portal--wide .admin-form-grid, .admission-context-grid, .readonly-field-grid, .option-card-grid, .admission-progress-grid, .phone-input-group { grid-template-columns: 1fr; } .admission-field--wide { grid-column: auto; } .admission-portal-hero, .locked-profile-card { display: grid; } } @media (max-width: 640px) { .brand-page-ornament--top { width: 118px; height: 130px; top: 78px; right: -24px; opacity: .18; } .brand-page-ornament--bottom { width: 132px; height: 128px; left: -30px; opacity: .14; } .brand-page-ornament--pattern { display: none; } .app-shell { width: min(100% - 20px, 1440px); margin-block: .8rem; } .app-sidebar__nav { grid-template-columns: 1fr; } .page-heading, .section-heading { display: grid; align-items: start; } .auth-card { padding: 1.25rem; } .recitations-page .recitation-toolbar { align-items: stretch; } .recitations-page .recitation-buttons, .recitations-page .recitation-btn, .recitations-page .recitation-select, .recitations-page .mushaf-session-tabs, .recitations-page .mushaf-view-button, .recitations-page .start-button { width: 100%; } .recitations-page .mushaf-session-tabs { display: grid; grid-template-columns: 1fr; } .recitations-page .range-tool-actions { display: grid; grid-template-columns: 1fr; } .recitations-page .range-tool-button { width: 100%; } .recitations-page .counter-grid { grid-template-columns: 1fr; } .recitations-page .ayah-block { font-size: 1.35rem; } .plan-summary-card__header, .plan-actions { display: grid; } .plan-summary-grid { grid-template-columns: 1fr; } .plan-summary-grid__wide { grid-column: auto; } .plan-form-grid, .manual-start-box { grid-template-columns: 1fr; } .plan-form-grid__full { grid-column: auto; } } .student-affairs-page .student-affairs-surface { display: grid; gap: 1.25rem; } .student-affairs-page .student-affairs-form { display: grid; gap: .85rem; align-content: start; } .student-affairs-page .student-affairs-table { display: grid; gap: .85rem; padding: 0; } .student-affairs-page .student-affairs-table > .section-heading { padding: 1rem 1rem 0; } .student-affairs-page .student-affairs-table > .pagination, .student-affairs-page .student-affairs-table > nav { padding: 0 1rem 1rem; } .student-affairs-page .student-affairs-table .table-responsive { border-radius: 0; border-top: 1px solid var(--brand-border); } .student-affairs-page .field { display: grid; gap: .4rem; } .student-affairs-page .field span { color: var(--brand-text); font-weight: 800; } .student-affairs-page .field input, .student-affairs-page .field select, .student-affairs-page .field textarea, .student-affairs-page .inline-action-form input, .student-affairs-page .inline-action-form select { width: 100%; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-surface); color: var(--brand-text); padding: .65rem .8rem; } .student-affairs-page .field input:focus, .student-affairs-page .field select:focus, .student-affairs-page .field textarea:focus, .student-affairs-page .inline-action-form input:focus, .student-affairs-page .inline-action-form select:focus { outline: 0; border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--brand-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .student-affairs-page .student-affairs-table { min-width: 0; overflow: hidden; } .student-affairs-page .student-affairs-table .pagination { margin-top: 1rem; } .student-affairs-page .inline-action-form { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-width: 280px; } .student-affairs-page .inline-action-form input, .student-affairs-page .inline-action-form select { min-width: 150px; } .student-affairs-page .student-affairs-actions { display: grid; gap: 1rem; } .student-affairs-page .student-affairs-action-buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .student-affairs-page .student-affairs-action-buttons .btn { min-width: 10rem; } .student-affairs-page .student-affairs-dialog { width: min(36rem, calc(100vw - 2rem)); max-width: 100%; border: 0; padding: 0; border-radius: var(--brand-radius-card); background: transparent; color: var(--brand-text); } .student-affairs-page .student-affairs-dialog::backdrop { background: rgba(31, 27, 22, .45); } .student-affairs-page .student-affairs-dialog .student-affairs-form { margin: 0; } .student-affairs-page .student-affairs-dialog .actions { display: flex; flex-wrap: wrap; gap: .65rem; } @media (max-width: 768px) { .student-affairs-page .student-affairs-action-buttons, .student-affairs-page .student-affairs-dialog .actions { display: grid; } .student-affairs-page .student-affairs-action-buttons .btn { width: 100%; min-width: 0; } .student-affairs-page .inline-action-form { display: grid; width: 100%; } } /* AR: مودالات بنمط Bootstrap 5 (يُفتح/يُغلق يدوياً عبر JS بإضافة/إزالة الصنف .show دون تحميل مكتبة Bootstrap فعلياً) — تُستخدم في صفحة تتبع المواضع. EN: Bootstrap-5-shaped modals (opened/closed manually via JS toggling the .show class, without an actual Bootstrap bundle) — used on the position-tracking page. */ .modal { position: fixed; inset: 0; z-index: 1055; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal.show { display: block; } .modal-dialog { position: relative; width: auto; max-width: 32rem; margin: 1.75rem auto; pointer-events: none; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: var(--brand-surface, #fff); color: var(--brand-text, #1f1b16); border-radius: var(--brand-radius-card, .75rem); overflow: hidden; box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .25); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--brand-border, rgba(0, 0, 0, .12)); } .modal-header .modal-title { margin: 0; } .modal-body { padding: 1.25rem; } .modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--brand-border, rgba(0, 0, 0, .12)); } .modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(31, 27, 22, .55); opacity: 0; transition: opacity .15s linear; } .modal-backdrop.show { opacity: 1; } .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: currentColor; background: transparent; border: 0; border-radius: .375rem; opacity: .8; line-height: 1; font-size: 1.1rem; } .btn-close::before { content: "\00d7"; } .btn-close:hover { opacity: 1; } .btn-close-white { color: #fff; } /* Launch UI polish */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 34%, transparent); outline-offset: 3px; } button:disabled, .btn:disabled, .btn.disabled, .language-switcher__option:disabled { opacity: .62; cursor: not-allowed; transform: none !important; box-shadow: none !important; } input[readonly], textarea[readonly], .form-control[readonly], .form-select.is-locked { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary-light) 24%, transparent), transparent), var(--brand-surface-muted); color: var(--brand-primary-dark); } .app-sidebar { max-height: calc(var(--qc-viewport-height) - 110px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .34) transparent; } .app-content__inner { display: grid; gap: 1rem; } .sidebar-link { position: relative; } .sidebar-link.active::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 6px; width: 3px; border-radius: 999px; background: var(--brand-secondary); } [dir="ltr"] .sidebar-link.active::before { inset-inline-start: auto; inset-inline-end: 6px; } .table-responsive, .profile-section, .brand-preview__surface { scrollbar-width: thin; scrollbar-color: var(--brand-border) transparent; } .profile-section { min-width: 0; overflow-x: auto; } .profile-table { min-width: 560px; } .brand-preview .table, .brand-preview .data-table { min-width: 480px; } .daily-record-table .student-row.is-editing { max-width: min(1180px, calc(100vw - 1.5rem)); margin-inline: auto; scrollbar-gutter: stable; } .daily-record-table .student-row.is-editing .daily-student-cell { position: sticky; top: 0; z-index: 2; box-shadow: 0 10px 24px rgba(31, 27, 22, .06); } .daily-record-table .student-row.is-editing .daily-save-cell, .daily-record-table .student-row.is-editing .daily-approval-cell { display: grid; align-content: start; gap: .65rem; } .daily-record-table .student-row.is-editing .daily-save-cell form, .daily-record-table .student-row.is-editing .daily-approval-cell form { display: grid; gap: .55rem; } .daily-record-table .student-row.is-editing .review-fields { display: grid; gap: .65rem; } .daily-record-table .student-row.is-editing .review-range-row { align-items: end; padding: .65rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-control); background: var(--brand-surface-muted); } .daily-record-table .student-row.is-editing .daily-row-buttons { justify-content: flex-start; } .empty, .empty-state, .owner-empty, .profile-empty { border: 1px dashed color-mix(in srgb, var(--brand-border) 78%, var(--brand-secondary)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary-light) 18%, transparent), transparent 70%), var(--brand-surface-muted); } .form-actions, .quick-links, .owner-hero__actions, .daily-session-quick-actions, .student-system-nav, .platform-system-nav, .report-system-nav, .niqati-system-nav, .plan-system-nav, .exam-system-nav, .settings-system-nav, .halaqah-system-nav { min-width: 0; } @media (max-width: 760px) { .daily-record-table .student-row.is-editing { inset: .5rem; max-width: calc(100vw - 1rem); padding: .75rem; } .daily-record-table .student-row.is-editing .daily-student-main { display: grid; align-items: start; } .daily-record-table .student-row.is-editing .daily-row-buttons .btn, .daily-record-table .student-row.is-editing .daily-row-close { width: 100%; } .daily-record-table .student-row.is-editing .lesson-fields, .daily-record-table .student-row.is-editing .start-surah-fields, .daily-record-table .student-row.is-editing .before-lesson-fields, .daily-record-table .student-row.is-editing .review-range-row { grid-template-columns: 1fr; } } @media (max-width: 640px) { .brand-lockup { max-width: 100%; gap: .65rem; } .brand-lockup__mark, .brand-lockup__icon { width: 48px; height: 48px; } .brand-lockup__mark { background-size: 40px 40px; } .brand-lockup__name--ar { font-size: .96rem; } .brand-lockup__name--en { font-size: .72rem; } .navbar-actions { width: 100%; justify-content: space-between; gap: .6rem; } .public-navbar-links { order: 3; width: 100%; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; padding-block: .35rem; flex-wrap: nowrap; scrollbar-width: thin; } .public-navbar-links a { flex: 0 0 auto; } .public-footer__inner { grid-template-columns: 1fr; } .public-footer__bottom { display: grid; gap: .25rem; } .language-switcher, .language-switcher form { flex: 1 1 0; } .language-switcher__option { width: 100%; } .quick-links .btn, .form-actions .btn, .owner-hero__actions .btn, .student-system-nav .btn, .platform-system-nav .btn, .report-system-nav .btn, .niqati-system-nav .btn, .plan-system-nav .btn, .exam-system-nav .btn, .settings-system-nav .btn, .halaqah-system-nav .btn { width: 100%; } } @media print { @page { size: A4; margin: 14mm 12mm; } body { background: #fff !important; color: #111 !important; } .app-navbar, .app-sidebar, .ikd-topbar, .public-footer, .language-switcher, .btn, .quick-links, .daily-session-quick-actions, .owner-hero__actions, .student-system-nav, .platform-system-nav, .report-system-nav, .niqati-system-nav, .plan-system-nav, .exam-system-nav, .settings-system-nav, .halaqah-system-nav, .reports-page .page-heading, .daily-operations-page .page-heading, .printable-report-page .page-heading, .report-surface > form, .report-surface .admin-form, .printable-report-surface > .btn { display: none !important; } .app-shell { display: block; width: 100%; margin: 0; } .app-content__inner, .container { width: 100%; max-width: none; padding: 0 !important; } .report-surface, .daily-operations, .printable-report-surface { width: 100% !important; max-width: none !important; margin: 0 !important; gap: 8mm; } .official-report-header { display: grid !important; box-shadow: none !important; border: 1px solid #999 !important; border-radius: 0 !important; background: #fff !important; color: #111 !important; page-break-after: avoid; break-inside: avoid; } .official-report-header__logo { max-width: 125px; max-height: 45px; } .official-report-header__title, .official-report-header__institution, .official-report-header__meta { color: #111 !important; } .card, .content-card, .profile-section, .owner-panel, .report-card, .data-table { box-shadow: none !important; break-inside: avoid; } .content-card, .admin-metric, .profile-stat { border-color: #bbb !important; background: #fff !important; page-break-inside: avoid; } .table-responsive { overflow: visible !important; box-shadow: none !important; } table { width: 100% !important; border-collapse: collapse !important; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr, td, th { page-break-inside: avoid; break-inside: avoid; } th, td { border-color: #aaa !important; color: #111 !important; } img { break-inside: avoid; page-break-inside: avoid; } } .print-only { display: none; } @media print { .print-only { display: block !important; } .print-only table.data-table { break-inside: auto; font-size: 10px; } .print-only table.data-table th, .print-only table.data-table td { padding: 3px 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } .admission-workspace { width: 100%; max-width: 1320px; margin-inline: auto; } .admission-workflow-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 24px; padding: 10px; border: 1px solid var(--brand-border); border-radius: 20px; background: rgba(255, 253, 248, 0.72); } .admission-workflow-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 14px; color: var(--brand-text-muted); font-weight: 700; text-decoration: none; transition: all 0.2s ease; } .admission-workflow-nav__link:hover, .admission-workflow-nav__link.is-active { background: var(--brand-primary); color: var(--brand-surface); } .admission-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr); gap: 22px; align-items: start; } .admission-overview-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: 24px; align-items: center; } .admission-overview-hero__main h2 { margin: 12px 0 8px; font-size: clamp(1.65rem, 2vw, 2.4rem); } .admission-overview-hero__meta, .admission-readiness-list, .admission-workspace .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .admission-overview-hero__meta div, .admission-readiness-list div, .admission-workspace .detail-grid div { padding: 14px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface-muted); } .admission-overview-hero__meta span, .admission-readiness-list span, .admission-workspace .detail-grid span { display: block; margin-bottom: 6px; color: var(--brand-text-muted); font-size: 0.88rem; } .admission-unit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; } .admission-unit-card { display: flex; min-height: 170px; flex-direction: column; justify-content: space-between; gap: 12px; padding: 22px; border: 1px solid var(--brand-border); border-radius: 22px; background: var(--brand-surface); color: var(--brand-text); text-decoration: none; box-shadow: 0 14px 34px rgba(31, 27, 22, 0.055); transition: all 0.2s ease; } .admission-unit-card:hover { transform: translateY(-2px); border-color: var(--brand-secondary); color: var(--brand-text); } .admission-unit-card span, .admission-unit-card small { color: var(--brand-text-muted); } .admission-unit-card strong { font-size: 1.25rem; } .admission-decision-actions { display: grid; gap: 12px; } .admission-inline-panel { border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface-muted); padding: 12px 14px; } .admission-inline-panel summary { cursor: pointer; font-weight: 800; color: var(--brand-primary); } .admission-inline-panel form { margin-top: 14px; } .admission-audit-item { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(420px, 1.4fr); gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--brand-border); border-radius: 18px; background: var(--brand-surface-muted); } .admission-audit-item + .admission-audit-item { margin-top: 14px; } .admission-audit-review-form { display: grid; grid-template-columns: 160px minmax(220px, 1fr) auto; gap: 10px; align-items: start; } .admission-interview-card { display: grid; grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr); gap: 22px; padding: 20px; border: 1px solid var(--brand-border); border-radius: 20px; background: var(--brand-surface-muted); } .admission-interview-card + .admission-interview-card { margin-top: 18px; } .admission-interview-card__summary { display: grid; gap: 10px; align-content: start; } .admission-audit-sections { display: grid; gap: 24px; } .admission-audit-sections h3 { margin: 0 0 12px; color: var(--brand-primary-dark); font-size: 1.05rem; font-weight: 900; } .admission-audit-contact { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-surface-muted); } .admission-form-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .interview-form-response-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .interview-form-response-item { padding: 14px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); } .admission-member-assignment { padding: 18px; border: 1px solid var(--brand-border); border-radius: 20px; background: var(--brand-surface-muted); } .admission-member-assignment__grid, .admission-interview-members { display: grid; gap: 14px; } .admission-member-assignment__row, .admission-interview-member-card { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px); align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--brand-border); border-radius: 18px; background: var(--brand-surface); } .admission-member-assignment__row span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admission-member-assignment__row small { color: var(--brand-text-muted); } .admission-interview-member-card { grid-template-columns: 1fr; } .admission-member-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--brand-border); } .admission-answer-list { display: grid; gap: 10px; margin: 12px 0 0; } .admission-answer-list div { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(232, 221, 200, 0.55); } .admission-answer-list dt { color: var(--brand-text-muted); font-weight: 800; } .admission-answer-list dd { margin: 0; } .admission-workspace .interview-evaluation-grid, .admission-workspace .admin-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; /* AR: كل حقل بطول محتواه فقط — بلا مطّ يوزّع الفراغ داخل مسار الـlabel (كان يفتح فجوة كبيرة بين العنوان وحقله في الصفوف التي فيها حقل أطول بسبب `` مثلًا). */ align-items: start; } .admission-workspace .admin-form-grid__full { grid-column: 1 / -1; } .admission-workspace .admin-form .field { min-width: 0; } .admission-workspace .admin-form .form-actions { display: flex; justify-content: flex-start; gap: 10px; } @media (max-width: 1100px) { .admission-workspace-grid, .admission-overview-hero, .admission-interview-card { grid-template-columns: 1fr; } .admission-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admission-audit-item, .admission-audit-review-form, .interview-form-response-grid, .admission-form-list, .admission-member-assignment__row, .admission-answer-list div { grid-template-columns: 1fr; } } @media (max-width: 720px) { .admission-workflow-nav, .admission-unit-grid, .admission-overview-hero__meta, .admission-readiness-list, .admission-workspace .detail-grid, .admission-workspace .interview-evaluation-grid, .admission-workspace .admin-form-grid { grid-template-columns: 1fr; } .admission-workflow-nav { display: grid; } } @media (min-width: 901px) { .has-app-shell .app-shell { grid-template-columns: 280px minmax(0, 1fr); } [dir="rtl"] .has-app-shell .app-shell { grid-template-columns: 280px minmax(0, 1fr); } .has-app-shell .app-sidebar { position: sticky; top: 86px; min-height: calc(var(--qc-viewport-height) - 110px); border-radius: 0 var(--brand-radius-card) var(--brand-radius-card) 0; } [dir="ltr"] .has-app-shell .app-sidebar { border-radius: var(--brand-radius-card) 0 0 var(--brand-radius-card); } .has-app-shell .app-sidebar__nav { grid-template-columns: 1fr; } .has-app-shell .admin-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .has-app-shell .admin-form-grid__full { grid-column: 1 / -1; } .has-app-shell .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .has-app-shell .admin-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .teacher-program-record-list { display: grid; gap: 18px; } .teacher-program-record-card { border: 1px solid var(--brand-border); border-radius: 20px; background: var(--brand-surface-muted); padding: 18px; } .teacher-program-record-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .teacher-program-record-header span { color: var(--brand-text-muted); font-size: 0.85rem; font-weight: 700; } .teacher-program-record-header h2 { margin: 0; font-size: 1.15rem; } /* AR: عمودان دومًا (لا أربعة) — يضع الدرس ومراجعته جنبًا إلى جنب (قرآن ثم متون تحته)، ويمنح كل حقل عرضًا كافيًا بدل الازدحام الذي كان يظهر مع أربعة أقسام في صف واحد. طلب المستخدم (٢٠٢٦-٠٨-١٩). EN: Always two columns (not four) — puts a lesson and its review side by side (Quran, then Mutun below it), giving each field enough width instead of the cramped look four sections in one row used to produce. User request (2026-08-19). */ .teacher-program-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .teacher-program-record-grid fieldset { min-width: 0; display: grid; gap: 9px; margin: 0; border: 1px solid rgba(232, 221, 200, 0.75); border-radius: 16px; padding: 14px; background: var(--brand-surface); } .teacher-program-record-grid legend { float: none; width: auto; margin-bottom: 4px; padding: 0 6px; color: var(--brand-primary); font-size: 0.9rem; font-weight: 800; } @media (max-width: 760px) { .teacher-program-record-header, .teacher-program-record-grid { grid-template-columns: 1fr; } .teacher-program-record-header { align-items: flex-start; flex-direction: column; } } /* AR: رأس بطاقة الطالب في كشف القراءات (وكشف برنامج المعلمين المشترك بنفس الكلاسات) — كان بلا أي CSS إطلاقًا فيُعرض بتنسيق المتصفح الافتراضي (سبب "الشكل غير المريح")، بنمط .daily-student-main/ .daily-row-buttons المستخدم في الكشف العام: الهوية على طرف، الشارات والأزرار على الطرف الآخر، مع التفاف عند ضيق الشاشة. طلب المستخدم (٢٠٢٦-٠٨-١٩). EN: The student-card header in the qiraat sheet (and the teacher-program sheet, which shares the same classes) — previously had zero CSS, rendering with plain browser defaults (the cause of the "uncomfortable" look), now styled like .daily-student-main/.daily-row-buttons on the general sheet: identity on one side, chips/badges/buttons on the other, wrapping on narrow screens. User request (2026-08-19). */ .qiraat-record-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .qiraat-record-identity { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .qiraat-record-identity h2 { margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--brand-text); } .qiraat-record-role { font-size: .78rem; font-weight: 700; color: var(--brand-text-muted); } .qiraat-record-id { display: block; font-size: .82rem; color: var(--brand-text-muted); } .qiraat-record-summary-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex: 1 1 260px; min-width: 0; } .qiraat-record-summary-actions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; } /* AR: تسمية دائمة لكل حقل داخل كشف القراءات — تبقى ظاهرة حتى بعد اختيار قيمة، بخلاف نص placeholder الذي يختفي بمجرد الاختيار وكان يترك الحقول ملتصقة ببعضها بلا أي إشارة لما تمثله كل واحدة. EN: A persistent label for each field in the qiraat sheet — stays visible even after a value is picked, unlike placeholder text which disappears on selection and used to leave fields stuck together with no indication of what each one represents. */ .qiraat-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .qiraat-field__label { font-size: .74rem; font-weight: 700; color: var(--brand-text-muted); } /* AR: شبكة ثابتة العرض (عمودان دومًا) بدل flex-wrap المعتمد على عتبة عرض — flex-wrap كان يُنتج نتيجة مختلفة حسب عرض النافذة الفعلي (أحيانًا عمود واحد، أحيانًا عمودان)، فيبدو الشكل غير مستقر خصوصًا مع تكرار صفوف المراجعة. شبكة بعمودين ثابتين تضمن "من/إلى" جنبًا إلى جنب دائمًا، بصرف النظر عن العرض المتاح (يضيقان معًا بدل أن يتكدّسا فجأة). EN: A fixed-width grid (always two columns) instead of threshold-dependent flex-wrap — flex-wrap used to produce a different result depending on the actual window width (sometimes one column, sometimes two), looking unstable especially once review rows repeat. A fixed two-column grid guarantees "from/to" sit side by side always, regardless of available width (they narrow together instead of suddenly stacking). */ .qiraat-page-pair, .qiraat-ayah-pair, .qiraat-matn-pair, .qiraat-marker-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; } /* AR: حقل اسم المتن (أول عنصر في qiraat-matn-pair) يمتد عبر العمودين وحده — الاسم قد يطول (مثل "تحريرات الشاطبية")، ويبقى العمودان لزوج من/إلى الفعلي بعده. EN: The matn-name field (the first item in qiraat-matn-pair) spans both columns alone — names can be long (e.g. "تحريرات الشاطبية"), leaving the two columns for the actual from/to pair after it. */ .qiraat-matn-pair > .qiraat-field:first-child { grid-column: 1 / -1; } .qiraat-page-unit { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } /* AR: صف مراجعة واحد قابل للتكرار (قرآن أو متون) — حدود خفيفة تُجمِّع حقوله بصريًا وتفصله عن الصف التالي عند إضافة أكثر من نطاق. .qiraat-lockable-group تشارك نفس التخطيط لمجموعتي الدرس غير المتكررتين (قرآن/متون). تكديس عمودي بسيط (لا flex-wrap) — كل حقل/حاوية زوج يأخذ الصف كاملاً بشكل ثابت دائمًا (سلوك flex-direction:column الافتراضي)، بلا أي اعتماد على عتبة عرض قد تُنتج شكلاً مختلفًا من عرض نافذة لآخر أو عند تكرار الصفوف — هذا هو المقصود بـ"آلية عرض مناسبة" مستقرة. EN: One repeatable review row (quran or mutun) — a light border visually groups its fields and separates it from the next row when more than one range is added. .qiraat-lockable-group shares the same layout for the two non-repeatable lesson groups (quran/mutun). Simple vertical stacking (no flex-wrap) — every field/pair-container always takes the full row width consistently (the default flex-direction:column behavior), with no dependency on a width threshold that could render differently from one window width to another or as rows repeat — this is what a stable "suitable display mechanism" means here. */ .qiraat-range-row, .qiraat-lockable-group { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; margin-bottom: .6rem; border: 1px solid var(--qc-border, #e4ded4); border-radius: .6rem; } .qiraat-range-row .qiraat-remove-row { align-self: flex-end; } .public-content-page .container.py-3 { max-width: 1180px; } .public-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 360px; align-items: center; padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 56px); border: 1px solid color-mix(in srgb, var(--brand-border) 78%, transparent); border-radius: var(--brand-radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 12%, #fff), transparent 42%), var(--brand-surface); box-shadow: var(--shadow-soft); } .public-hero__content { max-width: 860px; } .public-hero h1 { margin: 0; color: var(--brand-text); font-size: clamp(2rem, 4vw, 4.1rem); line-height: 1.15; } .public-prose-section { padding-top: 32px; } .public-prose-section .formal-panel p { margin: 0; color: var(--brand-text); font-size: 1.08rem; line-height: 2; } .public-portal-section { padding-top: 28px; } .public-portal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .public-portal-card { min-width: 0; min-height: 152px; display: grid; align-content: start; gap: 10px; padding: 18px; border: 1px solid color-mix(in srgb, var(--brand-border) 82%, transparent); border-radius: min(14px, var(--brand-radius-card)); background: color-mix(in srgb, var(--brand-surface) 92%, #fff); color: var(--brand-text); text-decoration: none; box-shadow: 0 12px 28px rgba(31, 27, 22, 0.055); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .public-portal-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--brand-border)); color: var(--brand-text); box-shadow: 0 18px 36px rgba(31, 27, 22, 0.08); } .public-portal-card--muted { background: color-mix(in srgb, var(--brand-surface) 86%, var(--brand-bg)); } .public-portal-card__icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brand-primary) 12%, #fff); color: var(--brand-primary); font-size: 0.86rem; font-weight: 900; } .public-portal-card strong { color: var(--brand-text); font-size: 1rem; line-height: 1.45; } .public-portal-card small { display: -webkit-box; overflow: hidden; color: var(--brand-text-muted); font-size: 0.86rem; line-height: 1.7; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .public-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .public-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .public-section-card, .public-list-panel { min-width: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--brand-border) 82%, transparent); border-radius: min(16px, var(--brand-radius-card)); background: var(--brand-surface); box-shadow: 0 14px 34px rgba(31, 27, 22, 0.06); } .public-section-card__label { display: inline-flex; margin-bottom: 10px; color: var(--brand-primary); font-size: 0.82rem; font-weight: 800; } .public-section-card h2, .public-section-card h3 { margin: 0 0 12px; color: var(--brand-text); font-size: 1.22rem; line-height: 1.45; } .public-section-card p, .public-section-card li, .public-list-panel li, .public-contact-list dd { color: var(--brand-text-muted); line-height: 1.9; } .public-section-card ul, .public-list-panel ul { display: grid; gap: 10px; margin: 12px 0 0; padding-inline-start: 22px; } .public-section-card .btn { margin-top: 16px; } .public-access-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .public-access-card { display: grid; align-content: start; gap: 9px; min-width: 0; min-height: 172px; padding: 20px; border: 1px solid color-mix(in srgb, var(--brand-border) 86%, transparent); border-radius: 8px; background: var(--brand-surface); color: var(--brand-text); text-decoration: none; box-shadow: 0 12px 28px rgba(31, 27, 22, .055); } .public-access-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 64%, var(--brand-surface)); color: var(--brand-primary-dark); text-decoration: none; } .public-access-card__audience { width: fit-content; max-width: 100%; padding: .22rem .55rem; border: 1px solid color-mix(in srgb, var(--brand-secondary) 34%, var(--brand-border)); border-radius: 999px; background: color-mix(in srgb, var(--brand-secondary-light) 54%, var(--brand-surface)); color: var(--brand-primary-dark); font-size: .78rem; font-weight: 900; } .public-access-card strong { color: inherit; line-height: 1.45; } .public-access-card small { color: var(--brand-text-muted); line-height: 1.75; } .public-access-card em { align-self: end; color: var(--brand-primary); font-size: .84rem; font-style: normal; font-weight: 900; } .platform-support-guidance { gap: .85rem; } .platform-support-guidance ol, .platform-support-guidance ul { display: grid; gap: .55rem; margin: 0; padding-inline-start: 1.2rem; color: var(--brand-text-muted); line-height: 1.8; } .platform-support-guidance h3 { margin: .4rem 0 0; color: var(--brand-primary-dark); font-size: 1rem; font-weight: 900; } .platform-support-form-section { padding-top: 0; } .platform-support-form { max-width: 1040px; margin-inline: auto; } .platform-support-filter { gap: .75rem; } .platform-support-filter .section-heading { margin-bottom: 0; } .platform-support-review-form { min-width: min(420px, 70vw); } .platform-support-review-form .admin-form-grid { grid-template-columns: minmax(180px, .7fr) minmax(220px, 1fr); } .platform-support-review-form textarea { min-height: 74px; } .public-hero--section { grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); } .public-hero__section-icon { display: grid; place-items: center; width: min(190px, 100%); aspect-ratio: 1; justify-self: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, var(--brand-border)); border-radius: 32px; background: color-mix(in srgb, var(--brand-primary) 10%, #fff); color: var(--brand-primary); font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 900; } .public-section-grid--steps .public-section-card { min-height: 150px; } .institution-public-hero { grid-template-columns: minmax(0, 1fr) minmax(190px, 280px); background: linear-gradient(135deg, color-mix(in srgb, var(--institution-color) 15%, #fff), transparent 52%), var(--brand-surface); } .institution-public-hero__mark { display: grid; place-items: center; width: min(240px, 100%); aspect-ratio: 1; justify-self: center; border: 1px solid color-mix(in srgb, var(--institution-color) 26%, var(--brand-border)); border-radius: 50%; background: color-mix(in srgb, var(--institution-color) 10%, #fff); color: var(--institution-color); font-size: 4rem; font-weight: 900; } .institution-public-hero__mark img { width: 58%; height: 58%; object-fit: contain; } .mini-stat-grid--text .mini-stat-card { min-height: 112px; align-items: flex-start; text-align: start; } .mini-stat-grid--text .mini-stat-card span { color: var(--brand-text); font-size: 0.98rem; line-height: 1.8; } .public-contact-list { display: grid; gap: 12px; margin: 0; } .public-contact-list div, .public-admin-details div { display: grid; gap: 4px; } .public-contact-list dt, .public-admin-details dt { color: var(--brand-primary); font-size: 0.8rem; font-weight: 800; } .public-contact-list dd, .public-admin-details dd { margin: 0; } .public-form-section { max-width: 920px; margin-inline: auto; } .consultation-admin-item { display: grid; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--brand-border); } .consultation-admin-item:last-child { border-bottom: 0; } .public-admin-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; } .public-admin-details div:last-child { grid-column: 1 / -1; } .code-textarea { direction: ltr; font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; } @media (max-width: 980px) { .public-portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .public-section-grid, .public-access-grid, .public-admin-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .institution-public-hero, .public-hero--section { grid-template-columns: 1fr; } } @media (max-width: 680px) { .public-hero { min-height: auto; padding: 34px 20px; } .public-section-grid, .public-access-grid, .public-two-column, .public-portal-grid, .public-admin-details { grid-template-columns: 1fr; } .public-section-card, .public-list-panel { padding: 18px; } } /* Intelligent Kuttab Dewan visual identity refresh */ :root { --brand-primary: #42584D; --brand-primary-dark: #263B33; --brand-primary-light: #E8EFE9; --brand-secondary: #C9A45B; --brand-secondary-dark: #A27E35; --brand-secondary-light: #F0E0B9; --brand-accent: #B88B3C; --brand-bg: #F8F2E6; --brand-bg-soft: #F1E7D5; --brand-surface: #FFFDF8; --brand-surface-muted: #F7F0E3; --brand-text: #211D17; --brand-text-muted: #6C6458; --brand-border: #E2D4BC; --brand-success: #476B56; --brand-warning: #B9903F; --brand-danger: #A9564D; --brand-info: #5F7C7B; --brand-radius-card: 8px; --brand-radius-control: 8px; --qc-shadow: 0 10px 26px rgba(33, 29, 23, .065); --qc-shadow-soft: 0 6px 18px rgba(33, 29, 23, .045); } body { background: linear-gradient(135deg, rgba(201, 164, 91, .10), transparent 30%), linear-gradient(315deg, rgba(66, 88, 77, .08), transparent 36%), var(--brand-bg); } body::before { background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); background-position: center top; background-repeat: repeat; background-size: 760px auto; opacity: .18; mask-image: linear-gradient(180deg, var(--brand-text), transparent 78%); } body::after { background: url("/assets/brand/ikd/patterns/circuit-corner.png") left bottom / min(44vw, 520px) auto no-repeat, linear-gradient(0deg, rgba(33, 29, 23, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 29, 23, .010) 1px, transparent 1px); background-size: min(44vw, 520px) auto, 46px 46px, 46px 46px; opacity: .34; mix-blend-mode: multiply; } .brand-page-ornament { mix-blend-mode: multiply; } .brand-page-ornament--top { top: 96px; right: 18px; width: 220px; height: 160px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-position: right top; opacity: .09; } .brand-page-ornament--bottom { bottom: 18px; left: 18px; width: 190px; height: 190px; background-image: url("/assets/brand/ikd/patterns/sidebar-ornament.png"); background-position: left bottom; opacity: .08; } .brand-page-ornament--pattern { top: 26%; left: -80px; width: 210px; height: 320px; background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); background-position: center; opacity: .10; } .public-shell .brand-page-ornament--top, .auth-page .brand-page-ornament--top, .landing-page .brand-page-ornament--top { opacity: .10; } .public-shell .brand-page-ornament--bottom, .auth-page .brand-page-ornament--bottom, .landing-page .brand-page-ornament--bottom { opacity: .08; } .auth-page .brand-page-ornament--pattern, .landing-page .brand-page-ornament--pattern, .has-app-shell .brand-page-ornament--pattern { opacity: .055; } .has-app-shell .brand-page-ornament--top { opacity: .06; } .has-app-shell .brand-page-ornament--bottom { opacity: .05; } .app-navbar { border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 82%, transparent) !important; background: color-mix(in srgb, var(--brand-bg) 86%, #fff) !important; box-shadow: 0 8px 24px rgba(33, 29, 23, .04); -webkit-backdrop-filter: blur(16px); } .brand-lockup { gap: .72rem; padding: .22rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .brand-lockup__mark, .brand-lockup__icon { width: 50px; height: 50px; border-radius: 8px; border-color: color-mix(in srgb, var(--brand-secondary) 28%, var(--brand-border)); background-color: color-mix(in srgb, var(--brand-surface) 94%, transparent); } .brand-lockup__mark { background-image: url("/assets/brand/ikd/logos/logo-icon.png"); background-size: 48px 48px; } .brand-lockup__name--ar { color: var(--brand-primary-dark); font-size: 1.04rem; font-weight: 900; } .brand-lockup__name--en { color: color-mix(in srgb, var(--brand-primary) 72%, var(--brand-text-muted)); font-size: .72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .app-shell { gap: 1rem; } [dir="rtl"] .app-shell { grid-template-columns: 292px minmax(0, 1fr); } .app-sidebar { border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--brand-border)); border-inline-start: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-light) 56%, transparent), transparent 34%), url("/assets/brand/ikd/patterns/sidebar-ornament.png") left bottom / 210px auto no-repeat, color-mix(in srgb, var(--brand-surface) 95%, var(--brand-primary-light)); color: var(--brand-text); box-shadow: 0 18px 42px rgba(33, 29, 23, .08); } [dir="ltr"] .app-sidebar { border-inline-start: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--brand-border)); border-inline-end: 0; } .app-sidebar__brand { min-height: 74px; border-radius: 8px; background: linear-gradient(135deg, rgba(201, 164, 91, .08), transparent 44%), var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .app-sidebar__brand span { height: 60px; background-image: url("/assets/brand/ikd/logos/logo-horizontal.png"); } .sidebar-link { min-height: 46px; border: 1px solid transparent; border-radius: 8px; color: var(--brand-text-muted); } .sidebar-link:hover, .sidebar-link.active { border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 78%, var(--brand-surface)); color: var(--brand-primary-dark); } .sidebar-link.active::before { inset-block: 9px; width: 3px; background: var(--brand-secondary); } .sidebar-link__icon { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--brand-border)); border-radius: 8px; background: color-mix(in srgb, var(--brand-surface) 92%, transparent); color: var(--brand-primary); overflow: hidden; } .sidebar-link__icon img { display: block; width: 24px; height: 24px; object-fit: contain; } .card, .content-card, .feature-card, .formal-panel, .mini-stat-card, .admin-metric, .teacher-dashboard-metric, .dashboard-module-card, .owner-metric-card, .profile-stat, .niqati-page .stat-box, .niqati-page .niqati-stat-card, .daily-session-state-card, .admission-status-card, .student-plan-portal__metrics > div, .public-section-card, .public-list-panel { border: 1px solid color-mix(in srgb, var(--brand-primary) 10%, var(--brand-border)); border-radius: 8px; background: linear-gradient(135deg, rgba(201, 164, 91, .045), transparent 38%), color-mix(in srgb, var(--brand-surface) 98%, var(--brand-bg)); box-shadow: var(--qc-shadow-soft); } .dashboard-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .dashboard-module-card { display: block; padding: 1.1rem 1.25rem; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .dashboard-module-card:hover, .dashboard-module-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--brand-border)); box-shadow: var(--qc-shadow-soft), 0 8px 20px -12px color-mix(in srgb, var(--brand-primary) 40%, transparent); color: inherit; } .dashboard-module-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .dashboard-module-card__header span { display: block; margin-bottom: .2rem; color: var(--brand-text-muted); font-size: .78rem; font-weight: 700; } .dashboard-module-card__header h3 { margin: 0; font-size: 1.05rem; color: var(--brand-text); } .dashboard-module-card__header > .status-badge { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; } .card-header, .card-footer, .table th, .data-table thead th { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-light) 60%, transparent), transparent), var(--brand-surface-muted); } .btn { border-radius: 8px; box-shadow: none; } /* AR: تدقيق وصول 2026-08-05 - .btn { box-shadow: none; } أعلاه كان يُلغي أي مؤشر تركيز لكل الأزرار وروابط الأزرار (.btn-primary/.btn-secondary/.btn-outline-primary وغيرها) بلا أي بديل، لأنه لم يوجد أي قاعدة :focus/:focus-visible خاصة بـ.btn لاستعادته. القاعدة العامة :where(a, button...):focus-visible (أعلاه في الملف) صفرية التخصيص (specificity) بحكم :where()، فتخسر أي تعارض. هذه القاعدة أعلى تخصيصًا من `.btn` القاعدة الأساسية فتفوز دائمًا، وتعيد نفس معالجة outline المستخدَمة عالميًا (نفس المتغير اللوني) بالإضافة إلى halo خفيف يعمل فوق أي خلفية فاتحة أو داكنة لأن outline يُرسَم خارج حدود العنصر على خلفية الصفحة نفسها، لا خلفية الزر. EN: 2026-08-05 accessibility audit - the `.btn { box-shadow: none; }` rule above was cancelling the focus indicator for every button and button-styled link (.btn-primary, .btn-secondary, .btn-outline-primary, etc.) with no replacement, because no .btn:focus/:focus-visible rule existed to restore one. The general :where(a, button...):focus-visible rule (earlier in this file) has zero specificity by definition of :where(), so it loses any conflict. This rule has higher specificity than the base `.btn` rule so it always wins, and restores the same outline treatment used globally (same color token) plus a subtle halo that stays visible on both light and dark button backgrounds because the outline is drawn outside the element's own box, against the page background, not the button's fill color. */ .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, transparent); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 16%, transparent); } .btn-primary, .btn-outline-primary:hover { background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark)); border-color: var(--brand-primary); color: var(--brand-surface); } .btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } .btn-secondary, .btn-outline-secondary, .btn-outline-primary { background: color-mix(in srgb, var(--brand-surface) 92%, transparent); border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--brand-border)); } .form-control, .form-select, input, select, textarea { border-radius: 8px; border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--brand-border)); background-color: color-mix(in srgb, var(--brand-surface) 96%, #fff); } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); } .table, .data-table { border-radius: 8px; background: var(--brand-surface); } .table tbody tr:hover, .data-table tbody tr:hover { background: color-mix(in srgb, var(--brand-primary-light) 44%, transparent); } .badge, .status-badge, .badge-soft { border-radius: 8px; } .landing-hero { min-height: calc(var(--qc-viewport-height) - 126px); padding: 3.25rem 0 calc(2.75rem + var(--qc-safe-bottom)); } .landing-hero::before { inset: 0; width: auto; height: auto; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-bg) 46%, transparent), var(--brand-bg) 70%), url("/assets/brand/ikd/backgrounds/hero-bg.png") center / cover no-repeat; opacity: .72; } .landing-hero__content h1 { color: var(--brand-primary-dark); font-size: 4rem; line-height: 1.1; } .landing-hero__lead::after, .auth-card__header::after, .section-heading--stacked::after { width: 160px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--brand-secondary), color-mix(in srgb, var(--brand-primary) 52%, var(--brand-secondary)), transparent); opacity: .78; } .landing-brand-card { min-height: 250px; border-radius: 8px; background: linear-gradient(135deg, rgba(201, 164, 91, .06), transparent 42%), url("/assets/brand/ikd/backgrounds/page-banner-bg.png") center / cover no-repeat; } .landing-brand-card img { width: min(100%, 460px); max-height: 170px; } .landing-visual-note { border-radius: 8px; background: color-mix(in srgb, var(--brand-surface) 92%, transparent); } .landing-section--systems::before { background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); opacity: .10; } .feature-card__icon { width: 44px; height: 44px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 70%, var(--brand-surface)); } .auth-page { background: linear-gradient(180deg, rgba(255, 253, 248, .76), rgba(248, 242, 230, .88)), url("/assets/brand/ikd/backgrounds/auth-bg-clean.png") center / cover fixed no-repeat; } .auth-shell { grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); } .auth-card { border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-surface) 94%, transparent), color-mix(in srgb, var(--brand-bg) 70%, var(--brand-surface))), var(--brand-surface); } .auth-card::before { inset: 0; height: auto; background-image: url("/assets/brand/ikd/patterns/manuscript-soft.png"); background-position: center; background-size: cover; opacity: .13; } .auth-card::after { inset-inline-end: -44px; bottom: -56px; width: 180px; height: 150px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-position: right bottom; opacity: .13; } .auth-visual { border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-surface) 78%, transparent), color-mix(in srgb, var(--brand-bg) 86%, transparent)), url("/assets/brand/ikd/backgrounds/auth-bg-clean.png") center / cover no-repeat; box-shadow: var(--qc-shadow); } .auth-visual::after { width: 180px; height: 140px; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); opacity: .22; } .dewan-auth-visual { position: relative; width: min(100%, 310px); aspect-ratio: 4 / 3; } .dewan-auth-visual__mark, .dewan-auth-visual__circuit { position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; } .dewan-auth-visual__mark { background-image: url("/assets/brand/ikd/logos/logo-stacked.png"); background-position: center; background-size: contain; filter: drop-shadow(0 18px 24px rgba(33, 29, 23, .10)); } .dewan-auth-visual__circuit { inset: auto -8% -18% auto; width: 48%; height: 48%; background-image: url("/assets/brand/ikd/patterns/circuit-corner.png"); background-position: right bottom; background-size: contain; opacity: .26; mix-blend-mode: multiply; } .mishkat-arch { display: none; } .student-system-nav, .platform-system-nav, .report-system-nav, .niqati-system-nav, .plan-system-nav, .exam-system-nav, .settings-system-nav, .halaqah-system-nav, .teacher-affairs-nav { border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-light) 34%, transparent), transparent 56%), var(--brand-surface); } .student-system-nav__link, .platform-system-nav__link, .report-system-nav__link, .niqati-system-nav__link, .plan-system-nav__link, .exam-system-nav__link, .settings-system-nav__link, .halaqah-system-nav__link, .teacher-affairs-nav__link { border-radius: 8px; background: color-mix(in srgb, var(--brand-surface) 94%, transparent); } .student-system-nav__icon, .platform-system-nav__icon, .report-system-nav__icon, .niqati-system-nav__icon, .plan-system-nav__icon, .exam-system-nav__icon, .settings-system-nav__icon, .halaqah-system-nav__icon, .teacher-affairs-nav__icon { border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--brand-border)); border-radius: 8px; background: color-mix(in srgb, var(--brand-primary-light) 72%, var(--brand-surface)); } @media (max-width: 980px) { [dir="rtl"] .app-shell, [dir="ltr"] .app-shell { grid-template-columns: 1fr; } .app-sidebar { border-inline: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--brand-border)); border-radius: 8px; } .landing-hero__content h1 { font-size: 3rem; } } @media (max-width: 680px) { .brand-lockup__mark, .brand-lockup__icon { width: 42px; height: 42px; } .brand-lockup__mark { background-size: 40px 40px; } .landing-hero__content h1 { font-size: 2.35rem; } .landing-brand-card img { max-height: 132px; } .auth-shell { grid-template-columns: 1fr; } } .auth-inline-link { color: var(--brand-primary); font-weight: 700; text-decoration: none; } .auth-inline-link:hover { text-decoration: underline; } .account-page .profile-header, .account-page .profile-section, .account-page .profile-grid { max-width: 1040px; margin-inline: auto; } .account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; } .account-details div { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); padding: 1rem; } .account-details dt { color: var(--brand-text-muted); font-size: .85rem; margin-bottom: .35rem; } .account-details dd { color: var(--brand-text); font-weight: 700; margin: 0; overflow-wrap: anywhere; } .launch-readiness__summary { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1rem; align-items: stretch; margin-bottom: 1rem; } .launch-readiness__score { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); padding: 1rem; } .launch-readiness__score.is-ready { border-color: color-mix(in srgb, var(--brand-success) 36%, var(--brand-border)); background: color-mix(in srgb, var(--brand-success) 10%, var(--brand-surface)); } .launch-readiness__score.needs-work { border-color: color-mix(in srgb, var(--brand-warning) 40%, var(--brand-border)); background: color-mix(in srgb, var(--brand-warning) 10%, var(--brand-surface)); } .launch-readiness__score span, .launch-readiness__score small { display: block; color: var(--brand-text-muted); } .launch-readiness__score strong { display: block; color: var(--brand-text); font-size: 2.4rem; line-height: 1; margin: .45rem 0; } .launch-readiness__summary p { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); margin: 0; padding: 1rem; color: var(--brand-text); } .launch-readiness__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .launch-readiness__step { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); padding: 1rem; } .launch-readiness__step.is-complete { border-color: color-mix(in srgb, var(--brand-success) 30%, var(--brand-border)); } .launch-readiness__step.is-missing { border-color: color-mix(in srgb, var(--brand-warning) 36%, var(--brand-border)); } .launch-readiness__step > div { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .7rem; } .launch-readiness__status, .launch-readiness__step em { border-radius: 999px; padding: .25rem .55rem; font-size: .78rem; font-style: normal; font-weight: 700; background: var(--brand-primary-light); color: var(--brand-primary); } .launch-readiness__step.is-complete .launch-readiness__status { background: color-mix(in srgb, var(--brand-success) 16%, var(--brand-surface)); color: var(--brand-success); } .launch-readiness__step.is-missing .launch-readiness__status { background: color-mix(in srgb, var(--brand-warning) 18%, var(--brand-surface)); color: var(--brand-warning); } .launch-readiness__step h3 { font-size: 1rem; margin: 0 0 .45rem; } .launch-readiness__step p { color: var(--brand-text-muted); margin: 0 0 .8rem; } .launch-readiness__step a { color: var(--brand-primary); font-weight: 700; text-decoration: none; } .permission-health-card__score { color: var(--brand-primary); font-size: 1.7rem; } .permission-health-card__warnings { display: grid; gap: .65rem; margin-top: 1rem; } .permission-report-group-row td { background: var(--brand-surface-muted); } .permission-report-module { display: grid; gap: .4rem; } .permission-report-module + .permission-report-module { border-top: 1px solid var(--brand-border); margin-top: .7rem; padding-top: .7rem; } .admission-quality-card { display: grid; gap: 1rem; } .admission-quality-card__score { color: var(--brand-primary); font-size: 1.8rem; line-height: 1; } .admission-quality-card__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; } .admission-quality-card__metrics > div { display: grid; gap: .25rem; min-width: 0; padding: .85rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); } .admission-quality-card__metrics span { color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; } .admission-quality-card__metrics strong { color: var(--brand-text); font-size: 1.35rem; line-height: 1; } .admission-quality-card__warnings, .admission-correction-guide { display: grid; gap: .7rem; } .admission-correction-guide p, .admission-correction-guide ol { margin: 0; } .admission-correction-guide ol { padding-inline-start: 1.35rem; } .admission-correction-guide__notes { display: grid; gap: .25rem; padding: .85rem; border: 1px solid color-mix(in srgb, var(--brand-warning) 34%, var(--brand-border)); border-radius: 8px; background: color-mix(in srgb, var(--brand-warning) 9%, var(--brand-surface)); } .admission-correction-guide__notes span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .parent-admission-mobile-list { display: none; } .parent-admission-card { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); } .parent-admission-card__header { display: grid; gap: .25rem; } .parent-admission-card__header span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .parent-admission-card__header strong { color: var(--brand-text); font-size: 1.05rem; overflow-wrap: anywhere; } .parent-admission-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; } .parent-admission-card__details div, .parent-admission-card__interview { display: grid; gap: .25rem; min-width: 0; padding: .75rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); } .parent-admission-card__details dt { color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; } .parent-admission-card__details dd { margin: 0; color: var(--brand-text); font-weight: 700; overflow-wrap: anywhere; } .parent-admission-card__interview small, .parent-admission-card__interview span:not(.status-badge) { color: var(--brand-text-muted); } .parent-admission-card__actions, .parent-admission-card__waitlist { display: grid; gap: .6rem; } .parent-admission-card__actions form { margin: 0; } .cms-workflow-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; } .cms-inline-form { margin-top: 1rem; } .cms-command-center .section-heading { margin-bottom: .25rem; } .cms-command-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } .cms-command-card { display: grid; gap: .45rem; min-height: 150px; padding: 1rem; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface); color: var(--brand-text); text-decoration: none; } .cms-command-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--brand-border)); background: color-mix(in srgb, var(--brand-primary-light) 64%, var(--brand-surface)); color: var(--brand-primary-dark); text-decoration: none; } .cms-command-card strong { color: inherit; font-size: 1rem; } .cms-command-card span { color: var(--brand-text-muted); line-height: 1.75; } .cms-command-card em { align-self: end; color: var(--brand-primary); font-style: normal; font-weight: 900; } .cms-section-editor { display: grid; gap: 1rem; margin-top: 1.4rem; } .cms-section-list { display: grid; gap: 1rem; } .cms-section-row { border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); padding: 1rem; } @media (max-width: 720px) { .cms-command-grid { grid-template-columns: 1fr; } .account-details { grid-template-columns: 1fr; } .launch-readiness__summary { grid-template-columns: 1fr; } .parent-admissions-table { display: none; } .parent-admission-mobile-list { display: grid; gap: .85rem; } .parent-admission-card__details { grid-template-columns: 1fr; } } /* iOS Safari and touch-device guardrails */ .app-navbar .container { padding-inline-start: max(0px, var(--qc-safe-left)); padding-inline-end: max(0px, var(--qc-safe-right)); } .app-sidebar { padding-top: calc(1rem + var(--qc-safe-top)); padding-bottom: calc(1rem + var(--qc-safe-bottom)); } .app-content__inner { padding-bottom: calc(var(--qc-safe-bottom) + 1px); } @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control, .form-select { font-size: 16px !important; } } .admission-validation-summary { border-inline-start: 4px solid var(--brand-danger); } .admission-validation-summary a { color: var(--brand-danger); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .admission-validation-summary a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .field.has-validation-error > .form-label, .form-check.has-validation-error .form-check-label { color: var(--brand-danger); font-weight: 700; } .readonly-field.is-invalid, .readonly-field.has-validation-error { border-color: var(--brand-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-danger) 16%, transparent); } .readonly-field.is-invalid > span, .readonly-field.has-validation-error > span { color: var(--brand-danger); font-weight: 700; } .form-control.is-invalid, .form-select.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid, .searchable-select.has-validation-error .searchable-select__input { border-color: var(--brand-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-danger) 16%, transparent); } .admission-invalid-field { scroll-margin-top: 7rem; } .admission-validation-anchor { display: block; height: 0; scroll-margin-top: 7rem; } .invalid-feedback.admission-field-error { display: block; width: 100%; margin-top: .4rem; color: var(--brand-danger); font-size: .9rem; font-weight: 700; line-height: 1.6; } .invalid-feedback.admission-field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-inline-end: .35rem; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; line-height: 1; } @media (hover: none), (pointer: coarse) { a:hover { text-decoration: none; } .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .owner-system-link:hover, .brand-lockup:hover, .admission-status-card:hover, a.admission-type-card:hover, .service-card:hover, .public-portal-card:hover, .public-access-card:hover, .cms-command-card:hover, .attendance-status-chip:hover { transform: none !important; } .table tbody tr:hover, .data-table tbody tr:hover { background: inherit; } } /* ============================================================ * دُمج من public/css/ikd-redesign.css في 2026-07-21 * كانت تُحمَّل سابقًا كورقة تنسيق ثانية منفصلة بعد هذا الملف؛ * دُمجت هنا للحفاظ على نفس ترتيب الطبقات (cascade) تمامًا — * القواعد التالية لا تزال تغلب ما سبقها بنفس منطق الأسبقية القديم. * * Merged from public/css/ikd-redesign.css on 2026-07-21 * It previously loaded as a second stylesheet after this file; * merged here preserving the exact same cascade order — the * rules below still win over earlier ones under the same precedence. * ============================================================ */ .ikd-redesign { --brand-primary: #33452f; --brand-primary-dark: #243221; --brand-primary-light: #edf3e8; --brand-secondary: #bd9553; --brand-secondary-dark: #8e6e35; --brand-secondary-light: #f5ead7; --brand-accent: #a75045; --brand-bg: #f7f2e8; --brand-bg-soft: #efe6d5; --brand-surface: #fffdf8; --brand-surface-muted: #faf6ee; --brand-text: #202018; --brand-text-muted: #726b5d; --brand-border: #e4dac7; --brand-success: #3f6f42; --brand-warning: #bd8b38; --brand-danger: #a94f45; --brand-info: #4f7885; --brand-radius-card: 12px; --brand-radius-control: 10px; --ikd-sidebar-width: 276px; --ikd-shadow: 0 14px 32px rgba(50, 45, 35, .08); --ikd-shadow-soft: 0 8px 20px rgba(50, 45, 35, .055); --brand-font-heading: "IBM Plex Sans Arabic", "Tajawal", sans-serif; --brand-font-body: "IBM Plex Sans Arabic", "Tajawal", sans-serif; } .ikd-redesign, .ikd-redesign body { /* عاجي فاتح بتدرج يكاد لا يُرى (الهوية §3) — لا أبيض صارخًا ولا بيج ثقيلًا */ background: linear-gradient(135deg, rgba(189, 149, 83, .045), transparent 40%), linear-gradient(315deg, rgba(51, 69, 47, .035), transparent 45%), var(--brand-bg); color: var(--brand-text); font-family: var(--brand-font-body) !important; font-size: 16.5px; } .ikd-redesign::before { opacity: .028; } /* ── Landing page: Heading font (IBM Plex Sans Arabic semibold/bold) ── */ .landing-page--redesign h1, .landing-page--redesign h2, .landing-page--redesign h3, .landing-page--redesign h4, .landing-page--redesign .ikd-eyebrow, .landing-page--redesign .ikd-stat-strip strong, .landing-page--redesign .ikd-system-card strong, .landing-page--redesign .ikd-beneficiary-card__title, .landing-page--redesign .ikd-journey-step__title, .landing-page--redesign .ikd-faq-item__question, .landing-page--redesign .ikd-cta-card h2, .landing-page--redesign .ikd-footer__col h4, .landing-page--redesign .btn { font-family: var(--brand-font-heading) !important; font-weight: 600; } /* ── Landing page: Body text font (IBM Plex Sans Arabic regular) ── */ .landing-page--redesign p, .landing-page--redesign span:not(.ikd-eyebrow), .landing-page--redesign a:not(.btn), .landing-page--redesign li, .landing-page--redesign small, .landing-page--redesign .ikd-why-text, .landing-page--redesign .ikd-system-card span, .landing-page--redesign .ikd-beneficiary-card__desc, .landing-page--redesign .ikd-journey-step__desc, .landing-page--redesign .ikd-faq-item__answer p { font-family: var(--brand-font-body) !important; } .ikd-redesign .container { width: min(1200px, calc(100% - 32px)); } .ikd-redesign .btn { min-height: 42px; border-radius: 10px; padding: .7rem 1.05rem; font-weight: 800; box-shadow: none; } /* AR: تدقيق وصول 2026-08-05 - .ikd-redesign .btn أعلاه (تخصيص (0,2,0)) كان يهزم قاعدة .btn:focus-visible العامة (تخصيص مساوٍ (0,2,0)) بأسبقية الترتيب في الملف، فيُلغي مؤشر التركيز مجددًا لكل الأزرار داخل صفحات .ikd-redesign تحديدًا (ومنها صفحة تسجيل الدخول). هذه القاعدة أعلى تخصيصًا (0,3,0) فتفوز بثبات. EN: 2026-08-05 accessibility audit - the `.ikd-redesign .btn` rule above (specificity (0,2,0)) was beating the general `.btn:focus-visible` rule (equal specificity (0,2,0)) by file order, cancelling the focus indicator again for every button specifically within .ikd-redesign pages (including the login page). This rule has higher specificity (0,3,0) so it wins reliably. */ .ikd-redesign .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, transparent); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 16%, transparent); } .ikd-redesign .btn-primary { border-color: var(--brand-primary); background: var(--brand-primary); color: #fffdf8; } .ikd-redesign .btn-primary:hover { border-color: var(--brand-primary-dark); background: var(--brand-primary-dark); color: #fffdf8; } .ikd-redesign .btn-secondary, .ikd-redesign .btn-light { border: 1px solid var(--brand-border); background: var(--brand-surface); color: var(--brand-primary-dark); } .ikd-redesign .btn-outline-primary { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border)); background: transparent; color: var(--brand-primary-dark); } .ikd-redesign .form-control, .ikd-redesign .form-select, .ikd-redesign select, .ikd-redesign textarea, .ikd-redesign input[type="text"], .ikd-redesign input[type="email"], .ikd-redesign input[type="password"], .ikd-redesign input[type="date"], .ikd-redesign input[type="number"], .ikd-redesign input[type="search"] { min-height: 44px; border: 1px solid var(--brand-border); border-radius: 10px; background: #fff; color: var(--brand-text); box-shadow: none; } .ikd-redesign .form-control:focus, .ikd-redesign input:focus, .ikd-redesign textarea:focus, .ikd-redesign select:focus { border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--brand-border)); box-shadow: 0 0 0 3px rgba(51, 69, 47, .10); outline: none; } .ikd-redesign .app-navbar { border: 0 !important; background: rgba(255, 253, 248, .92) !important; box-shadow: 0 1px 0 rgba(228, 218, 199, .8); backdrop-filter: blur(16px); } .ikd-redesign.has-app-shell .app-navbar { display: none; } .ikd-redesign .public-navbar-links a { border-radius: 10px; font-size: .86rem; } .ikd-redesign .public-navbar-links a.is-active, .ikd-redesign .public-navbar-links a:hover { background: var(--brand-primary-light); color: var(--brand-primary-dark); text-decoration: none; } .ikd-redesign .app-shell { display: grid; grid-template-columns: var(--ikd-sidebar-width) minmax(0, 1fr); gap: 0; min-height: calc(100vh - 0px); background: var(--brand-bg); } html[dir="rtl"] .ikd-redesign .app-shell { grid-template-columns: var(--ikd-sidebar-width) minmax(0, 1fr); } .ikd-redesign .app-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 1.1rem .9rem; border-inline-end: 1px solid var(--brand-border); background: linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(250, 246, 238, .96)), var(--brand-surface); box-shadow: 12px 0 30px rgba(50, 45, 35, .04); overflow-y: auto; } .ikd-redesign .app-sidebar__brand { min-height: 72px; margin-bottom: 1rem; border: 1px solid var(--brand-border); border-radius: 12px; background: linear-gradient(135deg, rgba(51, 69, 47, .08), rgba(189, 149, 83, .08)), #fff; } .ikd-redesign .app-sidebar__brand img { max-width: 136px; max-height: 48px; object-fit: contain; } .ikd-redesign .app-sidebar__brand span { color: var(--brand-primary-dark); font-size: 1rem; font-weight: 900; } .ikd-redesign .app-sidebar__nav { display: grid; gap: .28rem; } .ikd-redesign .sidebar-link { position: relative; min-height: 44px; padding: .6rem .7rem; border: 1px solid transparent; border-radius: 10px; color: var(--brand-text-muted); font-size: .92rem; font-weight: 800; text-decoration: none; } .ikd-redesign .sidebar-link:hover { background: rgba(51, 69, 47, .055); color: var(--brand-primary-dark); text-decoration: none; } .ikd-redesign .sidebar-link.active { border-color: rgba(51, 69, 47, .12); background: rgba(51, 69, 47, .10); color: var(--brand-primary-dark); } .ikd-redesign .sidebar-link.active::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 3px; border-radius: 999px; background: var(--brand-primary); } .ikd-redesign .sidebar-link__icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(189, 149, 83, .12); } .ikd-redesign .sidebar-link__icon img { width: 21px; height: 21px; } .ikd-redesign .sidebar-group { margin-top: .3rem; } .ikd-redesign .sidebar-group__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .5rem .7rem .3rem; border: 0; background: transparent; color: var(--brand-text-muted); font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; } .ikd-redesign .sidebar-group__chevron { display: inline-block; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; opacity: .7; } .ikd-redesign .sidebar-group__items { display: grid; gap: .28rem; } .ikd-redesign .sidebar-group.is-collapsed .sidebar-group__chevron { transform: rotate(-45deg); } .ikd-redesign .sidebar-group.is-collapsed .sidebar-group__items { display: none; } .ikd-redesign .app-content { min-width: 0; padding: 0; background: radial-gradient(circle at 12% 0, rgba(189, 149, 83, .12), transparent 28%), var(--brand-bg); } .ikd-redesign .app-content__inner { width: min(1320px, calc(100% - 32px)); margin-inline: auto; padding: 1.25rem 0 2.5rem; } .ikd-topbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; padding: .9rem clamp(1rem, 2.5vw, 1.7rem); border-bottom: 1px solid var(--brand-border); background: rgba(247, 242, 232, .88); backdrop-filter: blur(16px); } .ikd-topbar__primary { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; } .ikd-topbar__search { display: flex; align-items: center; gap: .6rem; width: min(470px, 44vw); min-height: 44px; padding-inline: .85rem; border: 1px solid var(--brand-border); border-radius: 999px; background: #fff; } .ikd-topbar__search span { color: var(--brand-secondary-dark); font-size: 1.1rem; font-weight: 900; } .ikd-topbar__search input { width: 100%; min-height: auto; padding: 0; border: 0; background: transparent; } .ikd-topbar__actions { display: flex; align-items: center; gap: .55rem; } .ikd-icon-button, .ikd-add-button, .ikd-profile-pill { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-border); background: #fff; color: var(--brand-primary-dark); text-decoration: none; } .ikd-icon-button { position: relative; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; } .ikd-menu-button { display: none; flex: 0 0 42px; } .ikd-menu-button__bars, .ikd-menu-button__bars::before, .ikd-menu-button__bars::after { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; content: ""; } .ikd-menu-button__bars { position: relative; } .ikd-menu-button__bars::before, .ikd-menu-button__bars::after { position: absolute; inset-inline-start: 0; } .ikd-menu-button__bars::before { top: -6px; } .ikd-menu-button__bars::after { top: 6px; } .ikd-icon-button i { position: absolute; top: 8px; inset-inline-start: 8px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-warning); } .ikd-add-button { gap: .35rem; min-height: 42px; padding-inline: .9rem; border-color: var(--brand-primary); border-radius: 10px; background: var(--brand-primary); color: #fff; font-weight: 900; } .ikd-profile-pill { justify-content: flex-start; gap: .65rem; min-height: 46px; min-width: 180px; padding: .3rem .45rem .3rem .8rem; border-radius: 999px; } .ikd-profile-pill__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary-dark); font-weight: 900; } .ikd-profile-pill strong, .ikd-profile-pill small { display: block; line-height: 1.25; } .ikd-profile-pill strong { max-width: 110px; overflow: hidden; color: var(--brand-text); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; } .ikd-profile-pill small { color: var(--brand-text-muted); font-size: .72rem; } .ikd-sidebar-backdrop { display: none; border: 0; background: transparent; } .ikd-button-loading { position: relative; color: transparent !important; pointer-events: none; } .ikd-button-loading::after { position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; content: ""; animation: ikdSpin .75s linear infinite; } @keyframes ikdSpin { to { transform: rotate(360deg); } } .ikd-redesign .page-heading, .ikd-redesign .owner-hero { position: relative; overflow: hidden; margin-bottom: 1rem; padding: 1.35rem; border: 1px solid var(--brand-border); border-radius: 12px; background: linear-gradient(135deg, rgba(51, 69, 47, .92), rgba(51, 69, 47, .78)), url("/assets/brand/ikd/patterns/circuit-corner.png") left center / 260px auto no-repeat; color: #fffdf8; box-shadow: var(--ikd-shadow); } .ikd-redesign .page-heading::after, .ikd-redesign .owner-hero::after { content: "IKD"; position: absolute; inset-inline-start: 1.2rem; top: .7rem; color: rgba(255, 253, 248, .12); font-size: clamp(3.5rem, 9vw, 7rem); font-weight: 900; line-height: 1; } .ikd-redesign .page-heading h1, .ikd-redesign .owner-hero h1 { color: inherit; font-size: clamp(1.55rem, 3vw, 2.35rem); } .ikd-redesign .page-heading span, .ikd-redesign .owner-kicker, .ikd-redesign .owner-meta { color: rgba(255, 253, 248, .82); } .ikd-redesign .content-card, .ikd-redesign .owner-section, .ikd-redesign .owner-panel, .ikd-redesign .admin-metric, .ikd-redesign .owner-metric-card, .ikd-redesign .public-section-card, .ikd-redesign .report-surface, .ikd-redesign .niqati-surface, .ikd-redesign .auth-card { border: 1px solid var(--brand-border); border-radius: 12px; background: #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-redesign .admin-metric-grid, .ikd-redesign .owner-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .ikd-redesign .admin-metric, .ikd-redesign .owner-metric-card { padding: 1rem; } .ikd-redesign .admin-metric span, .ikd-redesign .owner-metric-card h3 { color: var(--brand-text-muted); font-size: .88rem; font-weight: 800; } .ikd-redesign .admin-metric strong { color: var(--brand-primary-dark); font-size: 2rem; } .ikd-redesign .admin-metric--success strong, .ikd-redesign .status-badge--success { color: var(--brand-success); } /* AR: تدقيق 2026-08-05 (الدورة الثالثة): var(--brand-warning) (#bd8b38) يعطي 2.98:1 فقط ضد الخلفية البيضاء تقريبًا (--brand-surface = #fffdf8) - أقل من عتبة WCAG AA حتى للنص الكبير (3:1). استُهدفت عتبة النص العادي الأكثر صرامة (4.5:1) لأن هذه القاعدة نفسها تُستخدَم أيضًا لنص شارة صغير (.status-badge--warning) لا نص كبير فقط. **تصحيح لاحق**: أول محاولة (#936c2c) اجتازت ضد #fffdf8 لكنها أعطت 4.41:1 فقط (لا تزال راسبة) ضد #faf6ee - الخلفية الفعلية لـ .status-badge--warning في صفحات أخرى (لوحة المعلم) بسبب نفس عطل .ikd-redesign .status-badge (يفرض var(--brand-surface-muted)). اللون النهائي #8c6729 يجتاز ضد كلتا الخلفيتين معًا (5.05:1 و4.77:1). EN: 2026-08-05 audit (third cycle): var(--brand-warning) (#bd8b38) only reaches 2.98:1 against the near-white background (--brand-surface = #fffdf8) - below the WCAG AA threshold even for large text (3:1). Targeted the stricter normal-text threshold (4.5:1) because this same rule is also used for small badge text (.status-badge--warning), not just large metric text. **Later correction**: the first attempt (#936c2c) passed against #fffdf8 but only reached 4.41:1 (still failing) against #faf6ee - the actual background .status-badge--warning renders against on other pages (teacher dashboard) due to the same .ikd-redesign .status-badge bug (forces var(--brand-surface-muted)). The final color #8c6729 passes against both backgrounds (5.05:1 and 4.77:1). */ .ikd-redesign .admin-metric--warning strong, .ikd-redesign .status-badge--warning { color: #8c6729; } .ikd-redesign .admin-metric--danger strong, .ikd-redesign .status-badge--danger { color: var(--brand-danger); } /* Phase 3B — Security Operations Dashboard: a fourth, distinct tier between warning and danger for SUSPICIOUS-severity security events, following the exact same modifier pattern as the existing three tiers (no new design system, one consistent extension). */ .ikd-redesign .admin-metric--suspicious strong, .ikd-redesign .status-badge--suspicious { color: #a15a2a; } .ikd-redesign .status-badge--suspicious { background: rgba(161, 90, 42, .12); } .ikd-redesign .status-badge--danger { background: rgba(169, 79, 69, .14); } .ikd-redesign .status-badge--warning { background: rgba(189, 139, 56, .14); } .ikd-redesign .status-badge--success { background: rgba(63, 111, 66, .14); } .ikd-redesign .status-badge { display: inline-flex; align-items: center; min-height: 28px; padding: .28rem .65rem; border-radius: 999px; background: var(--brand-surface-muted); font-size: .8rem; font-weight: 900; } .ikd-redesign .table-responsive { border: 1px solid var(--brand-border); border-radius: 12px; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ikd-redesign .table, .ikd-redesign .data-table { margin: 0; min-width: 720px; } .ikd-redesign .data-table thead th { border-bottom: 1px solid var(--brand-border); background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; } .ikd-redesign .data-table tbody td { border-bottom: 1px solid rgba(228, 218, 199, .75); } /* ========================================================================== AR: وضع البطاقات للجداول على الجوال (P2). عند ≤640px يتحوّل كل جدول ‎.data-table‎ (بلا تمرير أفقي، ‎min-width: 720px‎ أعلاه) إلى بطاقات مكدّسة. السكربت العام في ‎layouts/app.blade.php‎ يضيف صنف ‎.data-table--cards‎ للجدول و‎.has-card-table‎ لغلافه، ويملأ ‎td[data-label]‎ من رؤوس الأعمدة. الجداول ذات ‎.data-table--keep-scroll‎ أو المعالجة المخصّصة (كشف اليوم/الحضور/تقييم الاختبار/خطط المراجعة) لا يضيف لها السكربت هذه الأصناف فتبقى كما هي. EN: Mobile card mode for data tables (P2). At ≤640px every .data-table (otherwise a 720px horizontal scroll, rule above) collapses to stacked cards. The global script in layouts/app.blade.php adds .data-table--cards to the table and .has-card-table to its wrapper, and fills td[data-label] from the column headers. Tables with .data-table--keep-scroll or bespoke handling never receive these classes and are left untouched. ========================================================================== */ @media (max-width: 640px) { .ikd-redesign .table-responsive.has-card-table { border: 0; background: transparent; overflow-x: visible; } .ikd-redesign table.data-table--cards, .ikd-redesign table.data-table--cards > thead, .ikd-redesign table.data-table--cards > tbody, .ikd-redesign table.data-table--cards > tbody > tr, .ikd-redesign table.data-table--cards > tbody > tr > td, .ikd-redesign table.data-table--cards > tbody > tr > th { display: block; width: 100%; } .ikd-redesign table.data-table--cards { min-width: 0; border: 0; box-shadow: none; } .ikd-redesign table.data-table--cards > thead { display: none; } .ikd-redesign table.data-table--cards > tbody > tr { margin-bottom: .75rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); box-shadow: var(--qc-shadow-soft); } .ikd-redesign table.data-table--cards > tbody > tr:last-child { margin-bottom: 0; } .ikd-redesign table.data-table--cards > tbody > tr > td, .ikd-redesign table.data-table--cards > tbody > tr > th { padding: .35rem 0; border: 0; text-align: start; white-space: normal; } /* AR: خلية فارغة في وضع البطاقات = سطر "التسمية:" فارغ — تُخفى. */ .ikd-redesign table.data-table--cards > tbody > tr > td:empty { display: none; } .ikd-redesign table.data-table--cards > tbody > tr > td[data-label]::before, .ikd-redesign table.data-table--cards > tbody > tr > th[data-label]::before { content: attr(data-label) ": "; display: block; margin-bottom: .15rem; color: var(--brand-text-muted); font-size: .72rem; font-weight: 900; } } @keyframes ikdFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .ikd-hero__content, .ikd-device-stage, .auth-card--redesign, .auth-visual__content, .ikd-session-header, .ikd-dashboard-metrics, .ikd-report-filters, .ikd-daily-layout { animation: ikdFadeUp .62s ease both; } .ikd-device-stage, .auth-visual__content, .ikd-report-filters { animation-delay: .08s; } .ikd-system-card, .ikd-stat-card, .ikd-metric-card { animation: ikdFadeUp .52s ease both; } @media (prefers-reduced-motion: reduce) { .ikd-redesign *, .ikd-redesign *::before, .ikd-redesign *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .landing-page--redesign.public-shell main.container { width: min(1280px, calc(100% - 32px)); } .ikd-hero { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; min-height: calc(100vh - 104px); padding: clamp(2.5rem, 6vw, 5rem) 0 2.5rem; } .ikd-hero::before { content: ""; position: absolute; inset: 8% -6% auto auto; width: 420px; height: 420px; background: url("/assets/brand/ikd-quranic-luxury/patterns/subtle-geometric-pattern.svg") center / cover no-repeat; opacity: .10; pointer-events: none; } .ikd-eyebrow { margin: 0 0 .7rem; color: var(--brand-secondary-dark); font-size: .95rem; font-weight: 900; letter-spacing: 0.02em; } .ikd-hero h1 { max-width: 720px; margin: 0; color: var(--brand-primary-dark); font-size: clamp(2.8rem, 6.5vw, 5.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .ikd-hero p { max-width: 680px; margin: 1.1rem 0 0; color: var(--brand-text-muted); font-size: 1.12rem; line-height: 1.95; } .ikd-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .ikd-device-stage { position: relative; min-height: 520px; } .ikd-laptop { position: absolute; inset: 38px 0 auto 34px; padding: 16px 16px 26px; border: 1px solid rgba(51, 69, 47, .16); border-radius: 18px; background: linear-gradient(145deg, #2d3329, #171b15); box-shadow: 0 28px 60px rgba(34, 31, 26, .22); } .ikd-laptop::after { content: ""; position: absolute; inset-inline: 9%; bottom: 8px; height: 6px; border-radius: 999px; background: rgba(255, 253, 248, .32); } .ikd-laptop__screen { width: min(560px, 46vw); min-height: 340px; padding: 1rem; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 253, 248, .98), rgba(250, 246, 238, .96)); } .ikd-mock-header { display: flex; gap: .4rem; margin-bottom: 1rem; } .ikd-mock-header span { width: 38px; height: 8px; border-radius: 999px; background: rgba(51, 69, 47, .16); } .ikd-mock-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: .75rem; } .ikd-mock-card, .ikd-mock-chart { border: 1px solid var(--brand-border); border-radius: 10px; background: #fff; box-shadow: 0 8px 18px rgba(31, 27, 22, .05); } .ikd-mock-card { display: grid; gap: .4rem; min-height: 82px; padding: .85rem; } .ikd-mock-card--wide { grid-row: span 2; } .ikd-mock-card strong { color: var(--brand-text-muted); font-size: .78rem; } .ikd-mock-card span { color: var(--brand-primary-dark); font-size: 2rem; font-weight: 900; } .ikd-mock-chart { display: flex; align-items: end; gap: .6rem; height: 130px; margin-top: .75rem; padding: 1rem; } .ikd-mock-chart i { display: block; flex: 1; min-width: 18px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--brand-secondary), var(--brand-primary)); } .ikd-mock-chart i:nth-child(1) { height: 38%; } .ikd-mock-chart i:nth-child(2) { height: 62%; } .ikd-mock-chart i:nth-child(3) { height: 48%; } .ikd-mock-chart i:nth-child(4) { height: 78%; } .ikd-mock-chart i:nth-child(5) { height: 58%; } .ikd-phone { position: absolute; inset-inline-start: 6px; bottom: 34px; width: 160px; padding: 12px; border: 1px solid rgba(51, 69, 47, .16); border-radius: 24px; background: #202018; box-shadow: 0 24px 46px rgba(34, 31, 26, .24); } .ikd-phone__screen { display: grid; place-items: center; gap: .35rem; min-height: 260px; border-radius: 16px; background: linear-gradient(180deg, #fffdf8, #f6eedf); } .ikd-phone__screen img { width: 52px; } .ikd-phone__screen strong { color: var(--brand-primary-dark); } .ikd-phone__screen span { color: var(--brand-secondary-dark); font-size: 1.8rem; font-weight: 900; } .ikd-phone__screen small { color: var(--brand-text-muted); } .ikd-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: -1rem; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-border); box-shadow: var(--ikd-shadow); } .ikd-stat-strip div { display: grid; place-items: center; gap: .2rem; min-height: 112px; background: #fffdf8; } .ikd-stat-strip strong { color: var(--brand-primary-dark); font-size: 2rem; } .ikd-stat-strip span { color: var(--brand-text-muted); font-weight: 800; } .ikd-section { padding: clamp(3rem, 7vw, 5.5rem) 0; } .ikd-section__header { max-width: 780px; margin-bottom: 2rem; } .ikd-section__header h2 { margin: 0; color: var(--brand-primary-dark); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.01em; } .ikd-section__header p:last-child { color: var(--brand-text-muted); line-height: 1.95; font-size: 1.08rem; } .ikd-system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .ikd-system-card { display: grid; gap: .75rem; min-height: 214px; padding: 1.1rem; border: 1px solid var(--brand-border); border-radius: 12px; background: #fffdf8; color: inherit; text-decoration: none; box-shadow: var(--ikd-shadow-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ikd-system-card:hover { border-color: rgba(51, 69, 47, .28); box-shadow: var(--ikd-shadow); color: inherit; text-decoration: none; transform: translateY(-3px); } .ikd-system-card img { width: 44px; height: 44px; object-fit: contain; } .ikd-system-card strong { color: var(--brand-primary-dark); font-size: 1.05rem; } .ikd-system-card span { color: var(--brand-text-muted); font-size: .9rem; line-height: 1.7; } .ikd-section--map { border-block: 1px solid rgba(228, 218, 199, .75); } .ikd-map-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; } .ikd-map-card { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; background: linear-gradient(135deg, rgba(51, 69, 47, .10), rgba(189, 149, 83, .14)), #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-map-card img { position: absolute; inset: 7% auto auto 8%; width: min(70%, 360px); opacity: .22; } .ikd-map-pin { position: absolute; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 12px 24px rgba(51, 69, 47, .25); } .ikd-map-pin::after { content: ""; position: absolute; inset: -16px; border: 1px solid rgba(51, 69, 47, .20); border-radius: 50%; } .ikd-map-pin--one { top: 32%; inset-inline-start: 28%; } .ikd-map-pin--two { top: 54%; inset-inline-start: 58%; background: var(--brand-secondary); } .ikd-map-pin--three { top: 68%; inset-inline-start: 36%; background: var(--brand-danger); } .ikd-institution-list { display: grid; gap: .85rem; } .ikd-institution-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: .9rem; padding: 1rem; border: 1px solid var(--brand-border); border-inline-start: 4px solid var(--institution-color, var(--brand-primary)); border-radius: 12px; background: #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-institution-card__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; background: color-mix(in srgb, var(--institution-color, var(--brand-primary)) 12%, #fff); } .ikd-institution-card__mark img { width: 42px; height: 42px; object-fit: contain; } .ikd-institution-card__mark span { color: var(--institution-color, var(--brand-primary)); font-weight: 900; } .ikd-institution-card small, .ikd-institution-card p { color: var(--brand-text-muted); } .ikd-institution-card h3 { margin: .1rem 0 .35rem; color: var(--brand-primary-dark); } .ikd-institution-card div div { display: flex; flex-wrap: wrap; gap: .4rem; } .ikd-institution-card div div span { padding: .25rem .55rem; border-radius: 999px; background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .78rem; font-weight: 800; } .ikd-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .ikd-workflow article { position: relative; min-height: 210px; padding: 1.2rem; border: 1px solid var(--brand-border); border-radius: 12px; background: #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-workflow article:not(:last-child)::after { content: ""; position: absolute; top: 50%; inset-inline-end: -1rem; width: 1rem; height: 2px; background: var(--brand-secondary); } .ikd-workflow span { color: rgba(51, 69, 47, .18); font-size: 3rem; font-weight: 900; } .ikd-workflow h3 { margin: 0 0 .4rem; color: var(--brand-primary-dark); } .ikd-workflow p { color: var(--brand-text-muted); } .auth-page .auth-shell { display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; min-height: calc(100vh - 130px); } .auth-page .auth-card { padding: clamp(1.5rem, 4vw, 2.25rem); } .auth-page .auth-card__header { display: grid; gap: .8rem; margin-bottom: 1.35rem; } .auth-page .auth-card__logo { width: min(220px, 100%); height: auto; object-fit: contain; } .auth-page .auth-visual { position: relative; min-height: 560px; overflow: hidden; border: 1px solid var(--brand-border); border-radius: 12px; background: linear-gradient(135deg, rgba(51, 69, 47, .10), rgba(189, 149, 83, .12)), var(--brand-bg); } .auth-page .auth-visual::before { content: ""; position: absolute; inset: 8%; background: url("/assets/brand/ikd/patterns/circuit-corner.png") center / contain no-repeat; opacity: .22; } .auth-page .auth-visual__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1rem; max-width: 480px; margin: auto; padding: 2rem; text-align: center; } .auth-page .auth-visual__content img { width: 92px; height: 92px; } .auth-page .auth-visual__content strong { color: var(--brand-primary-dark); font-size: clamp(1.7rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.25; } .auth-page .auth-visual__content p { max-width: 430px; color: var(--brand-text-muted); font-size: 1.02rem; line-height: 1.85; } .auth-form { display: grid; gap: 1rem; } .auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .reports-page .report-surface, .niqati-page .niqati-surface { padding: 1rem; background: transparent; border: 0; box-shadow: none; } .reports-page .admin-metric-grid { margin-block: 1rem; } .ikd-report-filters { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; gap: .75rem; align-items: end; margin: 1rem 0; padding: 1rem; border: 1px solid var(--brand-border); border-radius: 12px; background: #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-report-filters label { display: grid; gap: .35rem; } .ikd-report-filters label span { color: var(--brand-text-muted); font-size: .8rem; font-weight: 900; } .ikd-report-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ikd-report-visuals { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 1rem; margin-bottom: 1rem; } .ikd-report-doughnut-wrap { display: grid; gap: .9rem; place-items: center; min-height: 246px; } .ikd-doughnut.ikd-doughnut--report { --value: 32; width: 206px; background: radial-gradient(circle at center, #fff 0 55%, transparent 56%), conic-gradient(var(--brand-secondary) calc(var(--value) * 1%), rgba(228, 218, 199, .72) 0); } .ikd-report-doughnut-legend { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--brand-text-muted); font-size: .82rem; font-weight: 900; } .ikd-report-doughnut-legend span { display: inline-flex; align-items: center; gap: .35rem; } .ikd-report-doughnut-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-secondary); } .ikd-report-doughnut-legend span + span i { background: var(--brand-surface-muted); box-shadow: inset 0 0 0 1px var(--brand-border); } .ikd-latest-reports { margin-bottom: 1rem; } .ikd-report-actions { display: inline-flex; align-items: center; gap: .4rem; } .ikd-report-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding-inline: .7rem; border: 1px solid var(--brand-border); border-radius: 8px; background: #fff; color: var(--brand-primary-dark); font-size: .78rem; font-weight: 900; text-decoration: none; white-space: nowrap; } .ikd-report-actions a:first-child { border-color: rgba(51, 69, 47, .22); background: var(--brand-primary); color: #fff; } .ikd-report-downloads { display: grid; gap: .7rem; } .ikd-report-downloads a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .75rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 10px; background: #fff; color: var(--brand-primary-dark); font-weight: 900; text-decoration: none; } .ikd-report-downloads a::after { content: "PDF"; color: var(--brand-danger); font-size: .76rem; } .ikd-daily-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 1rem; align-items: start; margin-bottom: 1rem; } .ikd-session-header { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 1rem; align-items: center; margin-bottom: 1rem; padding: clamp(1rem, 2.6vw, 1.4rem); overflow: hidden; border: 1px solid rgba(189, 149, 83, .24); border-radius: 14px; background: linear-gradient(135deg, rgba(51, 69, 47, .95), rgba(66, 88, 58, .90)), url("/assets/brand/ikd/patterns/circuit-corner.png") left center / 250px auto no-repeat; box-shadow: var(--ikd-shadow); } .ikd-session-header::after { position: absolute; inset-block: 14px; inset-inline-start: 18px; color: rgba(255, 255, 255, .08); content: "IKD"; font-size: 4rem; font-weight: 900; } .ikd-session-header > div { position: relative; z-index: 1; } .ikd-session-header span { color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 900; } .ikd-session-header h2 { margin: .25rem 0; color: #fff; font-size: clamp(1.25rem, 2.5vw, 1.9rem); } .ikd-session-header p { max-width: 54ch; margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.8; } .ikd-session-header__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .ikd-session-header__grid article { min-height: 92px; padding: .8rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .10); backdrop-filter: blur(10px); } .ikd-session-header__grid strong { display: block; margin-top: .25rem; color: #fff; font-size: 1rem; } .ikd-daily-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; margin: -.25rem 0 1rem; } .ikd-attendance-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: .3rem; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: .76rem; font-weight: 900; line-height: 1; } .ikd-attendance-icon--success { background: var(--brand-success); } .ikd-attendance-icon--warning { background: var(--brand-warning); } .ikd-attendance-icon--danger { background: var(--brand-danger); } .ikd-daily-aside { display: grid; gap: 1rem; } .ikd-daily-table td strong, .ikd-daily-table td small { display: block; } .ikd-daily-table td small { margin-top: .2rem; color: var(--brand-text-muted); font-size: .78rem; } .ikd-session-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .ikd-session-summary div { display: grid; gap: .2rem; min-height: 84px; padding: .75rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 10px; background: #fff; } .ikd-session-summary span { color: var(--brand-text-muted); font-size: .8rem; font-weight: 800; } .ikd-session-summary strong { color: var(--brand-primary-dark); font-size: 1.55rem; } .ikd-note-list { display: grid; gap: .65rem; } .ikd-note-list p { margin: 0; padding: .75rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 10px; background: #fff; color: var(--brand-text-muted); line-height: 1.7; } .reports-page .content-card, .niqati-page .content-card { padding: 1rem; } .daily-operations-monitor__summary, .owner-admission-bars, .launch-readiness__grid, .owner-system-grid { gap: 1rem; } .daily-operations-monitor__summary div { border-radius: 10px; background: #fff; } .ikd-dashboard-hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .ikd-dashboard-hero-cards article { min-height: 112px; padding: .9rem; border: 1px solid rgba(255, 255, 255, .46); border-radius: 12px; background: rgba(255, 255, 255, .88); box-shadow: 0 18px 42px rgba(33, 38, 25, .10); } .ikd-dashboard-hero-cards span, .ikd-dashboard-hero-cards small { display: block; color: var(--brand-text-muted); font-size: .8rem; font-weight: 900; } .ikd-dashboard-hero-cards strong { display: block; margin: .35rem 0; color: var(--brand-primary-dark); font-size: clamp(1rem, 1.8vw, 1.42rem); line-height: 1.25; } .ikd-dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .ikd-dashboard-metric, .ikd-panel { border: 1px solid var(--brand-border); border-radius: 12px; background: #fffdf8; box-shadow: var(--ikd-shadow-soft); } .ikd-dashboard-metric { display: grid; align-content: center; gap: .25rem; min-height: 132px; padding: 1rem; } .ikd-dashboard-metric__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .2rem; border-radius: 12px; background: rgba(189, 149, 83, .14); } .ikd-dashboard-metric__icon img { width: 26px; height: 26px; object-fit: contain; } .ikd-dashboard-metric span, .ikd-dashboard-metric small, .ikd-panel__header span { color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .ikd-dashboard-metric strong { color: var(--brand-primary-dark); font-size: 2rem; line-height: 1; } .ikd-dashboard-metric--success strong { color: var(--brand-success); } .ikd-dashboard-metric--warning strong { color: var(--brand-warning); } .ikd-dashboard-metric--danger strong { color: var(--brand-danger); } .ikd-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 1rem; margin-bottom: 1rem; } .ikd-dashboard-layout--secondary { grid-template-columns: minmax(300px, .55fr) minmax(0, 1.45fr); } .ikd-panel { padding: 1rem; } .ikd-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .ikd-panel__header h2 { margin: .15rem 0 0; color: var(--brand-primary-dark); font-size: 1.18rem; } .ikd-panel__header a { color: var(--brand-primary); font-size: .86rem; font-weight: 900; } .ikd-halaqah-list, .ikd-task-list, .ikd-timeline { display: grid; gap: .75rem; } .ikd-halaqah-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1.2fr) 56px; gap: .75rem; align-items: center; padding: .85rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 10px; background: #fff; } .ikd-halaqah-row strong, .ikd-halaqah-row span { display: block; } .ikd-halaqah-row strong { color: var(--brand-text); } .ikd-halaqah-row span, .ikd-halaqah-row em { color: var(--brand-text-muted); font-size: .84rem; font-style: normal; font-weight: 800; } .ikd-progress { height: 9px; overflow: hidden; border-radius: 999px; background: var(--brand-surface-muted); } .ikd-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); } .ikd-timeline { position: relative; } .ikd-timeline::before { content: ""; position: absolute; inset-block: .4rem; inset-inline-start: .42rem; width: 2px; background: var(--brand-border); } .ikd-timeline div { position: relative; padding-inline-start: 1.6rem; } .ikd-timeline div::before { content: ""; position: absolute; top: .35rem; inset-inline-start: 0; width: .85rem; height: .85rem; border: 3px solid #fff; border-radius: 50%; background: var(--brand-secondary); box-shadow: 0 0 0 1px var(--brand-border); } .ikd-timeline strong, .ikd-timeline span { display: block; } .ikd-timeline strong { color: var(--brand-text); font-size: .9rem; } .ikd-timeline span { color: var(--brand-text-muted); font-size: .78rem; } .ikd-task-list label { display: flex; align-items: center; gap: .65rem; min-height: 42px; padding: .65rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 10px; background: #fff; color: var(--brand-text); font-weight: 800; } .ikd-task-list input { width: 18px; height: 18px; accent-color: var(--brand-primary); } .ikd-smart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1rem; align-items: center; } .ikd-trend-chart { display: flex; align-items: end; gap: .75rem; min-height: 210px; padding: 1rem; border: 1px solid rgba(228, 218, 199, .75); border-radius: 12px; background: linear-gradient(0deg, rgba(228, 218, 199, .45) 1px, transparent 1px), #fff; background-size: 100% 42px; } .ikd-trend-chart i { flex: 1; min-width: 24px; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); } .ikd-doughnut { --value: 74; display: grid; place-items: center; align-content: center; gap: .25rem; width: 190px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 56%, transparent 57%), conic-gradient(var(--brand-primary) calc(var(--value) * 1%), var(--brand-surface-muted) 0); } .ikd-doughnut strong { color: var(--brand-primary-dark); font-size: 2rem; } .ikd-doughnut span { color: var(--brand-text-muted); font-size: .84rem; font-weight: 800; } .ikd-kpi-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; } .ikd-kpi-doughnut-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } .ikd-kpi-doughnut-row .ikd-doughnut { width: 150px; margin-inline: 0; } .ikd-kpi-subline { margin: .75rem 0 0; color: var(--brand-text-muted); font-size: .82rem; font-weight: 800; } .ikd-kpi-note { display: grid; place-items: center; gap: .35rem; min-height: 180px; padding: 1rem; border: 1px dashed var(--brand-border); border-radius: 12px; background: var(--brand-surface-muted); color: var(--brand-text-muted); font-size: .88rem; font-weight: 800; text-align: center; } /* AR: نقطة تبديل "سطح المكتب ↔ الجوال" لهيكل التطبيق. كانت 1180px فتُطوى كل التخطيطات إلى عمود واحد وتختفي القائمة الجانبية على نوافذ أضيق من 1180px CSS — أي على حاسوب مكتبي حقيقي عند تكبير النظام 125–150% أو نافذة غير مكبّرة أو تقسيم الشاشة ("الكمبيوتر يبدو كالهاتف"). خُفِّضت إلى 1024px (عرض iPad landscape) — القائمة المثبّتة (‎--ikd-sidebar-width: 276px) تسع مريحة فوقه. تُبقِ ‎window.matchMedia في ‎layouts/app.blade.php على نفس القيمة (سطران). */ @media (max-width: 1024px) { .ikd-redesign .app-shell, html[dir="rtl"] .ikd-redesign .app-shell, .ikd-hero, .ikd-map-layout, .auth-page .auth-shell, .ikd-dashboard-layout, .ikd-dashboard-layout--secondary, .ikd-report-visuals, .ikd-session-header, .ikd-daily-layout, .ikd-kpi-panels { grid-template-columns: 1fr; } .ikd-redesign .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 80; width: min(84vw, var(--ikd-sidebar-width)); height: 100dvh; max-height: none; transform: translateX(-105%); transition: transform .24s ease, box-shadow .24s ease; box-shadow: 18px 0 38px rgba(34, 28, 18, .16); } html[dir="rtl"] .ikd-redesign .app-sidebar { transform: translateX(105%); box-shadow: -18px 0 38px rgba(34, 28, 18, .16); } .ikd-redesign.ikd-sidebar-open .app-sidebar, html[dir="rtl"] .ikd-redesign.ikd-sidebar-open .app-sidebar { transform: translateX(0); } .ikd-redesign.ikd-sidebar-open { overflow: hidden; } .ikd-sidebar-backdrop { position: fixed; inset: 0; z-index: 70; display: block; opacity: 0; background: rgba(23, 28, 21, .42); pointer-events: none; transition: opacity .2s ease; } .ikd-redesign.ikd-sidebar-open .ikd-sidebar-backdrop { opacity: 1; pointer-events: auto; } .ikd-menu-button { display: inline-flex; } .ikd-laptop { position: relative; inset: auto; } .ikd-laptop__screen { width: 100%; } .ikd-phone { inset-inline-start: auto; inset-inline-end: 1rem; } } @media (max-width: 920px) { .ikd-redesign .admin-metric-grid, .ikd-redesign .owner-metric-grid, .ikd-system-grid, .ikd-stat-strip, .ikd-workflow, .ikd-dashboard-metrics, .ikd-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ikd-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ikd-dashboard-hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ikd-smart-grid { grid-template-columns: 1fr; } .ikd-topbar { align-items: stretch; flex-direction: column; } .ikd-topbar__primary { width: 100%; } .ikd-topbar__search { width: 100%; } .ikd-topbar__actions { flex-wrap: wrap; } } @media (max-width: 680px) { .ikd-redesign .admin-metric-grid, .ikd-redesign .owner-metric-grid, .ikd-system-grid, .ikd-stat-strip, .ikd-workflow, .ikd-dashboard-metrics, .ikd-report-metrics, .ikd-report-filters, .ikd-dashboard-hero-cards, .ikd-session-header__grid, .ikd-halaqah-row, .ikd-session-summary { grid-template-columns: 1fr; } .ikd-daily-actions { align-items: stretch; flex-direction: column; } .ikd-daily-actions .btn { width: 100%; } .ikd-device-stage { min-height: auto; } .ikd-phone { display: none; } .ikd-laptop { padding: 10px 10px 18px; } .ikd-laptop__screen { min-height: 270px; } } /* ============================================================ §1. Manuscript Texture Overlay ============================================================ */ .ikd-manuscript-bg { position: relative; } .ikd-manuscript-bg::before { content: ""; position: absolute; inset: 0; background: url("/assets/brand/ikd/patterns/manuscript-soft.png") repeat center / 400px; opacity: 0.035; pointer-events: none; z-index: 0; } .ikd-manuscript-bg > * { position: relative; z-index: 1; } /* ============================================================ §2. Digital Circuit Corner ============================================================ */ .ikd-circuit-corner { position: relative; } .ikd-circuit-corner::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 200px; height: 200px; background: url("/assets/brand/ikd/patterns/circuit-corner.png") no-repeat top left / contain; opacity: 0.07; pointer-events: none; z-index: 0; } /* ============================================================ §3. Section Divider ============================================================ */ .ikd-section-divider { display: block; width: 100%; max-width: 120px; height: 12px; margin: 0 auto; background: url("/assets/brand/ikd-quranic-luxury/patterns/soft-divider.svg") center / contain no-repeat; opacity: 0.45; border: none; } /* ============================================================ §4. Why IKD Section ============================================================ */ .ikd-why-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; } .ikd-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .ikd-why-point { display: flex; gap: 0.75rem; align-items: start; padding: 1rem; border-radius: 10px; background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--ikd-shadow-soft); transition: transform 0.25s, box-shadow 0.25s; } .ikd-why-point:hover { transform: translateY(-2px); box-shadow: var(--ikd-shadow); } .ikd-why-icon { width: 36px; height: 36px; min-width: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); font-size: 1rem; } .ikd-why-text { font-size: 1rem; line-height: 1.85; color: var(--brand-text); } /* ============================================================ §5. Concept Section ============================================================ */ .ikd-concept-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; background: linear-gradient(180deg, rgba(51,69,47,0.03), transparent 60%), var(--brand-bg); } .ikd-concept-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .ikd-concept-text { max-width: 600px; } .ikd-concept-text h2 { margin: 0; color: var(--brand-primary-dark); font-size: clamp(1.8rem, 3vw, 2.55rem); } .ikd-concept-text p { color: var(--brand-text-muted); line-height: 1.9; font-size: 1.08rem; } .ikd-concept-features { display: grid; gap: 0.75rem; } .ikd-concept-feature { display: flex; gap: 0.6rem; align-items: center; padding: 0.75rem 1rem; border-radius: 10px; background: var(--brand-surface); border: 1px solid var(--brand-border); font-size: 1.02rem; } .ikd-concept-feature .ikd-check { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; flex-shrink: 0; font-size: 0.75rem; } /* ============================================================ §6. Enhanced System Cards ============================================================ */ .ikd-system-card { position: relative; } .ikd-system-card__points { font-size: 0.85rem; color: var(--brand-text-muted); margin-top: auto; } .ikd-system-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--brand-primary); font-weight: 700; text-decoration: none; margin-top: 0.5rem; transition: color 0.2s; } .ikd-system-card__link:hover { color: var(--brand-primary-dark); text-decoration: none; } .ikd-redesign .ikd-system-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ============================================================ §7. Student Journey Timeline ============================================================ */ .ikd-journey-section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; } .ikd-journey-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; position: relative; } .ikd-journey-timeline::before { content: ""; position: absolute; top: 32px; inset-inline-start: 10%; inset-inline-end: 10%; height: 2px; background: linear-gradient(to left, var(--brand-primary), var(--brand-secondary)); opacity: 0.2; z-index: 0; } .ikd-journey-step { display: grid; gap: 0.75rem; text-align: center; position: relative; z-index: 1; } .ikd-journey-step__number { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-surface); border: 2px solid var(--brand-border); display: grid; place-items: center; margin: 0 auto; font-size: 1.2rem; font-weight: 900; color: var(--brand-primary); transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s; } .ikd-journey-step:hover .ikd-journey-step__number { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); transform: scale(1.08); } .ikd-journey-step__title { font-size: 1.02rem; font-weight: 800; color: var(--brand-primary-dark); } .ikd-journey-step__desc { font-size: 0.9rem; color: var(--brand-text-muted); line-height: 1.75; } /* ============================================================ §8. Beneficiaries ============================================================ */ .ikd-beneficiaries-section { padding: clamp(3rem, 7vw, 5.5rem) 0; } .ikd-beneficiaries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .ikd-beneficiary-card { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--ikd-shadow-soft); text-align: center; transition: transform 0.25s, box-shadow 0.25s; } .ikd-beneficiary-card:hover { transform: translateY(-4px); box-shadow: var(--ikd-shadow); } .ikd-beneficiary-card__icon { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto; display: grid; place-items: center; font-size: 1.5rem; } .ikd-beneficiary-card__icon img { width: 34px; height: 34px; object-fit: contain; } .ikd-beneficiaries-grid > :nth-child(1) .ikd-beneficiary-card__icon { background: rgba(51,69,47,0.10); color: var(--brand-primary); } .ikd-beneficiaries-grid > :nth-child(2) .ikd-beneficiary-card__icon { background: rgba(189,149,83,0.12); color: var(--brand-secondary-dark); } .ikd-beneficiaries-grid > :nth-child(3) .ikd-beneficiary-card__icon { background: rgba(79,120,133,0.10); color: var(--brand-info); } .ikd-beneficiaries-grid > :nth-child(4) .ikd-beneficiary-card__icon { background: rgba(63,111,66,0.10); color: var(--brand-success); } .ikd-beneficiaries-grid > :nth-child(5) .ikd-beneficiary-card__icon { background: rgba(169,79,69,0.08); color: var(--brand-accent); } .ikd-beneficiary-card__title { font-size: 1.1rem; font-weight: 800; color: var(--brand-primary-dark); } .ikd-beneficiary-card__desc { font-size: 0.95rem; color: var(--brand-text-muted); line-height: 1.85; } /* ============================================================ §9. FAQ Accordion ============================================================ */ .ikd-faq-section { padding: clamp(3rem, 7vw, 5.5rem) 0; max-width: 880px; margin: 0 auto; } .ikd-faq-list { display: grid; gap: 0.75rem; } .ikd-faq-item { border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); overflow: hidden; transition: box-shadow 0.2s; } .ikd-faq-item.is-open { box-shadow: var(--ikd-shadow-soft); border-color: rgba(51,69,47,0.20); } .ikd-faq-item__question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; cursor: pointer; font-weight: 800; font-size: 1.02rem; color: var(--brand-primary-dark); background: transparent; border: none; width: 100%; text-align: right; font-family: inherit; line-height: 1.6; } .ikd-faq-item__question:hover { color: var(--brand-primary); } .ikd-faq-item__arrow { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: var(--brand-primary-light); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.3s; font-size: 0.75rem; color: var(--brand-primary); } .ikd-faq-item.is-open .ikd-faq-item__arrow { transform: rotate(180deg); } .ikd-faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 1.25rem; } .ikd-faq-item.is-open .ikd-faq-item__answer { max-height: 500px; padding: 0 1.25rem 1.25rem; } .ikd-faq-item__answer p { font-size: 0.98rem; color: var(--brand-text-muted); line-height: 1.9; margin: 0; } /* ============================================================ §10. CTA Section ============================================================ */ .ikd-cta-section { padding: 3.5rem 0; text-align: center; } .ikd-cta-card { max-width: 800px; margin: 0 auto; padding: 3rem 2rem; border-radius: 16px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: #fff; position: relative; overflow: hidden; } .ikd-cta-card::before { content: ""; position: absolute; inset: -20%; width: 140%; height: 140%; background: url("/assets/brand/ikd/patterns/circuit-corner.png") center / contain no-repeat; opacity: 0.04; pointer-events: none; } .ikd-cta-card h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 0.75rem; color: #fff; } .ikd-cta-card p { font-size: 1.08rem; opacity: 0.85; margin: 0 0 1.5rem; max-width: 600px; margin-inline: auto; } .ikd-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .ikd-cta-actions .btn-light { background: rgba(255,253,248,0.95); color: var(--brand-primary-dark); font-weight: 800; border: none; } .ikd-cta-actions .btn-light:hover { background: #fff; } .ikd-cta-actions .btn-outline-light { border: 1px solid rgba(255,253,248,0.4); color: #fff; background: transparent; } .ikd-cta-actions .btn-outline-light:hover { background: rgba(255,253,248,0.12); } /* ============================================================ §11. Footer ============================================================ */ .ikd-footer { background: var(--brand-primary-dark, #243221); color: rgba(255,253,248,0.75); padding: 3rem 0 1.5rem; } .ikd-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; } .ikd-footer__brand { display: grid; gap: 0.75rem; } .ikd-footer__brand img { max-width: 140px; filter: brightness(10); } .ikd-footer__brand p { font-size: 0.92rem; line-height: 1.85; opacity: 0.7; max-width: 320px; margin: 0; } .ikd-footer__col h4 { font-size: 0.98rem; font-weight: 800; color: rgba(255,253,248,0.95); margin: 0 0 1rem; } .ikd-footer__col a { display: block; padding: 0.3rem 0; font-size: 0.9rem; color: rgba(255,253,248,0.6); text-decoration: none; transition: color 0.2s; } .ikd-footer__col a:hover { color: rgba(255,253,248,0.95); } .ikd-footer__bottom { border-top: 1px solid rgba(255,253,248,0.08); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .ikd-footer__copyright { font-size: 0.85rem; opacity: 0.5; } .ikd-footer__social { display: flex; gap: 0.75rem; } .ikd-footer__social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,253,248,0.08); display: grid; place-items: center; color: rgba(255,253,248,0.6); text-decoration: none; transition: background 0.2s, color 0.2s; } .ikd-footer__social a:hover { background: rgba(189,149,83,0.25); color: rgba(255,253,248,0.95); } /* ============================================================ §12. Hero Note + Illustration ============================================================ */ .ikd-hero__note { font-size: 0.95rem; color: var(--brand-secondary-dark); font-weight: 600; padding: 0.75rem 1rem; border-inline-start: 3px solid var(--brand-secondary); background: rgba(189,149,83,0.08); border-radius: 0 8px 8px 0; margin-top: 1rem; max-width: 680px; line-height: 1.75; } [dir="rtl"] .ikd-hero__note, .ikd-redesign .ikd-hero__note { border-radius: 8px 0 0 8px; } .ikd-hero__illustration { display: grid; place-items: center; position: relative; } .ikd-hero__illustration img { width: 100%; max-width: 560px; height: auto; border-radius: 16px; filter: drop-shadow(0 20px 40px rgba(50,45,35,0.12)); animation: ikdFloat 6s ease-in-out infinite; } @keyframes ikdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================================ §13. Scroll Animations ============================================================ */ .ikd-animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; } .ikd-animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .ikd-animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* ============================================================ §14. Responsive ============================================================ */ @media (max-width: 1024px) { .ikd-hero { grid-template-columns: 1fr; } .ikd-hero__illustration img { max-width: 420px; } .ikd-why-grid { grid-template-columns: 1fr; } .ikd-concept-layout { grid-template-columns: 1fr; } .ikd-beneficiaries-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } @media (max-width: 768px) { .ikd-stat-strip { grid-template-columns: repeat(2, 1fr); } .ikd-redesign .ikd-system-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .ikd-hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); } .ikd-section__header h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); } .ikd-faq-section { padding-inline: 1rem; } .ikd-cta-card { padding: 2rem 1.5rem; } .ikd-journey-timeline { grid-template-columns: 1fr; gap: 2rem; } .ikd-journey-timeline::before { display: none; } .ikd-journey-step { display: grid; grid-template-columns: 64px 1fr; text-align: right; gap: 1rem; align-items: center; } .ikd-journey-step__number { margin: 0; } .ikd-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .ikd-footer__brand { grid-column: span 2; } .ikd-footer__bottom { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .ikd-hero__actions { flex-direction: column; } .ikd-hero__actions .btn { width: 100%; } .ikd-beneficiaries-grid { grid-template-columns: 1fr; } .ikd-footer__grid { grid-template-columns: 1fr; } .ikd-footer__brand { grid-column: span 1; } } /* ================================================================ PUBLIC PAGES STYLES — Shared across all public-facing pages ================================================================ */ /* ── Font overrides for ALL public pages (not just landing-page--redesign) ── */ .landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4, .public-content-page h1, .public-content-page h2, .public-content-page h3, .platform-content-page h1, .platform-content-page h2 { font-family: "IBM Plex Sans Arabic", "Tajawal", sans-serif !important; font-weight: 600; letter-spacing: -0.01em; } .landing-page p, .landing-page span, .landing-page a, .landing-page li, .public-content-page p, .public-content-page a, .public-content-page li, .platform-content-page p { font-family: "IBM Plex Sans Arabic", "Tajawal", sans-serif !important; } /* ── Unified Public Hero ── */ .ikd-public-hero { padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; position: relative; background: linear-gradient(180deg, var(--brand-surface) 0%, var(--brand-bg) 100%); border-bottom: 1px solid var(--brand-border); } .ikd-public-hero .container { max-width: 860px; margin: 0 auto; } .ikd-public-hero .ikd-eyebrow { margin-bottom: 0.75rem; } .ikd-public-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem) !important; font-weight: 800; color: var(--brand-primary-dark); margin: 0 0 1rem; line-height: 1.2; } .ikd-public-hero p { font-size: 1.12rem; color: var(--brand-text-muted); line-height: 2; max-width: 700px; margin: 0 auto; } /* ── Breadcrumb ── */ .ikd-breadcrumb { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-bottom: 1.5rem; font-size: 0.88rem; } .ikd-breadcrumb a { color: var(--brand-secondary); text-decoration: none; font-weight: 600; transition: color 0.2s; } .ikd-breadcrumb a:hover { color: var(--brand-secondary-dark); } .ikd-breadcrumb span { color: var(--brand-text-muted); } .ikd-breadcrumb .separator { opacity: 0.4; } /* ── Public Content Card ── */ .ikd-public-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 14px; padding: 2rem; box-shadow: var(--ikd-shadow-soft); transition: transform 0.25s, box-shadow 0.25s; } .ikd-public-card:hover { transform: translateY(-3px); box-shadow: var(--ikd-shadow); } .ikd-public-card h3 { color: var(--brand-primary-dark); font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem; } .ikd-public-card p { color: var(--brand-text-muted); line-height: 1.85; font-size: 1rem; margin: 0; } /* ── Public Card with side accent ── */ .ikd-public-card--accent { border-inline-start: 4px solid var(--brand-primary); } .ikd-public-card--gold { border-inline-start: 4px solid var(--brand-secondary); } /* ── Feature Grid (numbered items) ── */ .ikd-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .ikd-feature-item { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.15rem; border-radius: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--ikd-shadow-soft); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .ikd-feature-item:hover { transform: translateY(-2px); box-shadow: var(--ikd-shadow); border-color: rgba(51, 69, 47, 0.18); } .ikd-feature-item__num { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; background: var(--brand-primary-light); color: var(--brand-primary); display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; flex-shrink: 0; } .ikd-feature-item p { font-size: 0.98rem; line-height: 1.8; color: var(--brand-text); margin: 0; } /* ── Value Cards (About page) ── */ .ikd-values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .ikd-value-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); transition: transform 0.25s, box-shadow 0.25s; } .ikd-value-card:hover { transform: translateY(-2px); box-shadow: var(--ikd-shadow-soft); } .ikd-value-card__icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: var(--brand-primary-light); display: grid; place-items: center; font-size: 1.3rem; } .ikd-value-card strong { display: block; font-size: 1.02rem; color: var(--brand-primary-dark); margin-bottom: 0.25rem; } .ikd-value-card p { font-size: 0.9rem; color: var(--brand-text-muted); line-height: 1.75; margin: 0; } /* ── System Detail Page ── */ .ikd-system-detail { padding: clamp(2.5rem, 6vw, 4rem) 0; } .ikd-system-detail .container { max-width: 1080px; margin: 0 auto; } .ikd-system-overview { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; padding: 2.5rem; box-shadow: var(--ikd-shadow-soft); margin-bottom: 2.5rem; position: relative; } .ikd-system-overview p { font-size: 1.12rem; line-height: 2; color: var(--brand-text); margin: 0; } /* ── System Category Grid (index page) ── */ .ikd-category-section { margin-bottom: 3rem; } .ikd-category-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--brand-border); } .ikd-category-header h3 { font-size: 1.3rem; font-weight: 700; color: var(--brand-primary-dark); margin: 0; } .ikd-category-header p { font-size: 0.9rem; color: var(--brand-text-muted); margin: 0; } /* ── System Index Card ── */ .ikd-system-index-card { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: 14px; background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--ikd-shadow-soft); text-decoration: none; color: inherit; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .ikd-system-index-card:hover { transform: translateY(-4px); box-shadow: var(--ikd-shadow); border-color: rgba(51, 69, 47, 0.2); text-decoration: none; color: inherit; } .ikd-system-index-card__header { display: flex; align-items: center; gap: 0.75rem; } .ikd-system-index-card__header img { width: 40px; height: 40px; } .ikd-system-index-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--brand-primary-dark); margin: 0; } .ikd-system-index-card__subtitle { font-size: 0.9rem; color: var(--brand-text-muted); line-height: 1.75; } .ikd-system-index-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--brand-border); font-size: 0.82rem; color: var(--brand-text-muted); } .ikd-system-index-card__action { color: var(--brand-primary); font-weight: 700; font-size: 0.85rem; } /* ── Related Systems Strip ── */ .ikd-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } /* ── Prose Content ── */ .ikd-prose { font-size: 1.1rem; line-height: 2; color: var(--brand-text); max-width: 800px; } .ikd-prose p + p { margin-top: 1.25rem; } /* ── Section wrapper for public pages ── */ .ikd-public-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .ikd-public-section .container { max-width: 1100px; margin: 0 auto; } .ikd-public-section--alt { background: linear-gradient(180deg, rgba(51,69,47,0.02), transparent 60%), var(--brand-bg); } /* ── Contact cards ── */ .ikd-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .ikd-contact-card { display: grid; gap: 0.75rem; padding: 2rem; border-radius: 14px; background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--ikd-shadow-soft); text-align: center; transition: transform 0.25s, box-shadow 0.25s; } .ikd-contact-card:hover { transform: translateY(-3px); box-shadow: var(--ikd-shadow); } .ikd-contact-card__icon { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto; display: grid; place-items: center; font-size: 1.5rem; background: var(--brand-primary-light); } .ikd-contact-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--brand-primary-dark); margin: 0; } .ikd-contact-card p { font-size: 0.92rem; color: var(--brand-text-muted); line-height: 1.8; margin: 0; } /* ── Responsive for public pages ── */ @media (max-width: 768px) { .ikd-feature-grid { grid-template-columns: 1fr; } .ikd-values-grid { grid-template-columns: 1fr; } .ikd-system-overview { padding: 1.5rem; } .ikd-contact-grid { grid-template-columns: 1fr; } .ikd-public-hero h1 { font-size: clamp(1.8rem, 4vw, 2.4rem) !important; } } /* ================================================================ DESIGN-SYSTEM COMPONENTS (design.md) — badges, table states, focus ring, card hover. Single source for status styling. ================================================================ */ /* ── Status badges: "حالة السجل" — always a badge, never raw text ── */ .ikd-redesign .ikd-badge { display: inline-flex; align-items: center; gap: .35rem; min-height: 26px; padding: .22rem .7rem; border-radius: 999px; border: 1px solid transparent; font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--brand-surface-muted); color: var(--brand-text-muted); } .ikd-redesign .ikd-badge--success { background: var(--brand-primary-light); border-color: color-mix(in srgb, var(--brand-success) 25%, transparent); color: var(--brand-success); } .ikd-redesign .ikd-badge--pending { background: var(--brand-secondary-light); border-color: color-mix(in srgb, var(--brand-secondary-dark) 25%, transparent); /* AR: نفس نمط إصلاح .status-badge--pending أدناه بالضبط - var(--brand-secondary-dark) (#8e6e35) يعطي 3.97:1 فقط ضد var(--brand-secondary-light) (#f5ead7) هنا تحديدًا - أقل من WCAG AA (4.5:1). صاده axe على شارة "مُرسل" في صفحة مراجعة طلبات تسجيل المؤسسات (E1-4ب). نفس اللون الأغمق البديل. EN: Same fix pattern as .status-badge--pending below - var(--brand-secondary-dark) (#8e6e35) only reaches 3.97:1 against var(--brand-secondary-light) (#f5ead7) here specifically - below WCAG AA (4.5:1). Caught by axe on the "submitted" badge on the institution-application review page (E1-4b). Same darker substitute color. */ color: #806330; } .ikd-redesign .ikd-badge--danger { background: #f7ebe9; border-color: color-mix(in srgb, var(--brand-danger) 22%, transparent); color: var(--brand-danger); } .ikd-redesign .ikd-badge--info { background: #edf3f4; border-color: color-mix(in srgb, var(--brand-info) 22%, transparent); color: var(--brand-info); } .ikd-redesign .ikd-badge--muted { background: var(--brand-surface-muted); border-color: var(--brand-border); color: var(--brand-text-muted); } /* ── Table row states: "سجلات الديوان" ── */ .ikd-redesign tr.ikd-row--approved > td { background: color-mix(in srgb, var(--brand-primary-light) 45%, transparent); } .ikd-redesign tr.ikd-row--pending > td { background: color-mix(in srgb, var(--brand-secondary-light) 45%, transparent); } .ikd-redesign tr.ikd-row--rejected > td { background: color-mix(in srgb, #f7ebe9 55%, transparent); } .ikd-redesign tr.ikd-row--archived > td { background: var(--brand-surface-muted); color: var(--brand-text-muted); } /* ── Focus ring: calm green, consistent everywhere ── */ .ikd-redesign input:focus-visible, .ikd-redesign select:focus-visible, .ikd-redesign textarea:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(51, 69, 47, .12); } /* AR: تدقيق 2026-08-05 (الدورة الثالثة، من رحلة وكيل "مستخدم لوحة مفاتيح فقط"): نفس عطل `a:focus-visible` أعلاه، لكن لعنصر