/* ═══════════════════════════════════════════════════════════════
   AtlasBase Frontend Design System v1.0.0
   Shared by: AtlasWatch · AtlasMarket · AtlasCalc · AtlasCode
   
   DO NOT edit component CSS directly — edit this file instead.
   Import this before any plugin-specific CSS.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES — Single source of truth
   All colors, spacing, typography, shadows
───────────────────────────────────────────────────────────────*/
:root {

    /* ── Core Colors ── */
    --ab-dark:          #1f2024;   /* Main dark bg, text */
    --ab-dark2:         #343a40;   /* Card headers, secondary dark */
    --ab-dark3:         #2a2d32;   /* Hover on dark */

    /* ── Brand Blues ── */
    --ab-blue:          #1a3a5c;   /* Primary — buttons, active, accents */
    --ab-blue-hover:    #0f2744;   /* Button hover */
    --ab-blue-light:    #e8f0f8;   /* Light blue bg for highlights */

    /* ── Backgrounds ── */
    --ab-bg:            #f2f2f2;   /* Page/widget background */
    --ab-white:         #ffffff;   /* Cards, chart bg, inputs */
    --ab-bg-row-hover:  #f8f8f8;   /* Table row hover */
    --ab-bg-row-active: #f0f4f8;   /* Selected row */

    /* ── Borders ── */
    --ab-border:        #b5b7bf;   /* Main border */
    --ab-border-light:  #e0e0e0;   /* Light border, dividers */
    --ab-border-faint:  #f2f2f2;   /* Very subtle dividers */

    /* ── Text Colors ── */
    --ab-text:          #1f2024;   /* Primary text */
    --ab-text-muted:    #5e5e69;   /* Secondary labels */
    --ab-text-faint:    #a0a1ad;   /* Fine print, placeholders */
    --ab-text-ultra:    #c0c0c8;   /* Ultra muted, attribution */

    /* ── Semantic Colors ── */
    --ab-green:         #166534;   /* Positive / up text */
    --ab-green-bg:      #f0fdf4;   /* Positive background */
    --ab-green-bright:  #4ade80;   /* Bright green (on dark bg) */

    --ab-red:           #991b1b;   /* Negative / down text */
    --ab-red-bg:        #fef2f2;   /* Negative background */
    --ab-red-bright:    #f87171;   /* Bright red (on dark bg) */

    --ab-amber:         #d97706;   /* Warning, crypto accent */
    --ab-amber-bg:      #fffbeb;   /* Warning background */

    /* ── Typography ── */
    --ab-font:          Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    --ab-font-mono:     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

    --ab-text-xs:       9px;
    --ab-text-sm:       11px;
    --ab-text-base:     13px;
    --ab-text-md:       15px;
    --ab-text-lg:       18px;
    --ab-text-xl:       24px;
    --ab-text-2xl:      32px;
    --ab-text-3xl:      40px;

    --ab-weight-normal: 400;
    --ab-weight-medium: 500;
    --ab-weight-semi:   600;
    --ab-weight-bold:   700;

    --ab-tracking-tight:  -0.02em;
    --ab-tracking-normal:  0;
    --ab-tracking-wide:    0.05em;
    --ab-tracking-wider:   0.08em;
    --ab-tracking-widest:  0.12em;

    /* ── Spacing ── */
    --ab-space-1:  4px;
    --ab-space-2:  8px;
    --ab-space-3:  12px;
    --ab-space-4:  16px;
    --ab-space-5:  20px;
    --ab-space-6:  24px;
    --ab-space-8:  32px;

    /* ── Component Sizes ── */
    --ab-btn-height:     36px;
    --ab-btn-height-sm:  28px;
    --ab-btn-height-xs:  22px;
    --ab-input-height:   34px;
    --ab-panel-hd:       36px;    /* Panel header height */
    --ab-row-height:     40px;    /* Table row height */

    /* ── No border-radius — sharp edges everywhere ── */
    --ab-radius: 0;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────────────────────────────*/
.ab-text-xs     { font-size: var(--ab-text-xs); }
.ab-text-sm     { font-size: var(--ab-text-sm); }
.ab-text-base   { font-size: var(--ab-text-base); }
.ab-text-md     { font-size: var(--ab-text-md); }
.ab-text-lg     { font-size: var(--ab-text-lg); }
.ab-text-bold   { font-weight: var(--ab-weight-bold); }
.ab-text-semi   { font-weight: var(--ab-weight-semi); }
.ab-text-muted  { color: var(--ab-text-muted); }
.ab-text-faint  { color: var(--ab-text-faint); }
.ab-text-up     { color: var(--ab-green); }
.ab-text-dn     { color: var(--ab-red); }
.ab-text-white  { color: #fff; }
.ab-mono        { font-family: var(--ab-font-mono); }
.ab-uppercase   { text-transform: uppercase; letter-spacing: var(--ab-tracking-wider); }

/* ─────────────────────────────────────────────────────────────
   COLOR UTILITIES
───────────────────────────────────────────────────────────────*/
.ab-bg-dark    { background: var(--ab-dark); }
.ab-bg-dark2   { background: var(--ab-dark2); }
.ab-bg-blue    { background: var(--ab-blue); }
.ab-bg-white   { background: var(--ab-white); }
.ab-bg-light   { background: var(--ab-bg); }
.ab-border     { border: 1px solid var(--ab-border); }
.ab-border-lt  { border: 1px solid var(--ab-border-light); }

/* ─────────────────────────────────────────────────────────────
   CHANGE BADGES — price up/down indicators
───────────────────────────────────────────────────────────────*/
.ab-badge {
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    padding: 2px 5px;
    display: inline-block;
    white-space: nowrap;
    letter-spacing: var(--ab-tracking-wide);
}
.ab-badge--up { background: var(--ab-green-bg);  color: var(--ab-green); }
.ab-badge--dn { background: var(--ab-red-bg);    color: var(--ab-red); }
.ab-badge--na { background: transparent;          color: var(--ab-text-faint); }

/* Dark background variants (for headers/ribbons) */
.ab-badge--up-dark { color: var(--ab-green-bright); }
.ab-badge--dn-dark { color: var(--ab-red-bright); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────────*/

/* Primary — steel blue filled */
.ab-btn,
.ab-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ab-btn-height);
    padding: 0 var(--ab-space-4);
    background: var(--ab-blue);
    color: #fff !important;
    border: none;
    font-family: var(--ab-font);
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wider);
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ab-btn:hover,
.ab-btn-primary:hover { background: var(--ab-blue-hover); }

/* Ghost — outlined */
.ab-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ab-btn-height);
    padding: 0 var(--ab-space-4);
    background: transparent;
    color: var(--ab-blue) !important;
    border: 1px solid var(--ab-blue);
    font-family: var(--ab-font);
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wider);
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.ab-btn-ghost:hover { background: var(--ab-blue); color: #fff !important; }

/* Small variant */
.ab-btn-sm { height: var(--ab-btn-height-sm); padding: 0 var(--ab-space-3); font-size: 9px; }

/* Dark bg ghost (for inside dark headers) */
.ab-btn-dark {
    background: transparent;
    color: var(--ab-text-faint) !important;
    border: 1px solid rgba(255,255,255,0.15);
    height: var(--ab-btn-height);
    padding: 0 var(--ab-space-4);
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--ab-font);
    white-space: nowrap;
    transition: all 0.15s;
}
.ab-btn-dark:hover { color: #fff !important; border-color: rgba(255,255,255,0.4); }

/* Affiliate slot button — full-width steel blue bar */
.ab-aff-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ab-blue);
    color: #fff !important;
    padding: var(--ab-space-2) var(--ab-space-4);
    font-size: var(--ab-text-sm);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wide);
    text-decoration: none !important;
    width: 100%;
    height: var(--ab-row-height);
    transition: background 0.15s;
    flex-shrink: 0;
}
.ab-aff-btn:hover { background: var(--ab-blue-hover); color: #fff !important; }
.ab-aff-btn-arrow { font-size: 16px; font-weight: 400; opacity: 0.6; }

/* Dark banner button (AtlasWatch style — dark bg with steel CTA) */
.ab-banner-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ab-space-3);
    padding: var(--ab-space-2) var(--ab-space-3) var(--ab-space-2) 14px;
    background: var(--ab-dark);
    border-top: 1px solid var(--ab-dark2);
    text-decoration: none !important;
}
.ab-banner-btn:hover { background: var(--ab-dark2); }
.ab-banner-text {
    font-size: var(--ab-text-sm);
    color: var(--ab-text-faint);
    line-height: 1.4;
    flex: 1;
}
.ab-banner-text strong { color: #fff; font-weight: var(--ab-weight-semi); }
.ab-banner-cta {
    background: var(--ab-blue);
    color: #fff;
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-widest);
    text-transform: uppercase;
    padding: 5px var(--ab-space-2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   INPUTS
───────────────────────────────────────────────────────────────*/
.ab-input {
    height: var(--ab-input-height);
    padding: 0 var(--ab-space-3);
    background: var(--ab-white);
    border: 1px solid var(--ab-border);
    border-right: none;
    color: var(--ab-text);
    font-size: var(--ab-text-base);
    font-family: var(--ab-font);
    outline: none;
}
.ab-input:focus { border-color: var(--ab-blue); }
.ab-input::placeholder { color: var(--ab-text-faint); font-size: var(--ab-text-sm); }

/* Dark input (on dark backgrounds) */
.ab-input-dark {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-right: none;
    color: #fff;
    height: var(--ab-btn-height);
    padding: 0 var(--ab-space-3);
    font-size: var(--ab-text-base);
    font-family: var(--ab-font);
    outline: none;
}
.ab-input-dark:focus { border-color: var(--ab-blue); background: rgba(255,255,255,0.11); }
.ab-input-dark::placeholder { color: var(--ab-text-muted); }

/* ─────────────────────────────────────────────────────────────
   PANELS / CARDS
───────────────────────────────────────────────────────────────*/
.ab-panel {
    background: var(--ab-white);
    border: 1px solid var(--ab-border-light);
    display: flex;
    flex-direction: column;
}
.ab-panel-hd {
    background: var(--ab-dark2);
    color: #fff;
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-widest);
    text-transform: uppercase;
    padding: 0 var(--ab-space-4);
    height: var(--ab-panel-hd);
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--ab-blue);
    flex-shrink: 0;
}
.ab-panel-body { padding: var(--ab-space-4); flex: 1; }
.ab-panel-body--flush { padding: 0; }

