:root {
    --primary: #19A302;
    --primary-dark: #068C1C;
    --primary-70: #2CB83D;
    --primary-50: #73aa31;
    --primary-30: #33D446;
    --primary-10: #57DE35;
    --logo: white;
    --sidebar-icon: white;
    --90: #18191a;
}

.h-header.bg-white {
    background: var(--primary-dark);
}

.bg-grad-sidebar {
    background: var(--primary-dark);
}

.h-header.bg-white > a {
    color: white;
}

.h-header.bg-white button div span {
    color: white;
}

.h-header.bg-white button div svg path {
    fill: white;
}

.nova-tenant-logo {
    display: block;
    height: 45px;
    max-width: 100%;
    object-fit: contain;
    margin: auto;
}

.w-sidebar {
    transition: width .4s;
}

.w-sidebar.sidebar-hidden {
    width: 0rem;
    padding-right: 0;
    padding-left: 0;
}

.w-sidebar.sidebar-hidden h3,
.w-sidebar.sidebar-hidden h4,
.w-sidebar.sidebar-hidden ul {
    display: block;
    overflow: hidden;
}

.content {
    max-width: 100%;
}

.content .h-header {
    box-sizing: border-box;
    min-width: 0;
}

.content .h-header > .relative.z-50 {
    min-width: 0;
}

.dropdown-right,
.dropdown-right * {
    min-width: 0;
}

