/* ==========================================================================
   responsive.css — Responsive Patch v5.0  (REPLACES v4 entirely)
   Synergy Diet Telegram Mini App
   --------------------------------------------------------------------------
   Load AFTER styles.css. Purely additive (no JS / no HTML change).
   v5 = v4, but the per-field width-cap block is REMOVED and replaced by a
   single :has()-based rule that narrows + CENTERS the whole form CARDS.
   Why: centering only the inputs left their labels edge-aligned (mismatch)
   and left the Save button narrow. Narrowing the CARD makes label + field +
   toggle + Save share one centered column, and Save = full card width (wide).
   Tab-capsule cards and multi-column checkbox-grid cards are excluded via
   :not(:has(...)) so they stay wide.
   ========================================================================== */

/* ---------- 0. Global polish (all viewports) ---------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(20, 184, 166, 0.35);
    color: inherit;
}

#plan-nutrition-container {
    columns: 300px;
    column-gap: var(--space);
}

#plan-nutrition-container>* {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

#plan-meals-container>div {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space) !important;
}

#plan-meals-container>div>* {
    margin-top: 0 !important;
}

#wallet-methods {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: var(--space) !important;
}

#wallet-methods>* {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   1. FLOATING ROUNDED DOCK — GLOBAL (mobile + tablet)
   ========================================================================== */
nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - (var(--space) * 2)) !important;
    max-width: 380px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    height: auto !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    padding: 4px 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

nav > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    gap: 2px !important;
}

nav > ul > li > .nav-btn {
    padding: 4px 4px !important;
}

nav.pb-safe {
    padding-bottom: 4px !important;
}

.dark nav {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

main#main-container {
    padding-bottom: 6.5rem !important;
}

/* ---------- 2. Pointer devices: hover + keyboard focus ------------------ */
@media (hover: hover) and (pointer: fine) {
    .nav-btn {
        transition: color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .nav-btn:hover {
        color: var(--text-primary);
    }

    select:hover,
    input[type="text"]:hover,
    input[type="number"]:hover,
    textarea:hover {
        border-color: #475569 !important;
    }

    select:focus:hover,
    input:focus:hover,
    textarea:focus:hover {
        border-color: var(--brand) !important;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }
}

/* ---------- 3. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 4. Landscape phones: icon-only dock ------------------------- */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 1023.98px) {
    main#main-container {
        padding-bottom: 5rem !important;
    }

    nav {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .nav-btn {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .nav-btn span {
        display: none !important;
    }

    .nav-btn i {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   5. TABLETS ≥ 768px
   ========================================================================== */
@media (min-width: 768px) {
    nav {
        max-width: 700px !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }

    main#main-container {
        max-width: 700px !important;
        padding-bottom: 8.5rem !important;
    }

    #diseases-container,
    #medications-container,
    #dislikes-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .tab-capsule,
    #plan-day-tabs,
    #plan-program-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .tab-capsule::before,
    .tab-capsule::after {
        display: none !important;
    }

    #modals>div>div {
        max-width: 470px !important;
    }

    .tg-section-header {
        font-size: 1.25rem;
    }

    .day-tab,
    .plan-day-tab,
    .plan-prog-tab,
    .crypto-tab-btn {
        font-size: 0.9rem;
    }

    #view-queue .tg-section {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   6. DESKTOP ≥ 1024px — rail + ambient + BMI fix + v5 centered form cards
   ========================================================================== */
@media (min-width: 1024px) {

    body {
        padding-inline-start: 96px !important;
        background:
            radial-gradient(1100px 700px at 88% -12%, rgba(20, 184, 166, 0.09), transparent 62%),
            radial-gradient(900px 640px at -8% 108%, rgba(45, 212, 191, 0.07), transparent 58%),
            radial-gradient(700px 500px at 55% 118%, rgba(13, 148, 136, 0.05), transparent 60%),
            var(--bg-primary) !important;
        background-attachment: fixed;
    }

    /* ---- Vertical rail ---- */
    nav {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 96px !important;
        max-width: 96px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 24px 8px !important;
        border: none !important;
        border-inline-end: 1px solid var(--border-color) !important;
        border-radius: 0 !important;
    }

    body[dir="rtl"] nav {
        left: auto !important;
        right: 0 !important;
    }

    nav.pb-safe {
        padding-bottom: 24px !important;
    }

    .dark nav {
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25) !important;
    }

    body[dir="rtl"] .dark nav {
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25) !important;
    }

    nav::before {
        display: none !important;
    }

    nav>ul {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    nav>ul>li {
        width: 100% !important;
        position: static !important;
        top: auto !important;
        margin: 0 !important;
        display: block !important;
    }

    nav>ul>li>.nav-btn {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 4px !important;
        border-radius: 16px !important;
        gap: 5px !important;
        flex: 0 0 auto !important;
    }

    .nav-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary);
    }

    .nav-btn.active {
        background: rgba(20, 184, 166, 0.14);
    }

    .nav-btn i {
        font-size: 1.3rem !important;
    }

    .nav-btn span {
        font-size: 0.62rem !important;
    }

    .nav-btn[data-tab="plan"] {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 10px auto !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        background: var(--brand-gradient) !important;
        color: #fff !important;
        box-shadow: 0 8px 22px rgba(20, 184, 166, 0.4) !important;
        justify-content: center !important;
        align-self: center !important;
        flex: 0 0 auto !important;
        display: flex !important;
    }

    .nav-btn[data-tab="plan"] span {
        display: none !important;
    }

    .nav-btn[data-tab="plan"] i {
        font-size: 1.35rem !important;
        margin: 0 !important;
    }

    .nav-btn[data-tab="plan"] img {
        width: 3.25rem !important;
        height: 3.25rem !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .nav-btn[data-tab="plan"].scale-110 {
        transform: none !important;
    }

    .nav-btn[data-tab="plan"]:hover {
        transform: translateY(-2px) scale(1.04) !important;
        box-shadow: 0 12px 28px rgba(20, 184, 166, 0.5) !important;
    }

    /* ---- Content column width safety net ---- */
    main#main-container {
        max-width: 940px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-bottom: 3rem !important;
    }

    #view-dashboard,
    #view-plans,
    #view-plan,
    #view-wallet,
    #view-queue,
    #view-referral,
    #view-custom-plan,
    #view-health-calc,
    #view-weight-log,
    #view-blog {
        max-width: 940px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .view-section {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .tg-section {
        padding: 26px 28px;
        border-radius: 20px;
    }

    .tg-section-header {
        font-size: 1.35rem;
        margin-bottom: 20px;
    }

    .tg-hint {
        font-size: 0.78rem;
    }

    /* NOTE: no max-width on .tg-button here — let CTAs fill their (narrowed) card */
    .tg-button {
        font-size: 1rem;
        padding: 14px 28px;
    }

    /* ====================================================================
     v5 — CENTERED, NARROWER FORM CARDS  (the fix you asked for)
     Shrink + center every content card EXCEPT the tab-capsule bar and the
     multi-column checkbox-grid cards. Now label + field + toggle + Save all
     live in ONE centered column → the one-sided empty gap is gone, the
     toggle rows are no longer stretched, and Save = full card width (wide).
     ==================================================================== */
    #view-dashboard .tg-section:not(:has(.tab-capsule, #diseases-container, #medications-container, #dislikes-container)) {
        max-width: 760px !important;
        width: 100% !important;
        margin-inline: auto !important;
        /* centered in BOTH LTR & RTL */
    }

    /* primary CTAs fill the narrowed card → wide & prominent, aligned to fields */
    #view-dashboard .tg-section:not(:has(.tab-capsule, #diseases-container, #medications-container, #dislikes-container)) .tg-button,
    #btn-save-targets,
    #btn-save-health {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    /* ---- BMI ring (scale keeps number centered) ---- */
    .bio-flex-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 28px !important;
    }

    .bio-flex-container>div:first-child {
        flex: 0 0 auto !important;
        min-width: 140px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    #bmi-circle {
        transform: scale(1.3) !important;
        transform-origin: center !important;
        margin: 14px 0 !important;
    }

    .bio-flex-container>div:last-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* ---- Modals & hamburger beside the rail ---- */
    #modals>div {
        padding: 24px !important;
    }

    #modals>div>div {
        max-width: 520px !important;
    }

    #hamburger-menu-panel {
        left: 110px !important;
        right: auto !important;
        bottom: 22px !important;
        transform-origin: bottom left !important;
    }

    body[dir="rtl"] #hamburger-menu-panel {
        left: auto !important;
        right: 110px !important;
        transform-origin: bottom right !important;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #334155;
        border-radius: 8px;
        border: 2px solid #0f172a;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #475569;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: #334155 transparent;
    }
}

