/* ========================================
   MELHORIAS DE TEMA - SISTEMA FORCING
   Baseado no design da tela de login
   ======================================== */

:root {
    /* Cores principais do tema */
    --primary-blue: #00D4FF;
    --primary-green: #00FF88;
    --primary-yellow: #FFD700;
    --primary-orange: #FF6B35;
    --primary-red: #DC2626;
    
    /* Gradientes principais */
    --gradient-primary: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #00D4FF 100%);
    --gradient-success: linear-gradient(135deg, #00FF88 0%, #22C55E 100%);
    --gradient-warning: linear-gradient(135deg, #FFD700 0%, #F59E0B 100%);
    --gradient-danger: linear-gradient(135deg, #FF6B35 0%, #DC2626 100%);
    
    /* Backgrounds glassmorphism */
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-hover: rgba(255, 255, 255, 0.2);
    --bg-glass-strong: rgba(255, 255, 255, 0.25);
    
    /* Backgrounds escuros */
    --bg-dark: #1a202c;
    --bg-darker: #0f1419;
    --bg-darkest: #0a0e14;
}

/* ========================================
   LAYOUT PRINCIPAL
   ======================================== */

/* Aplicar tema apenas em páginas específicas */
.forcing-page {
    background: #f8f9fa;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.forcing-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f8f9fa;
    pointer-events: none;
    z-index: -1;
}

/* ========================================
   NAVBAR MELHORADA
   ======================================== */

.navbar {
    background: var(--gradient-primary) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar-brand {
    color: white !important;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 5px;
    padding: 8px 16px !important;
}

.navbar-nav .nav-link:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ========================================
   CARDS DE STATUS MELHORADOS
   ======================================== */

.status-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    color: #333 !important;
}

.status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.status-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 212, 255, 0.4);
}

.status-card:hover::before {
    opacity: 0.1;
}

/* Cards específicos por status */
.card-pendente {
    background: #ffffff;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-liberado {
    background: #28a745 !important;
    border: 1px solid #28a745 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

.card-forcado {
    background: #ffc107 !important;
    border: 1px solid #ffc107 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

.card-retirado {
    background: #6c757d !important;
    border: 1px solid #6c757d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

.card-executado {
    background: #17a2b8 !important;
    border: 1px solid #17a2b8 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

/* Garantir que o texto dentro dos cards seja visível */
.card-liberado h3,
.card-liberado h4,
.card-liberado h5,
.card-liberado h6,
.card-liberado p,
.card-liberado span,
.card-liberado div,
.card-liberado i {
    color: #ffffff !important;
}

.card-forcado h3,
.card-forcado h4,
.card-forcado h5,
.card-forcado h6,
.card-forcado p,
.card-forcado span,
.card-forcado div,
.card-forcado i {
    color: #000000 !important;
}

.card-retirado h3,
.card-retirado h4,
.card-retirado h5,
.card-retirado h6,
.card-retirado p,
.card-retirado span,
.card-retirado div,
.card-retirado i {
    color: #ffffff !important;
}

.card-executado h3,
.card-executado h4,
.card-executado h5,
.card-executado h6,
.card-executado p,
.card-executado span,
.card-executado div,
.card-executado i {
    color: #ffffff !important;
}

/* ========================================
   TABELA MELHORADA
   ======================================== */

.table-container {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table {
    margin-bottom: 0;
    color: #333;
}

.table thead th {
    background: #f8f9fa;
    color: #333;
    border: none;
    padding: 15px;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;
}

.table tbody tr:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table tbody td {
    padding: 15px;
    border: none;
    color: #333;
}

.table tbody td a {
    color: #007bff;
    text-decoration: none;
}

.table tbody td a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* ========================================
   BADGES DE STATUS MELHORADOS cards
   ======================================== */

.badge {
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.badge-pendente {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(105, 105, 105, 0.3) !important;
}

.badge-liberado {
    background: var(--gradient-success);
    color: white;
}

.badge-forcado {
    background: var(--gradient-warning);
    color: #1a202c;
}

.badge-retirado {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.badge-executado {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

/* ========================================
   BOTÕES MELHORADOS
   ======================================== */

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 50%, #0369A1 100%);
}

.btn-success {
    background: var(--gradient-success);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
    color: white;
}

.btn-warning {
    background: var(--gradient-warning);
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    color: #1a202c;
}

/* ========================================
   FORMULÁRIOS MELHORADOS
   ======================================== */

/* Aplicar estilos glassmorphism apenas em páginas específicas */
.forcing-page .form-control {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    color: #333;
    transition: all 0.3s ease;
}

.forcing-page .form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

.forcing-page .form-control::placeholder {
    color: rgba(0, 0, 0, 0.6);
}

.forcing-page .form-label {
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Manter formulários normais em outras páginas */
.form-control:not(.forcing-page .form-control) {
    background: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

.form-control:not(.forcing-page .form-control):focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    background: #fff;
    transform: none;
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.glow-effect {
    animation: glow 2s ease-in-out infinite;
}

.pulse-effect {
    animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    .status-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .table-container {
        border-radius: 10px;
        overflow-x: auto;
    }
    
    .navbar-nav .nav-link {
        margin: 5px 0;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .status-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        display: grid !important;
        margin-top: 20px;
    }
    
    .status-card {
        padding: 15px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Garantir que os cards sejam visíveis */
    .status-cards .status-card {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 80px;
    }
}

/* ========================================
   CORREÇÃO CARDS MOBILE
   ======================================== */

/* Garantir que os cards de status sejam sempre visíveis */
.status-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.status-cards .status-card {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
    color: #333 !important;
    border: 1px solid #e9ecef !important;
}

/* Garantir que o texto dos cards seja visível */
.status-card h3,
.status-card h4,
.status-card h5,
.status-card h6,
.status-card p,
.status-card span,
.status-card div,
.status-card i {
    color: #333 !important;
    font-weight: 600 !important;
}

.status-card .badge {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Forçar visibilidade em todas as telas */
@media (max-width: 768px) {
    .status-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 20px;
    }
    
    .status-cards .status-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 576px) {
    .status-cards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }
    
    .status-cards .status-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 80px;
        background: #ffffff !important;
        color: #333 !important;
        border: 1px solid #e9ecef !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Forçar visibilidade do texto em mobile */
    .status-card h3,
    .status-card h4,
    .status-card h5,
    .status-card h6,
    .status-card p,
    .status-card span,
    .status-card div,
    .status-card i {
        color: #333 !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }
    
    .status-card .badge {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

.text-glow {
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.bg-glass {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
}

.bg-glass-hover:hover {
    background: var(--bg-glass-hover);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.border-glow {
    border: 1px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

/* ========================================
   CARDS DE FORCING
   ======================================== */

.forcing-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.forcing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.forcing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.forcing-card:hover::before {
    opacity: 0.05;
}

.forcing-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px;
}

.forcing-card .card-body {
    padding: 20px;
    color: #333;
}

.forcing-card .card-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 15px;
}

.forcing-card .card-title a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.forcing-card .card-title a:hover {
    color: #007bff;
    text-decoration: underline;
}

.forcing-card .card-text {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* Cards por status linha lateral do card*/
.forcing-card[data-status="pendente"] {
    border-left: 4px solid #28a745;
}

.forcing-card[data-status="liberado"] {
    border-left: 4px solid #28a745;
}

.forcing-card[data-status="forcado"] {
    border-left: 4px solid #ffc107;
}

.forcing-card[data-status="solicitacao_retirada"] {
    border-left: 4px solid #6f42c1;
}

.forcing-card[data-status="retirado"] {
    border-left: 4px solid #252525;
}

/* ========================================
   BADGES DE STATUS MELHORADOS
   ======================================== */

/* Badges de status com cores melhoradas */
.badge-pendente {
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgb(223, 215, 215) !important;
}

.badge-liberado {
    background-color: #198754 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge-forcado {
    background-color: #fd7e14 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge-solicitacao_retirada {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge-retirado {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge-executado {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   MELHORIAS ESPECÍFICAS PARA BADGES
   ======================================== */

/* Garantir contraste em todos os badges */
.badge {
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.5em 0.75em !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Badges específicos com melhor contraste */
.badge.bg-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge.bg-success {
    background-color: #198754 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge.bg-warning {
    background-color: #fd7e14 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
    color: #000000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Badge bg-dark específico para lista */
.badge.bg-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Botões de toggle de visualização */
.btn-group .btn.active {
    background: #007bff;
    border-color: #007bff;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.btn-group .btn:not(.active) {
    background: #ffffff;
    border-color: #007bff;
    color: #007bff;
}

.btn-group .btn:not(.active):hover {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
}

/* Animações para cards */
.forcing-card {
    animation: fadeInUp 0.6s ease-out;
}

.forcing-card:nth-child(1) { animation-delay: 0.1s; }
.forcing-card:nth-child(2) { animation-delay: 0.2s; }
.forcing-card:nth-child(3) { animation-delay: 0.3s; }
.forcing-card:nth-child(4) { animation-delay: 0.4s; }
.forcing-card:nth-child(5) { animation-delay: 0.5s; }
.forcing-card:nth-child(6) { animation-delay: 0.6s; }

/* Reduzir espaçamento entre cards */
#cardsView .row {
    margin-left: -8px;
    margin-right: -8px;
}

#cardsView .col-lg-4,
#cardsView .col-md-6 {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

/* Espaçamento ainda menor para mobile */
@media (max-width: 768px) {
    #cardsView .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    #cardsView .col-lg-4,
    #cardsView .col-md-6 {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 12px;
    }
}

#cardsView .forcing-card {
    margin-bottom: 0;
    height: 100%;
}

/* Ajustar padding interno dos cards */
#cardsView .forcing-card .card-header {
    padding: 12px 15px;
}

#cardsView .forcing-card .card-body {
    padding: 15px;
}

#cardsView .forcing-card .card-footer {
    padding: 12px 15px;
}

/* Responsividade para cards */
@media (max-width: 768px) {
    #cardsView .col-md-6 {
        margin-bottom: 12px;
    }
    
    #cardsView .forcing-card .card-body {
        padding: 12px;
    }
    
    #cardsView .forcing-card .card-footer {
        padding: 10px 12px;
    }
}

@media (max-width: 576px) {
    #cardsView .row {
        margin-left: -3px;
        margin-right: -3px;
    }
    
    #cardsView .col-lg-4,
    #cardsView .col-md-6 {
        padding-left: 3px;
        padding-right: 3px;
        margin-bottom: 8px;
    }
    
    #cardsView .forcing-card .card-header {
        padding: 8px 10px;
    }
    
    #cardsView .forcing-card .card-body {
        padding: 8px 10px;
    }
    
    #cardsView .forcing-card .card-footer {
        padding: 6px 10px;
    }
    
    /* Reduzir ainda mais o espaçamento em mobile */
    #cardsView {
        margin-bottom: 10px;
    }
}

/* ========================================
   MELHORIAS DE LEGIBILIDADE
   ======================================== */

/* Garantir contraste adequado para textos */
.forcing-page .text-muted {
    color: #6c757d !important;
}

.forcing-page .text-white-50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.forcing-page .text-white {
    color: #333 !important;
}

/* Botões com contraste adequado */
.forcing-page .btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
    background-color: transparent;
}

.forcing-page .btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.forcing-page .btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.forcing-page .btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Links com contraste adequado */
.forcing-page a {
    color: #007bff;
}

.forcing-page a:hover {
    color: #0056b3;
}

/* Badges com contraste adequado */
.forcing-page .badge {
    color: #fff;
    font-weight: 600;
}

/* Melhorar legibilidade dos cards de status */
.forcing-page .card.bg-secondary,
.forcing-page .card.bg-success,
.forcing-page .card.bg-warning,
.forcing-page .card.bg-info,
.forcing-page .card.bg-dark,
.forcing-page .card.bg-primary {
    color: #fff !important;
}

.forcing-page .card.bg-secondary h3,
.forcing-page .card.bg-success h3,
.forcing-page .card.bg-warning h3,
.forcing-page .card.bg-info h3,
.forcing-page .card.bg-dark h3,
.forcing-page .card.bg-primary h3 {
    color: #fff !important;
}

.forcing-page .card.bg-secondary p,
.forcing-page .card.bg-success p,
.forcing-page .card.bg-warning p,
.forcing-page .card.bg-info p,
.forcing-page .card.bg-dark p,
.forcing-page .card.bg-primary p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   MELHORIAS GERAIS DOS BOTÕES
   ======================================== */

/* Melhorar aparência dos botões */
.forcing-page .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forcing-page .btn i {
    font-size: 14px;
}

.forcing-page .btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

.forcing-page .btn-sm i {
    font-size: 13px;
}

/* Botão Novo Forcing melhorado */
.forcing-page .btn-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.forcing-page .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
    transform: translateY(-1px);
}

/* Botões de toggle melhorados */
.forcing-page .btn-group .btn {
    border-radius: 6px;
    margin: 0 2px;
}

.forcing-page .btn-group .btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.forcing-page .btn-group .btn:not(.active) {
    background: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border-color: #007bff;
}

.forcing-page .btn-group .btn:not(.active):hover {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border-color: #007bff;
}

/* Botão de atualizar melhorado */
.forcing-page .btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
    background: rgba(255, 255, 255, 0.9);
}

