/** Django-specific fixes for AdminLTE v4 / Bootstrap 5 UI **/

/* ============================================================================
   BASE FONT SIZE - Match AdminLTE v3 sizing (0.875rem / 14px)
   AdminLTE v4 defaults to 1rem (16px) which is too large for an admin UI.
   ========================================================================== */
@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Thin-App.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-ThinItalic-App.ttf") format("truetype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Extralight-App.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-ExtralightItalic-App.ttf") format("truetype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Light-App.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-LightItalic-App.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Regular-App.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-RegularItalic-App.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Medium-App.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-MediumItalic-App.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Semibold-App.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-SemiboldItalic-App.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Bold-App.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-BoldItalic-App.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Black-App.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-BlackItalic-App.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-Super-App.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik App";
    src: url("../fonts/Graphik-SuperItalic-App.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* :root {
    --bs-body-font-size: 0.875rem;
} */
:root {
    /* ========================================================================
       BOOTSTRAP OVERRIDES (Ajuste para o fundo do Base HTML / Login)
       ======================================================================== */
    --bs-body-font-size: 0.875rem;
    --bs-body-bg: var(--empresa-grafite); /* Define o fundo global como Grafite */
    --bs-body-color: var(--empresa-cinza-1); /* Define o texto padrão como Branco */

    /* ========================================================================
       IDENTIDADE VISUAL DA EMPRESA
       ======================================================================== */
    --empresa-branco: #FFFFFF;
    --empresa-grafite: #333333;
    --empresa-azul: #2D5BFF;
    --empresa-verde: #02DE7F;

    --empresa-cinza-1: #F2F2F2;
    --empresa-cinza-2: #E0E0E0;
    --empresa-cinza-3: #BDBDBD;
    --empresa-cinza-4: #828282;

    /* ========================================================================
       TIPOGRAFIA
       ======================================================================== */
    --empresa-font: "Graphik App", "Graphik", Arial, sans-serif;
}


/* ============================================================================
   APLICAÇÃO DE CORES GLOBAIS DA EMPRESA
   ========================================================================== */
body, 
.app-wrapper {
    background-color: var(--empresa-grafite) !important;
    color: var(--empresa-cinza-1) !important; /* Texto claro sobre fundo escuro */
    font-family: var(--empresa-font);
}

/* Garante que os cards e áreas de conteúdo internos mantenham contraste adequado */
.content-wrapper {
    background-color: var(--empresa-grafite) !important;
}

/* ============================================================================
   LOGIN - IDENTIDADE VISUAL DA EMPRESA
   ========================================================================== */

/* --------------------------------------------------------------------------
   Página
   -------------------------------------------------------------------------- */

body.login-page {
    min-height: 100vh;

    background-color: var(--empresa-grafite) !important;

    font-family: var(--empresa-font);
}


/* --------------------------------------------------------------------------
   Container principal do login
   -------------------------------------------------------------------------- */

body.login-page .login-box {
    width: 400px;
    max-width: calc(100% - 2rem);
}


/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

body.login-page .login-logo {
    margin-bottom: 1.5rem;
    padding: 0;
}

body.login-page .logo-container {
    width: 100%;
}


/* Imagem do logo */

