/* TrackYou shared modal system.
   Use app-modal-surface, app-modal-header, app-modal-icon,
   app-modal-heading and app-modal-footer together. */

:root {
    --app-modal-purple: var(--accent);
    --app-modal-icon: var(--accent-pale);
    --app-modal-copy: #f4f2f7;
    --app-modal-muted: #99959f;
}

/* Daylight is the first theme where the modal surface is not dark, so the two
   copy colours above — both tuned as near-white on near-black — have to invert.
   They stay local variables rather than moving into tokens.css: nothing outside
   this file uses them, and a modal's copy ramp is a property of the modal
   system, not of the palette. Same lightness relationship as the dark pair,
   mirrored: --copy is the body rung and --muted sits about 45% of the way to
   the surface. */
:root[data-theme="daylight"] {
    --app-modal-copy: #241c2e;
    --app-modal-muted: #6d6579;
}

.modal-content.app-modal-surface,
.app-modal-surface {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.12), transparent 34%),
        linear-gradient(145deg, var(--surface-panel) 0%, var(--surface-page) 100%) !important;
    color: var(--app-modal-copy);
    border: 1px solid rgba(var(--wash-rgb), 0.09) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(var(--shadow-rgb), calc(0.34 * var(--shadow-strength))), 0 0 0 1px rgba(var(--accent-rgb), 0.05) !important;
}

/* Every standard dialog must fit inside the viewport. Keep the chrome fixed and
   let the content region take over scrolling when vertical space is limited. */
.modal-content.app-modal-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* `vh` keeps the constraint on older WebViews; supporting browsers use
       `dvh` so browser chrome and the on-screen keyboard are accounted for. */
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
}

.modal-content.app-modal-surface > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Opt in for pickers/popovers that intentionally extend beyond the surface. */
.modal-content.app-modal-surface.app-modal-surface--allow-overflow,
.app-modal-surface.app-modal-surface--allow-overflow {
    overflow: visible;
}

.app-modal-surface .app-modal-header,
.app-modal-surface .app-modal-footer {
    flex: 0 0 auto;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.app-modal-surface .app-modal-header {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 12px !important;
}

.app-modal-surface .app-modal-header.app-modal-header--no-close {
    grid-template-columns: 42px minmax(0, 1fr);
}

.app-modal-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(var(--accent-pale-rgb), 0.24);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.14));
    color: var(--app-modal-icon);
    box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.09), 0 8px 24px rgba(var(--accent-dark-rgb), 0.16);
}

/* The chip centres its child with `place-items: center`, which any margin on
   that child defeats. Icons injected by JS carry whatever utility classes the
   source string happened to include — settings.html's `getBrandSvg()` builds one
   SVG for both the social pills and this chip, and hardcodes Bootstrap's `me-2`
   because the pill needs a gap between icon and label. In the chip that same
   0.5rem right margin pushes the glyph off-centre by a quarter of its own width.

   Reset the box model here rather than in the JS: the string is shared, and any
   future injected icon gets centred without having to remember this. Size is
   normalised too, since a template-authored icon comes in at 19px and a JS one
   at 16px. */
.app-modal-icon > svg,
.app-modal-icon > img,
.app-modal-icon > i {
    margin: 0 !important;
    flex: none;
    width: 19px;
    height: 19px;
}

.app-modal-heading {
    min-width: 0;
}

.app-modal-heading .modal-title,
.app-modal-heading > h3,
.app-modal-heading > h4,
.app-modal-heading > h5 {
    margin: 0;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
    line-height: 1.25;
    letter-spacing: 0;
}

.app-modal-heading small,
.app-modal-heading p {
    display: block;
    margin: 3px 0 0;
    color: var(--app-modal-muted) !important;
    font-size: 0.76rem;
    line-height: 1.35;
}