/* ==========================================================================
   7. LARGE DESKTOP ≥ 1440px
   ========================================================================== */
@media (min-width: 1440px) {
    body {
        padding-inline-start: 112px !important;
    }

    nav {
        width: 112px !important;
        max-width: 112px !important;
    }

    .nav-btn span {
        font-size: 0.68rem !important;
    }

    main#main-container {
        max-width: 1040px !important;
    }

    #view-dashboard,
    #view-plans,
    #view-plan,
    #view-wallet,
    #view-queue,
    #view-referral,
    #view-custom-plan,
    #view-health-calc,
    #view-weight-log,
    #view-blog {
        max-width: 1040px !important;
    }

    .view-section {
        max-width: 100%;
    }

    /* a touch wider form cards on big monitors */
    #view-dashboard .tg-section:not(:has(.tab-capsule, #diseases-container, #medications-container, #dislikes-container)) {
        max-width: 840px !important;
    }

    .bio-flex-container>div:first-child {
        min-width: 160px !important;
    }

    #bmi-circle {
        transform: scale(1.4) !important;
    }

    #hamburger-menu-panel {
        left: 126px !important;
    }

    body[dir="rtl"] #hamburger-menu-panel {
        right: 126px !important;
    }
}

/* ── 6. Mobile Only (< 768px): Set top padding to 3px above capsule bar ── */
@media (max-width: 767.98px) {
    main#main-container {
        padding-top: 3px !important;
    }

    #view-plans,
    #view-dashboard,
    #view-plan,
    #view-wallet,
    #view-queue,
    #view-referral,
    #view-custom-plan,
    #view-health-calc,
    #view-weight-log,
    #view-blog {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #plan-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #plan-program-tabs,
    #plan-day-tabs {
        margin-top: 0 !important;
    }
}