/* ─────────────────────────────────────────────────────────────
   TABLE / STAT ROWS
───────────────────────────────────────────────────────────────*/
.ab-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ab-space-2) var(--ab-space-4);
    border-bottom: 1px solid var(--ab-border-light);
    font-size: var(--ab-text-base);
    min-height: var(--ab-row-height);
}
.ab-stat-row:last-child { border-bottom: none; }
.ab-stat-label { color: var(--ab-text-muted); font-weight: var(--ab-weight-medium); }
.ab-stat-value { font-weight: var(--ab-weight-semi); color: var(--ab-text); }
.ab-stat-value--up { color: var(--ab-green); }
.ab-stat-value--dn { color: var(--ab-red); }

/* Stats grid (4-col) */
.ab-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--ab-border-light);
    border: 1px solid var(--ab-border-light);
}
.ab-stat-cell {
    background: var(--ab-white);
    padding: var(--ab-space-3) var(--ab-space-4);
}
.ab-stat-cell-label {
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wider);
    text-transform: uppercase;
    color: var(--ab-text-faint);
    margin-bottom: var(--ab-space-1);
}
.ab-stat-cell-value {
    font-size: var(--ab-text-md);
    font-weight: var(--ab-weight-semi);
    color: var(--ab-text);
}

/* ─────────────────────────────────────────────────────────────
   SPONSOR / AD BAR
───────────────────────────────────────────────────────────────*/
.ab-sponsor-bar {
    background: var(--ab-white);
    border-bottom: 1px solid var(--ab-border-light);
    display: flex;
    align-items: stretch;
}
.ab-sponsor-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8px;
    font-weight: var(--ab-weight-medium);
    color: var(--ab-text-ultra);
    letter-spacing: var(--ab-tracking-wide);
    text-transform: uppercase;
    padding: var(--ab-space-1) 3px;
    flex-shrink: 0;
}
.ab-sponsor-inner {
    display: flex;
    align-items: center;
    gap: var(--ab-space-3);
    padding: var(--ab-space-2) var(--ab-space-3);
    flex: 1;
    text-decoration: none !important;
    color: var(--ab-text) !important;
}
.ab-sponsor-inner:hover { opacity: 0.85; }
.ab-sponsor-text { font-size: var(--ab-text-base); font-weight: var(--ab-weight-medium); flex: 1; }
.ab-sponsor-cta {
    background: var(--ab-blue);
    color: #fff;
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-widest);
    text-transform: uppercase;
    padding: 5px var(--ab-space-2);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   NEWS ITEMS
