/* =======================================================
   BACKOFFICE INTERFACE IMPROVEMENTS - Enhanced Styling
   ======================================================= */

/* IMPORTANTE: Este CSS SÓ deve afetar elementos dentro de containers de backoffice */

/* =======================================================
   OVERRIDE TOTAL PARA SITE.CSS - ESPECIFICIDADE MÁXIMA
   ======================================================= */

/* FORÇAR AZUL BOOTSTRAP EM QUALQUER CONTEXTO DO BACKOFFICE */
/* Páginas que contêm tabelas ou btn-groups = backoffice automático */
html body .container table .btn-primary:not(.btn-primary-used),
html body .container .table .btn-primary:not(.btn-primary-used),
html body .container .btn-group .btn-primary:not(.btn-primary-used),
html body .container:has(table) .btn-primary:not(.btn-primary-used),
html body .container:has(.btn-group) .btn-primary:not(.btn-primary-used),
html body .container:has(.table) .btn-primary:not(.btn-primary-used) {
    background-color: #0d6efd !important; /* AZUL BOOTSTRAP FORÇADO */
    border-color: #0d6efd !important;
    color: #ffffff !important;
    background-image: none !important;
}

html body .container table .btn-primary:not(.btn-primary-used):hover,
html body .container .table .btn-primary:not(.btn-primary-used):hover,
html body .container .btn-group .btn-primary:not(.btn-primary-used):hover,
html body .container:has(table) .btn-primary:not(.btn-primary-used):hover,
html body .container:has(.btn-group) .btn-primary:not(.btn-primary-used):hover,
html body .container:has(.table) .btn-primary:not(.btn-primary-used):hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
}

/* FORÇAR AMARELO BOOTSTRAP PARA WARNING BUTTONS */
html body .container table .btn-warning,
html body .container .table .btn-warning,
html body .container .btn-group .btn-warning,
html body .container:has(table) .btn-warning,
html body .container:has(.btn-group) .btn-warning,
html body .container:has(.table) .btn-warning {
    background-color: #ffc107 !important; /* AMARELO BOOTSTRAP FORÇADO */
    border-color: #ffc107 !important;
    color: #000000 !important;
}

/* FORÇAR VERMELHO BOOTSTRAP PARA DANGER BUTTONS */
html body .container table .btn-danger,
html body .container .table .btn-danger,
html body .container .btn-group .btn-danger,
html body .container:has(table) .btn-danger,
html body .container:has(.btn-group) .btn-danger,
html body .container:has(.table) .btn-danger {
    background-color: #dc3545 !important; /* VERMELHO BOOTSTRAP FORÇADO */
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* FORÇAR AZUL BOOTSTRAP PARA TEXT-PRIMARY NO BACKOFFICE */
html body .container:has(table) .text-primary,
html body .container:has(.btn-group) .text-primary,
html body .container:has(.table) .text-primary,
html body .container:has(table) h1,
html body .container:has(table) h2,
html body .container:has(table) h3 {
    color: #0d6efd !important; /* AZUL BOOTSTRAP FORÇADO */
}

/* OVERRIDE PARA URLs ESPECÍFICAS DO BACKOFFICE */
/* Aplicar quando a URL contém keywords do backoffice */

/* Regra JavaScript vai adicionar classe 'is-backoffice' no body */
body.is-backoffice .btn-primary:not(.btn-primary-used),
body.is-backoffice .text-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

body.is-backoffice .text-primary {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #0d6efd !important;
}

body.is-backoffice .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000000 !important;
}

body.is-backoffice .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* =======================================================
   CORREÇÃO DE CORES - USAR CORES BOOTSTRAP PADRÃO - MÁXIMA ESPECIFICIDADE
   ======================================================= */

/* REGRAS COM MÁXIMA ESPECIFICIDADE PARA SOBREPOR QUALQUER OUTRO CSS */
/* Aplicar a TODAS as páginas que contenham URLs de backoffice */

