/* =============================================================================
   APJAKAL LOGIN PAGE — REDESIGN
   Scope: body.qboat[frappe-session-status="logged-out"]
   Covers: /login, forgot-password, sign-up, login-with-email-link pages.

   Load order: added as last entry in web_include_css so these rules
   override login.bundle.css and new-style.css without needing !important
   on every declaration.
   ============================================================================= */


/* ── 1. PAGE SHELL ───────────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] {
    background-color: #F0F2F5;
    /* dot-grid removed — replaced by the richer AI pattern in section 18 below */
    background-image: none;
    min-height: 100vh;
}


/* ── 2. HIDE CHROME (nav / footer) ──────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .page-header,
body.qboat[frappe-session-status="logged-out"] .web-footer,
body.qboat[frappe-session-status="logged-out"] nav.navbar {
    display: none !important;
}


/* ── 3. SECTION WRAPPERS — full-viewport flex centering ─────────────────── */
/*
   CRITICAL: display and min-height must NOT use !important here.
   CSS !important beats inline styles, which means jQuery's .hide() /
   .toggle(false) — which sets style="display:none" — would be silently
   overridden, making it impossible to switch between sections.
   Without !important, inline style="display:none" wins → section hides.
   When jQuery .show() removes the inline style, the CSS display:flex
   re-applies → section is visible and centred. Both directions work.
*/
body.qboat[frappe-session-status="logged-out"] section.for-login,
body.qboat[frappe-session-status="logged-out"] section.for-forgot,
body.qboat[frappe-session-status="logged-out"] section.for-signup,
body.qboat[frappe-session-status="logged-out"] section.for-email-login,
body.qboat[frappe-session-status="logged-out"] section.for-login-with-email-link {
    display: flex;            /* NO !important — lets jQuery .hide()/.show() work */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;        /* NO !important */
    padding: 40px 16px 64px !important;  /* bottom 64px keeps card clear of the fixed footer */
    box-sizing: border-box !important;
}


/* ── 4. CARD ─────────────────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .login-content,
body.qboat[frappe-session-status="logged-out"] .login-content.page-card,
body.qboat[frappe-session-status="logged-out"] section.for-forgot .page-card,
body.qboat[frappe-session-status="logged-out"] section.for-signup .page-card,
body.qboat[frappe-session-status="logged-out"] section.for-email-login .page-card,
body.qboat[frappe-session-status="logged-out"] section.for-login-with-email-link .page-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 48px 44px 40px !important;
    width: 100% !important;
    max-width: 480px !important;
    /* Layered shadow: crisp close shadow + soft ambient shadow */
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.09) !important;
    /* Brand accent stripe across the top */
    border-top: 4px solid #F43024 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    /* Remove any default border or shadow from theme */
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}


/* ── 5. LOGO & TITLE ─────────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .app-logo {
    height: 180px !important;
    width: auto !important;
    max-width: 520px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

body.qboat[frappe-session-status="logged-out"] .page-card-head {
    margin-bottom: 28px !important;
    text-align: center !important;
    padding: 0 !important;
}

body.qboat[frappe-session-status="logged-out"] .page-card-head h4 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.01em !important;
    /* Remove any qboat gradient text effect on this h4 */
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #374151 !important;
}


/* ── 6. FORM LIST RESET ─────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .row.g-3.li_animate {
    --bs-gutter-y: 0.75rem !important;
    margin-bottom: 0 !important;
}

/* Disable the slide-in animation — keeps the page instant */
body.qboat[frappe-session-status="logged-out"] .li_animate > li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}


/* ── 7. INPUT GROUPS ─────────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .input-group {
    background: #F9FAFB !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body.qboat[frappe-session-status="logged-out"] .input-group:focus-within {
    border-color: #F43024 !important;
    box-shadow: 0 0 0 3px rgba(244, 48, 36, 0.10) !important;
    background: #FFFFFF !important;
}

/* Icon prefix */
body.qboat[frappe-session-status="logged-out"] .input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 10px 0 16px !important;
    display: flex !important;
    align-items: center !important;
}

/* Actual input */
body.qboat[frappe-session-status="logged-out"] .input-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    color: #1F2937 !important;
    padding: 13px 14px !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

body.qboat[frappe-session-status="logged-out"] .input-group .form-control::placeholder {
    color: #B0B8C4 !important;
    font-weight: 400 !important;
}

