/* ════════════════════════════════════════════════════════════════
   Dashboard 2027 PRO — Advanced UI/UX layer
   Builds on dashboard-2027.css with:
   • Aurora animated hero (flowing multi-color gradient + grain)
   • Time-greeting + live freshness indicator
   • Smart insights card (gradient backed AI-feel band)
   • Real inline sparklines (cdash-sparkline SVG)
   • 3D tilt on premium stat cards (perspective)
   • Live pulsing dots on active states
   • Category color hints (gradient top stripe on cards)
   • Refined focus rings & micro-interactions
   • Better dark-mode layered glass
   ════════════════════════════════════════════════════════════════ */

/* ── Aurora gradient layer on hero ────────────────────────────── */
.cdash-hero {
    isolation: isolate;
}
.cdash-hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.cdash-hero-aurora::before,
.cdash-hero-aurora::after {
    content: '';
    position: absolute;
    width: 720px; height: 720px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    mix-blend-mode: screen;
    animation: cdash-aurora-drift 22s ease-in-out infinite;
}
.cdash-hero-aurora::before {
    left: -10%; top: -50%;
    background: radial-gradient(circle, rgba(34, 211, 238, .55) 0%, transparent 70%);
}
.cdash-hero-aurora::after {
    right: -15%; bottom: -55%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, .45) 0%, transparent 70%);
    animation-delay: -8s;
    animation-duration: 28s;
}
.cdash-hero-aurora-3 {
    position: absolute;
    left: 35%; top: 20%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 114, 182, .35) 0%, transparent 70%);
    filter: blur(70px);
    opacity: .5;
    mix-blend-mode: screen;
    animation: cdash-aurora-drift 26s ease-in-out infinite reverse;
    animation-delay: -14s;
    pointer-events: none;
}
@keyframes cdash-aurora-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(8%, 5%)   scale(1.08); }
    50%      { transform: translate(-4%, 10%) scale(0.95); }
    75%      { transform: translate(6%, -6%)  scale(1.05); }
}
.cdash-hero-row { position: relative; z-index: 1; }

/* Grain overlay for film-like texture */
.cdash-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' type='fractalNoise'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
    pointer-events: none;
    border-radius: inherit;
}

/* ── Time greeting + live indicator ────────────────────────────── */
.cdash-time-greeting {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    margin-bottom: .25rem;
    margin-right: .3rem;
}
.cdash-time-greeting i { font-size: .72rem; color: #fde68a; }

.cdash-live-dot {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .85);
}
.cdash-live-dot::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
    animation: cdash-live-pulse 1.8s ease-in-out infinite;
}
@keyframes cdash-live-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);   transform: scale(1.15); }
}

/* ── Smart insights card — AI-feel gradient band ──────────────── */
.cdash-insights {
    position: relative;
    border-radius: var(--cdash-radius, .875rem);
    padding: 1.1rem 1.2rem;
    margin: 0 0 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: var(--cdash-elev-2, 0 4px 12px -2px rgba(15, 23, 42, .06));
    overflow: hidden;
}
.cdash-insights::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 220px at 0% 0%, rgba(139, 92, 246, .07) 0%, transparent 60%),
        radial-gradient(500px 220px at 100% 100%, rgba(13, 110, 253, .07) 0%, transparent 60%);
    pointer-events: none;
}
.cdash-insights-head {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}
.cdash-insights-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: #6d28d9;
}
.cdash-insights-eyebrow i {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(139, 92, 246, .35);
}
.cdash-insights-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}
@media (max-width: 991.98px) { .cdash-insights-grid { grid-template-columns: 1fr; } }

.cdash-insights-col { display: flex; }
.cdash-insights-col > .cdash-insights { flex: 1; margin: 0; display: flex; flex-direction: column; }
.cdash-insights-col .cdash-insights-grid { grid-template-columns: 1fr; flex: 1; align-content: start; }

