/* ======================================================================== */
/* SEÇÃO 1: DEFINIÇÕES GLOBAIS E ESTILOS DE BASE (IE BRANDING) */
/* ======================================================================== */

:root {
    /* Paleta de Cores (Interaction Experience) */
    --brand-marrom-escuro: #4d1521;
    --brand-marrom-medio: #523634;
    --brand-verde-oliva: #9f996f;
    --brand-taupe: #aea986;
    --brand-bege: #bd9f96;
    --brand-branco-sujo: #F9F4F2;

    /* Variáveis de Cor do Sistema (Mapeamento) */
    --dark-grey: var(--brand-marrom-escuro);
    --medium-grey: var(--brand-marrom-medio);
    --white: var(--brand-branco-sujo);
    --accent-color: var(--brand-marrom-escuro);
    --danger-color: #9c2e2e;
    /* 🟢 NOVO: Tom de perigo alinhado ao marrom */
    --success-color: var(--brand-verde-oliva);

    /* 🟢 AJUSTE: Navbar ainda mais fina */
    --navbar-height: 50px;
    --sub-navbar-height: 40px;

    /* Variáveis de Fonte (Atualizado com Branding) */

    /* Fonte Principal (Texto corrido, Menus, Botões) -> Panel Sans */
    --font-sans: 'Panel Sans', sans-serif;

    /* Fonte de Destaque (Títulos, Logos) -> Boruna */
    --font-serif: 'Boruna - Demo Version', serif;
}

/* --- ESTILO BASE DO CORPO DA PÁGINA --- */
body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;

    /* 🟢 AJUSTE GLOBAL: Reduzido para 13.5px (Super Compacto) */
    font-size: 13.5px;

    background-color: var(--brand-marrom-escuro);
    color: var(--dark-grey);
    font-weight: 400;
    transition: all 0.3s ease;
}

/* Esconde todas as 'views' (formulários e submenus) por padrão */
.app-view {
    display: none;
}

/* ======================================================================== */
/* SEÇÃO 2: ESTILOS DE AUTENTICAÇÃO (LOGIN/RECUPERAÇÃO) */
/* ======================================================================== */

.auth-header {
    position: absolute;
    padding: 0 25px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--navbar-height);
    background-color: var(--brand-marrom-escuro);
    color: var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid #000;
    z-index: 2;
}

.auth-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-header .navbar-logo {
    max-height: clamp(28px, 8vw, 40px);
    /* Ajustado */
    width: auto;
}

.auth-header .navbar-pipe {
    width: 2px;
    height: 30px;
    /* Ajustado */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
    margin-right: 10px;
}

.auth-header .navbar-brand span {
    font-size: 0.95rem;
    /* Ajustado */
}

.login-container {
    background-color: var(--brand-branco-sujo);
    padding: 25px 35px;
    /* Mais compacto */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 360px;
    /* Mais estreito */
    text-align: center;
    border: 1px solid var(--brand-bege);
}

#login-view,
#recovery-request-view,
#password-reset-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.login-container h2 {
    font-size: 1.4rem;
    /* Menor */
    font-weight: 600;
    color: var(--dark-grey);
    font-family: var(--font-serif);
    margin-bottom: 8px;
}

.login-container p {
    color: var(--medium-grey);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 0.9375rem;
    top: 0.4rem;
    cursor: pointer;
    color: var(--medium-grey);
    user-select: none;
    font-size: 0.95rem;
}

.form-footer {
    margin-top: 0.8rem;
}

.form-footer a {
    color: var(--medium-grey);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.form-footer a:hover {
    color: var(--dark-grey);
    text-decoration: underline;
}

.error-message {
    color: var(--danger-color);
    margin-top: 0.4rem;
    min-height: 1.1rem;
    font-weight: 500;
    font-size: 0.85rem;
}

.message {
    color: var(--success-color);
    margin-top: 0.4rem;
    min-height: 1.1rem;
    font-weight: 500;
    font-size: 0.85rem;
}

.token-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.token-inputs {
    display: flex;
    gap: 0.4rem;
}

.token-input {
    width: 2rem !important;
    height: 2.5rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 0 !important;
    margin: 0 !important;
}

.token-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(77, 21, 33, 0.25);
}

.validation-icon-left {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    width: 1.25rem;
    text-align: center;
}

.validation-icon {
    font-size: 0.95rem;
    min-width: 1.25rem;
}

