/* ==========================================================================
   CenterManager Design System — Tokens & Components (v1.0)
   المرجع: web/docs/DESIGN_SYSTEM.md
   يُحمَّل هذا الملف قبل style.css المجمَّع حتى تتمكن Utilities من التجاوز.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) DESIGN TOKENS — LIGHT (Frost)
   -------------------------------------------------------------------------- */
:root,
html:not(.dark) {
  --color-scheme: light;

  /* Surfaces */
  --cm-bg: #f3f7fc;
  --cm-surface: #ffffff;
  --cm-raised: #ffffff;
  --cm-sunken: #edf3f9;

  /* Lines */
  --cm-line: #d8e4f0;
  --cm-line-subtle: #e7eef6;

  /* Text */
  --cm-text: #0c1e30;
  --cm-text-2: #47617c;
  --cm-text-3: #8098ae;

  /* Brand accents (mode-dependent) */
  --cm-accent: var(--cm-brand-600);
  --cm-accent-hover: var(--cm-brand-700);
  --cm-accent-text: var(--cm-brand-700);
  --cm-accent-tint: rgba(43, 161, 239, 0.1);

  /* Status (light) */
  --cm-success: #16945b;
  --cm-success-surface: rgba(22, 148, 91, 0.09);
  --cm-warning: #c27803;
  --cm-warning-surface: rgba(194, 120, 3, 0.1);
  --cm-danger: #dc2626;
  --cm-danger-surface: rgba(220, 38, 38, 0.08);
  --cm-info: #4f46e5;
  --cm-info-surface: rgba(79, 70, 229, 0.08);

  /* Elevation */
  --cm-shadow-soft: 0 2px 8px -2px rgba(12, 42, 79, 0.06);
  --cm-shadow-card: 0 4px 16px -4px rgba(12, 42, 79, 0.08), 0 0 1px rgba(12, 42, 79, 0.06);
  --cm-shadow-raised: 0 12px 32px -8px rgba(12, 42, 79, 0.16), 0 0 1px rgba(12, 42, 79, 0.08);
  --cm-shadow-glow: 0 6px 20px -6px rgba(43, 161, 239, 0.45);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2) DESIGN TOKENS — DARK (Midnight)
   -------------------------------------------------------------------------- */
html.dark {
  --color-scheme: dark;

  /* Surfaces */
  --cm-bg: #0a1424;
  --cm-surface: #101f36;
  --cm-raised: #182b49;
  --cm-sunken: #0d1930;

  /* Lines */
  --cm-line: #23395c;
  --cm-line-subtle: #16263f;

  /* Text */
  --cm-text: #eff5fc;
  --cm-text-2: #a8bdd6;
  --cm-text-3: #64809f;

  /* Brand accents (mode-dependent) */
  --cm-accent: var(--cm-brand-500);
  --cm-accent-hover: var(--cm-brand-400);
  --cm-accent-text: var(--cm-brand-400);
  --cm-accent-tint: rgba(43, 161, 239, 0.16);

  /* Status (dark) */
  --cm-success: #3ccb7f;
  --cm-success-surface: rgba(60, 203, 127, 0.14);
  --cm-warning: #ffb224;
  --cm-warning-surface: rgba(255, 178, 36, 0.14);
  --cm-danger: #ff7079;
  --cm-danger-surface: rgba(255, 112, 121, 0.14);
  --cm-info: #8b93f8;
  --cm-info-surface: rgba(139, 147, 248, 0.14);

  /* Elevation */
  --cm-shadow-soft: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --cm-shadow-card: 0 4px 16px -4px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.04);
  --cm-shadow-raised: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 1px rgba(255, 255, 255, 0.05);
  --cm-shadow-glow: 0 6px 20px -6px rgba(43, 161, 239, 0.5);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3) PRIMITIVE BRAND RAMP — Azure (ثابتة في الوضعين)
   -------------------------------------------------------------------------- */
:root {
  --cm-brand-50: #f0f8ff;
  --cm-brand-100: #e0f1fe;
  --cm-brand-200: #c2e5fd;
  --cm-brand-300: #94d4fa;
  --cm-brand-400: #5bbdf6;
  --cm-brand-500: #2ba1ef;
  --cm-brand-600: #1583db;
  --cm-brand-700: #1069b0;
  --cm-brand-800: #11578e;
  --cm-brand-900: #134a74;
  --cm-brand-950: #0c3050;

  --cm-radius-sm: 0.5rem;   /* 8px  — chips/tags */
  --cm-radius-md: 0.75rem;  /* 12px — buttons/inputs */
  --cm-radius-lg: 1rem;     /* 16px — cards */
  --cm-radius-xl: 1.25rem;  /* 20px — modals */
}

/* --------------------------------------------------------------------------
   4) BASE
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  background-color: var(--cm-bg);
  color: var(--cm-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.font-num {
  font-family: "Outfit", "Cairo", sans-serif;
  font-feature-settings: "tnum";
}

::selection {
  background-color: var(--cm-brand-200);
  color: var(--cm-brand-950);
}
html.dark ::selection {
  background-color: rgba(43, 161, 239, 0.35);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--cm-line);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cm-text-3);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cm-accent-tint), 0 0 0 1.5px var(--cm-accent);
}

/* --------------------------------------------------------------------------
   5) CARDS & SURFACES
   -------------------------------------------------------------------------- */
.cm-card {
  background-color: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-card);
}

.cm-card-raised {
  background-color: var(--cm-raised);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-raised);
}

.cm-sunken {
  background-color: var(--cm-sunken);
  border: 1px solid var(--cm-line-subtle);
  border-radius: var(--cm-radius-md);
}