───────────────────────────────────────────────────────────────*/
.ab-news-item {
    display: block;
    padding: var(--ab-space-3) var(--ab-space-4);
    border-bottom: 1px solid var(--ab-border-light);
    text-decoration: none !important;
    transition: background 0.12s;
}
.ab-news-item:last-child { border-bottom: none; }
.ab-news-item:hover { background: var(--ab-bg-row-hover); }
.ab-news-headline {
    font-size: var(--ab-text-base);
    font-weight: var(--ab-weight-semi);
    color: var(--ab-text);
    line-height: 1.4;
    margin-bottom: var(--ab-space-1);
    transition: color 0.12s;
}
.ab-news-item:hover .ab-news-headline { color: var(--ab-blue); }
.ab-news-meta {
    font-size: var(--ab-text-xs);
    color: var(--ab-text-faint);
    display: flex;
    gap: var(--ab-space-2);
}

/* ─────────────────────────────────────────────────────────────
   PERFORMANCE BARS
───────────────────────────────────────────────────────────────*/
.ab-perf-row {
    padding: var(--ab-space-2) var(--ab-space-4);
    border-bottom: 1px solid var(--ab-border-light);
}
.ab-perf-row:last-child { border-bottom: none; }
.ab-perf-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--ab-text-base);
    margin-bottom: var(--ab-space-1);
}
.ab-perf-label-txt { color: var(--ab-text-muted); font-weight: var(--ab-weight-medium); }
.ab-perf-label-val { font-weight: var(--ab-weight-bold); }
.ab-perf-bar-bg { background: var(--ab-border-light); height: 5px; position: relative; }
.ab-perf-bar    { height: 5px; position: absolute; top: 0; }
.ab-perf-bar--up { background: var(--ab-green); left: 50%; }
.ab-perf-bar--dn { background: var(--ab-red); right: 50%; }
.ab-perf-center { position: absolute; left: 50%; top: -3px; width: 1px; height: 11px; background: var(--ab-border); }