.app-modal-surface .btn-close {
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    background-color: rgba(var(--wash-rgb), 0.06);
    background-size: 11px;
    opacity: 0.72;
    transition: background-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.app-modal-surface .btn-close:hover,
.app-modal-surface .btn-close:focus-visible {
    background-color: rgba(var(--wash-rgb), 0.11);
    opacity: 1;
    transform: scale(1.04);
}

.app-modal-surface > .modal-body,
.app-modal-surface > form > .modal-body {
    min-height: 0;
    padding: 10px 20px 20px;
    background: transparent !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-modal-surface--allow-overflow > .modal-body,
.app-modal-surface--allow-overflow > form > .modal-body {
    overflow: visible;
}

.app-modal-surface .app-modal-footer {
    padding: 0 20px 20px !important;
}

/* Adapters for existing custom modal shells that now use the shared surface. */
.social-modal-content.app-modal-surface,
.avatar-modal-content.app-modal-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: 0 !important;
}

.social-modal-content.app-modal-surface {
    top: 50% !important;
}

.app-modal-surface .social-modal-body,
.app-modal-surface .avatar-modal-body {
    min-height: 0;
    margin: 0;
    padding: 10px 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Older custom dialog shells still used on profile/settings pages. */
.garmin-modal-content,
.username-modal-content,
.social-modal-content,
.avatar-modal-content {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.cardio-entry-modal .modal-content.app-modal-surface {
    overflow: visible;
}

.app-modal-surface .app-modal-footer .btn-secondary,
.app-modal-surface .app-modal-footer .modal-btn:not(.modal-action-primary):not(.modal-action-success) {
    border-color: rgba(var(--wash-rgb), 0.1) !important;
    border-radius: 20px;
    background: rgba(var(--wash-rgb), 0.07) !important;
    color: var(--app-modal-copy) !important;
    box-shadow: none !important;
}

.app-modal-surface .app-modal-footer .btn-secondary:hover,
.app-modal-surface .app-modal-footer .btn-secondary:focus-visible,
.app-modal-surface .app-modal-footer .modal-btn:not(.modal-action-primary):not(.modal-action-success):hover {
    background: rgba(var(--wash-rgb), 0.12) !important;
    color: var(--text-primary) !important;
}

@media (max-width: 575.98px) {
    .modal-content.app-modal-surface,
    .app-modal-surface {
        border-radius: 16px !important;
    }

    .modal-content.app-modal-surface {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .app-modal-surface .app-modal-header {
        grid-template-columns: 38px minmax(0, 1fr) 34px;
        gap: 10px;
        padding: 17px 16px 10px !important;
    }

    .app-modal-surface .app-modal-header.app-modal-header--no-close {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .app-modal-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .app-modal-surface > .modal-body,
    .app-modal-surface > form > .modal-body {
        padding: 10px 16px 16px;
    }

    .app-modal-surface .app-modal-footer {
        padding: 0 16px 16px !important;
    }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .modal-content.app-modal-surface {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-fullscreen-md-down .app-modal-header {
        padding:
            max(12px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            10px
            max(14px, env(safe-area-inset-left)) !important;
    }

    .modal-fullscreen-md-down .app-modal-footer {
        padding:
            10px
            max(14px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left)) !important;
    }
}

/* Short phones need smaller fixed chrome so the scrollable body retains useful
   space. This also covers landscape and split-screen windows. */
@media (max-height: 640px) and (max-width: 767.98px) {
    .modal-content.app-modal-surface {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .app-modal-surface .app-modal-header {
        grid-template-columns: 34px minmax(0, 1fr) 32px;
        gap: 8px;
        padding: 10px 12px 7px !important;
    }

    .app-modal-surface .app-modal-header.app-modal-header--no-close {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .app-modal-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
    }

    .app-modal-surface .btn-close {
        width: 32px;
        height: 32px;
    }

    .app-modal-heading small,
    .app-modal-heading p {
        margin-top: 1px;
        font-size: 0.7rem;
        line-height: 1.2;
    }

    .app-modal-surface > .modal-body,
    .app-modal-surface > form > .modal-body,
    .app-modal-surface .social-modal-body,
    .app-modal-surface .avatar-modal-body {
        padding: 7px 12px 10px;
    }

    .app-modal-surface .app-modal-footer {
        padding: 0 12px 10px !important;
    }
}