/* =========================================================
   AI Startup OS — Responsive Foundation
   Shared breakpoints, drawers, tables, forms, typography.
   Load after design-system.css / shell CSS.
   Breakpoints (aligned with Bootstrap where possible):
     --bp-xs: 320 · --bp-sm: 576 · --bp-md: 768
     --bp-lg: 992 · --bp-xl: 1200 · --bp-xxl: 1400
   ========================================================= */

:root {
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
  --touch-min: 44px;
  --font-min: 0.875rem; /* 14px */
  --shell-backdrop: rgba(11, 15, 20, 0.48);
  --content-pad-inline: clamp(0.85rem, 2.5vw, 1.75rem);
  --content-pad-block: clamp(0.85rem, 2vw, 1.5rem);
}

/* ---------- Global safety ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  font-size: max(var(--font-min), 1rem);
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

button.ds-btn, .ds-btn, a.ds-btn,
.topbar-icon-btn, .ix-icon-btn,
#sidebarToggle, #ixSidebarToggle,
.in-menu-btn, .lp-menu-btn,
.aq-chip, .raise-btn, .ivd-btn {
  min-height: var(--touch-min);
}

.topbar-icon-btn, .ix-icon-btn,
#sidebarToggle, #ixSidebarToggle,
.in-menu-btn, .lp-menu-btn {
  min-width: var(--touch-min);
}

.ds-btn, button.ds-btn, a.ds-btn {
  padding-inline: 1rem;
  font-size: max(0.875rem, 0.9rem);
}

input, select, textarea, .ds-input {
  font-size: max(16px, var(--font-min)); /* avoid iOS zoom */
  min-height: var(--touch-min);
}

/* ---------- Shell drawer backdrop (app + IX) ---------- */
.shell-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--shell-backdrop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.shell-nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.shell-nav-lock {
  overflow: hidden;
  touch-action: none;
}

