[hidden] {
  display: none !important;
}

:root {
  --ink: #10152b;
  --ink-soft: #4a5470;
  --muted: #77809c;
  --line: #e8ebf4;
  --line-soft: #f0f2f7;
  --sky: #4b71ff;
  --sky-soft: #eaf0ff;
  --lime: #52c982;
  --lime-soft: #e5f8ec;
  --lavender: #8068ef;
  --amber: #e8a541;
  --amber-soft: #fff4dd;
  --danger: #d65363;
  --danger-soft: #fff0f1;
  --rose: #d84f8f;
  --rose-soft: #ffe6f0;
  --shell: rgba(255, 255, 255, 0.76);
  --shell-border: rgba(255, 255, 255, 0.8);
  --sidebar-bg: rgba(250, 251, 255, 0.75);
  --panel-bg: rgba(255, 255, 255, 0.92);
  --panel-solid: #ffffff;
  font-family: Alexandria, system-ui, -apple-system, sans-serif;
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #eff1f7;
  direction: rtl;
  font-family: Alexandria, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

button, a, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* خلفية ضبابية متدرجة Ambient Lights */
.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
}
.ambient-one {
  width: 320px;
  height: 320px;
  background: #b4c5ff;
  top: -120px;
  right: 18%;
}
.ambient-two {
  width: 280px;
  height: 280px;
  background: #d8f8ea;
  bottom: -100px;
  left: 8%;
}

/* الهيكل الخارجي Shell */
.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - 48px);
  margin: 24px;
  border: 1px solid var(--shell-border);
  border-radius: 28px;
  background: var(--shell);
  box-shadow: 0 28px 80px rgba(24, 31, 61, 0.12);
  backdrop-filter: blur(18px) saturate(135%);
  transition: grid-template-columns 0.25s ease;
}

.shell.sidebar-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}

/* الشريط الجانبي Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 48px);
  padding: 24px 16px 18px;
  border-left: 1px solid rgba(225, 229, 240, 0.78);
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 999px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
}

.sidebar-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  position: relative;
}

.sidebar-collapse-btn {
  position: static;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(20, 30, 60, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  z-index: 5;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar-collapse-btn:hover {
  color: var(--sky);
  background: var(--sky-soft);
  border-color: #cbd5e1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.06em;
  padding: 0 2px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.brand-text {
  display: block;
  line-height: 1.1;
}
.brand-sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #949bb4;
  margin-top: 2px;
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  padding: 7px 5px;
  border-radius: 9px;
  background: linear-gradient(145deg, #5376ff, #785cf5);
  box-shadow: 0 8px 15px rgba(80, 105, 238, 0.27);
  flex-shrink: 0;
}
.brand-mark i {
  display: block;
  width: 4px;
  background: #fff;
  border-radius: 5px;
  transform: skewY(-18deg);
}
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 15px; }
.brand-mark i:nth-child(3) { height: 11px; }

.sidebar-search-trigger {
  margin-top: 14px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #8a94ae;
  font-size: 13.5px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-search-trigger:hover {
  border-color: #c7d0e6;
  background: #f8fafc;
  color: var(--sky);
}
.sidebar-search-trigger .search-trigger-ic {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a94ae;
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.sidebar-search-trigger .search-trigger-ic svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
.sidebar-search-trigger:hover .search-trigger-ic {
  color: var(--sky);
}
.sidebar-search-trigger .search-trigger-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #8a94ae;
  white-space: nowrap;
  transition: color 0.18s ease;
  line-height: 1;
}
.sidebar-search-trigger:hover .search-trigger-text {
  color: var(--ink);
}
.sidebar-search-trigger .search-trigger-kbd {
  margin-inline-start: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: Manrope, sans-serif;
  font-weight: 600;
  color: #a0a7ba;
  background: #f8fafc;
  transition: all 0.18s ease;
  line-height: 1.2;
}
.sidebar-search-trigger:hover .search-trigger-kbd {
  border-color: #cbd5e1;
  color: #64748b;
}

.shell.sidebar-collapsed .brand span:not(.brand-mark),
.shell.sidebar-collapsed .brand .brand-text,
.shell.sidebar-collapsed .nav-item span:not(.nav-ic),
.shell.sidebar-collapsed .nav-arrow,
.shell.sidebar-collapsed .nav-subitem span,
.shell.sidebar-collapsed .sidebar-search-trigger .search-trigger-text,
.shell.sidebar-collapsed .sidebar-search-trigger .search-trigger-kbd,
.shell.sidebar-collapsed .sidebar-user-card .user-details,
.shell.sidebar-collapsed .sidebar-logout-btn .logout-text,
.shell.sidebar-collapsed .sidebar-sync-row span:not(.sync-dot),
.shell.sidebar-collapsed .sidebar-brand-credit {
  display: none !important;
}

.shell.sidebar-collapsed .sidebar-head-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.shell.sidebar-collapsed .sidebar-collapse-btn {
  position: static;
  margin: 0 auto;
  transform: rotate(180deg);
}

.shell.sidebar-collapsed .sidebar-search-trigger {
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 10px auto 0;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}
.shell.sidebar-collapsed .sidebar-search-trigger .search-trigger-ic {
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shell.sidebar-collapsed .sidebar-search-trigger .search-trigger-ic svg {
  width: 18px;
  height: 18px;
}

.shell.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 9px;
}
.shell.sidebar-collapsed .nav-submenu {
  padding-right: 0 !important;
  margin: 3px 0 !important;
  gap: 3px !important;
  align-items: center;
}
.shell.sidebar-collapsed .nav-subitem {
  justify-content: center !important;
  padding: 8px !important;
  width: 100% !important;
  box-sizing: border-box;
}

.shell.sidebar-collapsed .sidebar-foot {
  padding: 10px 0 0;
  gap: 8px;
  align-items: center;
}

.shell.sidebar-collapsed .sidebar-user-card {
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0 auto;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

.shell.sidebar-collapsed .sidebar-user-card .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.shell.sidebar-collapsed .sidebar-sync-row {
  justify-content: center;
  padding: 2px 0;
  margin: 0 auto;
}

.shell.sidebar-collapsed .sidebar-logout-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  margin: 0 auto;
  justify-content: center;
  border-radius: 10px;
}

.nav-list {
  margin-top: 14px;
  display: grid;
  gap: 3px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #68718e;
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.16s ease, color 0.16s ease, transform 0.14s ease;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: right;
  text-decoration: none;
}
.nav-item .nav-ic {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.nav-item .nav-ic svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.nav-item:hover {
  background: #f0f3fb;
  color: var(--ink);
}
.nav-item.active {
  background: #151c3a;
  color: #fff;
  box-shadow: 0 9px 18px rgba(15, 23, 56, 0.19);
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #8b93ad;
  font-size: 12px;
  padding: 12px 2px 0;
  border-top: 1px solid var(--line-soft);
  width: 100%;
  box-sizing: border-box;
}
.sync-dot {
  width: 7px;
  height: 7px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(82, 201, 130, 0.14);
  flex: 0 0 auto;
  animation: pulseSyncDot 2.2s infinite ease-in-out;
}
@keyframes pulseSyncDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(82, 201, 130, 0.14); }
  50% { box-shadow: 0 0 0 5px rgba(82, 201, 130, 0.28); }
}

.sidebar-logout-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #ef4444;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.18s ease;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-logout-btn .logout-ic {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

.sidebar-brand-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 4px;
}

.sidebar-nasaq-link {
  display: block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  font-family: Manrope, sans-serif;
  color: #8a94ae;
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 6px;
  transition: color 0.18s ease;
  letter-spacing: 0.02em;
}

.sidebar-nasaq-link:hover {
  color: var(--sky);
}

/* مساحة المحتوى Content */
.content {
  min-width: 0;
  padding: 28px clamp(18px, 3vw, 44px) 50px;
}

/* الشريط العلوي Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}
.eyebrow {
  margin: 0 0 4px;
  color: #9299b0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.topbar h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.05em;
  font-weight: 800;
}
.topbar h1 span {
  color: #efb247;
  font-size: 18px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* شارة البث المباشر Live Occupancy */
