/*
 * ════════════════════════════════════════════════════════════════════
 *  THEME-GLOBAL.CSS — Frontend + User Dashboard + Competition
 *  Loads LAST after main.css, trading.css, custom.css, color.php
 *  Variables from color.php: --primary --primary-hover --primary-glow
 *  --bg-main --bg-card --bg-hover --text-main --text-soft --border-soft
 *  --radius-sm --radius-md --radius-lg --body-font --transition
 *  HSL system: --base-h --base-s --base-l (for main.css compat)
 * ════════════════════════════════════════════════════════════════════
 */

/* ── 1. BASE ──────────────────────────────────────────────────────── */
html, body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: var(--body-font, 'Poppins', sans-serif) !important;
}
h1,h2,h3,h4,h5,h6 { color: var(--text-main) !important; font-family: var(--body-font, 'Poppins', sans-serif) !important; }

a { color: var(--primary); transition: color var(--transition); }
a:hover { color: var(--primary-hover); }
hr { border-color: var(--border-soft) !important; opacity: 1; }
*:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── 2. USER DASHBOARD STRUCTURE ─────────────────────────────────── */
.dashboard__right, .dashboard-body { background: var(--bg-main) !important; }
.sidebar-menu, .sidebar-menu__inner { background: var(--bg-card) !important; border-right: 1px solid var(--border-soft) !important; }
.sidebar-menu-list__link.active,
.sidebar-menu-list__item.active > .sidebar-menu-list__link {
  color: var(--primary) !important;
  background: rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.1) !important;
  border-left: 3px solid var(--primary) !important;
}
.sidebar-menu-list__link:hover { color: var(--primary) !important; background: var(--bg-hover) !important; }
.sidebar-menu-list__link .icon, .sidebar-menu-list__link .text { color: inherit !important; }
.dashboard-header, .topbar { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-soft) !important; }

/* ── 3. CARDS ─────────────────────────────────────────────────────── */
.card, .custom-card, .dashboard-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg, 14px) !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--text-main) !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--border-soft) !important; }
.card-title  { color: var(--text-main) !important; }

/* ── 4. FORMS ─────────────────────────────────────────────────────── */
.form-control,
input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]),
select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md, 10px) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-main) !important;
  outline: none;
}
::placeholder { color: var(--text-soft) !important; }

