/* ═══════════════ إحساس التطبيق على الجوال + صقل الحركة (19 سبتمبر 2026 — مهارتا mobile-native وemil-design-eng) ═══════════════
   المضيف يستخدم اللوحة من الجوال غالباً. القياس قبل: 64 قاعدة :hover بلا بوابة (على اللمس تعلق بعد الضغط — البطاقة تبقى «مرفوعة» والصف
   مضاء لين يضغط مكان ثاني)، لا استجابة ضغط (:active) لأغلب العناصر، وميض رمادي عند اللمس، ودخول 450ms ولوحة أوامر متحركة.
   القاعدة: الـhover للفأرة فقط، واللمس ياخذ استجابة فورية عند نزول الإصبع. آخر طبقة تُحمَّل. */

html[data-skin="calm"] {
  --ease-out: cubic-bezier(.23, 1, .32, 1);          /* منحنى خروج قوي — الحركة تبدأ فوراً فتحس سريعة */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  -webkit-tap-highlight-color: transparent;          /* الوميض الرمادي عند اللمس = أوضح علامة «هذا موقع» */
  -webkit-text-size-adjust: 100%;                    /* لا تضخيم خط بالوضع الأفقي */
}
/* السحب للتحديث يبقى شغّالاً على الصفحة (مفيد للوحة بيانات)، لكن القوائم واللوحات الداخلية ما تسحب الصفحة وراها */
html[data-skin="calm"] :is(.panel-body, .panel, .sidenav, .pal-list, .menu, .table-wrap, .msg-box, .chat-body) { overscroll-behavior: contain; }

/* ─── 1) عناصر التحكم: ضغطة فورية بلا تأخير، ولا تحديد نص بالضغط المطوّل (النص العادي يبقى قابلاً للنسخ) ─── */
html[data-skin="calm"] :is(button, a, [role="button"], .btn, .icon-btn, .user-btn, .nav-item, .nav-sub-item, .bb-item, .subtab, .tab, .seg button,
  .chip, .day-chip, .row[role="button"], .tile[role="button"], .cell, .wk, .menu-item, .pal-item, summary, label.switch) {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* ─── 2) استجابة الضغط عند نزول الإصبع (كل أنواع الإدخال) ─── */
html[data-skin="calm"] :is(.btn, .icon-btn, .user-btn, .subtab, .tab, .seg button, .chip, .day-chip, .bb-item, .menu-item, .pal-item) {
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}
html[data-skin="calm"] :is(.btn, .icon-btn, .user-btn, .subtab, .tab, .seg button, .chip, .day-chip, .bb-item):active:not(:disabled) { transform: scale(.97); }
html[data-skin="calm"] :is(.tile[role="button"], .kpi[style*="cursor"], .row[role="button"], .row:has(> svg:last-child), .wk, .sys-item, .nav-item, .nav-sub-item, .menu-item, .pal-item):active { transform: scale(.985); }
html[data-skin="calm"] .cell:active { transform: scale(.96); }
html[data-skin="calm"][data-theme="dark"] :is(.row, .wk, .sys-item, .nav-item, .nav-sub-item, .menu-item, .tile[role="button"]):active { background-color: var(--surface-3); border-color: var(--border-strong); }
html[data-skin="calm"][data-theme="dark"] .btn-primary:active:not(:disabled) { background: var(--primary-strong); }

