/* ============================================================
   ClickRank Premium — CSS Override Layer
   Sits on top of Metronic style.bundle.css
   ============================================================ */

/* ────────────────────────────────────────────
   1. GLOBAL COLOR TOKEN OVERRIDES
   ──────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    /* Primary — Indigo */
    --bs-primary:            #6366F1;
    --bs-primary-rgb:        99, 102, 241;
    --bs-primary-active:     #4F46E5;
    --bs-primary-light:      rgba(99, 102, 241, 0.08);
    --bs-primary-inverse:    #FFFFFF;

    /* Success — Emerald */
    --bs-success:            #10B981;
    --bs-success-rgb:        16, 185, 129;
    --bs-success-active:     #059669;
    --bs-success-light:      rgba(16, 185, 129, 0.08);

    /* Danger — Red */
    --bs-danger:             #EF4444;
    --bs-danger-rgb:         239, 68, 68;
    --bs-danger-active:      #DC2626;
    --bs-danger-light:       rgba(239, 68, 68, 0.08);

    /* Warning — Amber */
    --bs-warning:            #F59E0B;
    --bs-warning-rgb:        245, 158, 11;
    --bs-warning-active:     #D97706;
    --bs-warning-light:      rgba(245, 158, 11, 0.08);

    /* Info — Sky Blue (distinct from primary for charts) */
    --bs-info:               #3B82F6 !important;
    --bs-info-rgb:           59, 130, 246 !important;
    --bs-info-light:         rgba(59, 130, 246, 0.08);

    /* Premium tokens */
    --cr-gradient-primary:   linear-gradient(135deg, #6366F1, #4F46E5);
    --cr-gradient-deep:      linear-gradient(135deg, #1E1B4B, #0F172A);
    --cr-gradient-banner:    linear-gradient(135deg, #1E1B4B, #312E81);
    --cr-shadow-primary:     0px 8px 24px rgba(99, 102, 241, 0.15);
    --cr-shadow-card:        0px 1px 3px rgba(0, 0, 0, 0.04), 0px 4px 12px rgba(0, 0, 0, 0.03);
    --cr-radius-card:        0.85rem;
    --cr-sidebar-bg:         #F8F9FB;
    --cr-surface-subtle:     #F1F5F9;
}

[data-bs-theme="dark"] {
    --bs-primary:            #818CF8;
    --bs-primary-rgb:        129, 140, 248;
    --bs-primary-active:     #6366F1;
    --bs-primary-light:      rgba(129, 140, 248, 0.12);

    --bs-success:            #34D399;
    --bs-success-light:      rgba(52, 211, 153, 0.12);
    --bs-danger:             #F87171;
    --bs-danger-light:       rgba(248, 113, 113, 0.12);
    --bs-warning:            #FBBF24;
    --bs-warning-light:      rgba(251, 191, 36, 0.12);

    --cr-sidebar-bg:         var(--bs-app-sidebar-base-bg-color, #1e1e2d);
    --cr-surface-subtle:     rgba(255, 255, 255, 0.05);
}


/* ────────────────────────────────────────────
   2. GLOBAL REFINEMENTS
   ──────────────────────────────────────────── */

/* Smoother cards */
.card {
    border-radius: var(--cr-radius-card) !important;
    border: none !important;
    box-shadow: var(--cr-shadow-card) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06), 0px 8px 24px rgba(0, 0, 0, 0.05) !important;
}

/* Primary button overrides */
.btn-primary {
    background-color: var(--bs-primary) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-primary-active) !important;
    background-image: none !important;
    box-shadow: 0px 4px 12px rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-1px);
}


/* ────────────────────────────────────────────
   3. SIDEBAR REFINEMENTS
   ──────────────────────────────────────────── */

/* Section header labels */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-heading {
    color: #94A3B8 !important;
    /* letter-spacing: 0.08em; */
    /* font-size: 0.7rem !important; */
}

/* Active menu item */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    border-radius: 0.65rem;
    position: relative;
}
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--bs-primary);
    border-radius: 0 4px 4px 0;
}
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active .menu-icon i,
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link.active .menu-title {
    color: var(--bs-primary) !important;
}

/* Sidebar hover */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu-link:not(.active):hover {
    background-color: var(--cr-surface-subtle) !important;
    border-radius: 0.65rem;
}

