/* ------------------------------------------------------------------
   mobile.css — shared responsive rules for every layout
   (public _Layout, _FullScreenLayout, _FSLayout and admin _AdminLayout).
   Loaded last so it can override page-level sizes on small screens.
   ------------------------------------------------------------------ */

/* Never let a wide element create a horizontal page scroll. `clip`
   (unlike `hidden`) does not turn <html> into a scroll container, so
   the sticky public header keeps working. */
html {
    overflow-x: clip;
}

/* Marker the Playwright suite (e2e/) uses to confirm this file loaded. */
:root {
    --mobile-css-loaded: 1;
}

/* Media and embeds shrink with their container. Images that carry an
   explicit height attribute keep it (e.g. the footer logo). */
img,
video,
iframe,
object,
embed,
svg,
canvas {
    max-width: 100%;
}

img:not([height]) {
    height: auto;
}

/* Tables are wrapped in .table-responsive by assets/js/mobile.js.
   Keep the wrapper tidy and make sure it scrolls on touch devices. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* Long words / URLs in cells, cards and alerts should wrap instead of
   pushing the layout wider. `break-word` (not `anywhere`) keeps whole
   words as the minimum column width, so wide tables scroll inside their
   wrapper instead of being squeezed to one letter per line. */
td,
th,
.card-body,
.alert,
.panel-body {
    overflow-wrap: break-word;
}

/* A .row sitting directly in <body>, a <section> or a plain <div> (not in
   a .container or a column) sticks out by its negative gutter margin and
   makes the page scroll sideways at every width. Rows inside a container
   or nested in another row keep Bootstrap's normal margins. */
.row:not(:is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .container-alt, .container-66vh, .row, .modal-body) .row) {
    margin-left: 0;
    margin-right: 0;
}

/* Membership card (membershipcard.css) is a fixed 800x500 artwork.
   Scale it down as a whole on narrow screens; printing is untouched. */
@media screen and (max-width: 900px) {
    .id-card,
    .id-card-en {
        zoom: 0.7;
    }
}

@media screen and (max-width: 640px) {
    .id-card,
    .id-card-en {
        zoom: 0.45;
    }
}

@media screen and (max-width: 400px) {
    .id-card,
    .id-card-en {
        zoom: 0.38;
    }
}

/* -------------------------- phones & tablets ----------------------- */
@media (max-width: 991.98px) {

    /* Flex rows that were only ever laid out for desktop wrap instead
       of overflowing. Rows that must stay on one line use .flex-nowrap. */
    .d-flex:not(.flex-nowrap) {
        flex-wrap: wrap;
    }

    [style*="display:flex"]:not([style*="wrap"]),
    [style*="display: flex"]:not([style*="wrap"]) {
        flex-wrap: wrap;
    }

    /* Let flex items shrink below their content width, so a fixed-width
       field such as style="width:20rem" fits on its own line. */
    .d-flex > *,
    [style*="display:flex"] > *,
    [style*="display: flex"] > * {
        min-width: 0;
    }
}

/* -------------------------- phones & small tablets ----------------- */
@media (max-width: 767.98px) {

    /* Sections that are centred as a 66vw / 25% column on desktop
       take the full width on phones. */
    .container-66vh {
        width: 100%;
        padding: 0 1rem;
    }

    .user-area-entry {
        width: 92%;
    }

    .small-banner {
        width: 100%;
        max-width: 22rem;
    }

    /* Desktop-sized gutters (3rem) eat most of a phone's width. */
    .m-5 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .mx-5 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .p-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Inline-width elements (e.g. style="width:30rem") never exceed the
       screen. */
    [style*="width:"]:not(table):not(th):not(td):not(tr) {
        max-width: 100%;
    }

    /* iOS Safari zooms the page when a focused field is smaller than
       16px. Keeping fields at 16px prevents that jump. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Comfortable touch targets. */
    .btn,
    .form-control {
        min-height: 2.6rem;
    }

    .btn-group > .btn,
    .btn-group-sm > .btn,
    .btn-sm {
        min-height: 0;
    }

    /* Modals use the whole width on phones. */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Public header: hamburger row should never clip its own links. */
    .topnav a {
        font-size: 1rem;
    }

    /* Admin layout (Bootstrap 3): avoid the 940px blank area on short
       pages and let the sticky footer text wrap. */
    .content-page {
        min-height: 70vh;
        margin-right: 0;
    }

    .content-page > .content {
        padding: 10px 0 15px 0;
    }

    .footer {
        position: static;
        padding: 15px;
    }

    .page-title {
        float: none !important;
        margin-bottom: 0.75rem;
    }

    .form-inline .form-control {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* -------------------------- admin top bar --------------------------- */
.admin-topbar {
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    min-height: 3.25rem;
}

.admin-topbar a {
    color: #fff;
    white-space: nowrap;
}

.admin-topbar a:hover,
.admin-topbar a:focus {
    color: #e0e0e0;
    text-decoration: none;
}

.admin-topbar .admin-topbar-main,
.admin-topbar .admin-topbar-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0;
}

.admin-topbar .admin-topbar-main > a,
.admin-topbar .admin-topbar-side > a {
    padding: 0.75rem 0.6rem;
}

.admin-topbar .admin-topbar-main .sep {
    opacity: 0.6;
}

.admin-topbar .admin-topbar-links {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-right: 1rem;
}

.admin-topbar .admin-topbar-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    margin: 0.5rem 0;
}

@media (max-width: 991.98px) {
    .admin-topbar {
        padding: 0 1rem;
    }

    .admin-topbar .admin-topbar-toggle {
        display: inline-block;
    }

    .admin-topbar .admin-topbar-brand {
        flex: 1 1 auto;
    }

    .admin-topbar .admin-topbar-links {
        display: none;
        flex-basis: 100%;
        margin-right: 0;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 0.5rem;
    }

    .admin-topbar.is-open .admin-topbar-links {
        display: flex;
    }

    .admin-topbar .admin-topbar-main,
    .admin-topbar .admin-topbar-side {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar .admin-topbar-main > a,
    .admin-topbar .admin-topbar-side > a {
        padding: 0.6rem 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        margin: 0 !important;
    }

    .admin-topbar .admin-topbar-main .sep {
        display: none;
    }
}

@media print {
    .id-card,
    .id-card-en {
        zoom: 1;
    }
}