@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Cairo:wght@400;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Brand layer — the shared design system of the trading platform
   (tradingplatform/assets/css/app.css + polish.css), loaded LAST on every
   trader / investor / public page so all three products look like one brand.

   Part 1 (tokens + base) is identical in every project. Part 2 maps this
   project's existing markup onto those tokens; markup and behaviour are unchanged.

   Theme:  html.dark / [data-theme] / [data-bs-theme]  → dark or light
   Tone:   html[data-tone="neutral"] → plain white / black surfaces, flat buttons.
           html[data-tone="sahmee"]  → the sahmeeai.com look: navy ink / slate surfaces, Poppins.
           Otherwise ("colorful") surfaces are tinted by the palette's main colour.
   Palette: --primary, --primary-2 (second), --cyan (accent), --buy, --sell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Part 1 · Tokens (identical across projects) ─────────────────────────── */
:root {
  --primary: #7c6cff;
  --primary-2: #4f8bff;
  --cyan: #22d3ee;
  --buy: #0aa574;
  --sell: #e5304f;
  --amber: #d98a00;
  --grad: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--cyan) 100%);
  --buy-bg: color-mix(in srgb, var(--buy) 12%, transparent);
  --sell-bg: color-mix(in srgb, var(--sell) 10%, transparent);
  --amber-bg: color-mix(in srgb, var(--amber) 12%, transparent);
  --focus: color-mix(in srgb, var(--primary) 28%, transparent);

  /* colorful light */
  --bg: color-mix(in srgb, var(--primary) 6%, #f6f7fa);
  --bg-2: color-mix(in srgb, var(--primary) 8%, #eef0f5);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--primary) 4%, #f7f8fb);
  --surface-3: color-mix(in srgb, var(--primary) 10%, #ebeef3);
  --border: color-mix(in srgb, var(--primary) 14%, #dde1e8);
  --text: #161b26;
  --muted: #647087;
  --shadow: 0 1px 2px rgba(20, 30, 60, .08);
  --shadow-lg: 0 10px 30px rgba(40, 55, 120, .12);
  --btn-glow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent);

  --radius: 10px;
  --radius-sm: 8px;
  --t: .14s ease;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root.dark, :root[data-theme="dark"], :root[data-bs-theme="dark"] {
  --buy: #14c38e;
  --sell: #ff5470;
  --amber: #ffb020;
  --buy-bg: color-mix(in srgb, var(--buy) 14%, transparent);
  --sell-bg: color-mix(in srgb, var(--sell) 14%, transparent);
  --amber-bg: color-mix(in srgb, var(--amber) 14%, transparent);

  /* colorful dark */
  --bg: color-mix(in srgb, var(--primary) 7%, #090c12);
  --bg-2: color-mix(in srgb, var(--primary) 9%, #0d1118);
  --surface: color-mix(in srgb, var(--primary) 8%, #10141c);
  --surface-2: color-mix(in srgb, var(--primary) 11%, #161b25);
  --surface-3: color-mix(in srgb, var(--primary) 16%, #1e2531);
  --border: color-mix(in srgb, var(--primary) 16%, #222937);
  --text: #e8ecf3;
  --muted: #8b95a8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 10px 30px rgba(3, 6, 20, .45);
  color-scheme: dark;
}
/* Neutral surface style: plain white / black and greys, no glow. Only the backgrounds change:
   buttons keep the palette gradient, and buy / sell colours still come from the palette. */
:root[data-tone="neutral"] {
  --bg: #f5f5f6;
  --bg-2: #fafafa;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --surface-3: #ececee;
  --border: #e4e4e7;
  --text: #18181b;
  --muted: #6b6b73;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .08);
  --btn-glow: none;
}
:root[data-tone="neutral"]:is(.dark, [data-theme="dark"], [data-bs-theme="dark"]) {
  --bg: #000000;
  --bg-2: #0a0a0b;
  --surface: #111112;
  --surface-2: #19191b;
  --surface-3: #232326;
  --border: #27272a;
  --text: #ededef;
  --muted: #8b8b92;
  --shadow: none;
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
}
/* Sahmee surface style (the sahmeeai.com / sahmeeinvest look): navy ink in dark mode, slate / white
   in light mode, Poppins, flat brand-colour buttons with a soft brand glow. */
:root[data-tone="sahmee"] {
  --bg: #f1f5f9;
  --bg-2: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #e2e8f0;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --grad: linear-gradient(0deg, var(--primary), var(--primary));
  --btn-glow: 0 10px 24px color-mix(in srgb, var(--primary-2) 25%, transparent);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .05);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, .12);
  --font: 'Poppins', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
:root[data-tone="sahmee"]:is(.dark, [data-theme="dark"], [data-bs-theme="dark"]) {
  --bg: #051628;
  --bg-2: #030e1b;
  --surface: #0a1f38;
  --surface-2: #12294a;
  --surface-3: #1e3557;
  --border: #1b3150;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(1, 8, 20, .55);
}
html[lang="ar"] { --font: 'Cairo', 'Inter', system-ui, sans-serif; }

/* ── Part 1 · Base ───────────────────────────────────────────────────────── */
html body { font-family: var(--font); color: var(--text); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
:root ::-webkit-scrollbar-track { background: transparent; }
:root ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
:root ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Part 2 · API admin + docs bridge (copytradingplatform, portalapi) — maps the
   theme.css / docs style.css variables (--bg2, --accent, …), the remapped
   Tailwind grays and the component classes onto the tokens above.
   Theme attribute here is data-theme="dark|light" (admin/assets/brand.js sets it
   from the OS when the visitor never chose one).
   ═══════════════════════════════════════════════════════════════════════════ */

/* theme.css / style.css set --bg, --border, --text, --shadow under [data-theme="light"];
   restate the brand values there so they win (neutral is restated after it). */
:root[data-theme="light"] {
  --bg: color-mix(in srgb, var(--primary) 6%, #f6f7fa);
  --border: color-mix(in srgb, var(--primary) 14%, #dde1e8);
  --text: #161b26;
  --shadow: 0 1px 2px rgba(20, 30, 60, .08);
}
:root[data-theme="light"][data-tone="neutral"] {
  --bg: #f5f5f6;
  --border: #e4e4e7;
  --text: #18181b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
}
:root[data-theme="light"][data-tone="sahmee"] {
  --bg: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .05);
}
:root[data-theme], :root {
  --bg2: var(--surface);
  --bg3: var(--surface-2);
  --sidebar-bg: var(--surface);
  --text2: var(--muted);
  --text3: color-mix(in srgb, var(--muted) 75%, var(--surface));
  --accent: var(--primary);
  --accent2: var(--primary-2);
  --green: var(--buy);
  --green-text: var(--buy);
  --red: var(--sell);
  --red-text: var(--sell);
  --yellow: var(--amber);
  --yellow-text: var(--amber);
}

/* ── Page ────────────────────────────────────────────────────────────────── */
html:root, html:root > body { background: var(--bg); }
html:root > body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); }

/* ── Remapped Tailwind grays (admin pages rendered by app.js) ────────────── */
:root .bg-gray-900 { background-color: var(--bg); }
:root .bg-gray-800 { background-color: var(--surface); }
:root .bg-gray-750, :root .hover\:bg-gray-750:hover { background-color: var(--surface-2); }
:root .bg-gray-700 { background-color: var(--surface-2); }
:root .bg-gray-700\/50, :root .bg-gray-700\/60 { background-color: color-mix(in srgb, var(--surface-3) 60%, transparent); }
:root .bg-gray-600, :root .hover\:bg-gray-600:hover, :root .hover\:bg-gray-700:hover { background-color: var(--surface-3); }
:root .border-gray-600, :root .border-gray-700, :root .border-gray-800 { border-color: var(--border); }
:root .divide-gray-700 > :not([hidden]) ~ :not([hidden]), :root .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
:root .text-white, :root .hover\:text-white:hover { color: var(--text); }
:root .text-gray-100, :root .text-gray-200, :root .text-gray-300 { color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
:root .text-gray-400, :root .text-gray-500 { color: var(--muted); }
:root input::placeholder, :root textarea::placeholder { color: var(--muted); opacity: .7; }

/* Brand colour */
:root .bg-blue-600, :root .bg-blue-500 { background: var(--grad); box-shadow: var(--btn-glow); }
:root .hover\:bg-blue-700:hover, :root .hover\:bg-blue-600:hover { background: var(--grad); filter: brightness(1.1); }
:root :is(.bg-blue-600, .bg-blue-500, .bg-green-600, .bg-red-600, .bg-emerald-600).text-white { color: #fff; }
:root .text-blue-300, :root .text-blue-400, :root .text-blue-500, :root .hover\:text-blue-300:hover { color: var(--primary-2); }
:root .focus\:border-blue-500:focus { border-color: var(--primary); }
:root [class*="focus:ring-blue"]:focus { --tw-ring-color: var(--focus); }

/* Buy / sell / warning */
:root .text-green-300, :root .text-green-400 { color: var(--buy); }
:root .text-red-300, :root .text-red-400, :root .hover\:text-red-300:hover { color: var(--sell); }
:root .text-yellow-300, :root .text-yellow-400 { color: var(--amber); }
:root .bg-green-600 { background-color: var(--buy); }
:root .bg-red-600 { background-color: var(--sell); }
:root [class*="bg-green-900"] { background-color: var(--buy-bg); }
:root [class*="bg-red-900"] { background-color: var(--sell-bg); }
:root [class*="bg-yellow-900"] { background-color: var(--amber-bg); }

/* ── Admin shell (the trading platform's admin: header bar, surface sidebar, gradient pill) ── */
:root .admin-header { background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: none; padding: 0 24px; }
:root .admin-logo-mark, :root .logo-mark { background: var(--grad); box-shadow: var(--btn-glow); border-radius: 9px; }
:root .admin-logo-name, :root .logo-name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
:root .admin-user-chip { background: var(--surface-2); border-color: var(--border); border-radius: 999px; }
:root .admin-user-avatar { background: var(--grad); color: #fff; }
:root .admin-sidebar { background: var(--surface); border-right: 1px solid var(--border); }
:root .admin-nav { padding: 18px 0 12px; }
:root .admin-nav-group-label { color: var(--muted); font-size: 11px; letter-spacing: .06em; padding: 14px 22px 6px; }
:root .admin-nav-item { padding: 10px 12px; margin: 2px 14px; width: calc(100% - 28px); border-radius: 11px; font-weight: 600; font-size: 14px; color: var(--muted); }
:root .admin-nav-item:hover { color: var(--text); background: var(--surface-2); }
:root .admin-nav-item.active { color: #fff; background: var(--grad); box-shadow: var(--btn-glow); }
:root .admin-nav-item.active .admin-nav-icon { background: transparent; }
:root .admin-content { padding: 22px 24px 40px; }
:root .page-section-tag, :root .section-tag { color: var(--primary-2); }
:root .page-title { font-size: 19px; font-weight: 700; letter-spacing: 0; }
:root .page-subtitle { color: var(--muted); }

/* Cards, tiles, tables */
:root .card, :root .stat-tile, :root .table-card, :root .admin-modal-box, :root .modal-box, :root .quick-link-card, :root .tryit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
:root .card-pad { padding: 18px; }
:root .card-title { font-size: 16px; }
:root .card-desc { color: var(--muted); }
:root .stat-tile-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
:root .stat-tile-value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
:root .stat-tile-icon { border-radius: 9px; }
:root .quick-link-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); transform: none; }
:root table.admin-table th, :root #page-content thead tr th {
  background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; border-color: var(--border);
}
:root table.admin-table td { padding: 9px 12px; font-size: 13px; border-color: var(--border); }
:root table.admin-table tbody tr:hover td, :root #page-content tbody tr:hover td { background: var(--surface-2); }
:root .pill { border-radius: 6px; }
:root .pill.green { background: var(--buy-bg); color: var(--buy); }
:root .pill.red { background: var(--sell-bg); color: var(--sell); }
:root .pill.yellow { background: var(--amber-bg); color: var(--amber); }
:root .pill.blue { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-2); }
:root .pill.gray { background: var(--surface-3); color: var(--muted); }

/* Buttons & inputs */
:root .btn { border-radius: var(--radius-sm); font-weight: 600; transition: background var(--t), border-color var(--t), filter var(--t); }
:root .btn-primary, :root .tryit-send:not([style*="background"]), :root .authorize-btn {
  background: var(--grad); color: #fff; border: 0; box-shadow: var(--btn-glow);
}
:root .btn-primary:hover, :root .tryit-send:not([style*="background"]):hover, :root .authorize-btn:hover { background: var(--grad); filter: brightness(1.1); }
:root .btn-secondary, :root .btn-ghost { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
:root .btn-secondary:hover, :root .btn-ghost:hover { background: var(--surface-3); }
:root .btn-danger { background: var(--sell-bg); color: var(--sell); }
:root .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
:root .form-label, :root .field-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
:root :is(input.form-input, .form-textarea, select.form-input, #page-content textarea),
:root .modal-box input[type="text"], :root .search-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
}
:root :is(input.form-input, .form-textarea, select.form-input, #page-content textarea, .search-box):focus,
:root .modal-box input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); outline: none; }
:root .theme-toggle-btn, :root .icon-btn { border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
:root .theme-toggle-btn:hover, :root .icon-btn:hover { border-color: var(--primary); background: var(--surface-3); }
:root .spinner { border-top-color: var(--primary); }

/* ── Docs (docs/, reference/) ────────────────────────────────────────────── */
:root .site-header { background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: none; }
:root .sidebar { background: var(--surface); border-color: var(--border); }
:root .nav-group-label { color: var(--muted); letter-spacing: .06em; }
:root .nav-item { border-radius: 9px; font-weight: 600; color: var(--muted); }
:root .nav-item:hover { color: var(--text); background: var(--surface-2); }
:root .nav-item.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); border-left-color: var(--primary); }
:root .env-btn.active, :root .resp-btn.active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
:root .callout { border-radius: var(--radius-sm); }
:root .callout.info { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

/* ── Swagger UI (portalapi docs/) — font + brand colours on the light Swagger theme ── */
:root .swagger-ui, :root .swagger-ui .info .title, :root .swagger-ui .opblock-tag, :root .swagger-ui .opblock .opblock-summary-description { font-family: var(--font); }
:root .swagger-ui .btn.execute, :root .swagger-ui .btn.authorize { background: var(--grad); border-color: transparent; color: #fff; }
:root .swagger-ui .btn.authorize svg { fill: #fff; }
:root .swagger-ui .info a, :root .swagger-ui a.nostyle { color: var(--primary-2); }

/* Blue / indigo gradient tiles (login logo, badges) → the brand gradient */
:root :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b):is(.from-blue-500, .from-blue-600, .from-indigo-500, .from-indigo-600) { background-image: var(--grad); box-shadow: var(--btn-glow); }
:root :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b):is(.from-blue-500, .from-blue-600, .from-indigo-500, .from-indigo-600).text-white { color: #fff; }

/* ── API admin layout patterns — identical sizes to the trading platform's admin ── */
:root { --sidebar-w: 250px; }
:root .admin-nav { padding: 18px 0 12px; }
:root .admin-nav-item { margin: 0 14px 4px; width: calc(100% - 28px); gap: 11px; }
:root .admin-content { padding: 22px 24px 40px; }
:root .page-title { font-size: 19px; }
:root .stat-grid { gap: 16px; }
:root .card-pad, :root .stat-tile { padding: 18px; }
/* KPI tiles */
:root .stat-tile { position: relative; overflow: hidden; }
:root .stat-tile::after {
  content: ''; position: absolute; inset-inline-end: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%;
  background: var(--tone, var(--primary)); opacity: .16; pointer-events: none;
}
:root .stat-tile-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
:root .stat-tile-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
:root .stat-tile-icon { position: relative; z-index: 1; }
:root .stat-tile > * { position: relative; z-index: 1; }

/* ── Leftover dark-first utilities → theme tokens, so light mode never gets dark panels and
   dark mode never gets pale-on-dark text. ── */
:root [class*="bg-purple-900"] { background-color: color-mix(in srgb, #a855f7 14%, transparent); }
:root .text-purple-300, :root .text-purple-400, :root .hover\:text-purple-300:hover { color: color-mix(in srgb, #a855f7 75%, var(--text)); }
:root .bg-blue-900\/20, :root .bg-blue-500\/10 { background-color: color-mix(in srgb, var(--primary) 12%, transparent); }
:root .bg-gray-800\/60, :root .hover\:bg-gray-800:hover { background-color: var(--surface-2); }
:root .bg-gray-900\/40, :root .bg-gray-900\/60 { background-color: var(--bg-2); }
:root .border-red-800\/30, :root .border-red-800\/40, :root .border-red-900 { border-color: color-mix(in srgb, var(--sell) 30%, transparent); }
:root .border-yellow-600, :root .border-yellow-500\/30 { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
:root .border-green-500\/30 { border-color: color-mix(in srgb, var(--buy) 35%, transparent); }
:root .hover\:text-yellow-300:hover { color: var(--amber); filter: brightness(1.1); }
:root .hover\:text-green-300:hover { color: var(--buy); filter: brightness(1.1); }
:root .hover\:text-gray-300:hover, :root .hover\:text-gray-400:hover { color: var(--text); }
:root .text-gray-600 { color: var(--muted); }
:root .hover\:border-gray-500:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
:root .hover\:bg-red-900:hover, :root .hover\:bg-red-700:hover, :root .hover\:bg-red-600:hover { background-color: color-mix(in srgb, var(--sell) 88%, #000); color: #fff; }
:root .hover\:bg-green-700:hover { background-color: color-mix(in srgb, var(--buy) 88%, #000); }
:root .bg-red-600\/80 { background-color: color-mix(in srgb, var(--sell) 80%, transparent); }
:root .bg-yellow-600 { background-color: var(--amber); }
:root .hover\:bg-yellow-700:hover { background-color: color-mix(in srgb, var(--amber) 88%, #000); }
:root .bg-green-500\/10, :root .bg-green-500\/15 { background-color: var(--buy-bg); }
:root .bg-red-500\/10 { background-color: var(--sell-bg); }
:root .bg-yellow-500\/10, :root .bg-yellow-500\/15 { background-color: var(--amber-bg); }
:root .bg-blue-900\/60 { background-color: color-mix(in srgb, var(--primary) 16%, transparent); }
:root .text-orange-300 { color: color-mix(in srgb, #f97316 80%, var(--text)); }
:root .text-indigo-300 { color: var(--primary-2); }
:root .border-red-700, :root .border-red-700\/50 { border-color: color-mix(in srgb, var(--sell) 40%, transparent); }
:root .border-green-700\/50 { border-color: color-mix(in srgb, var(--buy) 40%, transparent); }

/* Docs / reference in light mode: their method pills and accent text are tuned for dark
   backgrounds (green-400 / blue-400 on a pale tint) — darken them so they read on white. */
:root[data-theme="light"] .nav-method.get { color: color-mix(in srgb, var(--buy) 78%, #000); background: var(--buy-bg); }
:root[data-theme="light"] .nav-method.post { color: color-mix(in srgb, var(--primary-2) 75%, #000); background: color-mix(in srgb, var(--primary-2) 12%, transparent); }
:root[data-theme="light"] .nav-method.delete { color: color-mix(in srgb, var(--sell) 80%, #000); background: var(--sell-bg); }
:root[data-theme="light"] :is(.section-tag, .page-section-tag) { color: color-mix(in srgb, var(--primary-2) 78%, #000); }
:root[data-theme="light"] code:not(pre code) { color: color-mix(in srgb, var(--primary-2) 75%, #000); }