body.login-page .login-logo img {
    display: block;

    max-width: 100%;
    max-height: 120px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* --------------------------------------------------------------------------
   Texto abaixo da imagem
   -------------------------------------------------------------------------- */

body.login-page .logo-text {
    display: block;

    margin-top: 0.5rem;
    margin-bottom: 0;

    font-family: var(--empresa-font);

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;

    color: var(--empresa-branco) !important;

    text-align: center;
}


/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

body.login-page .card {
    margin-bottom: 0;

    background-color: var(--empresa-branco);

    border: 0;
    border-radius: 12px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


body.login-page .login-card-body {
    padding: 2rem;
}


/* --------------------------------------------------------------------------
   Títulos e textos
   -------------------------------------------------------------------------- */

body.login-page .login-card-body,
body.login-page .login-card-body label {
    font-family: var(--empresa-font);
}

body.login-page .login-card-body label {
    color: var(--empresa-grafite);

    font-size: 0.875rem;
    font-weight: 500;
}


/* --------------------------------------------------------------------------
   Campos de formulário
   -------------------------------------------------------------------------- */

body.login-page .form-control {
    min-height: 44px;

    font-family: var(--empresa-font);
    font-size: 0.875rem;

    color: var(--empresa-grafite);

    background-color: var(--empresa-branco);

    border: 1px solid var(--empresa-cinza-3);
    border-radius: 8px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


body.login-page .form-control:focus {
    color: var(--empresa-grafite);

    background-color: var(--empresa-branco);

    border-color: var(--empresa-azul);

    box-shadow:
        0 0 0 0.2rem rgba(45, 91, 255, 0.15);
}


/* Placeholder */

body.login-page .form-control::placeholder {
    color: var(--empresa-cinza-4);
}


/* --------------------------------------------------------------------------
   Botão principal
   -------------------------------------------------------------------------- */

body.login-page .btn-primary {
    min-height: 44px;

    padding: 0.625rem 1rem;

    font-family: var(--empresa-font);
    font-size: 0.875rem;
    font-weight: 500;

    color: var(--empresa-branco);

    background-color: var(--empresa-azul);
    border-color: var(--empresa-azul);

    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


body.login-page .btn-primary:hover {
    background-color: #244DE0;
    border-color: #244DE0;

    box-shadow:
        0 4px 12px rgba(45, 91, 255, 0.25);

    transform: translateY(-1px);
}


body.login-page .btn-primary:focus {
    background-color: var(--empresa-azul);
    border-color: var(--empresa-azul);

    box-shadow:
        0 0 0 0.2rem rgba(45, 91, 255, 0.25);
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

body.login-page a {
    font-family: var(--empresa-font);

    color: var(--empresa-azul);

    transition: color 0.2s ease;
}


body.login-page a:hover {
    color: #244DE0;
}


/* --------------------------------------------------------------------------
   Mensagens / alertas
   -------------------------------------------------------------------------- */

body.login-page .alert {
    border-radius: 8px;

    font-family: var(--empresa-font);
    font-size: 0.875rem;
}


/* --------------------------------------------------------------------------
   Responsividade
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {

    body.login-page .login-box {
        width: 100%;
        max-width: calc(100% - 2rem);
    }

    body.login-page .login-card-body {
        padding: 1.5rem;
    }

    body.login-page .login-logo img {
        max-height: 100px;
    }
}

/* ============================================================================
   GLOBAL LINK STYLING - Remove default Bootstrap 5 underlines in admin
   ========================================================================== */
.app-wrapper a {
    text-decoration: none;
}

/* ============================================================================
   LOGIN LOGO - Light/Dark Mode Support
   ========================================================================== */
.login-logo .logo-dark { display: none; }
.login-logo .logo-light { display: inline; }
html[data-bs-theme="dark"] .login-logo .logo-light { display: none; }
html[data-bs-theme="dark"] .login-logo .logo-dark { display: inline; }


/* ============================================================================
   DJANGO FORM INLINES - Hide empty extra form rows
   ========================================================================== */
.empty-form {
    display: none !important;
}

/* Django's .form-row conflicts with Bootstrap - ensure table display */
.table tr.form-row {
    display: table-row;
}


/* ============================================================================
   DJANGO FORM FIELDS - Style Django's widget classes to match Bootstrap
   ========================================================================== */
.vTextField,
.vLargeTextField,
.vURLField,
.vIntegerField,
.vBigIntegerField,
.vForeignKeyRawIdAdminField,
.vDateField,
.vTimeField {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: var(--bs-body-font-size);
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    color: var(--bs-body-color);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.vTextField:focus,
.vLargeTextField:focus,
.vURLField:focus,
.vIntegerField:focus,
.vBigIntegerField:focus,
.vForeignKeyRawIdAdminField:focus,
.vDateField:focus,
.vTimeField:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.vDateField,
.vTimeField {
    display: inline-block;
    min-width: 200px;
}

.vLargeTextField {
    height: auto;
    min-height: calc(2.25rem + 2px);
}

/* Dark mode theming for bare inputs (no .form-control class) */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="password"],
textarea {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Style Django's plain select elements to match Bootstrap 5 form-select */
select:not(.form-select):not([multiple]) {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: var(--bs-body-font-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    appearance: none;
    background-color: var(--bs-body-bg);
    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='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

select:not(.form-select):not([multiple]):focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

html[data-bs-theme="dark"] select:not(.form-select):not([multiple]) {
    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='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Inline selects (action bars) should not be full width */
.actions select {
    width: auto;
    display: inline-block;
}


/* ============================================================================
   DJANGO CALENDAR & CLOCK WIDGETS
   ========================================================================== */
.calendarbox,
.clockbox {
    margin: 5px auto;
    font-size: 12px;
    width: 19em;
    text-align: center;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    box-shadow: var(--bs-box-shadow-sm);
    overflow: hidden;
    z-index: 1000;
}

.clockbox {
    width: auto;
}

.calendar table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
}

.calendar th {
    padding: 8px 5px;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 400;
    font-size: 12px;
}

.calendar td {
    font-weight: 400;
    font-size: 12px;
    padding: 0;
    border-top: 1px solid var(--bs-border-color);
}

.calendar td.selected a {
    background: var(--bs-primary);
    color: #fff !important;
}

.calendar td a,
.timelist a {
    display: block;
    padding: 6px;
}

.calendar td a:hover,
.timelist a:hover {
    background: var(--bs-primary);
    color: white;
}

.date-icon::before,
.clock-icon::before {
    font-family: "Font Awesome 5 Free" !important;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    content: "\f073";
}

.clock-icon::before {
    content: "\f017";
}


/* ============================================================================
   DJANGO RELATED WIDGET - FK selects with edit/add/view icons
   ========================================================================== */
.related-widget-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.related-widget-wrapper .select2-container {
    flex: 1;
    min-width: 0;
}

.related-widget-wrapper-link {
    flex-shrink: 0;
}


/* ============================================================================
   DJANGO SIDEBAR - Fixed layout scrolling
   ========================================================================== */
.layout-fixed #jazzy-sidebar {
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}

.layout-fixed #jazzy-sidebar::-webkit-scrollbar {
    width: 0;
}

#jazzy-sidebar .nav-sidebar > .nav-item {
    width: 100%;
}


/* ============================================================================
   SELECT2 - Dark theme support
   ========================================================================== */
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}

/* SELECT2 - Border theming */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
}


/* ============================================================================
   FORM SPACING - Django form-row / form-group
   ========================================================================== */
.form-row {
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.inline-related .form-row,
.inline-related .form-group {
    padding: 0.5rem;
}


/* ============================================================================
   HORIZONTAL SELECTORS - filter_horizontal / filter_vertical (permissions)
   ========================================================================== */
.selector {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.selector-available,
.selector-chosen {
    flex: 1;
    min-width: 0;
}

.selector ul.selector-chooser {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    margin: 0;
    list-style: none;
    gap: 0.25rem;
}

.selector ul.selector-chooser li {
    list-style: none;
}

.selector ul.selector-chooser a {
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    color: var(--bs-body-color);
    font-size: 0;
}

.selector ul.selector-chooser a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.75rem;
}

.selector ul.selector-chooser a.selector-chooseall::before { content: "\f101"; }
.selector ul.selector-chooser a.selector-add::before { content: "\f054"; }
.selector ul.selector-chooser a.selector-remove::before { content: "\f053"; }
.selector ul.selector-chooser a.selector-clearall::before { content: "\f100"; }

.selector ul.selector-chooser a:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.selector select {
    width: 100%;
    height: 15em;
    padding: .25rem .5rem;
    font-size: var(--bs-body-font-size);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 .375rem .375rem;
    border-top: none;
}

.selector-available h2,
.selector-chosen h2 {
    margin: 0;
    padding: 0.375rem 0.75rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem .375rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.selector .selector-filter {
    padding: 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-top: none;
    background-color: var(--bs-body-bg);
}

.selector .selector-filter label {
    display: none;
}

.selector .selector-filter input {
    width: 100%;
    padding: .25rem .5rem;
    font-size: var(--bs-body-font-size);
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .selector select option:checked {
    background-color: var(--bs-primary);
    color: var(--bs-white);
}


/* ============================================================================
   ACTIONS PANEL - Detail page sidebar (save, delete, history, etc.)
   ========================================================================== */
#jazzy-actions {
    position: sticky;
    top: 4rem;
}

#jazzy-actions .d-flex {
    flex-direction: column;
}

#jazzy-actions .d-flex .btn,
#jazzy-actions .d-flex input[type="submit"] {
    width: 100%;
}

#jazzy-actions .object-tools {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

#jazzy-actions .object-tools li {
    margin-bottom: 0;
}

#jazzy-actions .object-tools li a {
    display: block;
    padding: .25rem .5rem;
    font-size: var(--bs-body-font-size);
    text-align: center;
    border-radius: .375rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

#jazzy-actions .object-tools li a:hover {
    background-color: var(--bs-tertiary-bg);
}


/* ============================================================================
   TAB CONTENT - Prevent inline overflow in tabbed change forms
   ========================================================================== */
.tab-content {
    overflow-x: auto;
}

.tab-pane .inline-related {
    overflow-x: auto;
}


/* ============================================================================
   HELP TEXT AND ERRORS
   ========================================================================== */
.help-block,
.helptext {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    margin-top: 0.25rem;
    display: block;
}

.help-block.red,
.errorlist {
    color: var(--bs-danger);
    font-size: 0.8125rem;
}

/* Required field indicator */
.text-red {
    color: var(--bs-danger);
}

/* Readonly fields */
.readonly {
    padding: .375rem .75rem;
    background-color: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    color: var(--bs-secondary-color);
}


/* ============================================================================
   CHANGELIST - Checkbox select-all column
   ========================================================================== */
.djn-checkbox-select-all {
    width: 1.5em;
    text-align: center;
    padding-right: 0 !important;
}

.table td.action-checkbox {
    width: 1.5em;
    text-align: center;
    padding-right: 0 !important;
}


/* ============================================================================
   USER PANEL - Sidebar user info (not a native AdminLTE v4 component)
   ========================================================================== */
.user-panel {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-panel .info {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
}


/* ============================================================================
   CORREÇÃO DE TEXTOS NO LOGIN (TEXTOS ESCUROS NO FUNDO GRAFITE)
   ========================================================================== */
/* Deixa o "Bem-vindo" (e outras mensagens da caixa) branco */
body.login-page .login-box-msg {
    color: var(--empresa-branco) !important;
    font-size: 1rem;
    font-weight: 500;
}

/* Garante que os links (ex: "Esqueceu sua senha?") fiquem visíveis */
body.login-page a,
body.login-page .form-check-label {
    color: var(--empresa-cinza-1) !important;
}

body.login-page a:hover {
    color: var(--empresa-branco) !important;
    text-decoration: underline !important;
}

/* ============================================================================
   CORREÇÃO DA LOGO DUPLICADA NO LOGIN
   ========================================================================== */
/* Como a página de login agora é SEMPRE grafite (escura), 
   vamos ocultar a logo versão clara e forçar apenas a versão escura */
body.login-page .login-logo .logo-light { 
    display: none !important; 
}

body.login-page .login-logo .logo-dark { 
    display: block !important; 
    margin: 0 auto;
}


/* ============================================================================
   AJUSTE DE LOGO NO SIDEBAR
   ========================================================================== */
.sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    height: 3.5rem; /* Altura padrão da barra da logo no AdminLTE */
}

.sidebar-brand .brand-link img.brand-image {
    max-height: 25px !important; /* Altura máxima permitida para não quebrar o layout */
    width: auto !important;       /* Calcula a largura proporcionalmente */
    object-fit: contain;          /* Garante que a imagem se ajuste sem cortar */
    margin-right: 0.5rem;         /* Espaçamento entre a imagem e o texto ao lado */
}

/* ============================================================================
   AJUSTE DE CORES DO CABEÇALHO (HEADER / NAVBAR)
   ========================================================================== */

/*
 * 1. Fundo do Cabeçalho
 * Força o fundo do cabeçalho para usar a cor grafite da empresa.
 */
.app-header.navbar {
    background-color: var(--empresa-grafite) !important;
    border-bottom: 1px solid #4F4F4F; /* Borda sutil para separar do conteúdo */
}

/*
 * 2. Cor dos Textos e Ícones
 * Muda a cor padrão de todos os links e ícones no cabeçalho para branco.
 */
.app-header .nav-link {
    color: var(--empresa-branco) !important;
}

.app-header .nav-link:hover {
    color: var(--empresa-cinza-2) !important; /* Efeito suave ao passar o mouse */
}

/*
 * 3. Caixas de Pesquisa
 * Ajusta as caixas de pesquisa para o tema escuro.
 */
.app-header .form-control {
    background-color: #4F4F4F !important; /* Fundo cinza escuro para o campo */
    color: var(--empresa-branco) !important; /* Cor do texto digitado */
    border: 1px solid var(--empresa-cinza-4) !important;
}

.app-header .form-control::placeholder {
    color: var(--empresa-cinza-3) !important; /* Cor do texto de placeholder */
}

/* Ícone de lupa ao lado da pesquisa */
.app-header .input-group-text {
    background-color: #4F4F4F !important;
    border: 1px solid var(--empresa-cinza-4) !important;
    color: var(--empresa-branco) !important;
}


/* ============================================================================
   AJUSTE DE CORES DO DASHBOARD (INDEX)
   ========================================================================== */

/*
 * 1. Módulo de "Ações Recentes" (Timeline)
 * Garante que o contêiner e os itens da timeline tenham cores adequadas.
 */

/* Título do módulo, ex: "Ações recentes" */
#recent-actions-module h4 {
    color: var(--empresa-branco) !important;
    font-weight: 600;
}

