/* ══════════════════════════════════════════════
   DARK-FLOW · RESPONSIVE LAYOUT
   Mobile: 1 column | iPad: 2-3 col | Desktop: full
   ══════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .brand-tag { display: block; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .metrics-bar        { grid-template-columns: repeat(3, 1fr); }
  .tables-section     { grid-template-columns: 1fr 1fr; }
  .chart-container    { height: 300px; }
}

@media (min-width: 600px) and (max-width: 767px) {
  .app-header         { flex-direction: column; align-items: flex-start; }
  .header-controls    { width: 100%; }
  .metrics-bar        { grid-template-columns: repeat(3, 1fr); }
  .tables-section     { grid-template-columns: 1fr; }
  .chart-container    { height: 280px; }
}

@media (max-width: 599px) {
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    gap: 8px;
  }
  .header-controls    { width: 100%; gap: 6px; }
  .symbol-search input{ width: 120px; }
  .ctrl-select        { font-size: 12px; padding: 5px 8px; }
  .btn-refresh        { padding: 5px 10px; }

  /* Signal */
  .signal-section     { padding: 10px 16px 6px; }
  .signal-box         { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .signal-label       { font-size: 22px; }

  /* Metrics - font sedikit lebih kecil di HP kecil tapi tetap terbaca */
  .metrics-bar        { grid-template-columns: 1fr 1fr; padding: 8px 16px; gap: 8px; }
  .metric-value       { font-size: 20px; }
  .metric-sub         { font-size: 12px; }
  .pressure-card      { grid-column: 1 / -1; }

  /* Controls */
  .adv-controls       { padding: 8px 16px; gap: 8px; }
  .ctrl-group label   { display: none; }

  /* Charts - padding disesuaikan mobile */
  .charts-section     { padding: 8px 16px; }
  .chart-container    { height: 240px; }
  .cvd-chart-container{ height: 100px; }

  /* Tables */
  .tables-section     { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 8px; }
  .table-scroll       { max-height: 180px; }

  /* Footer */
  .footer-links       { gap: 16px; padding: 16px; }
  .footer-copyright   { font-size: 9px; }

  /* Modals */
  .modal-box          { padding: 24px 20px; }
  .policy-box         { padding: 24px 20px; margin: 16px; }
}

@media (max-width: 380px) {
  .brand-name         { font-size: 15px; letter-spacing: 2px; }
  .metrics-bar        { grid-template-columns: 1fr; }
  .metric-value       { font-size: 18px; }
  .chart-container    { height: 200px; }
}

@media (min-width: 1024px) {
  .tables-section     { grid-template-columns: 1fr 1fr; }
  .chart-container    { height: 380px; }
}

@media (display-mode: standalone) {
  .app-header {
    padding-top:   env(safe-area-inset-top, 10px);
    padding-left:  max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
  body { padding-bottom: env(safe-area-inset-bottom, 0); }
}