/* Variáveis :root do tenant são injetadas pelo template base.html em um <style> inline. */

/* Fallback: se o JS não rodar, conteúdo fica visível após 1.5s (evita tela em branco) */
#content-wrapper.content-wrapper-init {
    animation: content-wrapper-show 0.3s ease-out 1.5s forwards;
}
@keyframes content-wrapper-show {
    to { opacity: 1; }
}

/* Garante que o content-wrapper ocupe a altura disponível e role internamente (não cresça além da viewport) */
#content-wrapper {
    min-height: 0;
}

/* Barra de loading global: cor mais clara que a nav para destacar (cor_nav + boa luminosidade) */
.global-loading-bar.hidden { display: none !important; }
.global-loading-bar:not(.hidden) { display: block !important; }
.global-loading-bar-inner {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tenant-nav-color, #4f46e5) 45%, white), transparent);
    animation: global-loading-slide 1.2s ease-in-out infinite;
}
@keyframes global-loading-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Destaque do group-switcher ao aparecer (ex.: após adicionar servidor em configurações) */
#group-switcher-container.group-switcher-highlight {
    animation: group-switcher-highlight 2.5s ease-out;
}
@keyframes group-switcher-highlight {
    0% {
        opacity: 0;
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6);
    }
    15% {
        opacity: 1;
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.25);
    }
    30% {
        box-shadow: 0 0 0 12px rgba(99, 102, 241, 0.1);
    }
    45%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

body {
    color: var(--tenant-text-color);
}

#main-content {
    color: #111827;
}

html.dark #main-content {
    color: #e5e7eb;
}

.tenant-accent-bg {
    background-color: var(--tenant-login-accent) !important;
    color: var(--tenant-text-color) !important;
}

.tenant-accent-text {
    color: var(--tenant-login-accent) !important;
}

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

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
a,
button,
table,
th,
td,
header,
main,
nav,
aside,
footer,
span,
i,
form,
input,
select,
details,
summary {
    transition-property: background-color, border-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

*:not(.ts-dropdown):not(.ts-dropdown *)::before,
*:not(.ts-dropdown):not(.ts-dropdown *)::after {
    transition-property: background-color, border-color, color, transform, width, margin-left;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

tr.tour-highlight-row .action-icons-container {
    opacity: 1 !important;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f3f4f6;
}

html.dark,
html.dark body {
    background-color: #111827;
}

body {
    font-family: 'Inter', sans-serif;
}

.hover-tenant:hover {
    background-color: color-mix(in srgb, var(--tenant-nav-color), white 15%) !important;
}

/* Animação suave do gradiente da sidebar (cores em movimento) */
@keyframes sidebar-gradient-drift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar {
        animation: none;
        background-size: 100% 100%;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
    }
}

#sidebar:not(.sidebar-collapsed) {
    width: 18rem;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    z-index: 50;
    width: 5rem;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background-color: var(--tenant-nav-color);
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.25) 60%, rgba(255, 255, 255, 0.08) 80%, rgba(255, 255, 255, 0.2) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    animation: sidebar-gradient-drift 22s ease-in-out infinite;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3), inset -1px 0 3px rgba(255, 255, 255, 0.15), inset 1px 0 4px rgba(255, 255, 255, 0.3);
}

html.dark #sidebar {
    background-color: var(--tenant-nav-color);
}

.header-tenant {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.25) 0%, color-mix(in srgb, var(--tenant-text-color) 10%, transparent) 12%, rgba(255, 255, 255, 0.1) 25%, color-mix(in srgb, var(--tenant-text-color) 10%, transparent) 38%, transparent 55%) !important;
}

#sidebar:hover {
    width: 18rem;
}

#main-content {
    margin-left: 5rem !important;
    width: calc(100% - 5rem);
    transition: none !important;
}

@media (max-width: 768px) {
    #main-content {
        margin-left: 0 !important;
        width: 100%;
    }
}

.sidebar-collapsed {
    width: 5rem !important;
}

.sidebar-text {
    opacity: 1;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.25s ease-in-out;
    transition-delay: 0.1s;
}

.sidebar-collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    transition: opacity 0.25s;
    transition-delay: 0s;
}

.sidebar-collapsed .fa-chevron-down,
.sidebar-collapsed .brand-logo,
.sidebar-collapsed .sidebar-menu-toggle {
    display: none !important;
}

.sidebar-collapsed .sidebar-item-center {
    justify-content: center;
}

.sidebar-collapsed .submenu {
    display: none !important;
}

.sidebar-collapsed #brand-logo-small {
    display: block;
}

#sidebar-collapse-button {
    display: none !important;
}

#sidebar-collapse-button:hover {
    background-color: #4b5563;
}

#sidebar-collapse-button.with-scrollbar-style {
    background-color: #f3f4f6;
    color: #1F2937;
}

