/* ═══════════════════════════════════════════════════════════════
   طبقة «احترافي» — فوق calm.css بنفس الألوان تماماً (طلب المضيف 18 سبتمبر 2026: «أعد تصميم الويب بنفس الألوان… احترافي»).
   ما تغيّر لون ولا ملف قسم. الفرق كله في النظام البصري:
   - حواف دقيقة (خط 1px) بدل ظلال ضبابية → مظهر «منتج» لا «تطبيق هواة»
   - زوايا أصغر وأهدأ، إيقاع مسافات ثابت (4/8)، ورؤوس صفحات بخط فاصل
   - أرقام بعرض ثابت (tabular) بكل مكان فيه رقم — الأعمدة ما ترقص
   - جداول: رأس ثابت عند التمرير، صفوف بارتفاع موحّد، الأرقام محاذاة للنهاية
   - الملاحظات بشريط جانبي لا حدود متقطعة، والشارات بنقطة لون
   - حلقات تركيز للوحة المفاتيح، وحركة دخول خفيفة تحترم «تقليل الحركة»
   كل الألوان من متغيرات calm.css فالفاتح والداكن يشتغلان تلقائياً.
   ⚠️ لا letter-spacing سالب (يكسر اتصال الحروف العربية)، والنص الخافت يبقى على --text-3 (تباين ≥ 4.5:1).
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="calm"] {
  --radius: 16px; --radius-sm: 12px; --cell-radius: 12px;
  --hairline: 1px solid var(--border);
  --shadow-sm: 0 1px 2px rgba(22,32,58,.05);
  --shadow-md: 0 4px 16px -6px rgba(22,32,58,.14);
  --shadow-lg: 0 24px 60px -24px rgba(22,32,58,.30);
  --ring: 0 0 0 3px var(--primary-soft-2);
  --ease: cubic-bezier(.2,.7,.2,1);
}
html[data-skin="calm"][data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px -8px rgba(0,0,0,.7);
}
html[data-skin="calm"] body {
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* ─── الأرقام: عرض ثابت بكل مكان ─── */
html[data-skin="calm"] .num, html[data-skin="calm"] td, html[data-skin="calm"] .kpi .value,
html[data-skin="calm"] .money, html[data-skin="calm"] .cell, html[data-skin="calm"] .badge,
html[data-skin="calm"] .month-stats, html[data-skin="calm"] .stat { font-variant-numeric: tabular-nums lining-nums; }

/* ─── رأس الصفحة: عنوان واضح + خط فاصل ─── */
html[data-skin="calm"] .view { gap: 20px; }
html[data-skin="calm"] .view-head { align-items: flex-end; }
/* سطر الترحيب/الوصف تحت العنوان مباشرة (يعيش داخل .view التالي) — يلتصق بالعنوان كجزء من الرأس */
html[data-skin="calm"] .view-head + .view > p.muted:first-child { margin-top: -14px; color: var(--text-2); font-size: 14px; }
html[data-skin="calm"] .view-head h1 { font-size: 24px; font-weight: 700; line-height: 1.3; }
html[data-skin="calm"] .view-head p, html[data-skin="calm"] .view-head .muted { color: var(--text-2); font-size: 14px; margin-top: 4px; }

/* ─── البطاقات: خط دقيق + ظل خفيف جداً ─── */
html[data-skin="calm"] .card {
  background: var(--surface); border: var(--hairline); box-shadow: var(--shadow-sm);
  border-radius: var(--radius); padding: 20px; gap: 14px;
}
html[data-skin="calm"] .card-head { padding-bottom: 2px; }
html[data-skin="calm"] .card-head h2 { font-size: 16px; font-weight: 700; line-height: 1.4; }
html[data-skin="calm"] .card-head h3, html[data-skin="calm"] .card h3 { font-size: 14px; font-weight: 600; color: var(--text); }
html[data-skin="calm"] .card-head p.muted.small, html[data-skin="calm"] .card-head .muted { color: var(--text-3); font-size: 13px; margin-top: 2px; }

