/* Blade-only additions: the prototype used <button>s for things that are real links here. */
.pagination a,.pagination span.is-disabled{min-width:36px;height:36px;padding:0 8px;border-radius:999px;font-weight:var(--fw-semibold);color:var(--color-text);display:inline-flex;align-items:center;justify-content:center}
.pagination a:hover{background:var(--color-surface-muted)}
.pagination a[aria-current="page"]{background:var(--color-primary);color:#fff}
.pagination span.is-disabled{color:var(--color-text-disabled)}
.filter-chip a{display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
.filter-chip a:hover{background:rgba(1,61,233,.12)}
a.tab{text-decoration:none}
form.menu-form{display:contents}
.file-item.is-removed{opacity:.55}
.file-item.is-removed .file-item__name{text-decoration:line-through}
a.file-tile{color:inherit;text-decoration:none}
a.notif{color:inherit;text-decoration:none}
.badge-count[hidden],.dot[hidden],.menu-item[hidden],.btn[hidden]{display:none!important}
.toast[data-href]{cursor:pointer}
/* Live notification cards (Facebook-style): bottom-left, stacked, slide in, auto-hide */
.live-stack{position:fixed;z-index:110;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.live-card{pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;padding-inline-end:40px;background:var(--color-surface);color:var(--color-text);text-decoration:none;border:var(--border-default) solid var(--color-border);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.18),0 2px 6px rgba(16,24,40,.08);animation:live-in .32s cubic-bezier(.2,.9,.3,1.2) both;overflow:hidden}
.live-card:hover{border-color:var(--color-primary-50)}
.live-card .notif__icon{flex:none}
.live-card__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.live-card__title{font-weight:var(--fw-semibold)}
.live-card__body{color:var(--color-text-muted);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.live-card__time{font-size:var(--fs-caption);color:var(--color-primary-600);font-weight:var(--fw-semibold)}
.live-card__close{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--color-text-muted)}
.live-card__close:hover{background:var(--color-surface-muted);color:var(--color-text)}
.live-card__close .icon{width:16px;height:16px}
/* the time left before the card goes: a blue line that empties (paused while hovered / touched), over a light track */
.live-card::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--color-primary-25)}
.live-card__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--color-primary);border-radius:0 2px 2px 0;transform-origin:left;animation:live-bar linear forwards;z-index:1}
.live-card:has(.live-card__bar[hidden])::after{display:none}
.live-card:hover .live-card__bar{animation-play-state:paused}
.live-card.is-leaving{animation:live-out .25s ease-in forwards}
@keyframes live-in{from{opacity:0;transform:translateX(-24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes live-out{to{opacity:0;transform:translateX(-24px) scale(.96)}}
@keyframes live-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:767.98px){
  .live-stack{left:12px;right:12px;width:auto}
  body:has(.bottom-nav) .live-stack{bottom:calc(76px + 12px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.live-card,.live-card.is-leaving{animation:none}}
/* «فعّل الإشعارات» / «ثبّت التطبيق» banner */
.pwa-banner{position:fixed;z-index:105;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.18);animation:pwa-in .3s ease-out both}
.pwa-banner__icon{width:44px;height:44px;border-radius:10px;flex:none;border:var(--border-default) solid var(--color-border)}
.pwa-banner__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pwa-banner__title{font-weight:var(--fw-semibold)}
.pwa-banner__body{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--color-text-muted)}
.pwa-banner__actions{display:flex;gap:6px;flex:none}
@keyframes pwa-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:767.98px){
  .pwa-banner{flex-wrap:wrap}
  .pwa-banner__actions{width:100%;justify-content:flex-end}
  body:has(.bottom-nav) .pwa-banner{bottom:calc(76px + 12px + env(safe-area-inset-bottom,0px))}
}
.setting-row__control{width:200px;flex:none}
@media (max-width:767.98px){.setting-row--select{flex-wrap:wrap}.setting-row--select .setting-row__control{width:100%}}
.tone-text-success{color:var(--color-success)}.tone-text-error{color:var(--color-error)}.tone-text-warning{color:var(--color-secondary-800)}.tone-text-muted{color:var(--color-text-muted)}
/* Dropdowns: taps go to the control (our list), never to the native <select> — on iPhone that opens the system picker too */
.control--select > select{pointer-events:none}
/* Header buttons that don't fit next to the title go below it — on every screen (never squeezing the title to a letter a line) */
.page-header{flex-wrap:wrap}
.page-header__text{flex:1 1 220px}
.page-header__actions{flex-wrap:wrap;max-width:100%}
/* In-app viewer (images / videos / audio / PDFs) */
body.viewer-open{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:rgba(10,14,24,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:viewer-in .16s ease-out both}
.viewer__bar{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));color:#fff}
.viewer__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-semibold)}
.viewer__btn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);text-decoration:none}
.viewer__btn:hover{background:rgba(255,255,255,.24)}
.viewer__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.viewer__btn .icon{width:22px;height:22px}
.viewer__body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.viewer__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:#fff;transition:transform .2s ease}
.viewer__video{width:100%;max-width:1100px;max-height:100%;border-radius:8px;background:#000}
.viewer__pdf{width:min(1000px,100%);flex:1;border:0;border-radius:8px;background:#fff}
.viewer__audio{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;border-radius:16px;background:var(--color-surface);color:var(--color-text)}
.viewer__audio-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary-25);color:var(--color-primary-600)}
.viewer__audio-icon .icon{width:36px;height:36px}
.viewer__audio-name{font-weight:var(--fw-semibold);text-align:center;word-break:break-word}
.viewer__audio audio{width:100%}
.viewer__fail{color:#fff;text-align:center}
.viewer__fail a{color:#fff;text-decoration:underline}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.viewer{animation:none}}
/* Task finished: «أحسنت!» card, balloons and confetti (js/celebrate.js) */
.celebrate-confetti,.celebrate-sky{position:fixed;inset:0;z-index:240;pointer-events:none;overflow:hidden}
.celebrate-balloon{position:absolute;bottom:-140px;transform-origin:center bottom;animation:balloon-up var(--dur) cubic-bezier(.35,.1,.45,1) var(--delay) forwards;scale:var(--size)}
.celebrate-balloon svg{display:block;filter:drop-shadow(0 6px 10px rgba(16,24,40,.18))}
@keyframes balloon-up{0%{transform:translate(0,0) rotate(-4deg)}35%{transform:translate(var(--sway),-45vh) rotate(5deg)}70%{transform:translate(calc(var(--sway) * -.6),-90vh) rotate(-5deg)}100%{transform:translate(0,calc(-100vh - 180px)) rotate(3deg)}}
.celebrate-card{position:fixed;z-index:241;left:50%;top:38%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 20px;text-align:center;background:var(--color-surface);border-radius:20px;box-shadow:0 12px 32px rgba(16,24,40,.12);animation:celebrate-pop .5s cubic-bezier(.2,1.4,.4,1) both;cursor:pointer}
@media (min-width:1024px){.celebrate-card{width:460px;gap:10px;padding:40px 36px}} /* computers: a roomier card (same text sizes) */
.celebrate-card__emoji{font-size:52px;line-height:1;animation:celebrate-wiggle 1s ease-in-out .4s 2}
.celebrate-card__title{font-size:var(--fs-h3,20px);font-weight:var(--fw-bold);color:var(--color-text)}
.celebrate-card__sub{color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.celebrate-card.is-leaving{animation:celebrate-out .35s ease-in forwards}
@keyframes celebrate-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes celebrate-out{to{opacity:0;transform:translate(-50%,-60%) scale(.9)}}
@keyframes celebrate-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.1)}75%{transform:rotate(14deg) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.celebrate-card,.celebrate-card__emoji{animation:none}}
/* Accordions open / close on click on every screen size (js/app.js opens them on wide screens, closed on tablets and phones) */
@media (min-width:768px){
  .accordion summary{pointer-events:auto;cursor:pointer}
  .accordion summary .chev{display:inline-block}
  .accordion summary .show-mobile-inline{display:inline}
}
/* Settings → «هوية المنصة» */
.brand-logo-preview{display:flex;align-items:center;justify-content:center;width:240px;max-width:100%;aspect-ratio:1/1;padding:20px;box-sizing:border-box;border-radius:12px;background:var(--color-surface-muted);border:var(--border-default) dashed var(--color-border)} /* a square, the picture in its middle */
.brand-logo-preview img{height:56px;width:auto;max-width:100%;object-fit:contain}
.brand-mark-preview{width:64px;height:64px;color:var(--color-primary);display:grid;place-items:center} /* the icon alone — no shape behind it */
.brand-mark-preview img{width:100%;height:100%;object-fit:contain}
.brand-mark-preview .icon{width:32px;height:32px}
.sidebar__brand .logo-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.sidebar__brand .logo-mark:has(img){overflow:hidden}
/* Phones: the small logo at the start of the top bar */
@media (max-width:767.98px){
  .topbar__brand{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--color-primary-25);color:var(--color-primary);overflow:hidden}
  .topbar__brand img{width:100%;height:100%;object-fit:contain}
  .topbar__brand .icon{width:22px;height:22px}
}
/* Sign-in page previews: a slider, one screen size at a time, all at the same height (js/app.js sets --s) */
.device-slider{display:flex;flex-direction:column;align-items:center;gap:10px}
.device-slider__stage{display:flex;align-items:center;gap:10px;width:100%}
.device-slider__viewport{flex:1;min-width:0;display:flex;justify-content:center}
.device-slider__arrow{flex:none}
.device{margin:0;display:flex;justify-content:center}
.device[hidden]{display:none}
.device__screen{position:relative;overflow:hidden;width:calc(var(--w) * var(--s, .25) * 1px);height:calc(var(--h) * var(--s, .25) * 1px);border-radius:12px;border:6px solid #1d2939;background:#fff;box-sizing:content-box;box-shadow:0 8px 24px rgba(16,24,40,.12)}
.device__screen iframe{position:absolute;top:0;left:0;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);border:0;transform:scale(var(--s, .25));transform-origin:0 0;pointer-events:none}
.device-slider__caption{display:flex;gap:8px;align-items:center;font-size:var(--fs-body-sm)}
.device-slider__controls{display:flex;align-items:center;gap:14px}
.device-slider__dots{display:flex;gap:8px}
.device-slider__dot{width:8px;height:8px;border-radius:999px;background:var(--color-neutral-200,#d0d5dd);transition:width .2s,background .2s}
.device-slider__dot[aria-current="true"]{width:22px;background:var(--color-primary)}.brand-hero-preview{position:relative;overflow:hidden;height:260px;border-radius:12px;background:var(--color-primary);color:#fff;display:flex;align-items:flex-end}
.brand-hero-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.brand-hero-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,61,233,0) 0%,rgba(1,61,233,.77) 50%,var(--color-primary) 100%)}
.brand-hero-preview__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:20px}
.brand-hero-preview__headline{font-size:20px;line-height:1.4;font-weight:var(--fw-bold)}
.brand-hero-preview__lead{opacity:.9;font-size:var(--fs-body-sm)}
.brand-specs{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px;color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.brand-specs b{color:var(--color-text);font-weight:var(--fw-semibold)}
label.btn.is-active{background:var(--color-primary-25);color:var(--color-primary-600)}
/* Keyboard shortcuts (js/shortcuts.js) */
.kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:6px;border:var(--border-default) solid var(--color-border);border-bottom-width:1px;background:var(--color-surface-muted);font:600 13px/1 var(--font-family,inherit);color:var(--color-text);direction:ltr}
.kbd-list{display:flex;flex-direction:column}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;color:var(--color-text);text-decoration:none;border-bottom:var(--border-default) solid var(--color-border)}
.kbd-row:last-child{border-bottom:0}
a.kbd-row:hover{background:var(--color-surface-muted)}
.kbd-row--muted{color:var(--color-text-muted)}
/* Topbar: the bell in the primary colour, the shortcuts «?» in the secondary colour */
.topbar__actions [data-bell]{color:var(--color-primary)}
.topbar__actions .kbd-help-btn{color:var(--color-primary)}
@media (pointer:coarse){[data-kbd-help]{display:none!important}}
/* «تقرير اليوم» standalone page (reports/daily) */
.report{max-width:1200px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;gap:24px;background:var(--color-bg,transparent)}
.report__head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:var(--border-default) solid var(--color-border)}
.report__logo{height:48px;width:auto}
.report__title{font-size:var(--fs-page-title);line-height:var(--lh-page-title);font-weight:var(--fw-bold)}
.report__stats{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.report__foot{text-align:center;font-size:var(--fs-caption)}
.report__head{flex-wrap:wrap}
.report__tools{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.report__share{display:flex;flex-direction:column;gap:10px}
.report__share-row{display:flex;gap:8px;align-items:center}
.report__share-row .control{flex:1;min-width:0}
.report__share-row input{direction:ltr;text-align:left}
@media (max-width:767.98px){.report__tools{width:100%;margin-inline-start:0}.report__tools .btn{flex:1}}
/* «تنزيل PDF» = print → Save as PDF: the whole table on paper, no buttons */
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff}
  .no-print,.toast-region,.skip-link{display:none!important}
  .report{max-width:none;padding:0;gap:14px}
  .report__stats{grid-template-columns:repeat(6,1fr);gap:8px}
  .report .stat{padding:10px;box-shadow:none;break-inside:avoid}
  .report .table__scroll{overflow:visible}
  .report .table__scroll table{min-width:0}
  .report .table td,.report .table th{white-space:normal;position:static!important;box-shadow:none!important;padding:8px}
  .report .table tr{break-inside:avoid}
  .report .table{border-radius:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* «المساعد» side panel (js/assistant.js): left side on wide screens (the page makes room), full screen on phones */
.topbar__actions .ai-open-btn{color:var(--color-primary)}
.assistant{position:fixed;z-index:60;top:0;bottom:0;inset-inline-end:0;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--color-surface);border-inline-start:var(--border-default) solid var(--color-border);box-shadow:0 0 40px rgba(16,24,40,.12);transform:translateX(-100%);transition:transform .22s ease}
.assistant.is-open{transform:none}
[dir="ltr"] .assistant{transform:translateX(100%)}
.assistant__head{display:flex;align-items:center;gap:10px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));border-bottom:var(--border-default) solid var(--color-border)}
.assistant__logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7a5af8,var(--color-primary));flex:none}
.assistant__body{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--color-surface-muted)}
.assistant__foot{border-top:var(--border-default) solid var(--color-border);padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;background:var(--color-surface)}
.assistant__form{display:flex;gap:8px;align-items:center}
.assistant__form input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:999px;border:var(--border-default) solid var(--color-border);background:var(--color-surface-muted);outline:0;font:inherit}
.assistant__form input:focus{border-color:var(--color-focus);background:var(--color-surface)}
.ai-send{background:var(--color-primary);color:#fff}
/* «ملء من صورة» in the assistant: the week as read + the button to the preview */
.ai-tt{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ai-tt__scroll{overflow-x:auto;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.ai-tt table{border-collapse:collapse;font-size:var(--fs-caption);min-width:100%}
.ai-tt th,.ai-tt td{border:var(--border-default) solid var(--color-border);padding:5px 6px;text-align:center;white-space:nowrap}
.ai-tt thead th{background:var(--color-surface-muted);font-weight:var(--fw-semibold)}
.ai-tt thead th span{display:block;font-weight:var(--fw-regular);color:var(--color-text-muted)}
.ai-tt tbody th{background:var(--color-surface-muted)}
.ai-tt .ai-tt__break{background:var(--color-warning-bg,#fff7e6)}
.ai-tt__btn{width:100%;justify-content:center}
/* a picture waiting to go with the next question */
.ai-attached{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.ai-attached[hidden]{display:none}
.ai-attached span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-send:hover{filter:brightness(.92)}
.ai-send .icon{transform:scaleX(-1)} /* RTL: the arrow points the way the text goes (left) */
.ai-msg{display:flex}
.ai-msg--me{justify-content:flex-start}
.ai-msg--bot{justify-content:flex-end}
.ai-bubble{max-width:92%;padding:10px 14px;border-radius:16px;line-height:1.7;font-size:var(--fs-body-sm);display:flex;flex-direction:column;gap:8px}
.ai-msg--me .ai-bubble{background:var(--color-primary);color:#fff;border-start-start-radius:4px}
.ai-msg--bot .ai-bubble{background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-start-end-radius:4px;width:92%}
.ai-msg--bot.is-in .ai-bubble{animation:ai-in .25s ease-out}
@keyframes ai-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-bubble p{margin:0}
.ai-bubble ul,.ai-bubble ol{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px}
.ai-bubble strong{font-weight:var(--fw-bold)}
.ai-bubble code{font-size:.9em;background:var(--color-surface-muted);padding:0 4px;border-radius:4px}
.ai-tasklink{font-weight:var(--fw-semibold);color:var(--color-primary);text-decoration:none;direction:ltr;unicode-bidi:isolate}
.ai-note{font-size:var(--fs-caption);color:var(--color-secondary-800);background:var(--color-secondary-25);padding:6px 10px;border-radius:8px}
.ai-badge{display:inline-block;margin-inline-start:6px;padding:0 6px;border-radius:6px;font-size:10px;line-height:18px;color:#fff;background:linear-gradient(135deg,#7a5af8,var(--color-primary));vertical-align:middle}
/* «typing…»: three dots rising and falling one after another, a slow soft wave */
.ai-typing{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 2px}
.ai-typing i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#7a5af8,var(--color-primary));opacity:.35;animation:ai-wave 1.6s cubic-bezier(.45,0,.55,1) infinite}
.ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s}
@keyframes ai-wave{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}
.ai-num{display:inline-block;padding:0 8px;border-radius:999px;background:var(--color-primary-25);color:var(--color-primary-600)}
.ai-num--error{background:var(--color-error-bg);color:var(--color-error)}
.ai-num--success{background:var(--color-success-bg);color:var(--color-success)}
.ai-num--warning{background:var(--color-secondary-25);color:var(--color-secondary-800)}
.ai-list{display:flex;flex-direction:column;gap:6px}
.ai-task{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;background:var(--color-surface-muted);color:inherit;text-decoration:none}
.ai-task:hover{background:var(--color-primary-25)}
.ai-task__title{font-weight:var(--fw-semibold)}
.ai-task__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.ai-more{font-weight:var(--fw-semibold);color:var(--color-primary);text-decoration:none;font-size:var(--fs-caption)}
.ai-sub{font-weight:var(--fw-semibold);margin-top:4px!important}
.ai-groups{display:flex;flex-direction:column;gap:8px}
.ai-group{padding:8px 10px;border-radius:10px;background:var(--color-surface-muted)}
.ai-group__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-count{min-width:26px;height:22px;padding:0 8px;border-radius:999px;background:var(--color-surface);font-weight:var(--fw-bold);display:grid;place-items:center;font-size:var(--fs-caption)}
.ai-titles{margin:6px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:3px;font-size:var(--fs-caption)}
.ai-titles a{color:inherit;font-weight:var(--fw-medium)}
.ai-person{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 4px;border-radius:999px;font-weight:var(--fw-semibold);font-size:var(--fs-caption);background:var(--ai-bg);color:var(--ai-fg)}
.ai-person__dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ai-fg);color:#fff;font-size:11px}
.ai-c0{--ai-bg:#eef4ff;--ai-fg:#3538cd}.ai-c1{--ai-bg:#ecfdf3;--ai-fg:#067647}.ai-c2{--ai-bg:#fef6ee;--ai-fg:#b93815}.ai-c3{--ai-bg:#fdf2fa;--ai-fg:#c11574}
.ai-c4{--ai-bg:#f4f3ff;--ai-fg:#5925dc}.ai-c5{--ai-bg:#fffaeb;--ai-fg:#b54708}.ai-c6{--ai-bg:#ecfdff;--ai-fg:#0e7090}.ai-c7{--ai-bg:#fef3f2;--ai-fg:#b42318}
.ai-stats{display:flex;flex-wrap:wrap;gap:6px}
.ai-stat{padding:4px 10px;border-radius:999px;background:var(--color-surface-muted);font-size:var(--fs-caption)}
.ai-stat b{font-size:var(--fs-body-sm)}
.ai-stat--overdue{background:var(--color-error-bg);color:var(--color-error)}
.ai-stat--done{background:var(--color-success-bg);color:var(--color-success)}
.ai-stat--in_progress{background:var(--color-primary-25);color:var(--color-primary-600)}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chips--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.ai-chips--scroll::-webkit-scrollbar{display:none}
.ai-chip{flex:none;padding:6px 12px;border-radius:999px;border:var(--border-default) solid var(--color-border);background:var(--color-surface);font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-text);white-space:nowrap}
.ai-chip:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-10)}
.ai-picker{display:flex;flex-direction:column;gap:6px}
.ai-picker input{height:40px;padding:0 12px;border-radius:10px;border:var(--border-default) solid var(--color-border);font:inherit}
.ai-picker__list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto}
.ai-picker__item{display:flex;flex-direction:column;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--color-surface-muted);text-align:start;font-size:var(--fs-caption)}
.ai-picker__item:hover{background:var(--color-primary-25)}
/* Wide screens: a floating panel over the page, at the side — away from every edge, rounded like the cards; the page keeps its width */
@media (min-width:1024px){
  .assistant{top:16px;bottom:16px;inset-inline-end:16px;width:420px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 12px 40px rgba(16,24,40,.16);transform:translateX(calc(-100% - 32px))}
  [dir="ltr"] .assistant{transform:translateX(calc(100% + 32px))}
  .assistant.is-open{transform:none}
  body.assistant-open .live-stack{left:calc(420px + 40px)}
}
@media (max-width:1023.98px){.assistant{width:100vw;z-index:120}}
@media (prefers-reduced-motion:reduce){.assistant,.ai-msg--bot.is-in .ai-bubble{transition:none;animation:none}}
.results-loading{opacity:.55;transition:opacity .15s}
.stat__unit{font-size:14px;font-weight:var(--fw-bold)}

/* ---------- «التقارير اليومية» ---------- */
.segmented{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--color-surface-muted);border:var(--border-default) solid var(--color-border)}
.segmented__item{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;color:var(--color-text-muted);font-weight:var(--fw-medium);white-space:nowrap}
.segmented__item:hover{color:var(--color-text)}
.segmented__item[aria-selected="true"]{background:var(--color-surface);color:var(--color-primary);font-weight:var(--fw-semibold);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dr-period{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dr-period__label{font-size:var(--fs-caption)}
.dr-daynav{display:flex;align-items:center;gap:8px}
.dr-daynav__date{width:190px}
.dr-daynav .is-disabled{opacity:.4;pointer-events:none}
.dr-today{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.dr-today--done{border-color:color-mix(in srgb,var(--color-success) 35%,var(--color-border))}
.dr-today__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none}
.dr-today__icon .icon{width:24px;height:24px}
.dr-today__text{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.dr-row--missing td{background:color-mix(in srgb,var(--color-warning-bg) 45%,transparent)}
.dr-done{display:flex;flex-direction:column;gap:6px;min-width:110px}
.dr-done__num{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm)}
.dr-done__bar{height:6px}
.progress span.is-full{background:var(--color-success)}

/* Form */
.dr-summary__list{display:flex;flex-direction:column;gap:12px;margin:0}
.dr-summary__list>div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dr-summary__list dt{color:var(--color-text-muted)}
.dr-summary__list dd{margin:0;font-weight:var(--fw-semibold)}
.dr-summary__list .progress{height:8px;display:block}
.dr-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--color-border);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
@media (min-width:768px){.dr-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dr-meta__cell{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--color-surface)}
.dr-meta__label{font-size:var(--fs-caption);color:var(--color-text-muted)}
.dr-meta__value{font-weight:var(--fw-semibold)}
.dr-att{display:flex;flex-direction:column;gap:10px}
.dr-att+.dr-att{padding-top:16px;border-top:var(--border-default) solid var(--color-border)}
.dr-att__title{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-semibold);color:var(--color-primary)}
.dr-att__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:480px){.dr-att__grid{grid-template-columns:1fr 1fr}.dr-att__grid>.field:last-child{grid-column:1/-1}}
.dr-att__absent{display:flex;align-items:center;height:48px;padding:0 16px;border-radius:var(--radius-input);background:var(--color-surface-muted);font-weight:var(--fw-bold);font-size:var(--fs-body-md)}
.dr-att__absent.is-absent{color:var(--color-error)}
.dr-att__absent.is-bad{color:var(--color-error);font-size:var(--fs-caption);font-weight:var(--fw-medium)}
.dr-check-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dr-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dr-check{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background .15s,border-color .15s}
.dr-check:hover{background:var(--color-surface-muted)}
.dr-check input{position:absolute;opacity:0;pointer-events:none}
.dr-check__box{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--radius-sm);border:1px solid #c6c6c6;background:var(--color-surface);color:transparent}
.dr-check__box .icon{width:16px;height:16px}
.dr-check__num{min-width:22px;color:var(--color-text-muted);font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
.dr-check__label{flex:1;min-width:0}
.dr-check:has(input:checked){background:var(--color-success-bg);border-color:color-mix(in srgb,var(--color-success) 40%,var(--color-border))}
.dr-check:has(input:checked) .dr-check__box{background:var(--color-success);border-color:var(--color-success);color:#fff}
.dr-check:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.dr-challenges{display:flex;flex-direction:column;gap:12px}
.dr-challenge{display:flex;flex-direction:column;gap:8px;padding:14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted)}
.dr-challenge__head{display:flex;align-items:center;justify-content:space-between}
.dr-challenge .control{background:var(--color-surface)}

/* Templates */
.dr-templates{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}
@media (min-width:768px){.dr-templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.dr-templates{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dr-template__head{display:flex;align-items:center;gap:12px}
.dr-template__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none}
.dr-branch-picks{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:768px){.dr-branch-picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dr-branch-pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);cursor:pointer}
.dr-branch-pick:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-10)}

