/* ═══════════════════════════════════════════════════════════════
   المظهر «هادئ» — فاتح، مودرن، مريح للعين (اختيار المضيف بعد رفض المظهر الداكن)
   طبقة فوق app.css تُفعَّل بـ data-skin="calm" على <html>. ما يلمس ملفات الأقسام.
   الفكرة: خلفية بيضاء ناعمة بلا حدود، ظلال خفيفة جداً، حواف كبيرة، لون واحد (تركوازي هادئ)
   للأفعال والمحجوز، مسافات أوسع، وأرقام واضحة بدون خط أحادي.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="calm"] {
  color-scheme: light;
  --primary: #0f9d8f; --primary-strong: #0b7f74; --primary-soft: #e3f5f2; --primary-soft-2: #c6ebe5; --on-primary: #fff;
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f2f4f7; --border: #edf0f4; --border-strong: #d9dfe8;
  --text: #16203a; --text-2: #4c5872; --text-3: #6d7791;
  --booked-bg: #0f9d8f; --booked-text: #fff; --free-bg: #ffffff;
  --weekend-bg: #fff6e6; --weekend-text: #a15c00;
  --discount: #0f9d8f; --danger: #d9414a; --danger-soft: #fdeceb; --warn: #c77700; --warn-soft: #fff3df;
  --success: #128a5d; --success-soft: #e4f6ec; --info-soft: #e9f0ff;
  --shadow-sm: 0 1px 2px rgba(22,32,58,.04), 0 10px 30px -20px rgba(22,32,58,.18);
  --shadow-md: 0 14px 40px -24px rgba(22,32,58,.28);
  --shadow-lg: 0 30px 80px -30px rgba(22,32,58,.35);
  --radius: 20px; --radius-sm: 14px; --cell-radius: 14px;
  --nav-w: 240px; --topbar-h: 68px;
}
html[data-skin="calm"] body { font-size: 15.5px; }

/* ─── الشريط العلوي: يذوب بالخلفية ─── */
html[data-skin="calm"] .topbar { background: rgba(244,246,249,.85); border-bottom: 1px solid transparent; backdrop-filter: blur(10px); }
html[data-skin="calm"] .brand-mark { background: #16203a; box-shadow: none; border-radius: 12px; }
html[data-skin="calm"] .icon-btn, html[data-skin="calm"] .user-btn { background: #fff; border-color: #e6eaf0; box-shadow: var(--shadow-sm); }

/* ─── القائمة الجانبية: بطاقة بيضاء، عنصر نشط بتظليل ناعم لا تعبئة ثقيلة ─── */
html[data-skin="calm"] .sidenav { background: #fff; border-radius: 22px; padding: 12px; box-shadow: var(--shadow-sm); gap: 2px; }
html[data-skin="calm"] .nav-item { padding: 11px 14px; border-radius: 14px; color: #4c5872; font-weight: 500; }
html[data-skin="calm"] .nav-item svg { opacity: .7; }
html[data-skin="calm"] .nav-item:hover { background: #f2f4f7; color: #16203a; border-color: transparent; }
html[data-skin="calm"] .nav-item.active { background: #e3f5f2; color: #0b7f74; box-shadow: none; }
html[data-skin="calm"] .nav-item.active svg { opacity: 1; }
html[data-skin="calm"] .nav-text small { color: #6d7791; }
html[data-skin="calm"] .nav-sep { margin: 8px 6px; background: #edf0f4; }

/* ─── العناوين والتبويبات ─── */
html[data-skin="calm"] .view-head h1 { font-size: 26px; font-weight: 700; letter-spacing: 0; }
html[data-skin="calm"] .subtabs { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm); padding: 5px; border-radius: 16px; }
html[data-skin="calm"] .subtab { padding: 9px 16px; border-radius: 12px; color: #4c5872; }
html[data-skin="calm"] .subtab:hover { background: #f2f4f7; color: #16203a; }
html[data-skin="calm"] .subtab.active { background: #16203a; color: #fff; }

/* ─── البطاقات والصفوف: بلا حدود، ظل خفيف ─── */
html[data-skin="calm"] .card { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm); padding: 22px; gap: 14px; }
html[data-skin="calm"] .card-head h2 { font-size: 16.5px; }
html[data-skin="calm"] .card-head p.muted.small, html[data-skin="calm"] .card-head .muted { color: #6d7791; }
html[data-skin="calm"] .row { background: #f7f8fb; border-color: transparent; border-radius: 16px; padding: 13px 16px; }
html[data-skin="calm"] .row:hover { background: #f2f4f7; }
html[data-skin="calm"] .row-icon { background: #e3f5f2; color: #0b7f74; border-radius: 14px; }
html[data-skin="calm"] .row-icon.neutral { background: #eef1f5; color: #6d7791; }
html[data-skin="calm"] .row .row-end .money { color: #16203a; }
html[data-skin="calm"] .table-wrap { border-color: transparent; box-shadow: var(--shadow-sm); border-radius: 18px; }
html[data-skin="calm"] th { color: #6d7791; font-weight: 500; background: #fafbfc; }
html[data-skin="calm"] td { border-color: #f0f2f6; }
html[data-skin="calm"] .note { background: #fff; border: 1px solid #edf0f4; color: #4c5872; border-radius: 16px; }
html[data-skin="calm"] .kv { background: #f7f8fb; border-color: transparent; }

/* ─── مؤشرات الأرقام: هدوء ووضوح ─── */
html[data-skin="calm"] .kpis { gap: 14px; }
html[data-skin="calm"] .kpi { background: #fff; border-color: transparent; box-shadow: var(--shadow-sm); border-radius: 20px; padding: 18px 20px; gap: 6px; }
html[data-skin="calm"] .kpi .label { color: #6d7791; font-size: 12.5px; }
html[data-skin="calm"] .kpi .value { font-size: 27px; font-weight: 700; letter-spacing: 0; white-space: nowrap; display: flex; align-items: baseline; gap: 6px; }
html[data-skin="calm"] .kpi .value small { font-size: 12.5px; color: #6d7791; margin: 0; }
html[data-skin="calm"] .kpi .delta { color: #4c5872; font-weight: 500; }
html[data-skin="calm"] .kpi.primary { background: linear-gradient(160deg, #0f9d8f, #0b7f74); color: #fff; box-shadow: 0 18px 40px -22px #0f9d8f; }
html[data-skin="calm"] .kpi.primary .label { color: rgba(255,255,255,.75); }
html[data-skin="calm"] .kpi.primary .value { color: #fff; font-size: 30px; }
html[data-skin="calm"] .kpi.primary .value small, html[data-skin="calm"] .kpi.primary .delta { color: rgba(255,255,255,.85); }

/* ─── الشارات والأزرار ─── */
html[data-skin="calm"] .badge { padding: 5px 11px; font-weight: 600; }
html[data-skin="calm"] .badge.success { background: #e4f6ec; color: #128a5d; }
html[data-skin="calm"] .badge.danger { background: #fdeceb; color: #d9414a; }
html[data-skin="calm"] .badge.warn { background: #fff3df; color: #c77700; }
html[data-skin="calm"] .badge.primary, html[data-skin="calm"] .badge.info { background: #e3f5f2; color: #0b7f74; }
html[data-skin="calm"] .badge.neutral { background: #eef1f5; color: #4c5872; }
html[data-skin="calm"] .badge.weekend { background: #fff6e6; color: #a15c00; }
html[data-skin="calm"] .btn { border-radius: 12px; padding: 10px 16px; }
html[data-skin="calm"] .btn-primary { background: #16203a; color: #fff; box-shadow: none; }
html[data-skin="calm"] .btn-primary:hover:not(:disabled) { background: #0b7f74; }
html[data-skin="calm"] .btn-ghost { background: #fff; border-color: #e6eaf0; color: #4c5872; box-shadow: var(--shadow-sm); }
html[data-skin="calm"] .btn-ghost:hover:not(:disabled) { color: #16203a; border-color: #d9dfe8; }
html[data-skin="calm"] .btn-ghost[aria-pressed="true"] { background: #e3f5f2; border-color: #c6ebe5; color: #0b7f74; }
html[data-skin="calm"] .icon-btn.nav-toggle { box-shadow: none; }

/* ─── التقويم ─── */
html[data-skin="calm"] .cell { background: #fff; border: 1px solid #edf0f4; }
html[data-skin="calm"] .cell.booked { background: #0f9d8f; border-color: transparent; color: #fff; }
html[data-skin="calm"] .cell.weekend { background: #fff6e6; border-color: #f5e6c8; }
html[data-skin="calm"] .cell.today { box-shadow: inset 0 0 0 2px #16203a; border-color: transparent; }
html[data-skin="calm"] .cell.today .d::after { color: #16203a; }
html[data-skin="calm"] .cell.booked.today .d::after { color: #fff; }

/* ─── النماذج واللوحات ─── */
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 { background: #f7f8fb; border-color: transparent; border-radius: 12px; }
html[data-skin="calm"] .field-input input:focus, html[data-skin="calm"] .field-input select:focus, html[data-skin="calm"] .field-input textarea:focus, html[data-skin="calm"] .input:focus { background: #fff; border-color: #0f9d8f; box-shadow: 0 0 0 4px #e3f5f2; }
html[data-skin="calm"] .panel, html[data-skin="calm"] .menu, html[data-skin="calm"] .dialog { background: #fff; border-color: transparent; box-shadow: var(--shadow-lg); }
html[data-skin="calm"] .health-item .status.ok { background: #128a5d; box-shadow: 0 0 0 4px #e4f6ec; }
html[data-skin="calm"] .health-item .status.bad { background: #d9414a; box-shadow: 0 0 0 4px #fdeceb; }
html[data-skin="calm"] .empty { color: #6d7791; }
html[data-skin="calm"] .msg-box { background: #f7f8fb; }

/* ─── الدخول ─── */
html[data-skin="calm"] .login-body { background: #f4f6f9; }
html[data-skin="calm"] .login-card { border-color: transparent; box-shadow: var(--shadow-lg); border-radius: 26px; }

/* ─── الجوال ─── */
@media (max-width: 767px) {
  html[data-skin="calm"] .sidenav { border-radius: 0; box-shadow: var(--shadow-lg); }
  html[data-skin="calm"] .view-head h1 { font-size: 22px; }
}

/* ─── شبكة المؤشرات بلا عنصر يتيم: الرئيسية 4 أعمدة (بطاقة الليلة تأخذ عمودين)، السوق صف واحد ─── */
@media (min-width: 900px) {
  html[data-skin="calm"] body[data-view="home"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-skin="calm"] body[data-view="home"] .kpis .kpi.primary { grid-column: span 2; }
  html[data-skin="calm"] body[data-view="market"] .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  html[data-skin="calm"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="calm"] .kpis .kpi.primary { grid-column: span 2; }
}


/* ═══════════════════════════════════════════════════════════════
   «هادئ» ليلاً — نفس الهدوء بالعتمة: كحلي فحمي عميق، بطاقات بلا حدود، وتركوازي أفتح شوي.
   يُفعَّل بزر الشمس/القمر (data-theme="dark") فوق المظهر الهادئ.
   ═══════════════════════════════════════════════════════════════ */
html[data-skin="calm"][data-theme="dark"] {
  color-scheme: dark;
  --primary: #2cc4b3; --primary-strong: #5ad8c9; --primary-soft: #123531; --primary-soft-2: #1a4b45; --on-primary: #06201c;
  --bg: #0e1220; --surface: #171c2c; --surface-2: #1e2436; --border: #232a3d; --border-strong: #33405a;
  --text: #e9edf5; --text-2: #bcc5d6; --text-3: #9aa5bd;
  --booked-bg: #2cc4b3; --booked-text: #06201c; --free-bg: #171c2c;
  --weekend-bg: #2a2416; --weekend-text: #f2c66d;
  --discount: #2cc4b3; --danger: #ff7a80; --danger-soft: #3a1c22; --warn: #f2c66d; --warn-soft: #382c14;
  --success: #3fd39a; --success-soft: #123528; --info-soft: #1a2540;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -22px rgba(0,0,0,.8);
  --shadow-md: 0 16px 40px -24px rgba(0,0,0,.85);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.9);
}
html[data-skin="calm"][data-theme="dark"] .topbar { background: rgba(14,18,32,.85); }
html[data-skin="calm"][data-theme="dark"] .brand-mark { background: #2cc4b3; color: #06201c; }
html[data-skin="calm"][data-theme="dark"] .brand-mark svg { stroke: #06201c; }
html[data-skin="calm"][data-theme="dark"] .icon-btn, html[data-skin="calm"][data-theme="dark"] .user-btn { background: #171c2c; border-color: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .sidenav { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] .nav-item { color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .nav-item:hover { background: #1e2436; color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .nav-item.active { background: #123531; color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .nav-text small { color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .nav-sep { background: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .subtabs { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] .subtab { color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .subtab:hover { background: #1e2436; color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .subtab.active { background: #2cc4b3; color: #06201c; }
html[data-skin="calm"][data-theme="dark"] .card { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] .card-head .muted, html[data-skin="calm"][data-theme="dark"] .card-head p.muted.small { color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .row { background: #1e2436; }
html[data-skin="calm"][data-theme="dark"] .row:hover { background: #242c42; }
html[data-skin="calm"][data-theme="dark"] .row-icon { background: #123531; color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .row-icon.neutral { background: #242c42; color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .row .row-end .money { color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .table-wrap { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] th { background: #151a29; color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] td { border-color: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .note { background: #171c2c; border-color: #232a3d; color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .kv { background: #1e2436; }
html[data-skin="calm"][data-theme="dark"] .kpi { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] .kpi .label { color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .kpi .value small { color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .kpi .delta { color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .kpi.primary { background: linear-gradient(160deg, #1f8f81, #14675d); color: #fff; box-shadow: 0 18px 40px -22px #2cc4b3; }
html[data-skin="calm"][data-theme="dark"] .badge.success { background: #123528; color: #3fd39a; }
html[data-skin="calm"][data-theme="dark"] .badge.danger { background: #3a1c22; color: #ff7a80; }
html[data-skin="calm"][data-theme="dark"] .badge.warn { background: #382c14; color: #f2c66d; }
html[data-skin="calm"][data-theme="dark"] .badge.primary, html[data-skin="calm"][data-theme="dark"] .badge.info { background: #123531; color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .badge.neutral { background: #2a3350; color: #ccd4e3; }
html[data-skin="calm"][data-theme="dark"] .badge.weekend { background: #2a2416; color: #f2c66d; }
html[data-skin="calm"][data-theme="dark"] .btn-primary { background: #2cc4b3; color: #06201c; }
html[data-skin="calm"][data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .btn-ghost { background: #171c2c; border-color: #232a3d; color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .btn-ghost:hover:not(:disabled) { color: #e9edf5; border-color: #33405a; }
html[data-skin="calm"][data-theme="dark"] .btn-ghost[aria-pressed="true"] { background: #123531; border-color: #1a4b45; color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .cell { background: #171c2c; border-color: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .cell.booked { background: #2cc4b3; color: #06201c; }
html[data-skin="calm"][data-theme="dark"] .cell.booked .d, html[data-skin="calm"][data-theme="dark"] .cell.booked .p { color: #06201c; }
html[data-skin="calm"][data-theme="dark"] .cell.weekend { background: #2a2416; border-color: #4a3d1e; }
html[data-skin="calm"][data-theme="dark"] .cell.today { box-shadow: inset 0 0 0 2px #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .cell.today .d::after { color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .field-input input, html[data-skin="calm"][data-theme="dark"] .field-input select, html[data-skin="calm"][data-theme="dark"] .field-input textarea, html[data-skin="calm"][data-theme="dark"] .input { background: #1e2436; color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .field-input input:focus, html[data-skin="calm"][data-theme="dark"] .field-input select:focus, html[data-skin="calm"][data-theme="dark"] .field-input textarea:focus, html[data-skin="calm"][data-theme="dark"] .input:focus { background: #171c2c; border-color: #2cc4b3; box-shadow: 0 0 0 4px #123531; }
html[data-skin="calm"][data-theme="dark"] .panel, html[data-skin="calm"][data-theme="dark"] .menu, html[data-skin="calm"][data-theme="dark"] .dialog { background: #171c2c; }
html[data-skin="calm"][data-theme="dark"] .health-item .status.ok { background: #3fd39a; box-shadow: 0 0 0 4px #123528; }
html[data-skin="calm"][data-theme="dark"] .health-item .status.bad { background: #ff7a80; box-shadow: 0 0 0 4px #3a1c22; }
html[data-skin="calm"][data-theme="dark"] .msg-box { background: #1e2436; }
html[data-skin="calm"][data-theme="dark"] .login-body { background: #0e1220; }
html[data-skin="calm"][data-theme="dark"] .login-card { background: #171c2c; }


/* ─── القائمة v2 بالمظهر الهادئ ─── */
html[data-skin="calm"] .nav-section-title { color: #a3abbd; }
html[data-skin="calm"] .nav-item { padding: 9px 12px; gap: 10px; }
html[data-skin="calm"] .nav-ico { background: #f2f4f7; color: #4c5872; border-radius: 11px; }
html[data-skin="calm"] .nav-item:hover .nav-ico { background: #e9ecf1; color: #16203a; }
html[data-skin="calm"] .nav-item.active { background: transparent; color: #16203a; font-weight: 600; }
html[data-skin="calm"] .nav-item.active .nav-ico { background: #0f9d8f; color: #fff; box-shadow: 0 8px 18px -10px #0f9d8f; }
html[data-skin="calm"] .nav-item.active::after { content: ""; position: absolute; inset-inline-end: -12px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: #0f9d8f; }
html[data-skin="calm"] .nav-sub::before { background: #e6eaf0; inset-inline-start: 28px; }
html[data-skin="calm"] .nav-sub-item { color: #4c5872; }
html[data-skin="calm"] .nav-sub-item:hover { background: #f2f4f7; color: #16203a; }
html[data-skin="calm"] .nav-sub-item.active { background: #e3f5f2; color: #0b7f74; }
html[data-skin="calm"] .nav-sub-item.active::before { background: #0f9d8f; box-shadow: 0 0 0 3px #fff; }
html[data-skin="calm"] .nav-foot { background: #f7f8fb; border-radius: 16px; }
html[data-skin="calm"] .nav-dot { box-shadow: 0 0 0 3px #fff; }
html[data-skin="calm"] .menu { border-radius: 18px; padding: 8px; min-width: 240px; }
html[data-skin="calm"] .menu-head { padding: 10px 12px 10px; }
html[data-skin="calm"] .menu-item { border-radius: 12px; padding: 10px 12px; }
html[data-skin="calm"] .bottombar { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top-color: #edf0f4; }
html[data-skin="calm"] .bb-item.active { background: #e3f5f2; color: #0b7f74; }
html[data-skin="calm"][data-theme="dark"] .nav-section-title { color: #9aa5bd; }
html[data-skin="calm"][data-theme="dark"] .nav-ico { background: #1e2436; color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .nav-item:hover .nav-ico { background: #242c42; color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .nav-item.active { color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .nav-item.active .nav-ico { background: #2cc4b3; color: #06201c; box-shadow: 0 8px 18px -10px #2cc4b3; }
html[data-skin="calm"][data-theme="dark"] .nav-item.active::after { background: #2cc4b3; }
html[data-skin="calm"][data-theme="dark"] .nav-sub::before { background: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item { color: #bcc5d6; }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item:hover { background: #1e2436; color: #e9edf5; }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item.active { background: #123531; color: #5ad8c9; }
html[data-skin="calm"][data-theme="dark"] .nav-sub-item.active::before { background: #2cc4b3; box-shadow: 0 0 0 3px #171c2c; }
html[data-skin="calm"][data-theme="dark"] .nav-foot { background: #1e2436; }
html[data-skin="calm"][data-theme="dark"] .nav-dot { box-shadow: 0 0 0 3px #171c2c; }
html[data-skin="calm"][data-theme="dark"] .bottombar { background: rgba(23,28,44,.94); border-top-color: #232a3d; }
html[data-skin="calm"][data-theme="dark"] .bb-item.active { background: #123531; color: #5ad8c9; }