body.qboat[frappe-session-status="logged-out"] .input-group .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* SVG icon stroke — gray by default, brand-red on focus */
body.qboat[frappe-session-status="logged-out"] .input-group .field-icon path {
    stroke: #B0B8C4;
    transition: stroke 0.15s ease;
}

body.qboat[frappe-session-status="logged-out"] .input-group:focus-within .field-icon path {
    stroke: #F43024;
}

/* Show / Hide password toggle */
body.qboat[frappe-session-status="logged-out"] .toggle-password {
    background: transparent !important;
    border: none !important;
    color: #9CA3AF !important;
    padding: 0 16px 0 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
    letter-spacing: 0.02em !important;
}

body.qboat[frappe-session-status="logged-out"] .toggle-password:hover {
    color: #F43024 !important;
}


/* ── 8. FORGOT PASSWORD LINK ─────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .for_get,
body.qboat[frappe-session-status="logged-out"] a.for_get {
    font-size: 13px !important;
    color: #F43024 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-top: 8px !important;
}

body.qboat[frappe-session-status="logged-out"] .for_get:hover,
body.qboat[frappe-session-status="logged-out"] a.for_get:hover {
    color: #d42a1f !important;
    text-decoration: underline !important;
}


/* ── 9. PAGE-CARD-ACTIONS wrapper ────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .page-card-actions {
    margin-top: 20px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}


/* ── 10. BUTTONS ─────────────────────────────────────────────────────────── */

/* Shared base for all login-page action buttons */
body.qboat[frappe-session-status="logged-out"] .btn-login,
body.qboat[frappe-session-status="logged-out"] .btn-forgot,
body.qboat[frappe-session-status="logged-out"] .btn-login-with-email-link {
    width: 100% !important;
    padding: 14px 24px !important;   /* ↑ +1px top/bottom for a more confident tap target */
    font-size: 14.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* PRIMARY — Login + Reset Password */
body.qboat[frappe-session-status="logged-out"] .btn-login,
body.qboat[frappe-session-status="logged-out"] .btn-forgot {
    background-color: #F43024 !important;
    background: #F43024 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(244, 48, 36, 0.28) !important;
}

body.qboat[frappe-session-status="logged-out"] .btn-login:hover,
body.qboat[frappe-session-status="logged-out"] .btn-forgot:hover {
    background-color: #d42a1f !important;
    background: #d42a1f !important;
    box-shadow: 0 4px 14px rgba(244, 48, 36, 0.35) !important;
    transform: translateY(-1px) !important;
}

body.qboat[frappe-session-status="logged-out"] .btn-login:active,
body.qboat[frappe-session-status="logged-out"] .btn-forgot:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(244, 48, 36, 0.22) !important;
}

/* SECONDARY — Login with Email Link */
body.qboat[frappe-session-status="logged-out"] .btn-login-with-email-link {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #374151 !important;
    border: 1.5px solid #E5E7EB !important;
    box-shadow: none !important;
}

body.qboat[frappe-session-status="logged-out"] .btn-login-with-email-link:hover {
    background-color: #F9FAFB !important;
    background: #F9FAFB !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
}


/* ── 11. "OR" DIVIDER ────────────────────────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] p.login-divider {
    position: relative !important;
    text-align: center !important;
    color: #9CA3AF !important;
    font-size: 13px !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.qboat[frappe-session-status="logged-out"] p.login-divider::before,
body.qboat[frappe-session-status="logged-out"] p.login-divider::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: calc(50% - 22px) !important;
    height: 1px !important;
    background: #E5E7EB !important;
}

body.qboat[frappe-session-status="logged-out"] p.login-divider::before { left: 0 !important; }
body.qboat[frappe-session-status="logged-out"] p.login-divider::after  { right: 0 !important; }


/* ── 12. SIGN-UP / BACK-TO-LOGIN MESSAGES ────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] .sign-up-message {
    margin-top: 20px !important;
    font-size: 13.5px !important;
    color: #6B7280 !important;
    text-align: center !important;
    background: none !important;
}

body.qboat[frappe-session-status="logged-out"] .sign-up-message a {
    color: #F43024 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.qboat[frappe-session-status="logged-out"] .sign-up-message a:hover {
    color: #d42a1f !important;
    text-decoration: underline !important;
}


/* ── 13. FORGOT-PASSWORD heading override ────────────────────────────────── */

body.qboat[frappe-session-status="logged-out"] section.for-forgot .page-card-head h4,
body.qboat[frappe-session-status="logged-out"] section.for-login-with-email-link .page-card-head h4 {
    font-size: 1.15rem !important;
    margin-bottom: 0 !important;
}


