/* =====================================================================
   OncoCalcRx — experimental pastel theme.
   Colours apply on every screen; the full-bleed "native app" layout is for
   phones, and a desktop block (≥ 601px) at the end restores a centred card.
   Print is untouched (everything is inside @media screen).
   One consistent multi-pastel palette on every page: pink, lavender,
   light blue, mint and butter yellow, each used for a fixed role.
   ===================================================================== */

.app-brand { display: none; }

@media screen {

    :root {
        --ink: #2e2a47;
        --muted: #6e6a85;
        --line: #e7e3f0;
        --surface: #ffffff;
        --bg: #fbfaff;

        --blue: #dcebfb;      --blue-deep: #3e6fa8;
        --lavender: #ebe5fa;  --lavender-deep: #6b5ba8;
        --mint: #dcf3e6;      --mint-deep: #2f7d5b;
        --yellow: #fff3c9;    --yellow-deep: #8a6a00;
        --pink: #fce4ec;      --pink-deep: #a84b6e;
        --peach: #ffe8d9;     --peach-deep: #a3592c;

        /* primary actions + focus */
        --tint: var(--lavender);
        --accent: var(--lavender-deep);
    }

    html { background: var(--bg); }
    body {
        background: transparent;
        color: var(--ink);
        -webkit-tap-highlight-color: transparent;
    }

    /* soft pastel wash behind every page (fixed, so it doesn't stretch) */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(120% 60% at 0% 0%, #fde7ef 0%, transparent 60%),
            radial-gradient(100% 60% at 100% 20%, #e3eefc 0%, transparent 60%),
            radial-gradient(120% 60% at 0% 100%, #e1f5e9 0%, transparent 60%),
            radial-gradient(100% 50% at 100% 100%, #fff5d6 0%, transparent 60%),
            #f7f4fd;
    }

    /* ---------- Full-bleed layout: no floating card ---------- */
    .container { padding: 0 !important; max-width: none; }

    .page.active { padding: 0 !important; }

    .form-section,
    #page1 .form-section,
    #page2 .form-section {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin: 0 !important;
        padding: 8px 16px 0 !important;
        /* fill the screen so the action bar sits at the bottom */
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 52px - env(safe-area-inset-top)) !important;
    }

    /* ---------- App bar (brand + step dots), sticky like a nav bar ---------- */
    .step-indicators {
        justify-content: space-between;
        padding: calc(env(safe-area-inset-top) + 10px) 16px 10px !important;
        background: linear-gradient(90deg, rgba(252,228,236,0.85), rgba(235,229,250,0.85) 50%, rgba(220,235,251,0.85));
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid rgba(107,91,168,0.12);
    }

    .app-brand {
        display: block;
        margin-right: auto;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.2px;
        color: var(--ink);
    }
    .app-brand span { color: var(--accent); }

    .step-circle {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
        background: rgba(255,255,255,0.8);
        color: var(--muted);
    }
    /* each step dot keeps its own pastel on every page */
    .step-circle[data-step="1"] { --dot: var(--blue);     --dot-deep: var(--blue-deep); }
    .step-circle[data-step="2"] { --dot: var(--lavender); --dot-deep: var(--lavender-deep); }
    .step-circle[data-step="3"] { --dot: var(--mint);     --dot-deep: var(--mint-deep); }
    .step-circle[data-step="4"] { --dot: var(--yellow);   --dot-deep: var(--yellow-deep); }
    .step-circle[data-step="5"] { --dot: var(--pink);     --dot-deep: var(--pink-deep); }
    .step-circle,
    .step-circle.completed { background: var(--dot) !important; color: var(--dot-deep) !important; }
    .step-circle.active { background: var(--dot-deep) !important; color: #fff !important; }
    .step-circle.active { background: var(--dot-deep); color: #fff; box-shadow: 0 0 0 3px var(--dot); }
    .step-line { width: 10px !important; background: rgba(255,255,255,0.8); }
    .step-line.completed { background: rgba(107,91,168,0.3); }

    /* hide the app bar while the splash shows */
    body:not([data-active-page]) .step-indicators { display: none; }

    /* ---------- Large title, iOS style ---------- */
    .page-title { margin: 14px 0 18px !important; }
    .page-number { display: none !important; }
    .form-section h2,
    .page-title h2 {
        font-size: 28px !important;
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1.15;
        color: var(--ink);
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ---------- Form controls ---------- */
    label {
        color: var(--muted);
        font-size: 13px !important;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 6px !important;
    }
    .radio-option span {
        text-transform: none;
        letter-spacing: 0;
        font-size: 16px !important;
        color: var(--ink) !important;
    }

    input:not([type="radio"]):not([type="checkbox"]),
    select,
    textarea,
    #protocolSearch,
    #cancerSpecificSearchInput {
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        min-height: 50px;
        padding: 12px 14px !important;
        font-size: 17px !important;
        color: var(--ink);
        box-shadow: 0 1px 2px rgba(46,42,71,0.04);
        -webkit-appearance: none;
        appearance: none;
    }
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6a85' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        padding-right: 36px !important;
    }
    input:focus, select:focus, textarea:focus {
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
    }
    input::placeholder { color: #b1adc2; }

    /* Sex: segmented-looking pill choices */
    .radio-group { gap: 10px !important; margin-top: 4px !important; }
    .radio-option {
        flex: 1;
        justify-content: center;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 10px;
        margin: 0 !important;
        text-transform: none;
        letter-spacing: 0;
    }
    .radio-option:has(input:checked) {
        background: var(--tint);
        border-color: var(--accent);
    }
    .radio-option input[type="radio"] { accent-color: var(--accent); }

    .divider { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
    .divider { display: flex; align-items: center; gap: 12px; }
    .divider::before, .divider::after {
        content: ''; position: static; flex: 1; height: 1px; background: #ddd6ec;
    }
    .divider span { background: none; padding: 0; }

    .live-bsa {
        background: var(--mint);
        border: none;
        border-radius: 14px;
        color: var(--ink);
        padding: 14px 16px;
    }
    .live-bsa-value strong { color: var(--mint-deep); }

    /* ---------- Grouped panels (search, browse, inline-styled boxes) ---------- */
    .search-section,
    .browse-section,
    #searchCarboplatinParams > div,
    .form-section > div[style*="border"]:not(.regimen-tabs),
    #reductionSummary {
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 1px 3px rgba(46,42,71,0.05);
    }
    /* each kind of panel has its own pastel, the same on every page */
    .search-section { background: #eef5fd !important; border-color: #d6e6f8 !important; }
    .browse-section { background: #f3effc !important; border-color: #e2daf6 !important; }
    #searchCarboplatinParams > div,
    #page4 .form-section > div[style*="border"]:first-of-type { background: #fff9e3 !important; border-color: #f4e6b0 !important; }
    #reductionSummary { background: #fdf0f4 !important; border-color: #f6d6e1 !important; }

    .search-section h3, .browse-section h3,
    .form-section h3 { color: var(--ink) !important; }

    /* Search / Browse toggle as an iOS segmented control */
    .regimen-tabs {
        background: rgba(255,255,255,0.7) !important;
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        padding: 3px;
        gap: 3px;
    }
    .regimen-tab {
        background: transparent !important;
        color: var(--muted) !important;
        border: none !important;
        border-radius: 9px;
        font-size: 14px !important;
    }
    #tabSearch { background: #eef5fd !important; color: var(--blue-deep) !important; }
    #tabBrowse { background: #f3effc !important; color: var(--lavender-deep) !important; }
    #tabSearch.active { background: var(--blue-deep) !important; color: #fff !important; }
    #tabBrowse.active { background: var(--lavender-deep) !important; color: #fff !important; }
    .regimen-tab.active { box-shadow: 0 2px 6px rgba(46,42,71,0.18); }

    .search-suggestions {
        border: 1px solid var(--line) !important;
        border-radius: 12px !important;
        margin-top: 4px;
        box-shadow: 0 8px 24px rgba(46,42,71,0.12) !important;
    }
    .suggestion-protocol { color: var(--ink); }

    .selected-protocol-info {
        background: var(--mint);
        border: none;
        border-radius: 12px;
    }
    .selected-protocol-name { color: var(--mint-deep); }

    /* ---------- Tables ---------- */
    .responsive-table {
        border-radius: 14px;
        border: 1px solid var(--line);
        background: var(--surface);
    }
    .responsive-table table {
        border-collapse: separate !important;
        border-spacing: 0;
        margin: 0 !important;   /* app.js adds margin-top: 10px, which left a gap above the header */
    }
    .responsive-table th,
    #doseAdjustmentTable .responsive-table th {
        background: linear-gradient(90deg, var(--lavender), var(--blue)) !important;
        color: var(--ink) !important;
        border: none !important;
        border-bottom: 1px solid #d9d2ee !important;
        border-right: 1px solid rgba(255,255,255,0.8) !important;
    }
    .responsive-table td,
    #doseAdjustmentTable .responsive-table td {
        background: var(--surface) !important;
        border: none !important;
        border-bottom: 1px solid var(--line) !important;
        border-right: 1px solid var(--line) !important;   /* column dividers */
    }
    .responsive-table th:last-child,
    .responsive-table td:last-child { border-right: none !important; }
    .responsive-table tbody tr:last-child td { border-bottom: none !important; }
    .responsive-table tr[style*="background"] { background: transparent !important; }

    .result-item {
        background: var(--surface);
        border: 1px solid var(--line);
        border-left: 4px solid #9fd8b8;
        border-radius: 12px;
    }

    /* Patient Summary — one shared style on page 3 and page 5 */
    .patient-summary {
        background: linear-gradient(135deg, var(--mint) 0%, var(--lavender) 100%);
        border: 1px solid #d3eadc;
        border-left: 4px solid #7cc79e;
        border-radius: 14px;
        padding: 14px 16px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--ink);
    }

    /* ---------- Buttons ---------- */
    .btn, .calculate-btn {
        border-radius: 12px !important;
        min-height: 44px;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.2;
    }
    .btn-primary, .calculate-btn,
    #goToPage6, #goToPage6FromPage3, #printPrescription {
        background: var(--accent) !important;
        color: #fff !important;
    }
    .btn-secondary {
        background: var(--pink) !important;
        color: var(--ink) !important;
    }

    /* Bottom action bar, pinned like a native toolbar */
    .nav-buttons {
        position: sticky;
        bottom: 0;
        z-index: 50;
        margin: auto -16px 0 !important;
        padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px) !important;
        background: rgba(255,255,255,0.6);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--line);
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px !important;
    }
    .nav-buttons .btn {
        min-width: 0 !important;
        min-height: 40px;
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    /* pages with 3+ actions (3, 5): don't pin, so results get the screen */
    .nav-buttons:has(.btn:nth-child(3)) {
        position: static;
        margin-top: 16px !important;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top: none;
        gap: 8px !important;
    }
    /* single button (page 1) spans the full width */
    .nav-buttons .btn:only-child { grid-column: 1 / -1; }
    /* odd one out (e.g. "New Calculation" on page 5): centred on its own row */
    .nav-buttons .btn:last-child:nth-child(odd):not(:only-child) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 4px);
    }
    /* page 3 when "Adjust Doses" is hidden (oral drugs): 3 visible, centre the last */
    .nav-buttons:has(#adjustDoses[style*="none"]) #startOver {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 4px);
    }

    /* ---------- Footer: quiet, no navy slab ---------- */
    .app-footer {
        background: transparent;
        margin-top: 8px !important;
        padding: 16px 0 24px !important;
    }
    .copyright-line, .brand-line { color: var(--muted); font-size: 11px !important; }

    /* ---------- Splash: drawn in code, sits on the pastel wash ---------- */
    #splashScreen.page.active { padding: 0 !important; transition: opacity 0.25s ease; }
    #splashScreen.splash-leaving { opacity: 0 !important; }
    .splash-content {
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: none !important;
    }
    .splash-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 24px;
    }
    .splash-logo {
        width: 96px;
        height: 96px;
        margin-bottom: 22px;
        border-radius: 22px;
        box-shadow: 0 12px 28px rgba(107,91,168,0.22);
        animation: splashPop 0.5s cubic-bezier(.2,.9,.3,1.2) both;
    }
    .splash-content h1.splash-title {
        font-size: 34px !important;
        font-weight: 800;
        letter-spacing: -0.6px;
        color: var(--ink);
        text-shadow: none;
        margin: 0 0 6px !important;
        animation: fadeInUp 0.5s ease-out 0.1s both;
    }
    .splash-title span { color: var(--accent); }
    .splash-content p.splash-tagline {
        font-size: 16px !important;
        color: var(--muted);
        opacity: 1;
        margin: 0;
        animation: fadeInUp 0.5s ease-out 0.2s both;
    }
    .splash-dots { display: flex; gap: 8px; margin-top: 28px; animation: fadeInUp 0.5s ease-out 0.25s both; }
    .splash-dots i {
        width: 9px; height: 9px; border-radius: 50%;
        animation: splashDot 0.9s ease-in-out infinite;
    }
    .splash-dots i:nth-child(1) { background: #f4a9c4; }
    .splash-dots i:nth-child(2) { background: #8fb8e8; animation-delay: 0.12s; }
    .splash-dots i:nth-child(3) { background: #ffd36e; animation-delay: 0.24s; }
    .splash-dots i:nth-child(4) { background: #b8a6ea; animation-delay: 0.36s; }
    .splash-dots i:nth-child(5) { background: #8fd3ae; animation-delay: 0.48s; }
    @keyframes splashDot {
        0%, 100% { transform: translateY(0); opacity: 0.55; }
        50%      { transform: translateY(-5px); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) { .splash-dots i { animation: none; opacity: 1; } }
    @keyframes splashPop {
        from { opacity: 0; transform: scale(0.7); }
        to   { opacity: 1; transform: scale(1); }
    }
    body:not([data-active-page]) .app-footer { display: none; }

    .validation-error {
        background: var(--pink);
        border: none;
        border-radius: 12px;
        color: #8a2c4f;
    }
}

/* ---------- Desktop / tablet: same colours, centred card layout ---------- */
@media screen and (min-width: 601px) {
    body { overflow-x: clip; }

    .container {
        max-width: 760px;
        padding: 0 24px 24px !important;
    }

    /* app bar spans the full window, content aligned with the card */
    .step-indicators {
        margin: 0 calc(50% - 50vw) !important;
        padding: 14px calc(50vw - 50%) !important;
    }
    .app-brand { font-size: 19px; }
    .step-circle { width: 28px !important; height: 28px !important; font-size: 13px !important; }
    .step-line { width: 18px !important; }

    .form-section,
    #page1 .form-section,
    #page2 .form-section {
        display: block;
        min-height: 0 !important;
        background: rgba(255,255,255,0.82);
        border: 1px solid rgba(255,255,255,0.9);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(107,91,168,0.08), 0 1px 3px rgba(46,42,71,0.05);
        margin: 28px 0 !important;
        padding: 28px 32px !important;
    }
    .page-title { margin: 0 0 22px !important; }

    .nav-buttons,
    .nav-buttons:has(.btn:nth-child(3)) {
        position: static;
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top: none;
    }
    .nav-buttons .btn {
        flex: 1;
        min-height: 46px;
        padding: 10px 16px !important;
        font-size: 15px !important;
    }

    #splashScreen.page.active { padding: 28px 0 0 !important; }
    .splash-content {
        min-height: 80vh;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(107,91,168,0.12);
        background: rgba(255,255,255,0.6) !important;
    }

    .app-footer { margin-top: 12px !important; }
}