.forcing-page .btn-outline-primary:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* ========================================
   MELHORIAS PARA MOBILE
   ======================================== */

/* Botões de ação em mobile */
@media (max-width: 768px) {
    .forcing-page .btn-group {
        display: flex;
        flex-direction: row;
        gap: 4px;
        width: 100%;
    }
    
    .forcing-page .btn-group .btn {
        flex: 1;
        margin-bottom: 0;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    
    .forcing-page .btn-group .btn i {
        font-size: 14px;
    }
    
    .forcing-page .btn-group .btn.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }
    
    .forcing-page .btn-group .btn:not(.active) {
        background: rgba(255, 255, 255, 0.95);
        color: #333;
        border-color: rgba(0, 0, 0, 0.1);
    }
    
    .forcing-page .btn-group .btn:not(.active):hover {
        background: rgba(255, 255, 255, 1);
        color: #333;
        border-color: rgba(0, 0, 0, 0.2);
    }
}

/* Botões de ação principais em mobile */
@media (max-width: 768px) {
    .forcing-page .d-flex.gap-2 {
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .forcing-page .btn {
        flex: 1;
        min-width: 120px;
        padding: 10px 14px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .forcing-page .btn i {
        font-size: 14px;
    }
    
    .forcing-page .btn-primary {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }
    
    .forcing-page .btn-primary:hover {
        background: #0056b3;
        border-color: #0056b3;
        color: white;
    }
    
    .forcing-page .btn-outline-primary {
        background: rgba(255, 255, 255, 0.95);
        border-color: #007bff;
        color: #007bff;
    }
    
    .forcing-page .btn-outline-primary:hover {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }
}

/* Textos e elementos em mobile */
@media (max-width: 768px) {
    .forcing-page h1,
    .forcing-page h2,
    .forcing-page h3,
    .forcing-page h4,
    .forcing-page h5,
    .forcing-page h6 {
        color: #333 !important;
        font-weight: 600;
    }
    
    .forcing-page p,
    .forcing-page span,
    .forcing-page div {
        color: #333 !important;
    }
    
    .forcing-page .text-muted {
        color: #666 !important;
    }
    
    .forcing-page .text-white {
        color: #333 !important;
    }
    
    .forcing-page .text-white-50 {
        color: #666 !important;
    }
}

/* ========================================
   CORREÇÃO DE CONTRASTE DOS TEXTOS
   ======================================== */

/* Garantir contraste adequado para todos os textos */
.forcing-page h1,
.forcing-page h2,
.forcing-page h3,
.forcing-page h4,
.forcing-page h5,
.forcing-page h6 {
    color: #333 !important;
    font-weight: 600;
}

.forcing-page p,
.forcing-page span,
.forcing-page div {
    color: #333 !important;
}

.forcing-page .text-muted {
    color: #666 !important;
}

.forcing-page .text-white {
    color: #333 !important;
}

.forcing-page .text-white-50 {
    color: #666 !important;
}

/* Títulos específicos */
.forcing-page .h3 {
    color: #333 !important;
    font-weight: 600;
}

.forcing-page .h3 i {
    color: #007bff !important;
}

.forcing-page small.text-muted {
    color: #666 !important;
}

/* Correção específica para títulos principais */
.forcing-page h1.h3 {
    color: #333 !important;
    font-weight: 600;
}

.forcing-page h1.h3 i {
    color: #007bff !important;
}

.forcing-page h1.h3 + small {
    color: #666 !important;
}

/* Garantir que todos os textos sejam visíveis */
.forcing-page * {
    color: inherit;
}

.forcing-page .text-white {
    color: #333 !important;
}

.forcing-page .text-white-50 {
    color: #666 !important;
}

.forcing-page .text-muted {
    color: #666 !important;
}

/* Botões com contraste adequado */
.forcing-page .btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.forcing-page .btn-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
    transform: translateY(-1px);
}

.forcing-page .btn-primary i {
    color: #fff !important;
}

.forcing-page .btn-primary span {
    color: #fff !important;
}

.forcing-page .btn-outline-primary {
    color: #007bff !important;
    border-color: #007bff;
    background: rgba(255, 255, 255, 0.9);
}

.forcing-page .btn-outline-primary:hover {
    color: #fff !important;
    background: #007bff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.forcing-page .btn-outline-primary i {
    color: #007bff !important;
}

.forcing-page .btn-outline-primary:hover i {
    color: #fff !important;
}

.forcing-page .btn-outline-primary span {
    color: #007bff !important;
}

.forcing-page .btn-outline-primary:hover span {
    color: #fff !important;
}

/* Botões de toggle com contraste adequado */
.forcing-page .btn-group .btn.active {
    color: #fff !important;
    background: #007bff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.forcing-page .btn-group .btn.active i {
    color: #fff !important;
}

.forcing-page .btn-group .btn.active span {
    color: #fff !important;
}

.forcing-page .btn-group .btn:not(.active) {
    color: #007bff !important;
    background: rgba(255, 255, 255, 0.9);
    border-color: #007bff;
}

.forcing-page .btn-group .btn:not(.active) i {
    color: #007bff !important;
}

.forcing-page .btn-group .btn:not(.active) span {
    color: #007bff !important;
}

.forcing-page .btn-group .btn:not(.active):hover {
    color: #007bff !important;
    background: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
}

.forcing-page .btn-group .btn:not(.active):hover i {
    color: #007bff !important;
}

.forcing-page .btn-group .btn:not(.active):hover span {
    color: #007bff !important;
}

/* Cards de status em mobile */
@media (max-width: 768px) {
    .forcing-page .card {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #333 !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .forcing-page .card .card-header {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .forcing-page .card .card-body {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
    }
    
    .forcing-page .card .card-footer {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #333 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    /* Forçar cores corretas dos cards de status em mobile */
    .forcing-page .card.bg-primary {
        background: #007bff !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-success {
        background: #28a745 !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-warning {
        background: #ffc107 !important;
        color: #000000 !important;
    }
    
    .forcing-page .card.bg-info {
        background: #17a2b8 !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-secondary {
        background: #6c757d !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-dark {
        background: #343a40 !important;
        color: #ffffff !important;
    }
    
    /* Forçar cores do texto dentro dos cards */
    .forcing-page .card.bg-primary h3,
    .forcing-page .card.bg-primary h4,
    .forcing-page .card.bg-primary h5,
    .forcing-page .card.bg-primary h6,
    .forcing-page .card.bg-primary p,
    .forcing-page .card.bg-primary span,
    .forcing-page .card.bg-primary div,
    .forcing-page .card.bg-primary i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-success h3,
    .forcing-page .card.bg-success h4,
    .forcing-page .card.bg-success h5,
    .forcing-page .card.bg-success h6,
    .forcing-page .card.bg-success p,
    .forcing-page .card.bg-success span,
    .forcing-page .card.bg-success div,
    .forcing-page .card.bg-success i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-warning h3,
    .forcing-page .card.bg-warning h4,
    .forcing-page .card.bg-warning h5,
    .forcing-page .card.bg-warning h6,
    .forcing-page .card.bg-warning p,
    .forcing-page .card.bg-warning span,
    .forcing-page .card.bg-warning div,
    .forcing-page .card.bg-warning i {
        color: #000000 !important;
    }
    
    .forcing-page .card.bg-info h3,
    .forcing-page .card.bg-info h4,
    .forcing-page .card.bg-info h5,
    .forcing-page .card.bg-info h6,
    .forcing-page .card.bg-info p,
    .forcing-page .card.bg-info span,
    .forcing-page .card.bg-info div,
    .forcing-page .card.bg-info i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-secondary h3,
    .forcing-page .card.bg-secondary h4,
    .forcing-page .card.bg-secondary h5,
    .forcing-page .card.bg-secondary h6,
    .forcing-page .card.bg-secondary p,
    .forcing-page .card.bg-secondary span,
    .forcing-page .card.bg-secondary div,
    .forcing-page .card.bg-secondary i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-dark h3,
    .forcing-page .card.bg-dark h4,
    .forcing-page .card.bg-dark h5,
    .forcing-page .card.bg-dark h6,
    .forcing-page .card.bg-dark p,
    .forcing-page .card.bg-dark span,
    .forcing-page .card.bg-dark div,
    .forcing-page .card.bg-dark i {
        color: #ffffff !important;
    }
}

/* Correção específica para mobile (≤576px) */
@media (max-width: 576px) {
    /* Forçar cores corretas dos cards de status em mobile pequeno */
    .forcing-page .card.bg-primary {
        background: #007bff !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-success {
        background: #28a745 !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-warning {
        background: #ffc107 !important;
        color: #000000 !important;
    }
    
    .forcing-page .card.bg-info {
        background: #17a2b8 !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-secondary {
        background: #6c757d !important;
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-dark {
        background: #343a40 !important;
        color: #ffffff !important;
    }
    
    /* Forçar cores do texto dentro dos cards em mobile pequeno */
    .forcing-page .card.bg-primary h3,
    .forcing-page .card.bg-primary h4,
    .forcing-page .card.bg-primary h5,
    .forcing-page .card.bg-primary h6,
    .forcing-page .card.bg-primary p,
    .forcing-page .card.bg-primary span,
    .forcing-page .card.bg-primary div,
    .forcing-page .card.bg-primary i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-success h3,
    .forcing-page .card.bg-success h4,
    .forcing-page .card.bg-success h5,
    .forcing-page .card.bg-success h6,
    .forcing-page .card.bg-success p,
    .forcing-page .card.bg-success span,
    .forcing-page .card.bg-success div,
    .forcing-page .card.bg-success i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-warning h3,
    .forcing-page .card.bg-warning h4,
    .forcing-page .card.bg-warning h5,
    .forcing-page .card.bg-warning h6,
    .forcing-page .card.bg-warning p,
    .forcing-page .card.bg-warning span,
    .forcing-page .card.bg-warning div,
    .forcing-page .card.bg-warning i {
        color: #000000 !important;
    }
    
    .forcing-page .card.bg-info h3,
    .forcing-page .card.bg-info h4,
    .forcing-page .card.bg-info h5,
    .forcing-page .card.bg-info h6,
    .forcing-page .card.bg-info p,
    .forcing-page .card.bg-info span,
    .forcing-page .card.bg-info div,
    .forcing-page .card.bg-info i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-secondary h3,
    .forcing-page .card.bg-secondary h4,
    .forcing-page .card.bg-secondary h5,
    .forcing-page .card.bg-secondary h6,
    .forcing-page .card.bg-secondary p,
    .forcing-page .card.bg-secondary span,
    .forcing-page .card.bg-secondary div,
    .forcing-page .card.bg-secondary i {
        color: #ffffff !important;
    }
    
    .forcing-page .card.bg-dark h3,
    .forcing-page .card.bg-dark h4,
    .forcing-page .card.bg-dark h5,
    .forcing-page .card.bg-dark h6,
    .forcing-page .card.bg-dark p,
    .forcing-page .card.bg-dark span,
    .forcing-page .card.bg-dark div,
    .forcing-page .card.bg-dark i {
        color: #ffffff !important;
    }
}