.live-occupancy-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #2f9f61;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.live-occupancy-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
  animation: pulseDot 1.4s ease-in-out infinite;
}
.live-occupancy-badge b {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  margin-inline-start: 3px;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0.6; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* الأزرار Buttons */
.primary-button {
  border: 0;
  border-radius: 12px;
  background: #1c254a;
  color: #fff;
  padding: 11px 18px;
  box-shadow: 0 8px 18px rgba(28, 37, 74, 0.17);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.primary-button:hover:not(:disabled) {
  background: #131a38;
  box-shadow: 0 10px 22px rgba(28, 37, 74, 0.24);
  transform: translateY(-1px);
}
.primary-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.primary-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.soft-button {
  border: 1px solid var(--line);
  background: #fff;
  color: #56617c;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.14s ease;
}
.soft-button:hover:not(:disabled) {
  border-color: #c7d2fb;
  color: var(--sky);
  background: var(--sky-soft);
}

.cancel-button {
  border: 1px solid #e1e5ef;
  border-radius: 10px;
  background: #fff;
  color: #4a5470;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.14s ease;
}
.cancel-button:hover {
  background: #f4f6fb;
}

.row-action {
  border: 1px solid #e4e9f3;
  border-radius: 8px;
  background: #fff;
  color: #4b71ff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.14s ease;
}
.row-action:hover {
  background: var(--sky-soft);
  border-color: #c7d2fb;
}

/* بطاقة الترحيب والإجراءات السريعة Welcome Hero */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(230px, 0.7fr);
  gap: 16px;
  margin-bottom: 16px;
}
.welcome-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 190px;
  padding: 26px 30px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(120deg, #172450 0%, #283c84 51%, #566ff4 100%);
  box-shadow: 0 18px 36px rgba(56, 77, 174, 0.22);
}
.welcome-card:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 310px;
  height: 310px;
  border: 48px solid rgba(147, 176, 255, 0.16);
  border-radius: 50%;
  top: -150px;
  left: 27%;
}
.welcome-card:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 45px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(26deg);
  bottom: -140px;
  left: -48px;
}
.welcome-copy {
  max-width: 62%;
}
.welcome-card .eyebrow {
  color: #aebdf7;
}
.welcome-card h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.05em;
  font-weight: 800;
}
.welcome-card h2 em {
  font-style: normal;
  color: #a8d7ff;
}
.welcome-card p:not(.eyebrow) {
  font-size: 14px;
  color: #c3cdf8;
  margin: 10px 0 0;
  line-height: 1.7;
}
.goal-orbit {
  position: absolute;
  left: 28px;
  top: 24px;
  width: 112px;
  height: 112px;
  padding: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.goal-orbit:before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #304787;
}
.goal-orbit span {
  position: relative;
  z-index: 1;
  text-align: center;
}
.goal-orbit strong {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 24px;
  letter-spacing: -0.06em;
}
.goal-orbit small {
  display: block;
  color: #b6c5f5;
  font-size: 12px;
}
.goal-note {
  position: absolute;
  bottom: 14px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #cbd5ff;
}

.quick-card {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  font-size: 14px;
  font-weight: 700;
}
.card-title i {
  color: #a5acc0;
  border: 1px solid #e8eaf1;
  border-radius: 5px;
  padding: 3px 6px;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-style: normal;
}
.quick-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #eff1f5;
  background: transparent;
  text-align: right;
  color: #4c5570;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.quick-action:last-child {
  border: 0;
}
.quick-action b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #f1f4fb;
  color: #6877bb;
  font-size: 14px;
  font-weight: 500;
}
.quick-action.is-locked {
  opacity: 0.55;
  cursor: not-allowed !important;
  color: #94a3b8 !important;
}
.quick-action.is-locked b {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}
.btn-locked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}
.card-locked {
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}


/* بطاقات الإحصائيات Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-bottom: 16px;
}
.metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 15px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -6px rgba(30, 41, 84, 0.16);
  border-color: #d7deef;
}
.metric-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
}
.blue { background: var(--sky-soft); color: var(--sky); }
.green { background: #e4f8ed; color: #32af69; }
.violet { background: #f0ecff; color: var(--lavender); }
.amber { background: #fff4dd; color: var(--amber); }
.rose { background: #ffe6f0; color: var(--rose); }

.metric-card p {
  margin: 0 0 4px;
  color: #8c94ab;
  font-size: 13px;
  font-weight: 500;
}
.metric-card strong {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 22px;
  letter-spacing: -0.06em;
}
.metric-card small {
  color: #a0a7ba;
  font-size: 12px;
}
.metric-card small.positive {
  color: #36ae69;
  font-weight: 600;
}

/* الألواح والشبكات Panels */
.panel {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-bg);
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.1);
  transition: box-shadow 0.18s ease;
}
.panel:hover {
  box-shadow: 0 18px 40px -8px rgba(30, 41, 84, 0.14);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.panel h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.9fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.visits-panel {
  grid-column: span 2;
  min-height: 250px;
}
.chart-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}
.chart-summary strong {
  font-family: Manrope, sans-serif;
  font-size: 26px;
  letter-spacing: -0.07em;
}
.chart-summary span {
  color: #9ba2b6;
  font-size: 13px;
}
.bar-chart {
  height: 120px;
  margin-top: 12px;
  display: flex;
  align-items: end;
  gap: 9px;
  direction: ltr;
}
.bar-slot {
  flex: 1;
  height: 100%;
  min-width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 8px;
}
.bar-fill {
  position: relative;
  width: min(32px, 100%);
  min-height: 6px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #7c91ff, #4669ee);
  box-shadow: 0 7px 12px rgba(81, 108, 238, 0.18);
}
.bar-slot label {
  color: #9aa2b8;
  font-size: 12px;
  direction: rtl;
}

.membership-panel {
  grid-column: 3;
  grid-row: span 2;
  min-height: 400px;
}
.renewals {
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
}
.renewal {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #eff1f5;
}
.renewal:last-child {
  border: 0;
}
.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #536fff, #9b73df);
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 800;
}
.renewal:nth-child(even) .avatar {
  background: linear-gradient(135deg, #e4a550, #e46f93);
}
.renewal-details {
  min-width: 0;
  flex: 1;
}
.renewal-details strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.renewal-details span {
  color: #939bae;
  font-size: 12px;
}
.days-tag {
  border-radius: 8px;
  padding: 4px 8px;
  background: #fff1f5;
  color: #e76891;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.days-tag.safe {
  color: #32a86a;
  background: #e8f8ee;
}
.renewal-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: #526bdd;
  cursor: pointer;
  transition: all 0.14s ease;
}
.renewal-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fb;
}
.renewal-btn.btn-locked {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #ef4444 !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
}
.renewal.is-locked .avatar,
.renewal.is-locked .renewal-details {
  cursor: not-allowed !important;
}
.renewal.is-locked .renewal-details strong {
  color: #64748b !important;
}

.tier-segmented-control.is-locked {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}
.tier-segmented-control.is-locked .tier-segment-btn {
  cursor: not-allowed !important;
}
.tier-segmented-control.is-locked .tier-segment-btn:not(.active) {
  opacity: 0.45 !important;
}
.tier-segmented-control.is-locked .tier-segment-btn.active {
  background: #f1f5f9 !important;
  color: #64748b !important;
  box-shadow: none !important;
  border: 1px solid #cbd5e1 !important;
}

.cash-panel {
  min-height: 150px;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #202f70 0%, #304ba0 100%) !important;
  box-shadow: 0 14px 34px rgba(32, 47, 112, 0.22) !important;
}
.cash-panel .eyebrow, .cash-panel p {
  color: #d6d7ff;
}
.live-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #f4f4ff;
  font-size: 12px;
}
.live-label.dark-label {
  border-color: #e4e8f2;
  background: #f6f8fc;
  color: #5e6990;
}
.live-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a7f2c8;
}
.revenue {
  position: relative;
  display: block;
  margin-top: 14px;
  font-family: Manrope, sans-serif;
  font-size: 26px;
  letter-spacing: -0.07em;
}
.cash-panel p {
  position: relative;
  margin: 3px 0 10px;
  font-size: 13px;
}

