/* Shared visual system for the Arabic staff workspace. */
:root { --surface:#f1f5f9; --ivory:#f4f7fb; --line:#e0e7ef; --ink:#243449; }
h2 { font-size:clamp(1.125rem,1.8vw,1.4rem); }
.page-heading { padding-block:4px 22px; margin-bottom:24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.page-heading > div { min-width:0; }
.page-heading h1 { font-size:clamp(1.5rem,2.2vw,2rem); margin-block:6px; }
.page-heading p { color:var(--text-secondary); font-size:.875rem; margin:8px 0 0; max-width:76ch; }
.eyebrow { font-size:.75rem; color:var(--primary); font-weight:700; }
.form-card,.table-card,.metric-card { border-radius:16px; box-shadow:0 3px 16px rgb(24 51 84 / 3%); }
.form-card > h2 { font-size:1.15rem; font-weight:700; margin-bottom:18px; }
.form-card > p { font-size:.875rem; overflow-wrap:anywhere; }
.form-card > p:last-child { margin-bottom:0; }
.form-card .section-heading { padding:0 0 16px; margin-bottom:8px; }
.form-grid { gap:20px; }
.form-card label { color:var(--ink); font-size:.875rem; }
.form-card :is(input,select,textarea),.training-toolbar :is(input,select) { border-color:#bccbd9; border-radius:10px; background:white; }
.form-card textarea { resize:vertical; min-height:112px; }
:is(.form-card,.training-toolbar) input:is([type=checkbox],[type=radio]) { width:20px; height:20px; min-height:20px; padding:0; flex:0 0 20px; accent-color:var(--primary); }
:is(.form-card,.training-toolbar) label:has(> input:is([type=checkbox],[type=radio])) { display:flex; align-items:center; gap:10px; min-height:44px; }
:is(input,select,textarea):focus-visible { outline:3px solid #9acbe2; outline-offset:2px; }
.primary-button,.secondary-button { font-size:.875rem; min-height:44px; border-radius:10px; padding-inline:20px; }
.primary-button:hover { color:white; box-shadow:0 3px 10px #005b961a; }
.secondary-button { background:white; }
.quick-links .secondary-button { background:transparent; }
button:disabled { opacity:.65; border-color:var(--line); box-shadow:none; }
.training-toolbar { padding:18px 20px; background:white; border:1px solid var(--line); border-radius:14px; gap:16px; }
.training-toolbar label { margin:0; color:var(--text-secondary); }
.training-toolbar > label:has(input[type=checkbox]) { flex:0 1 auto; min-width:140px; }
.table-card { scrollbar-width:thin; scrollbar-color:#a5bacb #f1f5f9; }
.table-card:focus-visible { outline:3px solid #9acbe2; outline-offset:3px; }
.section-heading { flex-wrap:wrap; padding:18px 22px; }
th { padding:13px 20px; font-size:.75rem; background:#f4f7fa; color:#52657c; }
td { padding:17px 20px; font-size:.8125rem; line-height:1.85; }
td > small { display:block; color:var(--muted); font-size:.7rem; margin-top:4px; }
td a { text-decoration:none; }
td a:hover { text-decoration:underline; }
td bdi { overflow-wrap:anywhere; }
.status { font-size:.75rem; padding:4px 12px; white-space:nowrap; }
.status[data-tone=Pending],.status[data-tone=Processing],.status[data-tone=Unknown],.status[data-tone=UnderReview] { background:#fff5de; color:#7a5408; }
.status[data-tone=Paid],.status[data-tone=Active] { background:#e8f4ed; color:#246344; }
.status[data-tone=Failed],.status[data-tone=Expired],.status[data-tone=Suspended] { background:#fceeed; color:#922d30; }
.empty-state { padding:40px 24px; font-size:.875rem; line-height:2; }
.loading { display:flex; align-items:center; gap:12px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:white; font-size:.875rem; }
.loading::before { content:''; width:18px; height:18px; flex:0 0 18px; border:2px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:workspace-spin 1s linear infinite; }
@keyframes workspace-spin { to { transform:rotate(360deg); } }
[role=alert] { background:#fff2f0; color:var(--error); border-color:var(--error); border-radius:10px; font-size:.875rem; }
.training-notice { font-size:.875rem; }
.training-tabs { gap:6px; padding:6px; background:#eaf0f6; border:0; border-radius:12px; }
.training-tabs button { font-size:.8125rem; flex:1 1 auto; }
.training-tabs button[aria-pressed=true] { background:white; color:var(--primary); box-shadow:0 2px 6px #1c3b5610; font-weight:700; }
.training-person,.training-group-card { box-shadow:0 3px 16px rgb(24 51 84 / 3%); }
.training-card-grid a:hover { border-color:#87b6cf; }
.training-facts { grid-template-columns:minmax(60px,auto) minmax(0,1fr); }
.training-facts dd { overflow-wrap:anywhere; }
.metric-card strong { font-size:2.15rem; }
.metric-card span { font-size:.8125rem; margin-bottom:10px; }
.record-count { font-size:.8125rem; color:var(--muted); margin:0; }
@media(min-width:721px) and (max-width:1100px) { .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
 .page-heading { gap:12px; padding-bottom:18px; }
 .page-heading > .primary-button { width:100%; }
 .form-card { padding:18px; }
 .training-toolbar { padding:16px; }
 .training-toolbar label { flex-basis:100%; min-width:0; }
 .training-toolbar > button { flex:1; }
 .section-heading { padding:16px; gap:8px; }
 th,td { padding:14px 16px; }
 .table-card table { min-width:560px; }
 .training-calendar-event { min-width:0; flex-basis:100%; }
 .training-actions > :is(a,button) { flex:1 1 auto; }
 .form-grid { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .loading::before { animation:none; } }
@media print { .training-toolbar,.training-tabs { display:none; } .table-card { overflow:visible; box-shadow:none; } .table-card table { min-width:0; } }
.integration-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; margin:20px 0; }
.integration-facts > div { padding:16px; background:var(--surface); border-radius:12px; }
.integration-facts dt { color:var(--text-secondary); font-size:.75rem; font-weight:400; margin-bottom:10px; }
.integration-facts dd { margin:0; font-weight:700; color:var(--primary-dark); }
.course-image-preview { display:block; width:100%; max-width:480px; aspect-ratio:16/9; object-fit:contain; background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:16px 0; }
.course-gallery-editor { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:20px; margin:16px 0; }
.course-publish-panel { padding:24px; margin-top:28px; background:var(--surface); border-radius:14px; }
.course-publish-panel p { font-size:.875rem; color:var(--text-secondary); }
.course-editor h3 { font-size:1rem; margin-block:20px 14px; }
@media(max-width:720px) { .course-gallery-editor { grid-template-columns:1fr; padding:16px; }.course-publish-panel { padding:16px; } }

.course-setup-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.5rem}
.course-setup-nav a{padding:.7rem 1rem;background:#eaf3f8;border:1px solid #cadce8;border-radius:12px;color:#135779;text-decoration:none;font-weight:700}
.course-availability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0}
.course-availability-grid article{padding:1.25rem;border:1px solid #d9e4ed;border-radius:16px;background:#f7fafc;min-width:0}
.course-availability-grid h3{font-size:1.08rem;margin:0 0 .75rem}.course-availability-grid p{font-size:.94rem;margin:.7rem 0;color:#526777}
.course-availability-grid a{display:block;margin-top:.7rem;text-underline-offset:4px}.course-availability-grid label{display:flex;align-items:center;gap:.65rem}
.course-readiness-result{padding:1rem 1.25rem;border-inline-start:4px solid #d8a441;background:#fff8e9;border-radius:10px;font-size:1.15rem;font-weight:700;color:#624612}
.course-readiness-next{padding:1rem 1.25rem;border:1px solid #e1e8ef;border-radius:12px}.course-readiness-next ul{margin:.65rem 0 1rem;padding-inline-start:1.3rem;line-height:1.9}
.course-preparation-drawer{margin-top:1.5rem;border:1px solid #d9e4ed;border-radius:16px;padding:1rem;background:#f8fafc}.course-preparation-drawer summary{cursor:pointer;font-weight:700;padding:.5rem}
#prepare-offering,#offering-prices,#course-publishing,#course-data,#course-images{scroll-margin-top:5rem}
@media(max-width:800px){.course-availability-grid{grid-template-columns:1fr}.course-setup-nav a{flex:1 1 40%;text-align:center}}

/* Compact, consistent result filters. Editing forms keep their own layout. */
.filter-toolbar,.training-toolbar:has(> label) { display:flex;align-items:flex-end;flex-wrap:nowrap;gap:12px;padding:16px 18px;margin-block:18px 22px;border-radius:14px; }
.filter-toolbar > label,.training-toolbar:has(> label) > label { display:grid;flex:1 1 0;min-width:0;gap:6px;margin:0;font-size:.8rem;font-weight:600;color:var(--ink); }
.filter-toolbar :is(input,select),.training-toolbar:has(> label) :is(input,select) { box-sizing:border-box;width:100%;min-width:0;min-height:44px;height:44px;padding:8px 10px;border-radius:8px;font-size:.8rem; }
.filter-toolbar > button,.training-toolbar:has(> label) > button { flex:0 0 auto;min-height:44px;margin:0;padding:8px 16px;white-space:nowrap; }
.filter-toolbar > p,.training-toolbar:has(> label) > p { margin:0;align-self:center;font-size:.75rem; }
.training-toolbar:has(> label) > label:has(input[type=checkbox]) { display:flex;flex:0 1 auto;align-items:center;min-height:44px; }
.training-toolbar:has(> label) input[type=checkbox] { width:20px;height:20px;min-height:20px; }
@media(max-width:1100px) { .filter-toolbar,.training-toolbar:has(> label) { flex-wrap:wrap; }.filter-toolbar > label,.training-toolbar:has(> label) > label { flex:1 1 calc(33.333% - 12px); } }
@media(max-width:720px) { .filter-toolbar,.training-toolbar:has(> label) { padding:14px;gap:12px; }.filter-toolbar > label,.training-toolbar:has(> label) > label { flex:1 1 calc(50% - 12px); }.filter-toolbar > button { flex:1 0 100%; } }
@media(max-width:440px) { .filter-toolbar > label,.training-toolbar:has(> label) > label { flex-basis:100%; }.filter-toolbar > p { width:100%; } }