/* ==========================================
   responsive.css — Mobile & multi-screen support
   Breakpoints: 1200 (tablet-lg), 700 (mobile), 480 (phone)
   Mobile-first intent: ≤700 activates the "dedicated mobile" layout
   (bottom-sheet modals, compact toolbar, card rows via JS,
   collapsible sidebar groups, slim header).
   ========================================== */

/* ─── Tablet landscape (≤1200px) ─── */
@media (max-width: 1200px) {
  .sidebar { width: var(--sidebar-collapsed-w); }
  .sidebar .nav-label, .sidebar .nav-chevron, .sidebar .logo-text { display: none; }
  .sidebar .nav-parent { justify-content: center; padding: 10px 0; }
  .sidebar .nav-item.l2 { padding-left: 0; justify-content: center; }
  .sidebar .nav-children { max-height: 500px !important; } /* keep visible but icons only */
  .sidebar .sidebar-logo { justify-content: center; }

  .data-table { font-size: 12px; }
  .data-table thead th, .data-table tbody td { padding: 8px 6px; }

  .modal-lg { width: 90vw; }
}

/* ─── Mobile (≤700px) — dedicated mobile layout ─── */
@media (max-width: 700px) {
  body { flex-direction: column; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed; left: -280px; top: 0; width: 280px !important;
    height: 100vh; z-index: 80; transition: left 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    /* Push the drawer's own top content below the Dynamic Island in the
       installed PWA. Bottom padding clears the iOS home-indicator. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.mobile-open { left: 0; }
  .sidebar .nav-label, .sidebar .nav-chevron, .sidebar .logo-text { display: initial; }
  .sidebar .nav-parent { justify-content: initial; padding: 10px 16px; }
  .sidebar .nav-item.l2 { padding-left: 44px; justify-content: initial; }
  .sidebar .sidebar-logo { justify-content: initial; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 79;
  }
  .sidebar-backdrop.visible { display: block; }

  /* Collapsible nav groups inside the drawer */
  .sidebar .nav-parent { cursor: pointer; }
  .sidebar .nav-group[data-collapsed="true"] .nav-children { display: none; }
  .sidebar .nav-group .nav-chevron { transition: transform 0.18s ease; }
  .sidebar .nav-group[data-collapsed="true"] .nav-chevron { transform: rotate(-90deg); }

  .main-area { width: 100%; height: 100vh; }

  /* Slim mobile header — hide centered search, show only hamburger + right cluster.
     Top padding grows with env(safe-area-inset-top) so the header clears the
     iPhone Dynamic Island / notch in the installed PWA. */
  .top-header { padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); gap: 8px; }
  .header-search { display: none !important; }
  .header-search-mobile-btn { display: inline-flex !important; }
  .notification-icon { font-size: 18px; }
  .health-dot { width: 8px; height: 8px; }
  #mobileMenuBtn { display: inline-flex !important; }

  /* Content padding. Extra bottom buffer clears iOS Safari's bottom
     toolbar + the floating mobile-menu button so the last form on any
     page stays tappable. */
  .content { padding: 12px 14px 120px 14px; }

  /* Page title row — stack cleanly */
  .page-title-row { flex-wrap: wrap; gap: 8px; }
  .title-with-selector { flex: 1; min-width: 0; }
  .page-actions { flex-wrap: nowrap; gap: 4px; align-items: center; }
  .page-title { font-size: 18px; }

  /* Dashboard cards scroll horizontally with snap */
  .dashboard-cards {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scroll-snap-type: x proximity;
  }
  .dash-card { min-width: 130px; flex-shrink: 0; scroll-snap-align: start; }

  /* Table toolbar — compact: search + view-selector + filter + more; hide the rest */
  .table-toolbar { flex-wrap: wrap; gap: 6px; }
  .toolbar-right { flex-wrap: nowrap; gap: 4px; width: 100%; justify-content: space-between; }
  .toolbar-tools { padding-left: 6px; margin-left: 2px; gap: 2px; }
  .toolbar-tools #colSettingsBtn,
  .toolbar-tools #activityBtn { display: none; }
  .pagination #pgFirst, .pagination #pgLast { display: none; }
  .pagination select#rowsPerPage { display: none; }
  .pagination > span:first-child { display: none; }
  .table-search { flex: 1; max-width: 100%; }

  /* Table horizontal scroll fallback (when user toggles back to table view) */
  .data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 640px; }

  /* Bottom-sheet modals: slide up from the bottom, full width, rounded top */
  .modal-overlay { align-items: flex-end !important; }

  /* Symbol modal tabs: swap to short labels + tighten padding so all five
     tabs (Fund / Mom / Story / SEC / News) fit on a ~390px viewport. */
  .modal-tabs { padding: 0 8px; }
  .modal-tabs .tab { padding: 10px 8px; font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; }
  .modal-tabs .tab-full  { display: none; }
  .modal-tabs .tab-short { display: inline; }
  .modal {
    width: 100vw !important; max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0;
    animation: modal-slide-up 0.25s ease-out;
    position: relative;
  }
  .modal::before {
    content: ''; position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%); width: 36px; height: 4px;
    border-radius: 2px; background: var(--mute-2, #c8cbd4); opacity: 0.6;
    pointer-events: none;
  }
  .modal-lg, .modal-md { width: 100vw !important; max-width: 100vw !important; }
  .modal-header { padding: 20px 16px 12px; cursor: grab; }
  .modal-body, .modal-body-scroll { padding: 12px 16px; }
  .modal-footer { padding: 10px 16px; flex-wrap: wrap; gap: 6px; }
  .modal.is-dragging { animation: none; }

  @keyframes modal-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Search results page */
  .srp-body { padding: 16px; }
  .srp-table { font-size: 12px; min-width: 500px; }

  /* Kanban responsive */
  .kanban { flex-direction: column; height: auto; min-height: calc(100vh - 260px); }
  .kanban-col { min-height: 150px; }
  .kanban-cards { min-height: 80px; }

  /* Breadcrumb truncate */
  .breadcrumb { font-size: 12px; }
  .breadcrumb .crumb, .breadcrumb .current { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

  /* Pagination compact */
  .pagination { font-size: 12px; gap: 4px; }
  .pg-btn .material-symbols-outlined { font-size: 16px; }

  /* Bulk bar wrap */
  .bulk-bar { flex-wrap: wrap; gap: 8px; }

  /* More actions menu position */
  .more-actions-menu { right: 0; }

  /* Filter rows stack on mobile */
  .filter-row { flex-wrap: wrap; }
  .filter-row select, .filter-row input { min-width: 0; }

  /* Disable the hover-checkbox affordance on mobile — the first cell is the
     row's primary identifier (name/symbol) and tapping it must open the row,
     not toggle a selection checkbox. */
  .idx-sel .idx-cb { display: none !important; }
  .idx-sel .idx-label { opacity: 1 !important; }

  /* View selector label truncates */
  .view-selector-btn #viewSelName { max-width: 80px; }

  /* ─── Chat ─── */
  /* Let the content column be a flex stack so chat-wrap fills the
     remaining height below breadcrumb + title. Height that way is
     accurate whether the iOS address bar is showing or the keyboard
     is open — no fragile calc(100dvh - N) guessing. */
  body:has(#customContent .chat-wrap) .content,
  .content:has(.chat-wrap) { display: flex; flex-direction: column; }
  .content .data-table-wrapper:has(.chat-wrap) {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  .content #customContent:has(.chat-wrap) {
    flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 !important;
  }
  .chat-wrap {
    flex: 1; height: auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  .chat-messages { padding: 10px 12px; gap: 8px; }
  .chat-input-row {
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    gap: 6px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .chat-input-row .form-input { font-size: 16px; } /* prevent iOS auto-zoom */
  .chat-input-row .btn-primary {
    padding: 10px 14px;
    min-width: 44px; min-height: 44px; /* iOS tap target */
    justify-content: center;
  }
  .chat-bubble { max-width: 92%; font-size: 13.5px; line-height: 1.55; }
  .chat-reply-wrap { max-width: 92%; }
  .chat-steps .chat-step { font-size: 11px; padding: 3px 6px; }
  .chat-step-args { max-width: 140px; }

  /* Chat tables — horizontal scroll, tighter cells */
  .chat-table, .chat-grid {
    font-size: 11px;
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .chat-grid { max-height: 50vh; }
  .chat-grid th, .chat-grid td, .chat-table th, .chat-table td { padding: 4px 8px; }

  /* Grid search row wraps */
  .chat-grid-filter { flex-wrap: wrap; gap: 6px; }
  .chat-grid-search { min-width: 0; flex: 1 1 auto; }
}

/* ─── Phone (≤480px) — extra tightening ─── */
@media (max-width: 480px) {
  .top-header { padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); }
  .content { padding: 10px 12px 120px 12px; }

  /* Title smaller */
  .page-title { font-size: 16px; }
  .btn-primary, .btn-secondary { padding: 5px 10px; font-size: 11px; }
  .btn-sm { padding: 4px 8px; font-size: 11px; }

  /* Dashboard cards smaller */
  .dash-card { padding: 8px 12px; min-width: 110px; }
  .dash-card .dash-value { font-size: 15px; }
  .dash-card .dash-label { font-size: 11px; }

  /* Table even more compact */
  .data-table { min-width: 560px; font-size: 11px; }
  .data-table thead th, .data-table tbody td { padding: 6px 4px; }

  /* Search results dropdown */
  .search-results { max-height: 320px; }
  .sr-item { padding: 6px 10px; font-size: 12px; }

  /* Modals inner padding */
  .modal-body { padding: 12px; }
  .modal-header { padding: 18px 12px 10px; }
  .modal-footer { padding: 8px 12px; }

  /* Symbol modal grid stack */
  .sym-grid { flex-direction: column; gap: 8px; }

  /* Kanban cards */
  .kanban-card { padding: 8px 10px; }
  .kanban-card-title { font-size: 12px; }

  /* Ranking */
  .ranking-grid { grid-template-columns: 1fr; }

  /* Churning detector */
  .churn-gauges { grid-template-columns: 1fr 1fr; }

  /* Hide notifications on very small screens */
  .notification-icon { display: none; }

  /* Pagination minimal */
  .page-info { font-size: 11px; }

  /* Hamburger bigger for tap target */
  .hamburger { font-size: 22px !important; }
}

/* ─── Print styles ─── */
@media print {
  .sidebar, .top-header, .page-actions, .table-toolbar, .bulk-bar,
  .modal-overlay, .search-results-page, .toast { display: none !important; }
  .content { padding: 0; overflow: visible; }
  .data-table-wrapper { overflow: visible; border: none; }
  .data-table { min-width: 0; font-size: 11px; }
  .main-area { height: auto; }
}

/* ─── Large screens (≥1600px) ─── */
@media (min-width: 1600px) {
  .data-table { font-size: 14px; }
  .dash-card .dash-value { font-size: 20px; }
}

/* ─── Ultra-wide (≥2000px) ─── */
@media (min-width: 2000px) {
  .sidebar { width: 240px; }
}