/*
 * Desktop UX layer (>= 1024px). Loaded after app.css + mobile-ux.css by the
 * authenticated shell and the marketing layout. Scope: content widths and
 * footer alignment, product/stat grids at wide viewports, table density,
 * hover/focus affordances, 12px text floor, readable line lengths, empty states.
 */

@media (min-width: 1024px) {
  /* ---------- Shell: content, header and footer share one column ---------- */
  .content-header-inner,
  .content-body,
  .app-footer-inner,
  html[data-theme="dark"] .content-header-inner,
  html[data-theme="dark"] .content-body,
  html[data-theme="dark"] .app-footer-inner {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .app-footer-inner,
  html[data-theme="dark"] .app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 26px 26px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
  }

  .app-footer-inner a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    text-decoration: none;
    text-underline-offset: 3px;
  }

  .app-footer-inner a:hover { text-decoration: underline; }

  /* ---------- Typography floor: nothing under 12px on desktop ---------- */
  .sidebar-section-title,
  .table thead th,
  .table th,
  .stat-label,
  .stat-sub,
  .stat-card .stat-sub,
  .delta,
  .metric-chip-label,
  .health-label span,
  .channel-pct,
  .channel-sub,
  .dash-live-meta,
  .analytics-bar-item,
  .product-detail-stickybar-price span,
  .mkt-pill,
  .mkt-guide-tag,
  .mkt-blog-cat,
  .sidebar-user-email,
  .header-wallet-copy span,
  .pinned-products-eyebrow,
  .pinned-product-badge,
  .pinned-product-meta span,
  .product-card-pin-badge::before,
  .related-guide-tag,
  .pay-method__tag,
  .badge-urgency,
  .table-sort-link span,
  .heatmap th,
  .heatmap-cell,
  html body .admin-stats-grid .stat-label,
  .cc-kpi span,
  .telegram-api-docs .badge,
  .api-docs .badge,
  .content-body .badge.text-bg-info,
  .content-body .badge.text-bg-success,
  .content-body .badge.text-bg-warning,
  .content-body .badge.text-bg-danger,
  .content-body .badge.text-bg-secondary {
    font-size: 12px !important;
  }

  .content-body code,
  .content-body pre {
    font-size: 13px;
  }

  .header-wallet-copy span { letter-spacing: .07em; }

  .table thead th { letter-spacing: .05em; }

  /* ---------- Readable measure for long-form text ---------- */
  .notification-card p,
  .notification-body,
  .empty-state p,
  .product-detail-description,
  .product-description,
  .glass-card > p,
  .help-card p,
  .static-page p,
  .mkt-feature p,
  .mkt-blog-card p,
  .mkt-footer-brand p,
  .content-body .alert,
  .form-hint,
  .form-text,
  small.hint {
    max-width: 72ch;
  }

  .content-body .alert { margin-left: 0; }

  /* ---------- Hover / focus affordances ---------- */
  .stat-card,
  .product-card,
  .glass-card,
  .notification-card,
  .payment-method-card,
  .pinned-product-card,
  .related-product-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .product-card:hover,
  .pinned-product-card:hover,
  .related-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(24, 231, 255, .34);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .32), 0 0 0 1px rgba(24, 231, 255, .12);
  }

  .table tbody tr { transition: background-color .14s ease; }

  .table tbody tr:hover > td,
  html[data-theme="dark"] .table tbody tr:hover > td {
    background: rgba(24, 231, 255, .06) !important;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .sidebar-link:focus-visible,
  .product-card-details-link:focus-visible,
  .filter-tab:focus-visible {
    outline: 2px solid rgba(24, 231, 255, .85);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .btn:focus-visible { outline-offset: 3px; }

  /* Sidebar links: a clear hover state that does not jump the layout */
  .sidebar-link:hover:not(.active) {
    background: rgba(151, 164, 204, .08);
  }

  /* ---------- Tables: comfortable desktop density ---------- */
  .table th,
  .table td {
    padding-top: 13px;
    padding-bottom: 13px;
    vertical-align: middle;
  }

  .table td .btn-sm,
  .table td .btn.btn-sm {
    min-height: 34px;
  }

  html body .bulk-check-cell { width: 44px; min-width: 44px; }

  html body .bulk-check-cell input[type="checkbox"],
  .table input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* ---------- Empty states ---------- */
  .empty-state {
    padding: 64px 24px;
    max-width: 560px;
    margin: 0 auto;
  }

  .empty-state-icon { width: 72px; height: 72px; font-size: 30px; }
  .empty-state h3 { font-size: 18px; }
  .empty-state p { font-size: 14px; max-width: 42ch; }
}

/* ---------- Product grids at wide viewports ---------- */
@media (min-width: 1280px) {
  .products-grid,
  html[data-theme="dark"] .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .pinned-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .products-grid,
  html[data-theme="dark"] .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .content-body,
  html[data-theme="dark"] .content-body {
    padding-left: 32px;
    padding-right: 32px;
  }

  .product-detail-shell { max-width: 1280px; }

  .product-detail-hero {
    grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
    gap: 32px;
  }
}

/* ---------- Marketing layout ---------- */
@media (min-width: 1024px) {
  .mkt-footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 4px;
    padding: 0 2px;
    border-radius: 6px;
    transition: color .14s ease;
  }

  .mkt-footer-col a + a { margin-top: 0; }

  .mkt-footer-col a:focus-visible,
  .mkt-nav a:focus-visible,
  .mkt-btn:focus-visible {
    outline: 2px solid rgba(24, 231, 255, .85);
    outline-offset: 2px;
  }

  .mkt-feature,
  .mkt-guide-card,
  .mkt-blog-card {
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }

  .mkt-feature:hover,
  .mkt-guide-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-600, #5b6cff);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  }
}

@media (min-width: 1600px) {
  .mkt-container { max-width: 1240px; }
}