/* public/assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 80px;
    --topbar-height: 60px;
    --primary-color: #0d6efd;
    --sidebar-bg: #212529;
    --sidebar-hover: #2c3034;
    --topbar-bg: #000000;
    --bg-color: #f4f6f9;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    overflow-x: hidden;
}

/* --- LAYOUT --- */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* --- SIDEBAR --- */
#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: #fff;
    transition: all 0.3s;
    min-height: 100vh;
    z-index: 1000;
    position: relative;
}

/* CORREÇÃO: Altura da Logo Aumentada */
.sidebar-header {
    padding: 10px;
    background: #1a1d20;
    text-align: center;
    height: 100px; /* Mais alto conforme pedido */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    max-width: 90%;
    max-height: 80px;
    border-radius: 8px;
    object-fit: contain;
}

#sidebar ul.components {
    padding: 10px 0;
}

#sidebar ul li {
    position: relative;
}

/* Links do Menu Principal */
#sidebar ul li a {
    padding: 12px 20px;
    font-size: 0.95em;
    display: block;
    color: #c2c7d0;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 3px solid transparent;
}

#sidebar ul li a:hover, #sidebar ul li a.active {
    color: #fff;
    background: var(--sidebar-hover);
    border-left: 3px solid var(--primary-color);
}

/* Ícones da Sidebar */
#sidebar ul li a i.menu-icon {
    font-size: 1.2em;
    min-width: 35px; /* Espaço fixo para o ícone */
    text-align: center;
}

/* Seta do Dropdown */
.arrow-icon {
    font-size: 0.8em;
    transition: transform 0.3s;
}

a[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}

/* --- SUB-MENU (Sanfona) --- */
.sub-menu {
    background: #2c3034;
    list-style: none;
    padding-left: 0;
}

/* Sub-itens normais (sem ícone) */
.sub-menu a {
    padding-left: 55px !important;
    font-size: 0.9em !important;
    border-left: none !important;
}

/* Sub-itens COM ÍCONE (Caso do Menu Principal) */
.sub-menu a.has-icon {
    padding-left: 25px !important; /* Menos recuo pois tem ícone */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* --- ESTADO RECOLHIDO (COLLAPSED) --- */
@media (min-width: 768px) {
    #sidebar.collapsed {
        min-width: var(--sidebar-collapsed-width);
        max-width: var(--sidebar-collapsed-width);
    }
    
    #sidebar.collapsed .sidebar-header {
        height: 60px; /* Reduz altura quando fecha */
        padding: 5px;
    }
    
    /* Esconde textos e setas */
    #sidebar.collapsed .logo-img,
    #sidebar.collapsed span.menu-text, 
    #sidebar.collapsed .arrow-icon {
        display: none; 
    }

    /* Centraliza ícones principais */
    #sidebar.collapsed ul li a {
        justify-content: center;
        padding: 15px 0;
    }
    
    #sidebar.collapsed ul li a i.menu-icon {
        margin: 0;
    }

    /* CORREÇÃO DO BUG VISUAL: Submenu Flutuante com Fundo Escuro */
    #sidebar.collapsed .sub-menu {
        position: fixed; /* Fixa na tela para não depender do pai */
        left: var(--sidebar-collapsed-width); /* Cola na direita da sidebar */
        width: 240px;
        background: #2c3034; /* Fundo escuro OBRIGATÓRIO */
        z-index: 9999;
        box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
        border-radius: 0 8px 8px 0;
        display: none; /* Esconde por padrão */
        padding: 10px 0;
    }

    /* Mostra o submenu quando passa o mouse no LI (Hover) ou se estiver expandido via JS */
    #sidebar.collapsed ul li:hover .sub-menu {
        display: block;
        top: inherit; /* Pega a altura do mouse/item automaticamente via JS se precisar, ou CSS puro */
    }
    
    /* Ajuste fino para CSS puro de hover no collapsed */
    #sidebar.collapsed ul li {
        position: static; /* Para o submenu fixed funcionar melhor ou relative */
        position: relative;
    }
    
    #sidebar.collapsed .sub-menu {
        position: absolute;
        top: 0;
        left: 100%;
    }

    #sidebar.collapsed .sub-menu a {
        padding-left: 20px !important;
        text-align: left;
    }
}

/* --- TOPBAR & CONTENT --- */
.main-content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

.topbar {
    height: var(--topbar-height);
    background: var(--topbar-bg);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* CORREÇÃO: User Area Alinhada */
.user-area {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre sino e usuário */
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    padding: 5px 10px;
    border-radius: 50px;
    transition: 0.2s;
}

.user-profile:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #28a745; /* Borda verde status online */
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.user-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* --- CORREÇÃO: REMOVER SETA DUPLA DO BOOTSTRAP --- */
#sidebar .dropdown-toggle::after {
    display: none !important; /* Remove o triângulo padrão do Bootstrap */
}


/* --- CORREÇÃO: ALINHAMENTO DO MENU PRINCIPAL --- */
.sub-menu a.has-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* OBRIGATÓRIO: Traz o texto para a esquerda */
    gap: 15px; /* Espaço entre o ícone e o texto */
    padding-left: 25px !important; /* Recuo para alinhar com os títulos de baixo */
    border-left: none !important;
}

/* Garante que os ícones tenham a mesma largura para o texto ficar alinhado */
.sub-menu a.has-icon i {
    width: 25px; 
    text-align: center;
    margin-right: 0; /* O gap já cuida do espaço */
}


/* --- ESTILIZAÇÃO DA TABELA DE CLIENTES --- */
.table-data {
    font-family: Arial, sans-serif !important; /* Força Arial como pedido */
    font-size: 0.95rem; /* Tamanho padronizado */
    font-weight: 400; /* Normal (sem negrito) */
    color: #333; /* Cor sólida, sem ser cinza claro */
    vertical-align: middle;
}

/* Mantém o Nome em negrito e com a fonte bonita do sistema ou Arial se preferir */
.table-name {
    font-weight: bold !important;
    font-size: 1rem;
    color: #000;
}

/* --- ESTILO DOS PLACEHOLDERS (TEXTO DE EXEMPLO) --- */
/* Aplica cor cinza claro e força a opacidade para ficar suave */
::placeholder {
    color: #adb5bd !important; /* Cinza Bootstrap suave */
    opacity: 0.6 !important;   /* Deixa levemente transparente */
    font-weight: 300;          /* Fonte mais fina */
}

/* Garante compatibilidade com navegadores antigos/diferentes */
:-ms-input-placeholder { color: #adb5bd !important; opacity: 0.6 !important; }
::-ms-input-placeholder { color: #adb5bd !important; opacity: 0.6 !important; }