/*
|--------------------------------------------------------------------------
| TRPW CORE
|--------------------------------------------------------------------------
|
| CSS global do layout administrativo.
|
| DESIGN SYSTEM:
|
| Todas as cores e tipografias são recebidas do DesignSystemService
| através das variáveis CSS --trpw-*.
|
| Nenhum componente do Core deve possuir cor funcional hard-coded.
|
*/


/*
|--------------------------------------------------------------------------
| DOCUMENTO
|--------------------------------------------------------------------------
*/

html {
    min-height: 100%;
}

html[data-trpw-theme="light"] {
    color-scheme: light;
}

html[data-trpw-theme="dark"] {
    color-scheme: dark;
}

body {
    min-height: 100vh;

    color:
        var(--trpw-text);

    background:
        var(--trpw-bg);

    font-family:
        var(--trpw-font);

    font-size:
        var(--trpw-font-size);

    font-weight:
        var(--trpw-font-weight);

    line-height:
        var(--trpw-line-height);

    transition:
        background-color .18s ease,
        color .18s ease;
}


/*
|--------------------------------------------------------------------------
| ESTRUTURA PRINCIPAL
|--------------------------------------------------------------------------
*/

.wrapper,
.page-wrapper,
.page-content {
    color:
        var(--trpw-text);

    background:
        var(--trpw-bg);
}

.page-wrapper {
    transition:
        background-color .18s ease,
        color .18s ease;
}


/*
|--------------------------------------------------------------------------
| TIPOGRAFIA
|--------------------------------------------------------------------------
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--trpw-title-color);

    font-family:
        var(--trpw-title-font);

    font-weight:
        var(--trpw-title-font-weight);

    line-height:
        var(--trpw-title-line-height);
}

.trpw-subtitle,
.card-subtitle {
    color:
        var(--trpw-subtitle-color);

    font-family:
        var(--trpw-subtitle-font);

    font-size:
        var(--trpw-subtitle-font-size);

    font-weight:
        var(--trpw-subtitle-font-weight);

    line-height:
        var(--trpw-subtitle-line-height);
}

.form-label {
    color:
        var(--trpw-label-color);

    font-family:
        var(--trpw-label-font);

    font-size:
        var(--trpw-label-font-size);

    font-weight:
        var(--trpw-label-font-weight);
}

.form-text,
.trpw-description {
    color:
        var(--trpw-description-color);
}


/*
|--------------------------------------------------------------------------
| LOGOMARCAS
|--------------------------------------------------------------------------
*/

.topbar-logo-header img {
    max-width: 150px;
    max-height: 52px;

    width: auto !important;
    height: auto;

    object-fit: contain;
}

.logo-icon {
    max-width: 48px;
    max-height: 48px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar {
    color:
        var(--trpw-topbar-text);

    background:
        var(--trpw-topbar-bg) !important;

    border-color:
        var(--trpw-topbar-border) !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.topbar .navbar {
    width: 100%;

    color:
        var(--trpw-topbar-text);

    background:
        var(--trpw-topbar-bg) !important;
}

.topbar .nav-link {
    color:
        var(--trpw-topbar-text);
}

.topbar .nav-link:hover,
.topbar .nav-link:focus {
    color:
        var(--trpw-link-hover);
}

.trpw-topbar-actions {
    display: flex;
    align-items: center;

    gap: .25rem;
}

.trpw-topbar-actions .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trpw-topbar-actions .nav-link > i {
    font-size: 22px;
}


/*
|--------------------------------------------------------------------------
| BOTÃO DE TEMA
|--------------------------------------------------------------------------
*/

.trpw-theme-toggle {
    cursor: pointer;
}

.trpw-theme-toggle i {
    transition:
        transform .2s ease;
}

.trpw-theme-toggle:hover i {
    transform:
        rotate(-12deg);
}


/*
|--------------------------------------------------------------------------
| MENU PRINCIPAL
|--------------------------------------------------------------------------
*/

.primary-menu,
.primary-menu .navbar {
    color:
        var(--trpw-menu-text);

    background:
        var(--trpw-menu-bg) !important;

    border-color:
        var(--trpw-divider) !important;

    font-family:
        var(--trpw-menu-font);

    font-size:
        var(--trpw-menu-font-size);

    font-weight:
        var(--trpw-menu-font-weight);

    line-height:
        var(--trpw-menu-line-height);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.primary-menu .nav-link {
    color:
        var(--trpw-menu-text) !important;
}

.primary-menu .nav-link:hover,
.primary-menu .nav-link:focus {
    color:
        var(--trpw-menu-hover-text) !important;

    background:
        var(--trpw-menu-hover-bg) !important;
}

.primary-menu .nav-link.show,
.primary-menu .nav-link.active,
.primary-menu .nav-item.show > .nav-link {
    color:
        var(--trpw-menu-active-text) !important;

    background:
        var(--trpw-menu-active-bg) !important;
}

.primary-menu .parent-icon,
.primary-menu .menu-title,
.primary-menu .dropy-icon {
    color:
        inherit;
}


/*
|--------------------------------------------------------------------------
| OFFCANVAS
|--------------------------------------------------------------------------
*/

.offcanvas {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);
}

.offcanvas-header {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-divider) !important;
}

.offcanvas-body {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);
}


/*
|--------------------------------------------------------------------------
| BREADCRUMB
|--------------------------------------------------------------------------
*/

