/**
 * =============================================================================
 * TOPBAR CSS
 * =============================================================================
 * Estilos da barra superior
 * =============================================================================
 */

/* =============================================================================
   1. VARIÁVEIS CSS
   ============================================================================= */

.top-bar,
.fullscreen-btn {
    /* Dimensões */
    --tb-height: var(--topbar-height, 50px);
    --tb-z-index: var(--topbar-z-index, 100);
    --tb-empresa-max: 500px;
    --tb-empresa-max-mobile: 250px;
    --tb-select-min: 200px;
    --tb-select-max: 300px;
    --tb-select-min-mobile: 120px;
    --tb-select-max-mobile: 180px;

    /* Cores */
    --tb-bg: var(--topbar-bg, #f8f9fa);
    --tb-border: var(--topbar-border, #dee2e6);
    --tb-primary: var(--color-primary, #0d6efd);
    --tb-btn-color: #333;
    --tb-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --tb-btn-hover-bg-light: #f0f0f0;

    /* Espaçamentos */
    --tb-space-xs: 5px;
    --tb-space-sm: 8px;
    --tb-space-md: 10px;
    --tb-space-lg: 12px;
    --tb-space-xl: 15px;

    /* Bordas */
    --tb-radius: var(--border-radius-md, 8px);

    /* Transições */
    --tb-transition: var(--transition-base, 0.3s ease);

    /* Sombras */
    --tb-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --tb-shadow-md: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.2));

    /* Tipografia */
    --tb-font-lg: 1.1rem;
}

/* =============================================================================
   2. TOPBAR - BASE
   ============================================================================= */

.top-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--tb-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--tb-space-xl);
    background-color: var(--tb-bg);
    border-bottom: 1px solid var(--tb-border);
    z-index: var(--tb-z-index);
}

.top-bar.top-bar-buttons-only {
    justify-content: flex-end;
}

/* =============================================================================
   3. SELETOR DE EMPRESA
   ============================================================================= */

.top-bar-empresa {
    flex: 1;
    max-width: var(--tb-empresa-max);
}

.empresa-selector-compact select {
    min-width: var(--tb-select-min);
    max-width: var(--tb-select-max);
    border-color: var(--tb-primary);
}

.empresa-selector-compact .form-check-input:checked {
    background-color: var(--tb-primary);
    border-color: var(--tb-primary);
}

/* =============================================================================
   4. BOTÕES
   ============================================================================= */

.top-bar-buttons {
    display: flex;
    align-items: center;
    gap: var(--tb-space-xs);
}

.top-bar-btn {
    padding: var(--tb-space-sm) var(--tb-space-lg);
    background-color: transparent;
    border-radius: var(--tb-radius);
    cursor: pointer;
    border: none;
    transition: background-color var(--tb-transition);
    color: var(--tb-btn-color);
    font-size: var(--tb-font-lg);
}

.top-bar-btn:hover {
    background-color: var(--tb-btn-hover-bg);
    backdrop-filter: blur(10px);
    box-shadow: var(--tb-shadow);
}

/* =============================================================================
   5. BOTÃO FULLSCREEN
   ============================================================================= */

.fullscreen-btn {
    position: absolute;
    top: var(--tb-space-xl);
    right: 55px;
    z-index: 1000;
    padding: var(--tb-space-sm) var(--tb-space-md);
    background-color: transparent;
    border-radius: var(--tb-radius);
    box-shadow: none;
    cursor: pointer;
    border: none;
    transition: background-color var(--tb-transition);
    color: var(--tb-btn-color);
    font-size: var(--tb-font-lg);
}

.fullscreen-btn:hover {
    background-color: var(--tb-btn-hover-bg-light);
    box-shadow: var(--tb-shadow-md);
}

/* =============================================================================
   6. RESPONSIVIDADE
   ============================================================================= */

@media (max-width: 991.98px) {
    .top-bar {
        padding: 0 var(--tb-space-md);
    }

    .top-bar-empresa {
        max-width: var(--tb-empresa-max-mobile);
    }

    .empresa-selector-compact select {
        min-width: var(--tb-select-min-mobile);
        max-width: var(--tb-select-max-mobile);
    }

    .empresa-selector-compact .form-check-label {
        display: none;
    }
}