/* Cross-app responsive fixes — loaded after page-specific styles */

/* ── Scrollbars ─────────────────────────────────────────────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  border: 1px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Global ─────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .dashboard-content,
  .admin-dashboard-root,
  .settings-page {
    max-width: 100%;
    min-width: 0;
  }

  .page-header {
    margin-bottom: 14px;
    gap: 10px;
  }

  .page-header .page-title {
    font-size: 1.25rem;
  }

  .page-title {
    font-size: 1.25rem;
    margin-bottom: 14px;
  }

  .page-title--inline {
    font-size: 1.125rem;
  }

  .section-title {
    font-size: 1rem;
    margin: 1.25rem 0 0.75rem;
  }

  .page-tabs {
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    margin-bottom: 16px;
    padding-bottom: 2px;
  }

  .page-tabs a {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
  }

  .card {
    padding: 16px;
    border-radius: 12px;
  }

  .modal--confirm {
    width: calc(100vw - 32px);
    max-width: none;
    margin: 16px;
  }

  .modal__actions--confirm {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .modal__actions--confirm .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dashboard-content {
    padding: 12px 10px 24px;
  }

  .page-title {
    font-size: 1.125rem;
  }

  .stat-value {
    font-size: 22px;
  }
}

/* ── Tables (app-wide: no wrap + horizontal scroll) ─────────────────────── */

.table,
.admin-table,
.subscription-table,
.table--dashboard {
  width: max-content;
  min-width: 100%;
}

.table th,
.table td,
.admin-table th,
.admin-table td,
.subscription-table th,
.subscription-table td {
  white-space: nowrap !important;
}

.data-table__scroll,
.admin-table-wrap,
.card:has(> .table),
.card:has(> table.table),
.card:has(> .subscription-table),
.user-dash-recent__table {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.admin-table__actions,
.table__action-group,
.billing-table__actions {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Empty-state cells may wrap; data cells must not */
.admin-table__empty,
.table .admin-table__empty,
td.admin-table__empty {
  white-space: normal !important;
}

@media (max-width: 960px) {
  .table th,
  .table td,
  .admin-table th,
  .admin-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .table__truncate {
    max-width: 10rem;
  }

  .table__cell--actions {
    min-width: 7rem;
  }

  .table-footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .data-table__toolbar {
    gap: 10px;
  }

  .data-table__toolbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .data-table__toolbar-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .filter-panel {
    padding: 14px;
    border-radius: 12px;
  }

  .filter-panel__intel {
    padding: 12px;
  }

  .filter-panel__apply,
  .filter-panel__clear {
    min-height: 40px;
  }
}

/* ── Dashboard home ───────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .user-dash-recent .admin-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .user-dash-plan__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .user-dash-activity-chart__bars {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .user-dash-activity-chart__col {
    min-width: 2rem;
    flex-shrink: 0;
  }

  .user-dash-quicklinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .user-dash-quicklink {
    padding: 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .user-dash-today__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .user-dash-today__stat {
    padding: 10px;
  }

  .user-dash-quicklinks {
    grid-template-columns: 1fr;
  }

  .stats-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ── Admin ────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .admin-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .admin-section__header .admin-btn,
  .admin-section__header .user-dash-recent__cta {
    width: 100%;
    justify-content: center;
  }

  .admin-toolbar {
    width: 100%;
  }

  .admin-toolbar .admin-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .admin-breadcrumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 4px;
  }

  .admin-dash-panel__head {
    padding: 1rem 1rem;
  }

  .admin-dash-cashflow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
  }

  .admin-dash-cashflow__plot {
    min-width: 36rem;
  }

  .admin-dash-hero__title {
    font-size: 1.125rem;
  }

  .admin-impersonation-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
  }

  .admin-impersonation-banner__btn {
    width: 100%;
    text-align: center;
  }

  .admin-field-grid--2,
  .admin-credential-grid {
    grid-template-columns: 1fr;
  }

  .admin-filter-bar,
  .admin-users-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-filter-bar .admin-field,
  .admin-users-filter__search-wrap,
  .admin-users-filter .admin-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .admin-metrics-row,
  .admin-dash-metrics {
    grid-template-columns: 1fr;
  }

  .admin-dash-card {
    padding: 0.875rem 1rem;
  }
}

/* ── Billing & subscription ───────────────────────────────────────────────── */

@media (max-width: 960px) {
  .subscription-table {
    min-width: 40rem;
  }

  .pricing-page__tabs {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pricing-page__tabs button {
    flex: 1 1 auto;
    min-width: 5.5rem;
  }

  .pricing-page__coupon-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .pricing-page__coupon-input {
    width: 100%;
  }

  .plan-tabs {
    justify-content: center;
  }

  .coupon-row {
    flex-direction: column;
  }

  .pkg-layout {
    gap: 20px;
  }
}

/* ── Settings ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .settings-page__title {
    font-size: 22px;
  }

  .settings-form__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .settings-form__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .settings-meta__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .settings-meta__value {
    text-align: left;
  }

  .settings-action {
    flex-direction: column;
  }

  .settings-action .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .settings-page__header {
    margin-bottom: 20px;
  }

  .settings-sidebar__link {
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* ── Auth ─────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .auth-main {
    padding: 28px 16px;
    justify-content: flex-start;
  }

  .auth-form-card h1 {
    font-size: 24px;
  }

  .auth-form-card__lead {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .auth-main__brand {
    margin-bottom: 24px;
  }
}

/* ── Onboarding ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .onboarding-page {
    width: min(560px, 94%);
    padding: 32px 0 48px;
  }

  .onboarding-hero h1 {
    font-size: 1.5rem;
  }

  .onboarding-modal {
    padding: 24px 20px 20px;
  }

  .onboarding-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .onboarding-modal__advanced,
  .btn-save {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .onboarding-badges {
    gap: 12px;
    font-size: 11px;
  }

  .notify-row {
    font-size: 13px;
  }

  .notify-select {
    display: block;
    margin: 6px 0 0;
    width: 100%;
    max-width: 12rem;
  }
}

/* ── Legal & public ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .legal-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  .legal-main {
    padding: 24px 16px 40px;
  }

  .legal-doc {
    padding: 24px 18px;
    border-radius: 12px;
  }

  .legal-doc h1 {
    font-size: 1.5rem;
  }

  .site-header .container {
    gap: 12px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ── Track detail ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .track-detail__title {
    font-size: 1.125rem;
  }

  .track-detail__intel-fold-summary {
    padding: 14px 16px;
  }

  .track-intel__panel {
    padding: 14px;
  }

  .track-intel__row-form,
  .track-intel__field-row {
    flex-direction: column;
    align-items: stretch;
  }

  .track-intel__row-form .btn,
  .track-intel__row-form input,
  .track-intel__row-form select,
  .track-intel__field-row .btn,
  .track-intel__field-row input,
  .track-intel__field-row select {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .track-detail__metric {
    flex: 1 1 100%;
  }

  .track-detail__meta {
    font-size: 12px;
  }
}

/* ── Sign editor ──────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .sign-header__controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sign-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }
}