#sidebar-collapse-button.with-scrollbar-style:hover {
    background-color: #e5e7eb;
}

html.dark #sidebar-collapse-button.with-scrollbar-style {
    background-color: #f3f4f6;
    color: #1F2937;
}

html.dark #sidebar-collapse-button.with-scrollbar-style:hover {
    background-color: #e5e7eb;
}

html.dark #sidebar-collapse-button {
    background-color: #1F2937;
    color: #d1d5db;
    border-color: #4b5563;
}

html.dark #sidebar-collapse-button:hover {
    background-color: #4b5563;
}

.ts-dropdown {
    background-color: #ffffff;
    z-index: 50;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
}

.submenu.open {
    max-height: 20rem;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #a1a1aa #f3f4f6;
}

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: #f3f4f6;
}

html::-webkit-scrollbar-thumb {
    background-color: #a1a1aa;
    border-radius: 10px;
    border: 2px solid #f3f4f6;
}

html.dark {
    scrollbar-color: #4b5563 #111827;
}

html.dark::-webkit-scrollbar-track {
    background: #111827;
}

html.dark::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-color: #111827;
}

#sidebar .custom-scrollbar {
    scrollbar-color: #ffffff #1f2937;
}

#sidebar .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
}

#sidebar .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #ffffff;
    border: 2px solid #1f2937;
}

html.dark .custom-scrollbar {
    scrollbar-color: #4b5563 #1f2937;
}

html.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-color: #1f2937;
}

.shepherd-button {
    background: #4f46e5;
    color: white !important;
}

.shepherd-button:not(.shepherd-button-secondary):hover {
    background: #4338ca;
}

.shepherd-button.shepherd-button-secondary {
    background: #e5e7eb;
    color: #4b5563 !important;
}

.shepherd-content {
    background-color: #ffffff;
    border-radius: 0.5rem;
}

.shepherd-header {
    background: #f3f4f6;
    padding: 1rem;
}

.shepherd-title {
    color: #111827;
    font-weight: 600;
}

.shepherd-text {
    color: #374151;
    padding: 0.5rem 1rem 1rem 1rem;
}

.shepherd-arrow::before {
    background: #ffffff;
}

.shepherd-cancel-icon:hover {
    color: #111827;
}

html.dark .shepherd-content {
    background-color: #1f2937 !important;
}

html.dark .shepherd-header {
    background-color: #374151 !important;
}

html.dark .shepherd-title {
    color: #f9fafb !important;
}

html.dark .shepherd-text {
    color: #d1d5db !important;
}

html.dark .shepherd-arrow::before {
    background-color: #1f2937 !important;
}

html.dark .shepherd-button.shepherd-button-secondary {
    background: #4b5563;
    color: #f9fafb !important;
}

html.dark .shepherd-cancel-icon {
    color: #9ca3af;
}

html.dark .shepherd-cancel-icon:hover {
    color: #ffffff;
}

.grafico-wrapper {
    display: flex;
    align-items: flex-end;
    height: 300px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 10px;
    margin-top: 20px;
}

.grafico-wrapper::-webkit-scrollbar {
    height: 8px;
}

.grafico-wrapper::-webkit-scrollbar-track {
    background: #e0e7ff;
}

html.dark .grafico-wrapper::-webkit-scrollbar-track {
    background: #374151;
}

.grafico-wrapper::-webkit-scrollbar-thumb {
    background-color: #4f46e5;
    border-radius: 10px;
    border: 2px solid #e0e7ff;
}

html.dark .grafico-wrapper::-webkit-scrollbar-thumb {
    border-color: #374151;
}

#welcome-overlay.overlay-visible {
    display: flex;
    opacity: 1;
}

#welcome-overlay.overlay-visible .welcome-card {
    transform: scale(1);
    opacity: 1;
}

.rocket-icon {
    animation: float 3s ease-in-out infinite;
}

.logo-hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.brand-logo-container:hover .logo-hover,
.brand-logo-container.is-active .logo-hover {
    opacity: 1;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (display-mode: standalone) {
    #install-pwa-button {
        display: none;
    }
}

.loader {
    border-top-color: #4f46e5;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {

    #sidebar,
    #sidebar-collapse-button {
        display: none;
    }

    #install-pwa-button {
        display: none !important;
    }

    #main-content {
        margin-left: 0 !important;
        width: calc(100% - 5rem);
        transition: none !important;
    }

    header.flex {
        position: sticky;
        top: 0;
        z-index: 35;
    }
}

#mobile-bottom-nav a {
    transition: background-color 0.2s, color 0.2s;
    color: #9ca3af;
}

#mobile-bottom-nav a.is-active,
#mobile-bottom-nav a:hover {
    background-color: #374151;
    color: #ffffff;
}

.custom-checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 0.75rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-checkbox-input {
    opacity: 0;
    height: 0;
    width: 0;
}

