/* ==========================================================================
   MyDataBundle - shared look (soft lavender, raised glass cards, dark mode)
   Used by every user page. The dashboard uses the same colours and values.
   Dark mode: <html data-theme="dark">, saved in localStorage as mdb_theme.
   ========================================================================== */

:root {
    --bg: #ede8fe;
    --ink: #1503cc;            /* bright indigo: titles, icons, active items */
    --ink-soft: #3b25c9;
    --navy: #040076;           /* card titles and values */
    --violet: #4d38b8;         /* subtitles and labels */
    --hint: #6f66b3;           /* small hints, placeholders */
    --nav: #3f3392;            /* inactive bottom-nav items */
    --line: rgba(138,116,224,.2);

    --glow: rgba(138,116,224,.36);
    --glow-soft: rgba(138,116,224,.22);

    --card-bg: linear-gradient(180deg, #f4f1ff 0%, #ece8fd 100%);
    --card-bd: 1px solid rgba(255,255,255,.85);
    --card-sh: 0 .22rem .6rem rgba(138,116,224,.36), -.1rem -.1rem .35rem rgba(255,255,255,.9), inset 0 .06rem .1rem #fff;
    --card-sh-sm: 0 .14rem .4rem rgba(138,116,224,.3), -.06rem -.06rem .25rem rgba(255,255,255,.9), inset 0 .05rem .08rem #fff;

    --well-bg: linear-gradient(145deg, #e7e1fe, #e2dbfd);
    --well-bd: 1px solid rgba(255,255,255,.35);
    --well-sh: inset .1rem .1rem .3rem rgba(150,128,225,.32), inset -.1rem -.1rem .3rem rgba(255,255,255,.75);

    --pill-bg: linear-gradient(160deg, #f8f6ff 0%, #ebe6fd 100%);
    --pill-sh: 0 .2rem .55rem rgba(138,116,224,.36), -.08rem -.08rem .3rem rgba(255,255,255,.9), inset 0 .06rem .12rem #fff, inset 0 -.08rem .2rem rgba(150,128,225,.18);

    --btn-bg: linear-gradient(180deg, #6d49f1 0%, #5333d7 44%, #432ab3 66%, #3216ab 100%);
    --btn-bd: 1px solid rgba(255,255,255,.22);
    --btn-sh: 0 .35rem .9rem rgba(96,70,220,.4), 0 .08rem .25rem rgba(70,40,200,.3), inset 0 .06rem .12rem rgba(255,255,255,.4), inset 0 -.12rem .3rem rgba(20,5,120,.4);

    --bar-bg: rgba(237,232,254,.86);
    --sheet-bg: #f4f1ff;
    --overlay: rgba(20,12,70,.5);

    --ok: #15803d;   --ok-bg: #ecfdf5;   --ok-line: #4ade80;
    --err: #b91c1c;  --err-bg: #fef2f2;  --err-line: #f87171;
    --warn: #92400e; --warn-bg: #fffbeb; --warn-line: #fbbf24;
    --info: #4338ca; --info-bg: #eef2ff; --info-line: #818cf8;

    --r-xl: 22px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;

    /* kept so older inline styles keep working */
    --text-main: var(--navy);
    --text-sub: var(--violet);
    --text-hint: var(--hint);
    --purple-1: var(--ink);
    --purple-text: var(--navy);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0b24;
    --ink: #9b91ff;
    --ink-soft: #b3abff;
    --navy: #efeaff;
    --violet: #b3abf0;
    --hint: #8d86c4;
    --nav: #a69ee0;
    --line: rgba(255,255,255,.1);

    --glow: rgba(0,0,0,.5);
    --glow-soft: rgba(0,0,0,.35);

    --card-bg: linear-gradient(180deg, #242050 0%, #1a1642 100%);
    --card-bd: 1px solid rgba(255,255,255,.08);
    --card-sh: 0 .22rem .7rem rgba(0,0,0,.5), inset 0 .06rem .1rem rgba(255,255,255,.08);
    --card-sh-sm: 0 .14rem .45rem rgba(0,0,0,.45), inset 0 .05rem .08rem rgba(255,255,255,.07);

    --well-bg: linear-gradient(145deg, #2a2562, #221e56);
    --well-bd: 1px solid rgba(255,255,255,.05);
    --well-sh: inset .1rem .1rem .3rem rgba(0,0,0,.45), inset -.08rem -.08rem .25rem rgba(150,130,255,.12);

    --pill-bg: linear-gradient(180deg, #242050 0%, #1a1642 100%);
    --pill-sh: 0 .22rem .7rem rgba(0,0,0,.5), inset 0 .06rem .1rem rgba(255,255,255,.08);

    --bar-bg: rgba(14,11,36,.86);
    --sheet-bg: #1b1742;
    --overlay: rgba(4,2,20,.72);

    --ok: #4ade80;   --ok-bg: rgba(34,197,94,.14);   --ok-line: #22c55e;
    --err: #fca5a5;  --err-bg: rgba(239,68,68,.14);  --err-line: #ef4444;
    --warn: #fcd34d; --warn-bg: rgba(245,158,11,.14); --warn-line: #f59e0b;
    --info: #a5b4fc; --info-bg: rgba(99,102,241,.16); --info-line: #818cf8;
}

html { font-size: clamp(14.5px, 3.883vw, 17.5px); -webkit-text-size-adjust: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--navy);
    min-height: 100vh;
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    position: relative;
}

/* ── Soft lavender background ── */
.bg-waves { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.bg-waves svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html[data-theme="dark"] .bg-waves svg { display: none; }
html[data-theme="dark"] .bg-waves::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(60% 38% at 100% 0%, rgba(110,84,240,.38) 0%, rgba(110,84,240,0) 70%),
        radial-gradient(70% 40% at 100% 76%, rgba(92,66,214,.26) 0%, rgba(92,66,214,0) 70%),
        radial-gradient(70% 36% at 0% 100%, rgba(92,66,214,.3) 0%, rgba(92,66,214,0) 70%);
}

/* ── Top bar (same on every page) ── */
.nx-top {
    position: sticky; top: 0; z-index: 60;
    background: var(--bar-bg);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nx-top-in {
    max-width: 34rem; margin: 0 auto;
    padding: calc(.55rem + env(safe-area-inset-top, 0px)) 1.1rem .55rem;
    display: flex; align-items: center; gap: .6rem;
}
.nx-back, .nx-theme, .nx-top-link {
    height: 1.9rem; min-width: 1.9rem;
    background: var(--pill-bg);
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    color: var(--ink); text-decoration: none; flex-shrink: 0;
    box-shadow: var(--pill-sh);
    font-family: inherit; cursor: pointer;
    transition: box-shadow .2s, transform .15s;
}
html[data-theme="dark"] .nx-back, html[data-theme="dark"] .nx-theme, html[data-theme="dark"] .nx-top-link { border-color: rgba(255,255,255,.08); }
.nx-back:active, .nx-theme:active, .nx-top-link:active { transform: translateY(1px); }
.nx-back svg, .nx-theme svg { width: .95rem; height: .95rem; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-theme { border: 1px solid rgba(255,255,255,.95); padding: 0; }
.nx-top-link { padding: 0 .75rem; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.nx-title { flex: 1; min-width: 0; font-size: .95rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-theme .ico-sun { display: none; }
html[data-theme="dark"] .nx-theme .ico-sun { display: block; }
html[data-theme="dark"] .nx-theme .ico-moon { display: none; }

.nx-wrap { max-width: 34rem; margin: 0 auto; padding: .35rem 1.1rem 0; position: relative; z-index: 2; }

/* ── Floating bottom nav (same as the dashboard) ── */
.bottom-nav {
    position: fixed; left: .4rem; right: .4rem; max-width: 34rem; margin: 0 auto;
    bottom: calc(.53rem + env(safe-area-inset-bottom, 0px));
    height: 2.89rem; border-radius: 1.5rem;
    background: linear-gradient(180deg, #faf8ff 0%, #f3f0fe 100%);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: 0 .3rem .95rem var(--glow), -.1rem -.1rem .4rem rgba(255,255,255,.9), inset 0 .06rem .1rem #fff;
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 .1rem .1rem;
    z-index: 1000;
}
.nav-item {
    text-decoration: none; color: var(--nav); font-size: max(9px, .54rem); font-weight: 700;
    display: flex; flex-direction: column; align-items: center; gap: .03rem;
    padding: 0; transition: color .2s; line-height: 1.2;
}
.nav-item.active { color: #0e01e3; font-weight: 700; }
.nav-icon-wrap { width: 2.3rem; height: 1.46rem; display: flex; align-items: center; justify-content: center; border-radius: .6rem; transition: box-shadow .2s; }
.nav-item.active .nav-icon-wrap {
    background: linear-gradient(180deg, #ece7fd, #e2daf9);
    box-shadow: 0 .15rem .4rem var(--glow), inset .06rem .06rem .15rem rgba(255,255,255,.9), inset -.05rem -.05rem .15rem rgba(150,128,225,.2);
}
.nav-svg { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .bottom-nav { background: linear-gradient(180deg, #221e4c 0%, #181440 100%); border-color: rgba(255,255,255,.08); box-shadow: 0 .3rem 1rem rgba(0,0,0,.6), inset 0 .06rem .1rem rgba(255,255,255,.08); }
html[data-theme="dark"] .nav-item.active { color: #b9b2ff; }
html[data-theme="dark"] .nav-item.active .nav-icon-wrap { background: linear-gradient(180deg, #2f2a6c, #262262); box-shadow: 0 .15rem .4rem rgba(0,0,0,.5), inset .06rem .06rem .15rem rgba(255,255,255,.1); }

/* ── Shared building blocks ── */
.nx-card { background: var(--card-bg); border: var(--card-bd); box-shadow: var(--card-sh); border-radius: var(--r-xl); }
.nx-well { background: var(--well-bg); border: var(--well-bd); box-shadow: var(--well-sh); border-radius: var(--r-md); }
.nx-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px; border: var(--btn-bd); border-radius: var(--r-md);
    background: var(--btn-bg); color: #fff; box-shadow: var(--btn-sh);
    font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none;
    transition: transform .15s, box-shadow .2s, opacity .2s;
}
.nx-btn:active { transform: translateY(1px); }
.nx-btn:disabled { opacity: .5; cursor: not-allowed; }

/* dark: selects use the dark native control */
html[data-theme="dark"] select option { background: #1b1742; color: #efeaff; }