.arrivals-panel {
  min-height: 250px;
}
.arrivals {
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
}
.arrival {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid #eff1f5;
}
.arrival:last-child {
  border: 0;
}
.arrival time {
  color: #8790a9;
  margin-right: auto;
  font-family: Manrope, sans-serif;
  font-size: 13px;
  direction: ltr;
}
.arrival-info {
  min-width: 0;
}
.arrival-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.arrival-info span {
  display: block;
  color: #41ad71;
  font-size: 12px;
  margin-top: 2px;
}

/* الجداول والأعضاء Members Summary KPI Cards */
.member-summary,
.members-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1024px) {
  .member-summary,
  .members-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .member-summary,
  .members-summary {
    grid-template-columns: 1fr;
  }
}

.member-summary article,
.members-summary article {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 21, 55, 0.04), 0 8px 20px -6px rgba(16, 21, 55, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-summary article:hover,
.members-summary article:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 21, 55, 0.08), 0 12px 28px -6px rgba(16, 21, 55, 0.1);
}

.member-summary article::before,
.members-summary article::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3.5px;
  background: var(--card-accent, #4b71ff);
}

.member-summary article:nth-child(1) { --card-accent: #1e293b; }
.member-summary article:nth-child(2) { --card-accent: #2f9f61; }
.member-summary article:nth-child(3) { --card-accent: #3b82f6; }
.member-summary article:nth-child(4) { --card-accent: #e1552a; }

.member-summary span,
.member-summary small,
.members-summary span,
.members-summary small {
  display: block;
  position: relative;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.member-summary strong,
.members-summary strong {
  position: relative;
  display: block;
  margin: 6px 0 2px;
  font-family: Manrope, Alexandria, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.04em;
}

.member-summary article:nth-child(2) strong { color: #2f9f61; }
.member-summary article:nth-child(4) strong { color: #e1552a; }

.member-summary small,
.members-summary small {
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 2px;
}

.members-table-panel {
  padding: 0;
  min-height: 400px;
}
.members-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.member-search {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #e5e9f3;
  border-radius: 10px;
  background: #fbfcff;
  color: #8a94ae;
}
.member-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 10px 0;
  color: #26304e;
  font-size: 14px;
}
.members-toolbar select {
  height: 38px;
  border: 1px solid #e5e9f3;
  border-radius: 10px;
  background: #fff;
  color: #69738d;
  padding: 0 10px;
  font-size: 13px;
}

.members-table-wrap {
  max-height: 580px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.members-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.members-table-wrap::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 6px;
}
.members-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: right;
}
.members-table-wrap thead th,
.members-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 15px;
  background: #fbfcff;
  color: #929bb3;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 0 #f0f2f7;
}
.members-table-wrap td {
  padding: 12px 15px;
  border-top: 1px solid #f0f2f7;
  color: #56617c;
  font-size: 14px;
}
.member-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.member-row:hover {
  background: #f8f9fe;
}
.member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d2746;
  font-weight: 700;
}
.member-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 8px;
  background: #edf1f7;
  color: #788198;
  font-size: 12px;
  font-weight: 700;
}
.member-status.active {
  background: #e5f8ec;
  color: #2f9f61;
}
.member-status.expired {
  background: #fff0f1;
  color: #d65363;
}
.entry-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d65363;
  box-shadow: 0 0 0 4px rgba(214, 83, 99, 0.14);
}
.entry-dot.on {
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(82, 201, 130, 0.14);
}
.table-message {
  text-align: center;
  color: #8d96ad;
  padding: 36px !important;
}

/* النوافذ المنبثقة Modals */
.member-modal {
  position: fixed;
  z-index: 10005;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.member-modal[hidden] {
  display: none !important;
}
.member-modal:not([hidden]) {
  display: grid !important;
  z-index: 10005 !important;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 49, 0.42);
  backdrop-filter: blur(3px);
}
.member-dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 25px 65px rgba(15, 22, 49, 0.24);
}
.member-dialog.wide {
  width: min(680px, 100%);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.dialog-head h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.dialog-head .eyebrow {
  font-size: 13px;
}
.dialog-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #788198;
  font-size: 18px;
}

.member-dialog form {
  display: grid;
  gap: 14px;
}
.member-dialog label {
  display: grid;
  gap: 6px;
  color: #4a5470;
  font-size: 13px;
  font-weight: 600;
}
.member-dialog input, .member-dialog select {
  width: 100%;
  height: 42px;
  border: 1px solid #e0e5f0;
  border-radius: 10px;
  background: #fbfcff;
  padding: 0 12px;
  color: #1b2440;
  font-size: 14px;
  outline-color: var(--sky);
}
.member-dialog textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid #e0e5f0;
  border-radius: 10px;
  background: #fbfcff;
  padding: 10px 12px;
  color: #1b2440;
  font-size: 14px;
  outline-color: var(--sky);
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-note {
  margin: 0;
  color: #7c8296;
  font-size: 13px;
  line-height: 1.6;
}
.hint-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--sky-soft);
  border: 1px solid #d7e3ff;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
}
.hint-box p {
  margin: 0;
  color: #3d4a6b;
  font-size: 13px;
  line-height: 1.6;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 8px;
}

/* معالج الخطوات Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 18px;
}
.stepper span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #edf0f7;
  color: #8791aa;
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.stepper span.active {
  background: var(--sky);
  color: #fff;
}
.stepper i {
  height: 1px;
  flex: 1;
  background: #e4e8f2;
}
.onboarding-step {
  display: grid;
  gap: 14px;
}
.onboarding-step[hidden] {
  display: none !important;
}
.onboarding-step:not([hidden]) {
  display: grid !important;
}
.step-intro {
  margin: 0;
  color: #5e6a86;
  font-size: 14px;
  line-height: 1.6;
}

/* بطاقة المتدرب ثلاثية الأبعاد 3D Flip Card */
.member-card-scene {
  perspective: 1200px;
}
.member-flip-card {
  display: block;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  text-align: inherit;
  transform-style: preserve-3d;
  cursor: pointer;
}
.member-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}
.member-flip-card.is-flipped .member-card-inner {
  transform: rotateY(180deg);
}
.member-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  border-radius: 22px;
  backface-visibility: hidden;
  color: #fff;
  box-shadow: 0 18px 36px rgba(53, 74, 170, 0.22);
}
.member-card-front {
  isolation: isolate;
  background: linear-gradient(135deg, #17234f 0%, #304a9b 52%, #5f78f3 100%);
}
.member-card-front:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  left: -125px;
  top: -150px;
  border: 46px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}
.member-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #101735, #1b285c 52%, #354eb1);
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-brand {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.card-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.card-tier-badge.special {
  border-color: rgba(240, 201, 105, 0.55);
  background: rgba(240, 201, 105, 0.16);
  color: #f0c969;
}
.card-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.card-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #76e5a5;
  box-shadow: 0 0 0 4px rgba(118, 229, 165, 0.13);
}
.card-status.off i {
  background: #e78091;
  box-shadow: 0 0 0 4px rgba(231, 128, 145, 0.13);
}
.card-member-name {
  margin: auto 0 3px;
  font-size: 17px;
  font-weight: 800;
}
.card-member-code {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: #dce4ff;
  direction: ltr;
  text-align: right;
}
.card-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 14px;
  color: #c8d3ff;
  font-size: 13px;
}
.card-bottom strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 14px;
}
.card-flip-hint {
  opacity: 0.8;
  font-size: 12px;
}
.flip-caption {
  margin: 8px 0 0;
  color: #8c95ac;
  font-size: 13px;
  text-align: center;
}

.nfc-label {
  margin: 18px 0 6px;
  color: #aebbea;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.nfc-value {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: rgba(7, 12, 35, 0.34);
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  direction: ltr;
}
.nfc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: auto;
}
.nfc-meta div {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}
.nfc-meta span {
  display: block;
  color: #aebbea;
  font-size: 12px;
}
.nfc-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #fff;
  font-weight: 700;
}

/* بطاقة الاشتراك في صفحة التفاصيل Subscription Card */
.subscription-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-bg);
}
.subscription-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.subscription-card h2 {
  margin: 3px 0 0;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.detail-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 99px;
  background: #edf1f7;
  color: #778198;
  font-size: 13px;
  font-weight: 700;
}
.detail-status.active {
  background: #e5f8ec;
  color: #2f9f61;
}
.detail-status.expired {
  background: #fff0f1;
  color: #d65363;
}