.cm-modal {
  background-color: var(--cm-raised);
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius-xl);
  box-shadow: var(--cm-shadow-raised);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6) BUTTONS
   -------------------------------------------------------------------------- */
.cm-btn-primary,
.cm-btn-secondary,
.cm-btn-danger,
.cm-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--cm-radius-md);
  border: 1px solid transparent;
  font-family: "Cairo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.cm-btn-primary:active,
.cm-btn-secondary:active,
.cm-btn-danger:active,
.cm-btn-ghost:active {
  transform: scale(0.98);
}
.cm-btn-primary:disabled,
.cm-btn-secondary:disabled,
.cm-btn-danger:disabled,
.cm-btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.cm-btn-primary {
  background-color: var(--cm-brand-600);
  color: #ffffff;
  box-shadow: var(--cm-shadow-glow);
}
.cm-btn-primary:hover:not(:disabled) {
  background-color: var(--cm-brand-700);
}
html.dark .cm-btn-primary {
  background-color: var(--cm-brand-500);
  color: #07101e;
}
html.dark .cm-btn-primary:hover:not(:disabled) {
  background-color: var(--cm-brand-400);
}

.cm-btn-secondary {
  background-color: var(--cm-surface);
  color: var(--cm-text);
  border-color: var(--cm-line);
}
.cm-btn-secondary:hover:not(:disabled) {
  background-color: var(--cm-sunken);
}

.cm-btn-danger {
  background-color: var(--cm-danger);
  color: #ffffff;
}
.cm-btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
}

.cm-btn-ghost {
  background: transparent;
  color: var(--cm-text-2);
}
.cm-btn-ghost:hover:not(:disabled) {
  background-color: var(--cm-sunken);
  color: var(--cm-text);
}

.cm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--cm-radius-md);
  border: 1px solid var(--cm-line);
  background-color: var(--cm-surface);
  color: var(--cm-text-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cm-icon-btn:hover {
  background-color: var(--cm-sunken);
  color: var(--cm-text);
}

.cm-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
  border: 1px solid var(--cm-line);
  background-color: var(--cm-accent-tint);
  color: var(--cm-accent-text);
  font-weight: 800;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7) FORMS
   -------------------------------------------------------------------------- */
.cm-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cm-text);
  font-family: "Cairo", sans-serif;
}

.cm-hint {
  font-size: 0.6875rem;
  color: var(--cm-text-3);
}

.cm-error {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cm-danger);
}

.cm-input,
.cm-select,
.cm-textarea {
  width: 100%;
  background-color: var(--cm-surface);
  color: var(--cm-text);
  border: 1.5px solid var(--cm-line);
  border-radius: var(--cm-radius-md);
  padding: 0.625rem 0.875rem;
  font-family: "Cairo", sans-serif;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.cm-textarea {
  min-height: 6rem;
  resize: vertical;
}
.cm-input::placeholder,
.cm-textarea::placeholder {
  color: var(--cm-text-3);
}
.cm-input:focus,
.cm-select:focus,
.cm-textarea:focus {
  border-color: var(--cm-accent);
  box-shadow: 0 0 0 3px var(--cm-accent-tint);
}
.cm-input:disabled,
.cm-select:disabled,
.cm-textarea:disabled {
  background-color: var(--cm-sunken);
  color: var(--cm-text-3);
  cursor: not-allowed;
}
.cm-input.is-invalid,
.cm-textarea.is-invalid {
  border-color: var(--cm-danger);
}
.cm-input.is-invalid:focus,
.cm-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--cm-danger-surface);
}

/* --------------------------------------------------------------------------
   8) BADGES
   -------------------------------------------------------------------------- */
.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.cm-badge-brand {
  background-color: var(--cm-accent-tint);
  color: var(--cm-accent-text);
}
.cm-badge-success {
  background-color: var(--cm-success-surface);
  color: var(--cm-success);
}
.cm-badge-warning {
  background-color: var(--cm-warning-surface);
  color: var(--cm-warning);
}
.cm-badge-danger {
  background-color: var(--cm-danger-surface);
  color: var(--cm-danger);
}
.cm-badge-info {
  background-color: var(--cm-info-surface);
  color: var(--cm-info);
}
.cm-badge-neutral {
  background-color: var(--cm-sunken);
  color: var(--cm-text-2);
  border: 1px solid var(--cm-line-subtle);
}

/* --------------------------------------------------------------------------
   9) TABLE
   -------------------------------------------------------------------------- */
.cm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.cm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--cm-sunken);
  color: var(--cm-text-2);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: start;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cm-line);
  white-space: nowrap;
}
.cm-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cm-line-subtle);
  color: var(--cm-text);
  vertical-align: middle;
}
.cm-table tbody tr:last-child td {
  border-bottom: none;
}
.cm-table tbody tr {
  transition: background-color 0.12s ease;
}
.cm-table tbody tr:hover {
  background-color: var(--cm-sunken);
}

/* --------------------------------------------------------------------------
   10) SIDEBAR NAV LINKS
   -------------------------------------------------------------------------- */
.cm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--cm-radius-md);
  font-family: "Cairo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cm-text-2);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cm-nav-link:hover {
  background-color: var(--cm-sunken);
  color: var(--cm-text);
}
.cm-nav-link.is-active {
  background-color: var(--cm-accent-tint);
  color: var(--cm-accent-text);
}

/* --------------------------------------------------------------------------
   11) EMPTY STATE
   -------------------------------------------------------------------------- */
.cm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--cm-text-2);
}
.cm-empty-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.875rem;
  border-radius: 9999px;
  background-color: var(--cm-sunken);
  border: 1px dashed var(--cm-line);
  color: var(--cm-text-3);
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   12) ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes cm-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-up {
  animation: cm-fade-in-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}