/* dashboard-cards.css
   Two dashboard themes scoped to .dashboard-view:
   - .dashboard-theme-minimal: subtle white cards with purple 1px border and light blur
   - .dashboard-theme-pro: more pronounced professional look with stronger shadows and refined spacing

   This file is intentionally scoped under the .dashboard-view wrapper so it won't affect other pages.
*/

:root{
    --dash-border: rgba(124,58,237,0.22);
    --dash-border-strong: rgba(124,58,237,0.30);
    --dash-shadow: 0 10px 28px rgba(124,58,237,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --dash-shadow-hover: 0 24px 60px rgba(124,58,237,0.16), 0 8px 24px rgba(0,0,0,0.08);
}

/* Fallback layer for browsers without backdrop-filter support. The .bf element sits behind content. */
.dashboard-view .bf-fallback::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* ------------------------- Minimal Theme ------------------------- */
.dashboard-view.dashboard-theme-minimal .card,
.dashboard-view.dashboard-theme-minimal .panel,
.dashboard-view.dashboard-theme-minimal .dashboard-card{
    position: relative;
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    box-shadow: var(--dash-shadow);
    transition: transform 220ms ease, box-shadow 220ms ease;
    color: inherit;
    overflow: hidden;
}
.dashboard-view.dashboard-theme-minimal .card:hover,
.dashboard-view.dashboard-theme-minimal .panel:hover,
.dashboard-view.dashboard-theme-minimal .dashboard-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--dash-shadow-hover);
}
.dashboard-view.dashboard-theme-minimal .dashboard-card::before{ background: transparent; }
.dashboard-view.dashboard-theme-minimal .bf-fallback::before{ background: rgba(255,255,255,0.92); }

/* Neutralize inner backgrounds that theme might add */
.dashboard-view.dashboard-theme-minimal .panel-container,
.dashboard-view.dashboard-theme-minimal .panel-hdr,
.dashboard-view.dashboard-theme-minimal .panel-content,
.dashboard-view.dashboard-theme-minimal .card-header,
.dashboard-view.dashboard-theme-minimal .card-body{
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Keep sensible inner padding for content areas */
.dashboard-view.dashboard-theme-minimal .panel-content > .row,
.dashboard-view.dashboard-theme-minimal .card .p-3,
.dashboard-view.dashboard-theme-minimal .card .p-2{
    padding: 0.6rem !important;
}

/* KPI cards small tweak */
.dashboard-view.dashboard-theme-minimal .card.card-blur.dashboard-card{ padding: 0.65rem !important; }

/* ------------------------- Professional Theme ------------------------- */
.dashboard-view.dashboard-theme-pro .card,
.dashboard-view.dashboard-theme-pro .panel,
.dashboard-view.dashboard-theme-pro .dashboard-card{
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,255,0.98));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--dash-border-strong);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15,23,42,0.06), 0 6px 18px rgba(124,58,237,0.06);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1);
    color: #1f2937; /* slightly darker text for professional look */
    overflow: hidden;
}
.dashboard-view.dashboard-theme-pro .card:hover,
.dashboard-view.dashboard-theme-pro .panel:hover,
.dashboard-view.dashboard-theme-pro .dashboard-card:hover{
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 36px 90px rgba(15,23,42,0.12), 0 10px 30px rgba(124,58,237,0.10);
}

/* Accent header strip for pro theme */
.dashboard-view.dashboard-theme-pro .panel-hdr{
    background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(99,102,241,0.04));
    padding: 0.6rem 1rem;
}

/* make badges and small labels pop in pro theme */
.dashboard-view.dashboard-theme-pro .badge{ box-shadow: 0 6px 18px rgba(99,102,241,0.08); }

/* ------------------------- Responsive tweaks ------------------------- */
@media (max-width: 991px){
    .dashboard-view .card,
    .dashboard-view .panel,
    .dashboard-view .dashboard-card{
        border-radius: 8px;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

@media (max-width: 575px){
    .dashboard-view .card,
    .dashboard-view .panel{
        border: 1px solid rgba(124,58,237,0.14);
        box-shadow: 0 6px 18px rgba(0,0,0,0.04);
        transform: none !important;
    }
    .dashboard-view .card .p-3,
    .dashboard-view .card .p-2{ padding: 0.45rem !important; }
}

/* Accessibility: reduce motion for users who request it */
@media (prefers-reduced-motion: reduce){
    .dashboard-view .card,
    .dashboard-view .panel,
    .dashboard-view .dashboard-card{ transition: none !important; transform: none !important; }
}

/* ------------------------- Alternate warm theme ------------------------- */
.dashboard-view.dashboard-theme-alt .card,
.dashboard-view.dashboard-theme-alt .panel,
.dashboard-view.dashboard-theme-alt .dashboard-card{
    position: relative;
    background: linear-gradient(180deg, rgba(255,250,240,0.96), rgba(255,248,240,0.98));
    -webkit-backdrop-filter: blur(7px) saturate(110%);
    backdrop-filter: blur(7px) saturate(110%);
    border: 1px solid rgba(234,88,12,0.14);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(234,88,12,0.06), 0 4px 10px rgba(0,0,0,0.04);
    transition: transform 220ms ease, box-shadow 220ms ease;
    color: #1f2937;
}
.dashboard-view.dashboard-theme-alt .card:hover,
.dashboard-view.dashboard-theme-alt .panel:hover,
.dashboard-view.dashboard-theme-alt .dashboard-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(234,88,12,0.12), 0 8px 24px rgba(0,0,0,0.06);
}


/* ------------------------- Glass Theme (alternative) ------------------------- */
.dashboard-view.dashboard-theme-glass .card,
.dashboard-view.dashboard-theme-glass .panel,
.dashboard-view.dashboard-theme-glass .dashboard-card{
    position: relative;
    background: rgba(18,24,31,0.32); /* translucent dark glass */
    color: #f8fafc;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.45);
    transition: transform 260ms ease, box-shadow 260ms ease;
    overflow: hidden;
}
.dashboard-view.dashboard-theme-glass .card:hover,
.dashboard-view.dashboard-theme-glass .panel:hover,
.dashboard-view.dashboard-theme-glass .dashboard-card:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 28px 80px rgba(2,6,23,0.5);
}
.dashboard-view.dashboard-theme-glass .panel-hdr{
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding: 0.6rem 1rem;
}
.dashboard-view.dashboard-theme-glass .badge{ background: rgba(255,255,255,0.08); color: #fff; }

@media (max-width: 991px){
    .dashboard-view.dashboard-theme-glass .card,
    .dashboard-view.dashboard-theme-glass .panel,
    .dashboard-view.dashboard-theme-glass .dashboard-card{
        -webkit-backdrop-filter: blur(6px) saturate(110%);
        backdrop-filter: blur(6px) saturate(110%);
    }
}