.tier-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  padding: 3px;
  border-radius: 11px;
  background: #e3e7f1;
  border: 1px solid #d5dae8;
  max-width: 280px;
}
.tier-switch button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #69738d;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.2s ease;
}
.tier-switch button.active {
  color: #1c254a;
}
.tier-switch button.active.special {
  color: #8a6316;
}
.tier-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 30, 60, 0.12);
  transition: right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tier-switch[data-active="special"] .tier-switch-thumb {
  right: 50%;
}

.subscription-package {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 14px;
  border-radius: 14px;
  background: #f4f6fc;
}
.subscription-package span {
  color: #8b94aa;
  font-size: 13px;
}
.subscription-package strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
}
.days-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#526de8 0 var(--days-percent, 0%), #e3e7f2 var(--days-percent, 0%) 100%);
}
.days-orbit:before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}
.days-orbit span {
  position: relative;
  z-index: 1;
  color: #273252;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  line-height: 1;
}

.subscription-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.subscription-facts div {
  padding: 10px;
  border: 1px solid #edf0f6;
  border-radius: 12px;
  background: #fff;
}
.subscription-facts span {
  display: block;
  color: #929aaf;
  font-size: 12px;
}
.subscription-facts strong {
  display: block;
  margin-top: 5px;
  color: #34405d;
  font-family: Manrope, sans-serif;
  font-size: 14px;
}

/* تفاصيل المتدرب Sections */
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.detail-heading h1 {
  margin: 2px 0 0;
  font-size: 24px;
  letter-spacing: -0.05em;
  font-weight: 800;
}
.detail-heading p {
  margin: 0;
  color: #9299b0;
  font-size: 13px;
}
.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: #65708c;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.member-card-column {
  display: grid;
  gap: 10px;
  align-content: start;
}

.detail-section {
  margin-top: 18px;
}
.detail-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 10px;
}
.detail-section-title h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.detail-section-title h2:before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 4px;
  background: var(--sky);
}
.detail-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-bg);
}
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
}
.profile-field span {
  display: block;
  color: #929aaf;
  font-size: 12px;
}
.profile-field strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #313b57;
  font-size: 14px;
  font-weight: 700;
}
.detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.health-card {
  min-height: 220px;
}
.body-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.body-metric {
  padding: 11px;
  border-radius: 13px;
  background: #f6f8fc;
  text-align: center;
}
.body-metric span {
  display: block;
  color: #9098ad;
  font-size: 12px;
}
.body-metric strong {
  display: block;
  margin-top: 6px;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  letter-spacing: -0.05em;
}

.history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}
.history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #edf0f6;
  border-radius: 12px;
  background: #fff;
  transition: background-color 0.15s ease;
}
.history-item:hover {
  background: #f8f9fe;
}
.history-item strong {
  display: block;
  font-size: 14px;
}
.history-item span {
  display: block;
  margin-top: 3px;
  color: #929aaf;
  font-size: 12px;
}
.history-item b {
  color: var(--sky);
  font-family: Manrope, sans-serif;
  font-size: 15px;
}

.detail-table-wrap {
  overflow: auto;
}
.detail-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: right;
}
.detail-table th {
  padding: 11px 13px;
  color: #949cb1;
  font-size: 13px;
  font-weight: 700;
  background: #fafbfe;
}
.detail-table td {
  padding: 11px 13px;
  border-top: 1px solid #edf0f5;
  color: #57617a;
  font-size: 14px;
}
.detail-table td strong {
  color: #27314e;
}
.detail-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: #969eb3;
  font-size: 14px;
  text-align: center;
}

/* تبويبات Tabs */
.tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 9px 16px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: #69738d;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.14s ease;
}
.tab-btn:hover:not(.active) {
  background: #f0f3fb;
  color: var(--ink);
}
.tab-btn.active {
  background: #151c3a;
  color: #fff;
  border-color: #151c3a;
}

/* بطاقات الكلاسات والمرافق والفعاليات Rich Cards */
.rich-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.rich-card {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rich-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -6px rgba(30, 41, 84, 0.16);
}
.rich-card-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
}
.rich-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.rich-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #151c3a;
}
.rich-card-sub {
  font-size: 13px;
  color: #8b93ad;
  margin-top: 3px;
}
.rich-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: #56617c;
  margin-bottom: 12px;
}
.rich-card-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #8b93ad;
  margin-bottom: 5px;
}
.rich-card-bar-track {
  height: 7px;
  border-radius: 4px;
  background: #eef1f8;
  overflow: hidden;
  margin-bottom: 8px;
}
.rich-card-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.rich-card-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--sky);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pill-ok { background: #e5f8ec; color: #2f9f61; }
.pill-warn { background: #fff4dd; color: #c78a1a; }
.pill-bad { background: #fff0f1; color: #d65363; }
.pill-info { background: var(--sky-soft); color: var(--sky); }
.pill-muted { background: #f0f2f7; color: #8b93ad; }

/* نقاط البيع POS */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.tile-card {
  position: relative;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: right;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 8px 18px -6px rgba(16, 21, 55, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tile-card:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(30, 41, 84, 0.14);
}
.tile-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tile-card strong {
  font-size: 14px;
  margin-top: 2px;
}
.tile-card span {
  font-size: 12px;
  color: #8b93ad;
}
.tile-card b {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: var(--sky);
  margin-top: auto;
  padding-top: 4px;
}
.tile-card-img {
  width: 100%;
  height: 76px;
  border-radius: 10px;
  object-fit: cover;
  background: #f4f6fb;
  display: block;
}

.cart-panel {
  position: sticky;
  top: 16px;
}
.cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f7;
  font-size: 14px;
}
.cart-row button {
  border: 0;
  background: #fff0f1;
  color: #d65363;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qty-stepper button {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fbfcff;
  color: #27314e;
  font-size: 14px;
  font-weight: bold;
}

/* الأجهزة والمفقودات Equipment & Lost */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.equip-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.equip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -6px rgba(30, 41, 84, 0.16);
}
.equip-card .eq-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
}
.eq-status.ok { background: #e5f8ec; color: #2f9f61; }
.eq-status.warn { background: #fff4dd; color: #c78a1a; }
.eq-status.bad { background: #fff0f1; color: #d65363; }

.lostfound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.lostfound-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.1);
  transition: transform 0.18s ease;
}
.lostfound-card:hover {
  transform: translateY(-2px);
}
.lostfound-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lostfound-card-no {
  font-size: 13px;
  color: #969eb3;
  font-family: Manrope, sans-serif;
}
.lostfound-card-name {
  font-size: 15px;
  font-weight: 700;
}
.lostfound-card-meta {
  margin: 0;
  font-size: 13px;
  color: #8b93ad;
}
.lf-type-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  background: #fff0f1;
  color: #d65363;
}
.lf-type-badge.found {
  background: #e5f8ec;
  color: #2f9f61;
}

/* لوحة الأوامر السريعة Command Palette (Ctrl+K) */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(15, 22, 49, 0.42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-box {
  width: min(560px, 92vw);
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(10, 15, 35, 0.35);
  overflow: hidden;
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.cmdk-input-row .cmdk-search-ic {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a94ae;
  flex-shrink: 0;
}
.cmdk-input-row .cmdk-search-ic svg {
  display: block;
  stroke: currentColor;
  stroke-width: 2;
}
.cmdk-input-row input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14px;
  background: transparent;
  color: #151c3a;
}
.cmdk-input-row kbd {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  color: #8b93ad;
  font-family: Manrope, sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cmdk-input-row kbd:hover {
  background: #f1f5f9;
  color: var(--ink);
}
.cmdk-results {
  overflow-y: auto;
  padding: 8px;
}
.cmdk-group-label {
  padding: 8px 12px 4px;
  font-size: 12px;
  color: #9299b0;
  font-weight: 700;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  text-align: right;
  color: #27314e;
  font-size: 14px;
  cursor: pointer;
}
.cmdk-item:hover, .cmdk-item.active {
  background: #f0f3fb;
}
.cmdk-item span.tag {
  margin-right: auto;
  font-size: 12px;
  color: #8b93ad;
  background: #f4f6fc;
  border-radius: 6px;
  padding: 3px 6px;
}
.cmdk-empty {
  padding: 24px;
  text-align: center;
  color: #9299b0;
  font-size: 14px;
}

/* تنبيهات Toast Stack */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.nd-toast-stack {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 700;
  display: grid;
  gap: 8px;
  max-width: 340px;
}
.nd-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #151c3a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 16px 34px rgba(10, 15, 35, 0.28);
  animation: toastSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nd-toast.err {
  background: #3a1620;
}
.nd-toast.info {
  background: #1c2a52;
}

/* المساعد الذكي AI Assistant Widget */
.ai-fab {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: 9000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #5376ff, #785cf5);
  color: #fff;
  box-shadow: 0 10px 24px rgba(83, 118, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ai-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(83, 118, 255, 0.6);
}
.ai-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 9500;
}
.ai-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 49, 0.32);
  backdrop-filter: blur(2px);
}
.ai-drawer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 100vh;
  width: min(420px, 92vw);
  background: #f8f9fd;
  box-shadow: 12px 0 40px rgba(15, 22, 49, 0.22);
  display: flex;
  flex-direction: column;
  padding: 22px 20px 0;
  gap: 16px;
  overflow: hidden;
  animation: aiDrawerIn 0.25s ease;
}
@keyframes aiDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.ai-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.member-dialog {
  padding: 16px;
}
.member-dialog form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-drawer-topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-topic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: #2a3050;
  cursor: pointer;
  transition: 0.15s ease;
}
.ai-topic-btn:hover:not(:disabled) {
  border-color: #c7d2ff;
}
.ai-topic-btn.active {
  background: #1c254a;
  color: #fff;
  border-color: #1c254a;
}
.ai-topic-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.ai-topic-btn span {
  flex: 1;
  text-align: start;
}
.ai-topic-cd {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  white-space: nowrap;
}
.ai-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 22px;
}
.ai-insight-result {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-insight-result p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #2a3050;
}

