/* =========================================
   ESTRUTURA PRINCIPAL (FLEXBOX FIX)
   ========================================= */

html,
body {
    height: -webkit-fill-available;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Container que segura a aplicação inteira */
.layout-container {
    display: flex;
    flex-direction: column;

    height: 100dvh;
    height: -webkit-fill-available;
    /* Para Safari/iOS */

    width: 100%;
    background-color: var(--bg-body);
}

/* Área de Conteúdo (Onde o scroll acontece) */
.content-app {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    position: relative;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior: none;
}

.content-app::-webkit-scrollbar { display: none; }

#dynamic-content {
    padding: 1.5rem 1.25rem;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}

/* =========================================
   MOBILE NAVBAR (Menu Inferior)
   ========================================= */
.mobile-navbar {
    position: fixed; 
    bottom: 0;
    left: 0;
    
    width: 100%;
    height: 4.5rem; 
    padding-bottom: env(safe-area-inset-bottom); 
    box-sizing: content-box; 
    
    z-index: 1000;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
}

.mobile-navbar ul {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; 
    list-style: none;
}

.mobile-navbar li {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 12px;
    white-space: nowrap;
    gap: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;

    border-top: 3px solid transparent;
}

.mobile-navbar li.selected {
    border-top: 3px solid var(--brand-neon); 
    color: var(--brand-neon);
}

.mobile-navbar li:hover {
    color: var(--brand-neon-hover);
}

.mobile-navbar li i {
    font-size: 22px; 
}

.mobile-navbar li.sign-out {
    color: var(--status-danger);
}

/* =========================================
   TOPBAR (Cabeçalho)
   ========================================= */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    background-color: var(--bg-surface);
    flex-shrink: 0;
    min-height: 73px;
}

/* --- NOVO GRUPO DIREITO DA TOPBAR --- */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topbar-actions {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.action-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.1rem;
}

.action-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--brand-neon);
}

/* (O restante da Topbar se mantém igual) */
.topbar .desktop-title {
    display: none;
    /* Esconde título no mobile */
}

.topbar .system-status {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--brand-neon);
    background-color: var(--bg-highlight);
    padding: .25rem 1rem;
    border: 1px solid var(--border-detach);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 10px rgba(0, 224, 131, 0.05);
    transition: all 0.3s ease;
}

.topbar .system-status .status {
    font-weight: 600;
}

/* 🟢 ONLINE (Padrão) */
.topbar .system-status i {
    font-size: 10px;
    color: var(--brand-neon);
    text-shadow: 0 0 8px var(--brand-neon);
    animation: pulseStatus 2s infinite;
}

/* 🔴 OFFLINE / ERRO */
.topbar .system-status.error {
    color: #ff4d4d;
    border-color: #ff4d4d55;
    background-color: rgba(255, 77, 77, 0.1);
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.05);
}

.topbar .system-status.error i {
    text-shadow: 0 0 8px #ff4d4d;
    color: #ff4d4d;
}

/* 🟠 MANUTENÇÃO (Futuro) */
.topbar .system-status.maintenance {
    color: #FFB800;
    border-color: #FFB80055;
    background-color: rgba(255, 184, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.05);
}

.topbar .system-status.maintenance i {
    text-shadow: 0 0 8px #FFB800;
    color: #FFB800;
}

