/* ============================================================
   نور تریدینگ — Theme tokens · THREE themes on one axis
     day   — روز  · روشن، سفید/آبی (تم اصلی قدیمی)
     noon  — بعدازظهر · کرم + مرجانِ کلاد (#D97757)  ← پیش‌فرض
     night — شب  · کربنِ گرم + همان مرجان
   <html data-theme="day|noon|night">  (+ class "dark" on night for
   any leftover Tailwind dark: variants). theme.js cycles them; the
   pre-paint snippet in _head_assets.html picks the first paint.
   Channels are space-separated RGB for  rgb(var(--x) / <alpha>)
   ============================================================ */

/* ---- bare :root === noon (the shipped default) ---- */
:root, [data-theme="noon"] {
  color-scheme: light;

  --bg:            250 246 239;   /* #FAF6EF */
  --surface:       255 255 255;
  --surface-2:     243 237 225;   /* #F3EDE1 */
  --line:          232 223 203;   /* #E8DFCB */
  --fg:             43  38  33;   /* #2B2621 */
  --fg-soft:        91  79  66;   /* #5B4F42 */
  --muted:         139 125 104;   /* #8B7D68 */
  --faint:         175 160 137;   /* #AFA089 */

  --primary:       217 119  87;   /* #D97757 — Claude coral */
  --primary-soft:  250 232 224;   /* #FAE8E0 warm coral tint */
  --primary-strong:191  91  59;   /* #BF5B3B — deep coral, for text on light */
  --primary-fg:     43  38  33;   /* charcoal on coral (~5.8:1) */

  --success:        63 122  78;  --success-soft: 237 242 233;  --success-strong: 47 92 59;
  --danger:        179  69  61;  --danger-soft:  251 234 234;  --danger-strong: 142 51 44;
  --warn:          181 119  35;  --warn-soft:    250 240 224;  --warn-strong:   138 88 22;

  --shadow:         43  38  33;
  --shadow-card:   none;                                   /* noon is shadowless */
  --shadow-pop:    0 8px 28px -12px rgb(var(--shadow) / .22);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur:  180ms;
}

/* ---- day · روشن سفید/آبی ---- */
[data-theme="day"], :root.light {
  color-scheme: light;

  --bg:            249 250 251;
  --surface:       255 255 255;
  --surface-2:     244 246 248;
  --line:          226 230 235;
  --fg:             17  24  39;
  --fg-soft:        55  65  81;
  --muted:         100 116 139;
  --faint:         148 163 184;

  --primary:        37  99 235;   /* #2563eb */
  --primary-soft:  224 233 251;   /* #E0E9FB — pale tint, matches noon/night role */
  --primary-strong: 29  78 216;
  --primary-fg:    255 255 255;

  --success:        21 128  61;  --success-soft: 220 244 227;  --success-strong: 22 101 52;
  --danger:        220  38  38;  --danger-soft:  250 226 226;  --danger-strong: 185 28 28;
  --warn:          180  83   9;  --warn-soft:    250 236 210;  --warn-strong:   146 64 14;

  --shadow:         15  23  42;
  --shadow-card:   0 1px 2px rgb(var(--shadow) / .05), 0 4px 16px -4px rgb(var(--shadow) / .08);
  --shadow-pop:    0 8px 32px -8px rgb(var(--shadow) / .18);
}

/* ---- night · تیره · کربنِ گرم + مرجانِ کلاد ---- */
[data-theme="night"], :root.dark {
  color-scheme: dark;

  --bg:             24  22  20;   /* #181614 warm near-black */
  --surface:        33  30  27;   /* #211E1B */
  --surface-2:      45  41  37;   /* #2D2925 */
  --line:           60  55  49;   /* #3C3731 */
  --fg:            238 234 228;   /* #EEEAE4 */
  --fg-soft:       205 198 188;   /* #CDC6BC */
  --muted:         158 150 139;   /* #9E968B */
  --faint:         113 106  97;   /* #716A61 */

  --primary:       231 133 103;   /* #E78567 coral, lifted for dark */
  --primary-soft:  245 195 176;   /* #F5C3B0 — stays light so text-*-soft reads */
  --primary-strong:216 118  86;   /* #D87656 */
  --primary-fg:     28  19  15;   /* #1C130F on coral (~5.9:1) */

  --success:       120 202 133;  --success-soft: 150 222 165;  --success-strong: 90 180 108;
  --danger:        235 124 112;  --danger-soft:  244 172 162;  --danger-strong: 220 96 84;
  --warn:          230 172  98;  --warn-soft:    244 208 152;  --warn-strong:   214 152 78;

  --shadow:          0   0   0;
  --shadow-card:   0 1px 2px rgb(0 0 0 / .35), 0 10px 30px -12px rgb(0 0 0 / .6);
  --shadow-pop:    0 16px 44px -12px rgb(0 0 0 / .7);
}

