/* MANTER TODOS OS SEUS ESTILOS ATUAIS */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.token-expiring {
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
}

.token-expired {
    border-left: 4px solid #dc3545;
    background-color: #f8d7da;
}

/* Estilos para o modal de inatividade */
.modal-backdrop.inactivity-warning {
    background-color: rgba(255, 193, 7, 0.3);
}

#inactivityProgress {
    transition: width 1s linear;
}

/* Indicador visual de inatividade na navbar */
.inactivity-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}

.inactivity-indicator.active {
    background-color: #28a745;
    animation: pulse 2s infinite;
}

.inactivity-indicator.warning {
    background-color: #ffc107;
    animation: pulse 1s infinite;
}

.inactivity-indicator.danger {
    background-color: #dc3545;
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Estado offline + inativo */
body.offline.inactive {
    opacity: 0.7;
}

/* ✅ NOVO: Estilos para integração com o novo layout */
.toast-container {
    z-index: 9999;
}

/* Ajustes para tabelas no novo layout */
.table-responsive {
    border-radius: 0.375rem;
}

/* Loading states para novo layout */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* SOLAR CRUD */
.solar-crud-container .table th {
    font-size: 0.85rem;
    white-space: nowrap;
}

.solar-crud-container .table td {
    font-size: 0.82rem;
    vertical-align: middle;
}

.solar-crud-container .btn-sm {
    padding: 0.25rem 0.5rem;
    margin: 0 2px;
}

.solar-crud-container .table-responsive {
    max-height: 70vh;
}

.solar-crud-container .text-right {
    text-align: right;
}

.solar-crud-container tfoot tr td {
    font-weight: bold;
    background-color: #f8f9fa;
}

@media (max-width: 768px) {
    .solar-crud-container .table-responsive {
        font-size: 0.75rem;
    }

    .solar-crud-container .btn-sm {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Estilo personalizado para os botões de mostrar/ocultar senha */
.toggle-password {
    border-left: 0;
    min-width: 45px;
}

.toggle-password:hover {
    background-color: #e9ecef;
    border-color: #6c757d;
}

.toggle-password:focus {
    box-shadow: none;
    border-color: #6c757d;
}

/* Garantir que o input-group tenha aparência consistente */
.input-group .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Estilos para Ações Rápidas Dinâmicas */
.action-btn {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s;
    border: none;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.action-btn:not(.disabled):active {
    transform: translateY(0);
}

.action-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.action-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.action-management-item {
    background-color: #f8f9fa;
    transition: all 0.2s;
}

.action-management-item:hover {
    background-color: #e9ecef;
    transform: translateX(4px);
}

.action-drag-handle {
    cursor: move;
}

/* Responsividade */
@media (max-width: 768px) {
    .action-btn {
        height: 80px;
        padding: 10px;
    }

    .action-icon {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .action-title {
        font-size: 0.8rem;
    }
}

/* Estilos emergenciais para ações rápidas */
.action-btn {
    height: 100px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s;
    border: none;
    opacity: 1 !important;
    visibility: visible !important;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.action-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    display: block !important;
}

.action-title {
    font-size: 0.9rem;
    font-weight: 500;
    display: block !important;
}

/* Garantir que o container esteja visível */
#quick-actions-container {
    display: flex !important;
    flex-wrap: wrap;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ✅ MELHORIA: Estilos para área de arrastar */
.action-drag-handle {
    cursor: grab;
    transition: all 0.2s;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.action-drag-handle:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.action-drag-handle:active {
    cursor: grabbing;
    background-color: #dee2e6;
}

/* Feedback visual durante o arraste */
.sortable-ghost {
    opacity: 0.4;
    background-color: #e9ecef;
}

.sortable-chosen {
    background-color: #f8f9fa;
}

/* Instruções de arraste */
.drag-instructions {
    font-size: 0.875rem;
    color: #6c757d;
}

/* ✅ MELHORIA: Estilos para área de arrastar melhorada */
.action-drag-handle {
    cursor: grab;
    transition: all 0.2s;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.action-drag-handle:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: scale(1.05);
}

.action-drag-handle:active {
    cursor: grabbing;
    background-color: #dee2e6;
    transform: scale(0.95);
}

/* Feedback visual durante o arraste */
.sortable-ghost {
    opacity: 0.6;
    background-color: #e3f2fd;
    border: 2px dashed #2196f3;
}

.sortable-chosen {
    background-color: #f3e5f5;
    transform: rotate(2deg);
}

/* Status da configuração */
#selected-actions-count {
    font-weight: bold;
    color: #198754;
}

/* Ações desabilitadas */
.action-management-item.opacity-50 {
    background-color: #f8f9fa;
}

.action-management-item.opacity-50 .form-check-label {
    color: #6c757d;
}

/* Estilos para a página de informações do servidor */
.info-item {
    border-bottom: 1px solid #eee;
    padding: 0.75rem 0;
}

.info-item:last-child {
    border-bottom: none;
}

.copyable {
    cursor: pointer;
    transition: all 0.2s;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.875rem;
}

.copyable:hover {
    background-color: #f8f9fa;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.25);
}

.admin-section {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

.progress-thin {
    height: 6px;
}

.code-block {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

/* Estilo limpo para cards */
.server-info-card .card-body {
    padding: 1.25rem;
}

.server-info-card .small.text-muted {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.server-info-card .fw-normal {
    font-weight: 400;
    word-break: break-all;
}

/* Responsividade melhorada */
@media (max-width: 768px) {
    .server-info-card .col-sm-6 {
        width: 100%;
        margin-bottom: 1rem;
    }

    .copyable {
        font-size: 0.8rem;
    }
}

/* Estilo para status */
.status-operational {
    color: #198754;
}

.status-problem {
    color: #dc3545;
}

/* Animações suaves */
.server-info-card {
    transition: transform 0.2s ease;
}

.server-info-card:hover {
    transform: translateY(-2px);
}

/* Estilos para Sortable.js */
.sortable-ghost {
    opacity: 0.4;
    background-color: #f8f9fa;
}

.sortable-chosen {
    background-color: #e9ecef;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.sortable-drag {
    opacity: 0.8;
    transform: rotate(2deg);
}

/* Estilos para o handle de arrastar */
.action-drag-handle {
    transition: background-color 0.2s ease;
}

.action-drag-handle:hover {
    background-color: #dee2e6 !important;
}

.action-drag-handle:active {
    cursor: grabbing;
}

/* Estilos para fallback */
.move-up-btn:disabled,
.move-down-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.move-up-btn:not(:disabled):hover,
.move-down-btn:not(:disabled):hover {
    background-color: #6c757d;
    color: white;
}

/*
    SolarCrud Table Modile
*/

/* Estilos específicos para versão mobile da tabela */
@media (max-width: 768px) {
    .table-mobile {
        border: 0;
    }

    .table-mobile thead {
        display: none;
    }

    .table-mobile tbody tr {
        margin-bottom: 1rem;
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        overflow: hidden;
    }

    .table-mobile tbody tr.mobile-row {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .table-mobile tbody tr.mobile-data-row {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .table-mobile td {
        display: block;
        border: none;
        padding: 0;
    }

    .mobile-data-container {
        font-size: 0.9rem;
    }

    .mobile-data-container .row > div {
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mobile-data-container small {
        font-size: 0.75rem;
    }

    /* Ocultar rodapé em mobile */
    .table-mobile tfoot {
        display: none;
    }

    /* Adicionar card para totais em mobile */
    .totais-mobile {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1rem;
        margin-top: 1rem;
    }

    .totais-mobile h6 {
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }
}

/* Adicionar ao seu arquivo CSS principal */
.calendar-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.calendar-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
}

.calendar-day {
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
}

.has-record {
    background-color: #d4edda !important;
}

.has-record:hover {
    background-color: #c3e6cb !important;
}

.current-day {
    position: relative;
    background-color: #fff3cd !important;
}

.current-day::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
}

.future-day {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.day-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.day-data {
    font-size: 0.75rem;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .calendar-table td {
        padding: 4px !important;
        height: 60px !important;
    }

    .day-data {
        font-size: 0.65rem;
    }

    .calendar-header h5 {
        font-size: 1rem;
    }
}

/* Adicionar ao CSS existente */
.calendar-controls {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.calendar-nav-buttons .btn {
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 500;
}

.month-year-selectors {
    min-width: 250px;
}

.month-year-selectors .form-select {
    border-color: #6c757d;
}

.month-year-selectors .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Estilos responsivos para os controles */
@media (max-width: 768px) {
    .calendar-controls {
        flex-direction: column !important;
    }

    .month-year-selectors {
        width: 100%;
        margin-bottom: 10px;
    }

    .calendar-nav-buttons {
        width: 100%;
        justify-content: center;
    }

    .calendar-nav-buttons .btn {
        flex: 1;
        text-align: center;
    }
}

/* Adicionar ao CSS existente */

/* Instruções */
.instruction-card .badge {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tooltips personalizados */
.calendar-day {
    cursor: help;
}

.future-day {
    cursor: not-allowed;
}

/* Modal improvements */
#modal-instructions {
    border-left: 4px solid;
}

#modal-instructions.alert-warning {
    border-left-color: #ffc107;
}

#modal-instructions.alert-success {
    border-left-color: #198754;
}

#modal-instructions.alert-danger {
    border-left-color: #dc3545;
}

/* Form labels com ícones */
.form-label i {
    width: 20px;
    text-align: center;
}

/* Dica rápida */
.alert-light {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* Responsividade */
@media (max-width: 768px) {
    .instruction-card .d-flex {
        margin-bottom: 15px;
    }

    .modal-dialog {
        margin: 10px;
    }

    .calendar-day {
        font-size: 0.8rem;
    }
}

/* Adicionar ao CSS existente */

/* Tooltip personalizado para calendário */
.calendar-tooltip .tooltip-inner {
    max-width: 250px;
    background-color: rgba(33, 37, 41, 0.95);
    color: white;
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgba(33, 37, 41, 0.95);
}

.calendar-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgba(33, 37, 41, 0.95);
}

.calendar-tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgba(33, 37, 41, 0.95);
}

.calendar-tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(33, 37, 41, 0.95);
}

/* Tooltips padrão */
[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Animação suave para tooltips */
.tooltip.fade {
    transition: opacity 0.15s ease-in-out;
}

/* Tooltip para ícones */
.badge[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Estilo para dias do calendário com tooltip */
.calendar-day[data-bs-toggle="tooltip"] {
    position: relative;
}

/* Melhorar acessibilidade */
.calendar-day:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Tooltip responsivo */
@media (max-width: 768px) {
    .calendar-tooltip .tooltip-inner {
        max-width: 200px;
        font-size: 0.85rem;
        padding: 8px;
    }

    /* Reduzir delay em mobile para melhor UX */
    .calendar-day[data-bs-toggle="tooltip"] {
        --bs-tooltip-delay: 200ms;
    }
}

/* Estilos para tabela responsiva */
.table-mobile {
    font-size: 0.875rem;
}

.table-mobile .mobile-row {
    border-bottom: 2px solid #dee2e6;
}

.table-mobile .mobile-data-container {
    font-size: 0.8rem;
}

.table-mobile .btn-group {
    flex-wrap: nowrap;
}

/* Ajustes para filtros em mobile */
@media (max-width: 768px) {
    .card-body .row.g-3 > div {
        margin-bottom: 0.5rem;
    }

    .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .d-flex.gap-2 .btn {
        margin-bottom: 0.5rem;
    }
}

/* Estilos para paginação */
#pagination-controls .btn-group {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#pagination-controls .btn {
    min-width: 40px;
}

#pagination-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#per-page-select {
    max-width: 140px;
}

/* Responsividade para paginação */
@media (max-width: 768px) {
    #pagination-controls {
        width: 100%;
        text-align: center;
    }

    #pagination-controls .btn-group {
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #per-page-select {
        width: 100% !important;
        max-width: 200px;
        margin: 0 auto;
    }

    .table-secondary td[colspan="5"] {
        text-align: center !important;
    }
}

/* Estilos para filtros responsivos */
#filtersCollapse {
    transition: all 0.3s ease;
}

/* Melhorias para inputs em mobile */
@media (max-width: 767.98px) {
    #filtersCollapse .card-body {
        padding: 1rem;
    }

    #filtersCollapse .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    #filtersCollapse .form-control,
    #filtersCollapse .form-select {
        font-size: 0.875rem;
        padding: 0.375rem 0.5rem;
    }

    #filtersCollapse .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }

    .d-flex.gap-2 {
        gap: 0.5rem !important;
    }
}

/* Paginação mobile */
#pagination-controls-mobile .btn-group .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

#pagination-controls-mobile .form-select-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* Melhorias na tabela mobile */
@media (max-width: 767.98px) {
    .table-mobile .mobile-row td {
        padding: 0.5rem !important;
    }

    .table-mobile .mobile-data-container {
        font-size: 0.75rem;
    }

    .table-mobile .mobile-data-container .row > div {
        padding: 0.375rem !important;
    }

    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Ajustes gerais para mobile */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .card-body {
        padding: 1rem;
    }

    h1.mt-4 {
        font-size: 1.5rem;
        margin-top: 1rem !important;
    }

    .breadcrumb {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
}

/* Scroll suave para tabela em mobile */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Indicador visual para filtros ativos */
.filters-active-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}

/* Garantir que o tfoot seja visível */
#table-footer {
    display: table-footer-group !important;
}

