/* ============================================
   RESPONSIVE.CSS - Mobile-First Breakpoints
   Ficheiro centralizado para regras responsivas
   ============================================ */

/* ============================================
   BREAKPOINTS
   - Desktop: > 1024px (default styles)
   - Medium Desktop: 1025px - 1500px (toggle clearance)
   - Tablet: 769px - 1024px
   - Mobile: 481px - 768px
   - Small Mobile: <= 480px
   ============================================ */

/* ============================================
   MEDIUM DESKTOP - Page title clearance
   Container not centered enough, need explicit margin
   ============================================ */

@media (max-width: 1500px) {
  .page-title {
    margin-left: 3.5rem;
  }

  /* Remove margin when sidebar is open (toggle button hidden) */
  body.sidebar-open .page-title {
    margin-left: 0;
  }
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
  /* 12-column grid: adjust col-spans for tablet */
  .dashboard-widgets-container {
    gap: 1rem;
  }

  /* Small widgets (3-col) become half width */
  .dashboard-widgets-container .col-span-3 {
    grid-column: span 6;
  }

  /* 4-col widgets become half width */
  .dashboard-widgets-container .col-span-4 {
    grid-column: span 6;
  }

  /* 6-col widgets stay half width */
  .dashboard-widgets-container .col-span-6 {
    grid-column: span 6;
  }

  /* 8-col and 12-col become full width */
  .dashboard-widgets-container .col-span-8,
  .dashboard-widgets-container .col-span-12 {
    grid-column: span 12;
  }

  /* Legacy KPI Cards: 4 -> 2 colunas */
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Legacy Stats Grid: 4 -> 2 colunas */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Legacy Charts Grid: 2 -> 1 coluna */
  .charts-grid {
    grid-template-columns: 1fr;
  }

  /* Container padding reduzido */
  .container {
    padding: 1rem;
  }

  /* Page title - margem para não sobrepor toggle button em tablet */
  .page-title {
    margin-left: 3.5rem;
  }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */

@media (max-width: 1024px) {
  /* Remover padding da sidebar (overlay em vez de push em tablet) */
  body {
    padding-left: 0 !important;
  }
}

@media (max-width: 768px) {
  /* ========== LAYOUT GERAL ========== */

  /* 12-column grid: all widgets full width on mobile */
  .dashboard-widgets-container {
    gap: 1rem;
    /* On mobile, use auto-flow to stack widgets vertically based on DOM order */
    grid-auto-rows: auto;
  }

  /* Force all widgets to full width and auto row placement on mobile
     !important needed to override inline styles set by JavaScript
     Widgets stack in DOM order with auto height based on content */
  .dashboard-widgets-container > .widget-wrapper {
    grid-column: 1 / -1 !important;
    grid-row: auto / auto !important;
  }

  .dashboard-widgets-container .col-span-3,
  .dashboard-widgets-container .col-span-4,
  .dashboard-widgets-container .col-span-6,
  .dashboard-widgets-container .col-span-8,
  .dashboard-widgets-container .col-span-12 {
    grid-column: span 12;
  }

  /* Remover padding da sidebar (já está oculta) */
  body {
    padding-left: 0 !important;
  }

  /* Container principal */
  .container {
    padding: 1rem;
  }

  /* Notification - dynamic width based on content */
  .notification {
    max-width: 95%;
    width: auto;
  }

  .notification-message {
    white-space: nowrap;
  }

  /* Page header - título e botões na mesma linha do toggle button */
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
  }

  .page-header-content {
    flex: 0 1 auto;
  }

  .page-title {
    font-size: 1.1rem;
    margin-left: 3.5rem;
  }

  .page-subtitle {
    font-size: 0.875rem;
  }

  /* Page header actions - aligned right */
  .page-header-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  /* ========== NAVEGAÇÃO ========== */

  /* Mobile nav escondida - usar apenas sidebar toggle */
  .mobile-nav {
    display: none !important;
  }

  /* ========== KPI CARDS ========== */

  .kpis {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .kpi-card {
    padding: 1.25rem;
  }

  .kpi-value {
    font-size: 1.5rem;
  }

  .kpi-label {
    font-size: 0.75rem;
  }

  /* ========== STATS GRID ========== */

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-card {
    padding: 1.25rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  /* ========== CHARTS ========== */

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .chart-card {
    padding: 1rem;
  }

  .chart-container {
    height: 50vh;
    min-height: 250px;
    max-height: 350px;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .chart-title {
    font-size: 1rem;
  }

  .chart-legend {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .legend-item {
    font-size: 0.75rem;
  }

  /* Chart period selector */
  .chart-period-selector {
    flex-wrap: wrap;
  }

  .period-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }

  /* ========== TABELAS ========== */

  /* Wrapper com scroll horizontal */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
  }

  /* Manter tabela funcional mas esconder colunas menos importantes */
  table {
    min-width: 100%;
    font-size: 0.85rem;
  }

  th,
  td {
    padding: 0.75rem 0.5rem;
    white-space: nowrap;
  }

  /* Usar classe .hide-on-mobile para esconder colunas específicas */

  /* Botões de ação mais compactos */
  .action-btns {
    gap: 0.25rem;
  }

  .btn-edit,
  .btn-delete,
  .btn-details {
    width: 28px;
    height: 28px;
  }

  .btn-edit svg,
  .btn-delete svg,
  .btn-details svg {
    width: 14px;
    height: 14px;
  }

  /* Table section */
  .table-section {
    padding: 1rem;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .table-actions {
    width: 100%;
    flex-wrap: wrap;
  }

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

  .table-search-input:focus {
    width: 100%;
  }

  /* ========== MODAIS ========== */

  .modal-content {
    width: 95%;
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
    margin: 1rem;
    padding: 1.5rem;
  }

  .modal-title {
    font-size: 1.1rem;
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* ========== SIDEBAR DE FILTROS ========== */

  .sidebar {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 85vh;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-top: 1px solid var(--slate-200);
  }

  .sidebar.open {
    transform: translateY(0);
  }

  /* ========== HEATMAP ========== */

  .heatmap-container {
    padding: 1rem;
  }

  .heatmap-grid {
    gap: 0.25rem;
  }

  .heatmap-cell {
    padding: 0.25rem;
  }

  .heatmap-day {
    font-size: 0.6rem;
  }

  .heatmap-value {
    font-size: 0.7rem;
  }

  /* ========== TOP LISTS ========== */

  .top-lists-grid {
    grid-template-columns: 1fr;
  }

  .top-list-card {
    padding: 1rem;
  }

  /* ========== ASSETS GRID (Prices) ========== */

  .assets-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .asset-card {
    padding: 1rem;
  }

  .asset-price {
    font-size: 1.25rem;
  }

  .asset-symbol {
    font-size: 1rem;
  }

  /* ========== TABS ========== */

  .tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem;
  }

  .tab {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* ========== SEARCH ========== */

  .search-wrapper {
    flex-wrap: wrap;
  }

  .search-input {
    font-size: 16px; /* Previne zoom no iOS */
  }

  /* ========== FORM INPUTS ========== */

  .form-input,
  .filter-input,
  .filter-select {
    font-size: 16px; /* Previne zoom no iOS */
    padding: 0.875rem 1rem;
  }

  /* ========== BUTTONS ========== */

  .btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.9rem;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  /* ========== FILTER TOGGLE ========== */

  .filter-toggle {
    padding: 0.5rem;
    width: 40px;
    height: 40px;
  }

  .filter-toggle span {
    display: none;
  }

  /* ========== PAGE HEADER (Prices) ========== */

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .refresh-info {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
  /* Container ainda mais compacto */
  .container {
    padding: 0.75rem;
  }

  /* Títulos menores */
  .page-title {
    font-size: 1.25rem;
  }

  .page-subtitle {
    font-size: 0.8rem;
  }

  /* KPIs mais compactos */
  .kpi-card {
    padding: 1rem;
  }

  .kpi-value {
    font-size: 1.35rem;
  }

  /* Stats mais compactos */
  .stat-value {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  /* Charts */
  .chart-container {
    height: 45vh;
    min-height: 220px;
  }

  /* Usar classe .hide-on-small-mobile para esconder colunas adicionais */

  /* Modais ainda mais compactos */
  .modal-content {
    padding: 1.25rem;
    margin: 0.5rem;
  }

  /* Mobile nav mais compacto */
  .mobile-nav-link {
    padding: 0.4rem 0.5rem;
    font-size: 0.6rem;
  }

  .mobile-nav-link svg {
    width: 20px;
    height: 20px;
  }

  /* Legend items */
  .legend-item {
    font-size: 0.65rem;
  }

  /* Asset cards */
  .asset-icon {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  /* Tabs mais compactas */
  .tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .tab svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   DARK MODE RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
  [data-theme="dark"] .sidebar {
    border-top-color: #1a1a1a;
  }

  [data-theme="dark"] .table-wrapper {
    scrollbar-color: #2a2a2a #121212;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Classe para esconder em mobile */
.hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Classe para esconder em desktop */
.hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .hide-desktop {
    display: block !important;
  }
}

/* Classe para forçar scroll horizontal */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch-friendly targets - excluindo botões de ação de tabela e chips */
@media (max-width: 768px) {
  .btn,
  .icon-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Resetar tamanho mínimo para botões de ação de tabela */
  .btn-edit,
  .btn-delete,
  .btn-details {
    min-height: auto;
    min-width: auto;
  }

  /* Resetar tamanho mínimo para suggestion chips */
  .suggestion-chip {
    min-height: auto;
    min-width: auto;
  }

  /* Classe para esconder colunas específicas em mobile */
  .hide-on-mobile,
  th.hide-on-mobile,
  td.hide-on-mobile {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Classe para esconder colunas adicionais em mobile pequeno */
  .hide-on-small-mobile,
  th.hide-on-small-mobile,
  td.hide-on-small-mobile {
    display: none !important;
  }
}

/* Global Cursor Pointer Override */
body.no-cursor-pointer *,
body.no-cursor-pointer *:hover,
body.no-cursor-pointer button,
body.no-cursor-pointer a,
body.no-cursor-pointer label,
body.no-cursor-pointer input,
body.no-cursor-pointer select,
body.no-cursor-pointer textarea {
  cursor: default !important;
}

/* Text Input Cursor Override - Always Text */
body.no-cursor-pointer input[type="text"],
body.no-cursor-pointer input[type="password"],
body.no-cursor-pointer input[type="email"],
body.no-cursor-pointer input[type="number"],
body.no-cursor-pointer input[type="search"],
body.no-cursor-pointer input[type="tel"],
body.no-cursor-pointer input[type="url"],
body.no-cursor-pointer input[type="date"],
body.no-cursor-pointer input[type="datetime-local"],
body.no-cursor-pointer textarea {
  cursor: text !important;
}

/* ============================================
   EDIT MODE - Mobile Responsive Styles
   ============================================ */

@media (max-width: 768px) {
  /* Edit mode toolbar positioned above mobile nav */
  .edit-mode-toolbar {
    bottom: 90px;
    padding: 0.625rem 1rem;
    gap: 0.35rem;
  }

  .edit-mode-hint {
    font-size: 0.7rem;
  }

  .edit-mode-toolbar-buttons {
    gap: 0.5rem;
  }

  .edit-mode-toolbar .btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
  }

  .edit-mode-toolbar .btn svg {
    width: 14px;
    height: 14px;
  }

  /* Widget library as bottom sheet on mobile */
  .widget-library {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70vh;
    max-height: 70vh;
    padding: 1.25rem;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .widget-library.open {
    transform: translateY(0);
  }

  .widget-library-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-radius: 0;
    position: relative;
  }

  /* Bottom sheet drag handle indicator */
  .widget-library-header::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-default);
    border-radius: 2px;
  }

  .widget-library-content {
    padding-bottom: calc(env(safe-area-inset-bottom));
  }

  /* Remove button larger for touch */
  .widget-remove-btn {
    width: 28px;
    height: 28px;
    top: -4px;
    right: -4px;
  }

  .widget-remove-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Specific positioning for mobile */
  body.edit-mode-active .widget-wrapper.widget-kpis .widget-remove-btn,
  body.edit-mode-active .widget-wrapper.widget-stats .widget-remove-btn,
  body.edit-mode-active .widget-wrapper.widget-table .widget-remove-btn,
  body.edit-mode-active .widget-wrapper.widget-chart .widget-remove-btn {
    top: 4px;
    right: 4px;
  }

  /* Library widget items larger touch targets */
  .library-widget-item {
    padding: 1.25rem 1rem;
    min-height: 72px;
  }

  .library-widget-add {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-color: var(--primary);
    color: white;
  }

  .library-widget-add svg {
    width: 20px;
    height: 20px;
  }

  /* Widget library close button more visible on mobile */
  .widget-library-close {
    width: 40px;
    height: 40px;
    background: var(--surface-3);
  }

  .widget-library-close svg {
    width: 22px;
    height: 22px;
  }

  /* Hide resize handles on mobile (too difficult to use) */
  .widget-resize-handle {
    display: none !important;
  }

  /* Standalone stat cards on mobile */
  .widget-wrapper .standalone-stat-card {
    padding: 1rem;
  }

  .widget-wrapper .standalone-stat-card .stat-value {
    font-size: 1.1rem;
  }

  .widget-wrapper .standalone-stat-card .stat-label {
    font-size: 0.75rem;
  }

  /* Standalone KPI cards on mobile */
  .widget-wrapper .standalone-kpi-card {
    padding: 1.25rem;
  }

  .widget-wrapper .standalone-kpi-card .kpi-value {
    font-size: 1.5rem;
  }

  .widget-wrapper .standalone-kpi-card .kpi-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  /* Even smaller toolbar on very small screens */
  .edit-mode-toolbar {
    bottom: 85px;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem;
  }

  .edit-mode-hint {
    display: none;
  }

  .edit-mode-toolbar-buttons {
    gap: 0.5rem;
  }

  .edit-mode-toolbar .btn {
    padding: 0.625rem;
    font-size: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .edit-mode-toolbar .btn svg {
    width: 18px;
    height: 18px;
  }

  /* Hide button text, show only icons on very small screens */
  .edit-mode-toolbar .btn-text {
    display: none;
  }

  /* Remove separator on small screens */
  .edit-mode-toolbar-buttons .btn:first-child::after {
    display: none;
  }

  .edit-mode-toolbar-buttons .btn:first-child {
    margin-right: 0;
  }

  /* Widget library takes more space */
  .widget-library {
    height: 80vh;
    max-height: 80vh;
  }
}