@keyframes pulseStatus {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* =========================================
   SIDEBAR (Desktop - Escondida no Mobile)
   ========================================= */
.sidebar {
    display: none;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

/* =========================================
   DESKTOP (Telas Grandes)
   ========================================= */
@media (min-width: 1024px) {
    .topbar-actions {
        display: flex;
    }

    .layout-container {
        flex-direction: row;
    }

    .mobile-navbar {
        display: none;
    }

    .sidebar {
        display: flex;
        background-color: var(--bg-surface);
        border-right: 1px solid var(--border-subtle);
        height: 100vh;
        width: 260px;
        flex-direction: column;
        flex-shrink: 0;
    }

    /* --- ESTILO DA LOGO (EXPANDIDA) --- */
    .sidebar .logo-area {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-subtle);
        min-height: 73px;
        /* Garante que a linha não quebre ao encolher */
        display: flex;
        align-items: center;
        justify-content: flex-start;
        white-space: nowrap;
        /* Impede quebra de texto */
        transition: all 0.3s ease;
        overflow: hidden;
    }

    /* Prepara o texto para animar o encolhimento */
    .sidebar .logo-area .logo-text {
        transition: all 0.3s ease;
    }

    /* --- ESTADO COMPRIMIDO (COLLAPSED) --- */
    .sidebar.collapsed {
        width: 80px;
        /* LARGURA ENCOLHIDA */
    }

    /* Centraliza a logo reduzida e tira o padding lateral */
    .sidebar.collapsed .logo-area {
        padding: 1rem 0;
        justify-content: center;
    }

    /* DIMINUI a fonte da logo em vez de esconder */
    .sidebar.collapsed .logo-area .logo-text {
        font-size: 13px;
        /* Tamanho exato para caber com folga nos 80px */
        letter-spacing: 0;
    }

    /* Centraliza ícones do menu */
    .sidebar.collapsed .navbar li {
        justify-content: center;
        padding: 0.75rem 0;
        /* Ajusta padding */
    }

    /* Esconde os textos do menu */
    .sidebar.collapsed .navbar li span {
        display: none;
    }

    /* Aumenta o ícone no modo comprimido */
    .sidebar.collapsed .navbar li i {
        font-size: 1.25rem;
    }

    /* Modifica o rodapé de usuário */
    .sidebar.collapsed .account-details {
        flex-direction: column;
        justify-content: center;
        padding: 1rem 0;
        gap: 1.25rem;
    }

    .sidebar.collapsed .account-details .text-content {
        display: none;
    }

    /* Estilos internos da Sidebar (MANTIDOS) */
    .sidebar .navbar {
        padding: 1rem 1.5rem;
    }

    .sidebar.collapsed .navbar {
        padding: 1rem 0.5rem;
        /* Menos padding lateral quando comprimido */
    }

    .sidebar .navbar ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .sidebar .navbar li {
        padding: 0.75rem 1rem;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;
        font-size: 14px;
        transition: all .2s;
        cursor: pointer;
        color: var(--text-secondary);
        white-space: nowrap;
        /* Essencial para o collapse não quebrar texto */
    }

    .sidebar .navbar li.selected {
        background-color: var(--bg-highlight);
        border-left: 2px solid var(--brand-neon);
        color: var(--brand-neon);
    }

    .sidebar .navbar li:not(.selected):hover {
        background-color: var(--bg-surface-hover);
        color: var(--text-primary);
    }

    .sidebar .account-details {
        margin-top: auto;
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-top: auto;
        border-top: 1px solid var(--border-subtle);
        white-space: nowrap;
    }

    .sidebar .account-details .user-info {
        display: flex;
        align-items: center;
        gap: .75rem;
        overflow: hidden;
        /* Proteção extra */
    }

    .sidebar .account-details .text-content {
        min-width: 0;
        flex: 1;
    }

    .sidebar .account-details .user-img {
        width: 36px;
        height: 36px;
        background-color: var(--brand-neon);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: black;
        font-weight: bold;
        flex-shrink: 0;
        /* Impede que o avatar amasse */
    }

    .sidebar .account-details .username {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar .account-details .company-name {
        font-size: 12px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar .account-details .logout-btn {
        padding: .5rem;
        background-color: rgba(255, 77, 77, 0.1);
        color: var(--status-danger);
        border-radius: var(--radius-sm);
        border: none;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        transition: all .3s;
        cursor: pointer;
        flex-shrink: 0;
    }

    .sidebar .account-details .logout-btn:hover {
        background-color: rgba(255, 77, 77, 0.2);
    }

    /* 3. Ajustes de Topbar e Conteúdo para Desktop */
    .topbar .desktop-title {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .topbar .mobile-logo {
        display: none;
    }

    .content-app #dynamic-content {
        padding: 2rem;
    }
}

/* =========================================
   WIDGET DE COBRANÇA (PENDENTE/TRIAL)
   ========================================= */
.billing-widget {
    background-color: #0F0F11;
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px; /* Reduzido para ficar mais fino */
    margin: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Menos espaço entre os textos e o botão */
}

.bw-icon {
    width: 28px; height: 28px; /* Reduzido de 32px */
    background-color: rgba(255, 193, 7, 0.1);
    color: #FFC107;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1rem; /* Ícone ligeiramente menor */
    flex-shrink: 0;
}

.bw-btn {
    background-color: #FFC107;
    color: #000;
    border: none;
    padding: 6px 0; /* Botão menos "gordinho" */
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.billing-widget.hidden { display: none !important; }

.bw-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bw-text { display: flex; flex-direction: column; }
.bw-title { color: var(--text-secondary); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; }
.bw-desc { color: #FFC107; font-size: 0.85rem; font-weight: 600; }
.bw-btn:hover { background-color: #e0a800; transform: translateY(-1px); }

/* WIDGET MOBILE (Flutuante acima da Navbar) */
.mobile-widget {
    position: fixed;
    bottom: calc(4.5rem + 1rem); /* Altura da navbar + margem */
    left: 1rem; right: 1rem;
    margin: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.mobile-widget .bw-btn { width: auto; padding: 8px 16px; }

/* Adiciona o hover do botão novo de admin */
.admin-action-group .btn-icon.charge:hover { color: #FFC107; background-color: rgba(255, 193, 7, 0.1); }

/* Quando o widget aparece, ELE assume a função de empurrar tudo pra baixo */
#sidebar-billing-widget:not(.hidden) {
    margin-top: auto;
    margin-bottom: 1rem; /* Dá o respiro antes da linha do perfil */
}

/* Quando o widget aparece, o perfil perde a margem automática para grudar embaixo do widget */
#sidebar-billing-widget:not(.hidden) + .account-details {
    margin-top: 0;
}

/* =========================================
   EFEITOS DE URGÊNCIA (DESKTOP WIDGETS)
   ========================================= */

/* Animação de pulsação suave para chamar atenção */
@keyframes pulse-glow-warning {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

@keyframes pulse-glow-trial {
    0% { box-shadow: 0 0 0 0 rgba(0, 163, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 163, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 163, 255, 0); }
}

/* WIDGET PENDENTE (Amarelo Urgente) */
#sidebar-billing-widget:not(.hidden) {
    border: 1px solid #FFC107 !important;
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.02));
    animation: pulse-glow-warning 2s infinite;
}

/* WIDGET TRIAL (Azul Tecnológico) */
#sidebar-trial-widget:not(.hidden) {
    border: 1px solid #00A3FF !important;
    background: linear-gradient(145deg, rgba(0, 163, 255, 0.15), rgba(0, 163, 255, 0.02));
    animation: pulse-glow-trial 2.5s infinite;
}

/* Deixa as fontes mais "Gritantes" */
.billing-widget.compact-widget .bw-title {
    font-weight: 800;
    letter-spacing: 0.5px;
}
.billing-widget.compact-widget .bw-icon {
    transform: scale(1.15); /* Aumenta o ícone levemente */
}