/* Estilos específicos para paginação mobile */
#pagination-controls-mobile .input-group-sm .form-control {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

#pagination-controls-mobile .input-group-sm .input-group-text {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

/* Botões responsivos em mobile */
@media (max-width: 576px) {
    #pagination-controls-mobile .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.375rem;
    }

    #pagination-controls-mobile .btn-sm i {
        margin: 0 !important;
    }

    #pagination-controls-mobile .btn-sm span:not(i) {
        display: none;
    }
}

/* Ajustes para botões na seção principal */
.mb-3.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .mb-3.d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    .mb-3.d-flex > div {
        width: 100%;
    }

    .mb-3.d-flex .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Melhorar visibilidade dos controles mobile */
#pagination-controls-mobile {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.75rem;
}

/* Ajustar largura do select em mobile */
#per-page-select-mobile {
    min-width: 120px;
}

/* Estilos para ordenação */
.sort-asc {
    background-color: rgba(0, 0, 0, 0.57) !important;
}

.sort-desc {
    background-color: rgba(0, 0, 0, 0.57) !important;
}

.sort-icon {
    font-weight: bold;
    color: #ffffff;
}

/* Estilos para seletor de ordenação */
.card-body.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

#btn-aplicar-ordenacao {
    white-space: nowrap;
}