/* Premium badge overrides */
.badge-cr-hot {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: #6366F1 !important;
    font-weight: 600 !important;
    border: none !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.04em;
}
.badge-cr-new {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    font-weight: 600 !important;
    border: none !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.04em;
}
.badge-cr-issues {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Sidebar bottom CTA */
#kt_app_sidebar_footer .btn-primary {
    background: var(--cr-gradient-primary) !important;
    border-radius: 0.65rem !important;
}


/* ────────────────────────────────────────────
   4. HEADER REFINEMENTS
   ──────────────────────────────────────────── */

/* AI SEO Agent button */
.btn-cr-ai-agent {
    background: var(--cr-gradient-primary) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: var(--cr-shadow-primary) !important;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.btn-cr-ai-agent:hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA) !important;
    box-shadow: 0px 8px 28px rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-1px);
    color: #FFFFFF !important;
}
.btn-cr-ai-agent .pulse-ring {
    border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Header icon buttons */
.app-navbar .btn.bg-light {
    background-color: var(--cr-surface-subtle) !important;
    border-radius: 0.55rem !important;
    transition: all 0.15s ease;
}
.app-navbar .btn.bg-light:hover {
    background-color: var(--bs-primary-light) !important;
}
.app-navbar .btn.bg-light:hover i {
    color: var(--bs-primary) !important;
}


/* ────────────────────────────────────────────
   5. DASHBOARD METRIC CARDS
   ──────────────────────────────────────────── */

/* Total Clicks card (purple gradient → indigo gradient) */
.card-cr-clicks {
    background: var(--cr-gradient-primary) !important;
    box-shadow: var(--cr-shadow-primary) !important;
}

/* White metric cards — icon color tints */
.card-cr-impressions .symbol-label {
    background-color: var(--bs-primary-light) !important;
    border: none !important;
}
.card-cr-impressions .symbol-label i {
    color: var(--bs-primary) !important;
}

.card-cr-ctr .symbol-label {
    background-color: var(--bs-success-light) !important;
    border: none !important;
}
.card-cr-ctr .symbol-label i {
    color: var(--bs-success) !important;
}

.card-cr-position .symbol-label {
    background-color: var(--bs-warning-light) !important;
    border: none !important;
}
.card-cr-position .symbol-label i {
    color: var(--bs-warning) !important;
}


/* ────────────────────────────────────────────
   6. WEBSITE HEALTH CARD
   ──────────────────────────────────────────── */

.card-cr-health {
    background: var(--cr-gradient-deep) !important;
    box-shadow: 0px 8px 32px rgba(30, 27, 75, 0.3) !important;
}
.card-cr-health .card-label {
    color: #E2E8F0 !important;
}

/* Health stat boxes */
.card-cr-health .cr-stat-errors {
    border-color: rgba(239, 68, 68, 0.3) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 0.65rem !important;
    background: rgba(239, 68, 68, 0.06);
}
.card-cr-health .cr-stat-errors .fs-2 {
    color: #F87171 !important;
}
.card-cr-health .cr-stat-errors .text-gray-500 {
    color: #FDA4AF !important;
}

.card-cr-health .cr-stat-warnings {
    border-color: rgba(245, 158, 11, 0.3) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 0.65rem !important;
    background: rgba(245, 158, 11, 0.06);
}
.card-cr-health .cr-stat-warnings .fs-2 {
    color: #FBBF24 !important;
}
.card-cr-health .cr-stat-warnings .text-gray-500 {
    color: #FCD34D !important;
}

.card-cr-health .cr-stat-notices {
    border-color: rgba(99, 102, 241, 0.3) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 0.65rem !important;
    background: rgba(99, 102, 241, 0.06);
}
.card-cr-health .cr-stat-notices .fs-2 {
    color: #A5B4FC !important;
}
.card-cr-health .cr-stat-notices .text-gray-500 {
    color: #C7D2FE !important;
}

.card-cr-health .btn-primary {
    background: linear-gradient(135deg, #818CF8, #6366F1) !important;
    box-shadow: 0px 4px 16px rgba(99, 102, 241, 0.3) !important;
}


/* ────────────────────────────────────────────
   7. AFFILIATE BANNER
   ──────────────────────────────────────────── */

.card-cr-affiliate {
    background: var(--cr-gradient-banner) !important;
    box-shadow: 0px 8px 24px rgba(30, 27, 75, 0.2) !important;
}
.card-cr-affiliate .btn-danger {
    background: #FFFFFF !important;
    color: #1E1B4B !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.card-cr-affiliate .btn-danger:hover {
    background: #F1F5F9 !important;
    transform: translateY(-1px);
}


/* ────────────────────────────────────────────
   8. RECOMMENDATION TABS
   ──────────────────────────────────────────── */

.nav-link.active .badge-dark,
.nav-link.active .badge {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important;
}

.animateRecommshow {
    background-color: rgba(16, 185, 129, 0.06) !important;
}
.animateRecommshowRevert {
    background-color: rgba(99, 102, 241, 0.06) !important;
}
.animateRecommshowDissmiss {
    background-color: rgba(239, 68, 68, 0.06) !important;
}


/* ────────────────────────────────────────────
   9. SCROLLBAR REFINEMENTS
   ──────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}


/* ────────────────────────────────────────────
   10. GENERAL POLISH
   ──────────────────────────────────────────── */

/* Refined separator lines */
.separator {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Softer table hover */
.table-hover tbody tr:hover {
    background-color: var(--bs-primary-light) !important;
}

/* Loading bar accent */
.ldBar path.mainline {
    stroke: var(--bs-primary) !important;
}

/* Page loader */
.page-loader {
    background: var(--cr-gradient-deep) !important;
}


/* ────────────────────────────────────────────
   11. TRENDING BADGE ICONS
   ──────────────────────────────────────────── */


.trending-badge i,
.trending-badge .ki-outline {
    color: inherit !important;
}

.trending-up i,
.trending-up .ki-outline {
    color: rgb(34, 197, 94) !important;
}

.trending-down i,
.trending-down .ki-outline {
    color: rgb(239, 68, 68) !important;
}


/* ────────────────────────────────────────────
   11. GOOGLE ANALYTICS-STYLE PROGRESS BAR
   ──────────────────────────────────────────── */

/* Progress bar container — fixed at top of content area */
.cr-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cr-progress-bar.active {
    opacity: 1;
}

/* The animated bar itself */
.cr-progress-bar-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info, #3B82F6));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px var(--bs-primary), 0 0 5px var(--bs-primary);
    transition: width 0.4s ease;
}

/* Keyframe animation: creep from 0→30% fast, then slowly to 85% */
.cr-progress-bar.active .cr-progress-bar-inner {
    animation: cr-progress-creep 12s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes cr-progress-creep {
    0%   { width: 0%; }
    5%   { width: 15%; }
    15%  { width: 30%; }
    40%  { width: 50%; }
    70%  { width: 70%; }
    100% { width: 85%; }
}

/* Pulse effect on the leading edge */
.cr-progress-bar.active .cr-progress-bar-inner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    animation: cr-progress-pulse 2s ease-in-out infinite;
}

@keyframes cr-progress-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* Metric placeholder dash styling */
.cr-metric-value {
    min-width: 60px;
    display: inline-block;
}

/* ────────────────────────────────────────────
   12. SHIMMER LOADING PLACEHOLDERS
   ──────────────────────────────────────────── */

/* Full-width sparkline chart container — edge-to-edge with right fade */
.cr-sparkline-chart {
    overflow: hidden;
    border-radius: 0 0 0.625rem 0.625rem;
    border: none !important;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%);
}

/* Stat cards with sparklines — remove card borders, subtle shadow only */
.cr-sparkline-chart canvas {
    border: none !important;
    outline: none !important;
}

/* Remove noisy card borders from all dashboard cards */
#cr-metrics-container .card,
.card.card-custom.card-flush {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
}

/* Shimmer bar lines — stacked animated bars for chart placeholders */
.cr-shimmer-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 20px;
    gap: 16px;
}

.cr-shimmer-bar {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.04) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: cr-shimmer-sweep 1.8s ease-in-out infinite;
}

/* Shimmer circle — for mini chart donut placeholders */
.cr-shimmer-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.04) 100%
    );
    background-size: 200% 200%;
    animation: cr-shimmer-sweep 1.8s ease-in-out infinite;
}

@keyframes cr-shimmer-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}