#recovery-password-requirements {
    list-style: none;
    padding: 0;
    margin: 0 0 0.7rem 0.3rem !important;
    font-size: 0.7rem;
    color: var(--medium-grey);
    text-align: left;
    max-width: 18.75rem;
}

#recovery-password-requirements li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.15rem;
}

#recovery-password-requirements li::before {
    content: '○';
    position: absolute;
    left: 0;
    top: 0px;
    font-weight: bold;
}

#recovery-password-requirements li.valid {
    color: var(--success-color);
}

#recovery-password-requirements li.valid::before {
    content: '✓';
    color: var(--success-color);
}

#recovery-confirm-password-message {
    margin-top: 0;
    margin-bottom: 0.7rem;
    text-align: left;
    padding-left: 0.3rem;
}

/* ======================================================================== */
/* SEÇÃO 3: ESTILOS DA APLICAÇÃO PRINCIPAL (NAVBARS E CARDS) */
/* ======================================================================== */

/* Definição Global do Container Principal */
main.container-lg {
    display: block;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Navbar Superior (Branding) */
.navbar {
    background-color: var(--brand-marrom-escuro);
    color: var(--brand-branco-sujo);
    position: relative;
    overflow: hidden;
    min-height: var(--navbar-height);
}

/* Marca d'água */
.navbar-watermark-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 1500px auto;
    background-repeat: repeat;
    background-position: center top;
    opacity: 0.04;
    filter: brightness(3.5);
    pointer-events: none;
    z-index: 0;
}

.navbar-brand img {
    height: 42px !important;
    /* Logo menor */
    width: auto !important;
    vertical-align: middle;
}

.navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1);
    padding: 0.2rem 0.4rem;
    font-size: 0.95rem;
}

.navbar-toggler.collapsed:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F9F4F2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Menu Principal (L1) */
.main-menu-nav {
    background-color: var(--brand-branco-sujo);
}

.main-menu-nav .nav-link {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--brand-marrom-medio);
    opacity: 0.8;
    padding: 6px 10px;
    /* Menu mais compacto */
    margin-right: 4px;
    transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}

.main-menu-nav .nav-link:hover {
    opacity: 1;
    color: var(--brand-marrom-escuro);
}

.main-menu-nav .nav-link.active {
    background-color: var(--brand-marrom-escuro);
    color: var(--brand-branco-sujo);
    opacity: 1;
    border-radius: 4px 4px 0 0;
}

/* Centraliza as linhas */
#view-dashboard .row,
#view-clientes .row,
#view-propostas .row,
#view-catalogo .row {
    justify-content: center;
}

/* Cards de Ação (L2) - SUPER COMPACTOS */
.action-card {
    background-color: var(--brand-branco-sujo);
    border: none;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 110px;
    /* Altura reduzida */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    background-color: var(--brand-bege);
}

.action-card i.bi {
    font-size: 1.8rem;
    /* Ícone menor */
    color: var(--brand-verde-oliva);
    font-weight: bold !important;
}

.action-card span {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 8px;
    color: var(--brand-marrom-escuro);
    line-height: 1.1;
}

/* Títulos e Views */
.view-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.6rem;
    /* Menor */
    color: var(--white);
}

.view-subtitle {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--brand-bege);
    margin-top: -6px;
    margin-bottom: 12px;
}

h5 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    color: var(--brand-marrom-escuro);
}

/* --- RESPONSIVIDADE (Desktop) --- */
@media (min-width: 992px) {
    .main-menu-nav .navbar-collapse {
        justify-content: center !important;
    }

    .filter-tabs {
        width: fit-content;
        margin-left: auto;
        justify-content: flex-start;
    }

    .filter-tabs .nav-item {
        flex-grow: 0;
    }

    .filter-tabs .nav-link {
        min-width: 85px;
        width: auto;
    }
}

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 992px) {

    /* Ajuste de margem lateral */
    main.container-lg,
    #breadcrumb-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .main-menu-nav:not(.show) {
        min-height: 5px;
    }

    .action-card {
        height: auto;
        margin-bottom: 15px;
        padding: 20px;
        gap: 8px;
    }

    .action-card i.bi {
        font-size: 3rem !important;
    }

    .action-card span {
        font-size: 1.3rem !important;
    }

    .navbar {
        min-height: 65px;
    }

    .navbar-brand img {
        height: 50px !important;
    }

    .navbar-toggler {
        transform: scale(1);
        margin-right: 0.5rem;
    }

    .system-title-text {
        font-size: 1.2rem !important;
    }

    .main-menu-nav .nav-link {
        font-size: 1rem !important;
        padding: 10px 15px !important;
    }

    .view-title {
        font-size: 1.6rem !important;
    }

    .summary-card h4 {
        font-size: 1.8rem;
    }
}