/* Responsividade para seletor de ordenação */
@media (max-width: 768px) {
    .card-body.py-2 .row > div {
        margin-bottom: 0.5rem;
    }

    .card-body.py-2 .col-md-4,
    .card-body.py-2 .col-md-3,
    .card-body.py-2 .col-md-2 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    #btn-aplicar-ordenacao {
        width: 100%;
    }
}

/* Estilos para detalhes genealogia individuo */
/* Adicione ao seu arquivo CSS principal */
.btn-navigate:hover {
    transform: translateX(5px);
    transition: transform 0.2s ease;
}

.card-header.bg-light {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6;
}

.list-group-item-action:hover {
    background-color: #f8f9fa;
}

.code-id {
    font-family: 'Courier New', monospace;
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Animações suaves */
#content-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Adicione ao seu CSS principal */
#gen-individual-modal .modal-xl {
    max-width: 95%;
    margin: 1rem auto;
}

#gen-individual-modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    #gen-individual-modal .modal-xl {
        max-width: 100%;
        margin: 0;
    }

    #gen-individual-modal .modal-body {
        max-height: 80vh;
    }
}

/* Estilos para elementos clicáveis no modal */
.btn-navigate:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #0d6efd;
    transition: all 0.2s;
}

/* Scroll suave */
#gen-modal-content {
    scroll-behavior: smooth;
}