/* No-JS: honour the OS only when nothing was chosen and no server default
   was stamped. (theme.js/pre-paint normally stamp data-theme before paint.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.dark):not(.light) {
    color-scheme: dark;
    --bg: 24 22 20; --surface: 33 30 27; --surface-2: 45 41 37; --line: 60 55 49;
    --fg: 238 234 228; --fg-soft: 205 198 188; --muted: 158 150 139; --faint: 113 106 97;
    --primary: 231 133 103; --primary-soft: 245 195 176; --primary-strong: 216 118 86; --primary-fg: 28 19 15;
    --success: 120 202 133; --success-soft: 150 222 165; --success-strong: 90 180 108;
    --danger: 235 124 112; --danger-soft: 244 172 162; --danger-strong: 220 96 84;
    --warn: 230 172 98; --warn-soft: 244 208 152; --warn-strong: 214 152 78;
    --shadow: 0 0 0;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .35), 0 10px 30px -12px rgb(0 0 0 / .6);
    --shadow-pop: 0 16px 44px -12px rgb(0 0 0 / .7);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(var(--primary) / .22); }

a { color: inherit; }

/* ---------- legacy class shims (kept so templates need no churn) ---------- */
.glass-panel,
.glass-card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  box-shadow: var(--shadow-card);
  border-radius: 1rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: relative;
  z-index: 10;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  max-width: 100%;
  background: rgb(var(--surface-2));
  border: 1px solid rgb(var(--line));
  color: rgb(var(--fg));
  border-radius: .75rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgb(var(--faint)); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: rgb(var(--surface));
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 3px rgb(var(--primary) / .18);
}

/* select + textarea: the two form controls that need their own metrics on top
   of the shared skin above. Historically both classes were referenced by the
   admin templates but never defined, so every <select>/<textarea> in the panel
   rendered as an unstyled native control. */
.form-select,
.form-textarea { padding: .6rem .9rem; font: inherit; }
.form-textarea { min-height: 6rem; line-height: 1.9; resize: vertical; }
.form-select {
  -webkit-appearance: none; appearance: none;
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B7D68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .8rem center;
  background-size: 1rem;
}
[dir="rtl"] .form-select { background-position: left .8rem center; }

/* ---------- panel card + buttons (were referenced, never defined) ---------- */
.panel {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .panel { padding: 1.5rem; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .875rem; line-height: 1.25rem;
  padding: .6rem 1.1rem; border-radius: .75rem;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--primary) / .3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--primary-fg)); }
.btn-primary:hover { background: rgb(var(--primary-strong)); }
.btn-outline { border-color: rgb(var(--line)); color: rgb(var(--fg-soft)); }
.btn-outline:hover { background: rgb(var(--fg) / .05); color: rgb(var(--fg)); }
.btn-outline-primary { border-color: rgb(var(--primary) / .4); color: rgb(var(--primary-strong)); }
.btn-outline-primary:hover { background: rgb(var(--primary) / .1); }
.btn-outline-danger { border-color: rgb(var(--danger) / .4); color: rgb(var(--danger)); }
.btn-outline-danger:hover { background: rgb(var(--danger) / .1); }
.btn-ghost { color: rgb(var(--muted)); }
.btn-ghost:hover { color: rgb(var(--fg)); background: rgb(var(--fg) / .05); }
.btn-sm { padding: .4rem .8rem; font-size: .8125rem; border-radius: .625rem; }

/* field label used by the rebuilt admin forms */
.field-label {
  display: block; margin-bottom: .4rem;
  font-size: 12.5px; font-weight: 600; color: rgb(var(--fg-soft));
}
.field-label .req { color: rgb(var(--danger)); font-weight: 700; }
.field-hint { margin-top: .35rem; font-size: 11.5px; line-height: 1.7; color: rgb(var(--faint)); }

/* scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--fg) / .15); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--fg) / .28); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* decorative blobs from the old auth pages — neutralised */
.blob { display: none !important; }

/* helpers reused by templates */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
[x-cloak] { display: none !important; }

.loader { border-top-color: rgb(var(--primary)); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* motion tokens + a soft fade used by the shells */
/* opacity-only: a `transform` here leaves a matrix() on the panel content
   wrapper even after it finishes, which makes every `position:fixed`
   descendant (modals, dropdowns) anchor to it instead of the viewport. */
.animate-fade-in { animation: fadeIn .28s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* theme toggle button */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line));
  color: rgb(var(--fg-soft)); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { color: rgb(var(--fg)); border-color: rgb(var(--primary) / .5); }
.theme-toggle > svg { width: 1.15rem; height: 1.15rem; }
/* three icons — one shows per theme. Default (noon) = cloud/sun. */
.theme-toggle .icon-day,
.theme-toggle .icon-noon,
.theme-toggle .icon-night { display: none; }
.theme-toggle .icon-noon { display: block; }
[data-theme="day"]   .theme-toggle .icon-noon  { display: none; }
[data-theme="day"]   .theme-toggle .icon-day   { display: block; }
[data-theme="night"] .theme-toggle .icon-noon  { display: none; }
[data-theme="night"] .theme-toggle .icon-night { display: block; }
/* legacy fallbacks so an un-migrated shell still shows something */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }

/* SweetAlert2 — follow the theme */
.swal2-popup {
  background: rgb(var(--surface)) !important;
  color: rgb(var(--fg)) !important;
  border: 1px solid rgb(var(--line));
  border-radius: 1rem !important;
}
.swal2-title, .swal2-html-container { color: rgb(var(--fg)) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px rgb(var(--primary) / .3) !important; }