/**
* Filament App Custom CSS
* Este arquivo contém o CSS customizado para o Filament App.
* Você pode adicionar estilos personalizados aqui.
**/

/**
* Altera as cores do menu
**/
.fi-topbar nav, .fi-topbar .fi-dropdown-panel {
    background-color: rgb(var(--client-primary-color-500)) !important;
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-topbar .fi-topbar-item-label.text-sm, .fi-dropdown-list-item.text-sm {
    font-size: 0.75rem;
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-button {
    background-color: rgb(var(--client-primary-color-700)) !important;
}

.fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-icon, .fi-topbar-item.fi-active .fi-topbar-group-toggle-icon {
    color: rgb(var(--client-secondary-color-300)) !important;
}

.fi-topbar .fi-topbar-item-button:hover {
    background-color: rgb(var(--client-primary-color-600)) !important;
}

.fi-topbar .fi-dropdown-list-item .fi-dropdown-list-item-label {
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-topbar .fi-dropdown-list-item:hover {
    background-color: rgb(var(--client-primary-color-600)) !important;
}

.fi-topbar .fi-dropdown-list-item.fi-dropdown-list-item-color-primary .fi-dropdown-list-item-label, .fi-topbar .fi-dropdown-header-label {
    color: rgb(var(--client-secondary-color-600)) !important;
}

.fi-topbar .fi-dropdown-list-item.fi-dropdown-list-item-color-primary {
    background-color: rgb(var(--client-primary-color-600)) !important;
}

.fi-topbar .fi-dropdown-list-item.fi-dropdown-list-item-color-primary:hover {
    background-color: rgb(var(--client-primary-color-600)) !important;
}

.fi-topbar .fi-dropdown-list {
    border-color: rgb(var(--client-primary-color-400)) !important;
}

.fi-topbar .fi-theme-switcher-btn.fi-active {
    background-color: rgb(var(--client-primary-color-400)) !important;
    color: rgb(var(--client-secondary-color-600)) !important;
}

/**
* Altera as cores da tela de login
**/
.fi-simple-layout {
    --primary-100: var(--client-primary-color-100);
    --primary-200: var(--client-primary-color-200);
    --primary-300: var(--client-primary-color-300);
    --primary-400: var(--client-primary-color-400);
    --primary-500: var(--client-primary-color-500);
    --primary-600: var(--client-primary-color-600);
    --primary-700: var(--client-primary-color-700);
    --primary-800: var(--client-primary-color-800);
    --primary-900: var(--client-primary-color-900);
}

.fi-simple-layout .fi-simple-main, .fi-simple-layout .fi-modal-window, .fi-simple-layout .fi-modal-heading {
    background-color: rgb(var(--client-primary-color-500)) !important;
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-simple-main-ctn {
    background-color: rgb(var(--client-primary-color-700)) !important;
}

.fi-simple-layout .fi-fo-field-wrp-label > span, .fi-simple-header-subheading, .fi-simple-header-heading, .fi-radio-input + div > span {
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-btn {
    background-color: rgb(var(--client-primary-color-700)) !important;
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-input-wrp, .fi-simple-layout .fi-select-input, .fi-select-input > option {
    background-color: rgb(var(--client-primary-color-600)) !important;
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-link > span, .fi-simple-layout .fi-link > .fi-link-icon, .fi-simple-layout .fi-input, .fi-simple-layout .choices__list--single .choices__item {
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-input-wrp > div:nth-child(2) {
    background-color: rgb(var(--client-primary-color-700)) !important;
    border-color: rgb(var(--client-primary-color-700)) !important;
}

.fi-simple-layout .fi-input-wrp > div:nth-child(2) .fi-icon-btn {
    color: rgb(var(--client-secondary-color-500)) !important;
}

.fi-simple-layout .fi-logo {
    height: auto !important;
    max-height: 170px !important;
}

.co-autocomplete-source {
    text-decoration: underline;
    display: flex;
    align-items: center;
}

.child-items-row {
    background-color: rgba(59, 130, 246, 0.25) !important;
    border-left: 3px solid #3b82f6 !important;
    position: relative !important;
}

.child-items-row td:first-child {
    padding-left: 30px !important;
}

.child-items-row td:first-child::before {
    content: "↳" !important;
    position: absolute !important;
    top: 5px !important;
    left: 30px !important;
    color: #3b82f6 !important;
    font-weight: bold !important;
    font-size: 26px;
}

/* Hover effect para os itens filhos */
.child-items-row:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.collapse-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #f3f4f6;
    cursor: pointer;
}

.collapse-icon {
    text-align: center;
    font-size: 8px !important;
    color: #6b7280;
    transition: transform 0.3s ease;
}

/* Animação do ícone de collapse */
.collapse-icon-rotate .collapse-icon {
    transform: rotate(90deg) !important;
}