/* Navitas Dashboard — mobile app-shell layer.
   Desktop (>=1024px) untouched. Mobile: airy spacing, true circles, no cram. */

:root {
  --navitas-blue: #104C9C;
  --navitas-blue-dark: #0B3670;
  --gutter: 18px;
}

html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #EEF0F2;
}
body {
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

.navitas-mobile-nav-backdrop,
.navitas-mobile-nav,
.navitas-bottom-bar,
.navitas-mobile-menu-btn {
  display: none;
}

@media (max-width: 1023px) {
  /* True circles — never let min-height stretch icon buttons */
  .navitas-circle,
  .navitas-theme-toggle,
  #profile-btn,
  #ai-launcher,
  .inbox-avatar,
  header [style*="border-radius:50%"],
  header [style*="border-radius: 50%"] {
    aspect-ratio: 1 / 1 !important;
    flex: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none;
  }

  html, body { overflow-x: hidden; }

  body > div.app-shell {
    display: block !important;
    min-width: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ---- Sticky header: row1 actions, row2 search ---- */
  body > div.app-shell > header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px var(--gutter) 12px !important;
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    height: auto !important;
    min-height: 0 !important;
    background: #fff;
    border-bottom: 1px solid #ECEEF1;
  }
  body > div.app-shell > header .navitas-logo-badge {
    height: 36px !important;
    padding: 0 10px !important;
  }
  body > div.app-shell > header .navitas-logo-badge img {
    height: 22px !important;
  }

  .navitas-mobile-menu-btn {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #E3E6EA;
    background: #fff;
    color: #1B1F24;
    flex: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Circular header controls — fixed 40×40, never oblong */
  .navitas-theme-toggle,
  #profile-btn,
  body > div.app-shell > header > div[style*="margin-left:auto"] > div[style*="border-radius:50%"],
  body > div.app-shell > header > div[style*="margin-left:auto"] > div[style*="border-radius: 50%"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
  }

  body > div.app-shell > header > div[style*="margin-left:auto"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  /* Search full width on second row */
  body > div.app-shell > header .navitas-search-bar {
    display: flex !important;
    order: 10;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    height: 44px !important;
    box-sizing: border-box;
  }
  body > div.app-shell > header .navitas-search-bar input {
    font-size: 16px !important;
  }

  body > div.app-shell > nav.navitas-icon-rail,
  body > div.app-shell > aside.navitas-sidebar { display: none !important; }

  /* ---- Slide-in nav ---- */
  .navitas-mobile-nav-backdrop {
    position: fixed; inset: 0; background: rgba(16,20,26,0.45);
    z-index: 1200; opacity: 0; pointer-events: none;
    transition: opacity 250ms ease-out;
  }
  .navitas-mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }
  .navitas-mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 360px);
    background: #fff;
    z-index: 1201;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(0,0,0,0.18);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .navitas-mobile-nav.open { transform: translateX(0); }
  .navitas-mobile-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--gutter); border-bottom: 1px solid #ECEEF1; flex: none;
  }
  .navitas-mobile-nav-close {
    width: 40px; height: 40px; aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #F3F4F6; border: none; color: #1B1F24; font-size: 20px;
    padding: 0; min-height: 0;
  }
  .navitas-mobile-nav-list { flex: 1; overflow-y: auto; padding: 12px 10px; }
  .navitas-mobile-nav-list a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 14px; border-radius: 12px; font-size: 16px; font-weight: 500;
    color: #1B1F24; min-height: 48px;
  }
  .navitas-mobile-nav-list a.active { background: #EEF3FA; color: var(--navitas-blue); font-weight: 700; }
  .navitas-mobile-nav-list .navitas-nav-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #8A9099; padding: 16px 14px 6px;
  }

  /* ---- Bottom bar ---- */
  .navitas-bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
    display: flex; background: #fff; border-top: 1px solid #ECEEF1;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  }
  .navitas-bottom-bar a, .navitas-bottom-bar button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 10px 4px 8px; font-size: 11px; font-weight: 600; color: #5A606A;
    background: none; border: none; min-height: 56px;
    -webkit-tap-highlight-color: transparent;
  }
  .navitas-bottom-bar a.active { color: var(--navitas-blue); }
  .navitas-bottom-bar .icon { width: 22px; height: 22px; }

  /* ---- Main: airy gutters, room for bottom bar + FAB ---- */
  body > div.app-shell > main {
    display: block !important;
    padding: 20px var(--gutter) !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
  }
  body > div.app-shell > main > * { grid-column: auto !important; max-width: 100%; }

  /* Overview: stack sections; KPIs 2-col with gap */
  body > div.app-shell > main[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  body > div.app-shell > main > div[style*="repeat(4"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  @media (max-width: 380px) {
    body > div.app-shell > main > div[style*="repeat(4"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* DO NOT force every grid to 1 column — that stacked Customers headers.
     Data tables: horizontal scroll, keep columns. */
  .navitas-table-scroll,
  main .table-scroll,
  #inbox-list,
  main > section > div[style*="border:1px solid"][style*="overflow"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Customers / partners / recent trades: keep multi-col, scroll sideways */
  .qbo-row,
  .partner-row,
  main a.row[style*="grid-template-columns"],
  main div.row[style*="grid-template-columns"],
  main div[style*="grid-template-columns:1.3fr"],
  main div[style*="grid-template-columns:1.6fr"],
  main div[style*="grid-template-columns:.9fr"] {
    min-width: 640px;
  }
  /* Header rows of those tables too */
  main div[style*="background:#F7F8F9"][style*="grid-template-columns"] {
    min-width: 640px;
  }
  /* Wrap customer tables for scroll */
  main > div[style*="background:#fff"][style*="border-radius:16px"],
  main div[style*="border-radius:16px"][style*="overflow:hidden"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prefer card stack for QBO/partner rows on very small screens */
  @media (max-width: 1023px) {
    /* Cardify customers rows instead of tiny stacked labels */
    .qbo-row,
    .partner-row {
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 8px !important;
      padding: 18px 20px !important;
      border-top: 1px solid #ECEEF1;
    }
    .qbo-row > div,
    .partner-row > div {
      width: 100% !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: unset !important;
      line-height: 1.35 !important;
    }
    .qbo-row > div:first-child,
    .partner-row > div:first-child {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #104C9C !important;
      margin-bottom: 2px;
    }
    /* Hide the desktop column header strip on mobile — cards are self-describing */
    main div[style*="background:#F7F8F9"][style*="grid-template-columns:1.3fr"],
    main div[style*="background:#F7F8F9"][style*="grid-template-columns:1.6fr"] {
      display: none !important;
    }
  }

  h1 { font-size: 22px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
  h2 { font-size: 17px !important; line-height: 1.25 !important; }

  /* Tap feedback — DO NOT set min-height on all links/buttons (oblong circles) */
  a, button, input, select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  input[type=text], input[type=search], input[type=password], input[type=date], select, textarea {
    font-size: 16px !important;
  }

  /* Status pills — stay compact pills, not 44px tall */
  span[style*="border-radius:999px"],
  span[style*="border-radius: 999px"] {
    min-height: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 10px !important;
    line-height: 1.2 !important;
  }

  /* Inbox list breathing room */
  #inbox-list { border-radius: 14px !important; }
  .inbox-row > div[onclick] {
    padding: 16px 16px !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .inbox-avatar,
  .inbox-row div[style*="border-radius:50%"][style*="width:36px"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    flex: none !important;
  }
  /* NAVITAS 20261008 genbtn: Generate stays compact on mobile (right of the tags), not a full-width bar */
  .inbox-row button.inbox-generate-btn { height: 34px; padding: 0 14px; }
  .inbox-row > div[onclick] {
    flex-wrap: wrap !important;
  }

  /* Pagination: stack cleanly, pill sizes stay circular-ish (equal pad) */
  .inbox-pager {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .inbox-pager-sizes a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
  }

  /* Hide duplicate in-page search on inbox (header search is enough) */
  #inbox-live-search { /* keep if used by JS */ }
  form[action="/inbox"] input[type="search"] {
    /* page form may still exist */
  }

  /* Donut scale */
  main section [style*="width:300px"][style*="border-radius:50%"] {
    width: min(240px, 70vw) !important;
    height: min(240px, 70vw) !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Modals full sheet */
  #sender-deals-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: auto;
  }
  #sender-deals-modal {
    align-items: flex-end !important;
  }


  /* Inbox: header search is enough — hide duplicate page search row */
  .inbox-search-row { display: none !important; }
  .inbox-size-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .inbox-pager {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .inbox-pager > div {
    justify-content: space-between !important;
  }

  /* AI launcher — true circle, clear of bottom bar + list CTAs */
  #ai-launcher {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
    z-index: 850 !important;
  }
  #ai-panel {
    left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    width: 100% !important; height: 85vh !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Section cards more padding */
  main > section,
  main > div[style*="border-radius:16px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- Expanded deal detail (was padding-left:72px + min-width:320 → off-screen) ---- */
  .inbox-detail {
    padding: 12px 12px 20px !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .inbox-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .inbox-parsed-panel,
  .inbox-raw-panel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  .inbox-panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .inbox-panel-actions {
    width: 100% !important;
  }
  .inbox-panel-actions button {
    flex: 1 1 auto;
    min-height: 44px;
    white-space: normal !important;
    line-height: 1.25;
  }
  .inbox-field-row {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  .inbox-field-label {
    width: auto !important;
    padding-top: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Nuclear circle lock — beat inline + flex stretch on iOS */
  #profile-btn,
  .navitas-theme-toggle,
  .inbox-avatar,
  .inbox-size-btn,
  #ai-launcher {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
  }
  #profile-btn, .navitas-theme-toggle {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
    max-width: 40px !important; max-height: 40px !important;
  }
  .inbox-avatar, .inbox-size-btn {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    max-width: 36px !important; max-height: 36px !important;
  }
  .inbox-size-btn {
    line-height: 36px !important;
    text-align: center !important;
    display: inline-block !important;
  }
  #ai-launcher {
    width: 56px !important; height: 56px !important;
    min-width: 56px !important; min-height: 56px !important;
    max-width: 56px !important; max-height: 56px !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    right: 18px !important;
  }
  body > div.app-shell > main {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .navitas-mobile-nav, .navitas-mobile-nav-backdrop, header { transition: none !important; }
}

/* Auth pages */
@media (max-width: 1023px) {
  body.auth-page, body:has(form[action="/login"]) {
    padding: 24px var(--gutter);
  }
}

/* QC D4/E1/F1 — 2026-09-16 */
@media (max-width: 1023px) {
  /* D4 — customer deals: stack as cards */
  .table-scroll { overflow-x: visible !important; }
  .deal-table-head { display: none !important; }
  .deal-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  .deal-row > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .deal-row > div::before {
    content: attr(data-label);
    color: #8A9099;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex: none;
  }
  .deal-row > div:nth-child(1)::before { content: "Role"; }
  .deal-row > div:nth-child(2)::before { content: "Date"; }
  .deal-row > div:nth-child(3)::before { content: "Product"; }
  .deal-row > div:nth-child(4)::before { content: "Counterparty"; }
  .deal-row > div:nth-child(5)::before { content: "Volume"; }
  .deal-row > div:nth-child(6)::before { content: "Trade Type"; }
  .deal-row > div:nth-child(7)::before { content: "Commission"; }
  .deal-row > div:nth-child(8)::before { content: "Confirm #"; }

  /* E1 — brokers summary stack */
  .broker-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .broker-metric {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    color: #5A606A !important;
  }
  .broker-metric-label { font-size: 12px; color: #8A9099; }
  .broker-metric-value { font-weight: 600; color: #1B1F24 !important; }

  /* F1 — connectors 1-col */
  .connectors-grid {
    grid-template-columns: 1fr !important;
  }
}


/* NAVITAS 20261008 genbtn: compact secondary Generate button in inbox rows (all widths) */
.inbox-generate-btn{flex:none;align-self:flex-end;height:32px;padding:0 14px;background:#fff;color:#104C9C;border:1px solid #104C9C;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.inbox-generate-btn:hover{background:#104C9C;color:#fff}
.inbox-generate-btn:focus-visible{outline:2px solid #2F6CC0;outline-offset:2px}
.inbox-generate-btn:disabled{opacity:.6;cursor:default}
/* NAVITAS 20261008 regen: small outline button beside a generated confirmation chip */
.inbox-regen-btn{height:22px;padding:0 9px;background:#fff;color:#104C9C;border:1px solid #C9D6EA;border-radius:999px;font-family:inherit;font-size:11px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;vertical-align:middle}
.inbox-regen-btn:hover{border-color:#104C9C;background:#EEF3FA}
.inbox-regen-btn:disabled{opacity:.6;cursor:default}
/* NAVITAS 20261008 attach: attachments list under RAW EMAIL */
.inbox-attachments{margin-top:10px;border-top:1px solid #ECEEF1;padding-top:8px}
.inbox-attachments:empty{display:none}
.att-head{font-size:11px;font-weight:700;color:#104C9C;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.att-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #F1F2F4}
.att-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.att-name{font-size:13px;font-weight:600;color:#104C9C;word-break:break-word;text-decoration:none}
a.att-name:hover{text-decoration:underline}
.att-sub{font-size:11px;color:#8A9099}
.att-inc{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;color:#5A606A;cursor:pointer;white-space:nowrap}
.att-inc input{width:16px;height:16px;accent-color:#104C9C;margin:0}
.att-muted{font-size:11px;color:#8A9099;margin-top:4px}
.att-muted:empty{display:none}