/* ============================================
   BASE: Global Responsive Normalizer
   ============================================
   MOBILE-ONLY overrides. Forces identical sizing,
   padding, and spacing across ALL dashboard
   sub-pages on mobile/tablet ONLY.
   
   ⚠ DO NOT add rules outside @media queries!
   ⚠ Desktop layout must remain UNTOUCHED!
   ============================================ */

/* =================== TABLET (<= 1024px) =================== */

@media (max-width: 1024px) {
  /* Sidebar OFF by default on tablet/mobile */
  .sidebar {
    transform: translateX(-100%) !important;
  }
  .sidebar.show {
    transform: translateX(0) !important;
  }
  .sidebar-toggle {
    display: flex !important;
  }

  /* Mobile hamburger becomes visible on tablet/mobile */
  .mobile-menu-btn {
    display: flex !important;
  }

  /* Main content fills full width when sidebar is hidden;
     padding-top clears the fixed hamburger so it doesn't overlap the page title */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 64px !important;
  }

  /* Dark overlay when sidebar is open */
  .sidebar.show::after {
    content: '';
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  /* Force two-column grids to single column on tablet */
  .two-column-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .copy-trading-grid {
    grid-template-columns: 1fr !important;
  }

  .pairs-two-column {
    grid-template-columns: 1fr !important;
  }
}

/* =================== MOBILE (<= 768px) =================== */

@media (max-width: 768px) {

  /* --- Global Font Size --- */
  html {
    font-size: 15px;
  }

  /* --- Container: SAME padding on ALL pages --- */
  .container {
    padding: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Header: SAME sizing on ALL pages --- */
  .header {
    padding: 14px !important;
    margin-bottom: 14px !important;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .header-content h1 {
    font-size: 1.15rem !important;
    justify-content: center;
  }

  .header-content p {
    font-size: 0.85rem !important;
  }

  .header-actions {
    width: 100%;
    justify-content: center;
    align-items: center;   /* base is flex-end (column) — re-centre on mobile */
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- Card: SAME sizing on ALL pages --- */
  .card {
    margin-bottom: 14px !important;
    border-radius: 12px !important;
  }

  .card-header {
    padding: 12px 14px !important;
  }

  .card-header h3 {
    font-size: 0.95rem !important;
  }

  .card-body {
    padding: 14px !important;
  }

  /* --- Stat Cards: SAME sizing on ALL pages --- */
  .stats-grid,
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .stat-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .stat-card .stat-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    font-size: 1.4rem !important;
  }

  .stat-card .stat-number {
    font-size: 1.35rem !important;
  }

  .stat-card .stat-label {
    font-size: 0.72rem !important;
  }

  /* --- Usage Stats Grid --- */
  .usage-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .usage-stat-item {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* --- TR (Trading Records) Cards: SAME sizing --- */
  .tr-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .tr-section {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .tr-stat-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .tr-stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  /* --- Copy Trading specific --- */
  .account-section,
  .pairs-column {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .copy-account-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .copy-button-group {
    flex-direction: column !important;
  }

  .copy-button-group .btn {
    width: 100% !important;
    min-width: unset !important;
  }

  /* --- Settings specific --- */
  .settings-section {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  .rate-limit-grid,
  .email-config-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .config-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* --- Downloads specific --- */
  .downloads-grid {
    grid-template-columns: 1fr !important;
  }

  .download-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* --- Webhook specific --- */
  .webhook-info {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .example-content {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .json-code {
    font-size: 0.8rem !important;
    padding: 12px !important;
    max-height: 250px !important;
  }

  /* --- Tables: SAME sizing on ALL pages --- */
  .accounts-table,
  .tr-table,
  .table {
    font-size: 0.82rem !important;
  }

  .accounts-table th,
  .accounts-table td,
  .tr-table th,
  .tr-table td,
  .table th,
  .table td {
    padding: 10px 10px !important;
  }

  /* --- Form Groups: SAME spacing --- */
  .form-group {
    margin-bottom: 12px !important;
  }

  .form-input,
  .search-input,
  .tr-form-input {
    padding: 10px 12px !important;
    font-size: 0.92rem !important;
  }

  /* --- Pair Modal: single column --- */
  .pair-modal-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Info Items (System Info page) --- */
  .info-item {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .info-item strong {
    min-width: 0 !important;
  }

  /* --- Symbol Mapping --- */
  .symbol-mapping-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- Button Groups: SAME stacking --- */
  .account-button-group,
  .button-group,
  .button-group-horizontal,
  .settings-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .account-button-group .btn,
  .button-group .btn,
  .settings-actions .btn {
    width: 100% !important;
  }

  /* --- Table Actions --- */
  .table-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .table-actions select {
    width: 100% !important;
  }

  /* --- Action Buttons --- */
  .action-buttons {
    gap: 4px !important;
  }

  /* --- Plans / Pairs Lists --- */
  .plan-item-accounts {
    flex-direction: column !important;
  }

  .plan-item-arrow {
    transform: rotate(90deg);
  }

  .plan-item-account {
    width: 100% !important;
  }

  .plan-item-details {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .plan-item-actions {
    flex-direction: column !important;
  }

  /* --- Pair Content (master → slave) --- */
  .pair-content {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .copy-arrow {
    transform: rotate(90deg);
  }

  /* --- Modify Sections --- */
  .modify-section {
    padding: 14px !important;
  }

  /* --- Test Email Section --- */
  .test-email-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .test-email-content .btn {
    width: 100% !important;
  }

  /* --- Calendar (Trading Records) --- */
  .cal-cell {
    min-height: 48px !important;
    padding: 4px 5px !important;
  }

  .cal-pnl {
    font-size: 0.65rem !important;
  }

  .cal-trade-count {
    display: none !important;
  }

  .journal-two-col-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* --- History Scroll --- */
  .history-scroll {
    max-height: 300px !important;
  }

  /* --- Touch Target Sizing (44px min - WCAG / Apple HIG) --- */
  .btn,
  .btn-icon,
  .btn-copy,
  .nav-item,
  .toggle-switch {
    min-height: 44px;
  }

  .nav-item {
    padding: 14px 20px;
  }
}

/* =================== SMALL MOBILE (<= 480px) =================== */

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  .container {
    padding: 8px !important;
  }

  .card {
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  .card-header {
    padding: 10px 12px !important;
  }

  .card-body {
    padding: 10px !important;
  }

  .header {
    padding: 10px !important;
    margin-bottom: 10px !important;
  }

  .header-content h1 {
    font-size: 1rem !important;
  }

  /* 1-column grid for everything */
  .stats-grid,
  .stats-grid-4,
  .tr-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-card,
  .tr-stat-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 12px !important;
  }

  /* Buttons: always full width */
  .btn:not(.btn-icon-small):not(.btn-copy):not(.btn-icon) {
    width: 100% !important;
    justify-content: center !important;
  }

  .action-buttons {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .pair-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .pair-actions .btn {
    width: 100% !important;
  }

  /* Table: tight padding */
  .accounts-table th,
  .accounts-table td,
  .tr-table th,
  .tr-table td {
    padding: 8px 6px !important;
    font-size: 0.78rem !important;
  }

  /* Smaller section title */
  .section-title,
  .pairs-column-title,
  .tr-section-title {
    font-size: 0.95rem !important;
  }
}