/* Adicione ao seu CSS principal */
#gen-individual-modal .modal-fullscreen {
    max-width: 100%;
    margin: 0;
}

#gen-individual-modal .modal-content {
    border-radius: 0;
    min-height: 100vh;
}

#gen-individual-modal .modal-body {
    padding: 0;
}

#gen-individual-modal .sticky-top,
#gen-individual-modal .sticky-bottom {
    z-index: 1055;
}

#gen-individual-modal .btn-navigate:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd;
}

#gen-individual-modal pre {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
}

#gen-individual-modal .card {
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#gen-individual-modal .card-header {
    font-weight: 600;
}

/* Responsividade */
@media (max-width: 992px) {
    #gen-individual-modal .col-lg-4 {
        border-left: none !important;
        border-top: 1px solid #dee2e6;
    }
}

@media (max-width: 768px) {
    #gen-individual-modal .modal-header h5 {
        font-size: 1.1rem;
    }

    #gen-individual-modal .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Visualização e Administração de Logs */
/* Estilos específicos para a página de logs */
.log-content {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
}

.log-line {
    border-left: 4px solid transparent;
    transition: background-color 0.2s;
}

.log-line:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.log-line.info {
    border-left-color: #0d6efd;
}

.log-line.warning {
    border-left-color: #ffc107;
}

.log-line.error {
    border-left-color: #dc3545;
}

.log-line.debug {
    border-left-color: #6c757d;
}

.log-line.security {
    border-left-color: #212529;
}

.log-search-line {
    font-size: 12px;
    border-left: 3px solid #20c997;
    padding-left: 10px;
}

.log-search-line:hover {
    background-color: rgba(32, 201, 151, 0.1);
}

/* Badges personalizados */
.badge-level-info {
    background-color: #0d6efd;
}

.badge-level-warning {
    background-color: #ffc107;
    color: #000;
}

.badge-level-error {
    background-color: #dc3545;
}

.badge-level-debug {
    background-color: #6c757d;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Scrollbar personalizada */
.log-content::-webkit-scrollbar {
    width: 8px;
}

.log-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Estilos para o loader melhorado */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading-content {
    text-align: center;
    padding: 2rem;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
}

.spinner-container {
    margin-bottom: 1.5rem;
}

.loading-text {
    margin-top: 1rem;
}

.loading-text h4 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.loading-text p {
    color: #6c757d;
    margin-bottom: 1rem;
}

#loadingDetails {
    display: block;
    margin-top: 1rem;
    font-style: italic;
}

/* Animação de fade out quando terminar de carregar */
.loading-container.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}