/* حزمة سريا للواجهات — الأنماط المشتركة للأنظمة الأربعة.
 * المصدر الوحيد: 4app/الواجهات/sarya-kit، ويُزامن بـ«مزامنة.command». لا يُعدَّل في نظامٍ دون الآخر.
 * كل نظام يضبط ألوانه بمتغيّرات --sk-* في أنماطه (سطرٌ واحد)، وتبقى المقاسات هنا واحدة.
 * قواعد: خصائص منطقية · لا letter-spacing على العربية · أرقام 0-9 · لا مصادر خارجية. */

:root {
  /* المقاسات الموحّدة (البند 21) — واحدة في الأنظمة الأربعة */
  --sk-r: 12px;
  --sk-r-sm: 8px;
  --sk-r-lg: 16px;
  --sk-field-h: 40px;
  --sk-modal-sm: 440px;
  --sk-modal-md: 600px;
  --sk-modal-lg: 820px;
  --sk-fs: .93rem;
  --sk-fs-sm: .82rem;
  --sk-ease: cubic-bezier(.2, .8, .2, 1);
  /* الألوان: افتراضٌ يتجاوزه كل نظام */
  --sk-acc: #4b4fd8;
  --sk-acc-ink: #3a3dbd;
  --sk-acc-soft: #ecedfd;
  --sk-on-acc: #fff;
  --sk-ink: #16192b;
  --sk-mute: #5d6478;
  --sk-line: #e1e4ec;
  --sk-paper: #fff;
  --sk-soft: #f3f4f8;
  --sk-danger: #c2343d;
  --sk-ok: #1f8a55;
  --sk-warn: #b26a00;
  --sk-shadow: 0 18px 48px -18px rgba(18, 20, 40, .35);
  --sk-scrim: rgba(18, 20, 40, .58);
}

