/* ============================================================
   FMABC NF-e — Identidade Visual
   Verde primário: #2E7D32 | Verde escuro: #1B5E20
   Azul navy: #283593    | Fundo mint: #F1F8E9
   ============================================================ */

:root {
    --fmabc-green:        #2E7D32;
    --fmabc-green-dark:   #1B5E20;
    --fmabc-green-light:  #4CAF50;
    --fmabc-navy:         #283593;
    --fmabc-mint:         #F1F8E9;
    --fmabc-sidebar-w:    240px;
    --fmabc-topbar-h:     52px;
}

/* ---- Base ---- */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

body.fmabc-body {
    background-color: #f4f6f8;
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
}

/* ---- Sidebar ---- */
#sidebar.fmabc-sidebar {
    width: var(--fmabc-sidebar-w);
    min-height: 100vh;
    background: linear-gradient(180deg, var(--fmabc-green-dark) 0%, var(--fmabc-green) 100%);
    color: #fff;
    flex-shrink: 0;
    transition: width .25s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

#sidebar.sidebar-hidden {
    width: 0;
    overflow: hidden;
}

.sidebar-brand {
    background: rgba(255,255,255,.92);
    border-radius: 0 0 .5rem .5rem;
    margin: 0 .5rem .25rem;
}

.sidebar-divider {
    border-color: rgba(255,255,255,.2);
    margin: .25rem 1rem;
}

.sidebar-link {
    color: rgba(255,255,255,.85) !important;
    border-radius: .375rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    transition: background .15s;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

/* ---- Top bar ---- */
.fmabc-topbar {
    background: var(--fmabc-navy);
    height: var(--fmabc-topbar-h);
    flex-shrink: 0;
}

/* ---- Conteúdo ---- */
.fmabc-content {
    background: #f4f6f8;
}

/* ---- Footer ---- */
.fmabc-footer {
    background: #e8eaf0;
    color: #666;
    font-size: .8rem;
    border-top: 1px solid #ddd;
}

/* ---- Cards ---- */
.card {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-radius: .5rem;
}

.card-header {
    background: var(--fmabc-mint);
    border-bottom: 2px solid var(--fmabc-green);
    font-weight: 600;
    color: var(--fmabc-green-dark);
}

/* ---- Botões ---- */
.btn-primary {
    background-color: var(--fmabc-green) !important;
    border-color: var(--fmabc-green) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--fmabc-green-dark) !important;
    border-color: var(--fmabc-green-dark) !important;
}

.btn-outline-primary {
    color: var(--fmabc-green) !important;
    border-color: var(--fmabc-green) !important;
}
.btn-outline-primary:hover {
    background-color: var(--fmabc-green) !important;
    color: #fff !important;
}

/* ---- Badges de status ---- */
.badge-rascunho    { background-color: #9E9E9E; }
.badge-enviado     { background-color: var(--fmabc-navy); }
.badge-parcial     { background-color: #F57C00; }
.badge-concluido   { background-color: var(--fmabc-green); }

.badge-conferido   { background-color: var(--fmabc-green); }
.badge-divergente  { background-color: #C62828; }
.badge-pendente    { background-color: #9E9E9E; }
.badge-naoencontrado { background-color: #E65100; }

/* ---- Tabelas ---- */
.table thead th {
    background-color: var(--fmabc-mint);
    color: var(--fmabc-green-dark);
    font-weight: 600;
    border-bottom: 2px solid var(--fmabc-green);
}

.table tbody tr:hover {
    background-color: #f0f7f0;
}

/* ---- Login page ---- */
.login-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--fmabc-green-dark) 0%, var(--fmabc-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: .75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ---- Login — placeholder da senha bem claro para não parecer preenchido ---- */
.login-senha-placeholder::placeholder {
    color: #bbb;
    opacity: 1;
}

/* ---- Focus outline ---- */
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(46,125,50,.35);
}

/* ---- Sidebar — usuário e logout ---- */
.sidebar-user-name {
    color: rgba(255,255,255,.80);
    font-size: .8rem;
}

.btn-sidebar-logout {
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.35) !important;
    background: transparent !important;
}
.btn-sidebar-logout:hover,
.btn-sidebar-logout:focus {
    color: #fff !important;
    border-color: #ef5350 !important;
    background-color: #ef5350 !important;
}

/* ---- Responsivo ---- */
@media (max-width: 991.98px) {
    #sidebar.fmabc-sidebar {
        position: fixed;
        z-index: 1050;
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    #sidebar.fmabc-sidebar.sidebar-open {
        width: var(--fmabc-sidebar-w);
        overflow-y: auto;
    }
}

/* ---- Backdrop do sidebar (mobile) ---- */
#sidebarBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
}