/* The report sheet (also what the PDF / image downloads show). Container queries: exported at desktop width from any screen */
.dr-sheet-wrap{min-width:0}
.dr-sheet{container-type:inline-size;max-width:960px;width:100%;margin:0 auto;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);padding:20px;display:flex;flex-direction:column;gap:20px;color:var(--color-text)}
.dr-sheet.is-exporting{width:900px;max-width:none;margin:0;border-radius:0;border:0;padding:32px}
.dr-sheet__head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--color-primary)}
.dr-sheet__logo{height:56px;width:auto;flex:none}
.dr-sheet__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dr-sheet__title h2{margin:0;font-size:var(--fs-h2);line-height:1.3;font-weight:var(--fw-bold);color:var(--color-primary)}
.dr-sheet__score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:110px;padding:8px 14px;border-radius:14px;background:var(--color-primary-25);color:var(--color-primary)}
.dr-sheet__score b{font-size:26px;line-height:1.1;font-weight:var(--fw-heavy)}
.dr-sheet__score span{font-size:var(--fs-caption);white-space:nowrap}
.dr-sheet__score.is-full{background:var(--color-success-bg);color:var(--color-success)}
.dr-meta--sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:640px){.dr-meta--sheet{grid-template-columns:repeat(5,minmax(0,1fr))}}
.dr-att-sheet{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:640px){.dr-att-sheet{grid-template-columns:1fr 1fr}}
.dr-att-sheet__group{display:flex;flex-direction:column;gap:10px;padding:14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md)}
.dr-att-sheet__title{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-semibold);color:var(--color-primary)}
.dr-att-sheet__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dr-att-sheet__nums>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--color-surface-muted)}
.dr-att-sheet__nums span{font-size:var(--fs-caption);color:var(--color-text-muted)}
.dr-att-sheet__nums b{font-size:22px;line-height:1.2;font-weight:var(--fw-bold)}
.dr-att-sheet__nums .is-present b{color:var(--color-success)}
.dr-att-sheet__nums .is-absent{background:var(--color-error-bg)}
.dr-att-sheet__nums .is-absent b{color:var(--color-error)}
.dr-sheet__section{display:flex;flex-direction:column;gap:10px}
.dr-sheet__h{margin:0;padding:10px 14px;border-radius:10px;background:var(--color-primary-25);color:var(--color-primary);font-size:var(--fs-body-md);font-weight:var(--fw-bold)}
.dr-sheet__table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.dr-sheet__table th{padding:10px 12px;text-align:start;background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--fs-caption);font-weight:var(--fw-semibold);border-bottom:var(--border-default) solid var(--color-border)}
.dr-sheet__table td{padding:10px 12px;border-bottom:var(--border-default) solid var(--color-border);vertical-align:top}
.dr-sheet__table .col-num{width:44px;white-space:nowrap;color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.dr-sheet__table .col-state{width:120px}
.dr-sheet__table tr.is-missed td{background:color-mix(in srgb,var(--color-error-bg) 55%,transparent)}
.dr-sheet__table .pre,.dr-comment .pre{white-space:pre-line}
.dr-state{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.dr-state .icon{width:15px;height:15px}
.dr-state--done{background:var(--color-success-bg);color:var(--color-success)}
.dr-state--missed{background:var(--color-error-bg);color:var(--color-error)}
.dr-sheet__none{margin:0;padding:12px 14px;border-radius:10px;background:var(--color-surface-muted);color:var(--color-text-muted)}
.dr-sheet__foot{padding-top:12px;border-top:var(--border-default) solid var(--color-border);text-align:center;color:var(--color-text-muted);font-size:var(--fs-caption)}

/* Replies */
.dr-comments,.dr-reactions{max-width:960px;width:100%;margin:0 auto}
.dr-comment{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:var(--border-default) solid var(--color-border)}
.dr-comment__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dr-comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.dr-comment p{margin:0}
.dr-comment-form{display:flex;flex-direction:column;gap:12px}
@media (max-width:1279.98px){.form-layout__guide.dr-guide{order:2}}
.dr-daynav__date input{text-align:right}
@media (max-width:767.98px){
  .page-header__actions:has(.dr-head-btn){width:100%}
  .dr-head-btn{flex:1 1 100%;justify-content:center}
  .dr-period{flex-direction:column;align-items:stretch}
  .dr-period .segmented{display:flex;width:100%}
  .dr-period .segmented__item{flex:1;justify-content:center;padding:0 8px}
  .dr-daynav{width:100%}
  .dr-daynav__date{flex:1;width:auto;min-width:0}
}
/* Sheet head on narrow screens: logo + score on top, the title under them (never squeezed) */
.dr-sheet__head{flex-wrap:wrap}
.dr-sheet__logo{max-width:45%;object-fit:contain}
.dr-sheet__title{flex:1 1 200px}
@container (max-width:560px){
  .dr-sheet__head{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo score" "title title";gap:12px}
  .dr-sheet__logo{grid-area:logo;height:44px;max-width:100%;justify-self:start}
  .dr-sheet__score{grid-area:score;min-width:0}
  .dr-sheet__score b{font-size:22px}
  .dr-sheet__title{grid-area:title}
  .dr-sheet__title h2{font-size:var(--fs-h3)}
}
@container (max-width:639.98px){.dr-meta--sheet .dr-meta__cell:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:767.98px){.dr-sheet:not(.is-exporting){padding:14px;gap:16px}}
@container (max-width:560px){
  .dr-sheet__table th,.dr-sheet__table td{padding:10px 6px}
  .dr-sheet__table .col-num{width:28px}
  .dr-sheet__table .col-state{width:1%}
  .dr-att-sheet__nums>div{padding:8px 10px}
}
/* Reports: the icon (small logo) centred on a soft tile */
.report-icon{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:18px;background:var(--color-primary-25)}
.report-icon img{width:44px;height:44px;object-fit:contain;display:block}
.dr-sheet__logo.report-icon{height:64px;max-width:none}
@container (max-width:560px){.dr-sheet__logo.report-icon{width:52px;height:52px;border-radius:14px}.dr-sheet__logo.report-icon img{width:36px;height:36px}}
/* Checklist state: a tick or a cross in a circle */
.dr-sheet__table .col-state{width:64px;text-align:center}
.dr-state{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%}
.dr-state .icon{width:16px;height:16px}
.dr-sheet__table tbody tr:last-child td{border-bottom:0}
.dr-comment{padding-bottom:0;border-bottom:0}
.report-icon img,.dr-sheet__logo.report-icon img{width:80%;height:80%}
/* Attachment «عرض» / «تحميل» buttons: pill with the default border, 32px high (hover unchanged) */
.btn.btn--file{height:32px;padding:0 12px;gap:6px;border-radius:var(--radius-full);border-color:var(--color-border)}
.btn.btn--file .icon{width:18px;height:18px}
/* Daily reports: period tabs = two stat cards wide, the day picker = the other two; date text + icon centred */
@media (min-width:768px){
  .dr-period{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-sm);align-items:center}
  .dr-period .segmented{grid-column:span 2;display:flex}
  .dr-period .segmented__item{flex:1;justify-content:center}
  .dr-daynav{grid-column:span 2}
  .dr-daynav__date{flex:1;width:auto;min-width:0}
  .dr-period__label{grid-column:1/-1}
}
@media (min-width:1280px){.dr-period{gap:var(--spacing-md)}}
.dr-daynav__date{justify-content:center}
.dr-daynav__date input{flex:0 1 auto;width:auto;min-width:0;text-align:center}
.dr-audience__people{display:none}
.dr-audience:has(input[value="custom"]:checked) .dr-audience__people{display:block}
@media (max-width:767.98px){.dr-audience__choices{grid-template-columns:1fr}}

/* «مساعد عبقري»: a soft gradient drifting behind the chat + the AI orb in the welcome.
   Decorative and slow, so it keeps moving even with «reduce motion» (just slower). */
.assistant__logo{border-radius:50%}
.assistant__body{
  background:
    radial-gradient(34% 30% at 50% 50%,rgba(122,90,248,.10),transparent 70%),
    radial-gradient(38% 34% at 50% 50%,rgba(1,61,233,.08),transparent 70%),
    radial-gradient(42% 36% at 50% 50%,rgba(34,211,238,.09),transparent 70%),
    var(--color-surface-muted);
  background-size:260% 260%,240% 240%,280% 280%,auto;
  background-position:20% 15%,85% 30%,50% 90%,0 0;
  animation:ai-drift 14s ease-in-out infinite alternate;
}
@keyframes ai-drift{
  0%{background-position:15% 10%,90% 25%,45% 95%,0 0}
  33%{background-position:70% 35%,25% 75%,85% 40%,0 0}
  66%{background-position:35% 85%,75% 10%,15% 30%,0 0}
  100%{background-position:90% 60%,10% 90%,60% 5%,0 0}
}
.ai-orb{--s:104px;position:relative;display:block;width:var(--s);height:var(--s);border-radius:50%;
  background:conic-gradient(from 0deg,#7a5af8,#013de9,#22d3ee,#a855f7,#ec4899,#7a5af8);
  animation:ai-spin 6s linear infinite;box-shadow:0 6px 18px rgba(122,90,248,.22),inset 0 0 14px rgba(255,255,255,.3)}
.ai-orb::before{content:"";position:absolute;inset:7%;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),rgba(255,255,255,0) 42%),radial-gradient(circle at 72% 78%,rgba(34,211,238,.55),transparent 55%),radial-gradient(circle at 60% 35%,rgba(236,72,153,.3),transparent 50%);
  filter:blur(3px);animation:ai-spin 9s linear infinite reverse}
.ai-orb::after{content:"";position:absolute;inset:-6%;border-radius:50%;background:inherit;filter:blur(14px);opacity:.22;z-index:-1}
.ai-orb-wrap{display:inline-block;animation:ai-breathe 4s ease-in-out infinite}
@keyframes ai-spin{to{transform:rotate(360deg)}}
@keyframes ai-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.ai-hero{margin:auto 0;padding:24px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.ai-hero .ai-orb-wrap{margin-bottom:14px}
.ai-hero__img-wrap{width:104px;height:104px;margin-bottom:14px;display:grid;place-items:center} /* «شكل المساعد»: a picture in the orb's place, same space */
.ai-hero__img{max-width:100%;max-height:100%;object-fit:contain}
.ai-hero__title{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.ai-hero__text{margin:0;max-width:320px;color:var(--color-text-muted);line-height:1.7}
.assistant.has-chat .ai-hero{display:none}
@media (prefers-reduced-motion:reduce){
  /* base.css cuts every animation to 0.01ms here; these slow, decorative ones keep their normal pace (Windows turns this on when «animation effects» are off) */
  .assistant .assistant__body{animation-duration:14s!important}
  .assistant .ai-orb{animation-duration:6s!important}.assistant .ai-orb::before{animation-duration:9s!important}.assistant .ai-orb-wrap{animation-duration:4s!important}
  .assistant .ai-typing i{animation-duration:1.6s!important}
}
/* «آخر الرسائل» (Settings → WhatsApp): one line per message on wide screens; on phones status · number · time on top, the text under them */
.wa-log{display:flex;flex-direction:column}
.wa-log__row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"status phone body time";align-items:center;gap:6px 12px;padding:10px 0;border-bottom:var(--border-default) solid var(--color-border);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.wa-log__row:last-child{border-bottom:0}
.wa-log__status{grid-area:status;white-space:nowrap}
.wa-log__phone{grid-area:phone;white-space:nowrap}
.wa-log__body{grid-area:body;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-log__time{grid-area:time;white-space:nowrap}
.wa-log__error{display:block;color:var(--color-error)}
@media (max-width:767.98px){
  .wa-log__row{grid-template-columns:auto 1fr auto;grid-template-areas:"status phone time" "body body body"}
  .wa-log__body{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* Phones: table ↔ cards switch (js/table-view.js) */
.view-toggle{display:none}
@media (max-width:767.98px){
  .view-toggle{display:flex;gap:4px;align-self:flex-end;margin-inline-start:auto;width:max-content;padding:3px;border-radius:var(--radius-full);background:var(--color-surface-muted);border:var(--border-default) solid var(--color-border)}
  .view-toggle button{display:grid;place-items:center;width:36px;height:32px;border-radius:var(--radius-full);color:var(--color-text-muted)}
  .view-toggle button[aria-pressed="true"]{background:var(--color-surface);color:var(--color-primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}

  /* Card view: each row is a card, each cell «column title … value» */
  .table.table--cards{background:none;border:0;border-radius:0;overflow:visible}
  .table--cards .table__scroll{overflow:visible}
  .table--cards table,.table--cards tbody{display:block;min-width:0!important}
  .table--cards thead,.table--cards caption{display:none}
  .table--cards tr{display:block;margin-bottom:10px;padding:6px 14px;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}
  .table--cards tr:last-child{margin-bottom:0}
  .table--cards td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0!important;border-top:var(--border-default) solid var(--color-border);white-space:normal!important;text-align:end;position:static!important;box-shadow:none!important;background:none!important;width:auto!important}
  .table--cards td::before{content:attr(data-label);flex:none;max-width:45%;color:var(--color-text-muted);font-size:var(--fs-caption);text-align:start}
  .table--cards td[data-label=""]::before{display:none}
  .table--cards td:first-child{display:block;border-top:0;text-align:start;padding-top:10px!important}
  .table--cards td:first-child::before{display:none}
  .table--cards td[data-label=""]{justify-content:flex-start;text-align:start}
  .table--cards .cell-title{min-width:0!important;max-width:none!important}
  .table--cards td>*{min-width:0}
  .table--cards td:empty{display:none}
}
@media (max-width:767.98px){.table--cards .tv-value{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 6px}.table--cards .dr-done{flex:0 1 160px}}
@media (max-width:767.98px){.view-toggle{width:100%;margin:0 0 var(--spacing-md);align-self:stretch}.view-toggle button{flex:1;width:auto;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:var(--fw-medium);font-size:var(--fs-body-sm)}.view-toggle button[aria-pressed="true"]{font-weight:var(--fw-semibold)}}
/* Phones: typing never zooms or shifts the page (no auto-zoom via the viewport meta in layouts/base; font sizes untouched) */
body{overflow-x:clip}
/* «سجل التحديثات» */
.cl{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:860px;width:100%}
.cl-day{display:flex;flex-direction:column;gap:12px}
.cl-day__title{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-body-md);font-weight:var(--fw-bold);color:var(--color-primary)}
.cl-day__list{display:flex;flex-direction:column;gap:12px;padding-inline-start:18px;border-inline-start:1px solid var(--color-primary-25)}
.cl-release{position:relative}
.cl-release::before{content:"";position:absolute;inset-inline-start:-26px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 4px var(--color-background)}
.cl-release__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cl-release__title{margin:0;font-size:var(--fs-body-md);font-weight:var(--fw-bold)}
.cl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cl-items li{display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.cl-tag{display:inline-flex;align-items:center;gap:4px;flex:none;height:24px;margin-top:2px;padding:0 10px 0 8px;border-radius:999px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.cl-tag .icon{width:14px;height:14px}
.cl-release__head .muted{white-space:nowrap}@media (max-width:767.98px){.cl-items li{flex-direction:column;gap:4px}.cl-items{gap:14px}.cl-day__list{padding-inline-start:14px}.cl-release::before{inset-inline-start:-22px}}
@media (max-width:767.98px){.table--cards tr{position:relative}.table--cards td.tv-actions{display:block}.table--cards td.tv-actions>.tv-value,.table--cards td.tv-actions>.cell-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px;width:100%}.table--cards td.tv-actions .btn{flex:1 1 120px;min-width:0;width:auto!important}.table--cards td.tv-actions>.btn{width:100%!important}.table--cards td.tv-actions--menu{position:absolute!important;top:6px;inset-inline-end:8px;border:0;padding:0!important;display:block}.table--cards tr:has(.tv-actions--menu) td:first-child{padding-inline-end:40px!important}}
@media (max-width:767.98px){.table--cards td.tv-actions .cell-actions>*,.table--cards td.tv-actions>.tv-value>*{flex:1 1 120px;min-width:0}.table--cards td.tv-actions form .btn{width:100%!important}}
.dr-check__box{border-radius:50%}
/* <textarea data-autogrow>: same look as a one-line field (control height and padding), grows line by line */
.control--textarea:has(textarea[data-autogrow]){border-radius:calc(var(--size-control) / 2);padding:0 18px;align-items:center}
.control textarea[data-autogrow]{min-height:0;resize:none;overflow:hidden;padding:10px 0;box-sizing:border-box}
/* Phones: the main actions under a page title fill the width — one = full width, two = side by side, more wrap two by two */
@media (max-width:767.98px){
  .page-header__actions{flex:1 1 100%;width:100%}
  /* only icon buttons (a ⋯ menu): they stay at the top, facing the title, instead of a row under it */
  .page-header:has(>.page-header__actions:not(:has(.btn,.dash-period-pick,.segmented))){flex-wrap:nowrap;align-items:flex-start}
  .page-header__actions:not(:has(.btn,.dash-period-pick,.segmented)){flex:none;width:auto;margin-top:var(--ph-icon-offset,0px)}
  .page-header:has(.page-header__text>.breadcrumb,.page-header__text>nav)>.page-header__actions:not(:has(.btn,.dash-period-pick,.segmented)){--ph-icon-offset:28px}
  .page-header__actions>*:not(.icon-btn){flex:1 1 calc(50% - var(--spacing-xs));min-width:0}
  .page-header__actions>* .btn,.page-header__actions>.btn{width:100%;justify-content:center}
  /* (counting the buttons only — not the «?» of «شرح هذه الصفحة») */
  .page-header__actions:has(>:nth-child(3 of :not(.page-help, .dash-period-pick, template)):nth-last-child(1 of :not(.page-help, .dash-period-pick, template)),>:nth-child(5 of :not(.page-help, .dash-period-pick, template)):nth-last-child(1 of :not(.page-help, .dash-period-pick, template)))>.btn--primary{flex-basis:100%;order:-1}
}
/* «مهامي الخاصة» */
.todo-add{display:flex;gap:8px;align-items:center}
.todo-add .control{flex:1;min-width:0}
.todo-progress{gap:10px}
.todo-progress__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.todo-progress__bar{height:8px}
.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.todo{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);transition:background .2s,border-color .2s,opacity .2s}
.todo__check-form{display:contents}
.todo__check{display:grid;place-items:center;width:26px;height:26px;margin-top:1px;flex:none;border-radius:50%;border:1px solid #c6c6c6;background:var(--color-surface);color:transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.todo__check .icon{width:16px;height:16px}
.todo__check:hover{border-color:var(--color-success)}
.todo__check:active{transform:scale(.9)}
.todo.is-done .todo__check{background:var(--color-success);border-color:var(--color-success);color:#fff}
.todo__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;color:inherit}
.todo__title{font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.todo__desc{color:var(--color-text-muted);font-size:var(--fs-caption);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.todo__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.todo__chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--fs-caption);white-space:nowrap}
.todo__chip .icon{width:14px;height:14px}
.todo__chip.is-late{background:var(--color-error-bg);color:var(--color-error)}
.todo.is-done{background:var(--color-surface-muted)}
.todo.is-done .todo__title{text-decoration:line-through;color:var(--color-text-muted)}
.todo.is-done .todo__meta,.todo.is-done .todo__desc{opacity:.7}
.todo-done summary{cursor:pointer}
@media (max-width:767.98px){.todo-add .btn{flex:none}}
/* «المكافآت والعقوبات» */
.rec-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rec-filters .control{flex:0 1 240px}
@media (max-width:767.98px){.rec-filters .control{flex:1 1 100%}}
.rec-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:1024px){.rec-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rec{gap:8px;color:inherit;border-inline-start:4px solid var(--color-border);transition:box-shadow .15s}
.rec:hover{box-shadow:0 4px 14px rgba(16,24,40,.06)}
.rec--reward{border-inline-start-color:var(--color-success)}
.rec--penalty{border-inline-start-color:var(--color-error)}
.rec__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rec__tag{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px 0 8px;border-radius:999px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);width:max-content}
.rec__tag .icon{width:15px;height:15px}
.rec__title{font-weight:var(--fw-bold);font-size:var(--fs-body-md)}
.rec__outcome{color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.rec-page{max-width:900px}
.rec-detail{gap:14px}
.rec-text{margin:0}
.rec-outcome{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px;background:var(--color-surface-muted)}
.rec-outcome p{margin:0;font-weight:var(--fw-semibold)}
.rec--reward .rec-outcome{background:var(--color-success-bg)}
.rec--penalty .rec-outcome{background:var(--color-error-bg)}
.control input[type=month]{position:relative;cursor:pointer}.control input[type=month]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
/* records: clearly different side colours, the platform's card hover, a badge in the details, centred month */
.rec--reward{border-inline-start-color:#12b76a}
.rec--penalty{border-inline-start-color:#f04438}
.rec:hover{box-shadow:none;background:#fafbff;border-color:var(--color-primary-50)}
.rec--reward:hover{border-inline-start-color:#12b76a}
.rec--penalty:hover{border-inline-start-color:#f04438}
.rec-badge{display:flex;align-items:center;gap:12px}
.rec-badge__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none}
.rec-badge__icon svg,.rec-badge__icon .icon{width:28px;height:28px}
.rec-badge__label{font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.rec-detail.is-reward .rec-badge__icon{background:#d1fadf;color:#039855}
.rec-detail.is-reward .rec-badge__label{color:#039855}
.rec-detail.is-penalty .rec-badge__icon{background:var(--color-error-bg);color:var(--color-error)}
.rec-detail.is-penalty .rec-badge__label{color:var(--color-error)}
.rec-detail.is-reward .rec-outcome{background:#ecfdf3}
.rec-detail.is-penalty .rec-outcome{background:var(--color-error-bg)}
.rec-month{justify-content:center}
.rec-month input{flex:0 1 auto;width:auto}
/* Date / month fields: Arabic label over the (transparent) native field — js/app.js initDateLabel */
.control--date{position:relative}
.control--date input[type=date],.control--date input[type=month],.control--date input[type=time],.control--date input[type=datetime-local]{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;cursor:pointer}
.date-label{flex:1;min-width:0;color:var(--color-text);font-size:var(--fs-body-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date-label.is-empty{color:var(--color-text-muted)}
.dr-daynav__date .date-label,.rec-month .date-label{flex:0 1 auto}

/* Phones: the send / save buttons under forms fill the width; two buttons sit side by side */
@media (max-width:767.98px){
  form:not(.todo-add):not(.global-search):not(.toolbar):not(.dr-daynav):not(.rec-filters):not(.assistant__form):not(.menu-form):not(.ann-ack) > .btn{width:100%;align-self:stretch!important;justify-content:center}
  form:not(.todo-add):not(.global-search):not(.toolbar):not(.dr-daynav):not(.rec-filters):not(.assistant__form):not(.menu-form) > .row > .btn{flex:1 1 50%;justify-content:center}
  .form-actions>*{flex:1 1 50%;min-width:0;box-sizing:border-box}
  .form-actions .btn,.form-actions__primary .btn{width:100%;justify-content:center}
  .form-actions__primary{display:flex}
}
/* «إعدادات الإشعارات»: where each event goes — the platform / WhatsApp / both */
.channel-list{display:flex;flex-direction:column}
.channel-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:var(--border-default) solid var(--color-border)}
.channel-row:last-child{border-bottom:0}
.channel-pick{display:inline-flex;gap:4px;padding:3px;border-radius:var(--radius-full);background:var(--color-surface-muted);border:var(--border-default) solid var(--color-border);flex:none}
.channel-pick label{position:relative;cursor:pointer}
.channel-pick input{position:absolute;opacity:0;pointer-events:none}
.channel-pick span{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--radius-full);color:var(--color-text-muted);font-weight:var(--fw-medium);white-space:nowrap}
.channel-pick input:checked+span{background:var(--color-surface);color:var(--color-primary);font-weight:var(--fw-semibold);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.channel-pick input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:1px}
@media (max-width:767.98px){.channel-row{flex-direction:column;align-items:stretch}.channel-pick{display:flex}.channel-pick label{flex:1}.channel-pick span{justify-content:center;width:100%;padding:0 6px}}
.channel-radios{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;flex:none}
@media (max-width:767.98px){.channel-radios{flex:1 1 auto}}

/* Sidebar sign-out: brand-coloured icon in a white 32px circle (the size the user asked for) */
.sidebar__user .sidebar__logout{width:32px;height:32px;border-radius:50%;background:var(--color-surface);color:var(--color-primary)}
.sidebar__user .sidebar__logout:hover{background:var(--color-primary-25)}

/* Settings → «عام» → weekly days off: the text, then the seven days under it */
.setting-row--days{flex-wrap:wrap}
.setting-row--days .setting-row__text{flex:1 1 100%}
.weekday-picks{display:flex;flex-wrap:wrap;gap:12px 20px}
.setting-row--days .field__error{flex:1 1 100%}

/* ---------- «الجدول الدراسي» (timetable/index) ---------- */
.tt-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-md);align-items:end}
@media (max-width:767.98px){.tt-filters{grid-template-columns:1fr;gap:var(--spacing-sm)}}
.tt-filter__row{display:flex;align-items:center;gap:8px}
.tt-filter__row .control{flex:1 1 auto;min-width:0}
.tt-empty-action{display:flex;justify-content:center;padding-bottom:8px}
.tt-hint--touch{display:none}
@media (pointer:coarse){.tt-hint{display:none}.tt-hint--touch{display:inline}}
/* subjects of the class */
.tt-subjects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.tt-subject{display:flex;align-items:center;gap:12px;padding:12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}
.tt-subject__count{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:end}
.tt-swatch{width:10px;align-self:stretch;border-radius:var(--radius-full);flex:none}
.tt-over{color:var(--color-warning);font-weight:var(--fw-semibold)}
/* subject colours: the platform's soft tints */
/* the week: days down the side (sticky), periods across the top */
.tt-wrap{overflow-x:auto;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-table);-webkit-overflow-scrolling:touch}
.tt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:calc(110px + var(--tt-periods, 7) * 128px)}
.tt-table th,.tt-table td{border-bottom:var(--border-default) solid var(--color-border);border-inline-start:var(--border-default) solid var(--color-border)}
.tt-table tr > :first-child{border-inline-start:0}
.tt-table tbody tr:last-child > *{border-bottom:0}
.tt-table thead th{height:52px;padding:0 8px;background:var(--color-surface-muted);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--color-text-muted);text-align:center;white-space:nowrap}
.tt-table .tt-corner,.tt-table .tt-day{width:110px} /* not frozen: the whole week scrolls sideways */
.tt-table .tt-corner{z-index:2}
.tt-table .tt-day{background:var(--color-surface);font-weight:var(--fw-semibold);text-align:start;padding:0 12px;box-shadow:-1px 0 0 var(--color-border)}
.tt-cell{padding:6px;height:76px;vertical-align:middle;background:var(--color-surface);transition:background var(--transition-fast)}
.tt-cell.is-over{background:var(--color-primary-10);box-shadow:inset 0 0 0 1px var(--color-primary)}
.tt-cell.is-saving{opacity:.6;pointer-events:none}
.tt-slot{display:flex;flex-direction:column;justify-content:center;gap:2px;height:100%;min-height:62px;padding:8px 10px;border-radius:var(--radius-md);color:var(--color-text);text-decoration:none;overflow:hidden}
a.tt-slot{cursor:grab}
a.tt-slot:hover{box-shadow:inset 0 0 0 1px var(--color-primary)}
a.tt-slot:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.tt-slot.is-dragging{opacity:.4}
/* dragging onto another period: it waits with a dashed edge and a «⇄ تبديل» badge — on drop the two cross over */
.tt-cell.is-over:has(.tt-slot:not(.is-dragging)){position:relative}
.tt-cell.is-over:has(.tt-slot:not(.is-dragging)) .tt-slot:not(.is-dragging){box-shadow:inset 0 0 0 1px var(--color-primary);outline:1px dashed var(--color-primary);outline-offset:2px;animation:tt-wait .45s ease-in-out infinite alternate}
.tt-cell.is-over:has(.tt-slot:not(.is-dragging))::after{content:"⇄ تبديل";position:absolute;top:2px;inset-inline-start:50%;transform:translateX(50%);padding:0 8px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-semibold);white-space:nowrap;pointer-events:none;z-index:4}
.tt-slot.is-swapping{position:relative;z-index:3;opacity:1;transition:transform .34s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 20px rgba(16,24,40,.18)}
@keyframes tt-wait{from{transform:rotate(-1deg)}to{transform:rotate(1deg)}}
/* «توزيع عشوائي»: the periods shake while it works, then land one after another */
[data-tt-grid].is-shuffling .tt-slot{animation:tt-wait .18s ease-in-out infinite alternate}
[data-tt-grid].is-shuffled .tt-slot{animation:tt-land .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes tt-land{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
/* reduced motion: no shaking, but the swap crossing and the landing stay (short, and how the change is seen — base.css would cut them) */
@media (prefers-reduced-motion:reduce){.tt-cell.is-over .tt-slot,[data-tt-grid].is-shuffling .tt-slot{animation:none}.tt-slot.is-swapping{transition-duration:.34s!important}[data-tt-grid].is-shuffled .tt-slot{animation-duration:.4s!important}}
.tt-slot__subject{font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-slot__teacher{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-add{display:flex;align-items:center;justify-content:center;gap:4px;height:100%;min-height:62px;border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--fs-caption);text-decoration:none;opacity:0;transition:opacity var(--transition-fast)}
.tt-cell:hover .tt-add,.tt-add:focus-visible{opacity:1;color:var(--color-primary);border-color:var(--color-primary-50)}
.tt-add{gap:6px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium)} /* «إضافة» in an empty cell (timetable / supervision): 14px, a bigger icon, a clearer hover */
.tt-add .icon{width:20px;height:20px}
.tt-cell:hover .tt-add,.tt-add:focus-visible{background:var(--color-primary-25);border-color:var(--color-primary)}
@media (pointer:coarse){.tt-add{opacity:1}}
.tt-empty{display:block;text-align:center;color:var(--color-text-disabled)}

/* Chips (.tag) are fully rounded across the platform (shape only — same height and text) */
.tag{border-radius:var(--radius-full)}

/* Timetable header: «الحصة 1» with its time under it */
.tt-table thead th{height:auto;min-height:52px;padding:8px}
.tt-period{display:block}
.tt-time{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-regular);color:var(--color-text-muted)}

/* «جدولي الدراسي»: a day's periods as a list */
.my-tt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.my-tt__row{display:flex;align-items:center;gap:12px;padding:12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}
.my-tt__row.is-now{border-color:var(--color-success)}
.my-tt__when{display:flex;flex-direction:column;gap:2px;min-width:104px;flex:none}

/* «الإعدادات المدرسية» → «مواعيد الحصص» */
.ss-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ss-time{display:flex;flex-direction:column;gap:8px;padding:12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}
.ss-time.has-error{border-color:var(--color-error)}
.ss-time__fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Tablet rail (768–1279px) = the phone bar: the same fixed items + «المزيد»; everything else in «المزيد» */
.sidebar .nav-item--rail-only{display:none}
@media (min-width:768px) and (max-width:1279.98px){
  .sidebar .nav-item--desk-only{display:none}
  .sidebar .nav-item--rail-only{display:flex}
}

/* Tab counts in parentheses everywhere: «المواد الدراسية (4)» */

/* «احتياط»: a substitute teaches this period this week */
.tt-slot{position:relative}
.tt-sub{align-self:flex-start;margin-bottom:2px} /* above the subject name */
.tt-slot:has(.tt-sub){height:auto}
.tt-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.tt-sub-row{padding:8px 12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}

/* Timetable export: the whole grid at its natural width, without the «+ إضافة حصة» placeholders and hints */
.tt-export{margin-bottom:12px}
.tt-import-new{color:var(--color-primary)} /* «ملء من صورة»: a subject not in «المواد الدراسية» yet */
.tt-import-pick{display:grid;grid-template-columns:repeat(2,minmax(200px,260px));gap:8px} /* the subject and its teacher side by side */
@media (max-width:767.98px){.tt-import-pick{grid-template-columns:1fr;width:100%}}
/* the class's tools: groups side by side with a thin line between them; phones: one group per row, its buttons share it */
.tt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tt-actions__group{display:flex;flex-wrap:wrap;gap:8px}
.tt-actions__group+.tt-actions__group{padding-inline-start:8px;border-inline-start:1px solid var(--color-border)}
@media (max-width:767.98px){
  .tt-actions{flex-direction:column;align-items:stretch}
  .tt-actions__group+.tt-actions__group{padding-inline-start:0;border-inline-start:0}
  .tt-actions__group>.btn{flex:1 1 0;min-width:0;justify-content:center}
}
.tt-card.is-exporting{max-width:none;margin:0}
.tt-card.is-exporting .tt-wrap{overflow:visible}
.tt-card.is-exporting .tt-add,.tt-card.is-exporting .tt-hint,.tt-card.is-exporting .tt-hint--touch,.tt-card.is-exporting .card__head a{visibility:hidden}

/* Phones: any row inside a page that holds only buttons (e.g. «تحميل PDF / حفظ كصورة») spans the width —
   one button full width, two side by side, more wrap two per row. Icon-only buttons (⋯) are .icon-btn and stay as they are. */
@media (max-width:767.98px){
  .page-body .row:not(:has(> :not(.btn))) {width:100%;flex-wrap:wrap}
  .page-body .row:not(:has(> :not(.btn))) > .btn{flex:1 1 calc(50% - var(--spacing-xs));min-width:0;justify-content:center}
  .page-body .card__head:has(> .btn){flex-wrap:wrap}
  .page-body .card__head > .btn{flex:1 1 100%;justify-content:center}
}

/* Settings tabs as accordions: setting rows sit flush inside, a sub-part is separated by a line */
.accordion .setting-row{padding-inline:0}
.accordion .setting-row:first-child{padding-top:4px}
.setting-sub{border-top:var(--border-default) solid var(--color-border);padding-top:16px}

/* Card view (phones): several icon actions → one «⋯» (js/table-view.js); in table view the icons stay */
.tv-kebab{display:none}
@media (max-width:767.98px){
  .table--cards td.tv-actions--kebab .tv-kebab{display:inline-flex}
  .table--cards td.tv-actions--kebab .icon-btn:not(.tv-kebab){display:none}
  /* the label of each card row is as large as its value */
  .table--cards td::before{font-size:inherit;line-height:inherit}
}

/* Phones: buttons inside their own little forms (e.g. «فحص الاتصال الآن», confirm forms) span the width like plain buttons */
@media (max-width:767.98px){
  .page-body .row:not(:has(> :not(.btn, form))){width:100%;flex-wrap:wrap}
  .page-body .row:not(:has(> :not(.btn, form))) > form{flex:1 1 calc(50% - var(--spacing-xs));min-width:0}
  .page-body .row:not(:has(> :not(.btn, form))) > form > .btn{width:100%;justify-content:center}
}
/* Phones: a text + button row (e.g. «إرسال رسالة تجريبية»): the button drops under the text at full width */
@media (max-width:767.98px){
  .page-body .row.wrap:has(> :not(.btn, form)) > .btn{flex:1 1 100%;justify-content:center}
}
/* (a confirm form is display:contents — its button is a flex item of the row itself, so it shares the row like its neighbours) */
@media (max-width:767.98px){
  .page-body .row:not(:has(> :not(.btn, form))) > form.menu-form > .btn,
  .page-body .row:not(:has(> :not(.btn, form))) > .btn{flex:1 1 calc(50% - var(--spacing-xs));width:auto;min-width:0;justify-content:center}
}
/* Phones: buttons that don't fit side by side stack, each full width (js/app.js stackTight) */
@media (max-width:767.98px){
  .page-body .row.btn-stack > .btn,
  .page-body .row.btn-stack > form,
  .page-body .row.btn-stack > form.menu-form > .btn{flex:1 1 100%!important;width:100%}
}
/* A public holiday this week: «عطلة» under the day name */
.tt-holiday{display:flex;width:max-content;margin-top:4px}
/* «العطلات الرسمية»: past holidays fade */
.my-tt__row.is-past{opacity:.6}
.phone-cc img.flag{object-fit:cover}
/* Settings → «الدولة والتقويم»: flags in the country list and the chosen country's dial code */
.select-option__flag{width:22px;height:15px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 var(--border-default) var(--color-border)}
.country-preview{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-card);background:var(--color-surface-muted)}
.country-preview__flag{width:36px;height:24px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 var(--border-default) var(--color-border)}

/* Dropdowns: «إضافة جديد» after a line under the last choice (or alone when there are none) */
.select-sep{height:var(--border-default);margin:6px 4px;background:var(--color-border)}
.select-empty{padding:10px 12px;color:var(--color-text-muted);font-size:var(--fs-caption)}
.select-add{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;border-radius:var(--radius-md);color:var(--color-primary);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);text-decoration:none}
.select-add:hover,.select-add:focus-visible{background:var(--color-primary-10)}

/* Home: today is a day off — a warm banner (weekly day off: brand blue; public holiday: festive) */
.holiday-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--radius-card);color:#fff;
  background:linear-gradient(120deg,var(--color-primary) 0%,var(--color-primary-600) 55%,var(--color-primary-700) 100%)}
.holiday-banner--official{background:linear-gradient(120deg,#0f8a5f 0%,#12b76a 50%,#e8a317 100%)}
.holiday-banner::after{content:"";position:absolute;inset-inline-start:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.holiday-banner__art{font-size:44px;line-height:1;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.holiday-banner__text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.holiday-banner__kicker{font-size:var(--fs-caption);opacity:.9}
.holiday-banner__title{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-bold);color:#fff}
.holiday-banner__msg{margin:0;opacity:.95}
.holiday-banner__link{display:inline-flex;align-items:center;gap:4px;flex:none;color:#fff;font-weight:var(--fw-semibold);text-decoration:none;padding:8px 14px;border-radius:var(--radius-full);background:rgba(255,255,255,.16)}
.holiday-banner__link:hover{background:rgba(255,255,255,.26)}
@media (max-width:767.98px){.holiday-banner{flex-wrap:wrap;padding:18px}.holiday-banner__link{flex:1 1 100%;justify-content:center}}

/* Timetable export sheet (same design as the daily report sheet); kept off screen, captured by js/timetable.js */
.tt-sheet-holder{position:fixed;top:0;inset-inline-start:-30000px;pointer-events:none}
.tt-sheet{width:var(--tt-sheet-w,900px);max-width:none;margin:0;border-radius:0;border:0;padding:32px;display:flex;flex-direction:column;gap:16px}
.tt-sheet__table{width:100%;border-collapse:collapse;table-layout:fixed}
.tt-sheet__table th,.tt-sheet__table td{border:var(--border-default) solid var(--color-border);padding:8px;text-align:center;vertical-align:middle}
.tt-sheet__table thead th{background:var(--color-surface-muted);font-weight:var(--fw-semibold)}
.tt-sheet__corner,.tt-sheet__day{width:110px}
.tt-sheet__day{background:var(--color-surface-muted);font-weight:var(--fw-semibold)}
.tt-sheet__time{display:block;font-size:var(--fs-caption);font-weight:var(--fw-regular);color:var(--color-text-muted)}
.tt-sheet__cell{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:var(--radius-md)}
.tt-sheet__cell span{font-size:var(--fs-caption);color:var(--color-text-muted)}
.tt-sheet__empty{color:var(--color-text-disabled)}
.tt-sheet__off{display:block;padding:8px;border-radius:var(--radius-md);background:var(--color-neutral-100);color:var(--color-text-disabled)} /* a shared teacher week: not one of their periods */

/* «الحصص الجارية الآن»: the running period glows and pulses; past ones fade (animations stay on even with reduced motion, like the assistant) */
.now-table .now-grade th{background:var(--color-surface-muted);text-align:start;padding:10px 12px;font-weight:var(--fw-bold);color:var(--color-primary)}
.now-state{display:block;font-weight:var(--fw-regular);margin-top:2px}
.now-badge{display:none;align-self:flex-start;align-items:center;gap:4px;margin-bottom:2px;padding:0 8px;height:20px;border-radius:var(--radius-full);background:var(--color-success);color:#fff;font-size:var(--fs-micro, 11px);font-weight:var(--fw-semibold)}
.now-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:now-blink 1.2s ease-in-out infinite!important}
.now-cell.is-now .now-badge{display:inline-flex}
.now-cell.is-now .tt-slot{box-shadow:0 0 0 1px var(--color-success);animation:now-pulse 2s ease-in-out infinite!important}
.now-cell.is-now{background:var(--color-success-bg)}
.now-cell.is-past .tt-slot{opacity:.35;filter:grayscale(1)} /* over: grey */
.now-cell.is-future .tt-slot{opacity:.55} /* not started yet: faint, still in its colour */
.now-legend{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.now-legend span{display:inline-flex;align-items:center;gap:6px}
.now-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;background:hsl(215 88% 86%);border:1px solid hsl(215 68% 42%)} /* a period in its colour */
.now-legend .is-now i{background:var(--color-success-bg);box-shadow:0 0 0 1px var(--color-success)}
.now-legend .is-future i{opacity:.55}
.now-legend .is-past i{opacity:.35;filter:grayscale(1)}
.now-dot{display:inline-block;width:10px;height:10px;margin-inline-end:8px;border-radius:50%;background:var(--color-success);animation:now-blink 1.2s ease-in-out infinite!important;vertical-align:middle}
.now-clock{margin-inline-start:6px;color:var(--color-text-muted);font-weight:var(--fw-regular)}
@keyframes now-pulse{0%,100%{box-shadow:0 0 0 1px var(--color-success),0 0 0 0 rgba(18,183,106,.45)}50%{box-shadow:0 0 0 1px var(--color-success),0 0 0 8px rgba(18,183,106,0)}}
@keyframes now-blink{0%,100%{opacity:1}50%{opacity:.25}}
/* the timetable sheet keeps every border (the daily-report table drops the last row's) and has 4 info cells */
.tt-sheet .tt-sheet__table tbody tr:last-child > *{border-bottom:var(--border-default) solid var(--color-border)}
.tt-sheet .dr-meta--sheet{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Home: today's weather (js/weather.js) */
.weather{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:12px 16px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}
.weather[hidden]{display:none}
.weather__emoji{font-size:34px;line-height:1}
.weather__main{display:flex;flex-direction:column;line-height:1.2}
.weather__temp{font-size:var(--fs-h2);font-weight:var(--fw-bold)}
.weather__label{font-weight:var(--fw-semibold)}
.weather__meta{flex:1 1 220px;min-width:0}
.weather__chips{display:flex;flex-wrap:wrap;gap:6px}
.weather__locate{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--color-primary);font:inherit;font-size:var(--fs-caption);cursor:pointer}
/* simple weather: icon, temperature, conditions only */
.weather--simple .weather__meta,.weather--simple .weather__chips,.weather--simple .weather__locate{display:none!important}
.weather--simple .weather__main{flex-direction:row;align-items:baseline;gap:8px}
/* the temperature changed: a short soft highlight */
.weather__temp.is-changed{animation:weather-flash 1.6s ease!important}
@keyframes weather-flash{0%{color:var(--color-primary);transform:scale(1.12)}100%{color:inherit;transform:none}}

/* Pull to refresh (phones / tablets, js/pull-refresh.js): the browser's own pull is off so it doesn't refresh twice */
html.has-pull-refresh,html.has-pull-refresh body{overscroll-behavior-y:contain}
.pull-refresh{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;z-index:90;transform:translate(-50%,-60px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.pull-refresh.is-pulling{transition:none}
.pull-refresh__ball{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-surface);color:var(--color-text-muted);box-shadow:0 4px 14px rgba(0,0,0,.14)}
.pull-refresh.is-ready .pull-refresh__ball,.pull-refresh.is-refreshing .pull-refresh__ball{color:var(--color-primary)}
.pull-refresh.is-refreshing .pull-refresh__ball svg{animation:pull-spin .8s linear infinite!important}
@keyframes pull-spin{to{transform:rotate(360deg)}}
/* Reports: the band on top — platform icon + school name, and facing them the education ministry's name + logo (x-report-brand) */
.report-brand{display:flex;align-items:center;justify-content:space-between;gap:16px}
.report-brand__side{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0}
.report-brand__side--ministry{justify-content:flex-end;text-align:end}
.report-brand__name{font-weight:var(--fw-bold);color:var(--color-text);line-height:1.4}
.report-brand__ministry{height:64px;width:auto;max-width:200px;object-fit:contain;flex:none;display:block}
@container (max-width:560px){
  .report-brand__icon.report-icon{width:52px;height:52px;border-radius:14px}
  .report-brand__ministry{height:52px;max-width:140px}
}
@media (max-width:767.98px){.report>.report-brand .report-brand__icon.report-icon{width:52px;height:52px;border-radius:14px}.report>.report-brand .report-brand__ministry{height:52px;max-width:140px}}
/* The sheet head no longer carries the icon (it moved to the band): on narrow sheets the title sits beside the score */
@container (max-width:560px){.dr-sheet__head{grid-template-areas:"title score"}}
.ministry-preview{display:grid;place-items:center;min-width:64px;height:64px;color:var(--color-text-muted)}
.ministry-preview img{height:64px;width:auto;max-width:220px;object-fit:contain}
.ministry-preview .icon{width:32px;height:32px}
/* Dropdown options with a short description under the name (option[data-desc]) */
.select-option__desc{display:block;margin-top:2px;font-size:var(--fs-caption);font-weight:var(--fw-regular,400);color:var(--color-text-muted);white-space:normal;line-height:1.5}
/* Settings → «أنواع الخدمات» */
.svc-kinds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.svc-kinds__row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:var(--border-default) solid var(--color-border)}
.svc-kinds__row:last-child{border-bottom:0}
.svc-kinds__row.is-off .fw-semibold{color:var(--color-text-muted)}
/* Timetable «الفترات» (حصة تغذية…): a narrow column across every day, no subject or teacher */
.tt-table{min-width:calc(110px + var(--tt-periods, 7) * 128px + var(--tt-breaks, 0) * 76px)}
.tt-table .tt-break-head{width:76px;white-space:normal;background:var(--color-warning-bg, #fff7e6);color:var(--color-text)}
.tt-break{width:76px;padding:8px 4px;text-align:center;vertical-align:middle;background:var(--color-warning-bg, #fff7e6);font-weight:var(--fw-semibold);color:var(--color-text)}
.tt-break span{writing-mode:vertical-rl;display:inline-block;line-height:1.4}
.tt-sheet__break-head{width:90px;background:var(--color-warning-bg, #fff7e6)!important}
.tt-sheet__break{background:var(--color-warning-bg, #fff7e6);font-weight:var(--fw-semibold)}
/* «مواعيد الحصص» → «الفترات» */
.ss-break__fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* «مواعيد الحصص»: copy a grade's times from another branch */
.ss-copy{display:flex;flex-direction:column;gap:12px}
.ss-copy__controls{display:flex;align-items:flex-start;gap:8px;width:100%;max-width:480px}
.ss-copy__controls .field{flex:1 1 auto;min-width:0}
@media (max-width:767.98px){.ss-copy__controls{flex-direction:column;align-items:stretch;max-width:none}.ss-copy__controls .field{flex:none}.ss-copy__controls .btn{width:100%;justify-content:center}}
/* «حصة مزدوجة»: one wide cell over two periods */
.tt-cell--double .tt-slot{width:100%}
/* «مواعيد الحصص»: the day picker (a dot = the day has its own times) */
.ss-days .segmented{display:flex;flex-wrap:wrap;max-width:100%;border-radius:12px}
@media (max-width:767.98px){.ss-days .segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.ss-days .segmented__item{justify-content:center;padding:0 8px}}
.ss-days__dot{display:inline-block;width:7px;height:7px;margin-inline-start:6px;border-radius:50%;background:var(--color-primary);vertical-align:middle}
/* «الأنشطة المدرسية» in the timetable: one cell over the periods an approved activity takes (that week only) */
.tt-cell--act{background:var(--color-surface)}
.tt-act{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;height:100%;min-height:64px;padding:8px 10px;border-radius:var(--radius-md);background:var(--color-warning-bg);border:var(--border-default) dashed color-mix(in srgb,var(--color-warning) 45%,transparent)}
.tt-sheet__act{background:var(--color-warning-bg)}
/* «الأنشطة المدرسية» list */
.act-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.act__head{display:flex;align-items:flex-start;gap:12px}
.act__date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;height:56px;border-radius:14px;background:var(--color-primary-25);color:var(--color-primary);flex:none}
.act__date b{font-size:20px;line-height:1.1}
.act__date span{font-size:var(--fs-caption)}
/* Timetable subject colours: 12 distinct hues (light fill + a strong edge in the same hue). Amber = activities, grey = breaks — never a subject */
.tt-c0{--tt-accent:hsl(215 68% 42%);background:hsl(215 88% 93%)}
.tt-c1{--tt-accent:hsl(140 68% 42%);background:hsl(140 88% 93%)}
.tt-c2{--tt-accent:hsl(330 68% 42%);background:hsl(330 88% 93%)}
.tt-c3{--tt-accent:hsl(270 68% 42%);background:hsl(270 88% 93%)}
.tt-c4{--tt-accent:hsl(25 68% 42%);background:hsl(25 88% 93%)}
.tt-c5{--tt-accent:hsl(172 68% 42%);background:hsl(172 88% 93%)}
.tt-c6{--tt-accent:hsl(0 68% 42%);background:hsl(0 88% 93%)}
.tt-c7{--tt-accent:hsl(100 68% 42%);background:hsl(100 88% 93%)}
.tt-c8{--tt-accent:hsl(240 68% 42%);background:hsl(240 88% 93%)}
.tt-c9{--tt-accent:hsl(195 68% 42%);background:hsl(195 88% 93%)}
.tt-c10{--tt-accent:hsl(300 68% 42%);background:hsl(300 88% 93%)}
.tt-c11{--tt-accent:hsl(75 68% 42%);background:hsl(75 88% 93%)}
.tt-slot[class*="tt-c"],.tt-sheet__cell[class*="tt-c"]{border-inline-start:4px solid var(--tt-accent)}
.tt-swatch[class*="tt-c"]{background:var(--tt-accent)}
/* «الفترات»: neutral grey with diagonal stripes */
.tt-table .tt-break-head,.tt-break,.tt-sheet__break-head,.tt-sheet__break{background:repeating-linear-gradient(135deg,#eef1f5 0 8px,#e3e7ee 8px 16px)!important;color:#3f4b5b}
/* «الأنشطة المدرسية»: amber with a dashed border */
.tt-act,.tt-sheet__act{background:hsl(45 100% 88%)!important;border:1px dashed hsl(38 92% 42%)!important}
/* Reports' watermark: the school icon centred over the sheet, 10% opacity (never catches clicks) */
.dr-sheet,.report{position:relative}
.report-watermark{position:absolute;top:50%;left:50%;width:var(--wm-size,40%);aspect-ratio:1;object-fit:contain;transform:translate(-50%,-50%);opacity:var(--wm-opacity,.1);pointer-events:none;z-index:3}
@media print{.report>.report-watermark{position:fixed}} /* on every printed page */
/* Timetable export: the text in a period card sits on the right, like the timetable */
.tt-sheet__cell{text-align:start;align-items:flex-start}
/* Settings → «هوية المنصة»: watermark preview */
.wm-preview{position:relative;width:100%;max-width:340px;aspect-ratio:1.414;margin:0 auto;border-radius:12px;border:var(--border-default) solid var(--color-border);background:var(--color-surface);overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:18px}
.wm-preview span{display:block;height:8px;border-radius:4px;background:var(--color-surface-muted)}
.wm-preview span:nth-child(odd){width:80%}
/* Watermark kinds: the full logo / the school's name keep their own shape (not a square) */
.report-watermark--logo,.report-watermark--text{aspect-ratio:auto;height:auto}
.report-watermark--text{color:var(--color-primary)}
/* «لونها»: black & white whatever the picture's colours */
.report-watermark--mono{filter:grayscale(1)}
.report-watermark--text.report-watermark--mono{color:#141414}
.report-watermark[hidden]{display:none}
/* Reports: the platform icon tile has an 8px corner */
.report-icon,.report-brand .report-icon.report-brand__icon{border-radius:8px}
/* «مركز المساعدة» screenshots (local capture only): no passing pop-ups or day-specific banners */
.is-guide-capture .pwa-banner,.is-guide-capture .toast,.is-guide-capture .holiday-banner,.is-guide-capture .live-popup,.is-guide-capture .notif-popup{display:none!important}
/* ===== «مركز المساعدة» ===== */
.help-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:6px;padding:0;border:0;background:none;color:var(--color-primary);font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:none}
.help-link:hover{text-decoration:underline}
.help-tip{display:inline-grid;place-items:center;width:20px;height:20px;margin-inline-start:6px;padding:0;border:0;border-radius:50%;background:none;color:var(--color-text-muted);cursor:pointer;vertical-align:middle}
.help-tip .icon{width:18px;height:18px}
.help-tip:hover{color:var(--color-primary)}
.help-tip__body{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.help-tip__body p{margin:0;color:var(--color-text-muted);font-size:var(--fs-body-sm);line-height:1.6}
.help-modules{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){.help-modules{grid-template-columns:1fr 1fr}}
.help-module{display:flex;flex-direction:column;gap:12px}
.help-module__head{display:flex;align-items:center;gap:12px}
.help-module__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--color-primary-25);color:var(--color-primary);flex:none}
.help-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.help-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:var(--border-default) solid var(--color-border);color:var(--color-text);text-decoration:none}
.help-item:hover{background:var(--color-surface-muted)}
/* the viewer */
.guide{display:flex;flex-direction:column;gap:12px}
.guide__progress{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide__dots{display:flex;gap:6px}
.guide__dots span{width:8px;height:8px;border-radius:50%;background:var(--color-border)}
.guide__dots span.is-on{background:var(--color-primary)}
.guide__step{display:flex;flex-direction:column;gap:12px}
.guide__frame{border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-muted)}
.guide__shot{position:relative;width:100%;overflow:hidden}
.guide__shot img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
.guide__noshot{position:absolute;inset:0;display:grid;place-items:center}
.guide__mark{position:absolute;border:3px solid var(--color-primary);border-radius:10px;box-shadow:0 0 0 4px rgba(1,61,233,.18);pointer-events:none;animation:guide-pulse 1.8s ease-in-out infinite!important}
.guide__mark.is-dim{box-shadow:0 0 0 4px rgba(1,61,233,.18),0 0 0 9999px rgba(16,24,40,.42)}
@keyframes guide-pulse{0%,100%{outline:0 solid rgba(1,61,233,0)}50%{outline:6px solid rgba(1,61,233,.22)}}
.guide__badge{position:absolute;left:50%;display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--color-primary);color:#fff;font-weight:var(--fw-bold,700);font-size:14px;line-height:1;box-shadow:0 3px 8px rgba(16,24,40,.22);transform:translateX(-50%)}
.guide__badge::after{content:"";position:absolute;left:50%;width:0;height:0;border-style:solid;border-color:transparent;transform:translateX(-50%)}
.guide__badge.is-above{bottom:calc(100% + 10px)}
.guide__badge.is-above::after{top:calc(100% - 1px);border-width:7px 6px 0;border-top-color:var(--color-primary)} /* touching the circle */
.guide__badge.is-below{top:calc(100% + 10px)}
.guide__badge.is-below::after{bottom:calc(100% - 1px);border-width:0 6px 7px;border-bottom-color:var(--color-primary)}
.guide__badge.is-end-right{left:auto;right:0;transform:none}
.guide__badge.is-end-right::after{left:auto;right:7px;transform:none}
.guide__badge.is-end-left{left:0;transform:none}
.guide__badge.is-end-left::after{left:7px;transform:none}
.guide__cursor{position:absolute;left:62%;top:58%;width:28px;height:28px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.guide__zoom{display:none;align-self:flex-start;align-items:center;gap:6px}
@media (max-width:767.98px){
  .guide__zoom{display:inline-flex}
  .guide__frame.is-zoomed{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .guide__frame.is-zoomed .guide__shot{width:240%}
  .guide__badge{min-width:24px;height:24px}
}
.guide__text{display:flex;align-items:flex-start;gap:12px}
.guide__num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:var(--fw-bold);flex:none}
.guide__title{margin:0;font-size:var(--fs-body-lg,16px);font-weight:var(--fw-bold)}
.guide__desc{margin:0;color:var(--color-text-muted);line-height:1.7}
.guide__legend{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.guide__legend li{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm)}
.guide__legend-num{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:12px;font-weight:var(--fw-bold)}
/* ===== Side menu on large screens (>=1280): the profile on top, fold to icons, an arrow on the open page ===== */
.sidebar__toggle,.nav-item__arrow{display:none}
.nav-item__arrow{width:18px;height:18px;flex:none;color:var(--color-primary)}
@media (min-width:1280px){
  .sidebar{overflow-y:auto;overflow-x:hidden}
  .sidebar__brand{order:0}
  .sidebar__toggle{display:inline-grid;order:0;position:absolute;top:28px;inset-inline-end:12px;color:var(--color-text-muted)}
  .sidebar__user{display:none!important} /* the profile is the avatar in the top bar, next to the bell */
  .nav-item__arrow{display:block;margin-inline-start:auto}
  .nav-item__badge:not([hidden])+.nav-item__arrow{margin-inline-start:8px} /* a badge hidden at 0 (approvals / notifications): the arrow stays at the end */
  .sidebar__toggle-open{display:none}
  /* folded: icons only (the names show as tooltips) */
  .app.is-sb-collapsed .sidebar{width:var(--rail-width);padding:20px 10px;align-items:center}
  .app.is-sb-collapsed .sidebar__brand{justify-content:center;padding:0 0 12px}
  .app.is-sb-collapsed .sidebar__brand .logo-full{display:none}
  .app.is-sb-collapsed .sidebar__brand .logo-mark{display:grid}
  .app.is-sb-collapsed .sidebar__toggle{position:static;margin:0 auto 8px}
  .app.is-sb-collapsed .sidebar__toggle-fold{display:none}
  .app.is-sb-collapsed .sidebar__toggle-open{display:block}
  .app.is-sb-collapsed .nav-item{justify-content:center;padding:12px 0}
  .app.is-sb-collapsed .nav-item__label,.app.is-sb-collapsed .nav-item__arrow{display:none}
  .app.is-sb-collapsed .nav-item__badge{position:absolute;top:4px;left:8px}
}
.user-card{display:flex;align-items:center;gap:12px;margin:2px 2px 6px;padding:12px;border-radius:var(--radius-card,16px);background:var(--color-surface-muted);color:var(--color-text);text-decoration:none}
.user-card:hover{background:var(--color-primary-25)}
.user-card__text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.user-card__name{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-card__role{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.user-card .arrow-circle{color:var(--color-primary);box-shadow:0 1px 2px rgba(16,24,40,.08)}
/* ===== «الإجازات والاستئذانات» ===== */
.leave-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.leave-row{display:flex;align-items:center;gap:12px;color:var(--color-text);text-decoration:none}
.leave-row:hover{border-color:var(--color-primary-50)}
.leave-row__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--color-primary-25);color:var(--color-primary);flex:none}
.leave-row__icon.is-permission{background:var(--color-info-bg);color:var(--color-info)}
.leave-balances{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.leave-bal{display:flex;flex-direction:column;gap:6px;padding:14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md)}
.leave-bal.is-permission{background:var(--color-surface-muted)}
.leave-bal__nums{display:flex;align-items:baseline;gap:6px}
.leave-bal__nums b{font-size:26px;line-height:1.1;font-weight:var(--fw-bold);color:var(--color-primary)}
.leave-bal__nums b.is-over{color:var(--color-error)}
.leave-bal__nums span{font-size:var(--fs-caption);color:var(--color-text-muted)}
.leave-bal__bar{display:block;height:6px;border-radius:99px;background:var(--color-surface-muted);overflow:hidden}
.leave-bal__bar span{display:block;height:100%;border-radius:inherit;background:var(--color-primary)}
.leave-side{display:flex;flex-direction:column;gap:12px}
.leave-nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.leave-nums>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--color-surface-muted)}
.leave-nums>div.is-current{background:var(--color-primary-25)}
.leave-nums dt{font-size:var(--fs-caption);color:var(--color-text-muted)}
.leave-nums dd{margin:0;font-size:20px;font-weight:var(--fw-bold)}
.leave-nums dd.is-over{color:var(--color-error)}
.leave-show{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1024px){.leave-show{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.leave-show__main,.leave-show__side{display:flex;flex-direction:column;gap:16px;min-width:0}
.leave-decision{gap:8px}
.leave-decision.is-approved{background:var(--color-success-bg)}
.leave-decision.is-rejected{background:var(--color-error-bg)}
.leave-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.leave-mini a{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:var(--border-default) solid var(--color-border);color:var(--color-text);text-decoration:none}
.leave-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md)}
.leave-matrix,.leave-log{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.leave-matrix th,.leave-matrix td,.leave-log th,.leave-log td{padding:10px 12px;text-align:start;border-bottom:var(--border-default) solid var(--color-border);white-space:nowrap}
.leave-matrix thead th,.leave-log thead th{background:var(--color-surface-muted);color:var(--color-text-muted);font-weight:var(--fw-semibold)}
.leave-matrix tbody tr:last-child>*,.leave-log tbody tr:last-child>*{border-bottom:0}
.leave-matrix__input{width:84px;height:40px;padding:0 10px;border:var(--border-default) solid var(--color-border);border-radius:10px;font:inherit;text-align:center;background:var(--color-surface)}
.leave-matrix__input:focus{outline:2px solid var(--color-primary-50);border-color:var(--color-primary)}
.leave-kinds{align-self:flex-start}
.card.leave-row{flex-direction:row;align-items:center;text-align:start}
/* Downloads of on-page reports (x-export-buttons / x-export-head, js/sheet-export.js): the header band and watermark appear only in the file */
.export-only{display:none}
html.is-exporting .export-only{display:block}
html.is-exporting .export-head{display:flex}
.export-area{position:relative;background:var(--color-surface)}
html.is-exporting .export-area{padding:24px}
.export-head{flex-direction:column;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--color-primary)}
.export-head__title{display:flex;flex-direction:column;gap:2px}
.export-head__title h2{margin:0;font-size:var(--fs-h2);color:var(--color-primary);font-weight:var(--fw-bold)}
/* a wide timetable is captured whole, not cut at the screen edge (the width is measured by js/sheet-export.js) */
html.is-exporting .export-area{max-width:none}
html.is-exporting .export-area .tt-wrap{overflow:visible}
/* Phones: segmented tabs always take the full width, their items share it equally (the user's rule) */
@media (max-width:767.98px){
  .segmented{display:flex;width:100%;align-self:stretch}
  .segmented__item{flex:1 1 0;justify-content:center;padding:0 8px;min-width:0}
  .ss-days .segmented{display:grid}
}
/* «الرئيسية»: the period dropdown — beside «إنشاء مهمة» on computers / tablets, above the cards (full width) on phones */
.dash-period-pick--head{width:180px}
.dash-period-pick--body{display:none}
@media (max-width:767.98px){.dash-period-pick--head{display:none}.dash-period-pick--body{display:block}}
/* ===== «الأعوام الدراسية» ===== */
.year-picker{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.year-picker:hover{background:var(--color-surface-muted)}
.year-picker{position:relative}
.year-picker:not(.is-archive) > .icon{color:var(--color-primary)}
.year-picker__chip{white-space:nowrap;position:absolute;top:-8px;right:-6px;padding:1px 7px;border-radius:var(--radius-full);background:var(--color-secondary);color:#fff;font-size:10px;line-height:14px;font-weight:var(--fw-bold);pointer-events:none;z-index:2}
.topbar-ai-chip{background:var(--color-primary);color:var(--color-on-primary);top:-6px;padding:1px 12px}
.year-picker.is-archive{border-color:var(--color-warning);background:var(--color-warning-bg);color:var(--color-warning)}
.archive-banner{position:sticky;top:var(--topbar-height);z-index:29;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px var(--page-padding-x,24px);background:var(--color-warning-bg);color:var(--color-text)}
.archive-banner__msg{display:flex;align-items:flex-start;gap:8px;flex:1 1 240px;min-width:0}
.archive-banner__msg>.icon{color:var(--color-warning);flex:none;margin-top:2px}
@media (max-width:767.98px){.archive-banner form,.archive-banner .btn{width:100%}.archive-banner .btn{justify-content:center}.archive-banner{position:static}}
.archive-mini{display:none}
@media (max-width:767.98px){
  .archive-mini.is-shown{display:flex;position:fixed;top:var(--topbar-height);inset-inline:0;z-index:29;justify-content:flex-start;padding:6px 16px;background:var(--color-warning-bg)}
  .archive-mini form,.archive-mini .btn{width:100%}
}
.year-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.year-card__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--color-success-bg);color:var(--color-success);flex:none}
.year-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.year-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:var(--border-default) solid var(--color-border)}
.year-row:first-child{border-top:0}
.year-row.is-viewing{background:color-mix(in srgb,var(--color-warning-bg) 50%,transparent)}
.year-row__actions{margin-inline-start:auto}
/* «شرح هذه الصفحة» on the title's line, at the other end */
.page-header__title-row{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-width:0}
.page-header__title-row .help-link{margin-top:0;align-self:center;white-space:nowrap}
.page-help{background:var(--color-surface);border:var(--border-default) solid var(--color-border);color:var(--color-primary)} /* «شرح هذه الصفحة» */
.page-help:hover{background:var(--color-primary-10);border-color:var(--color-primary-50)}
/* «?» beside the buttons on large screens; at the end of the title's line on phones (the button rows keep their pairs) */
.page-help--title{display:none}
@media (max-width:767.98px){
  .page-help--title{display:inline-flex}
  .page-help--actions,.page-header__actions--help-only{display:none}
}
/* Phones: search = a round button that opens the bar across the top bar; keyboard shortcuts move to the account menu */
.search-open-btn,.search-close-btn{display:none}
@media (min-width:768px){.only-phone{display:none!important}}
@media (max-width:767.98px){
  .search-open-btn{display:inline-grid;flex:none;color:var(--color-primary)}
  .topbar .global-search{display:none}
  .topbar.is-searching .global-search{display:flex;position:absolute;inset-block:0;inset-inline:16px;margin:auto 0;z-index:5;max-width:none;background:var(--color-surface);border-color:var(--color-focus)}
  .topbar.is-searching .search-close-btn{display:inline-grid;flex:none}
  .global-search .search-clear-btn{display:none!important} /* phones: one ✕ only — the close button */
  .topbar__actions .kbd-help-btn{display:none}
  .topbar__actions{margin-inline-start:auto}
  .year-picker{padding:0 10px}
  .year-picker > span{display:none}
}
/* Archive (a past year): nothing to add or edit, so those buttons are hidden */
:is(html.is-archive) :is(a.btn,a.menu-item,a.icon-btn,a.list-row,a.card__link):is([href$="/create"],[href*="/create?"],[href*="/create#"],[href$="/edit"],[href*="/edit?"]),html.is-archive [data-archive-hide],html.is-archive main form[method="post" i]:not([data-archive-ok]),html.is-archive .popover form[method="post" i]:not([data-archive-ok]),html.is-archive .popover-sheet form[method="post" i]:not([data-archive-ok]){display:none!important}
/* «مهامي الخاصة» details and other side panels: data-size="side" */
@media (min-width:768px){
  .overlay:has(> .modal--side){padding:0;justify-content:flex-end;align-items:stretch}
  .modal--side{max-width:480px;height:100vh;max-height:none;border-radius:0;animation:side-in .2s ease-out}
  .modal--side .modal__body{flex:1 1 auto}
  .modal--side .modal__footer{padding-top:16px;border-top:var(--border-default) solid var(--color-border)}
}
@keyframes side-in{from{transform:translateX(-24px);opacity:.6}}
/* «جاري فحص الاتصال»: while a third-party service is being checked */
.check-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:var(--color-scrim);animation:fade .15s ease-out}
.check-overlay__box{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(340px,100%);padding:28px 24px;border-radius:var(--radius-modal);background:var(--color-surface);box-shadow:var(--shadow-popup);text-align:center}
.check-overlay__spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--color-primary-25);border-top-color:var(--color-primary);animation:check-spin .8s linear infinite}
@keyframes check-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.check-overlay__spin{animation-duration:2.4s}}
/* Scrollbars everywhere (side menu, search results, lists, windows, the page): invisible until the pointer is over
   the scrolling area, then a thin rounded line — no arrows, no track */
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
*:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-text-muted) 40%,transparent)}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-text-muted) 65%,transparent)}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:transparent transparent}
  *:hover{scrollbar-color:color-mix(in srgb,var(--color-text-muted) 40%,transparent) transparent}
}
/* The search box: results from everywhere in a dropdown (js/search.js) */
@media (min-width:768px){.global-search{position:relative}}
.search-pop{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:40;max-height:min(70vh,520px);overflow-y:auto;padding:6px;border-radius:var(--radius-popup);background:var(--color-surface);border:var(--border-default) solid var(--color-border);box-shadow:var(--shadow-popup);min-width:min(420px,calc(100vw - 32px))}
.search-pop__group+.search-pop__group{border-top:var(--border-default) solid var(--color-border);margin-top:4px;padding-top:4px}
.search-pop__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 4px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.search-pop__more{color:var(--color-primary);text-decoration:none;font-weight:var(--fw-semibold)}
.search-pop__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--color-text);text-decoration:none}
.search-pop__item:hover,.search-pop__item.is-active{background:var(--color-primary-25)}
.search-pop__icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:var(--color-surface-muted);color:var(--color-primary)}
.search-pop__icon .icon{width:18px;height:18px}
.search-pop__text{display:flex;flex-direction:column;min-width:0}
.search-pop__title{font-weight:var(--fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-pop__title mark{background:color-mix(in srgb,var(--color-secondary) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.search-pop__meta{font-size:var(--fs-caption);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-pop__empty{display:flex;align-items:center;gap:8px;padding:16px 12px;color:var(--color-text-muted)}
.global-search.is-searching-live > .icon{animation:check-spin 1s linear infinite;opacity:.6}
@media (max-width:767.98px){.search-pop{position:fixed;top:calc(var(--topbar-height) + 4px);inset-inline:8px;min-width:0}}
/* The search box: no browser ✕ — our close icon clears it (large screens; phones have the close button) */
.global-search input::-webkit-search-cancel-button,.global-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.search-clear-btn{display:none;flex:none;color:var(--color-text-muted)}
@media (min-width:768px){.global-search input:not(:placeholder-shown)~.search-clear-btn{display:inline-grid}} /* only while there is text (CSS alone, like the table search) */

/* The open page in the side menu: its arrow in a white circle */
@media (min-width:1280px){
  .nav-item__arrow{width:24px;height:24px;padding:4px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.08)}
}
/* «خط المنصة» chooser */
.font-preview{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--radius-card,16px);background:var(--color-surface-muted)}
.font-preview__title{font-size:var(--fs-h3);font-weight:var(--fw-bold)}
.font-preview__weights{display:flex;flex-wrap:wrap;gap:12px;color:var(--color-text-muted)}
/* Search box at the top of long dropdown lists (js/proto/select.js) */
.select-search{position:sticky;top:-6px;z-index:1;display:flex;align-items:center;gap:8px;margin:-6px -6px 4px;padding:10px 12px;background:var(--color-surface);border-bottom:var(--border-default) solid var(--color-border)}
.select-search .icon{flex:none;color:var(--color-text-muted)}
.select-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-body-sm);color:var(--color-text)}
.select-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.select-option[hidden]{display:none}
.search-pop__match{font-size:var(--fs-caption);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-pop__meta mark,.search-pop__match mark{background:color-mix(in srgb,var(--color-secondary) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.leave-bal-head{flex-wrap:wrap;align-items:baseline}
@media (max-width:767.98px){.leave-bal-head{flex-direction:column;align-items:flex-start;gap:4px}} /* phones: the title, then its note under it */
.leave-bal-head .card__title{white-space:nowrap}
/* ===== «الخطة الإشرافية» ===== */
.sv-table{min-width:calc(110px + var(--tt-periods, 7) * 140px + var(--sv-gaps, 0) * 40px)}
/* a time gap between two periods: a narrow hatched column; an item over it continues after it («تكملة») */
.sv-table .sv-gap-head,.sv-table .sv-gap{width:40px;min-width:40px;padding:6px 2px;text-align:center;vertical-align:middle;background:repeating-linear-gradient(135deg,#eef1f5 0 8px,#e3e7ee 8px 16px);color:#3f4b5b}
.sv-table .sv-gap-head span{writing-mode:vertical-rl;display:inline-block;line-height:1.4;font-weight:var(--fw-semibold)}
.sv-item.sv-item--cont{border-inline-start-style:dashed}
.sv-item{border-inline-start:3px solid transparent}
.sv-item--visit{background:hsl(215 88% 93%);border-inline-start-color:hsl(215 68% 42%)}
.sv-item--general{background:var(--color-surface-muted);border-inline-start-color:color-mix(in srgb,var(--color-text-muted) 50%,transparent)}
.sv-item[draggable="true"]{cursor:grab}
.sv-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sv-check{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;text-align:start;cursor:pointer}
.sv-check.is-done{background:color-mix(in srgb,var(--color-success) 8%,var(--color-surface))}
.sv-check.is-done > span:last-child{text-decoration:line-through;color:var(--color-text-muted)}
.sv-check.is-done .todo__check{background:var(--color-success);border-color:var(--color-success);color:#fff}
.sv-checklist--view li{display:flex;align-items:center;gap:8px;color:var(--color-text-muted)}
.sv-checklist--view li.is-done{color:var(--color-text)}
.sv-checklist--view li.is-done .icon{color:var(--color-success)}
.sv-q{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.sv-options{display:flex;flex-wrap:wrap;gap:8px}
.sv-option{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);cursor:pointer}
.sv-option:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-25);color:var(--color-primary);font-weight:var(--fw-semibold)}
.sv-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.sv-stars input{position:absolute;opacity:0;pointer-events:none}
.sv-stars label{font-size:30px;line-height:1;color:var(--color-neutral-200);cursor:pointer;transition:color .1s}
.sv-stars input:checked ~ label,.sv-stars label:hover,.sv-stars label:hover ~ label{color:#f5b301}
.sv-stars input:focus-visible + label{outline:2px solid var(--color-focus);border-radius:4px}
.sv-answers{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:12px}
.sv-answers li{display:flex;flex-direction:column;gap:4px}
.sv-stars-view{color:#f5b301;letter-spacing:2px}
.eval-questions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.eval-q{display:flex;align-items:flex-start;gap:12px;padding:16px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card,16px);background:var(--color-surface)}
.eval-q.is-dragging{opacity:.5;border-style:dashed;border-color:var(--color-primary)}
.eval-q__side,.eval-q__tools{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.eval-q__handle{cursor:grab;color:var(--color-text-muted)}
.eval-q__handle:active{cursor:grabbing}
.eval-q__up{transform:rotate(180deg)}
.eval-q__req{align-self:end;padding-inline:0}
.eval-q__n{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);font-weight:var(--fw-bold)}
/* segmented choices made of radios (the item form's kind, a two-choice question): the radio stays for keyboards, the pill shows the choice */
.segmented__item:has(> input[type="radio"]){position:relative;cursor:pointer}
.segmented__item > input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.segmented__item:has(> input[type="radio"]:checked){background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm,0 1px 2px rgba(16,24,40,.08))}
.segmented__item:has(> input[type="radio"]:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
/* the plan's time columns (design-system time fields) */
.sv-cols{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
@media (max-width:767.98px){.eval-q{flex-wrap:wrap}.eval-q__tools{flex-direction:row;width:100%;justify-content:flex-end}}
.sv-danger{color:var(--color-error)}
.sv-sheet-head{flex-wrap:wrap;margin-bottom:12px}
.eval-q__handle{touch-action:none}
body.is-sorting{user-select:none;cursor:grabbing}
@media (max-width:767.98px){.eval-add{width:100%;justify-content:center;align-self:stretch!important}}
/* Switch rows inside forms: the form's own spacing separates them from other fields, so the list padding isn't doubled
   (a group keeps 12px between its rows, with the line; a lone row has no padding of its own) */
.setting-list > .setting-row{padding-block:12px}
.setting-list > .setting-row:first-child{padding-top:0}
.setting-list > .setting-row:last-child{padding-bottom:0}
.stack > .setting-row,.stack > [data-when-branch] > .setting-row:only-child,.field-pair > .setting-row{padding-block:0}
.sv-status{align-self:flex-start;margin-top:8px}
.sv-cols-head,.sv-col-row{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 36px;align-items:center;gap:10px}
.sv-cols-head{margin-bottom:-8px}
.sv-cols-head .field__label{margin:0}
.sv-col-row__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);font-weight:var(--fw-bold)}
.sv-col-row .icon-btn{color:var(--color-text-muted)}
@media (max-width:767.98px){.sv-col-add{width:100%;justify-content:center;align-self:stretch!important}}
@media (max-width:767.98px){.sv-col-row .control > .icon{display:none}.sv-col-row .control{padding-inline:12px;gap:0}} /* phones: the time gets the whole field */

/* «تسجيل صوتي» (x-voice-note) and the audio player (x-voice-player), js/voice.js */
.voice-note{display:flex;flex-direction:column;gap:8px}
.voice-note__start{align-self:flex-start}
.voice-note__rec{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface)}
.voice-note__dot{width:10px;height:10px;border-radius:50%;background:var(--color-error);flex:none;animation:voice-blink 1.2s ease-in-out infinite}
@keyframes voice-blink{50%{opacity:.25}}
.voice-note__level{display:inline-flex;align-items:center;gap:3px;height:20px}
.voice-note__level i{display:block;width:3px;height:100%;border-radius:2px;background:var(--color-primary);transform:scaleY(.2);transform-origin:center;transition:transform .08s linear}
.voice-note__time{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold)}
.voice-note__done{display:flex;flex-direction:column;gap:4px}
.voice-note__foot{align-items:center}
.voice-note.is-error [data-voice-meta]{color:var(--color-error)}
.voice-player{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:var(--radius-full);background:var(--color-primary-10);border:var(--border-default) solid var(--color-primary-25);min-width:0}
.voice-player__btn{width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--color-primary);color:var(--color-on-primary);cursor:pointer;flex:none}
.voice-player__btn:hover{background:var(--color-primary-600)}
.voice-player__seek{flex:1;min-width:60px;height:4px;margin:0;-webkit-appearance:none;appearance:none;border-radius:999px;cursor:pointer;background:linear-gradient(to left,var(--color-primary) var(--vp-fill,0%),var(--color-primary-50) var(--vp-fill,0%))}
.voice-player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);border:2px solid var(--color-surface);box-shadow:0 0 0 1px var(--color-primary)}
.voice-player__seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--color-primary);border:2px solid var(--color-surface)}
.voice-player__time{font-size:var(--fs-caption);font-variant-numeric:tabular-nums;color:var(--color-text-muted,#667085);white-space:nowrap;flex:none}
.voice-player audio{display:none}
.file-item > .voice-player{margin-inline-start:52px}
.file-tile--audio{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:8px}
.file-tile--audio > .row{align-items:center}
.file-tile--audio .file-item__text{flex:1}
@media (max-width:767.98px){.file-item > .voice-player{margin-inline-start:0}.voice-note__start{align-self:stretch}}

/* Phone sheets with a long list (e.g. «الموظفون المسؤولون»): the search box stays on top and the button at the bottom while the list scrolls */
.popover-sheet .picker-search{position:sticky;top:-1px;z-index:2;background:var(--color-surface)}
.popover-sheet .popover__foot{position:sticky;bottom:-1px;z-index:2;background:var(--color-surface)}
.popover > .picker-search{position:sticky;top:-8px;z-index:2;margin-top:-8px;padding-top:12px!important;background:var(--color-surface)}
.popover > .popover__foot{position:sticky;bottom:-8px;z-index:2;margin-bottom:-8px;padding-bottom:12px;background:var(--color-surface)}

/* Finger drag & drop (js/touch.js): no long-press menu / text selection on draggable items; the item follows the finger */
[data-tt-grid] .tt-slot[data-slot],[data-sv-grid] [data-item]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (pointer:coarse){[data-tt-grid] .tt-slot[data-slot],[data-sv-grid] [data-item]{-webkit-user-drag:none}}
.touch-drag-ghost{position:fixed!important;z-index:95;margin:0!important;pointer-events:none;opacity:.92;box-shadow:var(--shadow-popup);transform:scale(1.04);transition:none!important;animation:none!important}
html.is-touch-dragging,html.is-touch-dragging body{-webkit-user-select:none;user-select:none}
[data-sv-grid] [data-item].is-dragging{opacity:.4}

/* Side menu groups (≥1280, menu open): related sections fold under one heading; the flat list is the tablet rail / folded menu */
.nav-list--groups{display:none}
.nav-group{display:flex;flex-direction:column}
.nav-group > summary{list-style:none;cursor:pointer;user-select:none}
.nav-group > summary::-webkit-details-marker{display:none}
.nav-group__chev{width:18px;height:18px;flex:none;color:var(--color-text-muted);transition:transform var(--transition-fast)}
.nav-group[open] > summary .nav-group__chev{transform:rotate(180deg)}
.nav-group[open] > summary .nav-item__badge{display:none} /* the sections inside show their own */
.nav-group__head.is-active{color:var(--color-primary-600);font-weight:var(--fw-semibold)}
.nav-group__items{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;margin-inline-start:24px;padding-inline-start:8px;border-inline-start:var(--border-default) solid var(--color-border)}
@media (min-width:1280px){
  .nav-list--flat{display:none}
  .nav-list--groups{display:flex}
  .nav-group__head .nav-item__badge{margin-inline-start:auto}
  .nav-group__head .nav-item__badge+.nav-group__chev{margin-inline-start:8px}
  .nav-group__head .nav-item__label+.nav-group__chev{margin-inline-start:auto}
  .app.is-sb-collapsed .nav-list--flat{display:flex}
  .app.is-sb-collapsed .nav-list--groups{display:none}
}

/* A visit before it starts: its points and the evaluation form's questions, to read */
.sv-points-preview{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-points-preview li{display:flex;align-items:flex-start;gap:8px}
.sv-points-preview .icon{color:var(--color-primary);flex:none;margin-top:2px}
.sv-q-preview{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sv-q-preview li{display:flex;gap:12px;padding:12px 0}
.sv-q-preview li+li{border-top:var(--border-default) solid var(--color-border)}
.sv-q-preview__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary-600);font-weight:var(--fw-bold);flex:none}
.sv-q-preview__stars{color:var(--color-warning);letter-spacing:2px}
/* A started visit: the points tab (own points have a trash icon) */
.sv-checklist li{display:flex;align-items:center;gap:8px}
.sv-checklist li > .sv-check{flex:1;min-width:0}
.sv-point-add{display:flex;gap:8px;align-items:center}
.sv-point-add > .control{flex:1;min-width:0}
.tab .t-caption{font-weight:var(--fw-regular,400)}

/* A visit: which evaluation form it uses, as a clear line under the report's title */
.sv-template-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-md);background:var(--color-surface-muted)}