.custom-checkbox-ui {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #9ca3af;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

html.dark .custom-checkbox-ui {
    background-color: #374151;
    border-color: #6b7280;
}

.custom-checkbox-input:focus-visible+.custom-checkbox-ui {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
}

.custom-checkbox-input:checked+.custom-checkbox-ui {
    background-color: #4f46e5;
    border-color: #4f46e5;
}

.custom-checkbox-ui::after {
    content: '';
    width: 0.3rem;
    height: 0.6rem;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.custom-checkbox-input:checked+.custom-checkbox-ui::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

#global-search-container {
    flex-grow: 1;
    max-width: 720px;
}

#global-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem; 
    background-color: #ffffff;
    border: 1px solid #d1d5db; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
}

html.dark #global-search-dropdown {
    background-color: #1f2937; 
    border-color: #374151; 
}

#global-search-dropdown .search-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem; 
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb; 
}

#global-search-dropdown .search-item:last-child {
    border-bottom: none;
}

html.dark #global-search-dropdown .search-item {
    border-color: #374151; 
}

#global-search-dropdown .search-item:hover {
    background-color: #f3f4f6; 
}

html.dark #global-search-dropdown .search-item:hover {
    background-color: #374151; 
}

#global-search-dropdown .search-item-icon {
    margin-right: 0.75rem; 
    width: 1.25rem; 
    text-align: center;
    color: #6b7280; 
}

html.dark #global-search-dropdown .search-item-icon {
    color: #9ca3af; 
}

#global-search-dropdown .search-item-text {
    color: #111827; 
}

html.dark #global-search-dropdown .search-item-text {
    color: #f9fafb; 
}

#global-search-dropdown .search-item-category {
    font-size: 0.75rem; 
    color: #6b7280; 
}

html.dark #global-search-dropdown .search-item-category {
    color: #d1d5db; 
}

#global-search-dropdown .search-category-header {
    padding: 0.5rem 1rem; 
    font-size: 0.75rem; 
    font-weight: 600;
    color: #4b5563; 
    background-color: #f9fafb; 
    border-bottom: 1px solid #e5e7eb; 
}

html.dark #global-search-dropdown .search-category-header {
    color: #d1d5db; 
    background-color: #374151; 
    border-color: #4b5563; 
}

@keyframes holiday-fall {
    0% { transform: translateY(-10vh) translateX(0vw); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(105vh) translateX(5vw); opacity: 0; }
}

@keyframes holiday-fall-reverse {
    0% { transform: translateY(-10vh) translateX(0vw); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(105vh) translateX(-5vw); opacity: 0; }
}

.snow-flake {
    position: fixed;
    top: -20px;
    color: white;
    font-size: 20px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 9999;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff;
    animation-name: holiday-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.snow-flake.reverse {
    animation-name: holiday-fall-reverse;
}

.sleigh-animation {
    position: fixed;
    top: 10%; 
    right: -300px; 
    width: 250px; 
    height: auto;
    z-index: 0; 
    pointer-events: none; 
    opacity: 0; 
    animation-name: moveSleigh;
    animation-timing-function: linear;
    animation-fill-mode: forwards; 
}

@keyframes moveSleigh {
    0% {
        right: -300px; 
        opacity: 0;
        transform: scaleX(-1); 
    }
    5% {
        opacity: 1; 
    }
    95% {
        opacity: 1; 
    }
    100% {
        right: 105%; 
        opacity: 0; 
        transform: scaleX(-1); 
    }
}

#global-search-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); 
}

#global-search-input:focus {
    width: 100%;
    transform: scale(1.02); 
    border-color: #6366f1; 
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 10px 25px -5px rgba(99, 102, 241, 0.15);
}

html.dark #global-search-input:focus {
    background-color: #1f2937; 
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

#global-search-dropdown {
    display: block; 
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transform-origin: top center;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
    pointer-events: none; 
}

#global-search-dropdown.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

html.dark #global-search-dropdown {
    background-color: #1f2937;
    border-color: #374151;
}

#global-search-dropdown .search-item {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s, transform 0.2s;
}

#global-search-dropdown .search-item:hover {
    background-color: #f3f4f6;
    transform: translateX(4px); 
    border-left: 3px solid #6366f1; 
}

#global-search-dropdown .search-item-icon {
    transition: transform 0.3s ease;
}

#global-search-dropdown .search-item:hover .search-item-icon {
    transform: scale(1.2); 
    color: #6366f1; 
}

html.dark #global-search-dropdown .search-item {
    border-color: #374151;
}

html.dark #global-search-dropdown .search-item:hover {
    background-color: #374151;
}

.no-transition {
    transition: none !important;
}

.sidebar-collapsed .bg-indigo-600 i {
    margin-left: 0.25rem !important; 
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
main { padding-bottom: 80px !important; }