/* Fundo do "card" de cada item na timeline */
.timeline .timeline-item {
    background-color: #444444 !important; /* Um cinza um pouco mais claro que o fundo */
    color: var(--empresa-cinza-2) !important;
    border: 1px solid #4F4F4F;
}

/* Cor do texto do cabeçalho de cada item */
.timeline .timeline-item .timeline-header {
    color: var(--empresa-branco) !important;
    border-bottom: 1px solid #4F4F4F;
}

/* Cor do link no cabeçalho, ex: "denis.teste" */
.timeline .timeline-item .timeline-header a {
    color: var(--empresa-azul) !important;
    font-weight: 600;
}

.timeline .timeline-item .timeline-header a:hover {
    color: #577CFF !important;
}

/* Cor do corpo do texto, ex: "Alterado Staff status." */
.timeline .timeline-item .timeline-body {
    color: var(--empresa-cinza-2) !important;
}

/* Cor do timestamp (horário), ex: "21 horas, 44 minutos ago" */
.timeline .timeline-item .time {
    color: var(--empresa-cinza-4) !important;
}

/*
 * 2. Ícones da Timeline (círculos de ação)
 * Corrige os ícones que estavam invisíveis.
 */
.timeline > div > i.fas {
    /* Força os ícones a terem as cores da empresa, ignorando as classes "bg-gray" */
    color: var(--empresa-branco) !important;
}