/* ── 14. RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    body.qboat[frappe-session-status="logged-out"] .login-content,
    body.qboat[frappe-session-status="logged-out"] .login-content.page-card,
    body.qboat[frappe-session-status="logged-out"] section.for-forgot .page-card,
    body.qboat[frappe-session-status="logged-out"] section.for-signup .page-card,
    body.qboat[frappe-session-status="logged-out"] section.for-login-with-email-link .page-card {
        padding: 36px 24px 28px !important;
        border-radius: 14px !important;
    }

    body.qboat[frappe-session-status="logged-out"] section.for-login,
    body.qboat[frappe-session-status="logged-out"] section.for-forgot,
    body.qboat[frappe-session-status="logged-out"] section.for-signup,
    body.qboat[frappe-session-status="logged-out"] section.for-login-with-email-link {
        padding: 20px 12px !important;
    }

    body.qboat[frappe-session-status="logged-out"] .app-logo {
        height: 120px !important;
    }

    body.qboat[frappe-session-status="logged-out"] .btn-login,
    body.qboat[frappe-session-status="logged-out"] .btn-forgot,
    body.qboat[frappe-session-status="logged-out"] .btn-login-with-email-link {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}


/* ── 15. INLINE ALERT — replaces Frappe's oversized msgprint modal ───────── */
/*
   frappe.msgprint() on web pages creates a full-screen Bootstrap modal.
   login.js overrides frappe.msgprint to instead inject a compact
   .login-page-alert banner at the top of the visible card. These styles
   cover all three variants: success (green), error (red), info (blue).
*/

body.qboat[frappe-session-status="logged-out"] .login-page-alert {
    display: flex !important;    /* safe: this is never toggled by jQuery */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    animation: lpa-slide-in 0.22s ease !important;
}

@keyframes lpa-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.qboat[frappe-session-status="logged-out"] .login-page-alert.la-success {
    background: #F0FDF4 !important;
    border: 1px solid #86EFAC !important;
    color: #166534 !important;
}

body.qboat[frappe-session-status="logged-out"] .login-page-alert.la-error {
    background: #FEF2F2 !important;
    border: 1px solid #FCA5A5 !important;
    color: #B91C1C !important;
}

body.qboat[frappe-session-status="logged-out"] .login-page-alert.la-info {
    background: #EFF6FF !important;
    border: 1px solid #93C5FD !important;
    color: #1D4ED8 !important;
}

body.qboat[frappe-session-status="logged-out"] .lpa-message {
    flex: 1 !important;
    font-weight: 500 !important;
}

body.qboat[frappe-session-status="logged-out"] .lpa-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: auto !important;
    color: inherit !important;
    opacity: 0.45 !important;
    flex-shrink: 0 !important;
    transform: none !important;
}

body.qboat[frappe-session-status="logged-out"] .lpa-close:hover {
    opacity: 1 !important;
    transform: none !important;
}


/* ── 16. WELCOME SUBTITLE (below the card) ───────────────────────────────── */
/*
   Shown directly below the login card on the main login section.
   Warmer, more personal tone than the copyright footer.
*/

body.qboat[frappe-session-status="logged-out"] .login-welcome-sub {
    width: 100% !important;
    max-width: 480px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #6B7280 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    order: -1 !important;         /* sits above the card in the flex column */
    line-height: 1.5 !important;
}

body.qboat[frappe-session-status="logged-out"] .login-welcome-sub strong {
    color: #F43024 !important;
    font-weight: 600 !important;
}


/* ── 17. PAGE-LEVEL FOOTER ───────────────────────────────────────────────── */
/*
   Fixed to the bottom of the viewport so it shows on every login sub-page
   without needing to be repeated inside each <section>.
*/