/* ── 5. BUTTONS ───────────────────────────────────────────────────── */
.btn--base {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-on-primary, #000) !important;
  border-radius: var(--radius-md, 10px) !important;
  font-weight: 600 !important;
}
.btn--base:hover { filter: brightness(1.1); box-shadow: 0 0 18px var(--primary-glow) !important; color: var(--text-on-primary, #000) !important; }
.bg--base { background-color: var(--primary) !important; }
.text--base { color: var(--primary) !important; }

/* ── 6. TABLES ────────────────────────────────────────────────────── */
.table th { background: rgba(255,255,255,0.03) !important; color: var(--text-soft) !important; border-color: var(--border-soft) !important; }
.table td { color: var(--text-main) !important; border-color: var(--border-soft) !important; }
.table tr:hover td { background: var(--bg-hover) !important; }

/* ── 7. NAV / TABS ────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border-soft) !important; }
.nav-tabs .nav-link { color: var(--text-soft) !important; border: none !important; }
.nav-tabs .nav-link:hover { color: var(--primary) !important; }
.nav-tabs .nav-link.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; background: transparent !important; }

/* ── 8. MODALS ────────────────────────────────────────────────────── */
.modal-content { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-lg, 14px) !important; color: var(--text-main) !important; }
.modal-header { border-bottom: 1px solid var(--border-soft) !important; }
.modal-footer { border-top: 1px solid var(--border-soft) !important; }
.modal-title  { color: var(--text-main) !important; }

/* ── 9. DROPDOWNS / PAGINATION ────────────────────────────────────── */
.dropdown-menu { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-lg, 14px) !important; }
.dropdown-item { color: var(--text-main) !important; }
.dropdown-item:hover { background: var(--bg-hover) !important; color: var(--primary) !important; }
.pagination .page-link { background: var(--bg-card) !important; border-color: var(--border-soft) !important; color: var(--text-soft) !important; }
.pagination .page-link:hover { background: var(--bg-hover) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
.pagination .page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary, #000) !important; }

/* ── 10. SELECT2 ──────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single { background: rgba(255,255,255,0.04) !important; border-color: var(--border-soft) !important; border-radius: var(--radius-md, 10px) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-main) !important; }
.select2-dropdown { background: var(--bg-card) !important; border-color: var(--border-soft) !important; }
.select2-results__option { color: var(--text-main) !important; }
.select2-results__option--highlighted { background: var(--bg-hover) !important; color: var(--primary) !important; }


/* ════════════════════════════════════════════════════════════════════
   COMPETITION COMPONENT SYSTEM
   All inline styles in competition/*.blade.php are replaced with
   these classes. Nothing hardcoded.
 ════════════════════════════════════════════════════════════════════ */

/* ── Page structure ──────────────────────────────────────────────── */
.cp-page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.cp-page-title  { color: var(--text-main) !important; margin:0; font-size:22px; }
.cp-page-subtitle { color: var(--text-soft) !important; font-size:13px; margin:2px 0 0; }
.cp-header-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cp-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.cp-section-title  { color: var(--text-main) !important; margin:0; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.cp-btn-back {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-soft);
  color: var(--text-soft) !important; padding:8px 18px; border-radius:var(--radius-md,10px);
  text-decoration:none; font-size:13px; cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; gap:6px;
}
.cp-btn-back:hover { background:var(--bg-hover); color:var(--text-main) !important; border-color:var(--primary); }

.cp-btn-primary {
  background: var(--primary) !important; border: 1px solid var(--primary) !important;
  color: var(--text-on-primary, #000) !important; padding:8px 18px; border-radius:var(--radius-md,10px);
  text-decoration:none; font-size:13px; font-weight:600; cursor:pointer; transition:var(--transition); display:inline-flex; align-items:center; gap:6px;
}
.cp-btn-primary:hover { filter:brightness(1.1); box-shadow:0 0 16px var(--primary-glow); color:var(--text-on-primary,#000) !important; text-decoration:none; }

.cp-btn-ghost {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-soft);
  color: var(--text-soft) !important; padding:8px 18px; border-radius:var(--radius-md,10px);
  font-size:13px; cursor:pointer; transition:var(--transition);
}
.cp-btn-ghost:hover { border-color:var(--primary); color:var(--primary) !important; background:var(--bg-hover); }

/* ── Badges ──────────────────────────────────────────────────────── */
.cp-badge { padding:2px 10px; border-radius:var(--radius-pill,999px); font-size:11px; font-weight:600; border:1px solid; display:inline-flex; align-items:center; }
.cp-badge--primary { background:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.15); border-color:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.4); color:hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 20%)); }
.cp-badge--success { background:rgba(52,211,153,0.15); border-color:rgba(52,211,153,0.35); color:#34d399; }
.cp-badge--warning { background:rgba(251,191,36,0.15); border-color:rgba(251,191,36,0.35); color:#fbbf24; }
.cp-badge--danger  { background:rgba(248,113,113,0.15); border-color:rgba(248,113,113,0.35); color:#f87171; }
.cp-badge--info    { background:rgba(96,165,250,0.15); border-color:rgba(96,165,250,0.35); color:#60a5fa; }
.cp-badge--you     { background:rgba(0,210,255,0.15); border-color:rgba(0,210,255,0.3); color:#00d2ff; font-size:10px; margin-left:6px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.cp-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); overflow:hidden; transition:var(--transition); }
.cp-card:hover { border-color:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.35); box-shadow:0 8px 30px rgba(0,0,0,0.4); }
.cp-card--stat { padding:20px; text-align:center; }
.cp-card__header { padding:14px 20px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; }
.cp-card__header h6 { color:var(--text-main) !important; margin:0; font-size:0.9rem; }
.cp-card__body { padding:20px; }

/* Stat labels / values */
.cp-stat-label { color:hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 15%)) !important; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.cp-stat-value { color:var(--text-main) !important; font-size:20px; font-weight:700; }
.cp-stat-value--positive { color:#34d399 !important; }
.cp-stat-value--negative { color:#f87171 !important; }
.cp-stat-muted  { color:var(--text-soft) !important; font-size:11px; margin-top:4px; }

/* Countdown */
.cp-countdown { display:flex; justify-content:center; gap:8px; }
.cp-countdown-unit { text-align:center; }
.cp-countdown-num  { color:var(--text-main) !important; font-size:22px; font-weight:700; }
.cp-countdown-lbl  { color:var(--text-soft) !important; font-size:10px; }

/* Action strips */
.cp-action-strip { border-radius:var(--radius-lg,14px); padding:16px 24px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.cp-action-strip--primary { background:linear-gradient(135deg,rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.12) 0%,rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.05) 100%); border:1px solid rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.25); }
.cp-action-strip--warning  { background:rgba(251,191,36,0.06); border:1px solid rgba(251,191,36,0.25); }
.cp-action-strip__text { color:var(--text-main) !important; font-size:15px; }
.cp-action-strip__text--warning { color:#fbbf24 !important; }
.cp-action-strip__text-accent   { color:#34d399; }

/* ── Tables ──────────────────────────────────────────────────────── */
.cp-table-wrapper { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); overflow:hidden; }
.cp-table { width:100%; border-collapse:collapse; }
.cp-table thead tr { background:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.12); border-bottom:2px solid rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.3); }
.cp-table thead th { padding:14px 16px; color:hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 10%)) !important; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.cp-table thead th:last-child { text-align:right; }
.cp-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); transition:background var(--transition); }
.cp-table tbody tr:hover { background:var(--bg-hover); }
.cp-table tbody tr.cp-row--podium { background:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.10); }
.cp-table tbody tr.cp-row--me     { background:rgba(0,210,255,0.06); }
.cp-table tbody td { padding:14px 16px; color:var(--text-main) !important; font-size:13px; }
.cp-table tbody td:last-child { text-align:right; }
.cp-table__footer { padding:14px 16px; border-top:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.cp-table__footer-info { color:var(--text-soft) !important; font-size:12px; }

/* Table search */
.cp-search-field { background:rgba(255,255,255,0.05) !important; border:1px solid var(--border-soft) !important; border-radius:var(--radius-md,10px) !important; padding:8px 14px !important; color:var(--text-main) !important; font-size:13px; width:200px; transition:var(--transition); }
.cp-search-field:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-glow) !important; outline:none; }
.cp-search-field::placeholder { color:var(--text-soft) !important; }