/* BOTÕES PRIMARY - AZUL BOOTSTRAP (MÁXIMA PRIORIDADE) */
.container .btn-primary:not(.btn-primary-used),
.table .btn-primary:not(.btn-primary-used),
.btn-group .btn-primary:not(.btn-primary-used),
button.btn-primary:not(.btn-primary-used),
a.btn.btn-primary:not(.btn-primary-used),
input[type="submit"].btn-primary:not(.btn-primary-used),
body[data-page-type="backoffice"] .btn-primary:not(.btn-primary-used),
body.backoffice-page .btn-primary:not(.btn-primary-used),
.backoffice-container .btn-primary:not(.btn-primary-used) {
    background-color: #0d6efd !important; /* Azul Bootstrap */
    border-color: #0d6efd !important;
    color: #ffffff !important;
    background-image: none !important;
}

.container .btn-primary:not(.btn-primary-used):hover,
.table .btn-primary:not(.btn-primary-used):hover,
.btn-group .btn-primary:not(.btn-primary-used):hover,
button.btn-primary:not(.btn-primary-used):hover,
a.btn.btn-primary:not(.btn-primary-used):hover,
input[type="submit"].btn-primary:not(.btn-primary-used):hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
}

.container .btn-primary:not(.btn-primary-used):focus,
.table .btn-primary:not(.btn-primary-used):focus,
.btn-group .btn-primary:not(.btn-primary-used):focus,
button.btn-primary:not(.btn-primary-used):focus,
a.btn.btn-primary:not(.btn-primary-used):focus,
input[type="submit"].btn-primary:not(.btn-primary-used):focus {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* BOTÕES WARNING - AMARELO BOOTSTRAP (para Images) */
.container .btn-warning,
.table .btn-warning,
.btn-group .btn-warning,
button.btn-warning,
a.btn.btn-warning,
body[data-page-type="backoffice"] .btn-warning,
body.backoffice-page .btn-warning,
.backoffice-container .btn-warning {
    background-color: #ffc107 !important; /* Amarelo Bootstrap */
    border-color: #ffc107 !important;
    color: #000000 !important;
}

.container .btn-warning:hover,
.table .btn-warning:hover,
.btn-group .btn-warning:hover,
button.btn-warning:hover,
a.btn.btn-warning:hover {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
    color: #000000 !important;
}

/* BOTÕES DANGER - VERMELHO BOOTSTRAP (para Delete) */
.container .btn-danger,
.table .btn-danger,
.btn-group .btn-danger,
button.btn-danger,
a.btn.btn-danger,
body[data-page-type="backoffice"] .btn-danger,
body.backoffice-page .btn-danger,
.backoffice-container .btn-danger {
    background-color: #dc3545 !important; /* Vermelho Bootstrap */
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.container .btn-danger:hover,
.table .btn-danger:hover,
.btn-group .btn-danger:hover,
button.btn-danger:hover,
a.btn.btn-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
}

/* BOTÕES SECONDARY - CINZA BOOTSTRAP */
.container .btn-secondary,
.table .btn-secondary,
.btn-group .btn-secondary,
button.btn-secondary,
a.btn.btn-secondary,
body[data-page-type="backoffice"] .btn-secondary,
body.backoffice-page .btn-secondary,
.backoffice-container .btn-secondary {
    background-color: #6c757d !important; /* Cinza Bootstrap */
    border-color: #6c757d !important;
    color: #ffffff !important;
}

.container .btn-secondary:hover,
.table .btn-secondary:hover,
.btn-group .btn-secondary:hover,
button.btn-secondary:hover,
a.btn.btn-secondary:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
    color: #ffffff !important;
}

/* BOTÕES SUCCESS - VERDE BOOTSTRAP */
.container .btn-success,
.table .btn-success,
.btn-group .btn-success,
button.btn-success,
a.btn.btn-success,
body[data-page-type="backoffice"] .btn-success,
body.backoffice-page .btn-success,
.backoffice-container .btn-success {
    background-color: #198754 !important; /* Verde Bootstrap */
    border-color: #198754 !important;
    color: #ffffff !important;
}

