/* ─────────────────────────────────────────────────────────────────────────────
   Sunday School Manager — Global Styles
   Kid-friendly, colourful, playful design
   ───────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, .mud-typography {
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif !important;
}

/* ── Blazor error banner ─────────────────────────────────────────────────────*/
#blazor-error-ui {
    background: lightyellow;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: .6rem 1.25rem .7rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ── Animated background for main content area ───────────────────────────── */
.mud-main-content {
    transition: margin-left 225ms cubic-bezier(0,0,.2,1);
    background: linear-gradient(160deg, #f0f4ff 0%, #fef9ec 50%, #f0fff4 100%) !important;
    min-height: 100vh;
}

/* ── App bar — rainbow gradient ──────────────────────────────────────────── */
.mud-appbar {
    background: linear-gradient(90deg, #6C63FF 0%, #48C9B0 50%, #F7DC6F 100%) !important;
    box-shadow: 0 4px 20px rgba(108,99,255,.3) !important;
}

/* ── Drawer — soft purple tint ───────────────────────────────────────────── */
.mud-drawer {
    background: linear-gradient(180deg, #faf8ff 0%, #f0ebff 100%) !important;
}
.mud-drawer-content { padding-top: 0; }

/* ── Nav links ────────────────────────────────────────────────────────────── */
.mud-nav-link:hover,
.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(108,99,255,.12), rgba(72,201,176,.08)) !important;
    border-radius: 12px !important;
}

/* ── Dashboard hero banner ────────────────────────────────────────────────── */
.hero-banner {
    background: linear-gradient(135deg, #6C63FF 0%, #48C9B0 100%);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(108,99,255,.35);
}
.hero-banner::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
}
.hero-banner::after {
    content: '';
    position: absolute; bottom: -40px; left: 40px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
.hero-banner h1 { font-size: 2rem; font-weight: 900; line-height: 1.2; margin: 0 0 .25rem; }
.hero-banner p  { font-size: 1.05rem; opacity: .9; margin: 0; }
.hero-emojis    { font-size: 3rem; margin-bottom: .75rem; animation: bounce 2s infinite; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ── Kid stat cards ────────────────────────────────────────────────────────── */
.kid-stat-card {
    border-radius: 20px !important;
    padding: 1.5rem !important;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    cursor: default;
    border: none !important;
}
.kid-stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}
.kid-stat-card .card-emoji {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    display: block;
    animation: wiggle 3s ease-in-out infinite;
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(-8deg); }
    75%       { transform: rotate(8deg); }
}
.kid-stat-card .card-value {
    font-size: 2.8rem;
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-bottom: .25rem;
}
.kid-stat-card .card-label {
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .01em;
}
.kid-stat-card .card-bg-shape {
    position: absolute; right: -20px; bottom: -20px;
    font-size: 5rem; opacity: .15; line-height: 1;
    pointer-events: none;
}

.card-purple  { background: linear-gradient(135deg, #6C63FF, #9b8fff) !important; box-shadow: 0 8px 24px rgba(108,99,255,.4) !important; }
.card-teal    { background: linear-gradient(135deg, #11998e, #48C9B0) !important; box-shadow: 0 8px 24px rgba(17,153,142,.4)  !important; }
.card-orange  { background: linear-gradient(135deg, #F7971E, #FFD200)  !important; box-shadow: 0 8px 24px rgba(247,151,30,.4)  !important; }
.card-pink    { background: linear-gradient(135deg, #f953c6, #b91d73)  !important; box-shadow: 0 8px 24px rgba(249,83,198,.4)  !important; }

/* ── Leaderboard podium ───────────────────────────────────────────────────── */
.podium-card {
    border-radius: 24px !important;
    transition: transform .25s, box-shadow .25s;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.podium-card:hover { transform: translateY(-8px); }

.podium-1 {
    background: linear-gradient(160deg, #fffbe6, #fff3b0) !important;
    border: 3px solid #FFD700 !important;
    box-shadow: 0 8px 28px rgba(255,215,0,.45) !important;
}
.podium-2 {
    background: linear-gradient(160deg, #f5f5f5, #e8e8e8) !important;
    border: 3px solid #C0C0C0 !important;
    box-shadow: 0 8px 28px rgba(150,150,150,.35) !important;
}
.podium-3 {
    background: linear-gradient(160deg, #fff0e5, #ffe0c7) !important;
    border: 3px solid #CD7F32 !important;
    box-shadow: 0 8px 28px rgba(205,127,50,.35) !important;
}

.podium-medal { font-size: 3.5rem; display: block; margin-bottom: .5rem; }
.podium-name  { font-size: 1.2rem; font-weight: 800; color: #1a1a2e; }
.podium-pts   {
    display: inline-block;
    margin-top: .75rem;
    padding: .4rem 1.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    color: white;
}
.podium-pts-1 { background: linear-gradient(90deg, #f7971e, #ffd200); }
.podium-pts-2 { background: linear-gradient(90deg, #888, #bbb); }
.podium-pts-3 { background: linear-gradient(90deg, #cd7f32, #e8a96e); }

/* ── Daily summary action card ────────────────────────────────────────────── */
.summary-action-card {
    background: linear-gradient(135deg, #FFF9E6, #FFF0C8) !important;
    border: 2px dashed #FFD200 !important;
    border-radius: 20px !important;
    padding: 1.75rem !important;
    margin-bottom: 2rem;
    transition: box-shadow .2s;
}
.summary-action-card:hover { box-shadow: 0 8px 24px rgba(255,210,0,.3) !important; }

/* ── Quick action buttons ─────────────────────────────────────────────────── */
.quick-action-btn {
    border-radius: 16px !important;
    padding: 1.25rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    transition: transform .2s, box-shadow .2s !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
}
.quick-action-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.2) !important;
}

/* ── Section headings ─────────────────────────────────────────────────────── */
.section-heading {
    font-size: 1.4rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    color: #1a1a2e;
}
.section-heading .heading-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.mud-skeleton {
    border-radius: 20px !important;
    background: linear-gradient(90deg, #e8e8e8 25%, #f8f8f8 50%, #e8e8e8 75%) !important;
    background-size: 1000px 100% !important;
    animation: shimmer 1.8s infinite linear !important;
}

/* ── Stars/confetti decorations ───────────────────────────────────────────── */
.floating-star {
    position: fixed;
    font-size: 1.2rem;
    opacity: .12;
    pointer-events: none;
    animation: floatStar linear infinite;
    z-index: 0;
}
@keyframes floatStar {
    from { transform: translateY(100vh) rotate(0deg); }
    to   { transform: translateY(-100px) rotate(360deg); }
}

/* ── Icon size normalisation ──────────────────────────────────────────────── */
/* Prevent MudIcon from inheriting oversized heading font-size */
.mud-typography .mud-icon-root,
h1 .mud-icon-root, h2 .mud-icon-root,
h3 .mud-icon-root, h4 .mud-icon-root,
h5 .mud-icon-root, h6 .mud-icon-root {
    font-size: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    vertical-align: middle;
}

/* Nav icons: keep them compact */
.mud-nav-link .mud-icon-root,
.mud-nav-group .mud-icon-root {
    font-size: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.mud-table { border-radius: 16px !important; overflow: hidden; }
.mud-table-row:hover { cursor: pointer; background: rgba(108,99,255,.05) !important; }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    .mud-appbar, .mud-drawer, .mud-button, .no-print { display: none !important; }
    .mud-main-content { margin-left: 0 !important; }
}