/* ============================================================================
   FLAG OS V1.9 - DENSITY REDUCTION
   Redução de densidade visual: mais whitespace, menos glow
   ============================================================================ */

/* ============================================================================
   ESPAÇAMENTO GERAL
   ============================================================================ */

.pilar-body {
  padding: 32px 24px; /* Era 24px */
}

.config-card {
  margin-bottom: 32px; /* Era 24px */
  padding: 28px; /* Era 24px */
}

.form-group {
  margin-bottom: 24px; /* Era 20px */
}

/* ============================================================================
   REDUÇÃO DE GLOW E EFEITOS VISUAIS
   ============================================================================ */

/* Reduzir glow em botões primários */
.btn-primary {
  box-shadow: none; /* Remove glow excessivo */
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3); /* Glow sutil apenas no hover */
  transform: translateY(-2px);
}

/* Reduzir glow em cards */
.config-card,
.plan-card,
.agent-tile {
  box-shadow: none; /* Remove glow padrão */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Borda sutil */
}

.config-card:hover,
.agent-tile:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* Glow discreto no hover */
  border-color: rgba(255, 255, 255, 0.12);
}

/* Remover glow de inputs */
.input-text:focus,
.textarea:focus,
.select-input:focus {
  box-shadow: none;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   WHITESPACE E RESPIRAÇÃO
   ============================================================================ */

/* Aumentar espaçamento entre elementos de formulário */
.form-row-two-cols {
  gap: 24px; /* Era 16px */
}

.form-row-two-cols .form-group {
  margin-bottom: 0; /* Evita duplo espaçamento */
}

/* Aumentar espaçamento entre seções */
.sidebar-section {
  padding: 16px 0; /* Era 12px */
}

.sidebar-section-title {
  margin: 20px 0 12px 0; /* Era 16px 0 8px 0 */
  padding: 0 16px;
}

/* Aumentar espaçamento em listas */
.menu-item {
  margin-bottom: 4px; /* Era 2px */
}

/* ============================================================================
   TIPOGRAFIA MAIS RESPIRADA
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5; /* Era 1.3 ou menos */
  margin-bottom: 16px; /* Era 12px */
}

p {
  line-height: 1.7; /* Era 1.5 */
  margin-bottom: 16px; /* Era 12px */
}

.field-hint,
.card-subtitle {
  line-height: 1.6; /* Era 1.4 */
  margin-top: 6px; /* Era 4px */
}

/* ============================================================================
   REDUÇÃO DE BORDAS E SOMBRAS DESNECESSÁRIAS
   ============================================================================ */

/* Simplificar borders */
.glass-modal,
.modal {
  border: 1px solid rgba(255, 255, 255, 0.1); /* Era border grosso ou com glow */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Era mais intenso */
}

/* Remover sombras internas excessivas */
.pilar-page {
  box-shadow: none;
}

/* ============================================================================
   ESPAÇAMENTO EM GRIDS
   ============================================================================ */

.agent-tiles-grid {
  gap: 20px; /* Era 16px */
}

.plans-grid {
  gap: 24px; /* Era 20px */
}

.team-grid {
  gap: 20px; /* Era 16px */
}

/* ============================================================================
   PADDINGS MAIORES EM ELEMENTOS INTERATIVOS
   ============================================================================ */

.btn,
.btn-primary,
.btn-secondary,
.btn-secondary-large,
.btn-secondary-full,
.btn-save-all {
  min-height: 44px; /* conforto: target mínimo */
}

.icon-btn {
  min-width: 44px;
  min-height: 44px;
}

.input-text,
.input-large,
.select-input {
  min-height: 44px;
}

.btn,
.btn-primary,
.btn-secondary {
  padding: 12px 24px; /* Era 10px 20px */
}

.btn-small {
  padding: 8px 16px; /* Era 6px 12px */
}

/* ============================================================================
   ESPAÇAMENTO NO HEADER DOS AGENTES
   ============================================================================ */

.pilar-header-main {
  padding: 32px; /* Era 24px */
  margin-bottom: 32px; /* Era 24px */
}

.pilar-header-simple {
  padding: 28px 24px; /* Era 24px 20px */
  margin-bottom: 28px; /* Era 24px */
}

/* ============================================================================
   REDUÇÃO DE GLOWS COLORIDOS
   ============================================================================ */

/* Remover glows de avatares */
.agent-avatar-slot,
.pilar-icon-large {
  box-shadow: none; /* Era um glow colorido forte */
}

/* Reduzir glow de badges */
.badge-pilar-active {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   ESPAÇAMENTO EM INFO BOXES
   ============================================================================ */

.info-box {
  padding: 20px; /* Era 16px */
  margin-bottom: 24px; /* Era 20px */
  gap: 16px; /* Era 12px */
}

.info-icon {
  font-size: 28px; /* Era 24px */
}

/* ============================================================================
   TABS MAIS RESPIRADAS
   ============================================================================ */

.tabs-main {
  gap: 12px; /* Era 8px */
  margin-bottom: 32px; /* Era 24px */
}

.tab-btn {
  padding: 14px 24px; /* Era 12px 20px */
}

/* ============================================================================
   RESPONSIVIDADE
   ============================================================================ */

@media (max-width: 768px) {
  .pilar-body {
    padding: 24px 16px;
  }
  
  .config-card {
    padding: 20px;
    margin-bottom: 24px;
  }
  
  .form-row-two-cols {
    gap: 16px;
  }
}