/* ==========================================================================
   Liquiplex RWA Coin List — coin-list.css
   CoinGecko-inspired table with light/dark theme support
   ========================================================================== */

/* ------------------------------------------------------------------
   CSS custom properties — light theme defaults
   ------------------------------------------------------------------ */
.lrcl-container {
    --lrcl-bg:          #ffffff;
    --lrcl-card-bg:     #f8f9fa;
    --lrcl-border:      #e2e8f0;
    --lrcl-text:        #1a202c;
    --lrcl-text-muted:  #718096;
    --lrcl-text-faint:  #a0aec0;
    --lrcl-accent:      #0077b6;
    --lrcl-accent-text: #ffffff;
    --lrcl-row-hover:   #f7fafc;
    --lrcl-th-bg:       #f1f5f9;
    --lrcl-up:          #16a34a;
    --lrcl-down:        #dc2626;
    --lrcl-spinner-fg:  #0077b6;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--lrcl-text);
    background: var(--lrcl-bg);
    max-width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Dark theme — JS-controlled .lrcl-dark class (primary)
   Applied by coin-list.js when it detects dark mode from DOM signals.
   CSS-only body-class selectors below serve as a no-JS fallback.
   NOTE: prefers-color-scheme is intentionally omitted — the site theme
   toggle is the authority; OS preference is not used to avoid conflict.
   ------------------------------------------------------------------ */
.lrcl-container.lrcl-dark,
/* Dark theme — WordPress theme body classes (CSS-only fallback) */
body.dark .lrcl-container,
body.dark-mode .lrcl-container,
body.night-mode .lrcl-container,
body.is-dark .lrcl-container,
body[data-theme="dark"] .lrcl-container,
body[data-bs-theme="dark"] .lrcl-container,
html[data-theme="dark"] .lrcl-container,
html[data-bs-theme="dark"] .lrcl-container,
[data-theme="dark"] .lrcl-container,
.is-dark-theme .lrcl-container,
.color-scheme-dark .lrcl-container,
.theme-dark .lrcl-container {
    --lrcl-bg:          #0f0f1a;
    --lrcl-card-bg:     #1a1a2e;
    --lrcl-border:      #2d2d44;
    --lrcl-text:        #e2e8f0;
    --lrcl-text-muted:  #94a3b8;
    --lrcl-text-faint:  #64748b;
    --lrcl-accent:      #38bdf8;
    --lrcl-accent-text: #0f0f1a;
    --lrcl-row-hover:   #1e1e30;
    --lrcl-th-bg:       #1a1a2e;
    --lrcl-spinner-fg:  #38bdf8;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.lrcl-header {
    margin-bottom: 24px;
}

.lrcl-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--lrcl-text);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.lrcl-desc {
    font-size: 14px;
    color: var(--lrcl-text-muted);
    margin: 0;
    line-height: 1.7;
    max-width: 800px;
}

/* ------------------------------------------------------------------
   Stats bar
   ------------------------------------------------------------------ */
.lrcl-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--lrcl-card-bg);
    border: 1px solid var(--lrcl-border);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.lrcl-stat {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px;
    border-right: 1px solid var(--lrcl-border);
}

.lrcl-stat:last-child {
    border-right: none;
}

.lrcl-stat__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--lrcl-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lrcl-stat__value {
    font-size: 17px;
    font-weight: 700;
    color: var(--lrcl-text);
    line-height: 1.2;
}

.lrcl-stat__change {
    font-size: 12px;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Controls: search + filter tabs
   ------------------------------------------------------------------ */
.lrcl-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.lrcl-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--lrcl-card-bg);
    border: 1px solid var(--lrcl-border);
    border-radius: 8px;
    padding: 9px 14px;
    flex: 0 0 220px;
    transition: border-color 0.2s;
}

.lrcl-search-wrap:focus-within {
    border-color: var(--lrcl-accent);
}