/* Cell types */
.cp-cell-positive  { color:#34d399 !important; font-weight:600; }
.cp-cell-negative  { color:#f87171 !important; font-weight:600; }
.cp-cell-muted     { color:var(--text-soft) !important; }
.cp-cell-move-up   { font-size:10px; color:#34d399; }
.cp-cell-move-down { font-size:10px; color:#f87171; }
.cp-cell-prize-cash  { color:#34d399 !important; font-weight:600; }
.cp-cell-prize-other { color:hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 20%)) !important; font-size:12px; }

/* ── Modals ──────────────────────────────────────────────────────── */
.cp-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.cp-modal-overlay.is-open { display:flex; }
.cp-modal { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); padding:32px; max-width:500px; width:90%; position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.6); }
.cp-modal__close { position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-soft) !important; font-size:20px; cursor:pointer; line-height:1; padding:4px; transition:color var(--transition); }
.cp-modal__close:hover { color:var(--text-main) !important; }
.cp-modal__title { color:var(--text-main) !important; margin-bottom:20px; }
.cp-modal__row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.cp-modal__row:last-child { border-bottom:none; }
.cp-modal__row-label { color:var(--text-soft) !important; }
.cp-modal__row-value { color:var(--text-main) !important; }
.cp-modal__row-value--accent { color:hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 15%)) !important; }
.cp-modal__row-value--danger  { color:#f87171 !important; }

/* ── Competition list cards ──────────────────────────────────────── */
.cp-comp-card { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); padding:20px; transition:var(--transition); height:100%; }
.cp-comp-card:hover { border-color:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.4); box-shadow:0 8px 30px rgba(0,0,0,0.4); transform:translateY(-2px); }
.cp-comp-card__banner { height:80px; background:linear-gradient(135deg,hsl(var(--base-h) var(--base-s) var(--base-l)),hsl(var(--base-two-h) var(--base-two-s) var(--base-two-l))); border-radius:var(--radius-md,10px); margin-bottom:16px; }
.cp-comp-card__title { color:var(--text-main) !important; font-size:16px; font-weight:600; display:block; margin-bottom:8px; }
.cp-comp-card__meta  { color:var(--text-soft) !important; font-size:12px; margin-bottom:4px; }
.cp-comp-card__meta span { color:var(--text-main) !important; }
.cp-comp-card__cta { display:block; text-align:center; background:var(--primary); color:var(--text-on-primary,#000) !important; padding:10px; border-radius:var(--radius-md,10px); text-decoration:none; font-size:13px; font-weight:600; margin-top:16px; transition:var(--transition); }
.cp-comp-card__cta:hover { filter:brightness(1.1); box-shadow:0 0 16px var(--primary-glow); color:var(--text-on-primary,#000) !important; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.cp-tabs { display:flex; gap:0; margin-bottom:24px; border-bottom:1px solid var(--border-soft); }
.comp-tab { background:transparent; border:none; border-bottom:2px solid transparent; color:var(--text-soft) !important; padding:8px 16px 10px; font-size:14px; font-weight:500; cursor:pointer; transition:var(--transition); margin-bottom:-1px; }
.comp-tab:hover  { color:var(--text-main) !important; }
.comp-tab.active { color:var(--primary) !important; border-bottom-color:var(--primary); }

/* ── My rank banner ──────────────────────────────────────────────── */
.cp-my-rank-banner { background:linear-gradient(135deg,rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.10) 0%,rgba(0,210,255,0.04) 100%); border:1px solid rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.3); border-radius:var(--radius-lg,14px); padding:20px; margin-bottom:24px; }

/* ── Feed ────────────────────────────────────────────────────────── */
.cp-feed-form { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); padding:20px; margin-bottom:24px; }
.cp-feed-textarea { width:100%; background:rgba(255,255,255,0.04) !important; border:1px solid var(--border-soft) !important; border-radius:var(--radius-md,10px) !important; padding:12px !important; color:var(--text-main) !important; font-size:14px; resize:none; margin-bottom:12px; transition:border-color var(--transition); font-family:var(--body-font,'Poppins',sans-serif); }
.cp-feed-textarea:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-glow) !important; outline:none; }
.cp-feed-textarea::placeholder { color:var(--text-soft) !important; }
.cp-feed-post { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); padding:20px; margin-bottom:16px; transition:var(--transition); }
.cp-feed-post:hover { border-color:rgba(hsl(var(--base-h) var(--base-s) var(--base-l)) / 0.3); }
.cp-feed-post__author  { color:var(--text-main) !important; font-weight:600; }
.cp-feed-post__time    { color:var(--text-soft) !important; font-size:12px; }
.cp-feed-post__content { color:var(--text-soft) !important; margin-bottom:12px; font-size:14px; }
.cp-like-btn { background:rgba(255,255,255,0.04); border:1px solid var(--border-soft); color:var(--text-soft) !important; padding:6px 14px; border-radius:var(--radius-pill,999px); font-size:12px; cursor:pointer; transition:var(--transition); }
.cp-like-btn:hover { border-color:var(--primary); color:var(--primary) !important; background:var(--bg-hover); }

