/* ═══════════════════════════════════════════════════════════════════════
   HABITAT CALCULATOR — UNIFIED REDESIGN LAYER
   ───────────────────────────────────────────────────────────────────────
   Brings the older Bootstrap-styled calculator pages in line with the new
   mockup-inspired language already used by Quick Start (qs-*) and the
   Investment Questions measures step (im-*): a soft lilac surface, white
   rounded cards, colourful gradient accent headers, polished soft inputs,
   gradient primary CTAs and cleaner tables/alerts.

   SCOPE: every rule is scoped under the page-content wrappers
   (.app-content = MobileLayout, .main-content .content = MainLayout) so the
   navbar (<header>) and footer (<footer>) keep their current design.
   Loaded LAST in index.html so it wins specificity ties over theme/app css.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --rc-bg: #F6F4FF;
    --rc-ink: #191430;
    --rc-muted: #6E6A85;
    --rc-line: #EBE7F8;
    --rc-blue1: #22C8F0;  --rc-blue2: #3E7BFF;
    --rc-green1: #19D979; --rc-green2: #06B6A4;
    --rc-amber1: #FFB200; --rc-amber2: #FF7A00;
    --rc-purple1: #B47CFF; --rc-purple2: #7C4DFF;
}

/* ── Page surface ──────────────────────────────────────────────────────
   Lilac body + content area to match the mockup's page background. Navbar
   and footer have their own opaque backgrounds, so only the content + any
   gutters are tinted. */