.page-breadcrumb,
.breadcrumb {
    color:
        var(--trpw-text-secondary);

    font-family:
        var(--trpw-breadcrumb-font);

    font-size:
        var(--trpw-breadcrumb-font-size);

    font-weight:
        var(--trpw-breadcrumb-font-weight);
}

.breadcrumb-title {
    color:
        var(--trpw-title-color);
}

.breadcrumb-item {
    color:
        var(--trpw-text-secondary);
}

.breadcrumb-item.active {
    color:
        var(--trpw-text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color:
        var(--trpw-text-secondary);
}


/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.card {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-border);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.card-header,
.card-footer {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-divider);
}

.card-title {
    color:
        var(--trpw-title-color);
}

.card-subtitle {
    color:
        var(--trpw-subtitle-color);
}


/*
|--------------------------------------------------------------------------
| TEXTOS / UTILITÁRIOS BOOTSTRAP
|--------------------------------------------------------------------------
*/

.text-muted {
    color:
        var(--trpw-text-muted) !important;
}

.text-secondary {
    color:
        var(--trpw-text-secondary) !important;
}

.text-primary {
    color:
        var(--trpw-primary) !important;
}

.text-success {
    color:
        var(--trpw-success) !important;
}

.text-warning {
    color:
        var(--trpw-warning) !important;
}

.text-danger {
    color:
        var(--trpw-danger) !important;
}

.text-info {
    color:
        var(--trpw-info) !important;
}

.bg-primary {
    background-color:
        var(--trpw-primary) !important;
}

.bg-secondary {
    background-color:
        var(--trpw-secondary) !important;
}

.bg-success {
    background-color:
        var(--trpw-success) !important;
}

.bg-warning {
    background-color:
        var(--trpw-warning) !important;
}

.bg-danger {
    background-color:
        var(--trpw-danger) !important;
}

.bg-info {
    background-color:
        var(--trpw-info) !important;
}


/*
|--------------------------------------------------------------------------
| BORDAS
|--------------------------------------------------------------------------
*/

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color:
        var(--trpw-border) !important;
}

.border-primary {
    border-color:
        var(--trpw-primary) !important;
}

.border-secondary {
    border-color:
        var(--trpw-secondary) !important;
}

.border-success {
    border-color:
        var(--trpw-success) !important;
}

.border-warning {
    border-color:
        var(--trpw-warning) !important;
}

.border-danger {
    border-color:
        var(--trpw-danger) !important;
}

.border-info {
    border-color:
        var(--trpw-info) !important;
}

hr {
    color:
        var(--trpw-divider);

    border-color:
        var(--trpw-divider);

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

a {
    color:
        var(--trpw-link);
}

a:hover,
a:focus {
    color:
        var(--trpw-link-hover);
}


/*
|--------------------------------------------------------------------------
| FORMULÁRIOS
|--------------------------------------------------------------------------
*/

.form-control,
.form-select,
textarea {
    color:
        var(--trpw-input-text);

    background-color:
        var(--trpw-input-bg);

    border-color:
        var(--trpw-input-border);

    font-family:
        var(--trpw-input-font);

    font-size:
        var(--trpw-input-font-size);

    font-weight:
        var(--trpw-input-font-weight);

    line-height:
        var(--trpw-input-line-height);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    color:
        var(--trpw-input-text);

    background-color:
        var(--trpw-input-bg);

    border-color:
        var(--trpw-input-focus-border);

    box-shadow:
        0 0 0 .2rem
        color-mix(
            in srgb,
            var(--trpw-input-focus-border) 18%,
            transparent
        );
}

.form-control::placeholder,
textarea::placeholder {
    color:
        var(--trpw-input-placeholder) !important;

    opacity:
        1 !important;
}

/*
|--------------------------------------------------------------------------
| PLACEHOLDER - COMPATIBILIDADE
|--------------------------------------------------------------------------
|
| Bootstrap e alguns navegadores aplicam cor/opacidade própria ao placeholder.
| Forçamos o token do Design System para garantir o mesmo resultado em
| LIGHT e DARK.
|
*/

.form-control::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
        var(--trpw-input-placeholder) !important;

    opacity:
        1 !important;
}

.form-control::-moz-placeholder,
textarea::-moz-placeholder {
    color:
        var(--trpw-input-placeholder) !important;

    opacity:
        1 !important;
}

.form-control:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color:
        var(--trpw-input-placeholder) !important;

    opacity:
        1 !important;
}

.form-control::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color:
        var(--trpw-input-placeholder) !important;

    opacity:
        1 !important;
}

/*
|--------------------------------------------------------------------------
| AUTOFILL
|--------------------------------------------------------------------------
|
| Evita Chrome/Edge sobrescreverem texto e fundo dos campos salvos.
|
*/

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--trpw-input-text) !important;

    caret-color:
        var(--trpw-input-text);

    box-shadow:
        0 0 0 1000px
        var(--trpw-input-bg)
        inset !important;

    transition:
        background-color 9999s ease-out 0s;
}

.form-control:disabled,
.form-select:disabled,
textarea:disabled,
.form-control[readonly] {
    color:
        var(--trpw-input-disabled-text);

    background:
        var(--trpw-input-disabled-bg);

    border-color:
        var(--trpw-input-border);

    opacity: 1;
}


