/* ================================================================
   Crypto Dashboard — Styles
   Auteur : Frédéric Mendes | liloweb.com
   ================================================================ */

/* ── Variables : thème sombre (défaut) ── */
.crdash-wrap {
    --crdash-bg:          #0d0d14;
    --crdash-surface:     #12121e;
    --crdash-border:      #1e1e32;
    --crdash-text:        #c8c8e0;
    --crdash-muted:       #6a6a8a;
    --crdash-title:       #e8e8f8;
    --crdash-accent:      #00d4b4;
    --crdash-accent-glow: rgba(0, 212, 180, 0.18);
    --crdash-radius:      12px;
    --crdash-font-mono:   "Roboto Mono", "Courier New", monospace;
    --crdash-font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --crdash-gap:         20px;
    --crdash-ticker-h:    46px;
    background: var(--crdash-bg);
    color:      var(--crdash-text);
    font-family: var(--crdash-font-sans);
    border-radius: var(--crdash-radius);
    padding: 0 0 24px;
    overflow: hidden;
}

/* ── Thème clair ── */
.crdash-theme-light {
    --crdash-bg:          #f5f6fa;
    --crdash-surface:     #ffffff;
    --crdash-border:      #e0e0ef;
    --crdash-text:        #2a2a3a;
    --crdash-muted:       #7a7a9a;
    --crdash-title:       #12121e;
    --crdash-accent:      #006e5e;
    --crdash-accent-glow: rgba(0, 110, 94, 0.10);
}

/* ── Ticker tape ── */
.crdash-ticker {
    background: var(--crdash-surface);
    border-bottom: 1px solid var(--crdash-border);
    height: var(--crdash-ticker-h);
    overflow: hidden;
}

.crdash-ticker .tradingview-widget-container,
.crdash-ticker .tradingview-widget-container__widget {
    height: var(--crdash-ticker-h) !important;
}

/* ── Grille ── */
.crdash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--crdash-gap);
    padding: var(--crdash-gap);
}

.crdash-cols-2 .crdash-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Cartes pleine largeur forcées ── */
.crdash-card--full {
    grid-column: 1 / -1;
}

/* ── Carte ── */
.crdash-card {
    background:    var(--crdash-surface);
    border:        1px solid var(--crdash-border);
    border-radius: var(--crdash-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    border-color 0.25s ease, box-shadow 0.25s ease;
}

.crdash-card:hover {
    border-color: var(--crdash-accent);
    box-shadow:   0 0 0 1px var(--crdash-accent-glow),
                  0 4px 24px rgba(0,0,0,0.3);
}

/* ── Titre de carte ── */
.crdash-card__title {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      0;
    padding:     14px 18px;
    font-size:   0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:       var(--crdash-title);
    border-bottom: 1px solid var(--crdash-border);
    background:  rgba(0,0,0,0.12);
}

.crdash-theme-light .crdash-card__title {
    background: rgba(0,0,0,0.03);
}

.crdash-card__link {
    margin-left: auto;
    font-size:   0.75rem;
    color:       var(--crdash-accent);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.crdash-card__link:hover { opacity: 1; }

/* ── Dot indicateurs ── */
.crdash-dot {
    display: inline-block;
    width:  8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}
.crdash-dot--green  { background: #2e7d32; color: #4caf50; }
.crdash-dot--blue   { background: #0091c2; color: #29b6f6; }
.crdash-dot--orange { background: #e65100; color: #ff9800; }
.crdash-dot--purple { background: #6a1b9a; color: #ce93d8; }
.crdash-dot--teal   { background: #00695c; color: #00d4b4; }

/* ── Corps de carte ── */
.crdash-card__body {
    flex:    1;
    padding: 16px;
}

.crdash-card__body--iframe {
    padding: 0;
    overflow: hidden;
}

.crdash-card__body--iframe iframe {
    display: block;
    width:   100%;
    border:  none;
}

/* ── Fear & Greed ── */
.crdash-fng-body {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    padding:        24px 16px;
}

.crdash-gauge-wrap {
    position:   relative;
    text-align: center;
}

.crdash-gauge-wrap canvas {
    display: block;
    margin:  0 auto;
    max-width: 100%;
}

.crdash-gauge-value {
    margin-top: 8px;
    text-align: center;
}

#crdash-fng-value {
    display:     block;
    font-family: var(--crdash-font-mono);
    font-size:   3rem;
    font-weight: 700;
    line-height: 1;
    color:       var(--crdash-accent);
    text-shadow: 0 0 20px var(--crdash-accent-glow);
}

#crdash-fng-label {
    display:   block;
    font-size: 0.8rem;
    color:     var(--crdash-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.crdash-fng-meta {
    text-align: center;
    width: 100%;
}

.crdash-fng-source {
    font-size: 0.72rem;
    color:     var(--crdash-muted);
    margin:    0 0 12px;
}

.crdash-fng-source a {
    color:           var(--crdash-accent);
    text-decoration: none;
}

.crdash-fng-scale {
    display:         flex;
    justify-content: space-between;
    font-size:       0.65rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    padding:         0 4px;
    gap:             4px;
    flex-wrap:       wrap;
}

/* ── Footer ── */
.crdash-footer {
    text-align: center;
    font-size:  0.7rem;
    color:      var(--crdash-muted);
    padding:    0 20px;
    margin:     8px 0 0;
    line-height: 1.6;
}

.crdash-footer strong {
    color: #ff9800;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .crdash-cols-2 .crdash-grid {
        grid-template-columns: 1fr;
    }
    #crdash-fng-value {
        font-size: 2.2rem;
    }
    .crdash-fng-scale {
        justify-content: center;
    }
}