/* Responsividade para telas muito pequenas */
@media (max-width: 420px) {
    .filter-tabs .nav-link {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: 11px;
        min-width: auto;
    }

    .summary-card {
        padding: 8px;
    }

    .summary-card span {
        font-size: 10px;
    }

    .summary-card h4 {
        font-size: 20px;
    }
}

/* ======================================================================== */
/* SEÇÃO 4: ESTILOS DE FORMULÁRIO (L3) E BOTÕES */
/* ======================================================================== */

.card {
    background-color: var(--brand-branco-sujo);
}

.card.position-relative {
    position: relative !important;
}

/* Padding reduzido nos formulários */
.card-body.p-4.p-md-5 {
    padding: 1.5rem !important;
}

.card-header {
    background-color: var(--brand-verde-oliva) !important;
    color: var(--brand-marrom-escuro) !important;
    font-weight: 600;
    border-bottom: none;
    font-size: 1rem;
    font-family: var(--font-sans);
    padding: 0.7rem 1.5rem;
}

.card-header h4 {
    color: var(--brand-marrom-escuro) !important;
    font-weight: 600;
    font-size: 1rem;
}

/* Estilo base dos formulários */
.form-label {
    font-size: 0.85rem;
    color: var(--dark-grey);
    margin-bottom: 0.2rem;
}

.form-control,
.form-select {
    font-size: 0.9rem;
    color: var(--dark-grey);
    padding: 0.3rem 0.6rem;
    min-height: 36px;
    /* Altura reduzida */
}

.input-group-text {
    padding: 0.3rem 0.6rem;
    font-size: 0.9rem;
}

/* Foco Global */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-bege);
    box-shadow: 0 0 0 0.2rem rgba(189, 159, 150, 0.4);
    outline: none;
}

/* Switch compacto */
.form-check-input {
    width: 2.2em;
    height: 1.1em;
    margin-top: 0.1em;
}