/* ---------- App shell: unify drawer @ 992px ---------- */
@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: min(86vw, 300px) !important;
    max-width: 320px;
    height: 100dvh;
    transform: translateX(-105%);
    z-index: 40 !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
  }

  [dir="rtl"] .app-sidebar {
    inset: 0 0 0 auto;
    transform: translateX(105%);
  }

  .app-sidebar.open {
    transform: translateX(0) !important;
  }

  .app-content,
  .app-main {
    min-width: 0;
    width: 100%;
  }

  .app-topbar {
    padding-inline: var(--content-pad-inline) !important;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .app-topbar .fd-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .app-topbar .fd-search kbd {
    display: none;
  }

  .app-topbar-welcome h1 {
    font-size: clamp(1rem, 4vw, 1.25rem);
    margin: 0;
  }

  .app-topbar-welcome p {
    display: none;
  }

  .app-topbar-crumb {
    min-width: 0;
    overflow: hidden;
  }

  .app-topbar-crumb .crumb-current,
  .app-topbar-crumb .crumb-root {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
  }

  .topbar-profile-meta {
    display: none !important;
  }

  .app-topbar-actions {
    gap: 0.25rem !important;
    flex-shrink: 0;
  }

  .app-content {
    padding: var(--content-pad-block) var(--content-pad-inline) !important;
  }

  /* Collapse secondary topbar actions into tighter row */
  .app-topbar-actions .topbar-icon-btn[title="Calendar"],
  .app-topbar-actions a.topbar-icon-btn[href*="Meetings"] {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .grid-kpi,
  .dash-kpi-row {
    grid-template-columns: 1fr !important;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .grid-kpi,
  .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- IX shells (investor + raise) ---------- */
@media (max-width: 991.98px) {
  .ix-shell {
    grid-template-columns: 1fr !important;
  }

  .ix-sidebar {
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(300px, 88vw) !important;
    height: 100dvh;
    transform: translateX(-110%);
    z-index: 40 !important;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }

  [dir="rtl"] .ix-sidebar {
    transform: translateX(110%);
    inset-inline-start: auto;
    inset-inline-end: 0;
  }

  .ix-sidebar.is-open {
    transform: translateX(0) !important;
  }

  .ix-topbar {
    padding-inline: var(--content-pad-inline) !important;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .ix-topbar-welcome {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ix-topbar-welcome h1 {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ix-topbar-welcome p {
    display: none !important;
  }

  .ix-topbar-actions {
    flex-shrink: 0;
    gap: 0.35rem;
  }

  .ix-content {
    padding: var(--content-pad-block) var(--content-pad-inline) !important;
    min-width: 0;
  }

  .ix-profile-chip span:not(.ix-avatar) {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .ix-topbar {
    flex-wrap: wrap;
  }

  .ix-topbar-welcome {
    order: 3;
    flex: 1 0 100%;
    margin-top: 0.15rem;
  }

  .ix-topbar-welcome h1 {
    white-space: normal;
    line-height: 1.3;
  }

  .ix-topbar-actions {
    width: auto;
    margin-inline-start: auto;
  }

  #ixStartTour {
    display: none !important;
  }
}

/* Undo investor-experience override that fought Bootstrap d-lg-none */
@media (min-width: 992px) {
  .ix-shell .d-lg-none,
  .ix-body .d-lg-none {
    display: none !important;
  }
}

/* ---------- Tables ---------- */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.app-content .table-responsive > table.table,
.dash-card .table-responsive > .dash-table,
.table-responsive > .dash-table {
  min-width: 520px;
  margin-bottom: 0;
}

.dash-card .table-responsive {
  margin-inline: -0.15rem;
}

@media (max-width: 767.98px) {
  /* Applications queue → stacked cards */
  .aq-table-wrap {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .aq-table {
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.65rem;
  }

  .aq-table thead {
    display: none;
  }

  .aq-table tbody {
    display: grid;
    gap: 0.65rem;
  }

  .aq-table tr {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  }

  .aq-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .aq-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    flex: 0 0 auto;
  }

  .aq-table td.aq-actions {
    justify-content: stretch;
    padding-top: 0.35rem !important;
  }

  .aq-table td.aq-actions::before {
    display: none;
  }

  .aq-table td.aq-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .aq-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .aq-chip {
    flex: 0 0 auto;
    min-height: var(--touch-min);
    padding-inline: 0.85rem;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- Forms ---------- */
@media (max-width: 767.98px) {
  .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  form .d-flex.gap-2,
  form .d-flex.gap-3,
  .ds-form-actions,
  .ej-actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  form .d-flex.gap-2 > .ds-btn,
  form .d-flex.gap-3 > .ds-btn,
  .ds-form-actions > .ds-btn,
  .ej-actions > .ds-btn,
  .ej-actions > button {
    width: 100%;
  }

  .auth-shell,
  .auth-card {
    padding-inline: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- Cards / grids ---------- */
@media (max-width: 991.98px) {
  .ds-card,
  .ivd-card,
  .ilab-card {
    border-radius: 16px;
  }
}

/* ---------- Modals ---------- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: 16px;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-footer .btn,
  .modal-footer .ds-btn {
    width: 100%;
  }
}

/* ---------- Floating hub: don't cover primary CTA ---------- */
@media (max-width: 575.98px) {
  .fh-root,
  .floating-hub {
    bottom: max(1rem, env(safe-area-inset-bottom));
    inset-inline-end: max(0.75rem, env(safe-area-inset-right));
  }
}

/* ---------- Focus / a11y ---------- */
:focus-visible {
  outline: 2px solid var(--color-primary, #468251);
  outline-offset: 2px;
}

.shell-nav-backdrop:focus {
  outline: none;
}

/* ---------- Row headers / page titles ---------- */
@media (max-width: 767.98px) {
  .row-between {
    flex-direction: column;
    align-items: stretch !important;
  }

  .row-between .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .ds-subtitle {
    font-size: var(--font-min);
  }

  /* Join persona grid */
  .ej-types {
    grid-template-columns: 1fr !important;
  }

  .ej-type {
    min-height: auto;
  }

  /* Investor opportunity grids */
  .ivd-grid,
  .ivd-opp-grid,
  .ix-opp-grid {
    grid-template-columns: 1fr !important;
  }

  .raise-actions,
  .ivd-opp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ivd-filters .ivd-btn,
  .raise-actions .raise-btn,
  .ivd-opp-actions .ivd-btn,
  .ivd-opp-actions form,
  .ivd-opp-actions button {
    width: 100%;
  }

  .ivd-kpi-3,
  .raise-kpis {
    grid-template-columns: 1fr !important;
  }

  .sp-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .ops-stat-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  .fj-step-dot {
    width: 40px;
    height: 40px;
  }

  .in-filter-bar,
  .in-tabs,
  .ivd-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

@media (max-width: 480px) {
  .ops-stat-strip {
    grid-template-columns: 1fr !important;
  }

  .ivd-next {
    flex-direction: column;
    align-items: stretch;
  }

  .ivd-btn-lg,
  .ivd-meet-card .ivd-btn {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .ivd-grid,
  .ivd-opp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  .app-topbar,
  .ix-topbar {
    padding-top: max(0.65rem, env(safe-area-inset-top));
  }
}