/**
 * AppEmployee - desktop layout and local-scroll fixes.
 *
 * This file only corrects geometry and overflow containment. It deliberately
 * does not replace the legacy palette, typography, inputs, tables, logos or
 * modal chrome. It is loaded after the legacy styles by the application
 * pages that opt in to it.
 *
 * Rules of this file:
 * - html/body are never given overflow-x:hidden; hiding overflow at the page
 *   level masks clipped content and makes automated layout checks meaningless.
 * - Wide tables scroll inside their own wrapper, keeping every column and row
 *   action reachable.
 * - No generic `table { display:block }`, no recolouring of inputs/buttons,
 *   no replacement of the 150px login logo.
 */

/* --------------------------------------------------------------------------
   1. Application header: flexible middle, never a rigid 33.33% split.
   -------------------------------------------------------------------------- */

.aplication-bar {
    display: flex !important;
    height: auto !important;
    min-height: 56px;
    width: 100%;
    padding: 8px 18px !important;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

.aplication-bar__left {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
}

.aplication-bar__center {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    text-align: center;
}

.aplication-bar__center > div {
    max-width: 100% !important;
    margin: 0 auto;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.aplication-bar__right {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end;
}

.aplication-bar__right img {
    display: block;
    width: auto !important;
    max-width: 130px !important;
    max-height: 36px !important;
    object-fit: contain;
}

/* Keep the existing "Ir" control recognisable, just give it a usable target. */
.aplication-bar__left .menu-off {
    min-width: 56px;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 8px;
    line-height: 1.2;
    cursor: pointer;
}

.aplication-bar__left .menu-off:focus-visible,
.aplication-bar__left .menu-off:focus {
    outline: 2px solid #EA8205;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .aplication-bar {
        min-height: 50px;
        padding: 6px 12px !important;
    }

    .aplication-bar__right img {
        max-width: 95px !important;
        max-height: 28px !important;
    }

    .aplication-bar__left .menu-off {
        min-width: 48px;
        min-height: 34px;
        padding: 5px 10px;
    }
}

/* --------------------------------------------------------------------------
   2. Module menu (#MobileMenu): use the available desktop width, keep the
      existing modal colours and icon artwork. Mobile behaviour is untouched.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    #MobileMenu .uk-modal-dialog {
        width: 90%;
        max-width: 920px;
        margin: 32px auto;
    }

    #MobileMenu .app__modal__content {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #MobileMenu .uk-child-width-1-3 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 16px;
        margin: 0;
    }

    #MobileMenu .uk-child-width-1-3 > * {
        width: 100%;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   3. Schedule: local horizontal scrolling only when the grid is wider than
      its container. No forced scrollbar.
   -------------------------------------------------------------------------- */

.schedule__content,
.schedule__conten--control-app {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.schedule__content {
    min-width: 0;
}

.filter-product-selection,
.pro__sched__service {
    box-sizing: border-box;
    max-width: 100%;
}

.pro__sched__service {
    padding-right: 8px;
}

/* --------------------------------------------------------------------------
   4. Wide data tables: scroll inside the wrapper that owns the table.
      The table keeps its native display and column sizing.
   -------------------------------------------------------------------------- */

.table-responsive-wrapper,
.customer-service-table-wrap,
.commission-table-wrap,
.FindClienteTableView,
.FindExpanseTableView,
.FindServiceTableView,
.FindCommissionTableView,
.FindEmployeeTableView,
.BankAccountTableView,
.PaymentModeTableView,
.PermutaGroupTableView,
.ProductGroupTableView,
.ServiceGroupTableView {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTables injects its own scroll wrapper on init; do not fight it. */
.table-responsive-wrapper .dataTables_wrapper,
.customer-service-table-wrap .dataTables_wrapper,
.commission-table-wrap .dataTables_wrapper,
.FindClienteTableView .dataTables_wrapper,
.FindExpanseTableView .dataTables_wrapper,
.FindServiceTableView .dataTables_wrapper,
.FindCommissionTableView .dataTables_wrapper,
.FindEmployeeTableView .dataTables_wrapper,
.BankAccountTableView .dataTables_wrapper,
.PaymentModeTableView .dataTables_wrapper,
.PermutaGroupTableView .dataTables_wrapper,
.ProductGroupTableView .dataTables_wrapper,
.ServiceGroupTableView .dataTables_wrapper {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   5. Password recovery modal: replace the legacy 1200px inline width with a
      readable dialog. The close button and form controls keep their legacy
      appearance.
   -------------------------------------------------------------------------- */

#modal-user-inside-recovery .uk-modal-dialog {
    max-width: 480px !important;
    width: 92% !important;
    margin: 20px auto !important;
    box-sizing: border-box;
}

#modal-user-inside-recovery .uk-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    #modal-user-inside-recovery .uk-modal-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. Legacy app-base.css hides body overflow. That masks real clipping, so
      the pages that load this stylesheet expose horizontal overflow instead.
      Any remaining overflow is a layout bug and is caught by the visual test.
   -------------------------------------------------------------------------- */

html,
body {
    overflow-x: visible !important;
}

/* The legacy page shell leaves the browser's default body margin in some
   fixture/standalone views. Remove it so a 100%-wide table is not reported as
   an 8px page overflow. */
body {
    margin: 0;
}

@media (max-width: 767px) {
    /* The comanda service accordion uses a fixed UIKit grid whose negative
       gutters and fixed-width "Professional" button push 9px past the viewport. */
    [class*="customerServiceContent"] .uk-grid-small {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="customerServiceContent"] .cp__btn__text__edit {
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.1;
        box-sizing: border-box;
    }

    [class*="customerServiceContent"] .pro__seched__seleted__acotions {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    /* Tab strip and stacked grids of the comanda body use negative UIKit
       gutters inside a padded container. Reset them locally so the content
       no longer creates an 18px inner scroll area. */
    [class*="customerServiceContent"] .cp__tab {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 992px) {
    /* The legacy menu dialog forced width:100%!important. Keep the desktop
       menu readable and centred while leaving the mobile full-screen menu as is. */
    #MobileMenu .uk-modal-dialog {
        width: min(920px, 92vw) !important;
        max-width: min(920px, 92vw) !important;
        min-width: 0 !important;
        margin: 32px auto !important;
    }
}

/* Filter dropdowns keep their legacy placement but get a solid surface so
   labels do not bleed through the list underneath (visible on mobile). */
.form__filters__full {
    background: #ffffff !important;
    max-height: min(70vh, 620px);
    overflow-y: auto;
}

/* The legacy canvas container itself was 20% wide on wide screens, which made
   the dialog inside it only ~270px wide. Let the modal overlay use the viewport;
   the dialog controls its own maximum width. */
#MobileMenu.app__canva__menu {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Legacy app-base.css locks both axes. Horizontal is exposed for the layout
   checks; vertical scrolling is restored for standalone/app pages, while the
   normal UIKit modal lock is preserved. */
body {
    overflow-y: auto !important;
}

html.uk-modal-page,
body.uk-modal-page {
    overflow: hidden !important;
}

/* Give the full-screen module menu an explicit, visible close affordance in
   addition to Escape. The control uses UIkit's own close behaviour. */
#MobileMenu .uk-modal-close-default {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1040;
    color: #ffffff;
}

@media (max-width: 767px) {
    /* Keep the last commission/filter tab reachable instead of clipping it. */
    .pro__tab__sched {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pro__tab__sched > li {
        flex: 0 0 auto;
    }

    /* Stacking and margin containment for service image upload columns */
    .StyleGenerico-inputs .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .StyleGenerico-inputs .row > [class*="col-"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Modal footer buttons wrap on mobile viewports */
    .uk-modal-footer {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .uk-modal-dialog .uk-grid-large {
        margin-left: 0 !important;
    }

    .uk-modal-dialog .uk-grid-large > * {
        padding-left: 0 !important;
    }

    /* HTML editor and message tag sidebar wrap on mobile viewports */
    [id*="notificationTabs-"],
    div:has(> .htmlEditorParent),
    div:has(> .message-tag-ul-div) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .htmlEditorParent,
    [id*="notificationTabs-"] .htmlEditorParent {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .message-tag-ul-div,
    [id*="notificationTabs-"] .message-tag-ul-div {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    .message-tag-ul,
    [id*="notificationTabs-"] .message-tag-ul {
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   7. Component title action bars & composite inputs: allow wrapping on small
      screens so multi-action rows and filters do not push beyond viewport.
   -------------------------------------------------------------------------- */

.AreaTitle-Gnerico,
.FindExpanseTitle {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 40px;
    gap: 8px;
    box-sizing: border-box;
}

.AreaTitle-Gnerico > div,
.FindExpanseTitle > div {
    max-width: 100%;
    box-sizing: border-box;
}

.libImputCompost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
}

.libImputCompost .inputBlock {
    max-width: 100%;
    box-sizing: border-box;
}

.libImputCompost .lib-inputText,
.libImputCompost .lib-inputNumber,
.libImputCompost .lib-inputSelect,
.libImputCompost .lib-inputDat {
    max-width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   8. Marketing powerup & menu config: responsive field containers
   -------------------------------------------------------------------------- */

.cotent-marketingPw [style*="display: flex;justify-content: space-around"] {
    gap: 12px;
}

.cotent-marketingPw [style*="width: 30%"] {
    flex: 1 1 140px !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.cotent-marketingPw .field-min {
    max-width: 100% !important;
    box-sizing: border-box;
}

.cotent-marketingPw .content-action-power-ups {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   9. ComercialCalendar geometry (Month, Week, Day, Controls & Side)

   Layout-only block. It deliberately leaves the legacy palette, typography and
   component chrome in place: no new colour, shadow, hover transform or micro
   font is introduced here. The event scale has one source of truth,
   --clm-hour-height, emitted inline by the PHP frame from $minuteHeight
   (pixels per minute). 60 * minuteHeight keeps the CSS row height, the event
   top and the event height in the same coordinate system.
   -------------------------------------------------------------------------- */

.calendar__view {
    width: 100%;
    box-sizing: border-box;
}

.calendar__view .sup__control__tab {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px 0 !important;
    padding-left: 0;
    max-width: 100%;
}

.calendar__view .sup__control__tab::before {
    left: 0;
    right: 0;
}

.calendar__view .sup__control__tab > li {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    padding-left: 0;
}

.calendar__view .sup__control__tab > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

/* Base frame: sidebar keeps its real width, the calendar owns local scroll. */
.clm__frame {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.clm__frame__side {
    flex: 0 0 250px;
    width: 250px;
    max-width: 250px;
    min-width: 0;
    box-sizing: border-box;
}

.clm__frame__side .uk-card {
    box-sizing: border-box;
}

.clm__frame__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header controls keep their target size; visual chrome comes from the legacy
   buttons/UK cards instead of a new palette. */
.clm__sup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.clm__sup__header__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

.clm__move {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.clm__move button,
.clm__move__prev,
.clm__move__next {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    color: inherit;
    background: transparent;
    border: 1px solid var(--mb-gray-light, currentColor);
    border-radius: 0;
}

.clm__title {
    white-space: nowrap;
}

.clm__sup__header__center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
}

.clm__sup__header__center .cp__belt__card {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.clm__sup__header__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* UIKit sets width:100% on any [class*="uk-child-width"] child. Inside the
   calendar header that stacks every action on mobile; keep the real actions
   in one compact row and let the grid below own the horizontal scroll. */
.clm__sup__header__right .uk-grid,
.clm__sup__header__center .uk-grid {
    margin-left: 0 !important;
}

.clm__sup__header__right [class*="uk-child-width"] > *,
.clm__sup__header__center [class*="uk-child-width"] > * {
    width: auto !important;
    padding-left: 0 !important;
}

.clm__sup__type.cp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

/* Month grid: exactly 7 columns. Header and body share the same min-width so
   the local horizontal scroll keeps the 7 columns aligned. */
.clm__header.grid-template-columns-1 {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
    width: 100% !important;
    min-width: 620px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.clm__header__col {
    min-width: 0;
    padding: 4px 2px;
    text-align: center;
    box-sizing: border-box;
}

.clm__header__title {
    background: transparent;
}

.clm__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 620px;
    box-sizing: border-box;
}

.clm__rwo.grid-template-columns-1 {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px;
    width: 100% !important;
    box-sizing: border-box;
}

.clm__col {
    min-width: 0;
    box-sizing: border-box;
}

.clm__day {
    border: 1px solid var(--mb-gray-light, currentColor);
    padding: 4px;
    height: 100%;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: 0;
}

.clm__col.selected .clm__day {
    outline: 2px solid var(--mb-color-pallet-1, currentColor);
    outline-offset: -2px;
}

.clm__day__number {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

.clm__day__money,
.clm__day__quantity {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clm__day__quantity {
    display: inline-block;
    align-self: flex-start;
    cursor: pointer;
}

.clm__day__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 85px;
    min-height: 20px;
}

.clm__task {
    padding: 2px 4px;
    line-height: 1.25;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0;
}

.clm__task__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clm__task__date,
.clm__task__progress {
    white-space: nowrap;
}

/* Week grid: time column + 7 day columns = 8 columns. */
.calendarWeekContent .clm__frame__content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.calendarWeekContent .uk-child-width-1-8\@l {
    display: grid !important;
    grid-template-columns: 55px repeat(7, minmax(105px, 1fr)) !important;
    gap: 0 !important;
    min-width: 800px;
    width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
    align-items: start;
}

.calendarWeekContent .uk-child-width-1-8\@l > * {
    width: auto !important;
    padding-left: 0 !important;
    min-width: 0;
}

.time__week {
    display: flex;
    flex-direction: column;
    width: 55px;
    min-width: 55px;
    box-sizing: border-box;
}

.clm__header__week {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.clm__header__week .clm__header__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.time__week .clm__row__day.clm__week {
    height: var(--clm-hour-height);
    min-height: var(--clm-hour-height);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mb-gray-light, currentColor);
}

.clm__body__time {
    padding-right: 6px;
    line-height: 1.2;
    text-align: right;
    box-sizing: border-box;
}

.calendarWeekContent [class*="comercialCalendarBlock"] {
    position: relative;
    box-sizing: border-box;
    border-left: 1px solid var(--mb-gray-light, currentColor);
    border-right: 1px solid var(--mb-gray-light, currentColor);
}

.calendarWeekContent [class*="comercialCalendarBlock"] .clm__row__day.clm__week {
    height: var(--clm-hour-height);
    min-height: var(--clm-hour-height);
    border-bottom: 1px solid var(--mb-gray-light, currentColor);
    box-sizing: border-box;
    position: relative;
}

.calendarWeekContent [class*="comercialCalendarBlock"] .clm__rwo {
    width: 100%;
    height: 100%;
}

.calendarWeekContent [class*="comercialCalendarBlock"] .clm__col__week {
    width: 100%;
    height: 100%;
}

.calendarWeekContent [class*="comercialCalendarBlock"] .clm__col__week .clm__day {
    min-height: 0;
    height: 100%;
    border: none;
    padding: 0;
}

.calendarWeekContent [class*="comercialCalendarBlock"] .clm__task {
    left: 2px !important;
    right: 2px !important;
    width: calc(100% - 4px) !important;
    z-index: 5;
    box-sizing: border-box;
    overflow: hidden;
}

/* Day grid: time column + one day body. Header offset matches the time column
   width so the day label sits exactly over the day body. */
.calendarDayContent .clm__frame__content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.calendarDayContent .clm__header.clm__header__week {
    padding-left: 65px !important;
    box-sizing: border-box;
}

.calendarDayContent .clm__header .clm__header__col {
    flex: 1 1 0;
    min-width: 0;
}

.calendarDayContent [class*="comercialCalendarBlock"] {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-left: 1px solid var(--mb-gray-light, currentColor);
    border-right: 1px solid var(--mb-gray-light, currentColor);
}

.calendarDayContent .clm__row__day.clm__week {
    display: flex;
    align-items: stretch;
    height: var(--clm-hour-height);
    min-height: var(--clm-hour-height);
    border-bottom: 1px solid var(--mb-gray-light, currentColor);
    box-sizing: border-box;
    width: 100%;
}

.calendarDayContent .clm__body__time {
    flex: 0 0 65px;
    width: 65px;
    min-width: 65px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 12px 0 0;
    border-right: 1px solid var(--mb-gray-light, currentColor);
    line-height: 1.2;
    box-sizing: border-box;
}

.calendarDayContent .clm__row__day .clm__rwo {
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.calendarDayContent .clm__row__day .clm__col {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.calendarDayContent .clm__row__day .clm__day {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    padding: 0;
    box-sizing: border-box;
}

.calendarDayContent [class*="comercialCalendarBlock"] .clm__task {
    left: 72px !important;
    right: 12px !important;
    width: calc(100% - 84px) !important;
    z-index: 5;
    padding: 4px 8px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   10. Specific Component Overflow & Layout Containment
   -------------------------------------------------------------------------- */

/* Tabs-2 local horizontal scrolling (SrcView / Funnel) */
.tabs-2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #e2e8f0;
    max-width: 100% !important;
    box-sizing: border-box;
}

.tabs-2 > li {
    flex: 0 0 auto !important;
}

.HeaderParcamp {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.leftHeaderParam,
.midleHeaderParam,
.rightHeaderParam {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Subpixel & container sizing containment */
.ScheduleOnlineConfig,
.contentService,
[class*="ScheduleOnlineConfig"],
[class*="contentService"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   11. Mobile Viewport Reflow (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* ComercialCalendar mobile reflow: one scrollable tab row, compact
       planning panel, and the date panel remains reachable before the grid. */
    .calendar__view {
        padding: 6px;
    }

    .calendar__view .sup__control__tab {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        margin-bottom: 6px;
        padding-bottom: 2px;
    }

    .calendar__view .sup__control__tab > li {
        flex: 0 0 auto;
    }

    .calendar__view .sup__control__tab > li > a {
        padding: 6px 10px;
        white-space: nowrap;
    }

    .clm__frame {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
    }

    .clm__frame__side {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
        order: 1;
    }

    .clm__frame__side > .uk-padding-small {
        padding: 0 !important;
    }

    .clm__frame__side .cp__view__header {
        margin-bottom: 4px;
        padding: 4px 8px !important;
    }

    .clm__frame__side .cp__view__header .cp__view__header__action {
        display: none;
    }

    .clm__frame__side .uk-card {
        margin-top: 0 !important;
    }

    .clm__frame__side .uk-card.cp__padding__10:not(.cp__view__header) {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 6px 8px !important;
    }

    .clm__frame__side .uk-card.cp__padding__10:not(.cp__view__header) > .uk-width-1-1 {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .clm__frame__side .uk-card.cp__padding__10:not(.cp__view__header) > .uk-flex {
        width: auto !important;
        flex: 0 0 auto;
    }

    .clm__frame__side .uk-width-1-1.uk-margin-small {
        margin: 0 !important;
    }

    .clm__frame__side .si__header__profile {
        flex: 1 1 auto;
        min-width: 0;
        padding: 2px 4px;
    }

    .clm__frame__side .si__header__img {
        width: 28px !important;
        height: 28px !important;
    }

    .clm__frame__side .si__header__name,
    .clm__frame__side .si__header__function {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clm__frame__side form .uk-margin {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
    }

    .clm__frame__side #calendario {
        max-width: 100%;
        overflow-x: auto;
    }

    .clm__frame__side .ui-datepicker {
        margin: 0 auto;
    }

    .clm__frame__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 2;
    }

    .clm__sup__header {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0;
        flex-wrap: wrap;
    }

    .clm__sup__header__left {
        justify-content: flex-start;
        width: auto;
        flex: 1 1 auto;
    }

    .clm__sup__header__center {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        width: 100%;
        flex-basis: 100%;
    }

    .clm__sup__header__right {
        justify-content: flex-start;
        width: 100%;
        gap: 4px;
    }

    .clm__sup__type.cp__button {
        padding: 0 8px;
        flex: 0 0 auto;
    }

    /* Month: keep 7 readable columns and scroll locally. No micro font. */
    .clm__header.grid-template-columns-1,
    .clm__body {
        min-width: 620px;
    }

    .clm__day {
        min-height: 80px;
        padding: 3px;
    }

    .clm__day__body {
        max-height: 70px;
    }

    /* Week: 8 columns (time + 7 days) inside the same local scroll. */
    .calendarWeekContent .uk-child-width-1-8\@l {
        min-width: 800px;
    }

    /* Day: time column + one day body. */
    .calendarDayContent .clm__body__time {
        flex: 0 0 50px;
        width: 50px;
        min-width: 50px;
        padding-right: 6px;
    }

    .calendarDayContent .clm__header.clm__header__week {
        padding-left: 50px !important;
    }

    .calendarDayContent [class*="comercialCalendarBlock"] .clm__task {
        left: 56px !important;
        right: 6px !important;
        width: calc(100% - 62px) !important;
        padding: 4px 8px;
    }

    /* Banner maker on mobile (Membership.phtml) */
    .banner__maker__select__wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .banner__maker__full__prev {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .comps__widget__wrap.uk-width-1-6\@l {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Modal decision action buttons on mobile */
    .decision-actions-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .decision-actions-wrap .comps__button {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   12. Targeted Mobile Layout & Overflow Containment Fixes
   -------------------------------------------------------------------------- */

/* ScheduleTooltip: neutralize negative uk-tab gutters and wrap action buttons */
.app__book__booking__tab.uk-tab {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.app__book__booking__tab.uk-tab::before {
    left: 0 !important;
}

.app__book__booking__tab.uk-tab > * {
    padding-left: 10px !important;
}

.app__book__comment + .uk-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* AwardPlanEdit: safe line breaking for long public indication links */
.hideModal a[href*="/public/indicacao/"] {
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    max-width: 100% !important;
}

/* Client modal Novo Cliente: ensure primary submit button accommodates text and icon */
.er__register__modal .cp__button.cp__button__icon,
.cp__button.cp__button__icon[class*="btnSaveClient"] {
    height: auto !important;
    min-height: 38px !important;
    padding: 6px 16px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}

.er__register__modal .cp__button.cp__button__icon i,
.cp__button.cp__button__icon[class*="btnSaveClient"] i {
    font-size: 2rem !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}

/* FastClient ClientMemberships compound profile header containment */
.membership-profile-header-wrap > .comps__profile__header {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.membership-profile-header-wrap select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    /* FindReturn & ScheduleEmployee: responsive card blocks */
    .serviceSelectedBlockInline {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .employeeClientList {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* System alerts: extend 260px scrollable view to real alert components */
    .systemAlerts > .uk-grid {
        max-height: 260px !important;
        overflow-y: auto !important;
    }

    /* FastClient ClientMemberships compound profile header on mobile */
    .membership-profile-header-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .membership-profile-header-wrap > .comps__profile__header {
        width: 100% !important;
    }

    /* ClientPotential Free Style button adaptive containment */
    .client-potential-actions .comps__button {
        height: auto !important;
        min-height: 32px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    /* Report mode labels must fit when the available button width shrinks. */
    .helpReportsScore--mode {
        flex-wrap: wrap;
        gap: 8px;
    }

    .helpReportsScore--mode .app__button.changeTableForm {
        height: auto !important;
        min-height: 32px;
        padding: 6px 12px;
        line-height: 1.25 !important;
        white-space: normal;
        max-width: 100%;
        box-sizing: border-box;
    }
}