/**
 * Launch responsive utilities — mobile-first fixes for admin + public surfaces.
 * Loaded with fdskill-compact.css on every SPA shell.
 */

:root {
  --fdskill-touch-min: 44px;
  --fdskill-bp-tablet: 1024px;
  --fdskill-bp-mobile: 900px;
  --fdskill-bp-phone: 520px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

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

/* Prevent horizontal scroll from wide tables/charts */
.portal-main,
.module-shell__body,
.finance-desk,
.crm-desk,
.dt-wrap,
.data-table-wrap,
.admin-table-wrap,
.store-main {
  max-width: 100%;
}

.dt-wrap,
.data-table-wrap,
.admin-table-wrap,
.table-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch-friendly controls on phones/tablets */
@media (max-width: 900px) {
  button,
  .admin-main-action,
  .small-admin-btn,
  .portal-tab,
  .fdskill-tab,
  input[type='submit'],
  select,
  textarea,
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='number'],
  input[type='password'],
  input[type='search'],
  input[type='date'] {
    min-height: var(--fdskill-touch-min);
    font-size: max(16px, 1rem);
  }

  .portal-tab,
  .fdskill-tab {
    min-height: var(--fdskill-touch-min) !important;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* Modals / drawers use full width on small screens */
  .modal-panel,
  .team-modal-panel,
  .drawer-panel,
  .finance-modal,
  .workflow-modal {
    width: min(100vw - 1rem, 640px) !important;
    max-height: min(92dvh, 900px);
    margin: 0.5rem auto;
  }

  .modal-backdrop,
  .team-modal-backdrop {
    padding: 0.5rem;
  }

  /* Stack toolbar actions vertically */
  .dt-toolbar,
  .stats-period-toolbar,
  .finance-toolbar,
  .page-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .dt-toolbar__actions,
  .stats-period-toolbar__actions {
    width: 100%;
  }

  .dt-toolbar__actions > *,
  .stats-period-toolbar__actions > * {
    width: 100%;
    justify-content: center;
  }

  /* Platform admin: scroll tables, stack stats */
  .platform-admin {
    padding: 0.85rem;
  }

  .platform-table-wrap,
  .platform-team-demo__table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .platform-table {
    min-width: 520px;
  }

  .platform-stats {
    flex-direction: column;
  }

  .platform-module-grid {
    grid-template-columns: 1fr;
  }

  .platform-edit-stack__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Chart / canvas panels */
  .chart-panel,
  .stats-chart-wrap,
  canvas {
    max-width: 100%;
  }

  /* WhatsApp inbox: allow thread list to stack */
  .wa-workspace,
  .whatsapp-inbox-workspace {
    min-width: 0;
  }

  .finance-desk,
  .fin-invoice-panel {
    min-width: 0;
  }

  /* Carousel / hero pagination — exclude from 44px touch button rule */
  .store-hero__dots button {
    min-height: 0 !important;
    min-width: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
  }
}

/* Tablet: slightly wider content, keep sidebar compact */
@media (min-width: 901px) and (max-width: 1024px) {
  .portal-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Large monitors: cap readable line length for marketing */
@media (min-width: 1400px) {
  .home-shell,
  .pricing-shell,
  .public-page__inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}