.timeline > div > i.bg-gray {
    background-color: var(--empresa-cinza-4) !important;
}

.timeline > div > i.bg-success {
    background-color: var(--empresa-verde) !important;
}

.timeline > div > i.bg-danger {
    background-color: var(--bs-danger) !important;
}

/* ============================================================================
   REMOÇÃO DE FUNDO DOS ÍCONES DA TIMELINE
   ========================================================================== */
.timeline > div > i.fas,
.timeline > div > i.fa {
    background-color: transparent !important; /* Remove qualquer cor de fundo */
    box-shadow: none !important;              /* Remove sombras indesejadas */
}

/* Ajusta as cores diretamente nos próprios ícones para que contrastem bem */
.timeline > div > i.fa-plus-circle,
.timeline > div > i.bg-success {
    color: var(--empresa-verde) !important;
}

.timeline > div > i.fa-edit,
.timeline > div > i.bg-gray {
    color: var(--empresa-cinza-3) !important;
}

.timeline > div > i.fa-trash,
.timeline > div > i.bg-danger {
    color: var(--bs-danger) !important;
}

.timeline > div > i.fa-clock {
    color: var(--empresa-cinza-4) !important;
}

/* ============================================================================
   AJUSTE DE CORES DO RODAPÉ (FOOTER)
   ========================================================================== */
.app-footer {
    background-color: var(--empresa-grafite) !important; /* Aplica o fundo grafite escuro */
    color: var(--empresa-cinza-3) !important;            /* Texto cinza claro para legibilidade */
    border-top: 1px solid #4F4F4F !important;            /* Borda superior sutil para divisão */
}

/* Caso existam links dentro do rodapé */
.app-footer a {
    color: var(--empresa-azul) !important;
}

.app-footer a:hover {
    color: var(--empresa-branco) !important;
    text-decoration: underline !important;
}

/* ============================================================================
   ESTILIZAÇÃO DE CARDS E MODELOS DO DASHBOARD
   ========================================================================== */

/* 1. Estrutura Principal do Card */
.col-lg-9 .card {
    background-color: #444444 !important; /* Grafite suave para destacar do fundo */
    border: 1px solid #4F4F4F !important; /* Borda sutil de contorno */
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Cabeçalho do Card (Nome do App) */
.col-lg-9 .card-header {
    background-color: #3d3d3d !important; /* Tom ligeiramente mais escuro para o header */
    border-bottom: 1px solid #4F4F4F !important;
    padding: 0.75rem 1rem !important;
}

.col-lg-9 .card-header h5 {
    color: var(--empresa-branco) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

/* 3. Tabela de Modelos Interna */
.col-lg-9 .card-body {
    padding: 0 !important; /* Remove preenchimento para a tabela encostar nas bordas */
}

.col-lg-9 .table {
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

.col-lg-9 .table td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #4F4F4F !important; /* Linha divisória sutil entre modelos */
    background-color: transparent !important;
}

/* Remove a borda do último item da lista */
.col-lg-9 .table tr:last-child td {
    border-bottom: 0 !important;
}

/* Links dos Modelos (Lado Esquerdo) */
.col-lg-9 .table td a {
    color: var(--empresa-branco) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.col-lg-9 .table td a:hover {
    color: var(--empresa-azul) !important;
    text-decoration: none !important;
}

/* ============================================================================
   BOTÕES DE AÇÃO INTERNOS (ADD E CHANGE)
   ========================================================================== */

/* Ajuste do botão de Adicionar (Success) */
.col-lg-9 .btn-group .btn.addlink {
    background-color: transparent !important;
    border: 1px solid var(--empresa-verde) !important;
    color: var(--empresa-verde) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.col-lg-9 .btn-group .btn.addlink:hover {
    background-color: var(--empresa-verde) !important;
    color: #1c1c1c !important; /* Texto escuro ao passar o mouse */
}

/* Ajuste do botão de Modificar / Ir (Info / Primary) */
.col-lg-9 .btn-group .btn.changelink,
.col-lg-9 .btn-group .btn.viewlink {
    background-color: transparent !important;
    border: 1px solid var(--empresa-azul) !important;
    color: var(--empresa-azul) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.col-lg-9 .btn-group .btn.changelink:hover,
.col-lg-9 .btn-group .btn.viewlink:hover {
    background-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}


/* ============================================================================
   ESTILIZAÇÃO DE TÍTULOS E BREADCRUMBS (NAVEGAÇÃO)
   ========================================================================== */

/* 1. Título Principal da Página */
h3.mb-0, 
h1.mb-0,
.app-content-header h1,
.app-content-header h3 {
    color: var(--empresa-branco) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em; /* Deixa o texto do título ligeiramente mais elegante */
}

/* 2. Container dos Breadcrumbs */
.breadcrumb {
    background-color: #444444 !important; /* Caixa com fundo suave */
    border: 1px solid #4F4F4F !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center;
}

/* 3. Links e itens dentro da navegação */
.breadcrumb-item a {
    color: var(--empresa-azul) !important; /* Azul da empresa para as rotas ativas */
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--empresa-branco) !important;
    text-decoration: none !important;
}

/* Divisor entre os itens (ex: a barra "/") */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--empresa-cinza-3) !important;
}

/* O item atual no caminho (último item, não clicável) */
.breadcrumb-item.active {
    color: var(--empresa-cinza-3) !important;
    font-weight: 400;
}

/* ============================================================================
   ESTILIZAÇÃO E REFINAMENTO DO SIDEBAR
   ========================================================================== */

/* 1. Painel de Perfil do Usuário Logado */
.sidebar-wrapper .user-panel {
    border-bottom: 1px solid #4F4F4F !important; /* Linha divisória sutil */
    padding: 0.75rem 0.5rem !important;
    align-items: center;
}

.sidebar-wrapper .user-panel .info a {
    color: var(--empresa-branco) !important;      /* Nome do usuário em branco puro */
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease;
}

.sidebar-wrapper .user-panel .info a:hover {
    color: var(--empresa-azul) !important;
    text-decoration: none !important;
}

/* Ajusta o ícone padrão de avatar caso não haja foto */
.sidebar-wrapper .user-panel .image i.user-profile {
    color: var(--empresa-cinza-3) !important;
    font-size: 2.1rem;
}

/* 2. Cabeçalhos de Categoria (Nome das Aplicações / nav-header) */
.sidebar-wrapper .nav-header {
    color: var(--empresa-cinza-3) !important; /* Destaque sutil */
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    padding: 0.75rem 0.75rem 0.375rem !important;
}

/* 3. Links de Navegação Comuns (Modelos e Páginas) */
.sidebar-wrapper .nav-link {
    color: var(--empresa-cinza-1) !important;
    font-size: 0.875rem !important;
    font-weight: 400;
    transition: all 0.2s ease !important;
}

/* Efeito de flutuação (hover) ao passar o mouse */
.sidebar-wrapper .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--empresa-branco) !important;
}

