/**
 * /crypto/all-coins — Light site theme (html.light) must not show black canvas.
 *
 * Root cause: crypto-route-theme sets --crypto-canvas: var(--zs-black) whenever
 * data-zs-theme="dark", while --zs-surface-* can still inherit white from html.light,
 * producing a white table on a black outer frame.
 *
 * Scoped to html.light + .crypto-all-coins-page only. html.dark / crypto dark unchanged.
 */

html.light:has(.crypto-all-coins-page) {
  background-color: #f5f7f4 !important;
}

html.light body:has(.crypto-all-coins-page) {
  background-color: #f5f7f4 !important;
}

html.light body > main:has(.crypto-all-coins-page) {
  background-color: #f5f7f4 !important;
}

html.light [data-zs-crypto-root]:has(.crypto-all-coins-page) {
  background-color: #f5f7f4 !important;
}

html.light .crypto-all-coins-page,
html.light .crypto-all-coins-wrapper,
html.light .outer-shell {
  background-color: #f5f7f4 !important;
}

html.light .crypto-all-coins-shell {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/* Crypto toggle light + same page — keep canvas aligned (no black bleed) */
[data-zs-crypto-root][data-zs-theme="light"]:has(.crypto-all-coins-page) {
  background-color: #f5f7f4 !important;
}

[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-page,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-wrapper {
  background-color: #f5f7f4 !important;
}

[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

/**
 * Light Mode — داخل كرت /crypto/all-coins فقط: لا خطوط/حدود/ظلال بالأخضر النيون.
 * Dark Mode (html.dark + crypto dark): لا تُطبَّق هذه القواعد.
 */

html.light .crypto-all-coins-shell,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell {
  --crypto-card-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 10px 32px rgba(15, 23, 42, 0.08);
  --crypto-row-hover-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  --zs-shadow-green: 0 4px 14px rgba(15, 23, 42, 0.08);
  --zs-green-glow: rgba(15, 23, 42, 0.06);
  --zs-green-border: rgba(15, 23, 42, 0.1);
  --zs-success-border: rgba(15, 23, 42, 0.1);
  --zs-success: #0f172a;
}

html.light .crypto-all-coins-shell tbody tr:hover,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell tbody tr:hover {
  background-color: rgba(15, 23, 42, 0.04) !important;
  box-shadow: none !important;
}

html.light .crypto-all-coins-shell tbody tr:focus-visible,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell tbody tr:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.18) !important;
  outline-offset: 2px;
}

html.light .crypto-all-coins-shell *[class*="border-green"],
html.light .crypto-all-coins-shell *[class*="ring-green"],
html.light .crypto-all-coins-shell *[class*="outline-green"],
html.light .crypto-all-coins-shell *[class*="shadow-green"],
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell *[class*="border-green"],
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell *[class*="ring-green"],
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell *[class*="outline-green"],
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell *[class*="shadow-green"] {
  border-color: rgba(15, 23, 42, 0.1) !important;
  outline-color: rgba(15, 23, 42, 0.14) !important;
  --tw-ring-color: rgba(15, 23, 42, 0.12) !important;
  --tw-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  --tw-shadow-colored: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* زر "عرض جميع العملات" — بدون أخضر قوي */
html.light .crypto-all-coins-shell button[type="button"].inline-flex,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell button[type="button"].inline-flex {
  color: #0f172a !important;
}

html.light .crypto-all-coins-shell button[type="button"].inline-flex:hover,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell button[type="button"].inline-flex:hover {
  color: #1f2937 !important;
}

html.light .crypto-all-coins-shell button[type="button"].inline-flex:focus-visible,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell button[type="button"].inline-flex:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.2) !important;
  outline-offset: 2px;
}

/* Spinner التحميل — حدود محايدة */
html.light .crypto-all-coins-shell button .animate-spin,
[data-zs-crypto-root][data-zs-theme="light"] .crypto-all-coins-shell button .animate-spin {
  border-color: rgba(15, 23, 42, 0.22) !important;
  border-top-color: transparent !important;
}

/* —— Market terminal (page-specific) — light crypto surface: neutral controls, no neon load button —— */
html.light .all-coins-terminal-card,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-card {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html.light .all-coins-terminal-card::before,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-card::before {
  opacity: 0.35;
}

html.light .all-coins-terminal-search,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-search {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

html.light .all-coins-terminal-tab.is-active,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-tab.is-active {
  background: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
}

html.light .all-coins-terminal-table-wrap,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-table-wrap {
  background: #fafafa !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html.light .all-coins-terminal-load-more,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-load-more {
  background: #0f172a !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}

html.light .all-coins-terminal-load-more:focus-visible,
[data-zs-crypto-root][data-zs-theme="light"] .all-coins-terminal-load-more:focus-visible {
  outline-color: rgba(15, 23, 42, 0.35) !important;
}