.form-control:disabled::placeholder,
textarea:disabled::placeholder,
.form-control[readonly]::placeholder {
    color:
        var(--trpw-input-disabled-text) !important;

    opacity:
        1 !important;
}


/*
|--------------------------------------------------------------------------
| COLOR INPUT
|--------------------------------------------------------------------------
*/

.form-control-color {
    min-width: 48px;

    padding: .25rem;
}


/*
|--------------------------------------------------------------------------
| INPUT GROUP
|--------------------------------------------------------------------------
*/

.input-group-text {
    color:
        var(--trpw-input-text);

    background:
        var(--trpw-input-disabled-bg);

    border-color:
        var(--trpw-input-border);

    font-family:
        var(--trpw-input-font);

    font-size:
        var(--trpw-input-font-size);
}


/*
|--------------------------------------------------------------------------
| CHECKBOX / RADIO
|--------------------------------------------------------------------------
*/

.form-check-label {
    color:
        var(--trpw-label-color);
}

.form-check-input {
    border-color:
        var(--trpw-input-border);

    background-color:
        var(--trpw-input-bg);
}

.form-check-input:checked {
    background-color:
        var(--trpw-primary);

    border-color:
        var(--trpw-primary);
}

.form-check-input:focus {
    border-color:
        var(--trpw-input-focus-border);

    box-shadow:
        0 0 0 .2rem
        color-mix(
            in srgb,
            var(--trpw-input-focus-border) 18%,
            transparent
        );
}


/*
|--------------------------------------------------------------------------
| BOTÕES - BASE
|--------------------------------------------------------------------------
*/

