/* Two-up card system for Investor (P2) and Internal (P3) tablet/mobile views. */
@media (max-width: 960px) {
  .investor-shell .quick-grid,
  .investor-shell .metric-grid,
  .investor-shell .finance-flow,
  .investor-shell .content-grid.equal,
  .investor-shell .investor-order-summary,
  .investor-shell .investor-order-list,
  .investor-shell .investor-order-aside,
  .investor-shell .dashboard-grid > aside.stack,
  .staff-shell .task-grid,
  .staff-shell .kpi-grid,
  .staff-shell .role-grid,
  .staff-shell .approval-grid,
  .staff-shell .approval-kpis,
  .staff-shell .applicant-list,
  .staff-shell .review-data-grid,
  .staff-shell .kpi-grid + .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .investor-shell .investor-order-aside,
  .investor-shell .dashboard-grid > aside.stack {
    align-items: stretch;
  }

  .investor-shell .investor-order-aside > .notice {
    grid-column: 1 / -1;
  }

  .investor-shell .dashboard-grid > aside.stack > .card,
  .staff-shell .kpi-grid + .staff-grid > .card,
  .staff-shell .kpi-grid + .staff-grid > aside {
    height: 100%;
  }

  .staff-shell .task-grid > :last-child:nth-child(odd),
  .staff-shell .role-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .staff-shell .task-grid,
  .staff-shell .role-grid,
  .staff-shell .approval-kpis,
  .staff-shell .applicant-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .investor-shell .investor-order-list,
  .investor-shell .investor-order-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .investor-shell .investor-order-aside > .notice {
    grid-column: auto;
  }

  .investor-shell .finance-step::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .investor-shell .quick-grid,
  .investor-shell .metric-grid,
  .investor-shell .finance-flow,
  .investor-shell .content-grid.equal,
  .investor-shell .investor-order-summary,
  .investor-shell .investor-order-list,
  .investor-shell .investor-order-aside,
  .investor-shell .dashboard-grid > aside.stack,
  .staff-shell .task-grid,
  .staff-shell .kpi-grid,
  .staff-shell .role-grid,
  .staff-shell .approval-grid,
  .staff-shell .approval-kpis,
  .staff-shell .applicant-list,
  .staff-shell .review-data-grid,
  .staff-shell .kpi-grid + .staff-grid {
    gap: 9px;
  }

  .investor-shell .metric,
  .investor-shell .finance-step,
  .investor-shell .investor-order-stat,
  .staff-shell .kpi,
  .staff-shell .approval-kpis > div,
  .staff-shell .review-data-grid > div {
    min-height: 88px;
    padding: 12px;
  }

  .investor-shell .quick-action {
    min-height: 92px;
    padding: 12px;
  }

  .investor-shell .quick-action .row-icon,
  .staff-shell .task-card .row-icon,
  .staff-shell .role-card .row-icon {
    width: 34px;
    height: 34px;
  }

  .investor-shell .quick-action strong,
  .staff-shell .task-card strong,
  .staff-shell .role-card strong {
    font-size: .66rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .staff-shell .task-card,
  .staff-shell .role-card {
    min-height: 122px;
    padding: 11px;
  }

  .staff-shell .task-card span,
  .staff-shell .role-card span {
    display: block;
    overflow: visible;
    font-size: .58rem;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .staff-shell .kpi strong,
  .staff-shell .approval-kpis strong {
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .staff-shell .kpi span,
  .staff-shell .kpi small,
  .staff-shell .approval-kpis span,
  .staff-shell .approval-kpis small {
    font-size: .57rem;
    line-height: 1.4;
  }

  .staff-shell .approval-card,
  .staff-shell .applicant-card {
    padding: 12px;
    border-radius: 14px;
  }

  .staff-shell .applicant-card {
    gap: 11px;
  }

  .staff-shell .applicant-profile {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .staff-shell .applicant-profile > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .58rem;
  }

  .staff-shell .applicant-profile h3 {
    font-size: .68rem;
  }

  .staff-shell .applicant-profile p,
  .staff-shell .applicant-profile small,
  .staff-shell .applicant-checks span,
  .staff-shell .applicant-status strong {
    font-size: .53rem;
  }

  .staff-shell .applicant-checks {
    gap: 6px;
    padding: 9px;
  }

  .staff-shell .applicant-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-shell .applicant-card .btn,
  .staff-shell .approval-card .btn {
    min-height: 40px;
    padding: 8px 9px;
    font-size: .62rem;
  }

  .staff-shell .approval-grid .data-row {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 8px;
  }

  .staff-shell .approval-grid .row-icon {
    width: 32px;
    height: 32px;
  }

  .staff-shell .approval-grid .row-value {
    font-size: .56rem;
  }

  .investor-shell .dashboard-grid > aside.stack .card {
    padding: 13px;
  }

  .investor-shell .dashboard-grid > aside.stack .balance-amount {
    margin-block: 10px 14px;
    font-size: clamp(1.05rem, 4.7vw, 1.4rem) !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .investor-shell .dashboard-grid > aside.stack .chart {
    height: 112px;
    margin-top: 11px;
  }

  .investor-shell .dashboard-grid > aside.stack .card-head h3,
  .investor-shell .content-grid.equal .card-head h3 {
    font-size: .7rem;
  }

  .investor-shell .dashboard-grid > aside.stack .muted,
  .investor-shell .content-grid.equal .muted {
    font-size: .59rem !important;
    line-height: 1.45 !important;
  }

  .investor-shell .content-grid.equal .card {
    padding: 13px;
  }

  .investor-shell .content-grid.equal .balance-amount {
    font-size: clamp(1rem, 4.8vw, 1.35rem) !important;
    overflow-wrap: anywhere;
  }

  .investor-shell .investor-order-card {
    min-width: 0;
    padding: 12px;
    border-radius: 15px;
  }

  .investor-shell .investor-order-list .investor-order-card {
    padding: 10px 8px;
  }

  .investor-shell .investor-order-list .investor-order-unit img {
    height: 76px;
  }

  .investor-shell .investor-order-list .investor-order-actions p,
  .investor-shell .investor-order-list .investor-order-actions .btn-secondary,
  .investor-shell .investor-order-list .investor-order-meta > div:nth-child(n + 2) {
    display: none;
  }

  .investor-shell .investor-order-aside > * {
    min-width: 0;
    padding: 10px 8px;
    overflow-wrap: anywhere;
  }

  .investor-shell .investor-order-head,
  .investor-shell .investor-order-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .investor-shell .investor-order-unit {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .investor-shell .investor-order-unit img {
    width: 100%;
    height: 92px;
    object-fit: contain;
  }

  .investor-shell .investor-order-unit small,
  .investor-shell .investor-order-unit p,
  .investor-shell .investor-order-meta span,
  .investor-shell .investor-order-actions p {
    font-size: .56rem;
    line-height: 1.4;
  }

  .investor-shell .investor-order-unit h3,
  .investor-shell .investor-order-amount strong,
  .investor-shell .investor-order-meta strong {
    font-size: .67rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .investor-shell .investor-order-meta {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-block: 11px;
  }

  .investor-shell .investor-order-meta > div:nth-child(n + 2) {
    display: none;
  }

  .investor-shell .investor-order-actions > div {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .investor-shell .investor-order-actions .btn {
    width: 100%;
    min-height: 40px;
    padding: 8px;
    font-size: .61rem;
  }

  .investor-shell .investor-order-stat strong {
    font-size: clamp(.88rem, 4vw, 1.12rem);
    line-height: 1.25;
  }

  .investor-shell .investor-order-stat span {
    font-size: .58rem;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .investor-shell .quick-grid,
  .investor-shell .metric-grid,
  .investor-shell .finance-flow,
  .investor-shell .content-grid.equal,
  .investor-shell .investor-order-summary,
  .investor-shell .investor-order-list,
  .investor-shell .investor-order-aside,
  .investor-shell .dashboard-grid > aside.stack,
  .staff-shell .task-grid,
  .staff-shell .kpi-grid,
  .staff-shell .role-grid,
  .staff-shell .approval-grid,
  .staff-shell .approval-kpis,
  .staff-shell .applicant-list,
  .staff-shell .review-data-grid,
  .staff-shell .kpi-grid + .staff-grid {
    gap: 7px;
  }

  .staff-shell .task-card,
  .staff-shell .role-card,
  .staff-shell .approval-card,
  .staff-shell .applicant-card {
    padding: 10px;
  }
}