/* Cor do Ícone ao lado dos links no hover */
.sidebar-wrapper .nav-link:hover .nav-icon {
    color: var(--empresa-branco) !important;
}

/* 4. Link Ativo / Selecionado (Página onde o usuário está) */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--empresa-azul) !important; /* Destaque azul corporativo */
    color: var(--empresa-branco) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(45, 91, 255, 0.2) !important;
}

/* Ícone do link ativo */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: var(--empresa-branco) !important;
}

/* ============================================================================
   ESTILIZAÇÃO DA LISTA DE RESULTADOS (TABELAS, PESQUISA E AÇÕES)
   ========================================================================== */

/* 1. Barra de Pesquisa e Filtros */
#changelist-search .form-control {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
}

#changelist-search .form-control::placeholder {
    color: var(--empresa-cinza-4) !important;
}

#changelist-search .small.quiet {
    color: var(--empresa-cinza-3) !important;
}

#changelist-search .small.quiet a {
    color: var(--empresa-azul) !important;
}

/* 2. Barra de Ações em Massa (Ex: "Ações: Excluir selecionados") */
.change-list-actions {
    background-color: transparent !important;
    align-items: center;
    color: var(--empresa-branco) !important;
}

.change-list-actions label {
    font-weight: 500;
    color: var(--empresa-cinza-1) !important;
}

/* Dropdown de Ações */
.change-list-actions select {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
}

/* Botão "Ir" (Go) das ações */
.change-list-actions button.button,
.change-list-actions button[type="submit"] {
    background-color: transparent !important;
    border: 1px solid var(--empresa-azul) !important;
    color: var(--empresa-azul) !important;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

.change-list-actions button.button:hover,
.change-list-actions button[type="submit"]:hover {
    background-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}

/* 3. Tabela Principal de Registros */
#changelist .table {
    background-color: #444444 !important; /* Transforma a tabela num card escuro */
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid #4F4F4F !important;
    margin-bottom: 1rem;
}

/* Cabeçalho da Tabela */
#changelist .table thead th {
    background-color: #3d3d3d !important;
    color: var(--empresa-branco) !important;
    border-bottom: 2px solid #4F4F4F !important;
    border-top: none !important;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

#changelist .table thead th a {
    color: var(--empresa-branco) !important;
}

/* Linhas e Células da Tabela */
#changelist .table tbody td, 
#changelist .table tbody th {
    background-color: transparent !important;
    border-bottom: 1px solid #4F4F4F !important;
    color: var(--empresa-cinza-1) !important;
    vertical-align: middle;
    padding: 0.75rem 1rem;
}

/* Efeito Hover nas linhas da tabela (ajuda na leitura) */
#changelist .table tbody tr:hover td,
#changelist .table tbody tr:hover th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Links dentro da tabela (ex: Clicar no ID do registro) */
#changelist .table tbody td a,
#changelist .table tbody th a {
    color: var(--empresa-azul) !important;
    font-weight: 500;
}

#changelist .table tbody td a:hover,
#changelist .table tbody th a:hover {
    color: var(--empresa-branco) !important;
    text-decoration: underline !important;
}

/* 4. Paginação no Rodapé da Tabela */
.pagination .page-item .page-link {
    background-color: #444444 !important;
    border-color: #4F4F4F !important;
    color: var(--empresa-branco) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--empresa-azul) !important;
    border-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}

.pagination .page-item .page-link:hover {
    background-color: #3d3d3d !important;
    color: var(--empresa-azul) !important;
}

/* ============================================================================
   ESTILIZAÇÃO DOS FILTROS E DROPDOWNS (SELECT2 E PADRÃO)
   ========================================================================== */

