/* ============================================================
   USER DASHBOARD — CSS
   File:   user-dashboard.css
   Prefix: ud-  (User Dashboard)

   Purpose:
     Styles the user dashboard page and its two included
     component sections:
       - user_subscription_temp_updated  (subscription cards)
       - usection2_updated               (listing/messages/reviews)

     The ud- prefix ensures zero class-name collisions with:
       usv-  (user-subscription-views.css)
       auth- (modern-forms.css)
       sc-   (subscription-create.css)
       ft-   (footer.css)

   Requires Google Fonts:
     DM Sans 300/400/500/600  +  Syne 700/800
     (loaded in the page or layout)
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
   All colours, spacing, and font references live here.
   To retheme the entire dashboard change only these values.
══════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand palette (matches auth / form pages) ── */
    --ud-indigo:          #6366f1;
    --ud-indigo-dark:     #4f46e5;
    --ud-blue:            #3b82f6;
    --ud-blue-dark:       #2563eb;
    --ud-violet:          #8b5cf6;
    --ud-green:           #10b981;
    --ud-green-dark:      #059669;
    --ud-red:             #ef4444;
    --ud-red-dark:        #dc2626;
    --ud-amber:           #f59e0b;

    /* ── Text ── */
    --ud-text-dark:       #0f172a;
    --ud-text-body:       #475569;
    --ud-text-muted:      #64748b;
    --ud-text-faint:      #94a3b8;

    /* ── Surfaces ── */
    --ud-bg-page:         #f0f4ff;
    --ud-bg-card:         #ffffff;
    --ud-border:          #e2e8f0;
    --ud-border-light:    #f1f5f9;

    /* ── Shadows ── */
    --ud-shadow-card:     0 4px 6px rgba(0,0,0,0.04), 0 12px 28px rgba(99,102,241,0.08);
    --ud-shadow-hover:    0 8px 24px rgba(99,102,241,0.18);

    /* ── Shape ── */
    --ud-radius-page:     0;           /* page wrapper has no radius */
    --ud-radius-section:  20px;
    --ud-radius-card:     16px;
    --ud-radius-btn:      10px;
    --ud-radius-badge:    20px;
    --ud-radius-icon:     12px;

    /* ── Typography ── */
    --ud-font-body:       'DM Sans', sans-serif;
    --ud-font-display:    'Syne', sans-serif;
}


/* ══════════════════════════════════════════════════════════════
   PAGE WRAPPER
   The outermost container that wraps the entire dashboard body.
   Applies the soft gradient background used across all modern
   pages in this project.
══════════════════════════════════════════════════════════════ */
.ud-page {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%,   rgba(59,130,246,.09)  0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 90% 100%,  rgba(99,102,241,.07)  0%, transparent 55%),
        var(--ud-bg-page);
    font-family: var(--ud-font-body);
    padding-bottom: 60px;
}


/* ══════════════════════════════════════════════════════════════
   WELCOME BANNER
   The green "You're logged in!" strip at the top of the page.
   Replaces the original inline-styled white box.
══════════════════════════════════════════════════════════════ */
.ud-welcome {
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 32px 24px 0;
}

.ud-welcome-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: var(--ud-radius-section);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: udFadeDown 0.5s cubic-bezier(.22,1,.36,1) both;
}

/* Green check icon inside the welcome card */
.ud-welcome-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ud-green) 0%, var(--ud-green-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16,185,129,0.30);
}

.ud-welcome-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ud-welcome-text {
    font-family: var(--ud-font-display);
    font-size: 16px;
    font-weight: 700;
    color: #065f46;
    margin: 0;
}

.ud-welcome-sub {
    font-size: 13px;
    color: #059669;
    margin: 2px 0 0;
}


/* ══════════════════════════════════════════════════════════════
   SECTION WRAPPER
   Shared outer container for each dashboard section
   (subscriptions + messages/reviews).
══════════════════════════════════════════════════════════════ */
.ud-section {
    max-width: 1200px;
    margin: 36px auto 0;
    padding: 0 24px;
    animation: udFadeDown 0.5s cubic-bezier(.22,1,.36,1) both;
}

/* Stagger the second section's animation */
.ud-section:nth-child(2) { animation-delay: 0.08s; }
.ud-section:nth-child(3) { animation-delay: 0.14s; }


/* ── Section heading row ── */
.ud-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* Coloured square icon to the left of the section title */
.ud-section-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ud-radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Indigo variant — used for subscriptions section */
.ud-section-icon--indigo {
    background: linear-gradient(135deg, var(--ud-indigo) 0%, var(--ud-violet) 100%);
    box-shadow: 0 4px 12px rgba(99,102,241,0.28);
}

/* Teal/green variant — used for listing / messages / reviews */
.ud-section-icon--teal {
    background: linear-gradient(135deg, var(--ud-green) 0%, var(--ud-blue) 100%);
    box-shadow: 0 4px 12px rgba(16,185,129,0.26);
}

.ud-section-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ud-section-title {
    font-family: var(--ud-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--ud-text-dark);
    letter-spacing: -0.2px;
    margin: 0;
}

.ud-section-subtitle {
    font-size: 13px;
    color: var(--ud-text-muted);
    margin: 2px 0 0;
}

/* Thin line separator between sections */
.ud-section-divider {
    border: none;
    border-top: 1px solid var(--ud-border);
    margin: 0 0 20px;
}


/* ══════════════════════════════════════════════════════════════
   CARD GRID
   Auto-fill responsive grid — cards are at least 240px wide
   and expand evenly to fill available space.
══════════════════════════════════════════════════════════════ */
.ud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD CARD
   Individual action card — icon, title, description, button.