/* Estilização do Switch (Versão Segura - Sem SVG) */
.form-check-input:checked {
    background-color: var(--brand-verde-oliva);
    border-color: var(--brand-verde-oliva);
    /* 🟢 CORREÇÃO: Restaurando o ícone SVG de check */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* 🟢 CORREÇÃO: Switch não deve ter o ícone de check, apenas a bolinha */
.form-switch .form-check-input:checked {
    background-color: var(--brand-verde-oliva);
    border-color: var(--brand-verde-oliva);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* 🟢 CORREÇÃO: Switch desligado deve ter borda e bolinha OLIVA, fundo transparente/branco */
.form-switch .form-check-input {
    /* Bolinha com preenchimento OLIVA (#9f996f) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239f996f'/%3e%3c/svg%3e");
    background-color: transparent;
    /* Fundo transparente */
    border-color: var(--brand-verde-oliva);
    /* Borda Oliva */
}

/* Ajuste para o foco não trazer o azul de volta */
.form-switch .form-check-input:focus {
    border-color: var(--brand-verde-oliva);
    box-shadow: 0 0 0 0.2rem rgba(159, 153, 111, 0.25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239f996f'/%3e%3c/svg%3e");
}

/* Foco quando selecionado */
.form-switch .form-check-input:checked:focus {
    border-color: var(--brand-verde-oliva);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* --- BOTÕES COMPACTOS --- */
.btn-primary,
.btn-outline-marrom-dark,
.btn-outline-oliva-hover-marrom,
.btn-view-header {
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    border-width: 1px !important;
    padding: 0.35rem 0.9rem;
    /* Padding menor */
    font-size: 0.8rem;
}

.btn-primary:hover,
.btn-outline-marrom-dark:hover,
.btn-outline-oliva-hover-marrom:hover,
.btn-view-header:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-primary i,
.btn-outline-marrom-dark i,
.btn-outline-oliva-hover-marrom i,
.btn-view-header i {
    font-weight: bold;
    -webkit-text-stroke: 0.2px;
}

/* 1. Botão Primário */
.btn-primary {
    --bs-btn-bg: var(--brand-verde-oliva);
    --bs-btn-border-color: var(--brand-verde-oliva);
    --bs-btn-color: var(--brand-marrom-escuro);
    --bs-btn-hover-bg: var(--brand-marrom-medio);
    --bs-btn-hover-border-color: var(--brand-marrom-medio);
    --bs-btn-hover-color: var(--brand-branco-sujo);
    --bs-btn-focus-shadow-rgb: 159, 153, 111;
    --bs-btn-active-bg: var(--brand-marrom-escuro);
    --bs-btn-active-border-color: var(--brand-marrom-escuro);
    --bs-btn-active-color: var(--brand-branco-sujo);
    --bs-btn-disabled-bg: var(--brand-verde-oliva);
    --bs-btn-disabled-border-color: var(--brand-verde-oliva);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background-color: var(--brand-marrom-escuro) !important;
    border-color: var(--brand-marrom-escuro) !important;
    color: var(--brand-branco-sujo) !important;
    box-shadow: 0 0 0 0.2rem rgba(159, 153, 111, 0.5) !important;
}

/* 2. Botão Secundário */
.btn-outline-marrom-dark {
    --bs-btn-color: var(--brand-marrom-escuro);
    --bs-btn-border-color: var(--brand-marrom-escuro);
    --bs-btn-hover-bg: var(--brand-marrom-escuro);
    --bs-btn-hover-border-color: var(--brand-marrom-escuro);
    --bs-btn-hover-color: var(--brand-branco-sujo);
    --bs-btn-active-bg: var(--brand-marrom-escuro);
    --bs-btn-active-border-color: var(--brand-marrom-escuro);
    --bs-btn-active-color: var(--brand-branco-sujo);
    --bs-btn-focus-shadow-rgb: 77, 21, 33;
}

/* 3. Botão Terciário */
.btn-outline-oliva-hover-marrom {
    --bs-btn-color: var(--brand-verde-oliva);
    --bs-btn-border-color: var(--brand-verde-oliva);
    --bs-btn-hover-bg: var(--brand-marrom-escuro);
    --bs-btn-hover-border-color: var(--brand-marrom-escuro);
    --bs-btn-hover-color: var(--brand-branco-sujo);
    --bs-btn-active-bg: var(--brand-marrom-escuro);
    --bs-btn-active-border-color: var(--brand-marrom-escuro);
    --bs-btn-active-color: var(--brand-branco-sujo);
    --bs-btn-focus-shadow-rgb: 159, 153, 111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-oliva-hover-marrom .bi {
    position: relative;
    top: 0;
}

/* 4. Botão de Cabeçalho */
.btn-view-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view-header .bi {
    position: relative;
    top: 0;
}

.btn-view-header .btn-view-header-text {
    position: relative;
    top: 1px;
}

/* 🟢 NOVO: Estilização do Botão Danger (para o Modal de Desvincular) */
.btn-danger {
    /* Base: Usa a cor Marrom Escuro do Branding para botões de ação destrutiva */
    --bs-btn-bg: var(--brand-marrom-escuro);
    --bs-btn-border-color: var(--brand-marrom-escuro);
    --bs-btn-color: var(--brand-branco-sujo);
    /* Hover */
    --bs-btn-hover-bg: var(--brand-marrom-medio);
    --bs-btn-hover-border-color: var(--brand-marrom-medio);
    /* Active */
    --bs-btn-active-bg: var(--brand-marrom-medio);
    --bs-btn-active-border-color: var(--brand-marrom-medio);
    /* Focus */
    --bs-btn-focus-shadow-rgb: 77, 21, 33;
}

/* ======================================================================== */
/* SEÇÃO: FILTROS E SUMMARY CARDS */
/* ======================================================================== */

.search-bar-wrapper {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    display: flex;
    height: 38px;
    /* Menor */
    border: 1px solid transparent;
}

.search-bar-wrapper .form-control,
.search-bar-wrapper .input-group-text {
    height: 100%;
    border: none;
    font-size: 0.9rem;
}

.search-bar-wrapper .input-group-text {
    background-color: var(--brand-branco-sujo);
}

.filter-tabs {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    padding: 3px;
    background-color: var(--brand-branco-sujo);
    height: 38px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
}

.filter-tabs .nav-item {
    text-align: center;
    flex-grow: 1;
}

.filter-tabs .nav-link {
    color: var(--brand-marrom-medio);
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-align: center;
    width: 100%;
    font-size: 0.85rem;
}

.filter-tabs .nav-link:not(.active):hover {
    color: var(--brand-marrom-escuro);
    font-weight: 600;
}

.filter-tabs .nav-link.active {
    background-color: var(--brand-taupe);
    color: var(--brand-marrom-escuro);
    font-weight: 600;
}

@media (min-width: 992px) {
    .filter-tabs {
        width: fit-content;
        margin-left: auto;
        justify-content: flex-start;
    }

    .filter-tabs .nav-item {
        flex-grow: 0;
    }

    .filter-tabs .nav-link {
        min-width: 80px;
        width: auto;
    }
}

@media (max-width: 420px) {
    .filter-tabs .nav-link {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: 12px;
        min-width: auto;
    }

    .summary-card {
        padding: 8px;
    }

    .summary-card span {
        font-size: 11px;
    }

    .summary-card h4 {
        font-size: 18px;
    }
}

.summary-card {
    background-color: var(--brand-branco-sujo);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    border-left-width: 4px;
    border-left-style: solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.8rem;
    display: block;
    min-height: 80px;
}

.summary-card span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--brand-marrom-medio);
    text-transform: uppercase;
}

.summary-card h4 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-marrom-escuro);
    margin: 0;
}

#card-total {
    border-left-color: var(--brand-taupe);
}