.dropdown-right span.text-white {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div[data-testid="content"] {
    padding: 1.2rem;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
}

.text-80 {
    color: var(--90);
}

.text-70 {
    color: var(--80);
}

.table td {
    font-weight: 500;
    color: black;
}

.table th {
    color: var(--90);
}

.bg-grad-sidebar a {
    font-weight: bold;
}

/* Responsive Nova shell */

@media (max-width: 1024px) {
    /* Remove o scroll horizontal do shell no admin: o documento não rola na
       lateral. Os min-widths internos (body 80rem, .content 66.25rem) já são
       zerados abaixo, mas elementos que porventura ultrapassem a largura
       (margens negativas de formulários/tabelas, modais de ação em vw, sidebar
       off-canvas) ainda empurravam a página — esta trava na raiz contém todos. */
    html {
        overflow-x: hidden;
    }

    body.min-w-site {
        min-width: 0 !important;
        max-width: 100%;
    }

    #nova .min-h-screen {
        min-width: 0 !important;
    }

    .content {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    div[data-testid="content"],
    .px-view {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-view {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .card {
        max-width: 100%;
    }

    .card-panel {
        min-height: 130px;
        height: auto;
    }

    div[data-testid="content"] .overflow-hidden.overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table[data-testid="resource-table"] {
        min-width: 44rem;
        width: 100%;
    }

    table[data-testid="resource-table"] td,
    table[data-testid="resource-table"] th {
        white-space: nowrap;
    }

    table[data-testid="resource-table"] td:not(:first-child):not(:last-child),
    table[data-testid="resource-table"] th:not(:first-child):not(:last-child) {
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    table[data-testid="resource-table"] th:last-child,
    table[data-testid="resource-table"] td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        min-width: 8.5rem;
        background: var(--white);
        box-shadow: -10px 0 12px -12px rgba(0, 0, 0, .45);
    }

    table[data-testid="resource-table"] th:last-child {
        z-index: 3;
        background: var(--30);
    }

    table[data-testid="resource-table"] td:last-child > .inline-flex {
        justify-content: flex-end;
        gap: .25rem;
    }

    table[data-testid="resource-table"] td:last-child a,
    table[data-testid="resource-table"] td:last-child button {
        align-items: center;
        justify-content: center;
        min-width: 2rem;
        min-height: 2rem;
        margin-right: .25rem !important;
    }

    .w-search {
        width: auto !important;
        max-width: 40vw !important;
    }

    .w-action,
    .w-action-fields {
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    .w-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 18rem !important;
        max-width: 82vw;
        height: 100% !important;
        z-index: 60 !important;
        background: var(--primary-dark) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(0);
        transition: transform .3s ease !important;
        padding: 4.75rem 1rem 1rem !important;
        box-shadow: 16px 0 30px rgba(0, 0, 0, .22);
    }

    .w-sidebar.sidebar-hidden {
        width: 18rem !important;
        max-width: 82vw;
        padding: 4.75rem 1rem 1rem !important;
        transform: translateX(-110%) !important;
    }

    .w-sidebar > a {
        display: block;
    }

    .w-sidebar .bg-logo {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 4rem !important;
        padding: .625rem 1rem !important;
        background: var(--logo) !important;
        justify-content: center;
    }

    .w-sidebar .bg-logo .nova-tenant-logo {
        width: auto !important;
        height: auto !important;
        max-width: 11rem !important;
        max-height: 2.5rem !important;
    }

    .w-sidebar h3 {
        margin-bottom: .75rem !important;
        font-size: .9rem;
        line-height: 1.15;
    }

    .w-sidebar h4 {
        margin-bottom: .5rem !important;
    }

    .w-sidebar ul {
        margin-bottom: 1.25rem !important;
    }

    .w-sidebar li {
        margin-left: 1.75rem !important;
        margin-bottom: .75rem !important;
        line-height: 1.25;
    }

    .w-sidebar .sidebar-icon {
        flex: 0 0 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        margin-right: .5rem;
    }

    #atex-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 55;
        opacity: 1;
        transition: opacity .3s ease;
    }

    #atex-sidebar-backdrop.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .content .h-header {
        height: auto !important;
        min-height: 3.75rem;
        padding: .5rem .75rem !important;
        flex-wrap: wrap;
        align-content: center;
        gap: .4rem .5rem;
    }

    .atex-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 2rem;
        width: 2rem;
        height: 2rem;
        margin-left: 0 !important;
        margin-right: .25rem !important;
    }

    .content .h-header > a.no-underline:not(.atex-sidebar-toggle) {
        flex: 1 1 7rem;
        max-width: calc(100% - 10rem);
        margin-right: 0 !important;
        font-size: .78rem;
        line-height: 1.05;
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .content .h-header > .relative.z-50 {
        order: 3;
        flex: 1 0 100%;
        width: 100% !important;
        max-width: none !important;
    }

    .content .h-header .form-global-search {
        height: 2rem;
        font-size: .82rem;
    }

    .dropdown-right {
        flex: 0 1 8.75rem;
        max-width: 8.75rem;
        height: 2rem;
        margin-left: auto !important;
    }

    .dropdown-right img {
        flex: 0 0 auto;
        width: 1.75rem !important;
        height: 1.75rem !important;
        margin-right: .35rem !important;
    }

    .dropdown-right span.text-white {
        max-width: 5.5rem;
        font-size: .78rem;
        line-height: 1.1;
    }

    .w-search {
        width: 100% !important;
        max-width: none !important;
    }

    div[data-testid="content"] .flex.border-b.border-40 {
        display: block !important;
    }

    .w-1\/5,
    .w-1\/4 {
        width: 100% !important;
        padding-bottom: .25rem !important;
    }

    .w-1\/2,
    .w-3\/4,
    .w-2\/3,
    .w-1\/3 {
        width: 100% !important;
    }

    .max-w-main {
        max-width: 100% !important;
    }

    div[data-testid="content"] .flex.items-center.justify-between,
    div[data-testid="content"] .flex.items-center.ml-auto,
    div[data-testid="content"] .w-full.flex.items-center {
        flex-wrap: wrap !important;
        gap: .5rem;
        min-width: 0;
    }

    div[data-testid="content"] h1 + .flex {
        flex-wrap: wrap !important;
        gap: .75rem;
    }

    div[data-testid="content"] .flex > .relative.h-9.flex-no-shrink {
        flex: 1 0 100%;
        margin-bottom: .75rem !important;
    }

    div[data-testid="content"] h1 + .flex > .w-full.flex.items-center {
        flex: 1 0 100%;
        width: 100% !important;
        margin-bottom: .75rem !important;
    }

    div[data-testid="content"] h1 + .flex .flex-no-shrink.ml-auto {
        display: flex;
        flex: 1 0 100%;
        width: 100%;
        margin-left: 0 !important;
        justify-content: flex-start;
    }

    div[data-testid="content"] [dusk="create-button"],
    div[data-testid="content"] [dusk="attach-button"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        min-height: 2.25rem;
        height: auto;
        line-height: 1.15;
        white-space: normal !important;
        text-align: center;
        padding: .6rem 1rem;
    }

    div[data-testid="content"] .btn {
        max-width: 100%;
        white-space: nowrap;
    }

    /* Cabeçalho da visualização (título + barra de ações/relatórios) pode
       quebrar a linha no mobile, jogando a barra para baixo do título e
       liberando a largura total para o combo e os botões. */
    div[data-testid="content"] .flex.items-center.mb-3 {
        flex-wrap: wrap !important;
        gap: .5rem;
        align-items: flex-start !important;
        max-width: 100%;
    }

    /* Execução de ação/relatório: o container do combo (select) + botão
       executar não pode ultrapassar a largura da tela. O select encolhe
       para caber em vez de estourar à direita. */
    div[data-testid="content"] .flex.items-center.mr-3 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        gap: .45rem;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-right: 0 !important;
    }

    div[data-testid="content"] [data-testid="action-select"] {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        font-size: .82rem;
        text-overflow: ellipsis;
    }

    div[data-testid="content"] [data-testid="action-select"] + .btn,
    div[data-testid="content"] .flex.items-center.mr-3 > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem !important;
        min-width: 2.5rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Barra de botões das telas de inclusão/edição (Cancelar, Salvar,
       "Atualizar e continuar editando", "Atualizar Grupo", etc.) — quebra
       em várias linhas em vez de estourar para fora da tela à direita. */
    div[data-testid="content"] form > .flex.items-center {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        justify-content: flex-end;
        gap: .5rem;
        padding: 1rem 0 0;
    }

    div[data-testid="content"] form > .flex.items-center > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.65rem;
        line-height: 1.15;
        white-space: normal !important;
        text-align: center;
        padding: .7rem 1rem;
    }

    div[data-testid="content"] form > .flex.items-center > .btn-link.ml-auto {
        order: 3;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    div[data-testid="content"] form > .card {
        border-radius: .5rem;
        overflow: hidden;
    }

    div[data-testid="content"] form .flex.border-b.border-40 {
        padding: 1rem !important;
    }

    div[data-testid="content"] form .flex.border-b.border-40 > div:first-child {
        margin-bottom: .45rem;
    }

    div[data-testid="content"] form label {
        font-size: .88rem;
        line-height: 1.2;
    }

    div[data-testid="content"] form .form-control,
    div[data-testid="content"] form .form-input,
    div[data-testid="content"] form .form-select {
        width: 100%;
        min-height: 2.45rem;
        font-size: .9rem;
    }

    .w-action,
    .w-action-fields {
        width: 92vw !important;
        max-width: 92vw !important;
    }

    .table td {
        height: auto !important;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    table[data-testid="resource-table"] {
        min-width: 38rem;
    }

    table[data-testid="resource-table"] td:not(:first-child):not(:last-child),
    table[data-testid="resource-table"] th:not(:first-child):not(:last-child) {
        max-width: 12rem;
    }

    table[data-testid="resource-table"] th:first-child,
    table[data-testid="resource-table"] td:first-child {
        width: 2.75rem !important;
        min-width: 2.75rem;
    }
}

@media (max-width: 380px) {
    .content .h-header > a.no-underline:not(.atex-sidebar-toggle) {
        max-width: calc(100% - 7rem);
    }

    .dropdown-right {
        flex-basis: 6rem;
        max-width: 6rem;
    }

    .dropdown-right img {
        display: none;
    }

    .dropdown-right span.text-white {
        max-width: 5.75rem;
    }
}