/* ══════════════════════════════════════════════════════════
   DASHBOARD 2026 — PROFESSIONAL SAAS REDESIGN v3
   Soft-elevation cards · colored icon badges · clean hierarchy
   Link this AFTER style.css and components.css.
   ══════════════════════════════════════════════════════════ */

/* ─── Page entrance ──────────────────────────────────────── */
.dash-fade-in { animation: dashFadeIn 0.4s cubic-bezier(0.4,0,0.2,1); }
@keyframes dashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Header ─────────────────────────────────────────────── */
.dash-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 18px;
  padding: 0 0 24px;
  margin-bottom: 28px;
}
.dash-hero-greeting {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--secondary); margin-bottom: 7px;
}
.dash-hero-greeting .material-icons { font-size: 16px; }
.dash-hero-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-main); margin-bottom: 5px;
}
.dash-hero-sub { font-size: 13.5px; color: var(--text-muted); }

.fy-select-wrap {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  padding: 10px 15px; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fy-select-wrap:hover { border-color: var(--border-color-strong); box-shadow: var(--shadow-xs); }
.fy-select-icon { color: var(--primary); font-size: 17px; }
.fy-select-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.fy-select-input {
  border: none; outline: none; font-size: 13.5px; font-weight: 700;
  color: var(--primary); background: transparent; cursor: pointer;
  padding: 0 4px; appearance: none; -webkit-appearance: none;
}
.fy-select-caret { font-size: 17px; color: var(--text-muted); pointer-events: none; margin-left: -6px; }

@media (max-width: 640px) {
  .dash-hero { flex-direction: column; align-items: stretch; }
  .dash-hero-title { font-size: 21px; }
  .fy-select-wrap { justify-content: center; }
}

/* ─── Quick actions row ──────────────────────────────────── */
.quick-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.modern-btn { box-shadow: var(--shadow-glow-primary); }
.modern-btn:hover { box-shadow: 0 8px 22px rgba(0,0,139,0.3); }
.modern-btn-outline {
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.modern-btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}

/* ─── Stat cards — soft elevation, colored icon badge,
   top accent hairline. Signature element: the icon badge
   glows softly on hover, echoing the card's accent color. ── */
.modern-stat-grid { animation: dashFadeIn 0.45s ease; }
.modern-stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(16,24,40,0.05);
  animation: statPop 0.35s cubic-bezier(0.4,0,0.2,1) backwards;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.modern-stat-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--primary));
  opacity: 0; transition: opacity var(--transition-base);
}
.modern-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: transparent;
}
.modern-stat-card:hover::before { opacity: 1; }
.modern-stat-card:nth-child(1) { --accent: #4c1d95; }
.modern-stat-card:nth-child(2) { --accent: #c9503b; }
.modern-stat-card:nth-child(3) { --accent: #6d28d9; }
.modern-stat-card:nth-child(4) { --accent: #0e9f6e; }
.modern-stat-card:nth-child(5) { --accent: var(--primary); }
@keyframes statPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.stat-icon-wrap {
  transition: transform var(--transition-base);
}
.modern-stat-card:hover .stat-icon-wrap { transform: scale(1.08); }

/* Remove old glow blob — replaced by top accent hairline */
.stat-card-glow { display: none; }

.stat-value-big { font-size: 23px; }
.stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-sub {
  font-size: 10.5px; color: var(--text-muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

/* ─── Icon badges (card titles) ──────────────────────────── */
.icon-badge {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}

/* ─── Cards — soft elevation, consistent radius ──────────── */
.modern-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(16,24,40,0.05);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.modern-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-color-strong); }

/* ─── FY finance breakdown ───────────────────────────────── */
.fy-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}
.modern-fy-stat {
  border-radius: var(--radius-md);
  padding: 14px 12px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.modern-fy-stat:hover { background: var(--surface-muted); transform: translateY(-1px); }
.fy-val { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fy-stat-highlight { background: var(--surface-muted); border-radius: var(--radius-md); }
.fy-divider-dashed { border-top: 1px dashed var(--border-color); margin-bottom: 20px; padding-top: 0; }
.fy-divider-solid { border-top: 1px solid var(--border-color); padding-top: 18px; }

/* ─── Status chips ───────────────────────────────────────── */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px; padding: 5px 13px;
  border-radius: 8px; font-size: 11.5px; font-weight: 700;
}
.status-chip-orange { background: #fff7ed; border: 1px solid #fed7aa; color: var(--secondary); }
.status-chip-purple { background: #f5f3ff; border: 1px solid #ddd6fe; color: #7c3aed; }

.status-mini-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.status-mini-card:hover { box-shadow: var(--shadow-xs); transform: translateY(-1px); }

/* ─── Overdue alert — soft elevated banner ───────────────── */
.overdue-card-modern {
  border: 1px solid #fecaca;
  border-left: 3px solid var(--danger);
  background: linear-gradient(135deg, #fef2f2 0%, #fff8f8 100%);
  box-shadow: 0 1px 3px rgba(239,68,68,0.08);
  border-radius: var(--radius-lg);
  margin-bottom: 28px; cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.overdue-card-modern:hover { box-shadow: 0 6px 18px rgba(239,68,68,0.14); transform: translateY(-2px); }
.overdue-icon-pulse {
  width: 46px; height: 46px; border-radius: 12px;
  background: #fee2e2; color: var(--danger);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative;
}
.overdue-icon-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  border: 2px solid var(--danger); opacity: 0.5;
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* ─── Top schools — ranked list, clean rows ──────────────── */
.top-school-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.top-school-row:hover { background: var(--primary-soft); transform: translateX(2px); }
.rank-badge {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}
.rank-gold   { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #78350f; border-color: transparent; }
.rank-silver { background: linear-gradient(135deg,#e2e8f0,#94a3b8); color: #1e293b; border-color: transparent; }
.rank-bronze { background: linear-gradient(135deg,#fbcfa0,#c2703d); color: #4a2410; border-color: transparent; }

/* ─── Recent activity ─────────────────────────────────────── */
.activity-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 10px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.activity-row:hover { background: var(--surface-muted); }
.activity-icon-wrap {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ─── Empty states ────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 36px 16px; color: var(--text-muted); font-size: 13.5px; text-align: center;
}
.empty-state .material-icons { font-size: 32px; opacity: 0.35; }

/* ─── Skeleton loader ─────────────────────────────────────── */
.dash-skeleton { padding-top: 4px; }
.skel-line, .skel-card {
  position: relative; overflow: hidden;
  background: var(--surface-muted); border-radius: var(--radius-lg);
}
.skel-card { border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(16,24,40,0.05); }
.skel-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-hero-title { font-size: 20px; }
  .quick-actions-row .btn { flex: 1 1 auto; }
  .modern-stat-card:hover { transform: none; }
}