/*
 |--------------------------------------------------------------------------
 | Busi.bio - mobile first
 |--------------------------------------------------------------------------
 | The rules that keep the dashboard, the admin panel and the public pages
 | usable on a phone. Everything here is scoped to a small screen so the
 | desktop layout is never touched.
 */

@media (max-width: 767px) {

    /* --------------------------------------------------------- page ---- */
    html,
    body {
        overflow-x: hidden;
    }

    /*
     * The dashboard of Tabler. The class "busi-dashboard" is only on the
     * body of the dashboard and of the admin panel, so the rules below
     * never touch a card theme that uses its own styles.
     */
    body.busi-dashboard {

        .page {
            overflow-x: hidden;
        }

        .page-body {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .page-header {
            flex-wrap: wrap;
            row-gap: 0.5rem;
        }

        .page-header .page-title {
            margin-bottom: 0;
        }

        .page-header .btn-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            width: 100%;
        }

        .page-header .btn-list .btn {
            flex: 1 1 auto;
        }

        /* --------------------------------------------------- sidebar ---- */
        /*
         * The dashboard of Tabler uses a vertical navbar. On a phone it
         * becomes a horizontal top bar that spans the whole screen, the
         * menu slides in over it (see .navbar-collapse.show .navbar-nav in
         * user-custom.css).
         *
         * The bar itself must stay 100% wide, otherwise the logo and the
         * buttons on the right are cut off. The width of the slide in menu
         * is set on the menu itself, not on the bar.
         */
        aside.navbar.navbar-vertical {
            width: 100% !important;
            max-width: 100%;
            top: 0 !important;
            left: 0 !important;
            z-index: 1045;
        }

        /* The bar only holds the logo and the buttons, it never scrolls. */
        aside.navbar.navbar-vertical > .container-fluid {
            flex-wrap: nowrap;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        /*
         * The logo must not be squeezed to zero. Without a width the inline
         * SVG of the wordmark has nothing to scale from, so it collapses.
         */
        aside.navbar.navbar-vertical .navbar-brand {
            flex: 0 1 auto;
            min-width: 0;
            margin-inline: 0 !important;
        }

        /*
         * The wordmark is wide. On a phone the bar also holds the language
         * button and the theme buttons, so the logo is capped and shrinks
         * when there is not enough room.
         */
        aside.navbar.navbar-vertical .navbar-brand .busi-logo {
            max-width: 130px;
        }

        /*
         * The buttons on the right (language, dark mode, light mode) keep
         * their size and are pushed to the right of the bar.
         */
        aside.navbar.navbar-vertical .navbar-nav.flex-row {
            flex: 0 0 auto;
            margin-inline-start: auto;
            margin-inline-end: 0;
            flex-wrap: nowrap;
            gap: 0.25rem;
        }

        aside.navbar.navbar-vertical .navbar-nav.flex-row > * {
            flex: 0 0 auto;
        }

        .navbar-vertical .navbar-nav .nav-link {
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
        }

        /* ----------------------------------------------------- cards ---- */
        .card {
            margin-bottom: 0.75rem;
        }

        .row-cards > .col-sm-12,
        .row-cards > [class*='col-'] {
            padding-left: 0.4rem;
            padding-right: 0.4rem;
        }

        /* ----------------------------------------------------- forms ---- */
        .form-label {
            margin-bottom: 0.35rem;
        }

        .btn {
            /* A comfortable tap target on a phone. */
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-sm {
            min-height: 36px;
        }

        .btn-icon {
            min-width: 42px;
        }

        /* --------------------------------------------------- tables ---- */
        /*
         * A wide table must scroll inside its own box, it must never push
         * the page to the side.
         */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }

        /*
         * The card of a table used to hide the overflow, on a phone that
         * cut the columns off. The table scrolls inside the box of the
         * table itself, the card around it keeps its own size.
         */
        div.card.card-table {
            overflow-x: hidden;
        }

        div.card.card-table > .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }

        /* The search field of a data table takes the full width. */
        .dataTables_wrapper .dataTables_filter {
            display: flex;
            width: 100%;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .dataTables_wrapper .dataTables_filter input {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            flex: 1 1 auto;
        }

        .dataTables_wrapper .dataTables_length {
            display: block;
            width: 100%;
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dt-length select,
        .dt-container .dt-length select,
        .dt-length select {
            margin-left: 0 !important;
            width: auto !important;
            min-width: 64px;
            min-height: 36px;
            padding-top: 0.35rem;
            padding-bottom: 0.35rem;
        }

        /*
         * TomSelect hides the original select and shows a box instead. The
         * box is what the visitor taps, it needs the height of a real
         * button.
         */
        .ts-wrapper {
            min-height: 38px;
            align-items: center;
        }

        /* ---------------------------------------------- utilities ---- */
        .text-md-end,
        .text-sm-end,
        .text-lg-end {
            text-align: start !important;
        }

        .float-md-start,
        .float-md-end,
        .float-sm-start,
        .float-sm-end {
            float: none !important;
        }

        /* The dropdown of the language and the theme picker. */
        .dropdown-menu {
            max-width: calc(100vw - 2rem);
        }

        /* --------------------------------------------- tap targets ---- */
        /*
         * The name of a card or a store in the tables of the dashboard is
         * the main link of the row, it needs a tap target of a real button.
         */
        .table a.text-reset.fw-bold,
        .table a.text-reset,
        .dataTables_wrapper a.text-reset,
        .dataTables_wrapper a.text-reset.fw-bold {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 0.35rem 0;
        }

        /* The header of the calendar of the dashboard. */
        .fc-col-header-cell-cushion {
            min-height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.25rem;
        }

        /*
         * On a phone the tables of the dashboard are shown as cards. The
         * name of the card is the main link of the card, it needs a tap
         * target of a real button.
         */
        .mobile-cards a.text-reset,
        .mobile-cards a.text-reset.fw-bold {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 0.35rem 0;
        }

        /*
         * The header of a block of the editor is a row with an icon, the
         * name of the block, a counter and a button. On a phone there is
         * not enough room for all of them, the name of the block is cut
         * in the middle. The name wraps on two lines instead.
         */
        .block-card .card-header .flex-fill {
            min-width: 0;
        }

        .block-card .card-header .card-title,
        .block-card .card-header .text-muted {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
        }

        .block-card .card-header .badge {
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* A counter must not be cut in the middle. */
        .badge {
            white-space: nowrap;
            overflow: visible;
        }
    }

    /* ------------------------------------------------- tap targets ---- */
    /*
     * The rules below are safe for every template, they only make a small
     * element easier to tap.
     */

    /* The arrows of the sliders of the themes. */
    .slick-prev,
    .slick-next {
        width: 36px !important;
        height: 36px !important;
        line-height: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .slick-prev::before,
    .slick-next::before {
        font-size: 22px;
    }

    /* The dots of a slider of a theme. */
    .slick-dots li button {
        min-width: 30px;
        min-height: 30px;
    }

    /*
     * The button that shows the password of the login and of the register
     * page. It sits on top of the field, so it needs a tap target of a
     * real button and it must not cover the text of the field.
     */
    .show-password-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
    }

    /*
     * The links of the login and of the register page, they are small but
     * they are the only way to reach the other page.
     */
    .underline.hover\:text-gray-500,
    a.hover\:text-gray-800.hover\:font-bold {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0.35rem 0;
    }

    /* The social icons of the themes. */
    .link-light,
    .link-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        min-width: 36px;
    }

    /* The name of a card or a store on the public pages. */
    a.text-\[\#327C91\] {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    /* The counter of the products of the store. */
    a.position-relative.cursor-pointer.btn-effect {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The mail and the phone number of the contact page. */
    .vbi-contact-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    /*
     * The name of the owner in the copyright line of the themes of the
     * stores. It is a small link, but it is the only way back to the card.
     */
    a.text-gray.fw-semibold {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0.15rem 0;
    }

    /*
     * The link that upgrades the plan of a customer whose plan expired.
     */
    .form-hint a,
    .form-hint a.text-primary {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0.15rem 0;
    }

    /*
     * The button of the error pages. The text sits in a paragraph inside
     * the link, so the link itself is the tap target.
     */
    .group.relative a[href] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* ------------------------------------------------- info popup ---- */
    /*
     * The popup of a card is a sheet that slides up from the bottom of the
     * screen on a phone. The theme does not always ship the utility that
     * gives the sheet the full height, so it is set here.
     */
    #infoPopModal > .flex {
        min-height: 100%;
    }

    #infoPopModal > .flex > div {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ------------------------------------------------- bottom bar ---- */
    /*
     * The store themes show a navigation bar at the bottom of the screen.
     * It is fixed, so the last part of the page would be hidden behind it,
     * the body gets the room it needs.
     */
    body:has(.navbar-2.fixed-bottom) {
        padding-bottom: 96px;
    }

    body:has(.navbar-2.fixed-bottom) .footer,
    body:has(.navbar-2.fixed-bottom) .site-footer {
        padding-bottom: 1rem;
    }

    /* ------------------------------------------- floating buttons ---- */
    /*
     * A floating button that stays on the screen (the chat bubble, the
     * preview button) must never sit on top of the last line of the page.
     * The body gets a bottom padding of the height of the button, so the
     * content can always be scrolled out of the way.
     */
    body:has(.vbi-wa-support),
    body:has(.busi-preview-fab) {
        padding-bottom: 88px;
    }

    /*
     * A page that has both, the bottom bar of the theme and a floating
     * button, needs the room of the two of them.
     */
    body:has(.navbar-2.fixed-bottom):has(.vbi-wa-support),
    body:has(.navbar-2.fixed-bottom):has(.busi-preview-fab) {
        padding-bottom: 168px;
    }

    /*
     * The themes of the cards show a bar with the actions of the card
     * (call, save, share) fixed at the bottom of the screen. The body
     * gets the room of the bar, so the last part of the page is never
     * hidden behind it.
     */
    body:has(> .fixed.w-11\/12[class*='bottom-4']),
    body:has(.fixed.w-11\/12[class*='bottom-4']) {
        padding-bottom: 104px;
    }

    /*
     * On a phone the floating preview button only shows the icon, it is
     * a round button of a comfortable size.
     */
    .busi-preview-fab {
        width: 3.25rem !important;
        height: 3.25rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
    }

    /* The chat bubble of the website. */
    .vbi-wa-support {
        right: 16px !important;
        bottom: 16px !important;
    }

    /*
     * The name of a product in the themes of the stores is cut with an
     * ellipsis. On a phone the name is the only thing that tells the
     * product apart, so it wraps on two lines.
     */
    .single-product {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* The safe areas of a phone with a notch, the buttons of the bottom bar
   must not sit under the home indicator. */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        .bottom-fix {
            padding-bottom: calc(15px + env(safe-area-inset-bottom));
        }

        .footer {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ------------------------------------------------------------- RTL ---- */
[dir='rtl'] .dropdown-menu {
    text-align: right;
}

/* ----------------------------------------------------------- footer ---- */
@media (max-width: 767px) {

    /*
     * The rows of the website use a negative margin to line the columns up.
     * On a phone the row is wider than the screen, so the margin is removed
     * and the padding of the columns is reduced.
     */
    .container .flex.flex-wrap[class*='-m-6'] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container .flex.flex-wrap[class*='-m-6'] > [class*='p-6'] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* The links of the footer are the only way to reach the pages on a
       phone, they need a tap target of at least 40 pixels. */
    .site-footer li a,
    footer li a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* The list items are separated by a dot, the extra room of the tap
       target would push the dots apart, the margin is reduced. */
    .site-footer li,
    footer li {
        margin-bottom: 0.25rem !important;
    }
}