/* Plan grid: an official holiday is a closed day (striped, no «إضافة», not a drop target) */
.sv-table .sv-off{background:repeating-linear-gradient(135deg,#fdf6e3 0 8px,#f8ecd0 8px 16px);color:#8a5a00;text-align:center;vertical-align:middle}
.sv-off__label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}
.sv-week-off{color:var(--color-warning)}

/* Phones: a button alone in its container (no other button beside it) fills the container — in cards, stacks, sections,
   fields and modal bodies; rows of buttons have their own rule above. Icon-only and text-link buttons keep their size. */
@media (max-width:767.98px){
  :is(.page-body, .modal__body) :is(.card, .stack, section, .field, .accordion__content, .card__body, .voice-note__done) > .btn:not(.btn--link):not(:has(~ .btn)):not(.btn ~ .btn),
  :is(.page-body, .modal__body) > .btn:not(.btn--link):not(:has(~ .btn)):not(.btn ~ .btn),
  :is(.page-body, .modal__body) :is(.card, .stack, section) > form:not(.menu-form) > .btn:only-child{width:100%;justify-content:center;align-self:stretch}
}

/* Settings → «مسح البيانات» */
.wipe-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
@media (min-width:1024px){.wipe-list{grid-template-columns:1fr 1fr}}
.wipe-item,.wipe-all{display:flex;align-items:center;gap:12px;cursor:pointer}
.wipe-item:has(input:checked){border-color:var(--color-error);background:var(--color-error-bg)}
.wipe-item.is-required{opacity:.85}
.wipe-summary{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wipe-summary li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:var(--radius-md);background:var(--color-surface-muted)}
.wipe-code{letter-spacing:6px;text-align:center}

/* Dropdowns (popovers): their parts keep their height — a long part scrolls instead of being cut off.
   The notifications list scrolls inside, between its heading and «عرض كل الإشعارات». */
.popover > *{flex-shrink:0}
.popover > [data-bell-list]{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* The bell: the number of unread notifications on it (like «الموافقات»), kept live by js/live.js ([data-unread-badge]) */
.icon-btn .icon-btn__count{position:absolute;top:-2px;inset-inline-end:-4px;box-shadow:0 0 0 2px var(--color-surface)}
/* «ماذا تريد أن تمسح؟»: its frame like the platform's cards — rounded, with room inside */
.wipe-box{margin:0;padding:16px 20px 20px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card)}
.wipe-box > legend{padding:0 8px}
.wipe-box.has-error{border-color:var(--color-error)}

/* Tables: the first heading's arrow — newest first (down, blue) ↔ oldest first (up, blue) */
.sort-th{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;font:inherit}
.sort-th:hover{color:var(--color-primary)}
.sort-th__icon{width:18px;height:18px;flex:none}
.sort-th__icon path{color:var(--color-neutral-300,#c6c6c6)}
.sort-th__icon path.is-on{color:var(--color-primary)}
/* Card view (phones): the newest / oldest switch above the cards, as the headings are hidden there */
.tv-sort{display:none}
@media (max-width:767.98px){
  .tv-sort.is-on{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0 0 var(--spacing-sm);color:var(--color-text);font-weight:var(--fw-medium);font-size:var(--fs-body-sm);text-decoration:none}
}

/* «إضافة من صورة أو نص» (employees): one card per person read, its five fields side by side on wide screens */
.emp-import{display:flex;flex-direction:column;gap:12px}
.emp-import__row{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.emp-import__row.needs-review{border-color:var(--color-warning)}
.emp-import__head{flex-wrap:wrap}
.emp-import__fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.emp-import__row:has(.emp-import__include:not(:checked)) .emp-import__fields{opacity:.5}

/* table search (x-list-toolbar): the top search's clear button instead of the browser's own × */
.toolbar input[type=search]::-webkit-search-cancel-button,.toolbar input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.toolbar [data-list-clear]{display:inline-grid}
.toolbar input[type=search]:placeholder-shown+[data-list-clear]{display:none} /* only while there is text (CSS alone: right after a reload, back button or autofill too) */

/* «سجل رسائل WhatsApp»: one message's full text */
.wa-bubble{padding:12px 14px;border-radius:var(--radius-md);background:var(--color-success-bg);overflow-wrap:anywhere;font-size:var(--fs-body-sm);line-height:1.8}

/* «إحصائيات الزيارات»: branch · period · week in one row; on phones stacked, full width, the week centred */
.sv-stats-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sv-stats-bar__pick{width:220px}
.sv-stats-bar__week{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:767.98px){.sv-stats-bar{flex-direction:column;align-items:stretch}.sv-stats-bar__pick{width:100%}.sv-stats-bar__week{justify-content:center;text-align:center}}

/* a grid header that opens its period's time (supervision plan / timetable) */
/* the timetable's header links (design «أ»): the cell turns a very light colour on hover and its words take the colour (the
   header keeps its height; the whole cell opens it, but its edges — where the «+ فترة» line is). «اليوم / الحصة» in light
   orange: its words become «استدعاء المواعيد» with an import icon. */
.tt-head-link{display:flex;flex-direction:column;align-items:center;color:inherit}
.tt-table thead th:has(> .tt-head-link){position:relative;cursor:pointer;transition:background var(--transition-fast)}
.tt-head-link::after{content:"";position:absolute;inset:0 8px}
.tt-head-link:focus-visible{outline:none}
.tt-table thead th:has(> .tt-head-link):hover,.tt-table thead th:has(> .tt-head-link:focus-visible){background:var(--color-primary-10)}
.tt-table thead th:hover > .tt-head-link,.tt-head-link:focus-visible,.tt-table thead th:hover > .tt-head-link .tt-time,.tt-head-link:focus-visible .tt-time{color:var(--color-primary)}
.tt-table thead th.tt-corner:hover,.tt-table thead th.tt-corner:has(> .tt-head-link:focus-visible){background:var(--color-secondary-25)}
.tt-table thead th.tt-corner:hover > .tt-head-link,.tt-corner .tt-head-link:focus-visible{color:var(--color-secondary-800)}
.tt-corner__hover{display:none;align-items:center;gap:4px}
.tt-corner__hover .icon{width:1.1em;height:1.1em;--icon-stroke:2}
.tt-table thead th.tt-corner:hover .tt-corner__label,.tt-corner .tt-head-link:focus-visible .tt-corner__label{display:none}
.tt-table thead th.tt-corner:hover .tt-corner__hover,.tt-corner .tt-head-link:focus-visible .tt-corner__hover{display:inline-flex}

/* ===== «إطار المنصة»: the page is a white panel rounded at the top, on a light frame (--shell-frame from Settings → «هوية المنصة»,
   layouts/base). Whatever sits on the frame (menu icons, logo, the phone top bar's round buttons / account) is white, so it stands out. ===== */
:root{--shell-frame:#eef2fe;--shell-radius:22px;--shell-line:rgba(16,24,40,.09)} /* --shell-line: the menu's dividers — a see-through dark, so always a shade darker than the frame colour / gradient under it */
body:has(.app){background:var(--shell-bg,var(--shell-frame));background-attachment:fixed} /* a gradient stays put while the page scrolls */
.sidebar{background:transparent;border-inline-end:0}
.sidebar__brand .logo-mark{background:var(--color-surface)}
.sidebar .icon-btn{background:var(--color-surface)}
.nav-item:hover .nav-item__icon{background:var(--color-surface)}
.nav-item[aria-current="page"] .nav-item__icon{background:var(--color-primary);color:#fff}
.nav-item[aria-current="page"]{--icon-cut:var(--color-primary)} /* the filled icon's cut-outs = the pill's colour */
.sidebar .nav-group__items{border-inline-start-color:var(--shell-line)}
@media (max-width:767.98px){
  .topbar{background:var(--shell-bg,var(--shell-frame));background-attachment:fixed;border-bottom:0} /* the same piece of the gradient as behind it */
  .topbar .icon-btn,.topbar .year-picker,.topbar .avatar,.topbar .global-search{background:var(--color-surface)}
  main#main{background:var(--color-surface);border-radius:var(--shell-radius) var(--shell-radius) 0 0;min-height:calc(100dvh - var(--topbar-height))}
}
@media (min-width:768px){
  .app__main{background:var(--color-surface);margin-top:12px;margin-inline-end:12px;border-radius:var(--shell-radius) var(--shell-radius) 0 0;box-shadow:0 1px 3px rgba(16,24,40,.06);min-height:calc(100dvh - 12px);overflow:clip}
  .topbar{border-radius:var(--shell-radius) var(--shell-radius) 0 0}
}
@media (min-width:1280px){
  .nav-item:hover{background:var(--color-surface)}
  .nav-item[aria-current="page"]{background:var(--color-primary);color:#fff}
  .nav-item[aria-current="page"] .nav-item__icon{background:none!important;color:inherit}
  .nav-group__head.is-active{color:var(--color-primary-600)}
  .sidebar__user{background:var(--color-surface)}
  /* a light line between the menu's sections (drawn in the gap, so nothing moves) — not touching the open page's / hovered pill */
  .nav-list--groups > *{position:relative}
  .nav-list--groups > * + *::before{content:"";position:absolute;inset-inline:14px;top:-3px;height:0;border-top:1px solid var(--shell-line);pointer-events:none} /* a border: always one device pixel thick, whatever the screen scaling */
  .nav-list--groups > [aria-current="page"]::before,.nav-list--groups > [aria-current="page"] + *::before,
  .nav-list--groups > a.nav-item:hover::before,.nav-list--groups > a.nav-item:hover + *::before,
  .nav-list--groups > .nav-group:has(> summary:hover)::before,.nav-list--groups > .nav-group:not([open]):has(> summary:hover) + *::before,
  .nav-list--groups > .nav-group[open]:has(.nav-group__items > :last-child:is([aria-current="page"],:hover)) + *::before{display:none}
}
/* Settings «لون إطار المنصة» */
/* «لون إطار المنصة»: equal tiles — a small picture of the frame (the colour around a white page, the menu side on the right), name, ✓ */
.shell-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (min-width:1440px){.shell-tiles{grid-template-columns:repeat(7,minmax(0,1fr))}.shell-tiles--8{grid-template-columns:repeat(8,minmax(0,1fr))}}
.shell-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-text);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.shell-tile:hover{border-color:var(--color-primary-100)}
.shell-tile.is-on{background:var(--color-primary-10)}
.shell-tile.is-on{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.shell-tile:focus-within,.shell-tile:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.shell-tile__preview{position:relative;display:block;height:64px;border-radius:var(--radius-md);background:var(--swatch);border:var(--border-default) solid rgba(16,24,40,.1);overflow:hidden}
.shell-tile__page{position:absolute;inset-block:8px;inset-inline-start:32%;inset-inline-end:8px;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.1)}
.shell-tile__pick{position:absolute;inset-block-start:8px;inset-inline-start:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--color-text-muted);box-shadow:0 1px 2px rgba(16,24,40,.15)}
.shell-tile__pick .icon{width:14px;height:14px}
.shell-tile__badge{position:absolute;inset-block-start:6px;inset-inline-end:6px;padding:0 6px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:var(--fs-caption);line-height:var(--lh-caption)}
.shell-tile__foot{white-space:nowrap;display:flex;align-items:center;gap:6px;padding-inline:4px}
.shell-tile__check{margin-inline-start:auto;width:18px;height:18px;color:var(--color-primary);visibility:hidden}
.shell-tile.is-on .shell-tile__check{visibility:visible}
.shell-tile__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
@media (max-width:767px){.shell-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== «المالية» (finance/*): amounts, the new-run form, per-branch totals, adjustment / ledger / log rows, contractors' jobs ===== */
.fin-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-new-run{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.fin-new-run .field{flex:0 1 260px;margin:0}
.fin-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fin-branches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.fin-branches li>a,.fin-branches li>span{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);text-decoration:none}
.fin-branches li>a:hover{border-color:var(--color-primary-50);background:var(--color-primary-25)}
.fin-branches .fin-num{font-size:var(--fs-body-lg,16px);font-weight:var(--fw-bold)}
.fin-tx,.fin-adjust,.fin-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fin-tx li,.fin-adjust li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:var(--border-default) solid var(--color-border)}
.fin-tx li:first-child,.fin-adjust li:first-child{border-top:0}
.fin-tx li>.stack,.fin-adjust li>.stack{flex:1;min-width:0}
.fin-log li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:8px 0;border-top:var(--border-default) solid var(--color-border)}
.fin-log li:first-child{border-top:0}
.fin-log li .t-caption{margin-inline-start:auto}
.fin-tx li.is-void,.is-void{color:var(--color-text-muted);text-decoration:line-through}
.fin-breakdown .fin-net{border-top:var(--border-default) solid var(--color-border);padding-top:10px}
.fin-breakdown .fin-net .kv__key,.fin-breakdown .fin-net .kv__val{font-weight:var(--fw-bold);color:var(--color-text)}
.value-success{color:var(--color-success,#1c7c3f)}
.fin-adjust-form{padding-top:12px;border-top:var(--border-default) solid var(--color-border)}
.fin-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fin-job{display:flex;flex-direction:column;gap:8px}
.fin-job.is-open{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.fin-job__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fin-job__head>.stack{flex:1 1 220px;min-width:0}
.fin-job__log summary{cursor:pointer;color:var(--color-text-muted)}
/* «راتبي» */
.my-slips li{padding:0;border-top:0}
.my-slip{display:flex;flex:1;align-items:center;gap:12px;padding:12px 4px;border-top:var(--border-default) solid var(--color-border);color:var(--color-text);text-decoration:none}
.my-slips li:first-child .my-slip{border-top:0}
.my-slip:hover{background:var(--color-surface-muted)}
.my-slip>.stack{flex:1;min-width:0}
.my-receipt{display:block;max-width:100%;max-height:420px;border-radius:var(--radius-md);border:var(--border-default) solid var(--color-border)}
.fin-state-select{flex:0 1 280px}
.my-slips li{display:flex;align-items:center;gap:4px}
@media (max-width:767.98px){.fin-state-select{flex:1 1 100%}}
/* «إيصال الراتب» */
.payslip__table{width:100%;border-collapse:collapse}
.payslip__table th,.payslip__table td{padding:10px 12px;border-bottom:var(--border-default) solid var(--color-border);text-align:start;vertical-align:top}
.payslip__table thead th{background:var(--color-surface-muted);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.payslip__table td:last-child,.payslip__table th:last-child{text-align:end;white-space:nowrap}
.payslip__table tfoot td{font-weight:var(--fw-semibold)}
.payslip__net td{font-weight:var(--fw-bold);background:var(--color-primary-25);color:var(--color-primary-600)}
/* Settings → «صلاحيات المسؤول المالي» */
.fin-perm__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.fin-perm__section{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md)}

/* «الاحتياجات والمشتريات» */
.need-list,.need-lines,.need-pick,.need-catalog,.need-code__items,.need-purchase__lines{list-style:none;margin:0;padding:0}
.need-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.need-card{gap:8px;color:inherit;text-decoration:none;height:100%}
.need-card:hover{border-color:var(--color-primary-200)}
.need-card__head,.need-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.need-card__foot .icon{vertical-align:-2px}
.need-wallet-strip{flex-direction:row;align-items:center;gap:12px;color:inherit;text-decoration:none}
.need-wallet-strip>.stack{flex:1}
.need-form{padding-bottom:88px}
.need-quick{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;align-items:center}
.need-quick__qty,.need-line__qty,.need-pick__qty{display:flex;align-items:center;gap:6px}
.need-quick__qty input,.need-line__qty input,.need-pick__qty input{min-width:0;width:100%}
.need-lines{display:flex;flex-direction:column}
.need-line{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:var(--border-default) solid var(--color-border)}
.need-line:first-child{border-top:0}
.need-line.is-new{animation:need-flash 1.2s ease}
@keyframes need-flash{from{background:var(--color-primary-25)}to{background:transparent}}
.need-line__main{display:flex;align-items:center;gap:6px}
.need-line__main>.stack{min-width:0}
.need-line__qty{width:130px;flex:none}
.need-line__photo{cursor:pointer}
.need-line__photo.has-photo{color:var(--color-primary-600);background:var(--color-primary-25)}
.need-line__thumb{position:relative;width:64px;height:64px;border-radius:var(--radius-md);overflow:hidden;border:var(--border-default) solid var(--color-border)}
.need-line__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.need-line__thumb-x{position:absolute;top:2px;inset-inline-end:2px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;line-height:20px;padding:0;cursor:pointer}
.need-sticky{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;gap:8px;padding:12px 0;background:linear-gradient(to top,var(--color-surface) 70%,transparent)}
.need-step{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;border-color:var(--color-primary-200);background:var(--color-primary-25)}
.need-step__actions{display:flex;gap:8px;flex-wrap:wrap}
.need-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.need-item{display:flex;align-items:center;gap:10px}
.need-item__img{width:40px;height:40px;flex:none;border-radius:var(--radius-md);overflow:hidden}
.need-item__img img{width:100%;height:100%;object-fit:cover;display:block}
.need-facts{margin:0;display:flex;flex-direction:column;gap:8px}
.need-facts>div{display:flex;justify-content:space-between;gap:12px}
.need-facts dt{color:var(--color-text-muted)}
.need-facts dd{margin:0;text-align:end}
.need-purchase{display:flex;flex-direction:column;gap:8px;padding:12px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-md)}
.need-purchase.is-rejected{opacity:.65}
.need-purchase__head{display:flex;align-items:center;gap:8px}
.need-purchase__head>.stack{flex:1;min-width:0}
.need-purchase__lines li,.need-code__items li{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.need-code{border-color:var(--color-warning-300,var(--color-border))}
.need-code__form .control{flex:1}
.need-code__more{display:flex;gap:12px;flex-wrap:wrap}
.need-pick{display:flex;flex-direction:column}
.need-pick__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:var(--border-default) solid var(--color-border)}
.need-pick__row:first-child{border-top:0}
.need-pick__row.is-off .need-pick__check .stack{opacity:.55}
.need-pick__check{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}

.need-pick__qty{width:140px;flex:none}
.need-buy{flex-wrap:wrap}
.need-buy__inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1 1 360px}
.need-buy__cell{display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
.need-buy.is-off .need-buy__inputs{opacity:.5}
.need-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.need-sum>div{display:flex;flex-direction:column;gap:2px}
.need-sum:not(.need-sum--cards)>div{padding:10px 12px;border-radius:var(--radius-md);background:var(--color-surface-muted)}
.need-big{font-size:var(--fs-h3,inherit)}
.need-amount{display:flex;gap:8px;align-items:center}
.need-amount>.control{flex:1;min-width:0}
.need-amount>.btn{flex:none;white-space:nowrap}
.need-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.need-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.need-catalog__item{flex-direction:row;align-items:center;gap:12px}
.need-catalog__item.is-off{opacity:.7}
.need-catalog__img{width:56px;height:56px;flex:none;border-radius:var(--radius-md);overflow:hidden;display:grid;place-items:center;background:var(--color-surface-muted);color:var(--color-text-muted)}
.need-catalog__img img{width:100%;height:100%;object-fit:cover}
.need-current-img img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-md)}
.d-block{display:block}
@media (max-width:1023px){.need-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .need-quick{grid-template-columns:minmax(0,1fr) 110px}
  .need-quick>.btn{grid-column:1/-1}
  .need-line__qty{width:104px}
  body:has(.bottom-nav) .need-sticky{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .need-sticky>.btn{flex:1}
  .need-step__actions{width:100%}
  .need-step__actions>.btn{flex:1}
  .need-sum{grid-template-columns:1fr 1fr}
  .need-sum>div:last-child{grid-column:1/-1}
  .need-2{grid-template-columns:1fr}
  .need-amount{flex-wrap:wrap}
  .need-amount>.control{flex:1 1 100%}
  .need-amount>.btn{flex:1 1 100%;justify-content:center}
  .need-buy__inputs{flex-basis:100%}
  .need-pick__qty{width:110px}
}
.need-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.need-unit{flex:none;max-width:90px;border:0;background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--fs-caption);cursor:pointer;padding:0 2px}
.need-unit[hidden]{display:none}
/* the request page: summary, progress, the receipt code */
.need-summary{gap:16px}
.need-summary__facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.need-summary__facts>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.need-summary__progress{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:12px;border-top:var(--border-default) solid var(--color-border)}
.need-summary__progress>div{display:flex;flex-direction:column;gap:6px}
.need-bar{display:block;height:8px;border-radius:var(--radius-full);background:var(--color-surface-muted);overflow:hidden}
.need-bar>span{display:block;height:100%;border-radius:inherit;background:var(--color-primary-600)}
.need-bar--success>span{background:var(--color-success-600,#16a34a)}
.need-code__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}
.need-code__side,.need-code__main{display:flex;flex-direction:column;gap:12px}
.need-code__box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;border-radius:var(--radius-card);background:var(--color-primary-25);border:var(--border-default) dashed var(--color-primary-200)}
.need-code__digits{display:flex;gap:8px;justify-content:center}
.need-code__digits>span{display:grid;place-items:center;width:52px;height:64px;border-radius:12px;background:var(--color-surface);border:var(--border-default) solid var(--color-primary-200);font-size:34px;font-weight:var(--fw-bold);color:var(--color-primary-600);font-variant-numeric:tabular-nums}
.need-code__form{display:flex;gap:8px}
@media (max-width:1279px){.need-summary__facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023px){.need-code__body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .need-summary__facts{grid-template-columns:1fr 1fr}
  .need-summary__progress{grid-template-columns:1fr}
  .need-code__digits{gap:6px}
  .need-code__digits>span{width:42px;height:54px;font-size:28px}
  .need-code__form{flex-direction:column}
}
/* «الطلاب»: the student's fee months */
.student-head{display:flex;gap:16px;align-items:flex-start}
.student-head>.need-summary__facts{flex:1}
.fee-months{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fee-month{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:var(--border-default) solid var(--color-border)}
.fee-month:first-child{border-top:0}
.fee-check{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:24px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.fee-check.is-off,.fee-check.is-locked{cursor:default}
.fee-check__box{width:20px;height:20px;flex:none;border:1px solid #c6c6c6;border-radius:var(--radius-sm);background:var(--color-surface);display:grid;place-content:center;transition:background var(--transition-fast),border-color var(--transition-fast)}
.fee-check.is-on .fee-check__box{background:var(--color-primary);border-color:var(--color-primary)}
.fee-check.is-on .fee-check__box::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.fee-check.is-locked .fee-check__box{opacity:.6}
.fee-check:not(.is-off):not(.is-locked):hover .fee-check__box{border-color:var(--color-primary)}
.fee-check:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
/* «الأقساط»: the plans tree */
.fee-total-row td{font-weight:var(--fw-semibold);background:var(--color-surface-muted)}
@media (max-width:767px){.student-head{flex-direction:column}}
.grid-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1280px){.grid-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.grid-stats--3{grid-template-columns:1fr}}
/* the menu's fold / open button: just the blue icon, no circle (open and folded) */
.sidebar .sidebar__toggle,.sidebar .sidebar__toggle:hover,.sidebar .sidebar__toggle:active{background:transparent;color:var(--color-primary);box-shadow:none}
/* phones / tablets: the logo button in the top bar — round, on white */
.topbar__brand{border-radius:50%;background:var(--color-surface);width:var(--size-control);height:var(--size-control)} /* the size of the search circle beside it */
/* ordering a reference list by hand (js/reorder.js): the ⋮⋮ handle on a computer, ⋯ «نقل لأعلى / لأسفل» on phones and tablets */
.col-handle{width:36px;padding-inline-end:0 !important}
.reorder-handle{display:none;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--color-text-muted);cursor:grab;touch-action:none}
.reorder-handle:hover{background:var(--color-surface-muted);color:var(--color-text)}
.flip-up{transform:rotate(180deg)}
tr.is-dragging{opacity:.65;background:var(--color-primary-25)}
html.is-reordering,html.is-reordering *{cursor:grabbing !important;user-select:none}
@media (hover:hover) and (pointer:fine){.reorder-handle{display:inline-grid}.reorder-touch{display:none}}
@media not ((hover:hover) and (pointer:fine)){.col-handle{display:none}}

/* top bar «حسابي»: the initial in blue on the same circle as the bell / help buttons */
.topbar__initial{background:none!important;color:var(--color-primary)}

/* Settings → «شكل المساعد»: the two choices with a small preview; the upload shows when «صورة» is picked */
.ai-look__card{align-items:center}
.ai-look__preview{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:var(--radius-md);background:var(--color-surface-muted);color:var(--color-text-muted);overflow:hidden}
.ai-look__preview .ai-orb{--s:40px}
.ai-look__preview img{max-width:100%;max-height:100%;object-fit:contain}
.ai-look:has(input[name="assistant_look"][value="orb"]:checked) .ai-look__upload{display:none}

/* «الحسابات البنكية»: the open / locked bar, the IBAN in groups of four */
.card.bank-open{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;text-align:start}
.bank-open__icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--color-surface-muted)}
.bank-open__icon.tone-success{background:var(--color-success-50,#ecfdf3)}
.bank-iban{white-space:nowrap;letter-spacing:.02em}
@media (max-width:767px){.bank-open > .btn{width:100%}}

/* Date / time picker (js/pickers.js): the field opens our panel (computer: under it; phone: a sheet from the bottom) */
.control--picker{cursor:pointer}
.control--picker input[type=date],.control--picker input[type=time]{pointer-events:none}
.control--picker:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.control--picker.is-picking{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-25)}
.pk-panel{position:fixed;z-index:120;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:12px;padding:20px;box-shadow:0 4px 12px rgba(16,24,40,.07);max-height:calc(100vh - 24px);overflow:auto;animation:pop .12s ease-out}
.pk-sheet-head{display:none}
.pk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pk-chip{height:34px;padding:0 12px;border-radius:var(--radius-full);border:var(--border-default) solid var(--color-border);background:var(--color-surface);font:inherit;font-size:var(--fs-body-sm);color:var(--color-text);cursor:pointer}
.pk-chip:hover{border-color:var(--color-primary);color:var(--color-primary-600)}
.pk-chip.is-on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pk-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pk-month__title{font-weight:var(--fw-bold)}
.pk-nav{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--color-surface-muted);color:var(--color-text);cursor:pointer}
.pk-nav svg{width:20px;height:20px}
.pk-nav:hover:not(:disabled){background:var(--color-primary-25);color:var(--color-primary-600)}
.pk-nav:disabled{opacity:.35;cursor:default}
.pk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.pk-wd{font-size:var(--fs-caption);color:var(--color-text-muted);padding:4px 0}
.pk-day{height:40px;border:0;border-radius:12px;background:none;font:inherit;color:var(--color-text);cursor:pointer}
.pk-day:hover:not(:disabled){background:var(--color-primary-25);color:var(--color-primary-600)}
.pk-day.is-off{color:var(--color-text-muted)}
.pk-day.is-today{box-shadow:inset 0 0 0 1px var(--color-primary);color:var(--color-primary-600);font-weight:var(--fw-bold)}
.pk-day.is-on{background:var(--color-primary);color:#fff;box-shadow:none;font-weight:var(--fw-bold)}
.pk-day:disabled{opacity:.3;cursor:default}
.pk-preview{margin:0 0 12px;text-align:center;font-size:28px;font-weight:var(--fw-bold);line-height:1.2}
.pk-preview small{margin-inline-start:6px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--color-text-muted)}
.pk-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:12px;border-radius:14px;background:var(--color-surface-muted)}
.pk-seg button{height:36px;border:0;border-radius:11px;background:none;font:inherit;color:var(--color-text-muted);cursor:pointer}
.pk-seg button.is-on{background:var(--color-surface);color:var(--color-primary-600);font-weight:var(--fw-bold);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.pk-sub{margin:0 0 6px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.pk-times{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:12px}
.pk-t{height:42px;border:var(--border-default) solid var(--color-border);border-radius:12px;background:var(--color-surface);font:inherit;color:var(--color-text);cursor:pointer}
.pk-t:hover{border-color:var(--color-primary);color:var(--color-primary-600)}
.pk-t.is-on{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:var(--fw-bold)}
.pk-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:var(--border-default) solid var(--color-border)}
.pk-foot__btn{min-width:88px}
.pk-scrim{position:fixed;inset:0;z-index:119;background:var(--color-scrim);animation:fade .15s ease-out}
@media (max-width:767.98px){
  .pk-panel{inset:auto 0 0 0;width:auto!important;top:auto!important;left:0!important;border-radius:12px 12px 0 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));max-height:88vh;animation:pk-up .2s ease-out}
  .pk-sheet-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
  .pk-sheet-head i{width:40px;height:4px;border-radius:4px;background:var(--color-border)}
  .pk-day{height:46px}
  .pk-times{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pk-t{height:48px}
  .pk-foot__btn{flex:1 1 0;min-width:0} /* «مسح» and «تم» side by side, the same width */
}
@keyframes pk-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}.bank-copy .kv__val{display:flex;align-items:center;justify-content:flex-end;gap:4px}

/* Amounts (Money::format): the number with the currency symbol small beside it, always on its left — sized to the number */
.money{display:inline-flex;align-items:baseline;gap:.3em;direction:rtl;unicode-bidi:isolate;white-space:nowrap}
.money__cur{font-size:.68em;font-weight:var(--fw-medium);opacity:.85}

/* «نسخ من جدول آخر» → the preview of the week (read only) */
.tt-copy-preview{display:flex;flex-direction:column;gap:10px;padding:14px;border:var(--border-default) dashed var(--color-primary-100);border-radius:var(--radius-card);background:var(--color-primary-10);transition:opacity .15s}
.tt-copy-preview.is-loading{opacity:.55}
.tt-copy-preview__hint{display:flex;align-items:center;gap:8px;margin:0;color:var(--color-text-muted)}
.tt-copy-preview__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tt-copy-preview__head .tag{display:inline-flex;align-items:center;gap:4px}
.tt-copy-preview__grid{background:var(--color-surface);border-radius:12px;overflow:hidden}
.tt-copy-preview__grid .tt-table td,.tt-copy-preview__grid .tt-table th{pointer-events:none} /* read only, the grid still scrolls */

/* A button that uses the AI: the «AI-مميز» label on its corner (like the ✨ button's «AI» in the top bar) */
.btn--ai{position:relative;overflow:visible}
.ai-feature-chip{position:absolute;top:-9px;inset-inline-start:12px;padding:1px 8px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-on-primary,#fff);font-size:10px;line-height:14px;font-weight:var(--fw-bold);white-space:nowrap;pointer-events:none;z-index:2}

/* ===== The fold tab (≥1280): under the page's top edge on the menu's side (behind the page: z 1 < 2), as high as the logo
   area (the top bar); --show px of it peek out. Hover: grows over the menu up to the logo's mark and says «طي القائمة».
   A small concave curve joins it to the page below (12px — it ends before the tab's own 14px corner, so nothing is cut). ===== */
.sb-tab{display:none}
@media (min-width:1280px){
  .app{position:relative}
  .app__main{position:relative;z-index:2}
  .sb-tab{--sb:var(--sidebar-width);--show:28px;display:block;position:fixed;z-index:1;top:var(--sb-tab-top,12px); /* fixed: stays in view while the page scrolls — level with the sticky top bar (12px → 0 as the page scrolls, js/app.js) */right:calc(var(--sb) - var(--show));width:calc(var(--show) * 2);height:calc(var(--topbar-height,72px) - 12px); /* + its 12px curve = the top bar's height */
    padding:0;border:0;border-radius:0 14px 14px 0;background:var(--sb-tab-bg,var(--color-primary));color:#fff;cursor:pointer;transition:right .25s ease,width .25s ease,background .15s}
  .app.is-sb-collapsed .sb-tab{--sb:var(--rail-width)}
  .sb-tab__arrow{position:absolute;top:50%;right:calc(var(--show) / 2);width:18px;height:18px;transform:translate(50%,-50%);transition:transform .3s,right .25s}
  .app.is-sb-collapsed .sb-tab__arrow{transform:translate(50%,-50%) rotate(180deg)}
  .sb-tab__label{position:absolute;top:50%;right:34px;transform:translateY(-50%);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
  .sb-tab::after{content:"";position:absolute;top:100%;right:calc(var(--show) - 12px);width:12px;height:12px;pointer-events:none;
    background:radial-gradient(circle at 100% 100%,transparent 11.25px,var(--sb-tab-bg,var(--color-primary)) 12px);transition:opacity .1s}
  .sb-tab:hover{--sb-tab-bg:var(--color-primary-600)}
  .sb-tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
  /* open menu, hovered: grows over it (the logo's mark stays in view) and says «طي القائمة» */
  .app:not(.is-sb-collapsed) .sb-tab:is(:hover,:focus-visible){--show:112px} /* just enough for the arrow and «طي القائمة» */
  .app:not(.is-sb-collapsed) .sb-tab:is(:hover,:focus-visible) .sb-tab__arrow{right:16px}
  .app:not(.is-sb-collapsed) .sb-tab:is(:hover,:focus-visible) .sb-tab__label{opacity:1;transition-delay:.1s}
  .app:not(.is-sb-collapsed) .sb-tab:is(:hover,:focus-visible)::after{opacity:0}
  /* folded: the logo stays, centred in the room beside the tab */
  .app.is-sb-collapsed .sidebar__brand{padding-inline-end:22px;padding-top:0;padding-bottom:32px} /* the logo level with the tab, the icons below its curve (12px apart) */
}
/* «مساعد عبقري»: the school's mascot instead of the ✨ — the top bar button and the panel's head (a light-primary circle, same size) */
.ai-open-btn .ai-mascot{width:30px;height:30px;object-fit:contain;display:block}
.assistant__logo{background:var(--color-primary-25)!important;border-radius:50%;overflow:hidden}
.assistant__logo img{width:30px;height:30px;object-fit:contain;display:block}

/* Settings → «أيقونة المساعد»: the current icon, as on the top bar button */
.ai-icon-preview{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;background:var(--color-primary-25)}
.ai-icon-preview img{width:40px;height:40px;object-fit:contain}

/* «مساعد عبقري»: the bottom part (quick questions + the box) rounded 16px at its top corners over the conversation, and
   «أسئلة سريعة» with an arrow that shows / hides the questions */
.assistant__foot{position:relative;z-index:1;margin-top:-16px;border-top:0;border-radius:16px 16px 0 0;box-shadow:0 -4px 14px rgba(16,24,40,.06)}
.assistant__body{padding-bottom:32px}
.ai-chips-toggle{display:inline-flex;align-items:center;gap:6px;align-self:center;height:30px;padding:0 20px;border:var(--border-default) solid var(--color-primary-100);background:var(--color-primary-25);font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-primary-600);cursor:pointer;border-radius:var(--radius-full)} /* a chip in the middle, blue (text + arrow), 20px each side */
.ai-chips-toggle:hover{background:var(--color-primary-50);border-color:var(--color-primary)}
.ai-chips-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.ai-chips-toggle__chev{transition:transform .2s}
.ai-chips-toggle[aria-expanded="false"] .ai-chips-toggle__chev{transform:rotate(180deg)}
.ai-chips[hidden]{display:none}
/* «تقارير المتابعة اليومية»: the chip that marks a task asking for one (stands out: a violet → blue gradient, white),
   and the report card on the task page (amber edge while waiting) */
.tag--followup{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:var(--radius-full);background:linear-gradient(135deg,#7a5af8,var(--color-primary));color:#fff;font-weight:var(--fw-regular)}
.tag--followup .icon{width:14px;height:14px}
.fu-card{border:var(--border-default) solid var(--color-primary-100)}
.fu-card.is-waiting{border-color:var(--color-warning,#f79009)}
.choice-cards:has(> [hidden]){grid-template-columns:1fr} /* one choice left (e.g. «مهمة مدرسية» for a recurring task): full width */

/* The task form: «كيف تنشئ مهمة؟» and «قبل الإرسال تأكّد من» after the form on phones only (tablet / computer as everywhere) */
@media (max-width:767.98px){.form-layout--guide-last > .form-layout__guide{order:2}}

/* «التقارير اليومية» → reactions: chips «ممتاز 👏» (General Administration taps one — it pops and its emoji floats up),
   and the reactions received («ممتاز 👏 · الاسم») */
.dr-reactions{display:flex;flex-direction:column;gap:12px}
.dr-react-chips{display:flex;flex-wrap:wrap;gap:8px}
.dr-react{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);font:inherit;font-weight:var(--fw-semibold);color:var(--color-text);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dr-react:hover{border-color:var(--color-primary);background:var(--color-primary-10)}
.dr-react:hover .dr-react__emoji{transform:scale(1.25) rotate(-8deg)}
.dr-react.is-on{border-color:var(--color-primary);background:var(--color-primary-25);color:var(--color-primary-600)}
.dr-react:disabled{cursor:progress}
.dr-react__emoji{font-size:18px;line-height:1;transition:transform .15s}
.dr-react.is-pop{animation:dr-pop .35s ease-out}
@keyframes dr-pop{40%{transform:scale(1.15)}100%{transform:none}}
.dr-react-fly{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-50%);animation:dr-fly 1.1s ease-out forwards}
@keyframes dr-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1;transform:translate(-50%,-80%) scale(1.1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(1) rotate(var(--rot))}}
.dr-reacted{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.dr-reacted__item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);background:var(--color-primary-10);border:var(--border-default) solid var(--color-primary-100)}
.dr-reacted__emoji{font-size:16px;line-height:1}
/* «الإعلانات العامة»: a feed of posts (a centred column on computers; edge to edge on phones, like an app), the category
   chip, one picture shown whole / a gallery, reactions, «أقر بالاطلاع», comments as bubbles, and the home page tiles */
.ann-feed{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:720px;margin-inline:auto}
.ann-card{background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-card);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;position:relative}
.ann-card.is-unread{border-color:var(--color-primary-100)}
.ann-card.is-pinned{background:linear-gradient(180deg,var(--color-primary-10),var(--color-surface) 120px)}
.ann-head{display:flex;align-items:center;gap:10px;min-width:0}
.ann-head__logo{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--color-primary-25);overflow:hidden;border:var(--border-default) solid var(--color-border)}
.ann-head__logo img{width:30px;height:30px;object-fit:contain}
.ann-head__text{display:flex;flex-direction:column;min-width:0;flex:1}
.ann-head__name{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-bold)}
.ann-head__meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ann-head__end{display:flex;align-items:center;gap:6px;flex:none}
.ann-pin{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary)}
.ann-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-primary);flex:none}
.ann-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.ann-card__link{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.ann-card__link:hover .ann-card__title{color:var(--color-primary)}
.ann-card__title{margin:0;font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);font-weight:var(--fw-bold);transition:color var(--transition-fast)}
.ann-card__body{margin:0;color:var(--color-text);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ann-card__text{white-space:normal;line-height:1.9;overflow-wrap:anywhere}
.ann-card__media{display:flex;flex-direction:column;gap:10px}
.ann-chips{display:flex;flex-wrap:wrap;gap:8px}
.ann-file-chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding-block:0;padding-inline:6px 14px;border-radius:var(--radius-full);border:var(--border-default) solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-weight:var(--fw-regular);text-decoration:none;transition:border-color var(--transition-fast),background var(--transition-fast)}
.ann-file-chip:hover{border-color:var(--color-primary);background:var(--color-primary-10)}
.ann-file-chip__icon{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--color-primary-25);color:var(--color-primary)}
.ann-file-chip__icon img{width:100%;height:100%;object-fit:cover}
.ann-file-chip__count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;display:inline-grid;place-items:center;font-size:var(--fs-caption);background:var(--color-primary);color:var(--color-on-primary)}
.ann-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ann-thumbs__item{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--color-surface-muted)}
.ann-thumbs__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ann-thumbs__item:hover img{transform:scale(1.04)}
.ann-ack{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--color-warning-bg)}
[dir=rtl] .ann-ack{padding:8px 12px 8px 8px}
.ann-ack__text{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:var(--fs-body-sm);color:var(--color-text)}
.ann-ack .btn{flex:none;width:auto}
.ann-ack__text .icon{color:var(--color-warning);flex:none}
.ann-acked{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-success)}
.ann-card__stats{display:flex;align-items:center;gap:12px;min-height:24px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.ann-card__stats:has(.ann-sum[hidden]:only-child){display:none}
.ann-sum{display:inline-flex;align-items:center;gap:6px}
.ann-sum[hidden]{display:none}
.ann-sum__emojis{display:inline-flex}
.ann-sum__emojis i{font-style:normal;font-size:16px;line-height:1;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--color-surface);border:2px solid var(--color-surface);box-shadow:0 0 0 1px var(--color-border)}
.ann-sum__emojis i+i{margin-inline-start:-6px}
.ann-stat{color:var(--color-text-muted)}
.ann-stat:hover{color:var(--color-primary)}
.ann-card__actions{display:flex;gap:4px;border-top:var(--border-default) solid var(--color-border);padding-top:8px;margin-bottom:-6px}
.ann-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border:0;border-radius:10px;background:none;font:inherit;font-weight:var(--fw-semibold);color:var(--color-text-muted);cursor:pointer;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast)}
.ann-act:hover{background:var(--color-surface-muted);color:var(--color-text)}
.ann-act.is-on{color:var(--color-primary)}
.ann-act__emoji{font-size:18px;line-height:1}
.ann-act__emoji:empty{display:none}
.ann-react{display:flex;flex-wrap:wrap;gap:8px}
.ann-react[hidden]{display:none}
.ann-card .ann-react[data-react-bar][hidden]+*{margin-top:0}
.ann-react__btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);font:inherit;font-weight:var(--fw-semibold);color:var(--color-text);cursor:pointer;transition:border-color .15s,background .15s}
.ann-react__btn:hover{border-color:var(--color-primary);background:var(--color-primary-10)}
.ann-react__btn:hover .ann-react__emoji{transform:scale(1.25) rotate(-8deg)}
.ann-react__btn.is-on{border-color:var(--color-primary);background:var(--color-primary-25);color:var(--color-primary-600)}
.ann-react__btn:disabled{cursor:progress}
.ann-react__btn.is-pop{animation:dr-pop .35s ease-out}
.ann-react__emoji{font-size:18px;line-height:1;transition:transform .15s}
.ann-reactions{display:flex;flex-direction:column;gap:10px;border-top:var(--border-default) solid var(--color-border);padding-top:12px}
.ann-who[open]>.chip-toggle{margin-bottom:10px}
.ann-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ann-people__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:var(--border-default) solid var(--color-border)}
.ann-people__row:first-child{border-top:0}
.ann-state{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.ann-comments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ann-comment{display:flex;align-items:flex-start;gap:10px;scroll-margin-top:calc(var(--topbar-height) + 16px)}
.ann-comment:target .ann-comment__bubble{box-shadow:0 0 0 1px var(--color-primary-100)}
.ann-comment__bubble{flex:1;min-width:0;padding:10px 14px;border-radius:4px 16px 16px 16px;background:var(--color-surface-muted)}
[dir=rtl] .ann-comment__bubble{border-radius:16px 4px 16px 16px}
.ann-comment__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ann-comment__del{margin-inline-start:auto}
.ann-comment__body{margin:4px 0 0;overflow-wrap:anywhere}
.ann-comment-form{display:flex;align-items:flex-end;gap:10px;padding-top:12px;border-top:var(--border-default) solid var(--color-border);scroll-margin-top:calc(var(--topbar-height) + 16px)}
.ann-comment-form .control--textarea textarea{min-height:44px}
.ann-comment-form__send{background:var(--color-primary);color:var(--color-on-primary);border-radius:50%;width:44px;height:44px;flex:none}
.ann-comment-form__send:hover{background:var(--color-primary-600);color:var(--color-on-primary)}
[dir=rtl] .ann-comment-form__send .icon{transform:scaleX(-1)}
.ann-alert{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-card);background:var(--color-warning-bg);color:var(--color-text);text-decoration:none}
.ann-alert__icon{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--color-warning);color:#fff}
.ann-alert__go{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--color-surface);color:var(--color-text)}
.ann-search .control{background:var(--color-surface)}
.ann-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:calc(-1 * var(--page-padding-x));padding-inline:var(--page-padding-x)}
.ann-filters::-webkit-scrollbar{display:none}
.ann-filter{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-full);border:var(--border-default) solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);white-space:nowrap;text-decoration:none;flex:none}
.ann-filter:hover{border-color:var(--color-primary)}
.ann-filter.is-on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.ann-filter b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;font-size:var(--fs-micro);background:var(--color-primary-25);color:var(--color-primary)}
.ann-filter.is-on b{background:rgba(255,255,255,.25);color:inherit}
.ann-filter__dot{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.ann-filter__dot.tone-primary{background:var(--color-primary)}.ann-filter__dot.tone-info{background:var(--color-info)}.ann-filter__dot.tone-success{background:var(--color-success)}
.ann-filter__dot.tone-warning{background:var(--color-warning)}.ann-filter__dot.tone-error{background:var(--color-error)}.ann-filter__dot.tone-review{background:var(--color-tertiary-700)}.ann-filter__dot.tone-muted{background:var(--color-text-muted)}
.ann-filter.is-on .ann-filter__dot{background:#fff}
.ann-cat-pick{display:flex;flex-wrap:wrap;gap:8px}
.ann-cat-opt{position:relative;cursor:pointer}
.ann-cat-opt input{position:absolute;opacity:0;pointer-events:none}
.ann-cat-opt .ann-chip{height:34px;padding:0 16px;border:1px solid transparent;transition:border-color var(--transition-fast),transform var(--transition-fast)}
.ann-cat-opt input:checked+.ann-chip{border-color:currentColor;transform:scale(1.04)}
.ann-cat-opt input:focus-visible+.ann-chip{outline:2px solid var(--color-focus);outline-offset:2px}
.ann-audience{grid-template-columns:1fr 1fr}
.ann-form{max-width:820px;width:100%;margin-inline:auto}
/* the feed card, on a computer (mouse): the reactions float over the «تفاعل» button while hovering it */
@media (hover:hover) and (pointer:fine){
  .ann-card>.ann-react[data-react-bar]{position:absolute;bottom:60px;inset-inline-start:16px;z-index:5;flex-wrap:nowrap;gap:2px;padding:6px;background:var(--color-surface);border:var(--border-default) solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-popup);animation:ann-float-in .16s ease-out}
  .ann-card>.ann-react .ann-react__label{display:none}
  .ann-card>.ann-react .ann-react__btn{width:44px;height:44px;padding:0;justify-content:center;border:0;background:none}
  .ann-card>.ann-react .ann-react__btn.is-on{background:var(--color-primary-25)}
  .ann-card>.ann-react .ann-react__emoji{font-size:26px}
  .ann-card>.ann-react .ann-react__btn:hover .ann-react__emoji{transform:scale(1.35) translateY(-4px)}
}
@keyframes ann-float-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
/* phones: the feed edge to edge, like an app */
@media (max-width:767.98px){
  .ann-feed{gap:8px}
  .ann-feed>.ann-alert,.ann-feed>.ann-search,.ann-feed>.ann-filters{margin-bottom:4px}
  .ann-react__label{display:none}
  .ann-react{justify-content:space-between}
  .ann-react__btn{flex:1;justify-content:center;padding:0;height:44px}
  .ann-react__emoji{font-size:22px}
  .ann-audience{grid-template-columns:1fr}
}
/* form builders: items just added by «تعبئة ذكية» flash softly */
.eval-q.is-new{animation:eval-new 1.6s ease-out}
@keyframes eval-new{from{background:var(--color-primary-10)}to{background:transparent}}
/* «تقارير المتابعة اليومية»: a sent report's answers — numbered rows, the answer as a pill at the end; a written answer in a soft box under its item */
.fu-answers{list-style:none;margin:0;padding:0;border:var(--border-default) solid var(--color-border);border-radius:12px;overflow:hidden}
.fu-answer{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:var(--border-default) solid var(--color-border)}
.fu-answer:first-child{border-top:0}
.fu-answer:nth-child(even){background:var(--color-surface-muted)}
.fu-answer__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--color-primary-25);color:var(--color-primary);font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
.fu-answer__q{flex:1;min-width:0;line-height:1.7}
.fu-answer__a{flex:none;max-width:45%;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-semibold);text-align:center}
.fu-answer__a--none{background:var(--color-neutral-100);color:var(--color-text-muted);font-weight:var(--fw-regular)}
.fu-answer__stars{flex:none;color:#f5a524;letter-spacing:2px;font-size:16px;line-height:1}
.fu-answer__stars-off{color:var(--color-neutral-200)}
.fu-answer--long{flex-wrap:wrap}
.fu-answer__text{flex:1 1 100%;margin-inline-start:38px;padding:10px 12px;border-radius:10px;background:var(--color-surface);border:var(--border-default) solid var(--color-border);white-space:pre-line;line-height:1.8}
.fu-tally{display:flex;flex-wrap:wrap;gap:8px}
.fu-tally__item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);background:var(--color-primary-10);color:var(--color-text);font-size:var(--fs-body-sm)}
.fu-tally__item b{color:var(--color-primary)}
@media (max-width:767.98px){.fu-answer{padding:12px}.fu-answer__a{max-width:50%}}
/* while a file is made at the computer's width on a phone (js/app.js AbqariAtDesktop): the page is covered, so the switch isn't seen */
.export-cover{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--color-surface);color:var(--color-text);font-size:32px;font-weight:var(--fw-semibold)}
/* «الرئيسية» (dashboard/overview, js/home-board.js): one card anatomy everywhere — head (icon · title · link) → number
   (change · note) → chart (fixed height) → foot; «تحتاج انتباهك الآن», headline numbers, «متابعة المنصة» in tabs */
