/* Bridges — fills the gaps premium.css doesn't cover for the legacy
   markup. Loaded last (after app.css + tokens.css + premium.css) so it
   wins on conflicts. Don't add new design tokens here — use tokens.css.
   Only put compat/glue styles for components the canvas didn't ship. */

/* ---------- Topnav: container-width rail ---------- */
/* The header spans full width (background/blur edge-to-edge). Inside,
   .topnav__inner is a centred max-width container with a small 60px
   left padding so the brand nudges toward the sidebar's middle without
   fully colonising it. Layout: [ brand left | nav centre | actions right ] */
.topnav.topnav--rail {
    padding: 0;
}
.topnav.topnav--rail .topnav__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
    display: grid;
    /* First column matches the sidebar width (240px) so the brand can sit
       above the sidebar's centre. Sidebar's margin-left (sp-4) equals the
       topnav padding-left, so the columns line up horizontally. */
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    height: 100%;
}
.topnav__inner > .topnav__brand   { justify-self: center; }
.topnav__inner > .topnav__nav     { justify-self: center; }
.topnav__inner > .topnav__actions { justify-self: end; }

@media (max-width: 900px) {
    /* On narrow screens hide centre nav (drawer replaces it); brand
       stays left, actions hug the right. */
    .topnav__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
        padding: 0 var(--sp-4);
    }
    .topnav__inner > .topnav__nav { display: none; }
    /* Brand sits flush-left on mobile (was justify-self:center on lg). */
    .topnav__inner > .topnav__brand { justify-self: start; }
}

/* Hide the standalone language toggle and karma chip from the topnav
   on phones — both live inside the user dropdown menu (and the burger
   drawer) so the bar stays uncluttered. */
@media (max-width: 900px) {
    .topnav .topnav__locale,
    .topnav .topnav__karma { display: none; }
}

/* ---------- Topnav glue ---------- */
.topnav .icon-btn { position: relative; }
.topnav .icon-btn .badge {
    /* override premium.css default top/right offsets to look right inside
       the 40px circular icon-btn */
    top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 9px;
}
.topnav .icon-btn .pulse {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(197, 97, 79, 0.25);
    animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(197, 97, 79, 0.45); }
    100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 12px rgba(197, 97, 79, 0); }
}

/* primary nav anchor inside topnav__nav — premium.css already styles this,
   but we need to match the .badge inside the link properly. */
.topnav__nav a { position: relative; }
.topnav__nav a .badge {
    position: static;
    margin-left: 4px;
    border: 0;
}

/* ---------- Sidebar glue ---------- */
.sidebar__count {
    margin-left: auto;
    min-width: 20px; padding: 0 7px; height: 18px;
    border-radius: 999px;
    background: var(--coral);
    color: #FBF5EA;
    font-family: var(--f-mono); font-size: 10px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface);
}
.sidebar__chevron {
    font-size: 14px; color: var(--ink-muted);
    transition: transform var(--dur-fast) ease;
}
.sidebar__head--toggle:hover .sidebar__chevron { color: var(--ink); }

.sidebar__subnav {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 2px;
    padding-left: var(--sp-2);
    border-left: 1px solid var(--line-soft);
    margin-left: var(--sp-3);
}
.sidebar__subnav .sidebar__link {
    font-size: 13px;
    padding: 6px 10px;
}

/* ---------- User dropdown (legacy) ---------- */
.user-dropdown { position: relative; }
.user-dropdown__trigger {
    background: transparent; border: 0; padding: 0;
    cursor: pointer; border-radius: 50%;
}
.user-dropdown__menu {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-lg);
    padding: var(--sp-2);
    z-index: 100;
}
.user-dropdown__menu.is-open { display: block; }
.user-dropdown__header {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.user-dropdown__divider {
    border: 0; border-top: 1px solid var(--line-soft);
    margin: var(--sp-2) calc(var(--sp-2) * -1);
}
.user-dropdown__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px;
    font-size: 14px; color: var(--ink-soft);
    text-decoration: none;
}
.user-dropdown__item:hover { background: var(--surface-alt); color: var(--ink); }
.user-dropdown__locale {
    display: flex; gap: 6px; padding: var(--sp-2);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--line-soft);
}
.user-dropdown__lang {
    flex: 1; text-align: center;
    padding: 6px 10px; border-radius: 8px;
    font-family: var(--f-mono); font-size: 12px;
    color: var(--ink-soft); text-decoration: none;
    border: 1px solid var(--line);
}
.user-dropdown__lang.is-active {
    background: var(--ink); color: var(--surface); border-color: var(--ink);
}