/* التجاوب الإعلامي Media Queries */
@media (max-width: 768px) {
  .shell, .shell.sidebar-collapsed { grid-template-columns: 78px minmax(0, 1fr); width: 100%; max-width: 100%; min-height: 100vh; margin: 0; border-radius: 0; overflow-x: clip; }
  .sidebar, .content { min-width: 0; max-width: 100%; }
  .sidebar { position: sticky; top: 0; height: 100vh; padding: 18px 10px; border-left: 1px solid var(--line); border-bottom: 0; border-radius: 0; }
  .sidebar-collapse-btn { display: none; }
  .brand > span:not(.brand-mark),
  .brand .brand-text,
  .nav-item span:not(.nav-ic),
  .nav-arrow,
  .nav-subitem span,
  .sidebar-search-trigger .search-trigger-text,
  .sidebar-search-trigger .search-trigger-kbd,
  .sidebar-user-card .user-details,
  .sidebar-logout-btn .logout-text,
  .sidebar-sync-row span:not(.sync-dot),
  .sidebar-brand-credit { display: none !important; }
  .sidebar-search-trigger, .nav-item, .nav-subitem { justify-content: center !important; padding-inline: 8px !important; }
  .nav-submenu { padding-right: 0 !important; margin: 3px 0 !important; gap: 3px !important; }
  .sidebar-search-trigger { min-height: 40px; width: 42px; height: 42px; padding: 0 !important; margin: 12px auto 0; border-radius: 12px; }
  .sidebar-search-trigger .search-trigger-ic { margin: 0; }
  .sidebar-foot { justify-content: center; align-items: center; padding: 10px 0 0; }
  .sidebar-user-card { width: 42px; height: 42px; padding: 0; margin: 0 auto; justify-content: center; background: transparent; border: none; box-shadow: none; }
  .sidebar-user-card .user-avatar { width: 36px; height: 36px; border-radius: 10px; margin: 0 auto; }
  .sidebar-sync-row { justify-content: center; padding: 2px 0; margin: 0 auto; }
  .sidebar-logout-btn { width: 38px; height: 38px; padding: 0 !important; margin: 0 auto; justify-content: center; border-radius: 10px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .membership-panel { grid-column: 2; grid-row: span 2; }
  .visits-panel { grid-column: 1; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .shell, .shell.sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding-inline: 8px; }
  .content { padding: 18px 12px 40px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .membership-panel, .visits-panel, .cash-panel, .arrivals-panel { grid-column: auto; grid-row: auto; }
  .members-summary { grid-template-columns: 1fr 1fr; }
  .profile-info-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .welcome-copy { max-width: 100%; }
  .goal-orbit { position: static; margin-bottom: 14px; width: 90px; height: 90px; }
  .goal-note { position: static; margin-top: 10px; }
  .quick-card { display: none; }
  .fp-chip-wrap { grid-template-columns: repeat(3, 1fr) !important; }
}

/* تصميم لوحات البصمة المتناسقة مع ثيم النظام Fingerprint System Theme Panels */
.fp-dark-panel {
  background: var(--panel-solid, #ffffff) !important;
  border: 1px solid var(--line, #e2e8f5) !important;
  border-radius: 20px !important;
  padding: 22px !important;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.08) !important;
  color: var(--ink, #10152b) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 280px;
}
.fp-dark-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.fp-dark-panel .eyebrow {
  color: var(--muted, #77809c) !important;
  font-size: 11.5px;
  font-weight: 700;
  margin: 0 0 2px;
}
.fp-dark-panel h3 {
  color: var(--ink, #151c3a) !important;
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.fp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eaf8f0;
  border: 1px solid #c3edd2;
  color: #2f9f61;
  font-size: 12px;
  font-weight: 700;
  font-family: Manrope, sans-serif;
}
.fp-status-badge i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f9f61;
  box-shadow: 0 0 6px rgba(47, 159, 97, 0.4);
}
.fp-chip-wrap {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
  padding: 4px 6px 4px 2px;
  direction: rtl;
}
.fp-chip-wrap::-webkit-scrollbar,
.fp-reclaim-wrap::-webkit-scrollbar {
  width: 5px;
}
.fp-chip-wrap::-webkit-scrollbar-track,
.fp-reclaim-wrap::-webkit-scrollbar-track {
  background: #f0f3f8;
  border-radius: 4px;
}
.fp-chip-wrap::-webkit-scrollbar-thumb,
.fp-reclaim-wrap::-webkit-scrollbar-thumb {
  background: #c8d1e0;
  border-radius: 4px;
}
.fp-chip {
  background: #f4f6fa;
  border: 1px solid #e1e6f0;
  color: #1a2238;
  border-radius: 8px;
  font-family: Manrope, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  height: 34px;
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
  user-select: none;
}
.fp-chip:hover {
  background: #eaf0ff;
  color: #4b71ff;
  border-color: #c7d8ff;
  transform: translateY(-1px);
}
.fp-more-note {
  color: var(--muted, #77809c);
  font-size: 12.5px;
  font-weight: 700;
  margin: 12px 0 0;
  text-align: left;
}
.fp-empty-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: #8f97ae;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
.fp-reclaim-wrap {
  max-height: 190px;
  overflow-y: auto;
}
.fp-reclaim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #edf1f8;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.fp-reclaim-row:hover {
  background: #f8faff;
}
.fp-reclaim-info strong {
  display: block;
  color: #172146;
  font-size: 13.5px;
  cursor: pointer;
}
.fp-reclaim-info strong:hover {
  color: var(--sky, #4b71ff);
}
.fp-reclaim-info span {
  display: block;
  color: #d6493f;
  font-size: 11.5px;
  margin-top: 2px;
}
.delivery-method-card {
  padding: 10px 12px;
  font-size: 13px;
}

/* تبويبات ملف المتدرب العلوية */
.member-detail-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.member-subtab {
  border: 1px solid var(--line, #e2e8f5);
  background: var(--panel-solid, #ffffff);
  color: #5d6783;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03);
}
.member-subtab:hover {
  border-color: #c7d8ff;
  color: #172146;
  background: #f8faff;
}
.member-subtab.active {
  background: #182246;
  color: #ffffff;
  border-color: #182246;
  box-shadow: 0 4px 14px rgba(24, 34, 70, 0.22);
}

/* شبكة النظرة العامة الرئيسية للمتدرب */
.member-overview-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}
.member-panel {
  background: var(--panel-solid, #ffffff);
  border: 1px solid var(--line, #e2e8f5);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.06);
}
.member-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.member-dialog label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: #3d4970;
}
.member-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16.5px;
  font-weight: 800;
  color: #151c3a;
  margin: 0;
}
.member-panel-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: var(--sky, #4b71ff);
}

/* شبكة بيانات المتدرب (عمودين) */
.member-info-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
.member-info-cell {
  display: flex;
  flex-direction: column;
}
.member-info-label {
  font-size: 12px;
  font-weight: 700;
  color: #77809c;
  margin-bottom: 5px;
}
.member-info-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #151c3a;
}
.member-info-val.dir-ltr {
  direction: ltr;
  text-align: right;
  font-family: Manrope, sans-serif;
}
.badge-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eaf8f0;
  border: 1px solid #c3edd2;
  color: #2f9f61;
  font-size: 12px;
  font-weight: 800;
}
.badge-warn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff0f1;
  border: 1px solid #f4bfc6;
  color: #d65363;
  font-size: 12px;
  font-weight: 800;
}

/* تقويم الحضور */
.cal-month-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #151c3a;
}
.cal-month-switch {
  display: flex;
  gap: 4px;
  background: #f0f3f8;
  padding: 3px;
  border-radius: 10px;
}
.cal-switch-btn {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #626e8c;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-switch-btn.active {
  background: #ffffff;
  color: #151c3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #8a94ab;
  margin-bottom: 8px;
}
.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.cal-day-cell {
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: Manrope, sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #8a94ab;
  background: #f6f8fb;
  user-select: none;
}
.cal-day-cell:hover {
  background: #eef2f9;
  color: #151c3a;
}
.cal-day-cell.empty {
  background: transparent;
  cursor: default;
}
.cal-day-cell.attended {
  background: var(--sky, #4b71ff) !important;
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(75, 113, 255, 0.35);
}
.cal-day-cell.today {
  border: 2px solid #182246;
  font-weight: 800;
}
.cal-day-cell.selected {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.cal-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #edf1f8;
  font-size: 11.5px;
  font-weight: 700;
  color: #77809c;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-dot-attended {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky, #4b71ff);
}
.cal-dot-today {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #182246;
  background: transparent;
}
.cal-day-summary-card {
  margin-top: 16px;
  padding: 16px;
  background: #f8faff;
  border: 1px solid #dbe6fa;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f8;
}
.cal-summary-date {
  font-weight: 800;
  font-size: 14px;
  color: #151c3a;
  font-family: Manrope, sans-serif;
}
.cal-summary-badge {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.cal-summary-badge.attended {
  background: #eaf8f0;
  color: #2f9f61;
  border: 1px solid #c3edd2;
}
.cal-summary-badge.absent {
  background: #f1f3f8;
  color: #7b87a0;
}
.cal-summary-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #eef2f9;
}
.cal-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-detail-stat span {
  font-size: 11px;
  font-weight: 700;
  color: #77809c;
}
.cal-detail-stat strong {
  font-size: 13px;
  font-weight: 800;
  color: #151c3a;
  font-family: Manrope, sans-serif;
}
.cal-summary-empty {
  font-size: 12px;
  font-weight: 600;
  color: #8f97ae;
  text-align: center;
  padding: 6px 0;
}

@media (max-width: 1100px) {
  .member-overview-grid { grid-template-columns: 1fr; }
}
/* Secure onboarding credential delivery */
.onboarding-delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-delivery-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  color: #253052;
}

.onboarding-delivery-option:has(input:checked) {
  border-color: #25d366;
  background: #effcf4;
  box-shadow: 0 0 0 3px rgb(37 211 102 / 10%);
}

.onboarding-delivery-option input { accent-color: #25d366; }

.onboarding-delivery-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #dce3f3;
  border-radius: 15px;
  background: linear-gradient(135deg, #f8faff, #f2fbf6);
  color: #33405f;
  font-size: 12.5px;
  line-height: 1.8;
}

.onboarding-delivery-preview strong { color: #10152b; }
.onboarding-delivery-preview .delivery-ready { color: #128544; }
.onboarding-delivery-preview .delivery-blocked { color: #b42336; }
.onboarding-delivery-preview code { direction: ltr; unicode-bidi: isolate; font-family: Manrope, monospace; color: #182246; }

@media (max-width: 680px) {
  .onboarding-delivery-options { grid-template-columns: 1fr; }
}

/* ============================================================
   CUSTOM DATE PICKER POPUP (RTL, 1:1 CALENDAR DESIGN)
   ============================================================ */
.custom-datepicker-popup {
  position: fixed;
  z-index: 9999999;
  width: 290px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 42px -8px rgba(15, 23, 50, 0.22), 0 0 0 1px rgba(15, 23, 50, 0.08);
  padding: 16px 14px 12px;
  font-family: inherit;
  direction: rtl;
  user-select: none;
  animation: cdpFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cdpFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.cdp-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #151c3a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #e2e8f5;
  background: #f8faff;
  color: #4b587c;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.15s ease;
}

.cdp-nav-btn:hover {
  background: #edf2ff;
  color: #536fff;
  border-color: #c7d5fe;
}

.cdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 6px;
  border-bottom: 1px solid #f0f3fa;
  padding-bottom: 6px;
}

.cdp-weekday {
  font-size: 11px;
  font-weight: 700;
  color: #8e97b0;
  padding: 2px 0;
}

.cdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}

.cdp-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 9px;
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1b2440;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.12s ease;
  background: transparent;
}

.cdp-day:hover:not(.disabled) {
  background: #f0f4ff;
  color: #536fff;
}

.cdp-day.other-month {
  color: #c4cce0;
}

.cdp-day.today {
  font-weight: 800;
  color: #536fff;
  background: #f5f8ff;
}

.cdp-day.selected {
  background: #edf2ff !important;
  border-color: #536fff !important;
  color: #536fff !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(83, 111, 255, 0.18);
}

.cdp-day.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cdp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eef2fa;
}

.cdp-footer button {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.cdp-btn-today {
  border: 1px solid #e2e8f5;
  background: #f8faff;
  color: #536fff;
}
.cdp-btn-today:hover {
  background: #edf2ff;
  border-color: #c7d5fe;
}

.cdp-btn-close {
  border: 1px solid transparent;
  background: transparent;
  color: #65708c;
}
.cdp-btn-close:hover {
  background: #f3f5fa;
  color: #151c3a;
}

/* ============================================================
   5-STEP ONBOARDING WIZARD & REBUILD STYLING
   ============================================================ */
.onboarding-stepper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 14px;
  padding: 0 10px;
  position: relative;
}

.onboarding-step-item {
  display: flex;
  align-items: center;
  position: relative;
}

.onboarding-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f3fa;
  color: #8b93ad;
  display: grid;
  place-items: center;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 2;
  border: 2px solid #ffffff;
}

.onboarding-step-item.active .onboarding-step-circle {
  background: #536fff;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(83, 111, 255, 0.35);
}

.onboarding-step-item.completed .onboarding-step-circle {
  background: #edf2ff;
  color: #536fff;
}

.onboarding-step-connector {
  width: 60px;
  height: 2px;
  background: #e2e8f5;
  margin: 0 4px;
  transition: background 0.2s ease;
}

.onboarding-step-item.completed + .onboarding-step-item .onboarding-step-connector,
.onboarding-step-connector.filled {
  background: #536fff;
}

/* Custom Phone Input with Jordan Prefix */
.phone-jordan-group {
  display: flex;
  align-items: stretch;
  direction: ltr;
  gap: 0;
  border: 1px solid #dfe4ef;
  border-radius: 12px;
  background: #fbfcff;
  overflow: hidden;
  height: 46px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.phone-jordan-group:focus-within {
  border-color: #536fff;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.12);
  background: #ffffff;
}

.phone-jordan-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: #f0f3fa;
  color: #495473;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-right: 1px solid #dfe4ef;
  user-select: none;
  flex-shrink: 0;
}

.phone-jordan-prefix .flag-code {
  font-size: 12px;
  color: #151c3a;
}

.phone-jordan-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-family: Manrope, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #151c3a !important;
  outline: none !important;
  height: 100% !important;
  box-shadow: none !important;
}

/* Email Verification Feedback */
.email-valid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #2f9f61;
  margin-top: 4px;
}

/* Payment Methods Grid */
.payment-methods-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 10px;
}

