﻿/* ========================= */
/*   CUSTOM COMPONENT STYLES */
/* ========================= */

.coinsoul-theme {
    --cs-bg: #080d15;
    --cs-surface: rgba(20, 27, 39, .95);
    --cs-card: rgba(20, 27, 39, .85);
    --cs-border: rgba(99, 102, 241, .2);
    --cs-text: #ffffff;
    --cs-muted: #cbd5e1;
    --cs-blue: #3b82f6;
    --cs-green: #10b981;
    --cs-red: #ef4444;
    --cs-orange: #f59e0b;
    --cs-purple: #6366f1;
}

/* PAGE CONTAINER */
.coinsoul-theme .cs-page {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
    min-height: calc(100vh - 64px);
}

/* TITLES */
.coinsoul-theme .cs-title {
    font-weight: 900;
    letter-spacing: -.03em;
}

.coinsoul-theme .cs-subtitle {
    font-size: 13px;
}

/* SECTION TITLE */
.coinsoul-theme .cs-section-title {
    color: var(--cs-text);
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 14px;
}

/* CUSTOM CARDS */
.coinsoul-theme .cs-card {
    border: 1px solid var(--cs-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
    transition: all 0.3s ease;
}

/* KPI METRICS */
.coinsoul-theme .cs-kpi-label {
    color: var(--cs-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.coinsoul-theme .cs-kpi-value {
    font-size: 26px;
    font-weight: 900;
    color: var(--cs-text);
    line-height: 1.1;
}

/* COLOR UTILITIES */
.coinsoul-theme .cs-green {
    color: var(--cs-green) !important;
    font-weight: 900;
}

.coinsoul-theme .cs-red {
    color: var(--cs-red) !important;
    font-weight: 900;
}

.coinsoul-theme .cs-orange {
    color: var(--cs-orange) !important;
    font-weight: 900;
}

.coinsoul-theme .cs-blue {
    color: var(--cs-blue) !important;
    font-weight: 900;
}

.coinsoul-theme .cs-muted {
    color: var(--cs-muted) !important;
}

/* TOOLBAR */
.coinsoul-theme .cs-toolbar {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 18px;
    padding: 16px;
}

/* TABLE WRAPPER */
.coinsoul-theme .cs-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
}

/* POSITION CARD */
.coinsoul-theme .cs-position-card {
    background: linear-gradient(180deg, rgba(20,27,39,.95), rgba(8,13,21,.92)) !important;
    border-radius: 18px !important;
    border-left: 5px solid var(--cs-orange) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.4);
    color: var(--cs-text) !important;
}

/* MOBILE CARD */
.coinsoul-theme .cs-mobile-card {
    display: none;
}

/* ========================= */
/*       RESPONSIVE          */
/* ========================= */

@media (max-width: 960px) {
    .coinsoul-theme .cs-page {
        padding: 14px;
    }

    .coinsoul-theme .cs-title {
        font-size: 26px !important;
    }

    .coinsoul-theme .cs-kpi-value {
        font-size: 22px;
    }

    .coinsoul-theme .cs-mobile-card {
        display: block;
    }

    .coinsoul-theme .cs-position-card {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .coinsoul-theme .cs-page {
        padding: 10px;
    }

    .coinsoul-theme .cs-toolbar {
        padding: 12px;
    }

    .coinsoul-theme .cs-card {
        border-radius: 14px !important;
    }

    .coinsoul-theme .cs-kpi-value {
        font-size: 20px;
    }

    .coinsoul-theme .cs-title {
        font-size: 23px !important;
        line-height: 1.15 !important;
    }

    .coinsoul-theme .cs-subtitle {
        font-size: 12px !important;
    }
}