.hp-grid{display:grid;gap:var(--spacing-md);grid-template-columns:1fr}
@media (min-width:768px){.hp-grid--4{grid-template-columns:repeat(2,1fr)}.hp-grid--3,.hp-grid--2{grid-template-columns:1fr 1fr}}
@media (min-width:1280px){.hp-grid--4{grid-template-columns:repeat(4,1fr)}.hp-grid--3{grid-template-columns:repeat(3,1fr)}.hp-grid--main{grid-template-columns:5fr 8fr}}
.hp-wide{grid-column:1/-1}
.hp-card{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);min-width:0;color:inherit}
a.hp-card--link{text-decoration:none;transition:border-color var(--transition-fast)}
a.hp-card--link:hover{border-color:var(--color-primary-100)}
.hp-head{display:flex;align-items:center;gap:10px}
.hp-ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center}
.hp-ico .icon{width:18px;height:18px}
.hp-head h2,.hp-head h3{margin:0;font-size:var(--fs-body-md);font-weight:var(--fw-semibold);flex:1;min-width:0}
.hp-link{font-size:var(--fs-caption);color:var(--color-primary);text-decoration:none;white-space:nowrap}
.hp-sub{font-size:var(--fs-caption);color:var(--color-text-muted)}
.hp-empty{margin:0;padding:18px 0;text-align:center;font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.hp-metric{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hp-metric b{font-size:28px;font-weight:var(--fw-bold);line-height:1.1}
.hp-metric small{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.hp-metric--col{flex-direction:column;align-items:flex-start;gap:2px}
.hp-delta{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}
.hp-delta.up{background:var(--color-success-bg);color:var(--color-success)}
.hp-delta.down{background:var(--color-error-bg);color:var(--color-error)}
.hp-delta.flat{background:var(--color-neutral-100);color:var(--color-text-muted)}
.hp-viz{position:relative;min-height:0}
.hp-viz svg{display:block;width:100%;overflow:visible}
.hp-viz text{font-family:inherit}
.hp-bar{height:10px;border-radius:5px;background:var(--color-neutral-100);overflow:hidden;margin-top:auto}
.hp-bar span{display:block;height:100%;border-radius:5px;background:var(--color-primary)}
.hp-foot{margin-top:auto;font-size:var(--fs-caption);color:var(--color-text-muted);display:flex;gap:6px 14px;flex-wrap:wrap}
.hp-foot b{color:var(--color-text);font-weight:var(--fw-semibold)}
.hp-foot a{color:inherit;text-decoration:none}
.hp-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-caption);color:var(--color-text-muted);list-style:none;margin:0;padding:0}
.hp-legend li{display:inline-flex;align-items:center;gap:6px}
.hp-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.hp-legend b{color:var(--color-text)}
.hp-legend--col{flex-direction:column;gap:10px;font-size:var(--fs-body-sm);color:var(--color-text)}
.hp-legend--col li,.hp-legend--col li>a{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;color:inherit;text-decoration:none}
.hp-legend--col li span{display:inline-flex;align-items:center;gap:8px}
.hp-split{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hp-split>.hp-viz{flex:none}
.hp-split>.hp-legend{flex:1;min-width:140px}
.hp-attn{display:flex;flex-wrap:wrap;gap:8px}
.hp-attn a{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:6px 14px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;font-size:var(--fs-body-sm)}
.hp-attn a:hover{border-color:var(--color-primary)}
.hp-attn span{min-width:28px;height:28px;padding:0 8px;border-radius:14px;display:inline-grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-caption)}
.hp-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:14px;background:var(--color-surface-muted);border:1px solid var(--color-border)}
.hp-tabs::-webkit-scrollbar{display:none}
.hp-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:10px;background:none;font:inherit;font-weight:var(--fw-semibold);color:var(--color-text-muted);cursor:pointer;white-space:nowrap}
.hp-tab .icon{width:22px;height:22px}
/* the open tab shows its icon filled (like the side menu) */
.hp-tab .hp-tab__ico--on,.hp-tab[aria-selected=true] .hp-tab__ico:not(.hp-tab__ico--on){display:none}
.hp-tab[aria-selected=true] .hp-tab__ico--on{display:inline-block}
.hp-tab[aria-selected=true]{--icon-cut:var(--color-surface)} /* cut-outs = the white pill */
.hp-tab[aria-selected=true]{background:var(--color-surface);color:var(--color-primary);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.hp-panel{animation:hp-in .2s ease-out}
.hp-panel[hidden]{display:none}
@keyframes hp-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hp-heat{display:grid;gap:4px;align-items:center;font-size:var(--fs-caption)}
.hp-heat__name{color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:6px}
.hp-heat__day{color:var(--color-text-muted);text-align:center;white-space:nowrap;font-size:11px}
.hp-heat__cell{height:26px;border-radius:6px}
.hp-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--color-text-muted)}
.hp-status__pill{padding:3px 10px;border-radius:var(--radius-full);background:var(--color-primary-25);color:var(--color-primary);font-weight:var(--fw-semibold)}
.hp-stepper{list-style:none;margin:0;padding:0;display:flex}
.hp-stepper li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:var(--fs-caption);color:var(--color-text-muted)}
.hp-stepper li::before{content:"";position:absolute;top:13px;inset-inline-start:-50%;width:100%;height:2px;background:var(--color-neutral-100)}
.hp-stepper li:first-child::before{display:none}
.hp-stepper li.is-done::before,.hp-stepper li.is-now::before{background:var(--color-primary)}
.hp-stepper i{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:var(--fw-semibold);background:var(--color-surface);border:1px solid var(--color-border)}
.hp-stepper .is-done i{background:var(--color-success);border-color:var(--color-success);color:#fff}
.hp-stepper .is-now i{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.hp-stepper .is-now span{color:var(--color-primary);font-weight:var(--fw-semibold)}
.hp-kv{margin:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--color-surface-muted)}
.hp-kv div{display:flex;justify-content:space-between;font-size:var(--fs-body-sm)}
.hp-kv dt{color:var(--color-text-muted)}
.hp-kv dd{margin:0;font-weight:var(--fw-semibold);direction:ltr}
.hp-kv .is-up{color:var(--color-success)}
.hp-kv .is-down{color:var(--color-error)}
.hp-tip{position:fixed;z-index:500;pointer-events:none;padding:8px 12px;border-radius:10px;background:var(--color-text);color:var(--color-surface);font-size:var(--fs-caption);line-height:1.6;box-shadow:var(--shadow-popup);white-space:nowrap;transform:translate(-50%,calc(-100% - 12px))}
@media (max-width:767.98px){
  .hp-grid--4{grid-template-columns:1fr 1fr;gap:10px}
  .hp-grid--4 .hp-card{padding:14px;gap:8px}
  .hp-grid--4 .hp-metric b{font-size:22px}
  .hp-grid--4 .hp-metric small,.hp-grid--4 .hp-delta-note{display:none}
  .hp-grid--4 .hp-head h3{font-size:var(--fs-caption)}
  .hp-grid--4 .hp-ico{width:28px;height:28px}
}
/* «بوابة التوظيف» — public pages (layouts/public, careers/*): logo bar, a gradient hero, search, job cards, the job page,
   the application form, the confirmation popup and the tracking page */
.cr-page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-background)}
.cr-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px;padding:0 max(16px,calc((100% - 1160px)/2));background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.cr-topbar__brand img{height:44px;width:auto;display:block}
.cr-topbar__nav a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--radius-full);color:var(--color-text);text-decoration:none;font-weight:var(--fw-semibold)}
.cr-topbar__nav a[aria-current=page]{background:var(--color-primary-25);color:var(--color-primary)}
.cr-main{flex:1;padding-bottom:48px}
.cr-footer{padding:20px 16px;text-align:center;font-size:var(--fs-caption);color:var(--color-text-muted);border-top:1px solid var(--color-border);background:var(--color-surface)}
.cr-hero{position:relative;overflow:hidden;padding:56px 16px 96px;color:#fff;background:linear-gradient(135deg,var(--color-primary-700) 0%,var(--color-primary) 45%,#6c3bf5 100%)}
.cr-hero::before,.cr-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.cr-hero::before{width:420px;height:420px;top:-180px;inset-inline-start:-120px}
.cr-hero::after{width:280px;height:280px;bottom:-140px;inset-inline-end:8%}
.cr-hero__inner{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cr-hero__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:rgba(255,255,255,.16);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);backdrop-filter:blur(4px)}
.cr-hero__badge--soft{background:var(--color-primary-25);color:var(--color-primary)}
.cr-hero__title{margin:0;font-size:clamp(26px,4.4vw,40px);line-height:1.3;font-weight:var(--fw-bold)}
.cr-hero__intro{margin:0;font-size:var(--fs-body-lg);line-height:1.9;opacity:.92}
.cr-wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.cr-wrap--narrow{max-width:820px;padding-top:24px;display:flex;flex-direction:column;gap:16px}
.cr-search{position:relative;z-index:2;margin-top:-56px;display:flex;gap:10px;flex-wrap:wrap;padding:14px;border-radius:20px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 6px 18px rgba(1,61,233,.06)}
.cr-search__q{flex:1 1 260px}
.cr-search__place{flex:0 1 220px}
.cr-search .btn{flex:none}
.cr-count{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 2px 14px;font-weight:var(--fw-semibold)}
.cr-count a{font-weight:var(--fw-regular);font-size:var(--fs-body-sm)}
.cr-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cr-job{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.cr-job:hover{border-color:var(--color-primary-100);transform:translateY(-3px);box-shadow:0 10px 24px rgba(1,61,233,.10)}
.cr-job__media{display:block;aspect-ratio:16/9;background:var(--color-primary-10);overflow:hidden}
.cr-job__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:639.98px){.cr-job__media:has(.cr-job__ph){aspect-ratio:auto;height:96px}}
.cr-detail__media--ph{aspect-ratio:auto;height:140px}
.cr-job__ph,.cr-detail__media--ph{display:grid;place-items:center;width:100%;height:100%;color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary-25),var(--color-primary-10))}
.cr-job__ph .icon{width:44px;height:44px}
.cr-job__body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.cr-job__title{font-size:var(--fs-body-lg);font-weight:var(--fw-bold);line-height:1.5}
.cr-job__place{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.cr-job__desc{font-size:var(--fs-body-sm);color:var(--color-text-muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-job__foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--color-border);font-size:var(--fs-caption);color:var(--color-text-muted)}
.cr-job__more{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:var(--radius-full);background:var(--color-primary-25);color:var(--color-primary-600);font-weight:var(--fw-semibold);transition:background .15s}
.cr-job:hover .cr-job__more{background:var(--color-primary);color:var(--color-on-primary)}
.cr-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 16px;text-align:center;border-radius:18px;background:var(--color-surface);border:1px solid var(--color-border)}
.cr-empty__icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary-25);color:var(--color-primary)}
.cr-empty h2{margin:6px 0 0;font-size:var(--fs-body-lg)}
.cr-empty p{margin:0;color:var(--color-text-muted)}
.cr-back{display:inline-flex;align-items:center;gap:4px;color:var(--color-primary);font-weight:var(--fw-semibold);text-decoration:none;align-self:flex-start}
.cr-detail{border-radius:20px;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border)}
.cr-detail__media{aspect-ratio:21/9;background:var(--color-primary-10)}
.cr-detail__media img{width:100%;height:100%;object-fit:cover;display:block}
.cr-detail__media--ph .icon{width:56px;height:56px}
.cr-detail__body{padding:22px;display:flex;flex-direction:column;gap:18px}
.cr-detail__title{margin:0;font-size:clamp(22px,3.4vw,30px);line-height:1.4}
.cr-detail__meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--color-text-muted);font-size:var(--fs-body-sm)}
.cr-detail__meta span{display:inline-flex;align-items:center;gap:6px}
.cr-section{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--color-border)}
.cr-section h2{margin:0;font-size:var(--fs-body-lg)}
.cr-text{line-height:1.9;overflow-wrap:anywhere}
.cr-reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cr-reqs li{display:flex;align-items:flex-start;gap:10px;line-height:1.8}
.cr-reqs .icon{color:var(--color-success);flex:none;margin-top:3px}
.cr-apply-bar{position:sticky;bottom:12px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.cr-apply-bar__text{display:flex;flex-direction:column;min-width:0}
.cr-apply-bar__text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-apply-bar__text span{font-size:var(--fs-caption);color:var(--color-text-muted)}
.cr-apply-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cr-apply-head h1{margin:0;font-size:clamp(22px,3.4vw,28px);line-height:1.4}
.cr-apply-head p{margin:0;color:var(--color-text-muted)}
.cr-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.cr-options{display:flex;flex-wrap:wrap;gap:8px}
.cr-option{position:relative;cursor:pointer}
.cr-option input{position:absolute;opacity:0;pointer-events:none}
.cr-option span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);transition:border-color .15s,background .15s}
.cr-option input:checked+span{border-color:var(--color-primary);background:var(--color-primary-25);color:var(--color-primary-600);font-weight:var(--fw-semibold)}
.cr-option input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:2px}
.cr-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.cr-stars input{position:absolute;opacity:0;pointer-events:none}
.cr-stars label{font-size:30px;line-height:1;color:var(--color-neutral-200);cursor:pointer;transition:color .1s}
.cr-stars input:checked~label,.cr-stars label:hover,.cr-stars label:hover~label{color:#f5a524}
.cr-file{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;border:1px dashed var(--color-primary-100);background:var(--color-primary-10);color:var(--color-primary);cursor:pointer;position:relative;overflow:hidden}
.cr-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cr-file.is-picked{border-style:solid;color:var(--color-text)}
.cr-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-terms{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--color-surface-muted);font:inherit;font-weight:var(--fw-semibold);color:var(--color-primary);cursor:pointer;text-align:start}
.cr-terms:hover{background:var(--color-primary-10)}
.cr-terms__chev{margin-inline-start:auto}
.cr-terms__text{margin:0}
.cr-agree{font-weight:var(--fw-semibold)}
.cr-submit{display:flex;justify-content:flex-start}
.cr-done{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(10,14,24,.55);animation:fade .2s ease-out}
.cr-done__box{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 22px;border-radius:24px;background:var(--color-surface);text-align:center;animation:cr-pop .25s ease-out}
.cr-done__icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--color-success-bg);color:var(--color-success)}
.cr-done__icon .icon{width:40px;height:40px}
.cr-done__box h2{margin:6px 0 0;font-size:var(--fs-h3)}
.cr-done__box p{margin:0;color:var(--color-text-muted);line-height:1.9}
.cr-done__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@keyframes cr-pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.cr-status-now{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cr-status-now__label{font-weight:var(--fw-semibold)}
.cr-status-now__chip{height:32px;padding:0 16px;font-size:var(--fs-body-sm)}
.cr-last{padding:12px 14px;border-radius:12px;background:var(--color-primary-10)}
.cr-last__label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--color-primary);font-weight:var(--fw-semibold)}
.cr-last p{margin:6px 0 0;line-height:1.9;overflow-wrap:anywhere}
.cr-note{margin:0;text-align:center;font-size:var(--fs-caption);color:var(--color-text-muted)}
/* the progress bar + the timeline (public tracking page and the staff application page) */
.rc-progress{display:flex;flex-direction:column;gap:14px}
.rc-progress__bar{height:8px;border-radius:4px;background:var(--color-neutral-100);overflow:hidden}
.rc-progress__bar span{display:block;height:100%;border-radius:4px;background:var(--color-primary);transition:width .4s}
.rc-progress__bar span.is-accepted{background:var(--color-success)}
.rc-progress__bar span.is-rejected{background:var(--color-error)}
.rc-steps{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.rc-steps li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:var(--fs-caption);color:var(--color-text-muted)}
.rc-steps i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:var(--fw-semibold);background:var(--color-surface);border:1px solid var(--color-border)}
.rc-steps span{overflow-wrap:anywhere}
.rc-steps .is-done i{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.rc-steps .is-now i{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-25)}
.rc-steps .is-now span{color:var(--color-primary);font-weight:var(--fw-semibold)}
.rc-steps .is-accepted i{background:var(--color-success);border-color:var(--color-success)}
.rc-steps .is-rejected i{background:var(--color-error);border-color:var(--color-error);color:#fff}
.rc-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rc-timeline__item{display:flex;gap:12px;position:relative;padding-bottom:16px}
.rc-timeline__item:not(:last-child)::before{content:"";position:absolute;top:16px;bottom:0;inset-inline-start:6px;width:1px;background:var(--color-border)}
.rc-timeline__dot{width:13px;height:13px;border-radius:50%;flex:none;margin-top:6px;position:relative;z-index:1}
.rc-timeline__dot.tone-primary{background:var(--color-primary)}.rc-timeline__dot.tone-info{background:var(--color-info)}.rc-timeline__dot.tone-success{background:var(--color-success)}
.rc-timeline__dot.tone-warning{background:var(--color-warning)}.rc-timeline__dot.tone-error{background:var(--color-error)}.rc-timeline__dot.tone-review{background:var(--color-tertiary-700)}.rc-timeline__dot.tone-muted{background:var(--color-text-muted)}
.rc-timeline__body{flex:1;min-width:0}
.rc-timeline__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc-timeline__comment{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--color-surface-muted);line-height:1.8;overflow-wrap:anywhere}
/* «التوظيف» (staff) */
.rc-statuses{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rc-statuses::-webkit-scrollbar{display:none}
.rc-status{flex:1 0 128px;display:flex;flex-direction:column;gap:6px;min-width:128px;padding:10px 14px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface);color:inherit;text-decoration:none}
.rc-status b{font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}
.rc-status__label{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--color-text-muted);white-space:nowrap}
.rc-status__dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.rc-status__dot.tone-muted{color:var(--color-text-muted)}
.rc-status.is-on{border-color:var(--color-primary);background:var(--color-primary-10)}
.rc-job-thumb{width:64px;height:40px;border-radius:8px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--color-primary-25);color:var(--color-primary)}
.rc-job-thumb img{width:100%;height:100%;object-fit:cover}
.rc-layout{display:grid;gap:var(--spacing-md);grid-template-columns:1fr}
@media (min-width:1024px){.rc-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.rc-side{position:sticky;top:calc(var(--topbar-height) + 16px)}}
@media (max-width:767.98px){
  .cr-hero{padding:40px 16px 84px}
  .cr-search .btn{flex:1 1 100%;justify-content:center}
  .cr-search__place{flex:1 1 100%}
  .cr-detail__body{padding:16px}
  .cr-apply-bar .btn{flex:none}
  .cr-submit .btn{flex:1;justify-content:center}
}
/* «إعدادات صفحة الوظائف»: the banner gradients to pick from */
.cr-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-swatch{position:relative;cursor:pointer}
.cr-swatch input{position:absolute;opacity:0;pointer-events:none}
.cr-swatch__fill{display:flex;align-items:flex-end;height:64px;padding:8px 10px;border-radius:12px;border:1px solid transparent;color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-semibold)}
.cr-swatch input:checked+.cr-swatch__fill{border-color:var(--color-text);outline:1px solid #fff;outline-offset:-3px}
.cr-swatch input:focus-visible+.cr-swatch__fill{outline:2px solid var(--color-focus)}
@media (max-width:479.98px){.cr-swatches{grid-template-columns:1fr 1fr}}
/* a chip that opens / closes what follows it (details > summary.chip-toggle) — like «أسئلة سريعة»; full width on phones */
.chip-toggle{list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:max-content;height:36px;padding:0 20px;border:1px solid var(--color-primary-100);border-radius:var(--radius-full);background:var(--color-primary-25);color:var(--color-primary-600);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.chip-toggle::-webkit-details-marker{display:none}
.chip-toggle:hover{background:var(--color-primary-50);border-color:var(--color-primary)}
.chip-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.chip-toggle__chev{transition:transform .2s}
details[open]>.chip-toggle .chip-toggle__chev{transform:rotate(180deg)}
@media (max-width:767.98px){.chip-toggle{width:100%}}
/* «مشاركة» a job: the button on its page, the round icon on a card (over the picture), the computer popup (link + copy + apps) */
.cr-job-item{position:relative;display:flex}
.cr-job-item>.cr-job{flex:1}
.cr-job__share{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.92);color:var(--color-primary);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s,color .15s}
.cr-job__share:hover{background:var(--color-primary);color:#fff}
.cr-job__share:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.cr-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cr-detail__head .cr-share{flex:none}
.cr-sharebox{display:flex;flex-direction:column;gap:16px}
.cr-sharebox__link{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-muted)}
.cr-sharebox__link input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--fs-body-sm);color:var(--color-text);padding:0 10px;outline:none}
.cr-sharebox__link .btn{flex:none;border-radius:var(--radius-full)}
.cr-sharebox__apps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cr-sharebox__app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:1px solid var(--color-border);color:var(--color-text);text-decoration:none;font-size:var(--fs-caption);font-weight:var(--fw-semibold);transition:border-color .15s,background .15s}
.cr-sharebox__app:hover{border-color:var(--color-primary-100);background:var(--color-primary-10)}
.cr-sharebox__icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.cr-sharebox__icon svg{width:22px;height:22px}
@media (max-width:479.98px){.cr-detail__head{flex-direction:column}.cr-detail__head .cr-share{width:100%;justify-content:center}}
/* the job page: the details beside a side card that stays while scrolling (computers); on phones / tablets the card on
   top (picture + share) and the apply bar at the bottom */