.payment-method-select-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid #e1e6f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  min-height: 68px;
}

.payment-method-select-card:hover {
  border-color: #b8c8ff;
  background: #f8faff;
  transform: translateY(-1px);
}

.payment-method-select-card.selected {
  border-color: #536fff;
  background: #f0f4ff;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.14);
}

.payment-method-img {
  width: 34px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.payment-method-name {
  font-size: 11px;
  font-weight: 800;
  color: #151c3a;
}

/* Delivery Method Cards */
.delivery-methods-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 16px;
}

.delivery-method-select-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 10px 8px;
  border-radius: 12px;
  border: 1.5px solid #e1e6f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  min-height: 74px;
}

.delivery-method-select-card:hover {
  border-color: #b8c8ff;
  background: #f8faff;
  transform: translateY(-1px);
}

.delivery-method-select-card.selected {
  border-color: #536fff;
  background: #f0f4ff;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.14);
}

.delivery-method-select-card.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #536fff;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  line-height: 1;
}

.delivery-method-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.delivery-channel-logo {
  display: block;
  object-fit: contain;
  transition: transform 0.18s ease;
}

.delivery-method-select-card:hover .delivery-channel-logo {
  transform: scale(1.08);
}

.delivery-method-icon {
  font-size: 20px;
  display: grid;
  place-items: center;
}