/* 1. Select padrão (Fallback caso o Select2 não carregue) */
#changelist-search select,
#change-list-filters select {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
    border-radius: 6px !important;
}

/* 2. Select2 - Caixa principal (Dropdown Fechado) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    border-radius: 6px !important;
    min-height: 38px !important;
    display: flex;
    align-items: center;
}

/* Texto da opção selecionada (Fechado) */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--empresa-branco) !important;
}

/* 3. Select2 - Lista Suspensa (Dropdown Aberto) */
.select2-dropdown {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
}

/* Campo de busca interno do Select2 (onde o usuário digita para filtrar) */
.select2-search--dropdown .select2-search__field {
    background-color: #333333 !important; /* Fundo mais escuro para o input */
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
    border-radius: 4px !important;
}

/* Opções da lista (Não selecionadas) */
.select2-container--default .select2-results__option {
    color: var(--empresa-cinza-1) !important;
    background-color: transparent !important;
}

/* Opção selecionada ou quando o mouse passa por cima (Hover) */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}

/* ============================================================================
   CORREÇÃO DE ALINHAMENTO E CENTRALIZAÇÃO VERTICAL (FILTROS E SELECT2)
   ========================================================================== */

/* 1. Alinhamento da Linha (Formulário Changelist) */
#changelist-search {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important; /* Força todos os elementos na mesma linha vertical */
    gap: 0.5rem !important; /* Espaço uniforme entre filtros, input e botão */
}

/* Remove a margem inferior padrão do Bootstrap nos form-groups dos filtros */
#changelist-search .form-group {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. Centralização Vertical do Texto dentro do Select2 */
.select2-container--default .select2-selection--single {
    height: 38px !important; /* Altura padrão para bater com inputs do Bootstrap */
    display: flex !important;
    align-items: center !important; /* Centraliza verticalmente o flex container */
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
}

/* Garante que a renderização do texto ocupe toda a altura de forma centralizada */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important; /* Reseta o line-height estático do Select2 */
    padding-left: 0.25rem !important;
    padding-right: 1.5rem !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

/* Centraliza verticalmente a setinha de dropdown do Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: 8px !important;
}

/* ============================================================================
   ALINHAMENTO VERTICAL E HORIZONTAL DOS CHECKBOXES NA TABELA
   ========================================================================== */

/* 1. Centraliza a célula que contém o checkbox de cada linha */
#result_list td.action-checkbox,
#result_list th.djn-checkbox-select-all {
    text-align: center !important;  /* Centraliza horizontalmente */
    vertical-align: middle !important; /* Centraliza verticalmente na linha */
    width: 40px !important;         /* Define uma largura fixa ideal para a coluna de seleção */
    padding: 0.75rem 0.5rem !important;
}

/* 2. Ajusta o input checkbox em si para remover desalinhamentos nativos */
#result_list td.action-checkbox input[type="checkbox"],
#result_list th.djn-checkbox-select-all input[type="checkbox"] {
    margin: 0 !important;           /* Remove margens nativas que empurram o input */
    display: inline-block !important;
    vertical-align: middle !important; /* Garante o alinhamento com o texto da linha */
    cursor: pointer;
    width: 16px;                    /* Tamanho ligeiramente mais confortável para cliques */
    height: 16px;
}

/* 3. Garante que o container de texto do cabeçalho também alinhe */
#result_list th.djn-checkbox-select-all .text {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
}

/* ============================================================================
   ESTILIZAÇÃO DA TELA DE FORMULÁRIO (CHANGE_FORM / CADASTRO E EDIÇÃO)
   ========================================================================== */

/* 1. Estilização dos Painéis Colapsáveis (Acordeões/Cards) */
#jazzy-collapsible .card.card-default {
    background-color: #444444 !important; /* Grafite suave para o card */
    border: 1px solid #4F4F4F !important;
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Cabeçalho do Acordeão (Botão clicável de expandir) */
#jazzy-collapsible .card-header.collapsible-header {
    background-color: #3d3d3d !important; /* Tom sutilmente mais escuro */
    border-bottom: 1px solid #4F4F4F !important;
    cursor: pointer;
}

#jazzy-collapsible .card-header.collapsible-header .card-title {
    color: var(--empresa-branco) !important;
    font-weight: 600 !important;
    font-size: 1rem;
}

/* Corpo Interno do Acordeão */
#jazzy-collapsible .panel-collapse .card-body {
    background-color: #444444 !important;
    color: var(--empresa-cinza-1) !important;
}

/* Remove bordas extras das divisões de cards internos */
#jazzy-collapsible .panel-collapse .card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#jazzy-collapsible .p-5 {
    padding: 1.5rem !important; /* Reduz padding exagerado do template */
}

/* 2. Alinhamento dos Textos e Labels Gerais */
.form-group label {
    color: var(--empresa-branco) !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
}

/* Texto de ajuda abaixo dos inputs */
.form-group .help-block {
    color: var(--empresa-cinza-3) !important;
    font-size: 0.8rem !important;
    margin-top: 0.25rem;
}

/* 3. Correção e Alinhamento de Checkboxes do Formulário (Ativo, Staff, etc.) */
.form-group.field-is_active .row,
.form-group.field-is_staff .row,
.form-group.field-is_superuser .row {
    align-items: center !important; /* Força o alinhamento vertical da linha */
}

/* Centraliza o checkbox em relação ao texto */
.form-group input[type="checkbox"] {
    margin: 0 !important;
    cursor: pointer;
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
}

/* Seletor do Django para permissões (grupos de permissões esquerda/direita) */
.selector-available-title,
.selector-chosen-title {
    color: var(--empresa-branco) !important;
}

.selector .selector-filter input {
    background-color: #333333 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
}

/* ============================================================================
   AJUSTES DE CAMPOS ESPECÍFICOS E BOTÕES DE AÇÃO (CHANGE FORM)
   ========================================================================== */

/* 1. Campo de Senha (Texto e Botão de Reconfigurar) */
.field-password p, 
.field-password strong, 
.field-password bdi {
    color: var(--empresa-cinza-1) !important;
}

