/* =====================================================
   Crealco / Serene — Global Theme Override
   Loaded AFTER style.css + responsive.css so it wins.
   Re-skins the whole portal to the Crealco palette and
   the dark→light grey background from the Serene deck.
   ===================================================== */

:root {
    /* ---- Crealco brand palette ---- */
    --cre-cyan:      #44c2de;
    --cre-coral:     #f05161;
    --cre-indigo:    #2e3092;
    --cre-gold:      #d9a25e;
    --cre-lime:      #c8db45;
    --cre-grey:      #6d6f71;
    --cre-grey-dark: #58585a;

    /* ---- Signature gradients (from the deck) ---- */
    --cre-grad-complete: linear-gradient(90deg, #c8db45 0%, #44c2de 100%);   /* LEVEL COMPLETE / MAP pills */
    --cre-grad-header:   linear-gradient(90deg, #f05161 0%, #d9a25e 55%, #c8db45 100%); /* LEVELS header pill */
    --cre-grad-locked:   linear-gradient(135deg, #f05161 0%, #d9a25e 55%, #c8db45 100%); /* locked card wash */
    --cre-grad-rainbow:  linear-gradient(120deg, #44c2de 0%, #c8db45 30%, #d9a25e 60%, #f05161 100%);
    --cre-grad-bg:       linear-gradient(160deg, #58585a 0%, #6d6f71 34%, #b7b9bb 72%, #e7e8e9 100%);

    /* ---- Remap the app's semantic tokens onto Crealco ---- */
    --primary:               #2e3092;
    --on-primary:            #ffffff;
    --primary-container:     #44c2de;
    --on-primary-container:  #06263a;
    --secondary:             #0a97b0;
    --on-secondary:          #ffffff;
    --secondary-container:   #c8db45;
    --on-secondary-container:#2c3a00;
    --tertiary:              #7a9a17;
    --on-tertiary:           #ffffff;
    --tertiary-container:    #d9a25e;
    --on-tertiary-container: #3a2408;
    --surface:               #f7f8f9;
    --on-surface:            #24252a;
    --surface-variant:       #e9eaec;
    --on-surface-variant:    #52545a;
    --outline:               #8a8d93;
    --outline-variant:       #d5d7da;
}

/* ---- Dark→light grey background, mobile-safe.
   Uses a fixed pseudo-element instead of background-attachment:fixed
   (which is janky on iOS). Always fills the viewport. ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #ffffff;
}
body {
    background: #ffffff !important;
    min-height: 100vh;
}

/* Floating dark "pill" nav — ~85% wide, rounded ends, centred */
.navbar {
    width: 92% !important;
    max-width: 1600px;
    margin: 16px auto !important;
    background: #2b2b2d !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.20) !important;
    position: sticky;
    top: 16px;
    z-index: 100;
}
.navbar .nav-link,
.navbar .user-name,
.navbar .nav-section-title { color: #f2f2f3 !important; }
.navbar .logo-text { color: var(--cre-lime) !important; }   /* Crealco green wordmark */
/* Inactive tab hover — subtle */
.navbar .nav-link:hover { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; }
/* Active tab — lime pill with black text (matches the reference) */
.navbar .nav-link.active,
.navbar .nav-link.active:hover {
    background: var(--cre-lime) !important;
    color: #1a1a1a !important;
}
.navbar .nav-toggle span { background: #f2f2f3 !important; }

/* ---- Nav layout: ONE line. Logo + user menu stay pinned;
       only the middle tab strip scrolls if space runs out. ---- */
.navbar .nav-container {
    max-width: none;
    flex-wrap: nowrap;          /* single row, always */
    column-gap: 6px;
    padding: 7px 20px;
    align-items: center;
}
.navbar .nav-brand { flex: 0 0 auto; }
.navbar .nav-menu {
    flex: 1 1 auto;             /* take the middle space */
    flex-wrap: nowrap;
    gap: 3px;
    margin-left: 12px;
    min-width: 0;
    overflow-x: auto;          /* only the tabs scroll if too many */
    scrollbar-width: none;     /* hide scrollbar (Firefox) */
}
.navbar .nav-menu::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */
.navbar .nav-link {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
    border-radius: 9999px;   /* pill-shaped tabs */
}
.navbar .nav-user { flex: 0 0 auto; margin-left: 12px; white-space: nowrap; }
.navbar .nav-section-title { color: #b9bbbe !important; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.navbar .nav-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.18); margin: 0 6px; }
.navbar .logout { font-size: 0.9rem !important; }

/* ---- Footer: dark Crealco grey (matches the nav) + brand gradient accent ---- */
.footer {
    position: relative;
    background: #2b2b2d !important;
    border-top: none !important;
}
.footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #44c2de 0%, #c8db45 33%, #d9a25e 66%, #f05161 100%);
}
.footer-section h4 { color: #ffffff !important; }
.footer-section p { color: rgba(255,255,255,0.92) !important; opacity: 1 !important; }
.footer-section a { color: rgba(255,255,255,0.85) !important; }
.footer-section a:hover { color: var(--cre-lime) !important; }
.footer-bottom { opacity: 1 !important; border-top-color: rgba(255,255,255,0.22) !important; }
.footer-bottom p { color: rgba(255,255,255,0.9) !important; }

/* =====================================================
   Admin console — remap to the Crealco palette
   (loaded after admin.css, so these tokens win)
   ===================================================== */
:root {
    --admin-sidebar-bg:          #2b2b2d;   /* Crealco charcoal — matches the site footer */
    --admin-sidebar-bg-lighter:  #3a3a3d;
    --admin-sidebar-text:        #b9bbc0;
    --admin-sidebar-text-active: #14252b;
    --admin-accent:              #44c2de;   /* Crealco cyan */
    --admin-accent-hover:        #2aa9c6;
    --admin-content-bg:          #f5f6f8;
    --admin-card-bg:             #ffffff;
    --admin-border:              #e6e8ec;
    --admin-text-primary:        #24252a;
    --admin-text-secondary:      #5b5d6b;
    --admin-text-muted:          #9aa0ad;
    --admin-success:             #6f9a12;   /* lime-green */
    --admin-danger:              #f05161;   /* Crealco coral */
    --admin-warning:             #d9a25e;   /* Crealco gold */
}
/* Positive figures + progress bars use the brand's lime→cyan */
.admin-content .stat-progress-fill,
.admin-content .progress-fill,
.admin-content [class*="readiness"] .fill { background: var(--cre-grad-complete) !important; }
/* Primary actions become the brand gradient pill */
.admin-content .btn-primary,
.admin-content .admin-btn-primary,
.admin-content button.primary {
    background: var(--cre-grad-complete) !important;
    color: #06263a !important;
    border: none !important;
}
/* "Back to Site" link in the admin sidebar */
.admin-nav-backsite {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #ffffff !important;
    margin-bottom: 10px;
    font-weight: 600;
}
.admin-nav-backsite:hover { background: var(--cre-grad-complete) !important; color: #06263a !important; }

/* =====================================================
   Targeted fixes
   ===================================================== */

/* Level Map — progress card text always readable grey (any page-CSS version) */
.jr-topbar-label,
.jr-progress-sub { color: #5b5d6b !important; }
.jr-topbar-value,
.jr-skips-value { color: #24252a !important; }

/* Profile hero — blue → green gradient (overrides any deployed profile.css) */
.pr-hero {
    background: linear-gradient(120deg, #1c7f97 0%, #44c2de 45%, #9ec72b 100%) !important;
}
.pr-hero::before { display: none !important; } /* drop the warm corner wash so it stays clean blue→green */

/* =====================================================
   Reusable Serene components (used across pages)
   ===================================================== */

/* Gradient pill — the deck's LEVEL COMPLETE / LEVELS headers */
.cre-pill {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 9999px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    background: var(--cre-grad-complete);
}
.cre-pill--header { background: var(--cre-grad-header); }
.cre-pill--complete { background: var(--cre-grad-complete); }

/* Dark rounded container — the deck's card frames */
.cre-frame {
    background: var(--cre-grey-dark);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

/* The Serene wavy topographic texture, as a pure-CSS SVG data-URI.
   Apply .cre-texture to any element for the brand "contour" look. */
.cre-texture {
    background-image:
        var(--cre-tex-tint, linear-gradient(135deg, rgba(200,219,69,0.85), rgba(68,194,222,0.85))),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='white' stroke-opacity='0.16' stroke-width='1.1'><path d='M-20 40 Q60 0 120 40 T260 40'/><path d='M-20 70 Q60 30 120 70 T260 70'/><path d='M-20 100 Q60 60 120 100 T260 100'/><path d='M-20 130 Q60 90 120 130 T260 130'/><path d='M-20 160 Q60 120 120 160 T260 160'/><path d='M-20 190 Q60 150 120 190 T260 190'/><path d='M-20 220 Q60 180 120 220 T260 220'/></g></svg>");
    background-size: cover, 240px 240px;
    background-blend-mode: normal, overlay;
}
.cre-texture--complete { --cre-tex-tint: linear-gradient(135deg, rgba(200,219,69,0.92), rgba(68,194,222,0.92)); }
.cre-texture--locked   { --cre-tex-tint: linear-gradient(135deg, rgba(240,81,97,0.92), rgba(217,162,94,0.92) 55%, rgba(200,219,69,0.92)); }

/* Lock glyph for locked cards */
.cre-lock {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: #fff; border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.cre-lock svg { width: 34px; height: 34px; }

/* Page heading — the main-page style: dark text with one gradient word.
   Use on every page instead of the dark pill-in-a-grey-frame headers. */
.cre-page-head { text-align: center; max-width: 1100px; margin: 34px auto 22px; padding: 0 20px; }
.cre-page-head h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; color: #24252a; line-height: 1.12; margin: 0; }
.cre-page-head .sub { color: #5b5d6b; font-size: 1.05rem; margin-top: 10px; }
.cre-grad-word {
    background: var(--cre-grad-complete);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* White card with a soft grey drop shadow (countdown tiles, content cards) */
.cre-card-white {
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06) !important;
    border: 1px solid #eceef0 !important;
    color: #24252a !important;
}

/* Green completion check */
.cre-check {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--cre-grad-complete);
    display: grid; place-items: center;
    color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Buttons re-skinned to brand */
.btn-primary, .hp-notify-btn {
    background: var(--cre-grad-complete) !important;
    color: #06263a !important;
    border: none !important;
}
.btn-primary:hover, .hp-notify-btn:hover { filter: brightness(1.04); }

/* ---- Star rating (shared: rate page + admin) ---- */
.cre-star { color: #d5d7da; font-size: 20px; line-height: 1; }
.cre-star.is-on { color: #f2b21e; }