#card-em-andamento {
    border-left-color: var(--brand-bege);
}

#card-ativo {
    border-left-color: #b6d7a8;
}

#card-prospect {
    border-left-color: #ffe599;
}

#card-inativo {
    border-left-color: #ea9999;
}

/* ======================================================================== */
/* SEÇÃO 5: ESTILOS DO BREADCRUMB */
/* ======================================================================== */

#breadcrumb-container {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    background-color: transparent;
}

#breadcrumb-container a {
    color: var(--brand-verde-oliva);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s, text-decoration 0.2s;
}

#breadcrumb-container a:hover {
    color: var(--brand-verde-oliva);
    text-decoration: underline;
}

#breadcrumb-container .separator {
    margin: 0 5px;
    color: var(--brand-bege);
    font-weight: normal;
}

#breadcrumb-container .current-page {
    font-weight: bold;
    color: var(--brand-verde-oliva);
}

.profile-avatar {
    background-color: var(--brand-marrom-escuro);
}

.hub-card {
    border-color: var(--brand-bege);
}

.hub-card .card-icon {
    color: var(--brand-verde-oliva);
}

.message-error {
    color: var(--danger-color);
}

.message-success {
    color: var(--success-color);
}

.hidden-by-role {
    display: none !important;
}

.password-wrapper {
    position: relative;
}

footer small {
    color: var(--brand-bege);
    font-weight: 300;
    font-size: 0.8rem;
}

/* ======================================================================== */
/* SEÇÃO 6: ESTILOS DO MODAL DE CARREGAMENTO */
/* ======================================================================== */

.loading-modal-container {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(77, 21, 33, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out;
}

.inline-loading-container {
    pointer-events: auto;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(77, 21, 33, 0.15);
    z-index: 100;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out;
    border-radius: 6px;
}

.loading-modal-container.is-loading,
.inline-loading-container.is-loading {
    visibility: visible;
    opacity: 1;
    display: flex;
}

.dot-spinner-box {
    background-color: var(--brand-branco-sujo);
    padding: 20px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 101;
    color: var(--brand-marrom-escuro);
    font-weight: 600;
    font-size: 1rem;
}

.spinner-visual-container {
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
}

.spinner-logo-base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    object-fit: contain;
    z-index: 1;
}

.spinner-logo-rotator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.4));
    animation: spin 3s ease-out infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    83.33% {
        transform: translate(-50%, -50%) rotate(720deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}

/* ======================================================================== */
/* SEÇÃO EXTRA: ESTILOS DO PERFIL DO CLIENTE (COMPACTO) */
/* ======================================================================== */

.profile-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-name {
    font-family: 'EB Garamond', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--brand-marrom-escuro);
    margin: 0;
    line-height: 1.2;
}

.profile-subtitle {
    font-size: 0.9rem;
    color: var(--brand-marrom-medio);
    opacity: 0.8;
    display: block;
    margin-top: 2px;
}