body { background-color: #FAFAF6; }
/* The header colour gently spills into the top of the page and then fades over
   a long, smooth ramp toward a soft cream/near-white base lower down — so the
   page feels progressively lighter as you scroll. Header (.app-hero) unchanged. */
.app-content,
.main-content .content {
    background-color: #FAFAF6;
    background-image: linear-gradient(180deg,
        rgba(132, 164, 222, 0.34) 0,
        rgba(132, 164, 222, 0.18) 130px,
        rgba(146, 133, 208, 0.08) 320px,
        rgba(132, 164, 222, 0) 580px);
    background-repeat: no-repeat;
}

/* Page-level titles (e.g. "Investment ROI Analysis", "Investment Questions") */
.app-content h3,
.main-content .content h3 { font-weight: 800; color: var(--rc-ink); }

/* ── Cards ──────────────────────────────────────────────────────────────
   Rounded, soft-shadowed and FULL-CARD tinted (not just the header strip).
   The whole-card gradient is keyed off the accent the header already
   declares (via :has()), so each card type reads in its own colour family
   while staying light enough for dark body text. Cards with their own
   bespoke gradients (.home-action-card) are excluded so they keep theirs. */
.app-content .card:not(.home-action-card):not(.home-partners-card),
.main-content .content .card:not(.home-action-card):not(.home-partners-card) {
    border: none !important;
    border-radius: 18px;
    /* gentle base tint so no card is flat dead-white */
    background: linear-gradient(160deg, #FBFAFF 0%, #FFFFFF 100%);
    box-shadow: 0 12px 32px -18px rgba(60, 40, 140, 0.32), 0 2px 8px rgba(60, 40, 140, 0.05);
    overflow: hidden;
}
/* Full-card colour families — header accent drives the whole-card tint */
.app-content .card:has(> .card-header.bg-pastel-blue),
.main-content .content .card:has(> .card-header.bg-pastel-blue) {
    background: linear-gradient(160deg, #E6F1FF 0%, #F5FAFF 100%);
}
.app-content .card:has(> .card-header.bg-pastel-green),
.main-content .content .card:has(> .card-header.bg-pastel-green) {
    background: linear-gradient(160deg, #E2F8EE 0%, #F1FCF7 100%);
}
.app-content .card:has(> .card-header.bg-pastel-beige),
.main-content .content .card:has(> .card-header.bg-pastel-beige) {
    background: linear-gradient(160deg, #FFF2DA 0%, #FFF9EE 100%);
}
.app-content .card:has(> .card-header.bg-light),
.main-content .content .card:has(> .card-header.bg-light) {
    background: linear-gradient(160deg, #F4F0FF 0%, #FCFAFF 100%);
}
/* Results card declares .bg-light on the card itself (success header) → green */
.app-content .card.bg-light,
.main-content .content .card.bg-light {
    background: linear-gradient(160deg, #E2FAEF 0%, #F1FCF7 100%) !important;
}
/* Nested / sub-cards (e.g. per-measure parameter cards) — lighter lift */
.app-content .card .card,
.main-content .content .card .card {
    box-shadow: 0 4px 16px -10px rgba(60, 40, 140, 0.22);
    border-radius: 14px;
}

/* ── Card headers → gradient accent strips ─────────────────────────────── */
.app-content .card-header,
.main-content .content .card-header {
    border-bottom: none;
    padding: 14px 18px;
    font-weight: 800;
}
.app-content .card-header.bg-pastel-blue,
.main-content .content .card-header.bg-pastel-blue {
    background: linear-gradient(135deg, var(--rc-blue1), var(--rc-blue2)) !important;
}
.app-content .card-header.bg-pastel-green,
.main-content .content .card-header.bg-pastel-green {
    background: linear-gradient(135deg, var(--rc-green1), var(--rc-green2)) !important;
}
.app-content .card-header.bg-pastel-beige,
.main-content .content .card-header.bg-pastel-beige {
    background: linear-gradient(135deg, var(--rc-amber1), var(--rc-amber2)) !important;
}
.app-content .card-header.bg-success,
.main-content .content .card-header.bg-success {
    background: linear-gradient(135deg, var(--rc-green1), var(--rc-green2)) !important;
}
/* White text + icons on the saturated gradient headers (nested coloured
   badges keep their own background; only their text turns white, which is
   already the case for .bg-success badges). */
.app-content .card-header[class*="bg-pastel"],
.app-content .card-header[class*="bg-pastel"] *,
.app-content .card-header.bg-success,
.app-content .card-header.bg-success *,
.main-content .content .card-header[class*="bg-pastel"],
.main-content .content .card-header[class*="bg-pastel"] *,
.main-content .content .card-header.bg-success,
.main-content .content .card-header.bg-success * {
    color: #fff !important;
}
/* Inner sub-card headers (bg-light) → subtle lilac tint, dark text */
.app-content .card-header.bg-light,
.main-content .content .card-header.bg-light {
    background: #F1ECFB !important;
    color: var(--rc-ink) !important;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.app-content .form-control,
.app-content .form-select,
.main-content .content .form-control,
.main-content .content .form-select {
    border: 2px solid var(--rc-line);
    border-radius: 13px;
    padding: 11px 14px;
    font-weight: 600;
    color: var(--rc-ink);
    background-color: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.app-content .form-control:focus,
.app-content .form-select:focus,
.main-content .content .form-control:focus,
.main-content .content .form-select:focus {
    border-color: var(--rc-blue2);
    box-shadow: 0 0 0 4px rgba(62, 123, 255, 0.14);
}
.app-content .form-label,
.main-content .content .form-label {
    font-weight: 800;
    color: var(--rc-muted);
    font-size: .8rem;
    letter-spacing: .2px;
    margin-bottom: 5px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.app-content .btn,
.main-content .content .btn { border-radius: 13px; font-weight: 700; }
.app-content .btn-lg,
.main-content .content .btn-lg { border-radius: 15px; padding: 13px 20px; }

/* Primary CTA → green gradient, matching the Quick Start / measures step
   "Save & continue" action so the app's primary action colour is consistent. */
.app-content .btn-primary,
.main-content .content .btn-primary {
    border: none;
    background: linear-gradient(135deg, var(--rc-green1), var(--rc-green2));
    box-shadow: 0 12px 26px -12px rgba(6, 182, 164, 0.7);
    color: #fff;
}
.app-content .btn-primary:hover,
.main-content .content .btn-primary:hover {
    background: linear-gradient(135deg, var(--rc-green1), var(--rc-green2));
    filter: brightness(1.04);
    color: #fff;
}
.app-content .btn-primary:disabled,
.app-content .btn-primary.disabled,
.main-content .content .btn-primary:disabled {
    filter: grayscale(.35);
    opacity: .65;
    box-shadow: none;
}
/* Ghost secondary (Back-style) buttons */
.app-content .btn-outline-secondary,
.main-content .content .btn-outline-secondary {
    border: 2px solid var(--rc-line);
    color: var(--rc-muted);
    background: #fff;
}
.app-content .btn-outline-secondary:hover,
.main-content .content .btn-outline-secondary:hover {
    background: #F1EEFB;
    color: var(--rc-ink);
    border-color: var(--rc-line);
}

/* ── Step indicator bubbles → gradient ──────────────────────────────────── */
.app-content .rounded-circle.bg-primary,
.main-content .content .rounded-circle.bg-primary {
    background: linear-gradient(135deg, var(--rc-blue1), var(--rc-blue2)) !important;
}
.app-content .rounded-circle.bg-success,
.main-content .content .rounded-circle.bg-success {
    background: linear-gradient(135deg, var(--rc-green1), var(--rc-green2)) !important;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.app-content .table thead th,
.app-content .table thead.table-light th,
.main-content .content .table thead th {
    color: var(--rc-muted);
    font-weight: 800;
    background: transparent;
    border-bottom: 2px solid var(--rc-line);
}
.app-content .table td,
.main-content .content .table td { border-color: #F0EDFA; vertical-align: middle; }
.app-content .table-hover tbody tr:hover,
.main-content .content .table-hover tbody tr:hover { background-color: #F6F4FF; }

/* ── Alerts → soft, rounded, borderless ─────────────────────────────────── */
.app-content .alert,
.main-content .content .alert { border: none; border-radius: 14px; font-weight: 600; }
.app-content .alert-info,    .main-content .content .alert-info    { background: #EAF2FF; color: #1B4F9B; }
.app-content .alert-success, .main-content .content .alert-success { background: #E6FBF1; color: #0B7A53; }
.app-content .alert-warning, .main-content .content .alert-warning { background: #FFF6E5; color: #9A6400; }
.app-content .alert-danger,  .main-content .content .alert-danger  { background: #FFECEF; color: #B0263C; }

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION — the app's primary section navigation, relocated here
   from the burger menu. NOT scoped to .app-content because the bar is a
   fixed element rendered at the layout root (sibling of <header>/<footer>).
   Each item carries its own accent pair (--c1/--c2, set inline) that paints
   the icon chip + label when active.
   ═══════════════════════════════════════════════════════════════════════ */

/* Reserve space so content + the copyright footer never hide behind the bar
   (layout roots: .app-layout = MobileLayout, .page = MainLayout). */
.app-layout,
.page { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: stretch; gap: 2px;
    margin: 0 auto; max-width: 720px;
    background: #fff;
    border-top: 1px solid #EEE9FB;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -12px 30px -16px rgba(60, 40, 140, 0.40);
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
}
.bottom-nav-item {
    --c1: #9A95B0; --c2: #9A95B0;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 2px; cursor: pointer; text-decoration: none; user-select: none;
    color: #9A95B0;
    transition: color .18s ease, transform .12s ease;
}
.bottom-nav-item:active { transform: scale(.93); }
.bottom-nav-item .bn-ic {
    width: 46px; height: 30px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.2rem;
    transition: all .2s ease;
}
.bottom-nav-item .bn-label {
    font-size: .62rem; font-weight: 800; line-height: 1.12; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bottom-nav-item:hover .bn-ic { background: color-mix(in srgb, var(--c2) 12%, #fff); color: var(--c2); }
.bottom-nav-item.active { color: var(--c2); }
.bottom-nav-item.active .bn-ic {
    color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 8px 16px -7px var(--c2);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP GRADIENT HERO (global header) — one bold block across the calculator:
   a row with the real logo, app name and the controls (language / refresh /
   logout) pinned to the RIGHT, then the current page's title (+ subtitle on
   home). Replaces the old light navbar strip. Lives in <header>, so these
   rules are intentionally unscoped. Controls keep their original behaviour;
   only their presentation changes. The header scrolls (not sticky) so the
   tall hero doesn't eat the viewport — the fixed bottom nav handles nav.
   ═══════════════════════════════════════════════════════════════════════ */
.app-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    /* Soft mockup gradient (purple → blue → teal-green), diagonal — matches the
       new calculator design language; flows into the soft page wash below. */
    background: linear-gradient(120deg, #9285D0, #84A4DE 52%, #79C0B4);
    padding: 14px 18px 18px;
}
.app-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(220px 220px at 92% -10%, rgba(255, 255, 255, 0.18), transparent 70%);
}
/* top row: brand grows, controls stay on the right (never wrap below) */
.app-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;          /* let the title wrap inside its column instead of pushing controls down */
    text-decoration: none;
}
.app-brand-logo {
    height: 40px;
    width: auto;
    flex: none;
    display: block;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);  /* white chip keeps the real logo crisp on the gradient */
    padding: 4px;
}
.app-brand-title {
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.12;
    letter-spacing: .1px;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(20, 10, 60, 0.28);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-hero-controls { display: flex; align-items: center; gap: 8px; flex: none; }
.app-hero-controls .app-ctrl {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff; font-size: 1rem; cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}
.app-hero-controls .app-ctrl:hover { background: rgba(255, 255, 255, 0.28); }
.app-hero-controls .app-ctrl:active { transform: scale(.92); }
/* language switcher pill, restyled for the gradient bar */
.app-hero-controls .lang-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #14304B; font-weight: 800;
    border-radius: 99px; min-height: 38px; min-width: 44px;
}
/* hero title block (per page) */
.app-hero-body { position: relative; z-index: 1; padding: 10px 2px 2px; }
/* Title + subtitle are plain text inside the hero — never a boxed/outlined
   block. Explicitly clear any inherited border/outline/background/shadow
   (e.g. the global *:focus-visible outline) so no rectangle is drawn. */
.app-hero-body,
.app-hero-h1,
.app-hero-sub {
    border: none;
    background: transparent;
    box-shadow: none;
}
.app-hero-body:focus, .app-hero-body:focus-visible,
.app-hero-h1:focus, .app-hero-h1:focus-visible { outline: none; }
.app-hero-h1 {
    font-weight: 800; font-size: 1.6rem; line-height: 1.18; margin: 0;
    text-shadow: 0 2px 14px rgba(20, 10, 60, 0.28);
}
.app-hero-sub { font-size: .95rem; font-weight: 600; opacity: .95; line-height: 1.5; margin: 8px 0 0; max-width: 46ch; }
@media (max-width: 380px) {
    .app-brand-title { font-size: .9rem; }
    .app-brand-logo { height: 36px; }
    .app-hero-h1 { font-size: 1.4rem; }
}