.btn {
    font-family:
        var(--trpw-button-font);

    font-size:
        var(--trpw-button-font-size);

    font-weight:
        var(--trpw-button-font-weight);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - PRIMÁRIO
|--------------------------------------------------------------------------
*/

.btn-primary {
    --bs-btn-color:
        var(--trpw-primary-text);

    --bs-btn-bg:
        var(--trpw-primary);

    --bs-btn-border-color:
        var(--trpw-primary);

    --bs-btn-hover-color:
        var(--trpw-primary-text);

    --bs-btn-hover-bg:
        var(--trpw-primary-hover);

    --bs-btn-hover-border-color:
        var(--trpw-primary-hover);

    --bs-btn-active-color:
        var(--trpw-primary-text);

    --bs-btn-active-bg:
        var(--trpw-primary-hover);

    --bs-btn-active-border-color:
        var(--trpw-primary-hover);
}

.btn-outline-primary {
    --bs-btn-color:
        var(--trpw-primary);

    --bs-btn-border-color:
        var(--trpw-primary);

    --bs-btn-hover-color:
        var(--trpw-primary-text);

    --bs-btn-hover-bg:
        var(--trpw-primary);

    --bs-btn-hover-border-color:
        var(--trpw-primary);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - SECUNDÁRIO
|--------------------------------------------------------------------------
*/

.btn-secondary {
    --bs-btn-color:
        var(--trpw-secondary-text);

    --bs-btn-bg:
        var(--trpw-secondary);

    --bs-btn-border-color:
        var(--trpw-secondary);

    --bs-btn-hover-color:
        var(--trpw-secondary-text);

    --bs-btn-hover-bg:
        var(--trpw-secondary-hover);

    --bs-btn-hover-border-color:
        var(--trpw-secondary-hover);
}

.btn-outline-secondary {
    --bs-btn-color:
        var(--trpw-secondary);

    --bs-btn-border-color:
        var(--trpw-secondary);

    --bs-btn-hover-color:
        var(--trpw-secondary-text);

    --bs-btn-hover-bg:
        var(--trpw-secondary);

    --bs-btn-hover-border-color:
        var(--trpw-secondary);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - SUCESSO
|--------------------------------------------------------------------------
*/

.btn-success {
    --bs-btn-color:
        var(--trpw-success-text);

    --bs-btn-bg:
        var(--trpw-success);

    --bs-btn-border-color:
        var(--trpw-success);

    --bs-btn-hover-color:
        var(--trpw-success-text);

    --bs-btn-hover-bg:
        var(--trpw-success-hover);

    --bs-btn-hover-border-color:
        var(--trpw-success-hover);
}

.btn-outline-success {
    --bs-btn-color:
        var(--trpw-success);

    --bs-btn-border-color:
        var(--trpw-success);

    --bs-btn-hover-color:
        var(--trpw-success-text);

    --bs-btn-hover-bg:
        var(--trpw-success);

    --bs-btn-hover-border-color:
        var(--trpw-success);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - WARNING
|--------------------------------------------------------------------------
*/

.btn-warning {
    --bs-btn-color:
        var(--trpw-warning-text);

    --bs-btn-bg:
        var(--trpw-warning);

    --bs-btn-border-color:
        var(--trpw-warning);

    --bs-btn-hover-color:
        var(--trpw-warning-text);

    --bs-btn-hover-bg:
        var(--trpw-warning-hover);

    --bs-btn-hover-border-color:
        var(--trpw-warning-hover);
}

.btn-outline-warning {
    --bs-btn-color:
        var(--trpw-warning);

    --bs-btn-border-color:
        var(--trpw-warning);

    --bs-btn-hover-color:
        var(--trpw-warning-text);

    --bs-btn-hover-bg:
        var(--trpw-warning);

    --bs-btn-hover-border-color:
        var(--trpw-warning);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - PERIGO
|--------------------------------------------------------------------------
*/

.btn-danger {
    --bs-btn-color:
        var(--trpw-danger-text);

    --bs-btn-bg:
        var(--trpw-danger);

    --bs-btn-border-color:
        var(--trpw-danger);

    --bs-btn-hover-color:
        var(--trpw-danger-text);

    --bs-btn-hover-bg:
        var(--trpw-danger-hover);

    --bs-btn-hover-border-color:
        var(--trpw-danger-hover);
}

.btn-outline-danger {
    --bs-btn-color:
        var(--trpw-danger);

    --bs-btn-border-color:
        var(--trpw-danger);

    --bs-btn-hover-color:
        var(--trpw-danger-text);

    --bs-btn-hover-bg:
        var(--trpw-danger);

    --bs-btn-hover-border-color:
        var(--trpw-danger);
}


/*
|--------------------------------------------------------------------------
| BOTÕES - INFO
|--------------------------------------------------------------------------
*/

.btn-info {
    --bs-btn-color:
        var(--trpw-info-text);

    --bs-btn-bg:
        var(--trpw-info);

    --bs-btn-border-color:
        var(--trpw-info);

    --bs-btn-hover-color:
        var(--trpw-info-text);

    --bs-btn-hover-bg:
        var(--trpw-info-hover);

    --bs-btn-hover-border-color:
        var(--trpw-info-hover);
}

.btn-outline-info {
    --bs-btn-color:
        var(--trpw-info);

    --bs-btn-border-color:
        var(--trpw-info);

    --bs-btn-hover-color:
        var(--trpw-info-text);

    --bs-btn-hover-bg:
        var(--trpw-info);

    --bs-btn-hover-border-color:
        var(--trpw-info);
}


/*
|--------------------------------------------------------------------------
| AÇÕES TRPW
|--------------------------------------------------------------------------
*/

.trpw-action {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--trpw-text);

    background:
        transparent;

    border:
        1px solid
        var(--trpw-border);

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.trpw-action-primary {
    color:
        var(--trpw-primary);

    border-color:
        var(--trpw-primary);
}

.trpw-action-primary:hover {
    color:
        var(--trpw-primary-text);

    background:
        var(--trpw-primary);

    border-color:
        var(--trpw-primary);
}

.trpw-action-secondary {
    color:
        var(--trpw-secondary);

    border-color:
        var(--trpw-secondary);
}

.trpw-action-secondary:hover {
    color:
        var(--trpw-secondary-text);

    background:
        var(--trpw-secondary);

    border-color:
        var(--trpw-secondary);
}

.trpw-action-success {
    color:
        var(--trpw-success);

    border-color:
        var(--trpw-success);
}

.trpw-action-success:hover {
    color:
        var(--trpw-success-text);

    background:
        var(--trpw-success);

    border-color:
        var(--trpw-success);
}

.trpw-action-warning {
    color:
        var(--trpw-warning);

    border-color:
        var(--trpw-warning);
}

.trpw-action-warning:hover {
    color:
        var(--trpw-warning-text);

    background:
        var(--trpw-warning);

    border-color:
        var(--trpw-warning);
}

.trpw-action-danger {
    color:
        var(--trpw-danger);

    border-color:
        var(--trpw-danger);
}

.trpw-action-danger:hover {
    color:
        var(--trpw-danger-text);

    background:
        var(--trpw-danger);

    border-color:
        var(--trpw-danger);
}

.trpw-action-info {
    color:
        var(--trpw-info);

    border-color:
        var(--trpw-info);
}

.trpw-action-info:hover {
    color:
        var(--trpw-info-text);

    background:
        var(--trpw-info);

    border-color:
        var(--trpw-info);
}

.trpw-action-quaternary {
    color:
        var(--trpw-quaternary);

    border-color:
        var(--trpw-quaternary);
}

.trpw-action-quaternary:hover {
    color:
        var(--trpw-quaternary-text);

    background:
        var(--trpw-quaternary);

    border-color:
        var(--trpw-quaternary);
}


/*
|--------------------------------------------------------------------------
| DROPDOWNS
|--------------------------------------------------------------------------
*/

.dropdown-menu {
    color:
        var(--trpw-submenu-text);

    background:
        var(--trpw-submenu-bg);

    border:
        1px solid
        var(--trpw-border);

    box-shadow:
        0 14px 35px
        color-mix(
            in srgb,
            var(--trpw-overlay) 30%,
            transparent
        );
}

.dropdown-item {
    color:
        var(--trpw-submenu-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color:
        var(--trpw-submenu-hover-text);

    background:
        var(--trpw-submenu-hover-bg);
}

.dropdown-item.active,
.dropdown-item:active {
    color:
        var(--trpw-submenu-active-text);

    background:
        var(--trpw-submenu-active-bg);
}

.dropdown-divider {
    border-color:
        var(--trpw-divider);
}


/*
|--------------------------------------------------------------------------
| MODAIS
|--------------------------------------------------------------------------
*/

.modal-content {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface-elevated);

    border-color:
        var(--trpw-border);
}

.modal-header,
.modal-footer {
    border-color:
        var(--trpw-divider);
}

.modal-title {
    color:
        var(--trpw-title-color);
}

.modal-backdrop.show {
    background:
        var(--trpw-overlay);
}


/*
|--------------------------------------------------------------------------
| CLOSE BUTTON
|--------------------------------------------------------------------------
*/

html[data-trpw-theme="dark"] .btn-close {
    filter:
        invert(1)
        grayscale(100%)
        brightness(200%);
}


/*
|--------------------------------------------------------------------------
| ALERTAS BOOTSTRAP
|--------------------------------------------------------------------------
*/

.alert {
    font-family:
        var(--trpw-alert-font);

    font-size:
        var(--trpw-alert-font-size);

    font-weight:
        var(--trpw-alert-font-weight);
}

.alert-success {
    color:
        var(--trpw-success);

    background:
        var(--trpw-success-bg);

    border-color:
        var(--trpw-success);
}

.alert-warning {
    color:
        var(--trpw-warning-text);

    background:
        var(--trpw-warning-bg);

    border-color:
        var(--trpw-warning);
}

.alert-danger {
    color:
        var(--trpw-danger);

    background:
        var(--trpw-danger-bg);

    border-color:
        var(--trpw-danger);
}

.alert-info {
    color:
        var(--trpw-info-text);

    background:
        var(--trpw-info-bg);

    border-color:
        var(--trpw-info);
}


/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.badge {
    font-family:
        var(--trpw-badge-font);

    font-size:
        var(--trpw-badge-font-size);

    font-weight:
        var(--trpw-badge-font-weight);
}

.badge.bg-primary {
    color:
        var(--trpw-primary-text) !important;
}

.badge.bg-secondary {
    color:
        var(--trpw-secondary-text) !important;
}

.badge.bg-success {
    color:
        var(--trpw-success-text) !important;
}

.badge.bg-warning {
    color:
        var(--trpw-warning-text) !important;
}

.badge.bg-danger {
    color:
        var(--trpw-danger-text) !important;
}

.badge.bg-info {
    color:
        var(--trpw-info-text) !important;
}


/*
|--------------------------------------------------------------------------
| NAV TABS
|--------------------------------------------------------------------------
*/

.nav-tabs {
    border-color:
        var(--trpw-divider);
}

.nav-tabs .nav-link {
    color:
        var(--trpw-text-secondary);

    border-color:
        transparent;
}

.nav-tabs .nav-link:hover {
    color:
        var(--trpw-link-hover);

    border-color:
        var(--trpw-border);
}

.nav-tabs .nav-link.active {
    color:
        var(--trpw-primary);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-border)
        var(--trpw-border)
        var(--trpw-surface);
}


/*
|--------------------------------------------------------------------------
| ALERTAS DO CORE
|--------------------------------------------------------------------------
*/

.trpw-alert-dropdown {
    width:
        min(
            390px,
            calc(100vw - 24px)
        );

    padding: 0;

    overflow: hidden;

    color:
        var(--trpw-text);

    background:
        var(--trpw-surface-elevated);

    border-color:
        var(--trpw-border);
}

.trpw-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color:
        var(--trpw-text);

    background:
        var(--trpw-surface-elevated);

    border-color:
        var(--trpw-divider);
}

.trpw-alert-empty {
    padding:
        28px 20px;

    text-align:
        center;

    color:
        var(--trpw-text-secondary);
}

.trpw-alert-empty i {
    display:
        block;

    margin-bottom:
        8px;

    font-size:
        32px;
}

.trpw-alert-item {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    color:
        var(--trpw-text);
}

.trpw-alert-icon {
    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        21px;
}

.trpw-alert-content {
    min-width:
        0;

    flex:
        1;
}

.trpw-alert-title {
    margin:
        0 0 3px;

    color:
        var(--trpw-title-color);

    font-size:
        .875rem;

    font-weight:
        600;
}

.trpw-alert-description {
    margin:
        0;

    color:
        var(--trpw-text-secondary);

    font-size:
        .78rem;

    white-space:
        normal;
}

.trpw-alert-time {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--trpw-text-muted);

    font-size:
        .7rem;
}

.trpw-alert-loading {
    padding:
        26px 15px;

    color:
        var(--trpw-text-secondary);

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| SESSÃO - CONTADOR
|--------------------------------------------------------------------------
*/

.session-countdown-box {
    display:
        flex;

    align-items:
        center;

    gap:
        .4rem;

    color:
        var(--trpw-text-secondary);

    font-size:
        .78rem;

    white-space:
        nowrap;
}

.session-countdown-box i {
    font-size:
        1rem;
}

.session-max-label {
    opacity:
        .75;

    font-weight:
        500;
}


/*
|--------------------------------------------------------------------------
| OVERLAY DE SESSÃO
|--------------------------------------------------------------------------
*/

.session-timeout-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        20000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        var(--trpw-overlay);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}

.session-timeout-overlay.ativo {
    display:
        flex;
}


/*
|--------------------------------------------------------------------------
| PAINEL DE SESSÃO
|--------------------------------------------------------------------------
*/

.session-timeout-panel {
    width:
        min(
            560px,
            100%
        );

    padding:
        36px 28px;

    color:
        var(--trpw-text);

    background:
        var(--trpw-surface-elevated);

    border:
        1px solid
        var(--trpw-border);

    border-radius:
        18px;

    text-align:
        center;

    box-shadow:
        0 24px 80px
        color-mix(
            in srgb,
            var(--trpw-overlay) 60%,
            transparent
        );
}

.session-timeout-icon {
    margin-bottom:
        16px;

    color:
        var(--trpw-primary);

    font-size:
        58px;

    line-height:
        1;
}

.session-timeout-panel
.session-seconds {
    color:
        var(--trpw-primary);

    font-size:
        64px;

    font-weight:
        800;

    line-height:
        1;
}


/*
|--------------------------------------------------------------------------
| TABELAS BOOTSTRAP
|--------------------------------------------------------------------------
*/

.table {
    color:
        var(--trpw-table-text);

    font-family:
        var(--trpw-table-font);

    font-size:
        var(--trpw-table-font-size);

    font-weight:
        var(--trpw-table-font-weight);

    --bs-table-color:
        var(--trpw-table-text);

    --bs-table-bg:
        var(--trpw-table-bg);

    --bs-table-border-color:
        var(--trpw-table-border);

    --bs-table-striped-color:
        var(--trpw-table-text);

    --bs-table-striped-bg:
        var(--trpw-table-striped-bg);

    --bs-table-active-color:
        var(--trpw-table-text);

    --bs-table-active-bg:
        var(--trpw-table-hover-bg);

    --bs-table-hover-color:
        var(--trpw-table-text);

    --bs-table-hover-bg:
        var(--trpw-table-hover-bg);

    border-color:
        var(--trpw-table-border);
}

.table > :not(caption) > * > * {
    color:
        var(--trpw-table-text);

    background-color:
        var(--bs-table-bg);

    border-bottom-color:
        var(--trpw-table-border);
}

.table thead th {
    color:
        var(--trpw-table-header-text);

    background:
        var(--trpw-table-header-bg);

    border-color:
        var(--trpw-table-border);

    font-family:
        var(--trpw-table-header-font);

    font-size:
        var(--trpw-table-header-font-size);

    font-weight:
        var(--trpw-table-header-font-weight);
}


/*
|--------------------------------------------------------------------------
| DATATABLES - CONTAINER
|--------------------------------------------------------------------------
*/

.dt-container {
    color:
        var(--trpw-table-text);

    font-family:
        var(--trpw-table-font);

    font-size:
        var(--trpw-table-font-size);
}


/*
|--------------------------------------------------------------------------
| DATATABLES - TOOLBAR
|--------------------------------------------------------------------------
*/

.dt-buttons,
div.dt-buttons {
    display:
        inline-flex !important;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-bottom:
        12px;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - BOTÃO BASE
|--------------------------------------------------------------------------
*/

.dt-buttons .dt-button,
.dt-buttons .trpw-dt-button {
    width:
        38px;

    height:
        36px;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 !important;

    margin:
        0 !important;

    border-radius:
        7px !important;

    font-family:
        var(--trpw-button-font) !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.dt-buttons .dt-button i,
.dt-buttons .trpw-dt-button i {
    margin:
        0 !important;

    font-size:
        19px;

    line-height:
        1;
}

.dt-buttons .dt-button:hover,
.dt-buttons .trpw-dt-button:hover {
    transform:
        translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| DATATABLES - COPIAR
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-copy {
    color:
        var(--trpw-secondary) !important;

    border:
        1px solid
        var(--trpw-secondary) !important;
}

.dt-buttons .buttons-copy:hover {
    color:
        var(--trpw-secondary-text) !important;

    background:
        var(--trpw-secondary) !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - EXCEL
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-excel {
    color:
        var(--trpw-success) !important;

    border:
        1px solid
        var(--trpw-success) !important;
}

.dt-buttons .buttons-excel:hover {
    color:
        var(--trpw-success-text) !important;

    background:
        var(--trpw-success) !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - CSV
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-csv {
    color:
        var(--trpw-info) !important;

    border:
        1px solid
        var(--trpw-info) !important;
}

.dt-buttons .buttons-csv:hover {
    color:
        var(--trpw-info-text) !important;

    background:
        var(--trpw-info) !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - PDF
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-pdf {
    color:
        var(--trpw-danger) !important;

    border:
        1px solid
        var(--trpw-danger) !important;
}

.dt-buttons .buttons-pdf:hover {
    color:
        var(--trpw-danger-text) !important;

    background:
        var(--trpw-danger) !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - IMPRIMIR
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-print {
    color:
        var(--trpw-primary) !important;

    border:
        1px solid
        var(--trpw-primary) !important;
}

.dt-buttons .buttons-print:hover {
    color:
        var(--trpw-primary-text) !important;

    background:
        var(--trpw-primary) !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - COLVIS
|--------------------------------------------------------------------------
*/

.dt-buttons .buttons-colvis {
    position:
        relative;

    color:
        var(--trpw-quaternary) !important;

    border:
        1px solid
        var(--trpw-quaternary) !important;
}

.dt-buttons .buttons-colvis:hover {
    color:
        var(--trpw-quaternary-text) !important;

    background:
        var(--trpw-quaternary) !important;
}

.dt-buttons
.buttons-colvis.dropdown-toggle::after {
    margin-left:
        4px;

    vertical-align:
        middle;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - BOTÃO ATIVO
|--------------------------------------------------------------------------
*/

.dt-buttons .dt-button.active,
.dt-buttons .dt-button:active,
.dt-buttons .trpw-dt-button.active,
.dt-buttons .trpw-dt-button:active {
    transform:
        none !important;

    box-shadow:
        none !important;
}


/*
|--------------------------------------------------------------------------
| COLVIS - PAINEL
|--------------------------------------------------------------------------
*/

div.dt-button-collection {
    width:
        290px !important;

    min-width:
        290px !important;

    max-width:
        calc(
            100vw - 24px
        ) !important;

    padding:
        8px !important;

    margin-top:
        6px !important;

    color:
        var(--trpw-submenu-text) !important;

    background:
        var(--trpw-submenu-bg) !important;

    border:
        1px solid
        var(--trpw-border) !important;

    border-radius:
        10px !important;

    box-shadow:
        0 12px 32px
        color-mix(
            in srgb,
            var(--trpw-overlay) 40%,
            transparent
        ) !important;

    overflow:
        visible !important;

    z-index:
        1090 !important;
}

div.dt-button-collection > div {
    display:
        flex !important;

    flex-direction:
        column !important;

    width:
        100% !important;

    gap:
        3px !important;

    padding:
        0 !important;

    margin:
        0 !important;
}

div.dt-button-collection
.dt-button {
    position:
        relative !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        38px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    padding:
        8px 36px 8px 12px !important;

    margin:
        0 !important;

    color:
        var(--trpw-submenu-text) !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        6px !important;

    font-size:
        var(--trpw-table-font-size) !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    text-align:
        left !important;

    white-space:
        normal !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}

div.dt-button-collection
.dt-button span {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    color:
        inherit !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

div.dt-button-collection
.dt-button:hover {
    color:
        var(--trpw-submenu-hover-text) !important;

    background:
        var(--trpw-submenu-hover-bg) !important;

    transform:
        none !important;
}

div.dt-button-collection
.dt-button.active,
div.dt-button-collection
.dt-button.dt-button-active {
    color:
        var(--trpw-submenu-active-text) !important;

    background:
        var(--trpw-submenu-active-bg) !important;

    font-weight:
        600 !important;
}

div.dt-button-collection
.dt-button::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        11px;

    width:
        17px;

    height:
        17px;

    transform:
        translateY(-50%);

    background:
        transparent;

    border:
        1px solid
        var(--trpw-border);

    border-radius:
        4px;
}

div.dt-button-collection
.dt-button.active::after,
div.dt-button-collection
.dt-button.dt-button-active::after {
    content:
        "✓";

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--trpw-primary-text);

    background:
        var(--trpw-primary);

    border-color:
        var(--trpw-primary);

    font-size:
        11px;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - LAYOUT
|--------------------------------------------------------------------------
*/

.dt-container
.dt-layout-row {
    align-items:
        center;

    gap:
        10px;
}

.dt-container
.dt-layout-start,
.dt-container
.dt-layout-end {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - BUSCA
|--------------------------------------------------------------------------
*/

.dt-container
.dt-search {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.dt-container
.dt-search label {
    color:
        var(--trpw-label-color);
}

.dt-container
.dt-search input {
    min-width:
        220px;

    color:
        var(--trpw-input-text) !important;

    background:
        var(--trpw-input-bg) !important;

    border-color:
        var(--trpw-input-border) !important;

    border-radius:
        7px !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - QUANTIDADE
|--------------------------------------------------------------------------
*/

.dt-container
.dt-length {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--trpw-text);
}

.dt-container
.dt-length select {
    color:
        var(--trpw-input-text) !important;

    background:
        var(--trpw-input-bg) !important;

    border-color:
        var(--trpw-input-border) !important;

    border-radius:
        7px !important;
}


/*
|--------------------------------------------------------------------------
| DATATABLES - INFORMAÇÃO
|--------------------------------------------------------------------------
*/

.dt-container
.dt-info {
    color:
        var(--trpw-text-secondary);

    font-size:
        var(--trpw-table-font-size);
}


/*
|--------------------------------------------------------------------------
| DATATABLES - PAGINAÇÃO
|--------------------------------------------------------------------------
*/

.dt-container
.dt-paging {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;
}

.dt-container
.dt-paging
.dt-paging-button {
    color:
        var(--trpw-text) !important;
}

.dt-container
.dt-paging
.dt-paging-button:hover {
    color:
        var(--trpw-link-hover) !important;

    background:
        var(--trpw-surface-hover) !important;

    border-color:
        var(--trpw-border) !important;
}

.dt-container
.dt-paging
.dt-paging-button.current,
.dt-container
.dt-paging
.dt-paging-button.current:hover {
    color:
        var(--trpw-primary-text) !important;

    background:
        var(--trpw-primary) !important;

    border-color:
        var(--trpw-primary) !important;
}


/*
|--------------------------------------------------------------------------
| SELECT2 - BOOTSTRAP 5
|--------------------------------------------------------------------------
*/

.select2-container--bootstrap-5
.select2-selection {
    color:
        var(--trpw-input-text) !important;

    background-color:
        var(--trpw-input-bg) !important;

    border-color:
        var(--trpw-input-border) !important;

    font-family:
        var(--trpw-input-font);

    font-size:
        var(--trpw-input-font-size);
}

.select2-container--bootstrap-5
.select2-selection--single
.select2-selection__rendered,
.select2-container--bootstrap-5
.select2-selection--multiple
.select2-selection__rendered {
    color:
        var(--trpw-input-text) !important;
}

.select2-container--bootstrap-5
.select2-dropdown {
    color:
        var(--trpw-submenu-text);

    background:
        var(--trpw-submenu-bg);

    border-color:
        var(--trpw-border);
}

.select2-container--bootstrap-5
.select2-dropdown
.select2-search
.select2-search__field {
    color:
        var(--trpw-input-text);

    background:
        var(--trpw-input-bg);

    border-color:
        var(--trpw-input-border);
}

.select2-container--bootstrap-5
.select2-results__option {
    color:
        var(--trpw-submenu-text);

    background:
        var(--trpw-submenu-bg);
}

.select2-container--bootstrap-5
.select2-results__option--highlighted {
    color:
        var(--trpw-submenu-hover-text);

    background:
        var(--trpw-submenu-hover-bg);
}

.select2-container--bootstrap-5
.select2-results__option--selected {
    color:
        var(--trpw-submenu-active-text);

    background:
        var(--trpw-submenu-active-bg);
}


/*
|--------------------------------------------------------------------------
| PAGINAÇÃO BOOTSTRAP
|--------------------------------------------------------------------------
*/

.page-link {
    color:
        var(--trpw-link);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-border);
}

.page-link:hover {
    color:
        var(--trpw-link-hover);

    background:
        var(--trpw-surface-hover);

    border-color:
        var(--trpw-border);
}

.page-item.active
.page-link {
    color:
        var(--trpw-primary-text);

    background:
        var(--trpw-primary);

    border-color:
        var(--trpw-primary);
}

.page-item.disabled
.page-link {
    color:
        var(--trpw-input-disabled-text);

    background:
        var(--trpw-input-disabled-bg);

    border-color:
        var(--trpw-border);
}


/*
|--------------------------------------------------------------------------
| LIST GROUP
|--------------------------------------------------------------------------
*/

.list-group-item {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface-hover);
}


/*
|--------------------------------------------------------------------------
| ACCORDION
|--------------------------------------------------------------------------
*/

.accordion-item {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);

    border-color:
        var(--trpw-border);
}

.accordion-button {
    color:
        var(--trpw-text);

    background:
        var(--trpw-surface);
}

.accordion-button:not(.collapsed) {
    color:
        var(--trpw-link-hover);

    background:
        var(--trpw-surface-hover);
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.page-footer,
.trpw-page-footer {
    color:
        var(--trpw-text-secondary);

    background:
        var(--trpw-menu-bg) !important;

    border-color:
        var(--trpw-divider) !important;
}

.page-footer a,
.trpw-page-footer a {
    color:
        var(--trpw-link);
}

.page-footer a:hover,
.trpw-page-footer a:hover {
    color:
        var(--trpw-link-hover);
}


/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

html {
    scrollbar-color:
        var(--trpw-quaternary)
        var(--trpw-bg);
}

::-webkit-scrollbar {
    width:
        10px;

    height:
        10px;
}

::-webkit-scrollbar-track {
    background:
        var(--trpw-bg);
}

::-webkit-scrollbar-thumb {
    background:
        var(--trpw-quaternary);

    border:
        2px solid
        var(--trpw-bg);

    border-radius:
        10px;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVO - CORE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 991.98px
) {

    .trpw-alert-dropdown {
        width:
            min(
                360px,
                calc(
                    100vw - 16px
                )
            );
    }
}


/*
|--------------------------------------------------------------------------
| RESPONSIVO - DATATABLES
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767.98px
) {

    .dt-container
    .dt-layout-row {
        display:
            flex !important;

        flex-direction:
            column;

        align-items:
            stretch !important;

        gap:
            10px;
    }

    .dt-container
    .dt-layout-start,
    .dt-container
    .dt-layout-end {
        width:
            100%;
    }

    .dt-buttons,
    div.dt-buttons {
        width:
            100%;

        justify-content:
            flex-start;
    }

    .dt-container
    .dt-search {
        width:
            100%;
    }

    .dt-container
    .dt-search
    input {
        width:
            100%;

        min-width:
            0;
    }

    .dt-container
    .dt-length {
        width:
            100%;
    }

    .dt-container
    .dt-paging {
        width:
            100%;

        justify-content:
            center;
    }

    div.dt-button-collection {
        width:
            calc(
                100vw - 24px
            ) !important;

        min-width:
            0 !important;

        max-width:
            calc(
                100vw - 24px
            ) !important;

        padding:
            10px !important;
    }

    div.dt-button-collection
    .dt-button {
        min-height:
            42px !important;

        font-size:
            14px !important;
    }
}


/*
|--------------------------------------------------------------------------
| RESPONSIVO - CELULAR
|--------------------------------------------------------------------------
*/

@media (
    max-width: 575.98px
) {

    .user-box {
        padding-left:
            .5rem !important;

        padding-right:
            .5rem !important;
    }

    .user-box
    .user-info {
        display:
            none;
    }

    .trpw-alert-dropdown {
        width:
            calc(
                100vw - 16px
            );
    }

    .session-timeout-panel {
        padding:
            28px 20px;
    }

    .session-timeout-panel
    .session-seconds {
        font-size:
            52px;
    }

    .dt-buttons
    .dt-button,
    .dt-buttons
    .trpw-dt-button {
        width:
            40px;

        height:
            38px;
    }

    div.dt-button-collection {
        width:
            calc(
                100vw - 24px
            ) !important;

        min-width:
            0 !important;

        max-width:
            calc(
                100vw - 24px
            ) !important;
    }
}