/* Generic Serepok mobile header and drawer layout. */
@media (max-width: 1199.98px) {
    body .section-header {
        height: auto !important;
        min-height: 0 !important;
    }

    .section-header .nav-div,
    .section-header .navbar,
    .section-header #header {
        min-height: 64px !important;
        height: 64px !important;
    }

    /* CMS-generated header rules can switch the desktop utility group back on
       at 1101px. Keep the mobile header contract intact until Bootstrap's
       actual xl breakpoint begins at 1200px. */
    .section-header #header,
    .section-header #header > .container,
    .section-header .serepok-brand-wrap {
        flex-wrap: nowrap !important;
    }

    .section-header #header .serepok-primary-nav-wrap,
    .section-header #header .navbar-end {
        display: none !important;
    }

    .section-header #header > .container {
        width: 100% !important;
        max-width: none !important;
        min-height: 64px !important;
        height: 100% !important;
        align-items: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-header .serepok-brand-wrap {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        align-items: center !important;
    }

    .section-header .navbar-brand.serepok-brand,
    .section-header a.navbar-brand.serepok-brand {
        min-height: 0 !important;
        height: auto !important;
        align-self: center !important;
        align-items: center !important;
        line-height: 0 !important;
    }

    .section-header .navbar-brand.serepok-brand .serepok-brand-logo,
    .section-header a.navbar-brand.serepok-brand .serepok-brand-logo {
        display: block !important;
        max-height: 48px !important;
        height: auto !important;
        align-self: center !important;
    }

    .section-header .serepok-menu-toggle {
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        align-self: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .section-header .serepok-menu-toggle-icon {
        display: block !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Preserve every invoice/service field and its localized column label on phones. */
@media (max-width: 767px) {
    .dataTables_wrapper #tableInvoicesList td[data-label]::before,
    .dataTables_wrapper #tableServicesList td[data-label]::before {
        content: attr(data-label);
    }
    .dataTables_wrapper #tableServicesList td[data-label=""] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: end;
    }
    .dataTables_wrapper #tableServicesList td[data-label=""]::before { display: none; }

    /* Toolbar groups stay horizontal and wrap as complete groups. */
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header,
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-header {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible;
    }
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-group,
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-header .btn-group {
        flex: 0 0 auto !important;
        width: auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn,
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-header .btn {
        flex: 0 0 auto !important;
    }
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header [data-handler="bootstrap-markdown-cmdPreview"],
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-header [data-handler="bootstrap-markdown-cmdPreview"] {
        width: auto !important;
        min-width: 96px !important;
        gap: 6px;
        padding: 0 12px !important;
    }
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .form-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 10px;
    }
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .form-actions .btn {
        flex: 0 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        height: auto !important;
    }
}