/* Tema Escuro Global */
body {
    background-color: #121212 !important;
    color: #ffffff !important;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Estilos para inputs e selects no tema escuro */
.form-control, .form-select {
    background-color: #2a2a2a !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.form-control:focus, .form-select:focus {
    background-color: #2a2a2a !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-control::placeholder {
    color: #aaa !important;
}

/* Opções do select */
.form-select option {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Cards */
.card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
}

/* Labels */
.form-label {
    color: #ffffff !important;
}

/* Badges personalizados para melhor contraste */
.badge {
    font-weight: bold !important;
}

/* Botões outline para tema escuro */
.btn-outline-secondary {
    color: #ffffff !important;
    border-color: #555 !important;
}

.btn-outline-secondary:hover {
    background-color: #555 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

/* Estilos específicos para o modal */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.modal-content {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
}

.modal-header {
    border-bottom: 1px solid #333 !important;
    background-color: #1e1e1e !important;
}

.modal-body {
    background-color: #1e1e1e !important;
}

.modal-footer {
    border-top: 1px solid #333 !important;
    background-color: #1e1e1e !important;
}

.modal-title {
    color: #ffffff !important;
}

/* Animações suaves para o modal */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    transform: none;
}

/* Estilos para elementos dentro do modal */
.modal .alert {
    background-color: #2a2a2a !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

.modal .alert.text-warning {
    border-color: #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.modal .alert.text-success {
    border-color: #28a745 !important;
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.modal .alert.text-danger {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Estilos para cards compactos */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Melhorar botões collapse */
.btn-outline-secondary {
    font-size: 0.8rem !important;
}

.btn-outline-secondary:hover {
    background-color: #555 !important;
    border-color: #555 !important;
    color: #ffffff !important;
}

/* Estilos para badges menores */
.fs-7 {
    font-size: 0.7rem !important;
}

/* Animação do ícone do dropdown */
.btn[data-bs-toggle="collapse"] i {
    transition: transform 0.3s ease;
}

.btn[data-bs-toggle="collapse"][aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Melhorar espaçamento dos cards */
.row.g-3 > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Destaque para nome do cliente */
.card-header h5 {
    font-size: 1.1rem !important;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Ícones de status */
.card-header i[title] {
    cursor: help;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

/* Cabeçalho neutro */
.card-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #333333 100%) !important;
}

/* Responsividade aprimorada */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem !important;
    }
    
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .card-header h5 {
        font-size: 1rem !important;
    }
}

select {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-container button {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.filter-container button {
    background-color: #1d4570;
    color: white;
    cursor: pointer;
}

.filter-container button:hover {
    background-color: #0056b3;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #181a1b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table th,
table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #1d4570;
    color: white;
}

table tr:hover {
    background-color: #2a2d2e;
}

@media screen and (max-width: 768px) {
    .filter-container {
        flex-direction: column;
        align-items: center;
    }

    table th,
    table td {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    .filter-container select,
    .filter-container button {
        width: 100%;
        font-size: 14px;
    }

    table th,
    table td {
        padding: 8px;
    }

    table button {
        width: 100%;
    }
}

.fluent-color--edit-16 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23fluentColorEdit160)' d='M2.657 9.635L9.75 2.542l3.707 3.708l-7.093 7.092l-2.267-1.439z'/%3E%3Cpath fill='url(%23fluentColorEdit161)' d='m2.964 9.328l-.307.307a2.95 2.95 0 0 0-.772 1.355l-.87 3.385a.5.5 0 0 0 .61.609l3.385-.87c.512-.13.98-.398 1.354-.772l.307-.307s-1.285-.3-2.345-1.361s-1.362-2.346-1.362-2.346'/%3E%3Cpath fill='url(%23fluentColorEdit162)' d='M10.529 1.764a2.621 2.621 0 1 1 3.707 3.707l-1.908 1.908l-3.707-3.707z'/%3E%3Cpath fill='url(%23fluentColorEdit163)' d='M8.266 4.026s.295 1.291 1.356 2.352a5.4 5.4 0 0 0 2.351 1.356L13.4 6.308s-1.29-.298-2.35-1.358A5.4 5.4 0 0 1 9.692 2.6z'/%3E%3Cdefs%3E%3ClinearGradient id='fluentColorEdit160' x1='8.631' x2='10.281' y1='5.563' y2='10.095' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffa43d'/%3E%3Cstop offset='1' stop-color='%23fb5937'/%3E%3C/linearGradient%3E%3ClinearGradient id='fluentColorEdit161' x1='.187' x2='4.275' y1='10.908' y2='14.972' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.255' stop-color='%23ffd394'/%3E%3Cstop offset='1' stop-color='%23ff921f'/%3E%3C/linearGradient%3E%3ClinearGradient id='fluentColorEdit162' x1='13.669' x2='11.316' y1='2.324' y2='4.537' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23f97dbd'/%3E%3Cstop offset='1' stop-color='%23dd3ce2'/%3E%3C/linearGradient%3E%3ClinearGradient id='fluentColorEdit163' x1='10.921' x2='7.295' y1='6.114' y2='4.528' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ff921f'/%3E%3Cstop offset='1' stop-color='%23ffe994'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
}

.logos--whatsapp-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 258'%3E%3Cdefs%3E%3ClinearGradient id='logosWhatsappIcon0' x1='50%25' x2='50%25' y1='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%231faf38'/%3E%3Cstop offset='100%25' stop-color='%2360d669'/%3E%3C/linearGradient%3E%3ClinearGradient id='logosWhatsappIcon1' x1='50%25' x2='50%25' y1='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23f9f9f9'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23logosWhatsappIcon0)' d='M5.463 127.456c-.006 21.677 5.658 42.843 16.428 61.499L4.433 252.697l65.232-17.104a123 123 0 0 0 58.8 14.97h.054c67.815 0 123.018-55.183 123.047-123.01c.013-32.867-12.775-63.773-36.009-87.025c-23.23-23.25-54.125-36.061-87.043-36.076c-67.823 0-123.022 55.18-123.05 123.004'/%3E%3Cpath fill='url(%23logosWhatsappIcon1)' d='M1.07 127.416c-.007 22.457 5.86 44.38 17.014 63.704L0 257.147l67.571-17.717c18.618 10.151 39.58 15.503 60.91 15.511h.055c70.248 0 127.434-57.168 127.464-127.423c.012-34.048-13.236-66.065-37.3-90.15C194.633 13.286 162.633.014 128.536 0C58.276 0 1.099 57.16 1.071 127.416m40.24 60.376l-2.523-4.005c-10.606-16.864-16.204-36.352-16.196-56.363C22.614 69.029 70.138 21.52 128.576 21.52c28.3.012 54.896 11.044 74.9 31.06c20.003 20.018 31.01 46.628 31.003 74.93c-.026 58.395-47.551 105.91-105.943 105.91h-.042c-19.013-.01-37.66-5.116-53.922-14.765l-3.87-2.295l-40.098 10.513z'/%3E%3Cpath fill='%23fff' d='M96.678 74.148c-2.386-5.303-4.897-5.41-7.166-5.503c-1.858-.08-3.982-.074-6.104-.074c-2.124 0-5.575.799-8.492 3.984c-2.92 3.188-11.148 10.892-11.148 26.561s11.413 30.813 13.004 32.94c1.593 2.123 22.033 35.307 54.405 48.073c26.904 10.609 32.379 8.499 38.218 7.967c5.84-.53 18.844-7.702 21.497-15.139c2.655-7.436 2.655-13.81 1.859-15.142c-.796-1.327-2.92-2.124-6.105-3.716s-18.844-9.298-21.763-10.361c-2.92-1.062-5.043-1.592-7.167 1.597c-2.124 3.184-8.223 10.356-10.082 12.48c-1.857 2.129-3.716 2.394-6.9.801c-3.187-1.598-13.444-4.957-25.613-15.806c-9.468-8.442-15.86-18.867-17.718-22.056c-1.858-3.184-.199-4.91 1.398-6.497c1.431-1.427 3.186-3.719 4.78-5.578c1.588-1.86 2.118-3.187 3.18-5.311c1.063-2.126.531-3.986-.264-5.579c-.798-1.593-6.987-17.343-9.819-23.64'/%3E%3C/svg%3E");
}