/* ==========================================================================
   EarnDaily — Base Theme
   Brand-level CSS variables live in :root so the palette can be re-themed
   from one place (and, later, driven by admin Site Config).
   ========================================================================== */

:root {
    --primary: #0b6e4f;   /* deep financial green */
    --secondary: #094d38;
    --accent: #d4af37;    /* gold */
    --success: #198754;
    --warning: #f0ad4e;
    --danger: #c0392b;
    --bg: #f5f7f6;
    --text: #1d2b27;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main,
.page-content {
    flex: 1 0 auto;
}

/* Bootstrap colour overrides mapped onto the brand palette. */
.bg-primary {
    background-color: var(--primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-active-bg: var(--secondary);
}

.btn-warning {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: #c39d2f;
    --bs-btn-hover-border-color: #c39d2f;
}

a {
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   Mandatory research/demo disclaimer — bold, red, centered, never hidden.
   -------------------------------------------------------------------------- */
.footer-disclaimer {
    color: #ff4d4f;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Level badges
   -------------------------------------------------------------------------- */
.level-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.level-badge.bronze   { background: #cd7f32; }
.level-badge.silver   { background: #9ca3af; color: #1d2b27; }
.level-badge.gold     { background: #d4af37; color: #1d2b27; }
.level-badge.diamond  { background: #4ca3d9; }
.level-badge.platinum { background: #5b6b73; }

/* --------------------------------------------------------------------------
   Leaderboard rank styling
   -------------------------------------------------------------------------- */
.leaderboard-rank-1 { background: rgba(212, 175, 55, 0.18); font-weight: 700; }
.leaderboard-rank-2 { background: rgba(156, 163, 175, 0.22); font-weight: 700; }
.leaderboard-rank-3 { background: rgba(205, 127, 50, 0.18); font-weight: 700; }

/* --------------------------------------------------------------------------
   Dashboard / sidebar helpers
   -------------------------------------------------------------------------- */
.sidebar-nav .list-group-item.active,
.admin-sidebar-nav .list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

.widget-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.widget-card .widget-value {
    font-size: 1.6rem;
    font-weight: 700;
}

/* Toast container fixed to the corner for app.js notifications. */
.toast-container {
    z-index: 1090;
}

/* Selected stars in the product-rating task. */
.task-star.active {
    background-color: var(--accent);
    color: #1d2b27;
    border-color: var(--accent);
}

/* ==========================================================================
   Phase 12 — Live updates (AJAX) feedback.
   ========================================================================== */

/* Subtle background flash applied to any value that changes on a poll. */
@keyframes earndaily-live-flash {
    0%   { background-color: rgba(11, 110, 79, 0.18); }
    100% { background-color: transparent; }
}
.live-update-flash {
    animation: earndaily-live-flash 0.8s ease-out;
    border-radius: 4px;
}

/* Notification bell badge shake on a new unread. */
@keyframes earndaily-bell-shake {
    0%, 100% { transform: translate(-50%, -50%) rotate(0); }
    25%      { transform: translate(-50%, -50%) rotate(12deg); }
    75%      { transform: translate(-50%, -50%) rotate(-12deg); }
}
.bell-shake {
    animation: earndaily-bell-shake 0.4s ease-in-out 2;
}

/* Unread notification accent (works alongside Bootstrap's list-group-item). */
.notif-unread {
    border-left: 3px solid var(--primary);
}

/* ==========================================================================
   Interactive hover system (SRS §Interactive Elements)
   Behaviour 1 — Colour Shift (CSS transitions)
   Behaviour 2 — Liquid-metal magnetic morphing (assets/js/interactions.js)
   Behaviour 3 — Perspective depth shift (CSS lift + shadow + illumination)
   All motion uses GPU-friendly transform/box-shadow only — never layout
   properties — and is fully suppressed under prefers-reduced-motion.
   ========================================================================== */

/* --- Behaviour 1: smooth colour transition on every interactive control --- */
.btn,
.nav-link,
.navbar-toggler,
.list-group-item-action,
.dropdown-item,
.page-link,
a {
    transition: background-color 200ms ease-out,
                color 200ms ease-out,
                border-color 200ms ease-out,
                box-shadow 200ms ease-out;
}

/* Explicit hover colour shifts where Bootstrap's defaults are too subtle. */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--accent);
}

.sidebar-nav .list-group-item-action:hover,
.admin-sidebar-nav .list-group-item-action:hover {
    background-color: rgba(11, 110, 79, 0.08);
    color: var(--secondary);
}

.sidebar-nav .list-group-item-action.active:hover,
.admin-sidebar-nav .list-group-item-action.active:hover {
    color: #fff;
}

/* --- Behaviour 2: elements the JS spring engine drives get a GPU layer --- */
.btn,
.navbar-nav .nav-link,
.sidebar-nav .list-group-item-action,
.admin-sidebar-nav .list-group-item-action {
    will-change: transform;
}

/* --- Behaviour 3: perspective depth shift on cards / panels / containers --- */
.widget-card,
.card {
    transition: transform 220ms ease-out,
                box-shadow 220ms ease-out,
                background-color 220ms ease-out;
    will-change: transform;
}

.widget-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(11, 110, 79, 0.20);
    background-color: #ffffff;            /* illumination */
}

/* Gentler lift for generic Bootstrap panels (stat cards, info containers). */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   Reduced-motion: suppress ALL decorative motion (transforms + keyframes).
   Functional colour transitions (Behaviour 1) are intentionally preserved.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .live-update-flash,
    .bell-shake { animation: none; }

    .widget-card,
    .card {
        transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
    }

    .widget-card:hover,
    .card:hover {
        transform: none;
    }

    /* Neutralise any transform the JS engine may have applied. */
    .btn,
    .navbar-nav .nav-link,
    .sidebar-nav .list-group-item-action,
    .admin-sidebar-nav .list-group-item-action {
        transform: none !important;
    }
}

/* ==========================================================================
   PREMIUM UI LAYER — preloader, progress bar, % overlay, skeletons, glass.
   Goal: a modern fintech feel on top of the existing structure. All motion
   is GPU-friendly and suppressed under prefers-reduced-motion.
   ========================================================================== */

:root {
    --ed-radius: 0.85rem;
    --ed-shadow-sm: 0 1px 3px rgba(16, 38, 31, 0.08);
    --ed-shadow-md: 0 8px 24px rgba(16, 38, 31, 0.12);
    --ed-shadow-lg: 0 18px 40px rgba(11, 110, 79, 0.18);
}

/* --- Page fade-in (only when motion is allowed; reduced-motion = instant) -- */
@media (prefers-reduced-motion: no-preference) {
    body { animation: ed-page-fade 0.45s ease-out both; }
}
@keyframes ed-page-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   1) Branded full-screen preloader
   Markup lives at the top of <body> (includes/header.php) so it paints
   instantly. A pure-CSS auto-hide guarantees it disappears even if JS fails.
   -------------------------------------------------------------------------- */
#ed-preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: radial-gradient(120% 120% at 50% 0%, #0e8a63 0%, var(--primary) 45%, var(--secondary) 100%);
    color: #fff;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    animation: ed-preloader-autohide 0s linear 4s forwards; /* JS hides sooner; this is the safety net */
}
#ed-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
@keyframes ed-preloader-autohide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.ed-preloader-brand {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ed-preloader-brand span { color: var(--accent); }
.ed-preloader-tag {
    font-size: 0.8rem;
    opacity: 0.85;
    letter-spacing: 0.04em;
}
.ed-spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent);
    animation: ed-spin 0.8s linear infinite;
    will-change: transform;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   2) Top progress bar (route changes + AJAX) — NProgress-style
   -------------------------------------------------------------------------- */
#ed-topbar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 2100;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
    opacity: 0;
    transition: width 0.2s ease-out, opacity 0.3s ease;
    will-change: width;
}
#ed-topbar.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   3) Process progress overlay with circular % (task/withdrawal/deposit/etc.)
   -------------------------------------------------------------------------- */
#ed-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 38, 31, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
#ed-progress-overlay.is-active { opacity: 1; visibility: visible; }
.ed-progress-card {
    background: #fff;
    border-radius: var(--ed-radius);
    box-shadow: var(--ed-shadow-lg);
    padding: 1.75rem 2rem;
    text-align: center;
    min-width: 240px;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.25s ease;
}
#ed-progress-overlay.is-active .ed-progress-card { transform: none; }
.ed-ring {
    --p: 0;
    width: 96px;
    height: 96px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #fff 78%, transparent 79% 100%),
        conic-gradient(var(--primary) calc(var(--p) * 1%), #e7ece9 0);
    transition: background 0.2s linear;
}
.ed-ring-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary);
}
.ed-progress-label {
    font-weight: 600;
    color: var(--text);
}
.ed-progress-sub { font-size: 0.8rem; color: #6c757d; }

/* --------------------------------------------------------------------------
   4) Skeleton shimmer loaders (drop .ed-skeleton on any placeholder block)
   -------------------------------------------------------------------------- */
.ed-skeleton {
    position: relative;
    overflow: hidden;
    background: #e9edeb;
    border-radius: 0.5rem;
    color: transparent !important;
}
.ed-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: ed-shimmer 1.3s infinite;
}
@keyframes ed-shimmer { 100% { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   5) Premium surface polish — glass cards, refined navbar + buttons
   -------------------------------------------------------------------------- */
.widget-card,
.card {
    border-radius: var(--ed-radius);
}
.widget-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.1) blur(2px);
    border: 1px solid rgba(16, 38, 31, 0.05);
    box-shadow: var(--ed-shadow-sm);
}
.navbar.bg-primary {
    background: linear-gradient(120deg, var(--secondary), var(--primary)) !important;
    box-shadow: 0 2px 14px rgba(9, 77, 56, 0.25);
}
.btn { border-radius: 0.6rem; font-weight: 600; }
.btn-primary { box-shadow: 0 4px 14px rgba(11, 110, 79, 0.25); }

/* Buttons that carry an inline working-spinner (set by ui.js) */
.btn[data-ed-loading] { position: relative; color: transparent !important; pointer-events: none; }
.btn[data-ed-loading]::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 1rem; height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ed-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    #ed-preloader { animation: none; }
    .ed-spinner,
    .btn[data-ed-loading]::after { animation: none; }
    .ed-skeleton::after { animation: none; }
    #ed-progress-overlay,
    #ed-progress-overlay .ed-progress-card { transition: opacity 0.2s ease; transform: none; }
}