.field-password a.button {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.375rem 1rem;
    background-color: transparent !important;
    border: 1px solid var(--empresa-azul) !important;
    color: var(--empresa-azul) !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.field-password a.button:hover {
    background-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}

/* 2. Botões do Painel de Ações Lateral (Salvar, Histórico, Remover) */
#jazzy-actions .btn {
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important; /* Transforma todos em outline */
    width: 100%; /* Força largura total para alinhar de forma elegante */
}

/* Força os botões a ficarem empilhados um embaixo do outro no desktop */
@media (min-width: 992px) {
    #jazzy-actions .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* Botão: Salvar (Success) */
#jazzy-actions .btn-success {
    border: 1px solid var(--empresa-verde) !important;
    color: var(--empresa-verde) !important;
}
#jazzy-actions .btn-success:hover {
    background-color: var(--empresa-verde) !important;
    color: #1c1c1c !important; /* Texto escuro para dar contraste no fundo verde */
}

/* Botões: Salvar e continuar / Salvar e adicionar (Info) */
#jazzy-actions .btn-info {
    border: 1px solid var(--empresa-azul) !important;
    color: var(--empresa-azul) !important;
}
#jazzy-actions .btn-info:hover {
    background-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
}

/* Botão: Remover (Danger) */
#jazzy-actions .btn-danger {
    border: 1px solid var(--bs-danger) !important;
    color: var(--bs-danger) !important;
}
#jazzy-actions .btn-danger:hover {
    background-color: var(--bs-danger) !important;
    color: var(--empresa-branco) !important;
}

/* Botão: Histórico (Secondary) */
#jazzy-actions .btn-secondary {
    border: 1px solid var(--empresa-cinza-3) !important;
    color: var(--empresa-cinza-3) !important;
}
#jazzy-actions .btn-secondary:hover {
    background-color: var(--empresa-cinza-3) !important;
    color: #1c1c1c !important;
}

/* ============================================================================
   ESTILIZAÇÃO GERAL DO CARD DE FORMULÁRIO (ADD FORM) E INPUTS
   ========================================================================== */

/* 1. Fundo do Card Principal */
#content-main .col-12.col-lg-9 > .card {
    background-color: #444444 !important;
    border: 1px solid #4F4F4F !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

#content-main .col-12.col-lg-9 > .card > .card-body {
    background-color: transparent !important;
    color: var(--empresa-cinza-1) !important;
}

/* 2. Inputs de Texto e Senha Nativos do Django (que vêm sem classe form-control) */
#content-main input[type="text"]:not(.form-control),
#content-main input[type="password"]:not(.form-control),
#content-main input[type="email"]:not(.form-control) {
    background-color: #333333 !important;
    border: 1px solid #4F4F4F !important;
    color: var(--empresa-branco) !important;
    border-radius: 6px !important;
    padding: 0.375rem 0.75rem !important;
    width: 100%;
    max-width: 100%;
    transition: border-color 0.2s ease;
}

#content-main input[type="text"]:not(.form-control):focus,
#content-main input[type="password"]:not(.form-control):focus,
#content-main input[type="email"]:not(.form-control):focus {
    border-color: var(--empresa-azul) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(45, 91, 255, 0.2) !important;
}

/* 3. Ajuste dos Radio Buttons (Autenticação baseada em senha) */
.radiolist.inline {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem !important; /* Espaçamento entre as opções */
    align-items: center;
    margin-top: 0.25rem;
}

.radiolist.inline div {
    display: flex;
    align-items: center;
}

.radiolist.inline label {
    margin: 0 !important;
    font-weight: 400 !important;
    color: var(--empresa-cinza-1) !important;
    cursor: pointer;
}

.radiolist.inline input[type="radio"] {
    margin: 0 0.5rem 0 0 !important; /* Espaço entre a bolinha e o texto */
    cursor: pointer;
}

/* 4. Estilização da Lista de Dicas de Senha */
.help-block ul {
    padding-left: 1.25rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
    color: var(--empresa-cinza-3) !important;
}

.help-block ul li {
    margin-bottom: 0.35rem;
    font-size: 0.85rem !important;
}

/* ============================================================================
   AJUSTE DE PADDING E ESPAÇAMENTO DO FORMULÁRIO DE ADIÇÃO (ADD FORM)
   ========================================================================== */

/* 1. Aplica o padding interno de forma consistente no card-body */
#content-main .col-12.col-lg-9 > .card > .card-body {
    padding: 2.5rem !important; /* Espaçamento interno generoso nas bordas do card */
}

/* 2. Aumenta a distância vertical entre cada bloco de campo (form-group) */
#content-main .form-group {
    margin-bottom: 2rem !important; /* Espaço confortável para os campos respirarem */
}

/* 3. Garante que os inputs não fiquem colados nos labels e tenham altura correta */
#content-main .form-group .row {
    align-items: flex-start; /* Alinha labels no topo caso o campo seja alto */
}

#content-main input[type="text"]:not(.form-control),
#content-main input[type="password"]:not(.form-control),
#content-main input[type="email"]:not(.form-control) {
    height: 40px !important; /* Altura padrão alinhada com o Bootstrap 5 */
    margin-top: 0.25rem !important;
}

/* Ajusta o alinhamento específico de checkboxes e radios para manter centralizado */
#content-main .form-group input[type="checkbox"],
#content-main .form-group input[type="radio"] {
    margin-top: 0 !important;
}


/* ============================================================================
   AJUSTE DA TELA DE SAÍDA (LOGOUT)
   ========================================================================== */

/* 1. Altera o texto de agradecimento para uma cor legível */
body.login-page p.text-center {
    color: var(--empresa-cinza-1) !important; /* Cinza bem claro para ótimo contraste */
    font-size: 0.95rem !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
}

