/* ══════════════════════════════════════════════════════════════════════════════
   ShiftHR — Dashboard
   ──────────────────────────────────────────────────────────────────────────────
   Widget grid, stat cards, clickable card links, and admin quick links used
   on the main Dashboard page.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Widget Grid ───────────────────────────────────────────────────────────── */
.widget-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 32px;
}

/* Widget sizing — applied per-widget for multi-column layouts */
.widget-span-2 { grid-column: span 2; }
.widget-span-3 { grid-column: span 3; }
.widget-span-full { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .widget-span-2,
    .widget-span-3 { grid-column: span 1; }
}

/* ── Dash Card ─────────────────────────────────────────────────────────────── */
.dash-card {
    background: var(--color-surface); border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md); padding: 20px;
    box-shadow: var(--shadow-sm); display: flex; gap: 16px; align-items: flex-start;
}
.dash-card-icon { font-size: 1.6rem; opacity: .7; }
.dash-card-body h3 { font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.dash-stat { font-size: 1.6rem; font-weight: 700; color: var(--color-brand); }
.dash-label { font-size: .75rem; color: var(--color-neutral-500); }

/* ── Clickable Card Links ──────────────────────────────────────────────────── */
.dash-card-link { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.dash-card-link:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand); }

/* ── Admin Quick Links (dashboard) ─────────────────────────────────────────── */
.admin-quick-links { margin-bottom: 24px; }
.admin-quick-links h3 { font-size: .95rem; font-weight: 600; margin-bottom: 10px; }