/* ─── 3) اللمس: نلغي آثار الـhover المتراكمة من الطبقات السابقة (ترتفع/تضيء/تميل وتعلق بعد الضغط) ─── */
@media (hover: none), (pointer: coarse) {
  html[data-skin="calm"][data-theme="dark"] :is(.tile, .card, .kpi, .month-card, .row, .sys-item, .wk):hover::after { opacity: 0; }          /* ضوء المؤشر */
  html[data-skin="calm"][data-theme="dark"] :is(.tile[role="button"], .kpi[style*="cursor"]):hover:not(:active) {
    transform: none; box-shadow: var(--sheen);
    background: var(--surface-grad, var(--surface)) padding-box, var(--edge-grad, linear-gradient(var(--border), var(--border))) border-box;
  }
  html[data-skin="calm"] .wk:hover:not(:active), html[data-skin="calm"] .tile[role="button"]:hover:not(:active) { transform: none; }
  html[data-skin="calm"][data-theme="dark"] :is(.row, .sys-item, .wk):hover:not(:active) { background: var(--surface); border-color: var(--border); }
  html[data-skin="calm"][data-theme="dark"] :is(.card, .kpi):hover { border-color: var(--border); }
  html[data-skin="calm"][data-theme="dark"] tbody tr:hover td { background: transparent; }
  html[data-skin="calm"][data-theme="dark"] tbody tr:hover td:first-child { box-shadow: none; }
  html[data-skin="calm"][data-theme="dark"] .cell:hover:not(:active) { background: var(--free-bg); border-color: var(--border); box-shadow: none; }
  html[data-skin="calm"][data-theme="dark"] .cell.booked:hover { background: var(--booked-bg); }
  html[data-skin="calm"] :is(.tile, .kpi):hover :is(.tile-ico, .kpi-ico),
  html[data-skin="calm"] :is(.nav-item:hover .nav-ico svg, .bb-item:hover svg, .icon-btn:hover svg, #refresh:hover svg, .row:hover > svg:last-child) { transform: none; }
  html[data-skin="calm"][data-theme="dark"] .btn-primary:hover::before { transform: none; }
  html[data-skin="calm"][data-theme="dark"] :is(.nav-item, .nav-sub-item, .subtab, .menu-item):hover:not(.active):not(:active) { background: transparent; }
  html[data-skin="calm"][data-theme="dark"] :is(.icon-btn, .user-btn):hover:not(:active) { background: var(--surface); border-color: var(--border); color: var(--text-2); }
  html[data-skin="calm"][data-theme="dark"] .btn-ghost:hover:not(:disabled):not(:active) { background: transparent; border-color: var(--border); }
  html[data-skin="calm"][data-theme="dark"] .btn-primary:hover:not(:disabled):not(:active) { background: var(--primary); }
}

/* ─── 4) الحركة: أسرع وأحدّ. واجهة يومية = أقل من 300ms ─── */
@media (prefers-reduced-motion: no-preference) {
  html[data-skin="calm"] .fx-in { animation: fx-in-2 .26s var(--ease-out) backwards;   /* backwards لا both: التعبئة الأمامية تثبّت transform وتلغي استجابة الضغط */ animation-delay: var(--fx-delay, 0ms); }
  /* لوحة الأوامر تُفتح بالكيبورد عشرات المرات باليوم → بلا حركة إطلاقاً (تحس أسرع) */
  html[data-skin="calm"] :is(.pal-scrim, .pal) { animation: none; }
  html[data-skin="calm"] .modal { animation-duration: .18s; animation-timing-function: var(--ease-out); }
  html[data-skin="calm"] .toast { animation-timing-function: var(--ease-out); }
  html[data-skin="calm"] .panel { transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .18s ease; }     /* منحنى الدرج بأسلوب iOS */
  html[data-skin="calm"] #refresh:hover svg { transition-duration: .35s; }
}
@keyframes fx-in-2 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-skin="calm"] :is(.btn, .icon-btn, .tile, .row, .cell, .wk):active { transform: none; }
}

/* ─── 5) الحواف الآمنة (النوتش وشريط الرئيسية) للعناصر الثابتة — viewport-fit=cover موجود أصلاً ─── */
html[data-skin="calm"] .topbar { padding-top: env(safe-area-inset-top, 0px); }
html[data-skin="calm"] .toast-host { top: calc(74px + env(safe-area-inset-top, 0px)); }

/* ─── 6) صقل الطباعة (redesign-skill): لا كلمة يتيمة بآخر سطر، وعناوين متوازنة ─── */
html[data-skin="calm"] :is(h1, h2, h3, .tile-title, .hero-state) { text-wrap: balance; }
html[data-skin="calm"] :is(p, .muted, .row-sub, .tile-sub, .note, li) { text-wrap: pretty; }

/* ─── 7) رابط «تخطَّ للمحتوى» لمستخدم الكيبورد — يظهر عند التركيز فقط ─── */
.skip-link { min-height: 44px; display: inline-flex; align-items: center; position: fixed; z-index: 300; top: 8px; inset-inline-start: 8px; padding: 10px 14px; border-radius: 10px; background: var(--primary); color: var(--on-primary);
  font-weight: 600; transform: translateY(-160%); transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.skip-link:focus-visible { transform: none; outline: none; box-shadow: var(--ring); }

/* ─── 8) 🐛 بلاطة «الضيوف» على الجوال كانت نصف العرض (b-4 → span 6) فينضغط الصف: الاسم ينكسر والتاريخ عمودي وشارة «يصل اليوم» مقصوصة.
   البلاطات اللي فيها قائمة تأخذ العرض كامل تحت 1180px؛ المؤشرات الرقمية تبقى نصفين. ─── */
@media (max-width: 1180px) { html[data-skin="calm"] .bento > .b-list { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  html[data-skin="calm"] .tile-head { flex-wrap: wrap; gap: 8px; }
  html[data-skin="calm"] .tile-head .seg { max-width: 100%; }
}

/* ─── 9) شريط الأسبوع على الجوال: تمرير أفقي بفيزياء المتصفح (scroll-snap) + تلاشٍ عند الحافة يوضّح إن فيه أيام باقية (كان اليوم الرابع مقصوصاً كأنه خلل) ─── */
@media (max-width: 720px) {
  html[data-skin="calm"] .weekstrip { scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); padding-inline-end: 24px; }
  html[data-skin="calm"] .weekstrip::-webkit-scrollbar { display: none; }
  html[data-skin="calm"] .weekstrip > .wk { scroll-snap-align: start; }
}

/* ─── 10) (هنا لأن صفحة الدخول تحمّل هذي الطبقة) 🏷 الشعار (باب تحت سقف) بدل أيقونة البيت العامة، وداخل التطبيق المثبّت مساحة للحواف ─── */
html[data-skin="calm"] .brand-mark.brand-logo { background: none !important; box-shadow: 0 0 0 1px rgba(44,196,179,.28), 0 8px 24px -10px rgba(44,196,179,.5) !important; padding: 0; overflow: hidden; }
html[data-skin="calm"] .brand-mark.brand-logo img { display: block; width: 100%; height: 100%; }