.profile-overview-card {
    background-color: #FDFBF9;
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid #E0E0E0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.large-profile-avatar {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-bege), var(--brand-marrom-medio));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    font-family: 'EB Garamond', serif;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.stats-container {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.stats-box {
    border-radius: 8px;
    padding: 0.8rem 1rem;
    text-align: center;
    min-width: 130px;
    flex-grow: 1;
}

.bg-stats-1 {
    background-color: #F2EFE9;
}

.bg-stats-2 {
    background-color: #EBF2E9;
}

.bg-stats-3 {
    background-color: #FAF2F2;
}

.stats-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-marrom-escuro);
}

.stats-box span {
    font-size: 0.75rem;
    color: var(--brand-marrom-medio);
    text-transform: uppercase;
    font-weight: 500;
}

.profile-nav-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.2rem;
    gap: 1.5rem;
}

.profile-nav-link {
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--brand-marrom-medio);
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.profile-nav-link:hover {
    color: var(--brand-marrom-escuro);
}

.profile-nav-link.active {
    color: var(--brand-marrom-escuro);
    border-bottom-color: var(--brand-verde-oliva);
    font-weight: 700;
}

.info-content-card {
    background-color: #FDFBF9;
    border-radius: 10px;
    padding: 2rem;
    border: 1px solid #E0E0E0;
    min-height: 200px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--brand-marrom-medio);
    margin-bottom: 2px;
}

.info-value {
    font-size: 1rem;
    color: var(--brand-marrom-escuro);
}

/* 🟢 AJUSTE: Links de Dados (Sublinhado Fixo) */
.data-action-link {
    /* Cor padrão do texto */
    color: var(--brand-marrom-escuro) !important;

    /* Sublinhado sempre visível */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    /* Linha fina e elegante */
    text-underline-offset: 3px;
    /* Afasta a linha do texto para não colar */

    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Efeito Hover: Apenas muda a cor para Oliva */
.data-action-link:hover {
    color: var(--brand-verde-oliva) !important;
    /* O sublinhado já existe, então só mudamos a cor do texto/linha */
}

.profile-info-icon {
    color: var(--brand-marrom-escuro) !important;
    margin-top: 0.2rem;
    font-size: 1rem;
}

.btn-profile-action {
    font-weight: 700 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
}

.btn-profile-action:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.btn-profile-action i {
    font-weight: bold;
    -webkit-text-stroke: 0.2px;
}

/* 🟢 AJUSTE: Altura Mínima para Cards de Detalhes (Cliente e Contato) */
/* Garante espaço para o Loader aparecer centralizado enquanto os dados carregam */
#view-detalhe-cliente .card-body,
#view-detalhe-contato .card-body {
    min-height: 500px;
    /* Altura fixa mínima */

    position: relative;
    /* Importante para o posicionamento do loader */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* 🟢 NOVO: Estilo para Tags Bloqueadas (Cinza e Não-interativo) */
.company-tag.locked {
    background-color: #e0e0e0 !important;
    /* Cinza claro */
    color: #555 !important;
    /* Texto cinza escuro */
    cursor: default;
    box-shadow: none;
    transform: none;
    /* Remove o efeito de levitação no hover */
}

.company-tag.locked:hover {
    background-color: #e0e0e0 !important;
    /* Garante que não mude de cor no hover */
    color: #555 !important;
}

/* ======================================================================== */
/* ESTILOS DA PÁGINA DE CONSTRUÇÃO */
/* ======================================================================== */

@keyframes construction-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.icon-construction-anim {
    display: inline-block;
    animation: construction-bounce 2s infinite ease-in-out;
    color: var(--brand-marrom-medio);
    transform-origin: bottom;
    font-size: 4rem !important;
}

@keyframes construction-ground-wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

.icon-construction-ground {
    width: 65px;
    height: 12px;
    background-color: var(--brand-verde-oliva);
    border-radius: 50%;
    margin-top: -20px;
    position: relative;
    z-index: 0;
    animation: construction-ground-wiggle 3s infinite ease-in-out;
    transform-origin: center bottom;
    opacity: 0.6;
}

.construction-title {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    color: var(--brand-marrom-escuro);
    margin-top: 15px;
    font-size: 1.5rem;
}

/* ======================================================================== */
/* CORREÇÃO DO DROPDOWN DE PAÍSES */
/* ======================================================================== */

.dropdown-menu {
    z-index: 9999 !important;
    max-height: 250px;
    overflow-y: auto;
    font-size: 0.9rem;
}

.dropdown-item {
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0.3rem 1rem;
}

.dropdown-item:hover {
    background-color: var(--brand-bege);
}

/* ======================================================================== */
/* CORREÇÃO: AUTO-PREENCHIMENTO */
/* ======================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--brand-marrom-escuro) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ======================================================================== */
/* REGRAS DE ROLAGEM E STICKY HEADERS */
/* ======================================================================== */

/* 1. Cabeçalho Global Congelado (Nav + Menu + Breadcrumb) */
#app-header-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Fica acima do conteúdo */
    background-color: var(--brand-marrom-escuro);
    /* Garante que o fundo não seja transparente */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Sombra para separar do conteúdo */
}

