/* ==============================================================================
   MY STOCKS - RESPONSIVE & MOBILE DESIGN SYSTEM
   Desktop Widescreen, Tablet e Mobile First com Bottom Navigation
   ============================================================================== */

/* ==============================================================================
   1. BOTTOM NAVIGATION BAR (SMARTPHONES < 768px)
   ============================================================================== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  z-index: 400;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  height: 100%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  transition: color .15s ease;
  user-select: none;
}

.bottom-nav-item svg {
  width: 20px;
  height: 20px;
  transition: transform .15s ease;
}

.bottom-nav-item:hover, .bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-item.active svg {
  transform: scale(1.1);
}

/* ==============================================================================
   2. FLOATING ACTION BUTTON (FAB)
   ============================================================================== */
.fab-btn {
  display: none;
  position: fixed;
  bottom: calc(var(--bottom-nav-height) + 14px);
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  z-index: 350;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.fab-btn:hover {
  background: var(--primary-h);
  transform: scale(1.05);
}

.fab-btn:active {
  transform: scale(0.95);
}

/* ==============================================================================
   3. RESPONSIVE BREAKPOINTS
   ============================================================================== */

/* TABLETS (max-width: 1024px) */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* SMARTPHONES & TELAS PEQUENAS (max-width: 768px) */
@media (max-width: 768px) {
  body {
    padding-bottom: var(--bottom-nav-height);
  }

  .header-nav {
    display: none; /* Oculta tabs no cabeçalho superior e usa a barra inferior */
  }

  .bottom-nav {
    display: flex;
  }

  .fab-btn {
    display: flex;
  }

  .main-content {
    padding: 12px;
    gap: 12px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .kpi-card {
    padding: 10px 12px;
  }

  .kpi-value {
    font-size: 16px;
  }

  /* Modais em formato Bottom Sheet no Mobile */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal-box {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 85vh;
    animation: slideUp .25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-search-box {
    width: 100%;
  }

  /* Cartões de Ativos para visualização mobile alternativa */
  .mobile-cards-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .asset-card-mobile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .asset-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}