.cr-wrap--detail{max-width:1160px;padding-top:24px;display:flex;flex-direction:column;gap:16px}
.cr-layout{display:flex;flex-direction:column;gap:16px}
.cr-side{border-radius:20px;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border)}
.cr-side__media{aspect-ratio:16/10;background:var(--color-primary-10)}
.cr-side__media img{width:100%;height:100%;object-fit:cover;display:block}
.cr-side__media--ph{display:grid;place-items:center;color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary-25),var(--color-primary-10))}
.cr-side__media--ph .icon{width:52px;height:52px}
.cr-side__body{display:flex;flex-direction:column;gap:10px;padding:16px}
.cr-side__title{font-size:var(--fs-body-lg);line-height:1.5}
.cr-side__hint{font-size:var(--fs-caption);color:var(--color-text-muted)}
.cr-side .btn{width:100%;justify-content:center}
@media (max-width:899.98px){
  .cr-side__title,.cr-side__hint,.cr-side__apply{display:none}
  .cr-side__media{aspect-ratio:21/9}
  .cr-side__media--ph{aspect-ratio:auto;height:120px}
}
@media (min-width:900px){
  .cr-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
  .cr-side{position:sticky;top:88px;order:2}
  .cr-wrap--detail .cr-apply-bar{display:none}
}
/* «صورة ذكية» (job form): two AI picture designs to pick from */
.ji-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:639.98px){.ji-grid{grid-template-columns:minmax(0,1fr)}}
.ji-card{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer}
.ji-card.is-on{border-color:var(--color-primary);background:var(--color-primary-10)}
.ji-card:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}
.ji-card__media{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--color-surface-muted)}
.ji-card__media svg{display:block;width:100%;height:100%}
.ji-card__label{display:flex;align-items:center;gap:6px;padding:0 4px 2px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.ji-card__tick{display:none;color:var(--color-primary)}
.ji-card.is-on .ji-card__tick{display:inline-block}
.ji-card.is-on .ji-card__label{color:var(--color-primary)}
.ji-card--loading{cursor:default}
.ji-card--loading .ji-card__media{background:linear-gradient(100deg,var(--color-surface-muted) 30%,var(--color-surface) 50%,var(--color-surface-muted) 70%);background-size:300% 100%;animation:ji-shimmer 1.4s linear infinite}
@keyframes ji-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.ji-card--loading .ji-card__media{animation:none}}
.ji-note{display:flex;align-items:center;gap:6px;margin:12px 0 0}
.ji-error{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--color-border);color:var(--color-error)}
.ji-grid--photos{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:639.98px){.ji-grid--photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ji-card__media img{display:block;width:100%;height:100%;object-fit:cover}

/* date picker: the month and the year in the title open a list to jump to (e.g. a birth date) */
.pk-month__pick{display:inline-flex;align-items:center;gap:2px}
.pk-month__btn{display:inline-flex;align-items:center;gap:2px;padding:4px 8px;border:0;border-radius:10px;background:none;font:inherit;font-weight:var(--fw-bold);color:var(--color-text);cursor:pointer}
.pk-month__btn:hover,.pk-month__btn.is-open{background:var(--color-primary-10);color:var(--color-primary)}
.pk-month__chev{width:16px;height:16px;transition:transform .15s}
.pk-month__btn.is-open .pk-month__chev{transform:rotate(180deg)}
.pk-times--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.pk-t.is-today:not(.is-on){border-color:var(--color-primary);color:var(--color-primary)}
.pk-t:disabled{opacity:.4;cursor:default}/* side menu: the count sits on the icon's corner (as on the phone bar and the folded menu) so the name keeps the row's
   width and stays on one line; a word is never split (التوظ/يف) — at most a long name goes to a second line between words */
@media (min-width:1280px){
  .app:not(.is-sb-collapsed) .sidebar .nav-item__badge{position:absolute;top:4px;inset-inline-start:24px;inset-inline-end:auto;margin:0}
  .app:not(.is-sb-collapsed) .sidebar .nav-item__badge+.nav-item__arrow,.app:not(.is-sb-collapsed) .sidebar .nav-item__badge+.nav-group__chev,.app:not(.is-sb-collapsed) .sidebar .nav-item__label+.nav-group__chev{margin-inline-start:auto}
  .sidebar .nav-item__label{flex:0 1 auto;overflow-wrap:normal;word-break:normal}
  .sidebar .nav-item__icon,.sidebar .nav-item__badge,.sidebar .nav-item__arrow,.sidebar .nav-group__chev{flex:none}
}
/* «متابعة طلب التوظيف»: the two tabs and «بياناتي» */
.cr-track-tabs{align-self:flex-start}
.cr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0}
.cr-facts div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-facts dt{font-size:var(--fs-caption);color:var(--color-text-muted)}
.cr-facts dd{margin:0;font-weight:var(--fw-semibold);overflow-wrap:anywhere}
.cr-facts dd[dir=ltr]{text-align:right}
@media (max-width:639.98px){.cr-facts{grid-template-columns:minmax(0,1fr)}}
/* «المقابلة» on an application: private notes as a timeline (newest first) */
.iv-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.iv-note{position:relative;display:flex;align-items:flex-start;gap:12px;padding-bottom:14px}
.iv-note:not(:last-child)::before{content:"";position:absolute;inset-inline-start:5px;top:14px;bottom:0;border-inline-start:1px solid var(--color-border)}
.iv-note__dot{flex:none;width:11px;height:11px;margin-top:5px;border-radius:50%;background:var(--color-warning)}
.iv-note__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--color-surface-muted)}
.iv-note__time{font-size:var(--fs-caption);color:var(--color-text-muted)}
.iv-note__body p{margin:0;overflow-wrap:anywhere}

