/* ══════════════════════════════════════════════════════════════════════════
   CARBONSTONE REAL ESTATE — Design System
   Inspirado C6 Bank: fundo branco, sidebar cinza, amarelo/dourado
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fontes ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variáveis ──────────────────────────────────────────────────────────── */
:root {
    --yellow:    #F5C518;
    --yellow2:   #E6B800;
    --gray-sidebar: #1A1A1A;
    --gray-dark:    #2C2C2C;
    --gray-mid:     #555;
    --gray-light:   #F0F0F0;
    --white:        #FFFFFF;
    --border:       #E0E0E0;
    --text:         #1A1A1A;
    --text-muted:   #888;
    --green:        #22C55E;
    --red:          #EF4444;
    --blue:         #3B82F6;
    --teal:         #14B8A6;
}

/* ── Reset geral ────────────────────────────────────────────────────────── */
* { font-family: 'Inter', 'Segoe UI', sans-serif !important; box-sizing: border-box; }
body { background: var(--white) !important; color: var(--text) !important; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--gray-light); }
::-webkit-scrollbar-thumb { background: var(--yellow); border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR — cinza escuro C6-style
   ══════════════════════════════════════════════════════════════════════════ */
#main-sidebar {
    background: var(--gray-sidebar) !important;
    border-right: none !important;
}

/* Logo area */
#main-sidebar > div:first-child {
    border-bottom: 1px solid rgba(245,197,24,.2) !important;
    padding: 16px 16px 12px !important;
}

/* Botões de nav */
#main-sidebar button {
    color: rgba(255,255,255,.55) !important;
    border-left: 3px solid transparent !important;
    transition: all .15s !important;
    border-radius: 0 !important;
}
#main-sidebar button:hover {
    background: rgba(245,197,24,.08) !important;
    color: var(--yellow) !important;
    border-left-color: var(--yellow) !important;
}

/* Sidebar stats */
#sidebar-stats {
    background: var(--gray-sidebar) !important;
    border-top: 1px solid rgba(245,197,24,.15) !important;
}
#sidebar-user-block {
    border-top: 1px solid rgba(245,197,24,.15) !important;
    background: rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTEÚDO PRINCIPAL — fundo branco
   ══════════════════════════════════════════════════════════════════════════ */
#main-content {
    background: #F7F7F7 !important;
    color: var(--text) !important;
}
#page-content { padding: 24px 28px !important; }

/* Cards brancos com sombra */
.card {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    color: var(--text) !important;
}
.card-body { color: var(--text) !important; }

