/**
 * CCL Dashboard modern system-theme foundation.
 *
 * Owns the account dashboard presentation while preserving module layouts.
 */

:root {
    color-scheme: light dark;
    --ccl-primary: #096b78;
    --ccl-primary-hover: #075966;
    --ccl-primary-light: rgba(9, 107, 120, 0.12);
    --ccl-success: #16805d;
    --ccl-success-light: rgba(22, 128, 93, 0.12);
    --ccl-danger: #c2413b;
    --ccl-surface: #ffffff;
    --ccl-surface-hover: #f5f8f7;
    --ccl-bg: #f1f5f4;
    --ccl-border: #d8e1df;
    --ccl-border-light: #e5ebe9;
    --ccl-border-dark: #c5d0cd;
    --ccl-text-main: #13201e;
    --ccl-text-body: #344744;
    --ccl-text-muted: #667774;
    --ccl-radius-sm: 8px;
    --ccl-radius-md: 12px;
    --ccl-radius-lg: 18px;
    --ccl-radius-xl: 22px;
    --ccl-shadow-liquid: 0 8px 24px rgba(20, 39, 35, 0.08);
    --ccl-shadow-float: 0 18px 48px rgba(20, 39, 35, 0.14);
    --ccl-transition: 180ms ease;
    --ccl-spring: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.woocommerce-account {
    background: #eef3f1 !important;
    color: var(--ccl-text-main);
}

.ccl-dashboard-bg {
    background:
        linear-gradient(180deg, #eef3f1 0%, #f7f9f8 44%, #eef3f1 100%);
    animation: none;
}

.woocommerce-MyAccount-navigation,
.ccl-dashboard-sidebar,
.woocommerce-MyAccount-content,
.ccl-kpi-box,
.ccl-card,
.ccl-table-container,
.ccl-perf-card,
.ccl-health-card,
.ccl-plugin-card,
.ccl-app-card,
.ccl-cron-card,
.ccl-asset-card,
.ccl-modal-content,
.ccl-modal-box,
.ccl-confirm-box {
    border: 1px solid var(--ccl-border) !important;
    background: var(--ccl-surface) !important;
    box-shadow: var(--ccl-shadow-liquid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    box-sizing: border-box;
}

.woocommerce-MyAccount-navigation,
.ccl-dashboard-sidebar {
    position: sticky;
    top: 20px;
    border-radius: var(--ccl-radius-lg) !important;
    padding: 10px !important;
}

.woocommerce-MyAccount-content {
    min-width: 0;
    padding: clamp(18px, 3vw, 34px) !important;
    border-radius: var(--ccl-radius-lg) !important;
    opacity: 1;
    transform: none;
    animation: ccl-dashboard-enter 340ms ease-out both;
}

body.woocommerce-account .ccl-dashboard-sidebar .ccl-menu-icon,
body.woocommerce-account .ccl-dashboard-sidebar .ccl-nav-item a i {
    color: var(--ccl-primary) !important;
    filter: none !important;
    text-shadow: none !important;
}

.ccl-nav-list {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
}

.ccl-nav-header {
    margin: 15px 10px 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ccl-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ccl-nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ccl-text-body) !important;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--ccl-transition), color var(--ccl-transition), transform var(--ccl-transition);
}

.ccl-nav-item a:hover,
.ccl-nav-item.is-active a,
.ccl-nav-item.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    border-color: var(--ccl-border);
    background: var(--ccl-bg);
    color: var(--ccl-primary) !important;
    transform: translateX(2px);
}

.ccl-kpi-box,
.ccl-card,
.ccl-table-container {
    border-radius: var(--ccl-radius-md) !important;
    transition: border-color var(--ccl-transition), box-shadow var(--ccl-transition), transform var(--ccl-transition);
}

.ccl-row-hover:hover,
.ccl-kpi-box:hover {
    border-color: #abc2bd !important;
    box-shadow: 0 12px 30px rgba(20, 39, 35, 0.12) !important;
    transform: translateY(-2px);
}

.ccl-btn,
.ccl-search-btn,
.woocommerce-account .button {
    min-height: 42px;
    border: 1px solid var(--ccl-border) !important;
    border-radius: 10px !important;
    background: var(--ccl-surface) !important;
    color: var(--ccl-text-main) !important;
    box-shadow: none !important;
    font-weight: 750;
    text-transform: none;
    letter-spacing: 0;
    transition: background var(--ccl-transition), border-color var(--ccl-transition), color var(--ccl-transition), transform var(--ccl-transition);
}