/* ── Trader profile data rows ────────────────────────────────────── */
.cp-data-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.cp-data-row:last-child { border-bottom:none; }
.cp-data-row__label { color:var(--text-soft) !important; }
.cp-data-row__value { color:var(--text-main) !important; font-weight:600; }

/* ── Invite input ────────────────────────────────────────────────── */
.cp-invite-input { background:rgba(255,255,255,0.05) !important; border:1px solid var(--border-soft) !important; color:var(--text-main) !important; padding:10px 16px !important; border-radius:var(--radius-md,10px) !important; font-size:13px; width:180px; transition:border-color var(--transition); }
.cp-invite-input:focus { border-color:var(--primary) !important; box-shadow:0 0 0 3px var(--primary-glow) !important; outline:none; }
.cp-invite-input::placeholder { color:var(--text-soft) !important; }

/* ── Empty state ─────────────────────────────────────────────────── */
.cp-empty { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg,14px); padding:40px; text-align:center; color:var(--text-soft) !important; }

/* ── Error pages ─────────────────────────────────────────────────── */
.error-page-themed { background:var(--bg-main) !important; min-height:100vh; display:flex; align-items:center; justify-content:center; font-family:var(--body-font,'Poppins',sans-serif); }
.error-page-themed h2, .error-page-themed .title { color:var(--text-main) !important; }
.error-page-themed p, .error-page-themed .description { color:var(--text-soft) !important; }
.error-page-themed .cmn-btn { background:var(--primary) !important; color:var(--text-on-primary,#000) !important; border-radius:var(--radius-md,10px) !important; }

/* Warning ghost button variant */
.cp-btn-ghost--warning {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.4);
  color: #fbbf24 !important;
  padding: 10px 24px;
  border-radius: var(--radius-md, 10px);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
}
.cp-btn-ghost--warning:hover {
  background: rgba(251,191,36,0.15);
  border-color: rgba(251,191,36,0.6);
  color: #fbbf24 !important;
}

/* Trader chart legend dot - primary color */
.cp-chart-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; }
.cp-chart-dot--balance { background: #608ffa; }
.cp-chart-dot--equity  { background: var(--primary); }

/* ── Brand section shape-one — remove hardcoded magenta gradient ── */
.brand-section .shape-one {
  background: radial-gradient(ellipse at center,
    rgba(var(--primary-rgb, 240,185,11), 0.08) 0%,
    transparent 70%) !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}