/* ─── مؤشرات الأداء (KPI) ─── */
html[data-skin="calm"] .kpis { gap: 12px; }
html[data-skin="calm"] .kpi {
  background: var(--surface); border: var(--hairline); box-shadow: var(--shadow-sm);
  border-radius: var(--radius); padding: 16px 18px; gap: 6px; min-height: 108px; justify-content: space-between;
}
html[data-skin="calm"] .kpi .label {
  color: var(--text-2); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px;
}
html[data-skin="calm"] .kpi .label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .55; flex: none;
}
html[data-skin="calm"] .kpi .value { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--text); }
html[data-skin="calm"] .kpi .value small { font-size: 13px; font-weight: 500; color: var(--text-3); }
html[data-skin="calm"] .kpi .delta { color: var(--text-2); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
html[data-skin="calm"] .kpi .delta.up { color: var(--success); font-weight: 600; }
html[data-skin="calm"] .kpi .delta.down { color: var(--danger); font-weight: 600; }
/* المؤشر الرئيسي: نفس التدرّج التركوازي، ظل أهدأ */
html[data-skin="calm"] .kpi.primary {
  background: linear-gradient(155deg, var(--primary), var(--primary-strong)); border-color: transparent;
  box-shadow: 0 10px 28px -18px var(--primary);
}
html[data-skin="calm"][data-theme="dark"] .kpi.primary { background: linear-gradient(155deg, #0f9d8f, #0b7f74); }
html[data-skin="calm"] .kpi.primary .label, html[data-skin="calm"] .kpi.primary .delta,
html[data-skin="calm"] .kpi.primary .value small { color: rgba(255,255,255,.88); }
html[data-skin="calm"] .kpi.primary .label::before { background: #fff; opacity: .9; }
html[data-skin="calm"] .kpi.primary .value { color: #fff; font-size: 30px; }
/* الأرباح: 7 مؤشرات كانت تترك واحداً يتيماً بسطر → الرئيسي بعرض عمودين = صفّان كاملان */
@media (min-width: 1100px) {
  html[data-skin="calm"] body[data-view="finance"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-skin="calm"] body[data-view="finance"] .kpis .kpi.primary { grid-column: span 2; }
  html[data-skin="calm"] body[data-view="visibility"] .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ─── الجداول: رأس ثابت، صفوف موحّدة، الأرقام للنهاية ─── */
html[data-skin="calm"] .table-wrap {
  border: var(--hairline); border-radius: var(--radius-sm); overflow: auto; max-height: 70vh;
  background: var(--surface);
}
html[data-skin="calm"] table { font-size: 13.5px; }
html[data-skin="calm"] th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600;
  padding: 10px 14px; border-bottom: var(--hairline);
}
html[data-skin="calm"][data-theme="dark"] th { background: #1a2031; color: var(--text-2); }
html[data-skin="calm"] td { padding: 11px 14px; height: 44px; border-bottom: 1px solid var(--border); color: var(--text); }
html[data-skin="calm"] td.num, html[data-skin="calm"] th.num { text-align: end; }
html[data-skin="calm"] tbody tr { transition: background .12s var(--ease); }
html[data-skin="calm"] tbody tr:hover td { background: var(--surface-2); }
html[data-skin="calm"] tfoot td { background: var(--surface-2); font-weight: 700; border-top: 1px solid var(--border-strong); }

/* ─── الصفوف/القوائم (الضيوف، الحجوزات) ─── */
html[data-skin="calm"] .row {
  border: var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
html[data-skin="calm"] .row:hover { border-color: var(--border-strong); background: var(--surface-2); }
html[data-skin="calm"] .avatar { font-weight: 700; }

/* ─── الملاحظات: شريط جانبي بدل حدود متقطعة ─── */
html[data-skin="calm"] .note {
  background: var(--surface-2); border: 0; border-inline-start: 3px solid var(--primary);
  border-radius: 10px; padding: 10px 14px; color: var(--text-2); font-size: 13px; line-height: 1.65;
}
html[data-skin="calm"][data-theme="dark"] .note { background: var(--surface-2); color: var(--text-2); }

/* ─── الشارات: حبة بنقطة لون ─── */
html[data-skin="calm"] .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.6; border: 1px solid transparent;
}
html[data-skin="calm"] .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
html[data-skin="calm"] .badge.neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }

/* ─── الأزرار والحقول: ارتفاع موحّد + حلقة تركيز ─── */
html[data-skin="calm"] .btn { min-height: 38px; border-radius: 10px; font-weight: 600; padding: 0 16px; transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s; }
html[data-skin="calm"] .btn:active:not(:disabled) { transform: translateY(1px); }
html[data-skin="calm"] .btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
html[data-skin="calm"] .btn-ghost { background: var(--surface); border: var(--hairline); color: var(--text); }
html[data-skin="calm"] .btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
html[data-skin="calm"] .icon-btn, html[data-skin="calm"] .user-btn { background: var(--surface); border: var(--hairline); box-shadow: none; }
html[data-skin="calm"] .field-input input, html[data-skin="calm"] .field-input select,
html[data-skin="calm"] .field-input textarea, html[data-skin="calm"] .input { border-radius: 10px; min-height: 40px; }
html[data-skin="calm"] :is(.btn, .icon-btn, .user-btn, .nav-item, .subtab, .row, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ─── أيقونات المؤشرات (Lucide محلياً عبر pro.js) — تحل محل النقطة الملوّنة ─── */
html[data-skin="calm"] .kpi .label[data-ico]:not([data-ico=""])::before { display: none; }
html[data-skin="calm"] .kpi-ico {
  width: 28px; height: 28px; padding: 6px; border-radius: 8px; flex: none;
  background: var(--primary-soft); color: var(--primary-strong); stroke-width: 2;
}
html[data-skin="calm"] .kpi.primary .kpi-ico { background: rgba(255,255,255,.18); color: #fff; }
html[data-skin="calm"][data-theme="dark"] .kpi-ico { color: var(--primary-strong); }

/* ─── الرسوم البيانية ─── */
html[data-skin="calm"] .chart-box { width: 100%; }
html[data-skin="calm"] .chart-box canvas { display: block; }

/* ─── التنقل: نفس الشكل بحدود دقيقة ─── */
html[data-skin="calm"] .sidenav { border: var(--hairline); box-shadow: none; border-radius: var(--radius); }
html[data-skin="calm"] .nav-item { border-radius: 10px; }
html[data-skin="calm"] .subtabs { border: var(--hairline); box-shadow: none; }
html[data-skin="calm"] .topbar { border-bottom: var(--hairline); }
html[data-skin="calm"] .brand-mark { border-radius: 10px; }
html[data-skin="calm"] .panel, html[data-skin="calm"] .menu, html[data-skin="calm"] .dialog { border: var(--hairline); box-shadow: var(--shadow-lg); }

/* ─── التقويم: خلايا أنظف ─── */
html[data-skin="calm"] .month-card { border: var(--hairline); box-shadow: var(--shadow-sm); }
html[data-skin="calm"] .cell { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
html[data-skin="calm"] .cell:hover { box-shadow: var(--shadow-md); }

/* ─── حالات فارغة وتحميل ─── */
html[data-skin="calm"] .empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 32px; }
html[data-skin="calm"] .skeleton { border-radius: 10px; }

/* ─── شريط تمرير رفيع ─── */
html[data-skin="calm"] * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ─── حركة دخول خفيفة للأقسام ─── */
@media (prefers-reduced-motion: no-preference) {
  /* بطاقات الرسوم مستثناة: التحويل أثناء الحركة يربك قياس Chart.js فترتسم الأعمدة بحجم خاطئ */
  html[data-skin="calm"] .view > *:not(:has(canvas)) { animation: pro-in .28s var(--ease) both; }
  html[data-skin="calm"] .view > *:nth-child(2) { animation-delay: .03s; }
  html[data-skin="calm"] .view > *:nth-child(3) { animation-delay: .06s; }
  html[data-skin="calm"] .view > *:nth-child(n+4) { animation-delay: .09s; }
}
@keyframes pro-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── الجوال ─── */
@media (max-width: 720px) {
  html[data-skin="calm"] .view-head h1 { font-size: 21px; }
  html[data-skin="calm"] .card { padding: 16px; }
  html[data-skin="calm"] .kpi { min-height: 96px; padding: 14px 16px; }
  html[data-skin="calm"] .kpi .value { font-size: 22px; }
  html[data-skin="calm"] .kpi.primary .value { font-size: 26px; }
  html[data-skin="calm"] .table-wrap { max-height: none; }
}

/* 🏠 المنصة — منتقي الشقة بالشريط العلوي (مالك بعدة شقق فقط). نفس ألوان الحقول، بلا لون جديد */
html[data-skin="calm"] .unit-picker {
  min-width: 132px; height: 38px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
html[data-skin="calm"] .unit-picker:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(44, 196, 179, .28)); }
@media (max-width: 760px) {
  html[data-skin="calm"] .topbar-center { flex-wrap: wrap; gap: 8px; }
  html[data-skin="calm"] .unit-picker { flex: 1 1 100%; width: 100%; height: 44px; font-size: 16px; }
}