/* ---------- Body / app shell baseline ---------- */
body { background: var(--bg); color: var(--ink); font-family: var(--f-sans); }

/* legacy main.container — wrap content with consistent rhythm.
   Use individual padding-* properties (not the shorthand) so the
   tabbar padding-bottom rule below isn't clobbered. */
.app-shell main.container {
    padding-top: var(--sp-6);
    padding-right: var(--sp-6);
    padding-left: var(--sp-6);
    padding-bottom: var(--sp-6);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
}

/* Admin pages need elbow-room for wide tables (users list with avatar +
   id + email + name + country + karma + status + activity + actions,
   bulk-action bar above). Public pages stay at 1200px so reading
   columns don't go cinema-wide. */
body.admin-page .app-shell main.container {
    max-width: 1600px;
}
@media (max-width: 900px) {
    .app-shell { display: block; }
    .app-shell .sidebar { display: none; }
    .app-shell main.container {
        padding-top: var(--sp-4);
        padding-right: var(--sp-4);
        padding-left: var(--sp-4);
        /* leave padding-bottom to the tabbar rule below */
    }
}

/* Floating tabbar (≤1023px). Reserve room at the bottom of every page so
   sticky composers / "load more" sentinels aren't hidden behind it. The
   tabbar itself sits at bottom: 14px with ~64px height, so we need at
   least 96px breathing space. Disabled at lg+ where .tabbar is hidden. */
@media (max-width: 1023px) {
    body.has-tabbar .app-shell main.container,
    body.has-tabbar main.container,
    body.has-tabbar > main {
        padding-bottom: calc(var(--sp-9) + var(--sp-4));
    }
}

/* ---------- Tabbar: mobile-only ---------- */
/* premium.css declares `.tabbar { display: flex; }` unconditionally, which
   was overriding the legacy `@media (min-width: 1024px) { display: none }`
   rule in app.css due to load order. Re-assert the desktop hide here with
   !important so the floating bottom rail only ever shows on phones. */
@media (min-width: 1024px) {
    .tabbar { display: none !important; }
}

/* ---------- Chat page: full-width, no sidebar / no tabbar ---------- */
/* The chat conversation has its own internal rails (conversation list +
   partner snapshot), so the global sidebar and floating tabbar would
   just compete for space. Hide them and let the chat fill the viewport.

   Heights: every column locked to (viewport − topbar − container padding)
   so each rail (incl. the centre thread) scrolls *inside* its own box.
   Messages get flex:1 inside chat-thread so they consume whatever space
   header + composer leave, and only the messages list scrolls. */
:root { --chat-page-h: calc(100dvh - 64px - var(--sp-4) * 2); }

body.chat-page .sidebar { display: none !important; }
body.chat-page .tabbar { display: none !important; }
body.chat-page .app-shell { display: block; }
body.chat-page .app-shell main.container {
    max-width: none;
    padding: var(--sp-4);
    height: calc(100dvh - 64px);   /* clip overflow inside */
    overflow: hidden;
}

body.chat-page .chat-layout { height: 100%; }

body.chat-page .chat-thread {
    height: 100%;
    min-height: 0;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
}
body.chat-page .chat-thread > .header { flex: 0 0 auto; }
body.chat-page .chat-thread > .composer { flex: 0 0 auto; }
body.chat-page .chat-thread > .messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4);
}

body.chat-page .chat-list-rail,
body.chat-page .chat-side {
    height: 100%;
    max-height: 100%;
    position: static;
}

@media (max-width: 1023px) {
    body.chat-page .app-shell main.container { padding-bottom: var(--sp-4); }
}

/* ---------- Eyebrow polish ---------- */
.eyebrow {
    font-family: var(--f-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-muted);
}

/* ---------- Flash messages ---------- */
.flash {
    padding: 12px 16px; border-radius: var(--r-card);
    background: var(--surface-alt); color: var(--ink);
    border: 1px solid var(--line);
    margin-bottom: var(--sp-4); font-size: 14px;
}
.flash.success { background: rgba(91, 142, 114, 0.12); border-color: var(--mint); color: var(--mint); }
.flash.error   { background: rgba(197, 97, 79, 0.12);  border-color: var(--coral); color: var(--coral); }

/* ---------- Form rhythm ---------- */
.form-stack > * + * { margin-top: var(--sp-3); }
.form-stack input[type=text],
.form-stack input[type=email],
.form-stack input[type=password],
.form-stack input[type=number],
.form-stack input[type=date],
.form-stack textarea,
.form-stack select {
    width: 100%; min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-input);
    background: var(--surface-alt);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 15px;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: var(--sh-glow);
}
.form-stack .field-label,
.form-stack label > .field-label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--ink-soft); margin-bottom: 6px;
}
.form-stack .check-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px;
}