.delivery-method-label {
  font-size: 13px;
  font-weight: 800;
  color: #151c3a;
}

/* Review Summary Card in Step 5 */
.onboarding-review-box {
  background: #ffffff;
  border: 1px solid #e1e6f0;
  border-radius: 14px;
  padding: 10px 14px;
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.review-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}

.review-summary-row .rev-label {
  color: #7985a3;
  font-weight: 600;
}

.review-summary-row .rev-val {
  color: #151c3a;
  font-weight: 800;
}

.review-divider {
  height: 1px;
  background: #eef2fa;
  margin: 6px 0;
}

.review-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.review-total-row .rev-total-val {
  font-family: Manrope, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #536fff;
}

/* ============================================================
   SUPPLIERS SECTION ENHANCED STYLING
   ============================================================ */
.suppliers-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.suppliers-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.suppliers-search-box input {
  width: 100%;
  height: 46px;
  padding: 10px 42px 10px 14px;
  border-radius: 12px;
  border: 1px solid #dfe4ef;
  background: #fbfcff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}

.suppliers-search-box input:focus {
  border-color: #536fff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.12);
}

.suppliers-search-box .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8e97b0;
  font-size: 17px;
  pointer-events: none;
}

.supplier-row-interactive {
  cursor: pointer;
  transition: background 0.15s ease;
}

.supplier-row-interactive:hover {
  background: #f8f9fe !important;
}

@media (max-width: 600px) {
  .payment-methods-grid-cards { grid-template-columns: repeat(2, 1fr); }
  .delivery-methods-grid-cards { grid-template-columns: 1fr; }
  .onboarding-stepper-connector { width: 28px; }
  .renew-trainee-cards-grid { grid-template-columns: 1fr !important; }
  .renew-access-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   4-STEP RENEWAL WIZARD STYLING
   ============================================================ */
.renew-modal-dialog {
  width: min(720px, 94vw) !important;
  max-height: 96vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 20px !important;
  padding: 18px !important;
}

.renew-trainee-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: #c7d0e8 transparent;
}

.renew-trainee-select-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e1e6f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  text-align: right;
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}

.renew-trainee-select-card:hover {
  border-color: #b8c8ff;
  background: #f8faff;
  transform: translateY(-1px);
}

.renew-trainee-select-card.selected {
  border-color: #536fff !important;
  background: #f2f5ff !important;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.14) !important;
}

.renew-trainee-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.renew-trainee-card-top > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.renew-trainee-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #151c3a;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}

.renew-trainee-card-id {
  font-size: 11px;
  font-family: Manrope, sans-serif;
  color: #7985a3;
  font-weight: 700;
  direction: ltr;
  text-align: right;
  display: block;
}

.renew-trainee-card-contact {
  font-size: 11.5px;
  color: #5e6a86;
  direction: ltr;
  text-align: right;
  font-family: Manrope, sans-serif;
  margin-top: 1px;
}

.renew-trainee-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #edf1f8;
  font-size: 11px;
}

.renew-trainee-card-bottom > span {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.renew-trainee-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.renew-trainee-badge.active {
  background: #eefaf3;
  color: #2f9f61;
}

.renew-trainee-badge.expired {
  background: #fdf2f4;
  color: #d65363;
}

.renew-trainee-days {
  color: #5e6a86;
  font-weight: 700;
  white-space: nowrap;
}

.renew-trainee-check {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #536fff;
  color: #ffffff;
  display: none;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  z-index: 2;
}

.renew-trainee-select-card.selected .renew-trainee-check {
  display: grid;
}

.renew-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.renew-access-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #e1e6f0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
  justify-content: center;
}

.renew-access-label {
  font-size: 12px;
  color: #7985a3;
  font-weight: 700;
}

.renew-access-val {
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #151c3a;
}

.renew-summary-header-box {
  background: #f5f8ff;
  border: 1px solid #dbe5ff;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.renew-protection-banner {
  background: #eef8ff;
  border: 1px solid #c7e5fe;
  color: #0369a1;
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.renew-success-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  gap: 14px;
}

.renew-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eefaf3;
  color: #2f9f61;
  display: grid;
  place-items: center;
  font-size: 32px;
}

/* ============================================================================
   Custom Date Picker (مطابق لمتطلبات القسم B)
   ============================================================================ */
.custom-datepicker-popup {
  position: absolute;
  z-index: 100000;
  background: #ffffff;
  border: 1px solid #eef2f8;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
  width: 286px;
  padding: 18px;
  direction: ltr;
  font-family: Alexandria, Manrope, system-ui, -apple-system, sans-serif;
  user-select: none;
  animation: dpFadeIn 0.15s ease-out;
}
@keyframes dpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.custom-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.custom-datepicker-title {
  font-weight: 800;
  font-size: 15px;
  color: #1e293b;
  font-family: Alexandria, sans-serif;
}
.custom-datepicker-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}
.custom-datepicker-nav-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}
.custom-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  font-family: Alexandria, sans-serif;
}
.custom-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.custom-datepicker-day {
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: Manrope, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1.5px solid transparent;
  background: transparent;
}
.custom-datepicker-day:hover:not(.empty):not(.disabled) {
  background: #f0f4ff;
  color: #4361ee;
}
.custom-datepicker-day.outside.empty {
  visibility: hidden;
  pointer-events: none;
}
.custom-datepicker-day.selected {
  background: transparent;
  border: 1.5px solid #4361ee !important;
  color: #1e293b;
  font-weight: 800;
  border-radius: 9px;
}
.custom-datepicker-day.today:not(.selected) {
  border: 1.5px solid #cbd5e1;
  color: #4361ee;
  font-weight: 700;
  border-radius: 9px;
}
.custom-datepicker-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.custom-datepicker-footer button {
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: Alexandria, sans-serif;
  cursor: pointer;
  transition: all 0.12s ease;
}
.custom-datepicker-today-btn {
  background: #ffffff;
  color: #4361ee;
  border: 1px solid #c7d2fe;
}
.custom-datepicker-today-btn:hover {
  background: #eef2ff;
}
.custom-datepicker-close-btn {
  background: #ffffff;
  color: #4361ee;
  border: 1px solid #c7d2fe;
}
.custom-datepicker-close-btn:hover {
  background: #eef2ff;
}

/* Custom Date Input Wrap with clear button & calendar icon */
.custom-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.custom-date-input-wrap input {
  cursor: pointer;
}
.custom-date-input-wrap .date-clear-btn {
  position: absolute;
  left: 12px;
  background: #e2e8f0;
  color: #475569;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.12s ease;
}
.custom-date-input-wrap .date-clear-btn:hover {
  background: #cbd5e1;
  color: #1e293b;
}

/* ============================================================================
   Custom PhoneInput (مطابق لمتطلبات العنصر 34)
   ============================================================================ */