.ccl-btn:hover,
.ccl-search-btn:hover,
.woocommerce-account .button:hover {
    border-color: #9bb8b2 !important;
    background: var(--ccl-surface-hover) !important;
    transform: translateY(-1px);
}

.ccl-btn-primary,
.woocommerce-account .button.alt {
    border-color: var(--ccl-primary) !important;
    background: var(--ccl-primary) !important;
    color: #ffffff !important;
}

.ccl-btn-primary:hover,
.woocommerce-account .button.alt:hover {
    background: var(--ccl-primary-hover) !important;
}

.ccl-glass-input,
.ccl-glass-textarea,
.ccl-glass-select,
.ccl-search-input,
.woocommerce-MyAccount-content input,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    border: 1px solid var(--ccl-border-dark) !important;
    border-radius: 10px !important;
    background: var(--ccl-surface) !important;
    color: var(--ccl-text-main) !important;
    box-shadow: none !important;
}

.ccl-glass-input:focus,
.ccl-glass-textarea:focus,
.ccl-glass-select:focus,
.ccl-search-input:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-color: var(--ccl-primary) !important;
    outline: 3px solid var(--ccl-primary-light) !important;
    outline-offset: 1px;
}

.ccl-modern-tab {
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.ccl-modern-tab.ccl-tab-inactive {
    border-color: var(--ccl-border) !important;
    background: var(--ccl-surface) !important;
    color: var(--ccl-text-muted) !important;
}

.ccl-modern-tab.ccl-tab-active {
    border-color: rgba(9, 107, 120, 0.32) !important;
    background: var(--ccl-primary-light) !important;
    color: var(--ccl-primary) !important;
    transform: none;
}

.ccl-overlay,
.ccl-glass-modal-overlay {
    background: rgba(15, 28, 25, 0.58) !important;
    backdrop-filter: none !important;
}

.ccl-toast {
    border: 1px solid var(--ccl-border);
    border-left: 4px solid var(--ccl-primary);
    border-radius: 12px;
    background: var(--ccl-surface);
    color: var(--ccl-text-main);
    box-shadow: var(--ccl-shadow-float);
    backdrop-filter: none;
}

table.shop_table,
.ccl-rt-table {
    background: var(--ccl-surface) !important;
}

table.shop_table thead th,
.ccl-rt-table th {
    background: var(--ccl-bg) !important;
}

@keyframes ccl-dashboard-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --ccl-primary: #73bdc4;
        --ccl-primary-hover: #91d0d5;
        --ccl-primary-light: rgba(115, 189, 196, 0.14);
        --ccl-success: #72c6a5;
        --ccl-success-light: rgba(114, 198, 165, 0.14);
        --ccl-danger: #f08b83;
        --ccl-surface: #151d1b;
        --ccl-surface-hover: #1b2724;
        --ccl-bg: #101715;
        --ccl-border: #2c3b37;
        --ccl-border-light: #26332f;
        --ccl-border-dark: #3a4b47;
        --ccl-text-main: #eef4f2;
        --ccl-text-body: #c4cfcc;
        --ccl-text-muted: #93a39f;
        --ccl-shadow-liquid: 0 8px 24px rgba(0, 0, 0, 0.24);
        --ccl-shadow-float: 0 18px 48px rgba(0, 0, 0, 0.34);
    }

    body.woocommerce-account,
    .ccl-dashboard-bg {
        background: #0d1311 !important;
    }

    .ccl-nav-item a:hover,
    .ccl-nav-item.is-active a {
        border-color: #344943;
    }
}

@media (max-width: 900px) {
    .woocommerce-MyAccount-navigation,
    .ccl-dashboard-sidebar {
        position: static;
        float: none !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        overflow-x: auto;
    }

    .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .ccl-nav-list {
        display: flex;
        gap: 6px;
        width: max-content;
        min-width: 100%;
    }

    .ccl-nav-header {
        display: none;
    }

    .ccl-nav-item a {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .woocommerce-MyAccount-content {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .ccl-grid-3,
    .ccl-perf-grid,
    .ccl-app-grid,
    .ccl-cron-grid,
    .ccl-asset-grid {
        grid-template-columns: 1fr !important;
    }

    .ccl-modal-content,
    .ccl-modal-box {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}