body.qboat[frappe-session-status="logged-out"] .login-page-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    text-align: center !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    color: #1F2937 !important;
    background: rgba(240, 242, 245, 0.95) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-top: 1px solid #E5E7EB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    line-height: 1.5 !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-welcome {
    color: #1F2937 !important;
    font-weight: 500 !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-welcome strong {
    color: #F43024 !important;
    font-weight: 700 !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-sep {
    color: #9CA3AF !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-copy {
    color: #1F2937 !important;
    font-size: 12.5px !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-link {
    color: #F43024 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.qboat[frappe-session-status="logged-out"] .lpf-link:hover {
    color: #d42a1f !important;
    text-decoration: underline !important;
}

@media (max-width: 480px) {
    body.qboat[frappe-session-status="logged-out"] .login-page-footer {
        font-size: 12px !important;
        gap: 6px !important;
        padding: 10px 14px !important;
    }

    body.qboat[frappe-session-status="logged-out"] .lpf-sep {
        display: none !important;
    }

    body.qboat[frappe-session-status="logged-out"] .lpf-copy {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
    }

    body.qboat[frappe-session-status="logged-out"] .login-welcome-sub {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
}


/* ── 18. AI / DIGITAL BACKGROUND PATTERN ────────────────────────────────────
   Applied to the inner viewport wrapper div (class="qboat admin auth") which
   covers the entire page. Selector mirrors new-style.css line 392 so it only
   fires on the /login page — all other pages are untouched.

   LAYER STACK (top → bottom inside background-image):
     A  radial-gradient  top-left corner     — focused brand-red tint near logo
     B  radial-gradient  bottom-right corner — subtle warm echo
     C  radial-gradient  centre highlight    — soft white lens; lifts card area
     D  SVG tile (main)  — orthogonal circuit traces + nodes, repeating

   On wide desktops (≥1440px) a 5th layer (variant SVG tile, offset by ½ tile)
   is added between C and D to break the mathematical repeat pattern while
   keeping everything very subtle.

   TUNING REFERENCE:
   • stroke-opacity / fill-opacity in the SVG URLs → pattern visibility
     Main tile default: traces 0.22 · gray nodes 0.20 · red nodes 0.18
     Variant tile default: traces 0.15 · nodes ~0.13 (always quieter)
   • rgba() alpha in gradients A/B → corner warmth (A=0.09, B=0.05)
   • background-size for layer D → tile density
     Base (≥769px): 230px · Mobile (≤768px): 280px · Wide (≥1440px): 230px
   • background-attachment: fixed on desktop (SVG stays put while scrolling);
     switched to scroll on mobile to avoid repaint jank on low-end GPUs
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 18a. Base rule — applies to all viewport widths ─────────────────────── */
[data-path="login"].qboat.admin .qboat.admin {
    background-color: #F0F2F5 !important;

    background-image:
        /* A — top-left brand tint: ellipse 52%×36% keeps warmth near logo */
        radial-gradient(ellipse 52% 36% at 0%   0%,   rgba(240, 58, 51, 0.09) 0%, transparent 68%),
        /* B — bottom-right echo: unchanged from original */
        radial-gradient(ellipse 60% 42% at 100% 100%, rgba(240, 58, 51, 0.05) 0%, transparent 70%),
        /* C — centre highlight: very subtle white lens focuses eye on card zone */
        radial-gradient(ellipse 42% 52% at 50%  50%,  rgba(255, 255, 255, 0.06) 0%, transparent 65%),
        /* D — main SVG tile: orthogonal circuit (9 traces · 8 nodes · 3 packets) */
        /* ↓ stroke-opacity 0.22, gray fill 0.20, red fill 0.18 → recedes behind card */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath d='M30,50 H130 V30' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M130,30 H230 V70' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M130,30 V130 H190' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M30,50 V140 H60' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M60,140 V200 H110' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M190,130 H110 V200' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M190,130 H240 V210' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M110,200 H30 V230' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M230,70 V210' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Ccircle cx='30' cy='50' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='130' cy='30' r='3.5' fill='%23F43024' fill-opacity='0.18'/%3E%3Ccircle cx='230' cy='70' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='60' cy='140' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='190' cy='130' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='110' cy='200' r='3.5' fill='%23F43024' fill-opacity='0.18'/%3E%3Ccircle cx='240' cy='210' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='30' cy='230' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Crect x='79' y='47' width='4' height='4' rx='1' fill='%23F43024' fill-opacity='0.18'/%3E%3Crect x='109' y='128' width='4' height='4' rx='1' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Crect x='188' y='207' width='4' height='4' rx='1' fill='%23F43024' fill-opacity='0.18'/%3E%3C/svg%3E") !important;

    /* Layers:        A      B      C      D-tile              */
    background-size:   auto,  auto,  auto,  230px 230px        !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
    background-position: 0 0, 100% 100%, 50% 50%, 0 0         !important;
    /* fixed on D keeps the circuit stationary as page scrolls (desktop only) */
    background-attachment: scroll, scroll, scroll, fixed       !important;
}

/* ── 18b. Wide desktop (≥1440px) — add variant SVG tile to break repetition ─ */
/*
   A second, lighter SVG tile with different trace directions (V-first paths)
   is layered between C and D, offset by ½ tile (115px) so the two grids
   never perfectly overlap. This creates an irregular, organic-looking field
   without any animation or heavy effects.
   Variant opacity: traces 0.15 · nodes 0.14 / 0.11 — always quieter than main.
*/
@media (min-width: 1440px) {
    [data-path="login"].qboat.admin .qboat.admin {
        background-image:
            radial-gradient(ellipse 52% 36% at 0%   0%,   rgba(240, 58, 51, 0.09) 0%, transparent 68%),
            radial-gradient(ellipse 60% 42% at 100% 100%, rgba(240, 58, 51, 0.05) 0%, transparent 70%),
            radial-gradient(ellipse 42% 52% at 50%  50%,  rgba(255, 255, 255, 0.06) 0%, transparent 65%),
            /* D-variant: V-first paths, different node layout, offset ½ tile   */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath d='M50,20 V90 H130' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M180,50 V90' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M20,130 H130' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M130,90 H230 V140' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M20,130 V210 H70' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M230,140 V190 H200' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M70,210 H200' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Cpath d='M40,250 H70' stroke='%239CA3AF' stroke-opacity='0.15' stroke-width='0.9' fill='none'/%3E%3Ccircle cx='50' cy='20' r='3' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Ccircle cx='180' cy='50' r='3.5' fill='%23F43024' fill-opacity='0.11'/%3E%3Ccircle cx='20' cy='130' r='3' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Ccircle cx='130' cy='90' r='2.5' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Ccircle cx='230' cy='140' r='3' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Ccircle cx='70' cy='210' r='3.5' fill='%23F43024' fill-opacity='0.11'/%3E%3Ccircle cx='200' cy='190' r='2.5' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Ccircle cx='40' cy='250' r='2.5' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Crect x='128' y='87' width='4' height='4' rx='1' fill='%239CA3AF' fill-opacity='0.14'/%3E%3Crect x='178' y='47' width='4' height='4' rx='1' fill='%23F43024' fill-opacity='0.11'/%3E%3C/svg%3E"),
            /* D-main tile (same as base) */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cpath d='M30,50 H130 V30' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M130,30 H230 V70' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M130,30 V130 H190' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M30,50 V140 H60' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M60,140 V200 H110' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M190,130 H110 V200' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M190,130 H240 V210' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M110,200 H30 V230' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Cpath d='M230,70 V210' stroke='%239CA3AF' stroke-opacity='0.22' stroke-width='0.9' fill='none'/%3E%3Ccircle cx='30' cy='50' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='130' cy='30' r='3.5' fill='%23F43024' fill-opacity='0.18'/%3E%3Ccircle cx='230' cy='70' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='60' cy='140' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='190' cy='130' r='3' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='110' cy='200' r='3.5' fill='%23F43024' fill-opacity='0.18'/%3E%3Ccircle cx='240' cy='210' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Ccircle cx='30' cy='230' r='2.5' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Crect x='79' y='47' width='4' height='4' rx='1' fill='%23F43024' fill-opacity='0.18'/%3E%3Crect x='109' y='128' width='4' height='4' rx='1' fill='%239CA3AF' fill-opacity='0.20'/%3E%3Crect x='188' y='207' width='4' height='4' rx='1' fill='%23F43024' fill-opacity='0.18'/%3E%3C/svg%3E") !important;

        /*                         A     B     C     D-var         D-main      */
        background-size:   auto, auto, auto, 260px 260px, 230px 230px          !important;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat     !important;
        /* D-variant offset by 115px (½ of 230px) to stagger against D-main    */
        background-position: 0 0, 100% 100%, 50% 50%, 115px 115px, 0 0        !important;
        background-attachment: scroll, scroll, scroll, fixed, fixed             !important;
    }
}

/* ── 18c. Mobile (≤768px) — larger tiles + scroll attachment for performance ─ */
/*
   background-attachment: fixed causes full-page repaints on scroll on mobile
   (iOS Safari in particular). Switch the SVG layer(s) to scroll to avoid jank.
   Tile size increased to 280px so the pattern doesn't feel cluttered at narrow
   widths where fewer tiles fit across the screen.
   Gradients A/B/C are cheap and kept as-is (no repaint cost for scroll/fixed).
*/
@media (max-width: 768px) {
    [data-path="login"].qboat.admin .qboat.admin {
        /* 4-layer stack (no variant tile on mobile) */
        background-size:       auto, auto, auto, 280px 280px !important;
        background-attachment: scroll, scroll, scroll, scroll !important;
    }
}