/* a picked / saved picture or video (x-file-drop, job picture, careers banner): shown large; a tap opens the viewer */
.file-drop__preview{position:relative;display:block;width:100%;max-width:240px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-muted)}
.file-drop__preview img,.file-drop__preview video{display:block;width:100%;height:100%;object-fit:cover}
.file-drop__zoom{position:absolute;bottom:8px;inset-inline-start:8px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:var(--fs-caption)}
.file-drop__preview:hover .file-drop__zoom{background:rgba(0,0,0,.75)}
.file-item:has(.file-drop__preview){display:flex;flex-direction:column;gap:8px}
.file-item__icon--view{cursor:zoom-in}.ji-render{position:fixed;top:0;left:-20000px;width:1200px;height:675px;pointer-events:none}
.ji-render svg{display:block;width:1200px;height:675px}
@media (max-width:767.98px){.page-body .row.ji-actions{flex-wrap:nowrap}.page-body .row.ji-actions > .btn{flex:1 1 0;min-width:0;width:auto;justify-content:center}}
/* Settings → «صفحة الوظائف» → «مصدر صورة جاهزة» */
.cr-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:639.98px){.cr-sources{grid-template-columns:minmax(0,1fr)}}
.cr-source{cursor:pointer}
.cr-source input{position:absolute;opacity:0;pointer-events:none}
.cr-source__box{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface)}
.cr-source input:checked+.cr-source__box{border-color:var(--color-primary);background:var(--color-primary-10)}
.cr-source input:focus-visible+.cr-source__box{outline:2px solid var(--color-primary);outline-offset:2px}
.cr-source.is-off{cursor:not-allowed;opacity:.6}
.cr-source-keys{padding-top:16px;border-top:1px solid var(--color-border)}

