/* dashboard.html — visual layer. Load LAST. */
:root{--db-cu:#b4561f;--db-cu2:#f0a35e;--db-navy:#0b1530;--db-ease:cubic-bezier(.2,.8,.2,1)}
@keyframes dbIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes dbFloat{50%{transform:translateY(16px) scale(1.06)}}
@keyframes dbSpin{to{transform:rotate(360deg)}}
@keyframes dbPulse{50%{box-shadow:0 0 0 10px rgba(240,163,94,.18),0 0 24px rgba(255,184,107,.6)}}
#main{position:relative;background:radial-gradient(620px 320px at 90% 0,rgba(240,163,94,.2),transparent 62%),radial-gradient(520px 300px at 4% 30%,rgba(75,123,255,.08),transparent 62%),linear-gradient(180deg,#fff8f1,#f6f8fc 40%)}
.dash-layout{gap:clamp(18px,2.4vw,36px)}

/* sidebar */
.dash-sidebar{position:sticky;top:calc(var(--header-height,72px) + 24px);align-self:start;border-radius:28px!important;border:1px solid #fff!important;background:rgba(255,255,255,.9)!important;backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(11,21,48,.09)!important}
.dash-avatar{background:linear-gradient(135deg,var(--db-cu),var(--db-cu2))!important;box-shadow:0 10px 22px rgba(180,86,31,.4)}
.dash-nav a{border-radius:16px!important;font-weight:700;transition:transform .25s var(--db-ease),background .25s,color .25s}
.dash-nav a:hover{transform:translateX(-5px);background:#fff4e8!important;color:var(--db-cu)!important}
.dash-nav a.is-active{background:linear-gradient(135deg,var(--db-cu),var(--db-cu2))!important;color:#fff!important;box-shadow:0 12px 26px rgba(180,86,31,.38)}
.dash-nav a.is-active svg{stroke:#fff}

/* title + weather */
.dash-section-title{font-size:clamp(1.7rem,3.4vw,2.4rem)!important;font-weight:800;margin-bottom:22px;background:linear-gradient(120deg,#0b1530 35%,#b4561f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:dbIn .6s both}
.dash-section-title [data-user-name]{-webkit-text-fill-color:transparent}
#dashWeather .dash-wx{position:relative;overflow:hidden;border-radius:30px!important;box-shadow:0 26px 60px rgba(11,21,48,.28);animation:dbIn .7s .08s both}
#dashWeather .dash-wx::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;inset-inline-end:-70px;top:-100px;background:radial-gradient(circle,rgba(255,184,107,.5),transparent 66%);animation:dbFloat 7s ease-in-out infinite;pointer-events:none}
#dashWeather .dash-wx>*{position:relative}

/* journey (empty state, rendered by dashboard.js into #dashSystemsEmpty) */
#dashSystemsEmpty .card{position:relative;overflow:hidden;border-radius:30px!important;border:2px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--db-cu),var(--db-cu2)) border-box!important;box-shadow:0 24px 60px rgba(180,86,31,.16)!important;padding:clamp(22px,3vw,36px)!important;animation:dbIn .7s .12s both}
#dashSystemsEmpty h3{font-size:clamp(1.3rem,2.4vw,1.7rem)!important;font-weight:800;color:var(--db-navy)}
#dashSystemsEmpty ol{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:26px 0 8px!important;position:relative}
#dashSystemsEmpty ol::before{content:"";position:absolute;top:27px;inset-inline:12.5%;height:4px;border-radius:4px;background:#e6ebf4}
#dashSystemsEmpty li{counter-increment:s;position:relative;padding:70px 6px 0;text-align:center;font-weight:700;font-size:.95rem!important;color:var(--db-navy);line-height:1.8}
#dashSystemsEmpty li::before{content:counter(s,persian);position:absolute;top:0;inset-inline:0;margin-inline:auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#eef1f8;color:#64748b;font-weight:800;font-size:1.3rem;border:5px solid #fff;box-shadow:0 8px 20px rgba(11,21,48,.1)}
#dashSystemsEmpty li.is-current::before{background:linear-gradient(135deg,var(--db-cu),var(--db-cu2));color:#fff;animation:dbPulse 2.4s infinite}
#dashSystemsEmpty li.is-done::before{content:"✓";background:linear-gradient(135deg,#0f766e,#27d17f);color:#fff}
#dashSystemsEmpty .btn{min-height:50px;border-radius:99px;font-weight:800;padding-inline:26px}
#dashSystemsEmpty .btn-cta{box-shadow:0 14px 30px rgba(180,86,31,.42);transition:transform .25s}#dashSystemsEmpty .btn-cta:hover{transform:translateY(-3px) scale(1.02)}

/* KPI cards */
.overview-stats{gap:clamp(14px,1.6vw,22px)!important}
.overview-stats .stat-card{position:relative;overflow:hidden;border-radius:26px!important;border:1px solid #fff!important;background:#fff!important;box-shadow:0 14px 38px rgba(11,21,48,.08)!important;animation:dbIn .6s both;transition:transform .35s var(--db-ease),box-shadow .35s}
.overview-stats .stat-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--db-cu),var(--db-cu2))}
.overview-stats .stat-card:nth-child(2)::before{background:linear-gradient(90deg,#0f766e,#27d17f)}
.overview-stats .stat-card:nth-child(3)::before{background:linear-gradient(90deg,#4b7bff,#9bb6ff)}
.overview-stats .stat-card:nth-child(4)::before{background:linear-gradient(90deg,#f59e0b,#fde68a)}
.overview-stats .stat-card:nth-child(2){animation-delay:.06s}.overview-stats .stat-card:nth-child(3){animation-delay:.12s}.overview-stats .stat-card:nth-child(4){animation-delay:.18s}
.overview-stats .stat-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(180,86,31,.16)!important}
.stat-card__label{font-weight:700}
.stat-card__value{color:var(--db-navy);font-weight:800}
.dash-content.is-empty .overview-stats .stat-card{background:repeating-linear-gradient(135deg,#fafbfe 0 14px,#f4f6fb 14px 28px)!important}
.dash-content.is-empty .overview-stats .stat-card__value{color:#a3adc2!important}
.dash-content.is-empty .overview-stats .stat-card::after{content:"بعد از نصب اینجا فعال می‌شود";display:block;margin-top:10px;font-size:12px;color:#94a3b8}

/* cards + energy score ring */
.dash-content .card{border-radius:26px!important;border:1px solid #fff!important;box-shadow:0 14px 38px rgba(11,21,48,.07)!important}
.energy-score-card{background:linear-gradient(160deg,#fff,#fff8f0)!important}
#energyScoreValue{position:relative;isolation:isolate;display:grid!important;place-items:center;width:104px;height:104px;margin:0 auto;font-size:1.9rem!important}
#energyScoreValue::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff;z-index:-1}
#energyScoreValue::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:-2;background:conic-gradient(var(--db-cu),var(--db-cu2),#fde68a,var(--db-cu));animation:dbSpin 9s linear infinite}
#energyScoreBreakdown>*{border-radius:18px!important;background:linear-gradient(160deg,#fff,#f4f7fd)!important;box-shadow:0 8px 20px rgba(11,21,48,.05)}
.notif-item{border-radius:18px;transition:background .2s,transform .2s}.notif-item:hover{background:#fff8f0;transform:translateX(-4px)}
@media(max-width:900px){#dashSystemsEmpty ol{grid-template-columns:1fr 1fr}#dashSystemsEmpty ol::before{display:none}.dash-sidebar{position:static}}
@media(max-width:520px){#dashSystemsEmpty ol{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.dash-content *,#energyScoreValue::after{animation:none!important;transition:none!important}}