══════════════════════════════════════════════════════════════ */
.ud-card {
    background: var(--ud-bg-card);
    border-radius: var(--ud-radius-card);
    border: 1px solid var(--ud-border-light);
    box-shadow: var(--ud-shadow-card);
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle top gradient bar, same accent treatment as auth cards */
.ud-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ud-blue) 0%, var(--ud-indigo) 50%, var(--ud-violet) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ud-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ud-shadow-hover);
}

.ud-card:hover::before {
    opacity: 1;
}

/* Danger variant card — subtle red tint for Cancel Subscription */
.ud-card--danger::before {
    background: linear-gradient(90deg, var(--ud-red) 0%, #f97316 100%);
}

.ud-card--danger:hover {
    box-shadow: 0 8px 24px rgba(239,68,68,0.16);
}


/* ── Card icon badge ── */
/*
   A rounded square icon at the top of each card that visually
   identifies the card's purpose at a glance.
*/
.ud-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ud-radius-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.ud-card-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon colour themes — apply one to each .ud-card-icon */
.ud-icon--indigo {
    background: linear-gradient(135deg, var(--ud-indigo) 0%, var(--ud-violet) 100%);
    box-shadow: 0 4px 10px rgba(99,102,241,0.30);
}

.ud-icon--blue {
    background: linear-gradient(135deg, var(--ud-blue) 0%, var(--ud-indigo) 100%);
    box-shadow: 0 4px 10px rgba(59,130,246,0.28);
}

.ud-icon--green {
    background: linear-gradient(135deg, var(--ud-green) 0%, var(--ud-blue) 100%);
    box-shadow: 0 4px 10px rgba(16,185,129,0.28);
}

.ud-icon--red {
    background: linear-gradient(135deg, var(--ud-red) 0%, #f97316 100%);
    box-shadow: 0 4px 10px rgba(239,68,68,0.28);
}

.ud-icon--amber {
    background: linear-gradient(135deg, var(--ud-amber) 0%, #d97706 100%);
    box-shadow: 0 4px 10px rgba(245,158,11,0.28);
}

.ud-icon--violet {
    background: linear-gradient(135deg, var(--ud-violet) 0%, var(--ud-indigo) 100%);
    box-shadow: 0 4px 10px rgba(139,92,246,0.28);
}


/* ── Card text ── */
.ud-card-title {
    font-family: var(--ud-font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--ud-text-dark);
    letter-spacing: -0.1px;
    margin: 0 0 6px;
}

.ud-card-desc {
    font-size: 13px;
    color: var(--ud-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;   /* pushes the button to the bottom of the card */
}


/* ── Card action button ── */
/*
   Full-width button at the bottom of each card.
   Colour modifiers match the card's icon theme.
*/
.ud-card-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: var(--ud-radius-btn);
    font-family: var(--ud-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Glass sheen on all buttons */
.ud-card-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%);
    pointer-events: none;
}

.ud-card-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.ud-card-btn:active {
    transform: translateY(0);
}

/* Button colour variants */
.ud-btn--primary {
    background: linear-gradient(135deg, var(--ud-indigo) 0%, var(--ud-blue) 100%);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99,102,241,0.30);
}
.ud-btn--primary:hover {
    box-shadow: 0 6px 18px rgba(99,102,241,0.42);
}

.ud-btn--green {
    background: linear-gradient(135deg, var(--ud-green) 0%, var(--ud-blue) 100%);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.28);
}
.ud-btn--green:hover {
    box-shadow: 0 6px 18px rgba(16,185,129,0.40);
}

.ud-btn--danger {
    background: linear-gradient(135deg, var(--ud-red) 0%, #f97316 100%);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.28);
}
.ud-btn--danger:hover {
    box-shadow: 0 6px 18px rgba(239,68,68,0.40);
}

.ud-btn--amber {
    background: linear-gradient(135deg, var(--ud-amber) 0%, #d97706 100%);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.28);
}
.ud-btn--amber:hover {
    box-shadow: 0 6px 18px rgba(245,158,11,0.40);
}


/* ══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATION
   Cards and sections slide up and fade in on page load.
══════════════════════════════════════════════════════════════ */
@keyframes udFadeDown {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*
   Stagger each card in the grid so they animate in sequence
   rather than all at once. Works for up to 6 cards.
*/
.ud-grid .ud-card:nth-child(1) { animation: udFadeDown 0.45s 0.05s cubic-bezier(.22,1,.36,1) both; }
.ud-grid .ud-card:nth-child(2) { animation: udFadeDown 0.45s 0.12s cubic-bezier(.22,1,.36,1) both; }
.ud-grid .ud-card:nth-child(3) { animation: udFadeDown 0.45s 0.19s cubic-bezier(.22,1,.36,1) both; }
.ud-grid .ud-card:nth-child(4) { animation: udFadeDown 0.45s 0.26s cubic-bezier(.22,1,.36,1) both; }
.ud-grid .ud-card:nth-child(5) { animation: udFadeDown 0.45s 0.33s cubic-bezier(.22,1,.36,1) both; }
.ud-grid .ud-card:nth-child(6) { animation: udFadeDown 0.45s 0.40s cubic-bezier(.22,1,.36,1) both; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
══════════════════════════════════════════════════════════════ */

/* Tablet — switch to 2 columns */
@media (max-width: 900px) {
    .ud-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — single column, tighten padding */
@media (max-width: 560px) {
    .ud-welcome,
    .ud-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ud-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ud-section-title {
        font-size: 16px;
    }

    .ud-welcome-card {
        padding: 16px 18px;
    }

    .ud-card {
        padding: 20px 18px 18px;
    }
}