/* careers list: more room between the search and the list, white cards */
.cr-count{margin:32px 2px 18px}
.cr-grid{gap:20px}
.cr-job{background:#fff}
.cr-job__body{padding:20px;gap:10px}
.cr-job__foot{padding-top:14px;margin-top:auto}
/* careers search: taller fields (the user's choice) */
.cr-search .control,.cr-search .btn,.cr-search .select__trigger{min-height:56px}

/* «المقابلة»: the schedule and the application's questions */
.iv-when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface-muted)}
.iv-when__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);flex:none}
.iv-when__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.iv-when__text a{overflow-wrap:anywhere;font-size:var(--fs-caption)}
.iv-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.iv-plan__row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface)}
.iv-plan__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);font-size:var(--fs-caption);font-weight:var(--fw-semibold);flex:none}
/* «العرض الوظيفي» */
.cr-offer{display:flex;flex-direction:column;gap:12px}
.cr-offer__salary{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--color-success-bg)}
.cr-offer__salary b{font-size:var(--fs-body-lg);color:var(--color-success)}
.cr-offer__row{display:flex;align-items:center;gap:8px}
.cr-offer__ok{display:flex;align-items:center;gap:6px;margin:0;color:var(--color-success);font-weight:var(--fw-semibold)}
.cr-offer__head{display:flex;align-items:center;gap:12px}
.cr-offer__party{font-size:28px;line-height:1}
/* «المقابلة»: «تعديل الموعد» as an icon in a white circle; the link on the right (RTL start) */
.iv-when__edit{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);flex:none}
.iv-when__edit:hover{color:var(--color-primary);border-color:var(--color-primary)}
.iv-when__link{align-self:flex-start;text-align:right}