/* Ajuste do Breadcrumb dentro do header sticky */
#breadcrumb-container {
    padding-bottom: 15px;
    /* Um pouco mais de espaço antes do conteúdo começar */
    background-color: var(--brand-marrom-escuro);
    /* Fundo sólido */
}

/* 2. Exceção: Sub-cabeçalho Congelado (Tela de Listagem) 
   Ele cola logo abaixo do cabeçalho global.
*/
.sticky-sub-header {
    position: sticky;
    /* Define onde ele deve colar. O valor 130px é a altura aproximada do Header Global.
       Se o header global mudar de altura, esse valor precisa de ajuste fino. */
    top: 130px;
    z-index: 1020;
    /* Fica abaixo do Header Global (1030), mas acima da tabela */
    background-color: var(--brand-marrom-escuro);
    /* Mesma cor de fundo para continuidade */

    /* Ajustes para cobrir a largura total e evitar buracos visuais */
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Ajuste responsivo para a altura do topo (Mobile costuma ser maior ou menor dependendo do menu) */
@media (max-width: 992px) {
    .sticky-sub-header {
        top: 120px;
        /* Ajuste fino para mobile */
    }
}

/* ======================================================================== */
/* ESTILOS DO MULTI-SELECT (COM CHECKBOXES) */
/* ======================================================================== */

.multi-select-dropdown-menu {
    padding: 10px;
    min-width: 100%;
    /* Garante que o menu tenha a largura do botão */
}

.multi-select-list {
    /* 🟢 AJUSTE: Limite a altura para 4 linhas (aprox. 140px) e adiciona rolagem */
    max-height: 100px;
    overflow-y: auto;
    margin-top: 3px;
}

.multi-select-item {
    padding: 4px 0;
}

.multi-select-item:hover {
    background-color: #f8f9fa;
}

/* Ajuste fino para o texto do botão parecer um input */
.btn-multi-select {
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #212529;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-multi-select::after {
    margin-left: auto;
    /* Empurra a setinha para a direita */
}

/* 🟢 NOVO: Estilo das Tags de Seleção Múltipla */
.selected-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
    min-height: 0;
    /* Ocupa zero se vazio */
}

.company-tag {
    background-color: var(--brand-verde-oliva);
    /* Cor da marca */
    color: white;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 15px;
    /* Arredondado (Pill) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

/* 🟢 CORREÇÃO: Hover APENAS quando está ATIVO (Não Locked) */
.company-tag:not(.locked):hover {
    background-color: var(--brand-marrom-escuro);
    transform: translateY(-1px);
    /* Animação de levitação */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 🟢 NOVO: Garante que NADA aconteça no Hover se estiver Bloqueado */
.company-tag.locked:hover {
    background-color: #e0e0e0 !important;
    /* Cor cinza (estado inativo) */
    transform: none !important;
    /* Desliga a animação */
    box-shadow: none !important;
    /* Desliga a sombra de hover */
    cursor: default !important;
}

.tag-remove-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    transition: all 0.2s ease;
    /* Adicionado transição */
}

.tag-remove-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--brand-marrom-escuro);
    transform: scale(1.2);
    /* Adicionado animação */
}

/* 🟢 NOVO: Utilitário para botões mais robustos (Pedido do CEP) */
.btn-action-bold {
    border-width: 2px !important;
}

.btn-action-bold i {
    font-weight: bold !important;
    /* Tenta forçar negrito na fonte */
    -webkit-text-stroke: 0.5px;
    /* Engrossa o traço do ícone levemente */
}