.container .btn-success:hover,
.table .btn-success:hover,
.btn-group .btn-success:hover,
button.btn-success:hover,
a.btn.btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: #ffffff !important;
}

/* ELEMENTOS TEXT-PRIMARY - AZUL BOOTSTRAP */
.container .text-primary,
body[data-page-type="backoffice"] .text-primary,
body.backoffice-page .text-primary,
.backoffice-container .text-primary {
    color: #0d6efd !important; /* Azul Bootstrap padrão */
}

/* TÍTULOS NO BACKOFFICE - PRETO PADRÃO */
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6,
body[data-page-type="backoffice"] h1,
body[data-page-type="backoffice"] h2,
body[data-page-type="backoffice"] h3,
body.backoffice-page h1,
body.backoffice-page h2,
body.backoffice-page h3 {
    color: #212529 !important; /* Preto padrão */
}

/* OVERRIDE COMPLETO PARA PÁGINAS QUE CONTÊM TABELAS (BACKOFFICE) */
body:has(table) .btn-primary:not(.btn-primary-used),
body:has(.btn-group) .btn-primary:not(.btn-primary-used),
body:has(.table) .btn-primary:not(.btn-primary-used) {
    background-color: #0d6efd !important; /* Azul Bootstrap */
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

body:has(table) .btn-warning,
body:has(.btn-group) .btn-warning,
body:has(.table) .btn-warning {
    background-color: #ffc107 !important; /* Amarelo Bootstrap */
    border-color: #ffc107 !important;
    color: #000000 !important;
}

body:has(table) .btn-danger,
body:has(.btn-group) .btn-danger,
body:has(.table) .btn-danger {
    background-color: #dc3545 !important; /* Vermelho Bootstrap */
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

body:has(table) .text-primary,
body:has(.btn-group) .text-primary,
body:has(.table) .text-primary {
    color: #0d6efd !important; /* Azul Bootstrap padrão */
}

/* =====================================================
   INPUT TEXT - Darker and More Prominent Styling
   ===================================================== */
.backoffice-form .form-control,
.backoffice-form input[type="text"],
.backoffice-form input[type="email"],
.backoffice-form input[type="password"],
.backoffice-form input[type="number"],
.backoffice-form input[type="url"],
.backoffice-form input[type="tel"],
.backoffice-form textarea,
.backend-form-card .form-control,
.backend-form-card input[type="text"],
.backend-form-card input[type="email"],
.backend-form-card input[type="password"],
.backend-form-card input[type="number"],
.backend-form-card input[type="url"],
.backend-form-card input[type="tel"],
.backend-form-card textarea,
.image-upload-container .form-control,
.image-upload-container input[type="text"],
.image-upload-container input[type="email"],
.image-upload-container input[type="password"],
.image-upload-container input[type="number"],
.image-upload-container input[type="url"],
.image-upload-container input[type="tel"],
.image-upload-container textarea {
    background-color: #f8f9fa !important;
    border: 2px solid #6c757d !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #212529 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.backoffice-form .form-control:focus,
.backoffice-form input[type="text"]:focus,
.backoffice-form input[type="email"]:focus,
.backoffice-form input[type="password"]:focus,
.backoffice-form input[type="number"]:focus,
.backoffice-form input[type="url"]:focus,
.backoffice-form input[type="tel"]:focus,
.backoffice-form textarea:focus,
.backend-form-card .form-control:focus,
.backend-form-card input[type="text"]:focus,
.backend-form-card input[type="email"]:focus,
.backend-form-card input[type="password"]:focus,
.backend-form-card input[type="number"]:focus,
.backend-form-card input[type="url"]:focus,
.backend-form-card input[type="tel"]:focus,
.backend-form-card textarea:focus,
.image-upload-container .form-control:focus,
.image-upload-container input[type="text"]:focus,
.image-upload-container input[type="email"]:focus,
.image-upload-container input[type="password"]:focus,
.image-upload-container input[type="number"]:focus,
.image-upload-container input[type="url"]:focus,
.image_upload-container input[type="tel"]:focus,
.image-upload-container textarea:focus {
    background-color: #ffffff !important;
    border-color: #0d6efd !important;
    color: #212529 !important;
    font-weight: 500 !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.backoffice-form .form-control:hover:not(:focus),
.backoffice-form input:hover:not(:focus),
.backoffice-form textarea:hover:not(:focus),
.backend-form-card .form-control:hover:not(:focus),
.backend-form-card input:hover:not(:focus),
.backend-form-card textarea:hover:not(:focus),
.image-upload-container .form-control:hover:not(:focus),
.image-upload-container input:hover:not(:focus),
.image-upload-container textarea:hover:not(:focus) {
    border-color: #495057 !important;
    background-color: #ffffff !important;
}

/* =====================================================
   INPUT SELECT - Clear Dropdown Appearance with Arrow
   ===================================================== */
.backoffice-form select.form-control,
.backoffice-form .form-select,
.backoffice-form select,
.backend-form-card select.form-control,
.backend-form-card .form-select,
.backend-form-card select,
.image-upload-container select.form-control,
.image-upload-container .form-select,
.image-upload-container select {
    background-color: #e9ecef !important;
    border: 3px solid #495057 !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #212529 !important;
    font-weight: 600 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.backoffice-form select.form-control:focus,
.backoffice-form .form-select:focus,
.backoffice-form select:focus,
.backend-form-card select.form-control:focus,
.backend-form-card .form-select:focus,
.backend-form-card select:focus,
.image-upload-container select.form-control:focus,
.image-upload-container .form-select:focus,
.image-upload-container select:focus {
    background-color: #ffffff !important;
    border-color: #0d6efd !important;
    color: #212529 !important;
    font-weight: 600 !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230d6efd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

.backoffice-form select.form-control:hover:not(:focus),
.backoffice-form .form-select:hover:not(:focus),
.backoffice-form select:hover:not(:focus),
.backend-form-card select.form-control:hover:not(:focus),
.backend-form-card .form-select:hover:not(:focus),
.backend-form-card select:hover:not(:focus),
.image-upload-container select.form-control:hover:not(:focus),
.image-upload-container .form-select:hover:not(:focus),
.image-upload-container select:hover:not(:focus) {
    border-color: #212529 !important;
    background-color: #f8f9fa !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* =====================================================
   FILE INPUT STYLING
   ===================================================== */
.backoffice-form input[type="file"],
.backend-form-card input[type="file"],
.image-upload-container input[type="file"] {
    background-color: #f8f9fa !important;
    border: 2px dashed #6c757d !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    color: #212529 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.backoffice-form input[type="file"]:hover,
.backend-form-card input[type="file"]:hover,
.image-upload-container input[type="file"]:hover {
    border-color: #495057 !important;
    background-color: #e9ecef !important;
}

.backoffice-form input[type="file"]:focus,
.backend-form-card input[type="file"]:focus,
.image-upload-container input[type="file"]:focus {
    border-color: #0d6efd !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* =====================================================
   CHECKBOX AND FORM SWITCHES
   ===================================================== */
.backoffice-form .form-check-input,
.backend-form-card .form-check-input,
.image-upload-container .form-check-input {
    width: 1.25em !important;
    height: 1.25em !important;
    border: 2px solid #6c757d !important;
    border-radius: 0.25rem !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

.backoffice-form .form-check-input:checked,
.backend-form-card .form-check-input:checked,
.image-upload-container .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.backoffice-form .form-check-input:focus,
.backend-form-card .form-check-input:focus,
.image-upload-container .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: 0 !important;
}

.backoffice-form .form-check-label,
.backend-form-card .form-check-label,
.image-upload-container .form-check-label {
    font-weight: 500 !important;
    color: #495057 !important;
    margin-left: 0.5rem !important;
}

/* =====================================================
   BUTTON STYLING - CORES BOOTSTRAP PADRÃO
   ===================================================== */

/* Base button styling - ONLY INSIDE BACKOFFICE CONTAINERS */
.backoffice-form .btn,
.backend-form-card .btn,
.image-upload-container .btn {
    padding: 0.75rem 1.5rem !important;
    font-weight: 700 !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-width: 1px !important; /* Bootstrap padrão usa 1px */
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* =====================================================
   FORM VALIDATION
   ===================================================== */
.backoffice-form .validation-message,
.backoffice-form .field-validation-error,
.backend-form-card .validation-message,
.backend-form-card .field-validation-error,
.image-upload-container .validation-message,
.image-upload-container .field-validation-error {
    color: #dc3545 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    display: block !important;
    font-weight: 500 !important;
}

.backoffice-form .input-validation-error,
.backend-form-card .input-validation-error,
.image-upload-container .input-validation-error {
    border-color: #dc3545 !important;
    background-color: #f8d7da !important;
}

.backoffice-form .validation-summary-errors,
.backend-form-card .validation-summary-errors,
.image-upload-container .validation-summary-errors {
    background-color: #f8d7da !important;
    border: 2px solid #f5c2c7 !important;
    border-radius: 0.375rem !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.backoffice-form .validation-summary-errors ul,
.backend-form-card .validation-summary-errors ul,
.image-upload-container .validation-summary-errors ul {
    margin-bottom: 0 !important;
    padding-left: 1.25rem !important;
}

.backoffice-form .validation-summary-errors li,
.backend-form-card .validation-summary-errors li,
.image-upload-container .validation-summary-errors li {
    color: #721c24 !important;
    font-weight: 500 !important;
}

/* =====================================================
   TABLES AND DATA DISPLAY - ONLY BACKOFFICE
   ===================================================== */
.backoffice-form .table,
.backend-form-card .table,
.image-upload-container .table {
    border: 2px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
}

.backoffice-form .table th,
.backend-form-card .table th,
.image-upload-container .table th {
    background-color: #e9ecef !important;
    border-bottom: 2px solid #dee2e6 !important;
    font-weight: 700 !important;
    color: #495057 !important;
    padding: 1rem 0.75rem !important;
}

.backoffice-form .table td,
.backend-form-card .table td,
.image-upload-container .table td {
    vertical-align: middle !important;
    padding: 0.75rem !important;
    border-color: #dee2e6 !important;
}

/* =====================================================
   TABLE BUTTON STYLING - Smaller but still high contrast - ONLY BACKOFFICE
   ===================================================== */
.backoffice-form .table .btn,
.backend-form-card .table .btn,
.image-upload-container .table .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0 !important;
}

.backoffice-form .table .btn:last-child,
.backend-form-card .table .btn:last-child,
.image-upload-container .table .btn:last-child {
    margin-right: 0 !important;
}

/* =====================================================
   DISABLED STATES - ONLY BACKOFFICE
   ===================================================== */
.backoffice-form .form-control:disabled,
.backoffice-form input:disabled,
.backoffice-form select:disabled,
.backoffice-form textarea:disabled,
.backend-form-card .form-control:disabled,
.backend-form-card input:disabled,
.backend-form-card select:disabled,
.backend-form-card textarea:disabled,
.image-upload-container .form-control:disabled,
.image-upload-container input:disabled,
.image-upload-container select:disabled,
.image-upload-container textarea:disabled {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

/* Normaliza a altura do botão de toggle no login - APENAS BACKOFFICE */
.backoffice-form .input-group .btn.password-toggle-btn,
.backoffice-form .input-group .btn[aria-hidden="false"],
.backend-form-card .input-group .btn.password-toggle-btn,
.backend-form-card .input-group .btn[aria-hidden="false"],
.image-upload-container .input-group .btn.password-toggle-btn,
.image-upload-container .input-group .btn[aria-hidden="false"] {
    padding: .375rem .75rem !important;
    min-width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}