/* Tabelas */
.table { color: var(--text) !important; background: var(--white) !important; }
.table th { color: #888 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--border) !important; }
.table td { border-bottom: 1px solid #F0F0F0 !important; color: var(--text) !important; }
.table-hover tbody tr:hover { background: #FFFBEA !important; }

/* Células com fundo escuro (badges de deságio, status) — texto branco */
.table td[style*="background"], td[style*="background:#"], td[style*="background: #"] { color: white !important; }

/* Forçar texto visível em todas as células da tabela de ranking */
#page-content table td, #page-content table th { color: var(--text) !important; }
#page-content table td span, #page-content table td div { color: inherit; }

/* Células com fundo escuro geradas pelo _db() — manter cor original */
td span[style*="background"], td div[style*="background"] { color: inherit !important; }

/* Inputs dentro da tabela (status dropdown, busca) */
.table input, .table select { color: var(--text) !important; }

/* Inputs */
input.form-control, textarea.form-control, .form-control {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
}
input.form-control:focus, textarea.form-control:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,.15) !important;
}

/* Dropdowns Dash */
.Select-control {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
}
.Select-menu-outer { background: var(--white) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; }
.Select-option { background: var(--white) !important; color: var(--text) !important; }
.Select-option.is-focused { background: #FFFBEA !important; color: var(--text) !important; }
.Select-value-label { color: var(--text) !important; }
.Select-placeholder { color: var(--text-muted) !important; }

/* Títulos */
h4, h5 { color: var(--text) !important; font-weight: 700 !important; }

/* Botão primário */
.btn-warning {
    background: var(--yellow) !important;
    border-color: var(--yellow) !important;
    color: #111 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
.btn-warning:hover { background: var(--yellow2) !important; border-color: var(--yellow2) !important; }
.btn-success { border-radius: 8px !important; }
.btn-secondary { border-radius: 8px !important; }
.btn-danger  { border-radius: 8px !important; }

/* Slider */
.rc-slider-track { background: var(--yellow) !important; }
.rc-slider-handle { border-color: var(--yellow) !important; }

/* Modal */
.modal-content { background: var(--white) !important; color: var(--text) !important; border-radius: 16px !important; }
.modal-header { border-bottom: 1px solid var(--border) !important; background: var(--white) !important; }
.modal-footer { border-top: 1px solid var(--border) !important; background: var(--white) !important; }

/* Plotly charts — fundo branco */
.js-plotly-plot .plotly { background: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */
#login-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111 !important;
    overflow: hidden !important;
}
#login-overlay[style*="display: none"],
#login-overlay[style*="display:none"] { display: none !important; }

/* inputs escuros no login */
#login-overlay input.form-control {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: white !important;
}
#login-overlay input.form-control:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,.2) !important;
}
#login-overlay input.form-control::placeholder { color: rgba(255,255,255,.3) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   TABELAS — forçar branco independente do tema Bootstrap
   ══════════════════════════════════════════════════════════════════════════ */
.table, .table-sm { 
    color: #1A1A1A !important; 
    background: white !important; 
}
.table thead th {
    color: #888 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #E0E0E0 !important;
    background: white !important;
    font-weight: 600;
}
.table tbody tr td {
    color: #1A1A1A !important;
    border-bottom: 1px solid #F0F0F0 !important;
    background: transparent !important;
    vertical-align: middle !important;
}
.table-hover tbody tr:hover td {
    background: #FFFBEA !important;
    color: #1A1A1A !important;
}
/* Dropdown do Bootstrap dentro da tabela */
.dropdown-menu {
    background: white !important;
    border: 1px solid #E0E0E0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}
.dropdown-item { color: #1A1A1A !important; }
.dropdown-item:hover { background: #FFFBEA !important; }

/* Modal */
.modal-content { background: white !important; color: #1A1A1A !important; }
.modal-header, .modal-footer { background: white !important; border-color: #E0E0E0 !important; }
.modal-title { color: #1A1A1A !important; }

/* Badges e spans coloridos */
.badge { border-radius: 6px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HAMBÚRGUER
   ══════════════════════════════════════════════════════════════════════════ */
#hamburger-btn { display: none !important; }
#sidebar-overlay { display: none; position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.55); z-index: 150; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE ≤ 768px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #hamburger-btn {
        display: flex !important;
        position: fixed; top: 12px; left: 12px; z-index: 300;
        background: var(--gray-sidebar);
        border: 1px solid rgba(245,197,24,.4);
        border-radius: 10px;
        color: var(--yellow);
        font-size: 22px; width: 44px; height: 44px;
        cursor: pointer; align-items: center; justify-content: center;
        box-shadow: 0 2px 12px rgba(0,0,0,.3);
    }
    #main-sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 200 !important; width: 230px !important; }
    #main-sidebar.sidebar-open { transform: translateX(0); }
    #main-content { margin-left: 0 !important; padding-top: 64px !important; }
    #page-content { padding: 14px 10px !important; }
    table { min-width: 480px; }
    .card-body { overflow-x: auto; }
    .row { flex-direction: column; }
    [class*="col-md-"] { width:100% !important; max-width:100% !important; flex: 0 0 100% !important; padding: 4px 0 !important; }
    input, textarea, .form-control { font-size: 16px !important; min-height: 44px !important; }
    .btn { min-height: 44px !important; }
    h4 { font-size: 16px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — scroll independente (Safari / Chrome / Firefox / Edge)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container principal: coluna flex com altura fixa da janela */
#main-sidebar {
    display: -webkit-box      !important;
    display: -webkit-flex     !important;
    display: -ms-flexbox      !important;
    display: flex             !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column     !important;
    flex-direction: column         !important;
    height: 100vh             !important;
    max-height: 100vh         !important;
    overflow: hidden          !important;   /* sidebar em si NÃO rola */
    -webkit-overflow-scrolling: auto !important;
}

/* Logo: não encolhe */
#main-sidebar > div:first-child {
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0   !important;
    flex-shrink: 0         !important;
}

/* Área de navegação: ocupa espaço restante E rola */
#sidebar-nav {
    -webkit-box-flex: 1    !important;
    -webkit-flex: 1 1 auto !important;
    -ms-flex: 1 1 auto     !important;
    flex: 1 1 auto         !important;
    min-height: 0          !important;  /* CRITICAL — sem isso o Safari não rola */
    overflow-x: hidden     !important;
    overflow-y: auto       !important;
    -webkit-overflow-scrolling: touch !important;  /* scroll suave iOS/Safari */
}

/* Scrollbar fina dourada — Chrome / Edge / Safari 15.4+ */
#sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
#sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
#sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(245, 197, 24, 0.4);
    border-radius: 4px;
}
#sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 197, 24, 0.75);
}
/* Firefox */
#sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(245,197,24,.4) transparent;
}

/* Rodapé (usuário + logout): não encolhe, sempre visível */
#main-sidebar > div:last-child {
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0   !important;
    flex-shrink: 0         !important;
}

/* Mobile: mesmo comportamento */
@media (max-width: 768px) {
    #main-sidebar {
        height: 100vh   !important;
        overflow: hidden !important;
    }
    #sidebar-nav {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
    }
}

/* Cadastro modal — acima do login overlay (z-index: 9999) */
#modal-cadastro-pub { z-index: 10100 !important; }
#modal-cadastro-pub .modal-dialog { z-index: 10101 !important; }
.modal-backdrop { z-index: 10050 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL CADASTRO — deve aparecer acima do login-overlay (z-index 9999)
   ══════════════════════════════════════════════════════════════════════════ */
#modal-cadastro-pub {
    z-index: 10500 !important;
}
#modal-cadastro-pub .modal-dialog {
    z-index: 10501 !important;
}
/* Backdrop do modal acima do overlay de login */
#modal-cadastro-pub ~ .modal-backdrop,
.modal-backdrop {
    z-index: 10499 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL CADASTRO PÚBLICO — acima do login-overlay (z-index 9999)
   Bootstrap renderiza o backdrop como irmão do modal no body
   ══════════════════════════════════════════════════════════════════════════ */
#modal-cadastro-pub.modal,
#modal-cadastro-pub.modal.show {
    z-index: 10500 !important;
}
#modal-cadastro-pub .modal-backdrop,
body > .modal-backdrop {
    z-index: 10499 !important;
}
/* Garante que o modal-dialog fica acima */
#modal-cadastro-pub .modal-dialog {
    z-index: 10501 !important;
    position: relative;
}