/* ---------- Auth-page legacy support ---------- */
.auth-page {
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: var(--sp-5);
    position: relative; overflow: hidden;
    background: var(--bg);
}
.auth-page .blob {
    position: fixed; pointer-events: none; z-index: 0;
    filter: blur(80px); opacity: 0.45; border-radius: 50%;
}
.auth-page .blob-1 {
    width: 520px; height: 520px;
    top: -160px; left: -160px;
    background: radial-gradient(circle, var(--plum), transparent 70%);
}
.auth-page .blob-2 {
    width: 460px; height: 460px;
    bottom: -180px; right: -160px;
    background: radial-gradient(circle, var(--gold), transparent 70%);
}
.auth-page .panel {
    position: relative; z-index: 1;
    width: 100%; max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-modal);
    box-shadow: var(--sh-lg);
    padding: var(--sp-7);
}
.auth-page .hero {
    font-family: var(--f-display); font-weight: 500;
    font-size: clamp(28px, 5vw, 40px); line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 12px;
}
.auth-page .hero em { color: var(--accent); font-style: italic; }
.auth-page .sub {
    color: var(--ink-soft); margin: 0 0 var(--sp-5);
    font-size: 15px; line-height: 1.55;
}
.auth-page .pills {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.auth-page .pill-primary,
.auth-page .pill-violet,
.auth-page .pill-saffron,
.auth-page .pill-mint {
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    font-family: var(--f-mono); letter-spacing: 0.05em;
}
.auth-page .pill-primary { background: var(--plum); color: var(--surface); }
.auth-page .pill-violet  { background: var(--rose-soft); color: var(--plum-deep); }
.auth-page .pill-saffron { background: var(--gold); color: var(--ink); }
.auth-page .pill-mint    { background: var(--mint); color: var(--surface); }

/* ---------- Drawer (mobile menu) ---------- */
.drawer {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(31, 14, 27, 0.55);
    backdrop-filter: blur(8px);
    display: flex; justify-content: flex-end;
}
.drawer[aria-hidden="true"] { display: none; }
.drawer .panel {
    background: var(--surface);
    width: min(86vw, 320px);
    height: 100%;
    padding: var(--sp-5);
    overflow-y: auto;
    box-shadow: var(--sh-lg);
    animation: slide-in var(--dur-base) var(--ease-spring);
}
@keyframes slide-in { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .panel nav {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: var(--sp-4);
}
.drawer .panel nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14px; color: var(--ink-soft);
    text-decoration: none;
}
.drawer .panel nav a:hover { background: var(--surface-alt); color: var(--ink); }

/* ---------- Generic spacers ---------- */
.spacer-lg { height: var(--sp-8); }
.spacer-md { height: var(--sp-5); }

/* ---------- Tabbar legacy (mobile bottom bar in layout.html.twig) ---------- */
.tabbar a span {
    /* premium.css adds dot indicator at top, span hidden by default for
       legacy tabbar that uses span labels too — we want them visible */
    display: inline;
}
.tabbar a.spark, .tabbar .spark {
    flex: 0 0 56px; height: 56px; margin-top: -22px;
    border-radius: 50%;
    background: var(--g-primary);
    color: var(--surface);
    box-shadow: 0 8px 22px rgba(92, 35, 64, 0.4);
    display: grid; place-items: center;
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex; gap: 6px; flex-wrap: wrap;
    justify-content: center; margin-top: var(--sp-5);
}
.pagination a, .pagination span, .pagination .current {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
}
.pagination a:hover { background: var(--surface-alt); color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ============================================================
   Mobile safety net — last layer, wins on conflicts.
   Most pages compose with `.app-shell main.container` and inline
   styles. The rules below patch the most common mobile-breaking
   patterns so every page renders without horizontal scroll, with
   tap-friendly form controls and grids that collapse on phones,
   without rewriting individual templates.
   ============================================================ */

/* --- 1. Global guards (all viewports) ---------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, picture, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Long unbroken strings (URLs, hashtags, long emails) must wrap. */
.card, .bubble, .post-body, .feed-item, .chat-list .thread .last-text,
.user-card .info, .form-stack textarea {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Cards and shells must be allowed to shrink inside flex/grid parents. */
.app-shell, .app-shell main.container, .card, .grid, .grid > * {
    min-width: 0;
}

/* --- 2. Mobile (≤640px) ----------------------------------- */
@media (max-width: 640px) {
    /* Tighter container padding so cards reach edge-to-edge. */
    .app-shell main.container {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    /* Tap-friendly: any input/select/button at least 44px tall and
       full-width unless the markup overrides flex/grid layout. */
    input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
    select, textarea {
        min-height: 44px;
        font-size: 16px; /* prevent iOS auto-zoom on focus */
    }
    /* Common pattern: 60–80px country/age inputs sit inside a flex row.
       Make them shrink-to-content but let the row wrap. */
    .filters, .filter-row, form.filters {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Inline grids that don't carry their own breakpoint: collapse to
       a single column on phones. Attribute selectors target inline-styled
       grids in templates we don't want to edit one-by-one. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2, 1fr)"],
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:280px 1fr"],
    [style*="grid-template-columns: 280px 1fr"],
    [style*="grid-template-columns:1fr auto 1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* On the user-profile page (and anywhere else .avatar-large lives in a
       left column collapsed to full width on mobile), center the photo so it
       doesn't hug the left edge of a now-empty row. The width stays 240px;
       margin auto centers within the parent. */
    .avatar-large,
    a > .avatar-large {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Photo strips and grids inside profiles often render as 3 cols of
       tiny squares; keep 3 cols but cap min size so they can fit. */
    [style*="grid-template-columns:repeat(3, 1fr)"][style*="gap:6px"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Tables — convert to horizontal-scroll regions so they don't
       blow out the viewport. The wrapper handles overflow; the table
       itself stays untouched. */
    .app-shell table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--sp-3) * -1); /* edge-to-edge on phones */
        padding-inline: var(--sp-3);
    }

    /* The user dropdown menu opens from the topnav; on narrow screens
       it must fit the viewport instead of overflowing offscreen. */
    .user-dropdown__menu {
        position: fixed;
        top: 56px;
        right: 8px;
        left: 8px;
        min-width: 0;
        max-width: none;
    }

    /* Drawer takes a touch wider on small phones for thumb reach. */
    .drawer .panel { width: min(92vw, 320px); }

    /* Section titles wrap nicely; long page titles stop pushing the
       layout sideways. */
    h1, h2, h3, .section .section-title { overflow-wrap: anywhere; }

    /* The 5-col home grid + 4-col footer — keep their own media queries
       intact, but make sure cards never overflow. */
    .user-card .photo .initial { font-size: 30%; }

    /* Sticky chat composer sits behind the tabbar otherwise. */
    body.has-tabbar .chat-thread .composer {
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    /* Floating tabbar respects iOS home indicator. */
    .tabbar { bottom: max(14px, env(safe-area-inset-bottom)); }

    /* Real-photo nudge widget (fixed bottom-right) — keep it above
       tabbar and on-screen. */
    [style*="position:fixed"][style*="bottom:16px"][style*="right:16px"] {
        bottom: 96px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
    }

    /* Tighten chat back button + composer so they fit narrow screens. */
    .chat-thread .composer { padding: 8px 8px 14px; gap: 6px; }
    .chat-thread .messages { padding: 12px 10px 6px; }

    /* Cards built around 4-up auto-fill grids: shrink min-track so two
       columns fit on a 360px-wide phone. */
    [style*="minmax(160px, 1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    [style*="minmax(180px, 1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
    [style*="minmax(200px, 1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
    [style*="minmax(220px, 1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }
}

/* --- 2b. Profile action button row -------------------------- */
/* Used by templates/main/user_profile.html.twig. Desktop: free-flow
   wrapping flex. Mobile: 2-column grid so labels never clip and the
   row stays predictable regardless of label length. */
.profile-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 24px;
}
.profile-actions > form { margin: 0; display: flex; }
.profile-actions .btn {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    min-width: 0;
}
/* Icon-only buttons (block / unblock / report / like) — square + compact. */
.profile-actions .btn--icon,
.profile-actions form > .btn[aria-label],
.profile-actions > a.btn[aria-label]:not([href*="chat"]):not([href*="gift"]) {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    /* On phones we let the row wrap into two — labels stay readable instead
       of getting squashed into icon-only squares. Gap stays 6px and buttons
       keep their text. Icon-only buttons remain compact via the rule above. */
    .profile-actions {
        gap: 6px;
        flex-wrap: wrap;
    }
    .profile-actions .btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    .profile-actions .btn--icon,
    .profile-actions form > .btn[aria-label],
    .profile-actions > a.btn[aria-label]:not([href*="chat"]):not([href*="gift"]) {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* --- 3. Very narrow (≤380px) ------------------------------ */
@media (max-width: 380px) {
    .app-shell main.container {
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }
    .tabbar a span { font-size: 9px; }
}