/* 2. Estilização do Botão "Acessar novamente" */
body.login-page .login-card-body .btn-primary {
    background-color: var(--empresa-azul) !important;
    border-color: var(--empresa-azul) !important;
    color: var(--empresa-branco) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

body.login-page .login-card-body .btn-primary:hover {
    background-color: #244DE0 !important; /* Tom azul de hover sutilmente mais escuro */
    border-color: #244DE0 !important;
    box-shadow: 0 4px 12px rgba(45, 91, 255, 0.3) !important;
}

/* ============================================================================
   AJUSTE DE CONTRASTE NO MENU DO USUÁRIO (USER DROPDOWN)
   ========================================================================== */

/* 1. Estilização Padrão do Menu Suspenso */
#jazzy-usermenu {
    background-color: var(--empresa-grafite) !important; /* Mantém o fundo escuro corporativo */
    border: 1px solid #4F4F4F !important;
}

#jazzy-usermenu .dropdown-header {
    color: var(--empresa-cinza-3) !important;
    font-weight: 600;
}

#jazzy-usermenu .dropdown-divider {
    border-top: 1px solid #4F4F4F !important;
}

/* 2. Itens de Menu (Links e Botão de Logout) */
#jazzy-usermenu .dropdown-item {
    color: var(--empresa-cinza-1) !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

/* 3. Efeito Hover (Quando o mouse passa por cima) */
#jazzy-usermenu .dropdown-item:hover,
#jazzy-usermenu .dropdown-item:focus {
    background-color: var(--empresa-branco) !important; /* O fundo da célula continua branco */
    color: var(--empresa-grafite) !important;           /* O texto e ícones mudam para grafite escuro */
}

/* Garante que o botão de logout dentro do form herde a mesma regra */
#jazzy-usermenu form button.dropdown-item {
    width: 100%;
    text-align: left;
    border: none;
}

/* Indentação dos itens filhos do menu lateral */
#jazzy-navigation .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.5rem !important;
}

/* =========================================================
   ANÁLISE SA - RESUMO
   ========================================================= */

.analise-sa-modal {
    border: 0;
    border-radius: 8px;
}

.analise-sa-modal .modal-header {
    padding: 1rem 1.25rem;
    background: #333333;
    color: #FFFFFF;
    border-bottom: 0;
}

.analise-sa-modal .modal-title {
    font-size: 1rem;
    font-weight: 700;
}

.analise-sa-modal .modal-body {
    padding: 1.25rem;
}

.analise-sa-section {
    margin-bottom: 1.25rem;
}

.analise-sa-section-title {
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #828282;
}

.analise-sa-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.analise-sa-result.aprovado {
    color: #02DE7F;
}

.analise-sa-result.reprovado {
    color: #dc3545;
}

.analise-sa-message {
    margin-top: 0.5rem;
    color: #555555;
    font-size: 0.9rem;
}

.analise-sa-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.analise-sa-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}

.analise-sa-list i {
    margin-top: 0.2rem;
    color: #dc3545;
}

.analise-sa-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.analise-sa-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    background: #F2F2F2;
    font-size: 0.875rem;
}

.status-aprovado {
    color: #168c5a !important;
}

.status-reprovado {
    color: #dc3545 !important;
}

.analise-sa-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.analise-sa-summary strong {
    color: #333333;
}

.analise-sa-table {
    margin-bottom: 0;
    font-size: 0.82rem;
}

.analise-sa-table th {
    font-size: 0.75rem;
    font-weight: 700;
    color: #828282;
    border-top: 0;
}

.analise-sa-table td {
    vertical-align: middle;
}

.analise-sa-cards {
    display: flex;
    gap: 0.75rem;
}

.analise-sa-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    background: #F2F2F2;
}

.analise-sa-card strong {
    font-size: 1.35rem;
    color: #333333;
}

.analise-sa-card span {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #828282;
}

.analise-sa-card.aprovado {
    border-left: 3px solid #02DE7F;
}

.analise-sa-card.reprovado {
    border-left: 3px solid #dc3545;
}

.analise-sa-map-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 5px;
    background: #F2F2F2;
    color: #666666;
    font-size: 0.8rem;
}

.analise-sa-footer-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #E0E0E0;
}

.analise-sa-footer-info > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.analise-sa-footer-info span {
    font-size: 0.72rem;
    color: #828282;
}

.analise-sa-footer-info strong {
    font-size: 0.82rem;
    color: #333333;
}

@media (max-width: 768px) {
    .analise-sa-cards {
        flex-direction: column;
    }

    .analise-sa-footer-info {
        flex-direction: column;
    }

    .analise-sa-summary {
        flex-wrap: wrap;
    }
}

.btn-analise-sa {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.btn-analise-sa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.card-header-detalhes {
    position: relative;
}

.card-header-detalhes .btn-analise-sa {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}

.card-header-detalhes .btn-analise-sa:hover {
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   CONTRASTE DO MODAL DE ANÁLISE SA
   ========================================================= */

.analise-sa-modal {
    color: #333333;
}

.analise-sa-modal .modal-body {
    color: #333333;
}

.analise-sa-modal .analise-sa-section-title {
    color: #BDBDBD;
}

.analise-sa-modal .analise-sa-message {
    color: #E0E0E0;
}

.analise-sa-modal .analise-sa-list li {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-summary {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-summary strong {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-table {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-table th {
    color: #BDBDBD;
}

.analise-sa-modal .analise-sa-table td {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-item {
    color: #333333;
}

.analise-sa-modal .analise-sa-map-info {
    color: #555555;
}

.analise-sa-modal .analise-sa-footer-info {
    color: #FFFFFF;
}

.analise-sa-modal .analise-sa-footer-info span {
    color: #BDBDBD;
}

.analise-sa-modal .analise-sa-footer-info strong {
    color: #FFFFFF;
}

.analise-sa-modal .modal-body {
    color: #FFFFFF !important;
}

.analise-sa-modal .modal-body p,
.analise-sa-modal .modal-body span,
.analise-sa-modal .modal-body td,
.analise-sa-modal .modal-body th,
.analise-sa-modal .modal-body label {
    color: inherit;
}

.analise-sa-modal .analise-sa-card,
.analise-sa-modal .analise-sa-item,
.analise-sa-modal .analise-sa-map-info {
    color: #333333 !important;
}