.lrcl-search-icon {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.lrcl-search {
    border: none;
    outline: none;
    background: transparent;
    color: var(--lrcl-text);
    font-size: 14px;
    width: 100%;
}

.lrcl-search::placeholder {
    color: var(--lrcl-text-faint);
}

.lrcl-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lrcl-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--lrcl-border);
    border-radius: 20px;
    background: var(--lrcl-card-bg);
    color: var(--lrcl-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lrcl-filter-btn:hover {
    border-color: var(--lrcl-accent);
    color: var(--lrcl-accent);
}

.lrcl-filter-btn.active {
    background: var(--lrcl-accent);
    border-color: var(--lrcl-accent);
    color: var(--lrcl-accent-text);
}

/* ------------------------------------------------------------------
   Loading spinner
   ------------------------------------------------------------------ */
.lrcl-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--lrcl-text-muted);
    font-size: 14px;
}

.lrcl-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--lrcl-border);
    border-top-color: var(--lrcl-spinner-fg);
    border-radius: 50%;
    animation: lrcl-spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes lrcl-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   Table wrapper + table
   ------------------------------------------------------------------ */
.lrcl-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lrcl-border);
    border-radius: 10px;
    background: var(--lrcl-bg);
}

.lrcl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Header row */
.lrcl-th {
    padding: 12px 16px;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: var(--lrcl-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--lrcl-th-bg);
    border-bottom: 1px solid var(--lrcl-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.lrcl-th--rank {
    text-align: center;
    width: 44px;
}

.lrcl-th--coin {
    text-align: left;
    min-width: 180px;
}

.lrcl-th--num {
    min-width: 90px;
}

.lrcl-th--spark {
    text-align: center;
    min-width: 110px;
}

/* Sortable header */
.lrcl-th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.lrcl-th[data-sort]:hover {
    color: var(--lrcl-accent);
}

.lrcl-th.sort-asc  .lrcl-sort-icon::after { content: ' ↑'; }
.lrcl-th.sort-desc .lrcl-sort-icon::after { content: ' ↓'; }

/* Body cells */
.lrcl-td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lrcl-border);
    text-align: right;
    vertical-align: middle;
    color: var(--lrcl-text);
    white-space: nowrap;
}

.lrcl-td--rank {
    text-align: center;
    color: var(--lrcl-text-faint);
    font-size: 13px;
}

.lrcl-td--coin {
    text-align: left;
}

.lrcl-td--num {
    font-variant-numeric: tabular-nums;
}

.lrcl-td--spark {
    text-align: center;
    padding: 8px 16px;
}

.lrcl-row:last-child .lrcl-td {
    border-bottom: none;
}

.lrcl-row:hover .lrcl-td {
    background: var(--lrcl-row-hover);
}

/* ------------------------------------------------------------------
   Coin cell: logo + name + symbol
   ------------------------------------------------------------------ */
.lrcl-coin-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lrcl-coin-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.lrcl-coin-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.lrcl-coin-name {
    font-weight: 600;
    color: var(--lrcl-text);
    font-size: 14px;
    line-height: 1.3;
}

.lrcl-coin-symbol {
    font-size: 11px;
    color: var(--lrcl-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
   Up / Down colours
   ------------------------------------------------------------------ */
.lrcl-up   { color: var(--lrcl-up)   !important; }
.lrcl-down { color: var(--lrcl-down) !important; }

/* ------------------------------------------------------------------
   Sparkline SVG
   ------------------------------------------------------------------ */
.lrcl-spark-svg {
    display: block;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
   No results / error
   ------------------------------------------------------------------ */
.lrcl-no-results,
.lrcl-error {
    padding: 24px;
    text-align: center;
    color: var(--lrcl-text-muted);
    font-size: 14px;
}

.lrcl-error {
    color: var(--lrcl-down);
}

/* ------------------------------------------------------------------
   Responsive — hide less critical columns on smaller screens
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .lrcl-col-1h,
    .lrcl-th.lrcl-col-1h { display: none; }
}

@media (max-width: 860px) {
    .lrcl-col-7d,
    .lrcl-th.lrcl-col-7d,
    .lrcl-col-vol,
    .lrcl-th.lrcl-col-vol { display: none; }
}

@media (max-width: 640px) {
    .lrcl-col-mcap,
    .lrcl-th.lrcl-col-mcap,
    .lrcl-col-spark,
    .lrcl-th.lrcl-col-spark { display: none; }

    .lrcl-title { font-size: 18px; }

    .lrcl-search-wrap { flex: 0 0 100%; }

    .lrcl-stat { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--lrcl-border); }
    .lrcl-stat:last-child { border-bottom: none; }
}