.custom-phone-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border: 1px solid #dfe4ef;
  border-radius: 11px;
  background: #fbfcff;
  height: 46px;
  overflow: hidden;
  transition: all 0.15s ease;
  direction: ltr !important;
}
.custom-phone-group:focus-within {
  border-color: #536fff;
  box-shadow: 0 0 0 3px rgba(83, 111, 255, 0.12);
  background: #ffffff;
}
.custom-phone-prefix,
.custom-phone-group .custom-phone-select,
.custom-phone-select {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  width: auto !important;
  min-width: 105px !important;
  max-width: 130px !important;
  flex: 0 0 auto !important;
  padding: 0 10px !important;
  background: #f1f4f9 !important;
  border: none !important;
  border-right: 1px solid #dfe4ef !important;
  border-radius: 0 !important;
  font-family: Manrope, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #151c3a !important;
  height: 100% !important;
  outline: none !important;
  cursor: pointer !important;
  direction: ltr !important;
  transition: background 0.15s ease;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
.custom-phone-select:hover {
  background: #e8ecf4 !important;
}
.custom-phone-select:focus {
  background: #e2e8f0 !important;
}
.custom-phone-select option {
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #151c3a;
  background: #ffffff;
  padding: 6px 10px;
}
.custom-phone-flag {
  font-size: 15px;
}
.custom-phone-group .custom-phone-input,
.custom-phone-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: Manrope, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  height: 100% !important;
  color: #151c3a !important;
  direction: ltr !important;
}

/* ============================================================================
   Email & Phone Live Validation & Duplicate Warnings
   ============================================================================ */
.email-live-check,
.phone-live-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #16a34a;
  animation: emailCheckFadeIn 0.15s ease-out;
}

@keyframes emailCheckFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.email-live-check.error,
.phone-live-check {
  color: #d65363;
}

.email-live-check.checking,
.email-live-check.network-error {
  color: #64748b;
}

.email-check-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.email-err-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fee2e2;
  color: #d65363;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.email-check-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.email-typo-tip {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.email-typo-tip a {
  color: #1d4ed8;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}

.input-error {
  border-color: #d65363 !important;
  box-shadow: 0 0 0 3px rgba(214, 83, 99, 0.12) !important;
}

/* ============================================================================
   Analytics 3 Cards Row (توصية اليوم / الذكور والإناث / توزيع حالة المتدربين)
   ============================================================================ */
.analytics-3-cards-row {
  display: grid;
  grid-template-columns: minmax(320px, 1.35fr) minmax(280px, 0.95fr) minmax(300px, 1.05fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.analytics-3-cards-row .panel {
  min-height: 300px;
  height: 100%;
  padding: 22px 24px;
  border-radius: 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e8f1;
  box-shadow: 0 1px 2px rgba(16, 21, 55, 0.03), 0 10px 24px -8px rgba(16, 21, 55, 0.08);
}

.analytics-3-cards-row .panel .panel-head {
  margin-bottom: 6px;
}

.analytics-3-cards-row .panel .panel-head .eyebrow {
  font-size: 14px;
  color: #69738d;
  font-weight: 600;
  margin: 0;
}

.analytics-3-cards-row .panel .panel-head h3 {
  font-size: 17px;
  font-weight: 800;
  color: #151c3a;
  margin: 2px 0 0;
}

/* Card 3 (توصية اليوم) */
.recommendation-card {
  background: linear-gradient(135deg, #202f70 0%, #304ba0 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 34px rgba(32, 47, 112, 0.22) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.recommendation-card .eyebrow {
  color: #b8c8ff !important;
}

.recommendation-card #focus-action {
  align-self: flex-start;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recommendation-card #focus-action:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 1100px) {
  .analytics-3-cards-row {
    grid-template-columns: 1fr 1fr;
  }
  .analytics-3-cards-row > article:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .analytics-3-cards-row {
    grid-template-columns: 1fr;
  }
  .analytics-3-cards-row > article:first-child {
    grid-column: auto;
  }
  .membership-health-body {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
}

/* ============================================================
   OVERVIEW FINANCIAL ANALYTICS SECTION (الرؤية المالية)
   ============================================================ */
.financial-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.financial-filter-bar {
  padding: 12px 18px;
  border: 1px solid #e1e7f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px -2px rgba(20, 35, 75, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.financial-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.financial-pill {
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid #dfe5f2;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: #56617c;
  cursor: pointer;
  transition: all 0.15s ease;
}

.financial-pill:hover:not(.active) {
  background: #f1f4fb;
  border-color: #c7d2fb;
  color: #151c3a;
}

.financial-pill.active {
  background: #151c3a;
  color: #ffffff;
  border-color: #151c3a;
  box-shadow: 0 4px 12px rgba(21, 28, 58, 0.18);
}

.financial-custom-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #56617c;
}

.financial-custom-dates input[type="date"] {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #dfe5f2;
  font-size: 12px;
  background: #fff;
  color: #151c3a;
}

.financial-period-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  margin-right: auto;
}

/* 4 كروت رئيسية في الرؤية المالية */
.financial-kpis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

/* 8 كروت ثانوية مضغوطة */
.financial-secondary-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.financial-secondary-card {
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e9f2;
  box-shadow: 0 4px 14px rgba(20, 35, 75, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 82px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.financial-secondary-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(20, 35, 75, 0.05);
}

.fin-sec-label {
  font-size: 12px;
  color: #7885a0;
  font-weight: 600;
  display: block;
}

.fin-sec-val {
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #151c3a;
  margin-top: 4px;
  display: block;
}

.fin-sec-badge {
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
}

.fin-sec-badge.ok { background: #eefaf3; color: #2f9f61; }
.fin-sec-badge.warn { background: #fffbeb; color: #b45309; }
.fin-sec-badge.bad { background: #fdf2f4; color: #d65363; }
.fin-sec-badge.info { background: #eff6ff; color: #3b82f6; }

/* جداول وقوائم الرؤية المالية */
.financial-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.5;
}

.financial-alert-item.ok { background: #eefaf3; border: 1px solid #c7f0d8; color: #1e7e48; }
.financial-alert-item.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.financial-alert-item.bad { background: #fdf2f4; border: 1px solid #fecdd3; color: #be123c; }
.financial-alert-item.info { background: #f0f6ff; border: 1px solid #bfdbfe; color: #1e40af; }

.financial-tx-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.financial-tx-row:hover {
  background: #f4f7ff !important;
}

@media (max-width: 1100px) {
  .financial-kpis-grid { grid-template-columns: repeat(2, 1fr); }
  .financial-secondary-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .financial-kpis-grid { grid-template-columns: 1fr; }
  .financial-secondary-kpi-grid { grid-template-columns: 1fr; }
  .financial-filter-bar { flex-direction: column; align-items: stretch; }
  .financial-period-label { text-align: center; }
}

/* صندوق الفواتير والأصول مع سكرول داخلي بعد 6 صفوف */
.invoices-assets-table-wrap .system-table-wrap {
  max-height: 360px;
  overflow-y: auto;
  overflow-x: auto;
  margin-bottom: 0;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.invoices-assets-table-wrap .system-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.invoices-assets-table-wrap .system-table-wrap::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 6px;
}
.invoices-assets-table-wrap .system-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fafbfe;
  box-shadow: 0 1px 0 var(--line, #e8ecf4);
}

/* مربع جدول الحضور والخروج وحضور الموظفين — عرض 13 صف مع سكرول داخلي وترويسة ثابتة */
.attendance-table-wrap .system-table-wrap,
[data-att-table] .system-table-wrap,
[data-staff-att-table] .system-table-wrap {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: auto;
  margin-bottom: 18px;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.attendance-table-wrap .system-table-wrap::-webkit-scrollbar,
[data-att-table] .system-table-wrap::-webkit-scrollbar,
[data-staff-att-table] .system-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.attendance-table-wrap .system-table-wrap::-webkit-scrollbar-thumb,
[data-att-table] .system-table-wrap::-webkit-scrollbar-thumb,
[data-staff-att-table] .system-table-wrap::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 6px;
}
.attendance-table-wrap .system-table-wrap thead th,
[data-att-table] .system-table-wrap thead th,
[data-staff-att-table] .system-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fafbfe;
  box-shadow: 0 1px 0 var(--line, #e8ecf4);
}