/* إخفاءٌ يبقي العنصر في الصفحة لقارئ الشاشة والنماذج — بلا إزاحة خارج الشاشة */
.sk-vh { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.sk-i { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.sk-sp { flex: 1; }
.sk-mute { color: var(--sk-mute); font-size: var(--sk-fs-sm); margin: .5rem 0 0; }
[hidden].sk-icon, .sk-date-clr[hidden] { display: none !important; }

/* ---------- الأزرار داخل مكوّنات الحزمة ---------- */
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-block-size: 38px; padding: .45rem .95rem; border-radius: 10px; border: 1px solid transparent; background: var(--sk-acc); color: var(--sk-on-acc); font: inherit; font-size: var(--sk-fs); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.sk-btn:hover { background: var(--sk-acc-ink); }
.sk-btn.ghost { background: var(--sk-paper); color: var(--sk-ink); border-color: var(--sk-line); }
.sk-btn.ghost:hover { border-color: var(--sk-acc); color: var(--sk-acc-ink); background: var(--sk-paper); }
.sk-btn.link { background: none; color: var(--sk-mute); border: 0; padding-inline: .3rem; font-weight: 500; }
.sk-btn.link:hover { color: var(--sk-acc-ink); background: none; }
.sk-btn.sm { min-block-size: 32px; padding: .3rem .7rem; font-size: var(--sk-fs-sm); }
.sk-btn.done { background: var(--sk-ok); color: #fff; border-color: transparent; }
.sk-btn:disabled { opacity: .55; cursor: not-allowed; }
.sk-btn:focus-visible, .sk-icon:focus-visible, .sk-date-btn:focus-visible, .sk-day:focus-visible, .sk-pop-i:focus-visible, .sk-app:focus-visible, .sk-pal:focus-visible, .sk-theme:focus-visible, .sk-presence-i:focus-visible, .sk-topbtn:focus-visible { outline: 2px solid var(--sk-acc); outline-offset: 2px; }
.sk-icon { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 9px; border: 0; background: none; color: var(--sk-mute); cursor: pointer; }
.sk-icon:hover { background: var(--sk-soft); color: var(--sk-ink); }
.sk-icon.sm { inline-size: 28px; block-size: 28px; }
.sk-topbtn { display: inline-grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 10px; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; font-size: 1.15rem; }
.sk-topbtn:hover, .sk-topbtn[aria-expanded="true"] { background: var(--sk-soft); }

/* ---------- السرّ مع «انسخ» (البند 1) ---------- */
.sk-secret { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--sk-acc-soft); border: 1px solid color-mix(in srgb, var(--sk-acc) 22%, transparent); border-radius: var(--sk-r-sm); padding: .9rem 1rem; }
.sk-secret-v { display: flex; flex-direction: column; gap: .2rem; min-inline-size: 0; }
.sk-secret-l { font-size: var(--sk-fs-sm); color: var(--sk-mute); }
.sk-secret code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.35rem; font-weight: 700; color: var(--sk-ink); user-select: all; overflow-wrap: anywhere; text-align: start; }
.sk-secret.sm { padding: .6rem .8rem; }
.sk-secret.sm code { font-size: .95rem; font-weight: 600; }
.sk-secret + .sk-secret { margin-block-start: .5rem; }

/* ---------- عدّاد الحروف (البند 16) ---------- */
.sk-count { display: block; text-align: start; direction: ltr; unicode-bidi: isolate; /* طرف الحقل الأيسر في الصفحة العربية */ font-size: .76rem; color: var(--sk-mute); font-variant-numeric: tabular-nums; margin-block-start: .25rem; }
.sk-count.near { color: var(--sk-warn); }
.sk-count.over { color: var(--sk-danger); font-weight: 700; }

/* ---------- منتقي التاريخ (البند 15) ---------- */
.sk-date { position: relative; display: flex; align-items: center; inline-size: 100%; }
.sk-date-btn { display: flex; align-items: center; gap: .5rem; inline-size: 100%; min-block-size: var(--sk-field-h); padding: .5rem .7rem; padding-inline-end: 2.2rem; border: 1px solid var(--sk-field-line, var(--sk-line)); border-radius: 10px; background: var(--sk-paper); color: var(--sk-ink); font: inherit; font-size: var(--sk-fs); text-align: start; cursor: pointer; transition: border-color 140ms ease, box-shadow 140ms ease; }
.sk-date-btn:hover { border-color: var(--sk-acc); }
.sk-date-btn .sk-i { color: var(--sk-acc); }
.sk-date-btn.sk-empty .sk-date-v { color: var(--sk-mute); }
.sk-date-btn:disabled { background: var(--sk-soft); cursor: not-allowed; }
.sk-date-clr { position: absolute; inset-inline-end: .35rem; display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border: 0; border-radius: 7px; background: none; color: var(--sk-mute); cursor: pointer; }
.sk-date-clr:hover { background: var(--sk-soft); color: var(--sk-ink); }
.sk-cal, .sk-pop { z-index: 2000; }
.sk-cal[popover], .sk-pop[popover] { inset: auto; margin: 0; overflow: visible; color: var(--sk-ink); }
.sk-cal { inline-size: 296px; background: var(--sk-paper); color: var(--sk-ink); border: 1px solid var(--sk-line); border-radius: var(--sk-r); box-shadow: var(--sk-shadow); padding: .7rem; font-size: var(--sk-fs); }
.sk-cal-h { display: flex; align-items: center; justify-content: space-between; margin-block-end: .4rem; }
.sk-cal-t { font-size: .95rem; }
.sk-cal-w, .sk-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.sk-cal-w span { font-size: .74rem; color: var(--sk-mute); padding-block: .2rem; }
.sk-day { block-size: 36px; border: 0; border-radius: 9px; background: none; color: var(--sk-ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.sk-day:hover:not(:disabled) { background: var(--sk-soft); }
.sk-day.now { box-shadow: inset 0 0 0 1px var(--sk-acc); color: var(--sk-acc-ink); font-weight: 700; }
.sk-day.on { background: var(--sk-acc); color: var(--sk-on-acc); font-weight: 700; }
.sk-day:disabled { color: var(--sk-line); cursor: not-allowed; }
.sk-cal-time { display: flex; align-items: center; gap: .35rem; margin-block-start: .6rem; padding-block-start: .6rem; border-block-start: 1px solid var(--sk-line); }
.sk-cal-time label { color: var(--sk-mute); font-size: var(--sk-fs-sm); margin-inline-end: auto; }
.sk-cal-time select { min-block-size: 34px; padding: .2rem .4rem; border: 1px solid var(--sk-line); border-radius: 8px; background: var(--sk-paper); color: var(--sk-ink); font: inherit; font-variant-numeric: tabular-nums; }
.sk-cal-time span { color: var(--sk-mute); }
.sk-cal-f { display: flex; gap: .35rem; margin-block-start: .6rem; }

/* ---------- رفع الملف (البند 14) ---------- */
.sk-file { position: relative; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; inline-size: 100%; min-block-size: var(--sk-field-h); padding: .35rem .45rem; border: 1px dashed var(--sk-field-line, var(--sk-line)); border-radius: 10px; background: var(--sk-paper); transition: border-color 140ms ease, background-color 140ms ease; }
.sk-file.over { border-color: var(--sk-acc); background: var(--sk-acc-soft); }
.sk-file-n { display: inline-flex; align-items: center; gap: .35rem; min-inline-size: 0; flex: 1; font-size: var(--sk-fs-sm); color: var(--sk-ink); }
.sk-file-n > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-file-n.sk-empty { color: var(--sk-mute); }
.sk-file-n .sk-i { color: var(--sk-mute); }

/* ---------- الجدول بطاقاتٌ على الجوال (البند 8) ---------- */
@media (max-width: 640px) {
  table.sk-cards, table.sk-cards tbody, table.sk-cards tr, table.sk-cards td { display: block; inline-size: 100%; }
  table.sk-cards { border: 0; min-inline-size: 0 !important; }
  table.sk-cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  table.sk-cards tr { background: var(--sk-paper); border: 1px solid var(--sk-line); border-radius: var(--sk-r); padding: .75rem .9rem; margin-block-end: .6rem; }
  table.sk-cards td { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .3rem 0 !important; border: 0 !important; text-align: start; min-block-size: 0; white-space: normal; }
  table.sk-cards td::before { content: attr(data-label); flex: none; color: var(--sk-mute); font-size: .78rem; font-weight: 600; }
  table.sk-cards td:first-child { display: block; padding-block-end: .5rem !important; margin-block-end: .3rem; border-block-end: 1px solid var(--sk-line) !important; }
  table.sk-cards td:first-child::before, table.sk-cards td[data-label=""]::before, table.sk-cards td.sk-nolabel::before { content: none; }
  table.sk-cards td:empty { display: none; }
  table.sk-cards td > * { max-inline-size: 70%; }
  table.sk-cards td:first-child > * { max-inline-size: none; }
  table.sk-cards td.sk-actions, table.sk-cards td:last-child:not([data-label]) { justify-content: flex-start; flex-wrap: wrap; padding-block-start: .55rem !important; }
  .tablewrap:has(> table.sk-cards), .table-wrap:has(> table.sk-cards) { overflow: visible; border: 0; background: none; box-shadow: none; }
}

/* ---------- الجولة الإرشادية (البند 4) ---------- */
.sk-tour { position: fixed; inset: 0; z-index: 3000; }
.sk-tour [hidden] { display: none !important; }
.sk-tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax var(--sk-scrim), 0 0 0 3px var(--sk-acc); pointer-events: none; }
.sk-tour.center { background: var(--sk-scrim); }
.sk-tour.center .sk-tour-spot { box-shadow: none; }
.sk-tour-card { position: fixed; inline-size: min(340px, calc(100vw - 24px)); background: var(--sk-paper); color: var(--sk-ink); border-radius: var(--sk-r-lg); padding: 1.1rem 1.15rem 1rem; box-shadow: var(--sk-shadow); outline: none; }
.sk-tour.center .sk-tour-card { inline-size: min(400px, calc(100vw - 24px)); text-align: center; }
.sk-tour-n { color: var(--sk-acc-ink); font-size: .74rem; font-weight: 600; min-block-size: 1em; }
.sk-tour-card h3 { margin: .2rem 0 .35rem; font-size: 1.08rem; }
.sk-tour.center .sk-tour-card h3 { font-size: 1.3rem; }
.sk-tour-card p { margin: 0; color: var(--sk-mute); font-size: .9rem; line-height: 1.8; }
.sk-tour-dots { display: flex; justify-content: center; gap: .3rem; margin-block: .9rem .7rem; }
.sk-tour-dots i { inline-size: 6px; block-size: 6px; border-radius: 99px; background: var(--sk-line); }
.sk-tour-dots i.on { inline-size: 18px; background: var(--sk-acc); }
.sk-tour-f { display: flex; align-items: center; gap: .4rem; }
body.sk-touring { overflow: hidden; }

/* ---------- نافذة الحزمة (الاختصارات) ---------- */
.sk-dialog { inline-size: min(var(--sk-modal-sm), calc(100vw - 32px)); border: 0; border-radius: var(--sk-r-lg); padding: 0; background: var(--sk-paper); color: var(--sk-ink); box-shadow: var(--sk-shadow); }
.sk-dialog::backdrop { background: var(--sk-scrim); }
.sk-dialog-h { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .4rem; }
.sk-dialog-h h2 { margin: 0; font-size: 1.05rem; }
.sk-dialog-b { padding: .4rem 1.1rem 1.1rem; }
.sk-keys { margin: 0; display: grid; gap: .1rem; }
.sk-keys > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-block-end: 1px solid var(--sk-line); }
.sk-keys dt { display: flex; gap: .25rem; direction: ltr; }
.sk-keys dd { margin: 0; color: var(--sk-ink); }
kbd { display: inline-grid; place-items: center; min-inline-size: 1.8em; padding: .1rem .45rem; border: 1px solid var(--sk-line); border-block-end-width: 2px; border-radius: 6px; background: var(--sk-soft); font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: var(--sk-ink); }

/* ---------- القائمة المنبثقة: المساعدة · مبدّل الأنظمة ---------- */
.sk-pop { inline-size: 300px; max-inline-size: calc(100vw - 16px); background: var(--sk-paper); color: var(--sk-ink); border: 1px solid var(--sk-line); border-radius: var(--sk-r); box-shadow: var(--sk-shadow); padding: .45rem; font-size: var(--sk-fs); }
.sk-pop-h { padding: .4rem .55rem .35rem; font-size: .78rem; font-weight: 700; color: var(--sk-mute); }
.sk-pop-i { display: flex; align-items: flex-start; gap: .65rem; inline-size: 100%; padding: .55rem; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.sk-pop-i:hover { background: var(--sk-soft); }
.sk-pop-i .sk-i { margin-block-start: .15rem; color: var(--sk-acc); font-size: 1.1rem; }
.sk-pop-i span { display: flex; flex-direction: column; }
.sk-pop-i small { color: var(--sk-mute); font-size: .78rem; }
.sk-pop .sk-btn.link { margin: .25rem .3rem 0; }
.sk-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
.sk-app { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .4rem; border-radius: 10px; color: inherit; text-decoration: none; text-align: center; }
a.sk-app:hover { background: var(--sk-soft); text-decoration: none; }
.sk-app.cur { background: var(--sk-soft); }
.sk-app-ic { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; color: #fff; font-weight: 800; font-size: 1.15rem; }
.sk-app b { font-size: .92rem; }
.sk-app small { color: var(--sk-mute); font-size: .74rem; }

/* ---------- حالة التوفّر (البند 12) ---------- */
.sk-dot { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none; background: #1F9D55; box-shadow: 0 0 0 2px var(--sk-paper); }
.sk-dot[data-level="dnd_hour"] { background: #E0A100; }
.sk-dot[data-level="dnd_day"] { background: #E07B00; }
.sk-dot[data-level="dnd"] { background: #D03A3A; }
.sk-dot[data-level="vacation"] { background: #8A8F9C; }
.sk-presence { padding: .3rem 0; }
.sk-presence-h { padding: .35rem .6rem; font-size: .76rem; font-weight: 700; color: var(--sk-mute); }
.sk-presence-i { display: flex; align-items: center; gap: .55rem; inline-size: 100%; padding: .45rem .6rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: var(--sk-fs-sm); text-align: start; cursor: pointer; }
.sk-presence-i:hover { background: var(--sk-soft); }
.sk-presence-i.on { background: var(--sk-acc-soft); font-weight: 700; }
.sk-presence .sk-mute { padding-inline: .6rem; font-size: .72rem; }

/* ---------- ألوان الهوية الجاهزة (البند 9) ---------- */
.sk-palettes { display: flex; flex-wrap: wrap; gap: .45rem; }
.sk-pal { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border: 1px solid var(--sk-line); border-radius: 999px; background: var(--sk-paper); color: var(--sk-ink); font: inherit; font-size: var(--sk-fs-sm); cursor: pointer; }
.sk-pal:hover { border-color: var(--sk-acc); }
.sk-pal.on { border-color: var(--sk-acc); box-shadow: 0 0 0 2px var(--sk-acc-soft); font-weight: 700; }
.sk-pal-c { inline-size: 14px; block-size: 14px; border-radius: 50%; }
.sk-pal-c.sm { inline-size: 9px; block-size: 9px; margin-inline-start: -.5rem; box-shadow: 0 0 0 2px var(--sk-paper); }

/* ---------- المظهر (البند 7) ---------- */
.sk-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.sk-theme { display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border: 1px solid var(--sk-line); border-radius: var(--sk-r); background: var(--sk-paper); color: var(--sk-ink); font: inherit; text-align: start; cursor: pointer; }
.sk-theme:hover { border-color: var(--sk-acc); }
.sk-theme.on { border-color: var(--sk-acc); box-shadow: 0 0 0 3px var(--sk-acc-soft); }
.sk-theme-p { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 4px; block-size: 64px; padding: 6px; border-radius: 8px; background: #f3f4f8; }
.sk-theme-p i { border-radius: 4px; background: #fff; }
.sk-theme-p i:first-child { grid-row: span 2; background: #dfe2ec; }
.sk-theme-p.dark { background: #1b1e29; }
.sk-theme-p.dark i { background: #2a2e3d; }
.sk-theme-p.dark i:first-child { background: #11131b; }
.sk-theme-p.system { background: linear-gradient(90deg, #1b1e29 50%, #f3f4f8 50%); }
.sk-theme-p.system i { background: color-mix(in srgb, #fff 55%, #2a2e3d); }

@media (prefers-reduced-motion: no-preference) {
  .sk-tour-spot { transition: top 260ms var(--sk-ease), left 260ms var(--sk-ease), width 260ms var(--sk-ease), height 260ms var(--sk-ease); }
  .sk-tour-card { transition: top 260ms var(--sk-ease), left 260ms var(--sk-ease); }
  .sk-tour { animation: sk-fade 200ms ease both; }
  .sk-cal, .sk-pop { animation: sk-pop 140ms var(--sk-ease) both; }
  @keyframes sk-fade { from { opacity: 0; } }
  @keyframes sk-pop { from { opacity: 0; transform: translateY(-4px); } }
}