/* =========================================================
   FlowPilot AI — Responsive rules
   Targets: 1440 / 1280 desktop, 1024 small laptop, 768 tablet, 390 mobile
   ========================================================= */

@media (max-width: 1360px) {
  .g-side-main { grid-template-columns: 210px minmax(0, 1fr); }
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inbox { grid-template-columns: 200px minmax(280px, 340px) minmax(0, 1fr); }
}

@media (max-width: 1200px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main-side { grid-template-columns: minmax(0, 1fr); }
  .inbox { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .inbox .inbox-folders { display: none; }
  .inbox-filter-compact { display: block !important; }
  .top-search { max-width: 300px; }
}

/* Tablet & below: off-canvas sidebar */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); width: var(--fp-sidebar-w) !important; box-shadow: var(--fp-shadow-lg); }
  body.sb-open .sidebar { transform: none; }
  body.sb-open .sb-overlay { display: block; }
  .main, body.sb-collapsed .main { margin-left: 0; }
  .topbar .mobile-menu-btn { display: inline-flex; }
  .collapse-btn { display: none; }
  /* Undo collapsed mode inside off-canvas */
  body.sb-collapsed .sidebar .brand-word, body.sb-collapsed .sidebar .nav-text, body.sb-collapsed .sidebar .nav-label, body.sb-collapsed .sidebar .demo-pill .demo-text { display: revert; }
  body.sb-collapsed .sidebar-brand { padding: 0 18px; justify-content: flex-start; }
  body.sb-collapsed .nav-item { justify-content: flex-start; padding: 9px 12px; }
  body.sb-collapsed .nav-item .nav-badge { position: static; }
  body.sb-collapsed .sidebar [data-tip]:hover::after { display: none; }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side-main { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .settings-nav a { white-space: nowrap; }
  .user-btn .u-meta { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-brand { display: none; }
}

@media (max-width: 860px) {
  .top-search { display: none; }
  .top-search.mobile-open { display: block; position: absolute; left: 12px; right: 12px; top: 13px; max-width: none; z-index: 5; }
  .search-toggle { display: inline-flex !important; }
  .approval-chip .chip-text { display: none; }
  .crumbs { flex: 1; }
  .inbox { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .inbox .inbox-preview { display: none; }
  .inbox.show-preview .inbox-list { display: none; }
  .inbox.show-preview .inbox-preview { display: block; }
  .inbox-mobile-back { display: inline-flex; }
  .inbox-col { border-right: 0; }
}

@media (max-width: 768px) {
  :root { --fp-gutter: 16px; }
  h1 { font-size: 19px; }
  .g-2, .g-3, .form-grid, .check-grid { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .g-5, .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .ph-actions { width: 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dt { margin-top: 8px; font-size: 12px; }
  .toolbar .input-icon { max-width: none; flex-basis: 100%; }
  .toolbar .select { flex: 1 1 140px; }
  .hbar { grid-template-columns: 110px minmax(0, 1fr) 32px; }
  .transcript .t-line { grid-template-columns: 48px minmax(0,1fr); }
  .transcript .t-who { grid-column: 2; }
  .transcript .t-text { grid-column: 1 / -1; }
  .flow { flex-direction: column; align-items: stretch; overflow: visible; }
  .flow-node { width: 100%; flex: 0 0 auto; }
  .flow-arrow { flex: 0 0 32px; }
  .flow-arrow::before { left: 50%; right: auto; top: 4px; bottom: 10px; width: 2px; height: auto; }
  .flow-arrow::after { right: auto; left: calc(50% - 5px); top: auto; bottom: 3px; border: 5px solid transparent; border-top: 7px solid var(--fp-border-2); border-bottom: 0; }

  /* Responsive tables => stacked cards */
  .table.responsive thead { display: none; }
  .table.responsive, .table.responsive tbody, .table.responsive tr, .table.responsive td { display: block; width: 100%; }
  .table.responsive tr { padding: 12px 16px; border-bottom: 1px solid var(--fp-border); }
  .table.responsive tbody tr:last-child { border-bottom: 0; }
  .table.responsive td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; align-items: center; }
  .table.responsive td::before { content: attr(data-label); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fp-text-2); font-weight: 600; text-align: left; flex: 0 0 auto; }
  .table.responsive td.td-primary { display: block; text-align: left; padding-bottom: 6px; }
  .table.responsive td.td-primary::before { display: none; }
  .table.responsive td[data-label=""]::before { display: none; }
  .table.responsive td .t-actions { justify-content: flex-end; }
  .table.responsive tbody tr:hover td { background: transparent; }

  .modal-backdrop { padding: 12px; align-items: flex-end; }
  .modal { max-height: 92vh; border-radius: 14px; }
  .modal-foot { justify-content: stretch; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot .left { margin-right: 0; width: 100%; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  .bubble { max-width: 100%; }
  .callout { flex-wrap: wrap; }
  .callout .c-actions { margin-left: 30px; width: calc(100% - 30px); }
  .card-head { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .list-item { padding: 12px 14px; }
}

@media (max-width: 480px) {
  .g-4, .g-5, .g-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { flex-direction: column; gap: 8px; }
  .kpi .kpi-go { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .user-btn .avatar + .ic { display: none; }
  .btn-group .btn { flex: 1 1 auto; }
  .page-head .ph-actions .btn { flex: 1 1 auto; }
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; justify-content: center; }
  .pending-tile { padding: 12px; }
  .kpi { padding: 14px; }
  .kpi .kpi-val { font-size: 22px; }
  .notif-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .stat-inline { gap: 16px; }
}

@media print {
  .sidebar, .topbar, .page-head .ph-actions, .toast-stack { display: none !important; }
  .main { margin-left: 0 !important; }
}

/* Priority-based column hiding for wide tables (restored in the mobile card view) */
@media (max-width: 1366px) and (min-width: 769px) { .hide-xl { display: none; } }
@media (max-width: 1100px) and (min-width: 769px) { .hide-lg { display: none; } }