/* ─────────────────────────────────────────────────────────────
   LOADING / SKELETON
───────────────────────────────────────────────────────────────*/
.ab-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ab-space-3);
    padding: 60px var(--ab-space-5);
    font-size: var(--ab-text-base);
    color: var(--ab-text-muted);
}
.ab-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ab-border);
    border-top-color: var(--ab-blue);
    border-radius: 50%;
    animation: ab-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }

@keyframes ab-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.ab-skeleton {
    background: linear-gradient(90deg, var(--ab-bg) 25%, #e8e8e8 50%, var(--ab-bg) 75%);
    background-size: 400px 100%;
    animation: ab-shimmer 1.4s ease infinite;
    display: inline-block;
}

/* ─────────────────────────────────────────────────────────────
   SCROLLBARS — thin, consistent
───────────────────────────────────────────────────────────────*/
.ab-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.ab-scroll::-webkit-scrollbar-track { background: var(--ab-bg); }
.ab-scroll::-webkit-scrollbar-thumb { background: var(--ab-border); }
.ab-scroll::-webkit-scrollbar-thumb:hover { background: var(--ab-text-muted); }

/* ─────────────────────────────────────────────────────────────
   LAYOUT UTILITIES
───────────────────────────────────────────────────────────────*/
.ab-flex         { display: flex; }
.ab-flex-col     { display: flex; flex-direction: column; }
.ab-flex-center  { display: flex; align-items: center; justify-content: center; }
.ab-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ab-gap-1 { gap: var(--ab-space-1); }
.ab-gap-2 { gap: var(--ab-space-2); }
.ab-gap-3 { gap: var(--ab-space-3); }
.ab-gap-4 { gap: var(--ab-space-4); }
.ab-mt-2 { margin-top: var(--ab-space-2); }
.ab-mt-4 { margin-top: var(--ab-space-4); }
.ab-mt-6 { margin-top: var(--ab-space-6); }
.ab-w-full { width: 100%; }
.ab-overflow-hidden { overflow: hidden; }
.ab-min-h-0 { min-height: 0; }

/* ─────────────────────────────────────────────────────────────
   CHART TABS — shared across AtlasWatch + AtlasMarket
───────────────────────────────────────────────────────────────*/
.ab-chart-tabs {
    display: flex;
    background: var(--ab-dark2);
    flex-shrink: 0;
}
.ab-chart-tab {
    padding: var(--ab-space-2) var(--ab-space-4);
    font-size: var(--ab-text-xs);
    font-weight: var(--ab-weight-bold);
    letter-spacing: var(--ab-tracking-wider);
    color: var(--ab-text-faint);
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--ab-font);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.ab-chart-tab:hover { color: #fff; }
.ab-chart-tab--active { color: #fff; background: var(--ab-blue); }

/* ─────────────────────────────────────────────────────────────
   FOOTER BAR — attribution line
───────────────────────────────────────────────────────────────*/
.ab-footer-bar {
    background: var(--ab-bg);
    border-top: 1px solid var(--ab-border-light);
    padding: 6px var(--ab-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ab-space-3);
    flex-shrink: 0;
}
.ab-footer-text {
    font-size: var(--ab-text-xs);
    color: var(--ab-text-ultra);
}
.ab-footer-text a { color: var(--ab-text-ultra); text-decoration: none; }
.ab-footer-text a:hover { color: var(--ab-blue); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────────────*/
/* Mobile — max-width 768px */
@media (max-width: 768px) {
    .ab-hide-mobile { display: none !important; }
    .ab-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Small mobile — max-width 480px */
@media (max-width: 480px) {
    .ab-hide-sm { display: none !important; }
}