/* an application after the final decision: the decision; «تغيير القرار» opens the status form */
.rc-decided{display:flex;align-items:center;gap:12px}
.rc-decided__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none}
.rc-change:not([open]) > form{display:none}
.rc-change > summary{list-style:none}
.rc-change > summary::-webkit-details-marker{display:none}
.rc-change[open] > summary{margin-bottom:12px}
.rc-change > summary.chip-toggle{border-radius:var(--radius-full)}

/* quick contact: WhatsApp chat + a call (x-contact-buttons) */
.contact-btns{display:inline-flex;align-items:center;gap:6px}
.contact-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);flex:none;transition:background .15s,color .15s,border-color .15s}
.contact-btn--wa{color:#1da851}
.contact-btn--wa:hover{background:#25d366;border-color:#25d366;color:#fff}
.contact-btn--call{color:var(--color-primary)}
.contact-btn--call:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.contact-btns--labels{display:flex;width:100%;gap:8px}
.contact-btns--labels .contact-btn{display:inline-flex;width:auto;height:var(--size-control);flex:1 1 0;justify-content:center;border-radius:var(--radius-full)}
.profile-head__contact{margin-top:4px}
/* the task's state card (design «أ», x-task-state): white, a thin border in the state's colour, icon in a tinted circle, the stages bar */
.task-state{--st:var(--color-primary);--st-bg:var(--color-primary-25);background:var(--color-surface);border:1px solid var(--color-border);gap:12px}
.task-state__head{display:flex;align-items:center;gap:12px}
.task-state__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--st-bg);color:var(--st);flex:none}
.task-state__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.task-state__title{margin:0;font-size:var(--fs-body-lg);font-weight:var(--fw-bold);color:var(--st-title,var(--color-text))}
.task-state__line{margin:0;font-size:var(--fs-caption);color:var(--color-text-muted)}
.task-state__steps{display:flex;gap:4px}
.task-state__steps i{flex:1;height:6px;border-radius:3px;background:var(--color-border)}
.task-state__steps i.is-on{background:var(--st)}
.task-state__body{display:flex;flex-direction:column;gap:12px}
.task-state__body p{margin:0}
.task-state--info{--st:var(--color-info);--st-bg:var(--color-info-bg)}
.task-state--warning{--st:var(--color-warning);--st-bg:var(--color-warning-bg)}
.task-state--review{--st:var(--color-tertiary-700);--st-bg:var(--color-tertiary-25)}
.task-state--assign{--st:var(--color-secondary);--st-bg:var(--color-secondary-25)}
.task-state--success{--st:var(--color-success);--st-bg:var(--color-success-bg);--st-title:var(--color-success)}
.task-state--danger{--st:var(--color-error);--st-bg:var(--color-error-bg);--st-title:var(--color-error)}
.task-state--muted{--st:var(--color-text-muted);--st-bg:var(--color-surface-muted)}

/* «المالية» → «الإيجارات» */
.rent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rent-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-card);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer}
.rent-row:hover{border-color:var(--color-primary-100)}
.rent-row.is-stopped{opacity:.7}
.rent-row__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);flex:none}
.rent-row__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.rent-row__title{font-weight:var(--fw-semibold);color:inherit}
.rent-row__amount{font-weight:var(--fw-semibold);white-space:nowrap}
.rent-row__due{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px}
@media (max-width:767.98px){.rent-row{flex-wrap:wrap}.rent-row__main{flex-basis:calc(100% - 100px)}.rent-row__amount{order:3}.rent-row__due{order:4;align-items:flex-start;flex:1}}
.rent-items,.rent-atts{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rent-item{display:flex;align-items:center;gap:8px}
.rent-item .control{flex:1;min-width:0}
.rent-item__amount{flex:0 0 140px!important}
.rent-dues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rent-due{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--color-surface-muted)}
.rent-due__dot{width:10px;height:10px;border-radius:50%;background:var(--color-primary);flex:none}
.rent-due__dot.is-late{background:var(--color-error)}
.rent-pays{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rent-pay{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.rent-pay+.rent-pay{border-top:1px solid var(--color-border)}
.rent-pay__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* a rent payment: its own small card; the proof is a chip inside it */
.rent-pays{gap:8px}
.rent-pay{padding:12px 14px;border-radius:12px;background:var(--color-surface-muted)}
.rent-pay+.rent-pay{border-top:0}
.rent-proof{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:4px;padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-primary);font-size:var(--fs-caption);font-weight:var(--fw-medium)}
.rent-proof:hover{border-color:var(--color-primary)}
.rent-pay__top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:10px}
.rent-pay__side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}

.rent-group{display:flex;flex-direction:column;gap:8px}
.rent-group__label{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.rent-group__label.is-late{color:var(--color-error)}
.rent-pay-for{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--color-surface-muted)}
.rent-pay-for__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-primary-25);color:var(--color-primary);flex:none}

/* «زياراتي الصفية»: the visited teacher's reports; «رد المعلمة» in the report */
.sv-visits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-visit{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-card);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer}
.sv-visit__date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--color-primary-25);color:var(--color-primary);flex:none;line-height:1.1}
.sv-visit__date b{font-size:var(--fs-body-lg)}
.sv-visit__date span{font-size:11px}
@media (max-width:639.98px){.sv-visit{flex-wrap:wrap}.sv-visit .tag{order:3}}
.sv-reply{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--color-surface-muted)}
.sv-reply__ack{display:flex;align-items:center;gap:6px;margin:0;color:var(--color-success);font-weight:var(--fw-semibold)}
/* «إيجار جديد»: «ملخص الإيجار» (design 3) beside the form on computers, under it on phones */
.rent-form-layout{display:flex;flex-direction:column;gap:16px}
@media (min-width:1024px){
  .rent-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main side" "submit side";gap:16px 20px;align-items:start}
  .rent-form-main{grid-area:main}
  .rent-summary{grid-area:side;position:sticky;top:88px}
  .rent-form-submit{grid-area:submit}
}
.rent-summary{border-radius:var(--radius-card);border:1px solid var(--color-border);background:var(--color-surface);overflow:hidden}
.rent-summary__head{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--color-primary);color:#fff}
.rent-summary__label{font-size:var(--fs-caption);opacity:.85}
.rent-summary__total b{font-size:28px;font-weight:var(--fw-bold);line-height:1.3}
.rent-summary__total small{font-size:var(--fs-caption)}
.rent-summary__body{display:flex;flex-direction:column;padding:10px 16px 14px}
.rent-summary__row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:var(--fs-body-sm)}
.rent-summary__row span{color:var(--color-text-muted)}
.rent-summary__row b{font-weight:var(--fw-semibold);text-align:left}
.rent-summary__row--sep{border-top:1px solid var(--color-border);margin-top:4px;padding-top:9px}
/* «إيجار جديد»: an attachment added from the popup — its thumbnail in the list */
.rent-atts:empty{display:none}

/* Files (design «أ», the whole platform): each file a small card — icon / thumbnail, name, type · size, icon buttons at the end */
.file-list{gap:8px}
.file-item,.file-item+.file-item{padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.file-item__acts{display:flex;align-items:center;gap:2px;flex:none}
.file-item__acts .icon-btn{color:var(--color-text-muted)}
.file-item__acts .icon-btn:hover{background:var(--color-surface-muted);color:var(--color-text)}
.file-item__acts .icon-btn--danger,.file-item__acts .icon-btn--danger:hover{color:var(--color-error)}
.file-item.is-removed{opacity:1;background:var(--color-surface-muted)}
.file-item.is-removed .file-item__name{color:var(--color-text-muted)}
.file-item.is-removed [data-state]{color:var(--color-error)}
.file-item.is-removed .file-item__icon{opacity:.55}
/* Menus / phone & tablet sheets: a separator never opens, closes or doubles a list (items above it may be hidden for this person);
   a sheet with a single action has no lines around it — not even under its title */
:is(.popover,.popover-sheet) .menu-sep:first-child,:is(.popover,.popover-sheet) .menu-sep:last-child,.menu-sep+.menu-sep{display:none}
.modal:has(.popover-sheet):not(:has(.popover-sheet > :not(.menu-sep) ~ :not(.menu-sep))) .modal__header{border-bottom:0}

/* «بنود تحت الإيجار»: column titles over the rows (only when there are rows) */
.rent-items__head{display:flex;gap:8px;margin-bottom:6px;font-size:var(--fs-caption);color:var(--color-text-muted)}
.rent-items__head > span:first-child{flex:1}
.rent-items__gap{width:36px;flex:none}
.field:not(:has(.rent-item)) .rent-items__head{display:none}

/* «النقل المدرسي»: a bus's paper ending soon (list tag, the vehicle / driver card) */
.rent-row__paper{margin-top:4px;align-self:flex-start}
.kv__val.is-expiring{color:var(--color-warning);font-weight:var(--fw-semibold)}

/* «إضافة مرفق»: the usual papers as one-tap names */
.rent-att-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* «الإعدادات المدرسية»: the quick search over each table; reordering paused while filtering */
.ss-search{margin-bottom:12px}
tbody.is-filtered .reorder-handle{visibility:hidden}

/* «المواد والمعلمون»: why a subject has no teacher */
.tt-subject__pick{color:var(--color-primary);font-weight:var(--fw-medium)}
.tt-subject__none{color:var(--color-warning)}

/* The timetable's header (General Administration): the line between two periods → «+ فترة» (a break), shown on hover / focus */
.tt-table th.tt-has-gap{position:relative}
.tt-gap{position:absolute;top:0;bottom:0;inset-inline-end:-7px;width:14px;z-index:3;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tt-gap--start{inset-inline-end:auto;inset-inline-start:-7px}
.tt-gap::before{content:"";position:absolute;top:6px;bottom:6px;inset-inline-start:7px;width:1px;border-radius:2px;background:var(--color-primary);opacity:0;transition:opacity var(--transition-fast)}
.tt-gap span{position:relative;white-space:nowrap;padding:3px 8px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:11px;font-weight:var(--fw-semibold);opacity:0;transform:scale(.9);transition:opacity var(--transition-fast),transform var(--transition-fast);pointer-events:none}
.tt-gap:hover::before,.tt-gap:focus-visible::before,.tt-gap:hover span,.tt-gap:focus-visible span{opacity:1}
.tt-gap:hover span,.tt-gap:focus-visible span{transform:scale(1)}
.tt-gap:focus-visible{outline:none}
@media (hover:none){.tt-gap::before{opacity:.35}}
/* hovering the «+ فترة» line: the period beside it stays as it is */
.tt-table thead th:has(.tt-gap:hover){background:var(--color-surface-muted)}
.tt-table thead th:has(.tt-gap:hover) > .tt-head-link{color:inherit}
.tt-table thead th:has(.tt-gap:hover) > .tt-head-link .tt-time{color:var(--color-text-muted)}

/* «نماذج المواعيد»: the templates list */
.ss-times-view{margin-bottom:4px}
.tt-templates{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tt-template{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);cursor:pointer}
.tt-template__icon{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-primary-25);color:var(--color-primary-600);flex:none}
.tt-template a{color:inherit}
@media (max-width:639.98px){.tt-template{flex-wrap:wrap}.tt-template .tag{order:3}}
.choice-cards--stack{grid-template-columns:1fr}

/* «فحص التعارض» */
.tt-check{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:var(--color-success-bg);color:var(--color-success)}
.tt-check b{color:var(--color-text)}
.tt-check__icon{display:grid;place-items:center;flex:none}
.tt-conflicts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tt-conflict{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.tt-conflict__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--color-surface-muted);color:inherit}
.tt-conflict__row:hover{background:var(--color-primary-10)}

/* «المهام المرتبطة» */
.task-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.task-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;color:inherit;background:var(--color-surface)}
.task-link:hover{background:var(--color-primary-10)}
.task-link__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-medium)}
.task-link__kind{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:var(--fs-caption);color:var(--color-text-muted)}
.task-link__kind.is-waits{color:var(--color-warning)}
.task-link__kind.is-blocks{color:var(--color-primary)}
.tag--link .icon{width:14px;height:14px}
.tag--link.is-waiting{color:var(--color-warning);background:var(--color-warning-bg)}
/* «المهام المرتبطة» in the form: one kind shown at a time */
.task-links-pick__pane{display:none}
.task-links-pick:has(input[value="waits"]:checked) [data-pane="waits"],.task-links-pick:has(input[value="blocks"]:checked) [data-pane="blocks"],.task-links-pick:has(input[value="related"]:checked) [data-pane="related"]{display:block}
.task-links-pick__n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:11px;line-height:1}
.task-links-pick__n[hidden]{display:none}

/* «أصناف غير متوفرة»: the report page (a ticked item opens its proposal) and the decision popup */
.need-short{flex-direction:column;align-items:stretch}
.need-short__body{display:flex;flex-direction:column;gap:12px}
.need-short__body[hidden],.need-short__replace[hidden]{display:none}
.need-short.is-busy{opacity:.6}
.need-short__unit{min-width:0;width:96px;border:0;background:transparent;font:inherit;color:inherit}
.need-item__tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.need-items__gone td{color:var(--color-text-muted)}
.need-items__gone .fw-semibold{text-decoration:line-through}
.need-decide{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.need-decide__row{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--color-border);border-radius:12px}
.need-decide__what{display:flex;align-items:center;gap:12px}
.need-decide__what>.stack{flex:1;min-width:0}
.need-decide__row:has(input[value="rejected"]:checked) .need-decide__edit{display:none}
.need-short .need-buy__inputs{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr)}
.need-short .need-line__qty{width:auto}
.need-short .need-line__qty .need-unit,.need-short .need-short__unit{flex:0 1 auto;width:auto;max-width:50%}

/* «المخازن» */
.store-list,.store-log,.store-log__lines{list-style:none;margin:0;padding:0}
.store-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.store-card{display:flex;align-items:center;gap:12px;color:inherit;height:100%}
.store-card.is-off{opacity:.65}
.store-card__ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--color-primary-10);color:var(--color-primary)}
.store-card__nums{display:flex;gap:12px;flex:none;text-align:center}
.store-card__nums>span{display:flex;flex-direction:column}
.store-card__nums small{font-size:var(--fs-caption);color:var(--color-text-muted)}
.store-log{display:flex;flex-direction:column}
.store-log__row{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--color-border)}
.store-log__row:first-child{border-top:0;padding-top:0}
.store-log__head{display:flex;align-items:flex-start;gap:10px}
.store-log__lines{display:flex;flex-direction:column;gap:4px;padding-inline-start:4px}
.store-log__lines li{display:flex;justify-content:space-between;gap:12px}
/* the warehouse page: «توريد» green, «سحب» blue — side by side */
.btn--stock-in{background:var(--color-success);color:#fff}
.btn--stock-out{background:var(--color-primary);color:#fff}
.btn--stock-in:hover,.btn--stock-out:hover{filter:brightness(.92)}
.page-header__actions:has(>.btn--stock-in,>.btn--stock-out){flex-wrap:nowrap}

/* «الإعدادات» home: search, the account card, groups of section cards (icon tint · title · description · status), «منطقة حساسة» */
.set-hub{display:flex;flex-direction:column;gap:20px}
.set-hub__search{border-radius:999px}
.set-group{display:flex;flex-direction:column;gap:10px}
.set-group[hidden],.set-card[hidden]{display:none}
.set-group__title{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.set-group__title::after{content:"";flex:1;height:1px;background:var(--color-border)}
.set-group__title--danger{color:var(--color-error)}
.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.set-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);color:inherit;transition:background .15s,border-color .15s}
.set-card:hover{background:var(--color-surface-muted);border-color:var(--color-border-strong,var(--color-border))}
.set-card--wide{flex-direction:row;align-items:center;gap:12px}
.set-card__head{display:flex;align-items:center;gap:12px}
.set-card__ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px}
.set-card__ico .icon{width:22px;height:22px}
.set-card__avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--color-primary-10);color:var(--color-primary);font-weight:var(--fw-semibold)}
.set-card__title{font-weight:var(--fw-semibold);color:var(--color-text)}
.set-card__desc{font-size:var(--fs-caption);color:var(--color-text-muted);line-height:1.6}
.set-card__status{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:var(--fs-caption);color:var(--color-text-muted)}
.set-card__dot{width:7px;height:7px;border-radius:50%;flex:none}
.set-tone-blue{background:#E6F1FB;color:#0C447C}.set-tone-teal{background:#E1F5EE;color:#085041}.set-tone-purple{background:#EEEDFE;color:#3C3489}
.set-tone-amber{background:#FAEEDA;color:#633806}.set-tone-coral{background:#FAECE7;color:#712B13}.set-tone-pink{background:#FBEAF0;color:#72243E}
.set-tone-gray{background:#F1EFE8;color:#444441}.set-tone-red{background:#FCEBEB;color:#A32D2D}
.set-card__dot.set-tone-blue{background:#378ADD}.set-card__dot.set-tone-teal{background:#1D9E75}.set-card__dot.set-tone-purple{background:#7F77DD}
.set-card__dot.set-tone-amber{background:#BA7517}.set-card__dot.set-tone-coral{background:#D85A30}.set-card__dot.set-tone-pink{background:#D4537E}.set-card__dot.set-tone-gray{background:#888780}
@media (max-width:1023.98px){.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767.98px){.set-grid{grid-template-columns:1fr}}
@media (max-width:767.98px){
  .set-card:not(.set-card--wide){display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:12px 14px;align-items:center}
  .set-card:not(.set-card--wide) .set-card__head{display:contents}
  .set-card:not(.set-card--wide) .set-card__ico{grid-row:1 / span 3}
  .set-card:not(.set-card--wide) .set-card__title,.set-card:not(.set-card--wide) .set-card__desc,.set-card:not(.set-card--wide) .set-card__status{grid-column:2}
  .set-card__status{margin-top:2px}
  .set-grid{gap:8px}
}
/* «الإعدادات» home: 32px above each group title and between it and its cards; every card ends with a 32px arrow circle in its tone */
.set-hub{gap:32px}
.set-group{gap:32px}
.set-card__go{display:grid;place-items:center;width:32px;height:32px;flex:none;margin-inline-start:auto;border-radius:50%}
.set-card__go .icon{width:18px;height:18px}
.set-tone-account{background:var(--color-primary-10);color:var(--color-primary)}
.set-card:hover .set-card__go{filter:brightness(.96)}
@media (max-width:767.98px){.set-card:not(.set-card--wide) .set-card__go{grid-column:3;grid-row:1 / span 3}.set-card:not(.set-card--wide){grid-template-columns:44px minmax(0,1fr) 32px}}

/* Settings sections: the current value in a closed section's title (x-acc-summary), an edited section's dot, the «unsaved» bar */
.accordion summary{gap:12px}
.acc-sum{display:flex;align-items:center;gap:8px;min-width:0;margin-inline-start:auto;font-size:var(--fs-caption);color:var(--color-text-muted)}
.acc-sum__val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.acc-sum__img{height:26px;max-width:72px;object-fit:contain;border-radius:6px;flex:none}
.acc-sum__swatch{width:18px;height:18px;border-radius:50%;border:1px solid var(--color-border);flex:none}
.acc-sum__tag{flex:none;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface-muted)}
.acc-sum__tag.is-custom{border-color:transparent;background:var(--color-primary-10);color:var(--color-primary)}
details.accordion.is-dirty > summary .card__title::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--color-warning);vertical-align:middle}
.dirty-bar{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);box-shadow:0 6px 24px rgba(16,24,40,.12)}
.dirty-bar[hidden]{display:none}
.dirty-bar__msg{flex:1;display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-caption);font-weight:var(--fw-medium)}
.dirty-dot{width:8px;height:8px;border-radius:50%;background:var(--color-warning);flex:none}
body:has(.bottom-nav) .dirty-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:767.98px){.acc-sum__val{max-width:14ch}.acc-sum__img{display:none}}.accordion summary:has(.acc-sum) .chev{margin-inline-start:0}