.cdash-insight {
    position: relative;
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .75rem .85rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(15, 23, 42, .05);
    backdrop-filter: blur(6px);
    text-decoration: none;
    color: inherit;
    transition: transform .25s var(--cdash-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .25s ease, border-color .25s ease;
}
.cdash-insight:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdash-elev-2, 0 6px 14px -4px rgba(15, 23, 42, .08));
    border-color: rgba(139, 92, 246, .25);
    color: inherit;
}
.cdash-insight-icon {
    width: 34px; height: 34px;
    border-radius: .55rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; flex: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.cdash-insight-icon.tone-primary { background: rgba(13, 110, 253, .12); color: #0d6efd; }
.cdash-insight-icon.tone-success { background: rgba(22, 163, 74, .12); color: #16a34a; }
.cdash-insight-icon.tone-info    { background: rgba(6, 182, 212, .12);  color: #0891b2; }
.cdash-insight-icon.tone-warning { background: rgba(245, 158, 11, .15); color: #d97706; }
.cdash-insight-icon.tone-danger  { background: rgba(220, 38, 38, .12);  color: #dc2626; }
.cdash-insight-icon.tone-purple  { background: rgba(139, 92, 246, .12); color: #7c3aed; }
.cdash-insight-body { flex: 1; min-width: 0; }
.cdash-insight-title {
    font-size: .82rem; font-weight: 700;
    color: var(--text-heading, #0f172a);
    line-height: 1.25;
    margin-bottom: .15rem;
}
.cdash-insight-detail {
    font-size: .72rem;
    color: var(--text-sub, #64748b);
    line-height: 1.35;
    margin-bottom: .35rem;
}
.cdash-insight-cta {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .68rem; font-weight: 700;
    color: #6d28d9;
    transition: gap .2s ease;
}
.cdash-insight:hover .cdash-insight-cta { gap: .4rem; }

/* ── Sparkline (inline mini-chart) ─────────────────────────────── */
.cdash-sparkline {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: .4rem;
    overflow: visible;
}
.cdash-sparkline path { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cdash-sparkline .spark-line { stroke: currentColor; opacity: .9; }
.cdash-sparkline .spark-fill { fill: currentColor; stroke: none; opacity: .14; }
.cdash-sparkline .spark-dot {
    fill: currentColor;
    transition: r .2s ease;
}
.cdash-stat:hover .cdash-sparkline .spark-dot { r: 2.5; }

/* Sparkline tint by parent stat tone */
.cdash-stat:has(.cdash-stat-icon.tone-primary) .cdash-sparkline { color: #0d6efd; }
.cdash-stat:has(.cdash-stat-icon.tone-success) .cdash-sparkline { color: #16a34a; }
.cdash-stat:has(.cdash-stat-icon.tone-info)    .cdash-sparkline { color: #0891b2; }
.cdash-stat:has(.cdash-stat-icon.tone-warning) .cdash-sparkline { color: #d97706; }
.cdash-stat:has(.cdash-stat-icon.tone-danger)  .cdash-sparkline { color: #dc2626; }
.cdash-stat:has(.cdash-stat-icon.tone-purple)  .cdash-sparkline { color: #7c3aed; }

/* ── 3D tilt on premium stat cards ─────────────────────────────── */
.cdash-stat {
    transform-style: preserve-3d;
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .cdash-stat:hover {
        transform: translateY(-3px) perspective(900px) rotateX(2deg) rotateY(-2deg);
    }
    .cdash-stat:hover .cdash-stat-icon {
        transform: translateZ(8px) scale(1.08) rotate(-2deg);
    }
    .cdash-stat:hover .cdash-stat-value {
        transform: translateZ(6px);
    }
}

/* ── Card category color hints (top gradient stripe) ───────────── */
.cdash-tab-content .dash-card {
    position: relative;
    overflow: hidden;
}
.cdash-tab-content .dash-card-title i.text-primary ~ * {}
.cdash-tab-content .dash-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, currentColor 40%, currentColor 60%, transparent 100%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.cdash-tab-content .dash-card:hover::before { opacity: .35; }
/* Use the icon's color via accent-color from the card-title i */
.cdash-tab-content .dash-card:has(.dash-card-title i.text-primary)::before { color: #0d6efd; }
.cdash-tab-content .dash-card:has(.dash-card-title i.text-success)::before { color: #16a34a; }
.cdash-tab-content .dash-card:has(.dash-card-title i.text-warning)::before { color: #d97706; }
.cdash-tab-content .dash-card:has(.dash-card-title i.text-info)::before    { color: #0891b2; }
.cdash-tab-content .dash-card:has(.dash-card-title i.text-danger)::before  { color: #dc2626; }

/* ── Live pulse for "Active" / "Live" pills ────────────────────── */
.cdash-pill-success::before,
.cdash-pill.is-live::before {
    animation: cdash-pill-pulse 1.6s ease-in-out infinite;
}
@keyframes cdash-pill-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: .6; }
}

/* ── Refined focus rings — keyboard navigable ─────────────────── */
.cdash-tabs .nav-link:focus-visible,
.cdash-stat:focus-visible,
.cdash-mini-row:focus-visible,
.quick-action-item:focus-visible,
.cdash-insight:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    border-radius: var(--cdash-radius-sm, .625rem);
}

/* ── Improve appointment timeline with a left rail ─────────────── */
.cdash-appt-row {
    position: relative;
    padding-left: 1.1rem !important;
}
.cdash-appt-row::before {
    content: '';
    position: absolute;
    left: .25rem; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd 0%, #0891b2 100%);
    transform: translateY(-50%);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

/* ── Section eyebrow upgrade (gradient bg) ─────────────────────── */
.cdash-section-eyebrow {
    background: linear-gradient(135deg, rgba(13, 110, 253, .12) 0%, rgba(139, 92, 246, .10) 100%);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, .14);
}

/* ── Quick action card subtle gradient ─────────────────────────── */
.quick-action-card {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}
.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #f59e0b 50%, transparent 100%);
    opacity: .55;
}

/* ── Pulse tile — add micro-bar showing trend underneath ───────── */
.cdash-pulse-tile { position: relative; }
.cdash-pulse-tile-bar {
    height: 3px;
    margin-top: .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.cdash-pulse-tile-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(34, 211, 238, .9) 100%);
    border-radius: inherit;
    animation: cdash-bar-fill 1.1s var(--cdash-easing, cubic-bezier(.4,0,.2,1));
    transform-origin: left;
}

/* ── Big donut — refined gradient text + glow ──────────────────── */
.cdash-bigdonut {
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .08));
}

/* ── Lifecycle funnel — emoji-like state colors + larger numbers ─ */
.cdash-funnel-stage {
    position: relative;
    overflow: hidden;
}
.cdash-funnel-stage::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.cdash-funnel-stage:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   Dark mode
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .cdash-insights {
    background: linear-gradient(135deg, rgba(30, 35, 48, .9) 0%, rgba(15, 23, 42, .85) 100%);
    border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .cdash-insights::before {
    background:
        radial-gradient(500px 220px at 0% 0%, rgba(139, 92, 246, .14) 0%, transparent 60%),
        radial-gradient(500px 220px at 100% 100%, rgba(13, 110, 253, .14) 0%, transparent 60%);
}
[data-theme="dark"] .cdash-insight {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .cdash-insight-title { color: #f1f5f9; }
[data-theme="dark"] .cdash-insight-cta { color: #c4b5fd; }
[data-theme="dark"] .cdash-insights-eyebrow { color: #c4b5fd; }
[data-theme="dark"] .quick-action-card {
    background: linear-gradient(165deg, var(--dark-card-bg, #1e2330) 0%, rgba(15, 23, 42, .9) 100%);
}
[data-theme="dark"] .cdash-time-greeting {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
}

/* ════════════════════════════════════════════════════════════════
   Responsive — keep advanced visuals working on small screens
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .cdash-insights { padding: .9rem 1rem; }
    .cdash-insights-grid { gap: .5rem; }
    .cdash-hero-aurora::before,
    .cdash-hero-aurora::after { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
    .cdash-hero-aurora::before,
    .cdash-hero-aurora::after,
    .cdash-hero-aurora-3 {
        animation: none !important;
    }
    .cdash-live-dot::before,
    .cdash-pill-success::before,
    .cdash-pill.is-live::before {
        animation: none !important;
    }
}

/* ── Today tab: KPI strip ──────────────────────────────────────── */
.cdash-today-kpis { gap: .75rem; }
.cdash-today-kpis .details-info-cell {
    padding: .7rem .9rem;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.cdash-today-kpis .details-info-cell:hover {
    border-color: rgba(13, 110, 253, .35);
    box-shadow: 0 2px 6px rgba(13, 110, 253, .08);
}
.cdash-today-kpis .details-info-value { font-size: .9rem; }

/* ── Today tab: appointment charts (status donut + 7-day bars) ── */
.cdash-appt-charts {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: .85rem;
    padding: .85rem 1rem .65rem;
    border-bottom: 1px solid rgba(15, 23, 42, .05);
}
@media (max-width: 991.98px) { .cdash-appt-charts { grid-template-columns: 1fr; } }

.cdash-appt-chart-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, .55) 0%, rgba(248, 250, 252, .15) 100%);
    border: 1px solid rgba(15, 23, 42, .04);
    border-radius: .75rem;
    padding: .65rem .85rem .55rem;
}
.cdash-appt-chart-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
    flex-wrap: wrap;
}
.cdash-appt-chart-peak {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-left: .35rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(6, 182, 212, .1);
    color: #0e7490;
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}

.cdash-appt-donut-wrap {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: .75rem;
    align-items: center;
}
@media (max-width: 575.98px) { .cdash-appt-donut-wrap { grid-template-columns: 1fr; } }

.cdash-appt-donut-legend {
    display: grid; gap: .25rem;
    font-size: .72rem;
}
.cdash-appt-donut-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center; gap: .45rem;
    color: var(--text-sub, #64748b);
}
.cdash-appt-donut-row strong {
    font-weight: 800; font-variant-numeric: tabular-nums;
    color: var(--text-heading, #0f172a);
}
.cdash-appt-donut-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
}

[data-theme="dark"] .cdash-appt-chart-panel {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .cdash-appt-charts { border-bottom-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .cdash-appt-donut-row strong { color: var(--dark-text-primary, #f0f2f5); }
[data-theme="dark"] .cdash-appt-donut-row { color: var(--dark-text-secondary, #9ba3b5); }

/* ── Today tab: "Plan your day" empty state ────────────────────── */
.cdash-plan-empty {
    padding: 1.1rem 1rem 1.25rem;
}
.cdash-plan-empty-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1rem;
}
.cdash-plan-empty-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: #0d6efd;
    background: linear-gradient(135deg, rgba(13, 110, 253, .12), rgba(13, 110, 253, .03));
    flex: none;
}
.cdash-plan-empty-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
    line-height: 1.3;
}
.cdash-plan-empty-sub {
    font-size: .76rem;
    color: var(--text-sub, #64748b);
    line-height: 1.4;
}
.cdash-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem;
}
.cdash-plan-tile {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
.cdash-plan-tile:hover {
    border-color: rgba(13, 110, 253, .35);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
    color: inherit;
}
.cdash-plan-tile-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex: none;
}
.cdash-plan-tile-icon.tone-primary { background: rgba(13, 110, 253, .10);  color: #0d6efd; }
.cdash-plan-tile-icon.tone-success { background: rgba(22, 163, 74, .10);   color: #15803d; }
.cdash-plan-tile-icon.tone-info    { background: rgba(6, 182, 212, .12);   color: #0e7490; }
.cdash-plan-tile-icon.tone-warning { background: rgba(245, 158, 11, .14);  color: #b45309; }
.cdash-plan-tile-body { min-width: 0; }
.cdash-plan-tile-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
    line-height: 1.15;
}
.cdash-plan-tile-value small { font-size: .72rem; margin-left: .15rem; }
.cdash-plan-tile-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-sub, #64748b);
    margin-top: .1rem;
}
[data-theme="dark"] .cdash-plan-tile {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .cdash-plan-tile:hover { border-color: rgba(99, 179, 237, .45); }
[data-theme="dark"] .cdash-plan-tile-value,
[data-theme="dark"] .cdash-plan-empty-title { color: #f1f5f9; }

/* Clinic dashboard hero + pulse tiles live in dashboard-modern.css now
   (light SaaS surface). The dark-gradient pro hero overlay used to live
   here; it's been removed so the light styles cascade cleanly. */