/* ============================================================
   17. Modern Components Responsive Upgrade
============================================================ */

/* ---------- Desktop / Laptop Safety ---------- */

@media (max-width: 1200px) {
  .dashboard-widgets__grid,
  .settings-panel__grid,
  .data-status-panel__grid,
  .system-info-panel__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  .quick-actions__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  .module-detail-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: var(--space-8);
  }

  .loading-screen__card,
  .onboarding-tour__card {
    width: min(100%, 500px);
  }
}

/* ---------- Tablet Landscape ---------- */

@media (max-width: 1024px) {
  .dashboard-widgets,
  .quick-actions,
  .recent-modules,
  .favorite-modules,
  .progress-summary,
  .leaderboard-panel,
  .settings-panel,
  .data-status-panel,
  .system-info-panel,
  .help-panel {
    gap: var(--space-5);
  }

  .dashboard-widget {
    min-height: 190px;
  }

  .dashboard-widget__metrics,
  .dashboard-welcome__stats,
  .system-info-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  }

  .help-panel__nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .help-panel__nav::-webkit-scrollbar {
    display: none;
  }

  .help-panel__nav-item {
    flex: 0 0 auto;
  }

  .module-detail-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .module-detail-hero__content {
    justify-items: center;
  }

  .module-detail-hero__visual {
    order: -1;
  }
}

/* ---------- Tablet Portrait ---------- */

@media (max-width: 900px) {
  .dashboard-widgets__header,
  .quick-actions__header,
  .recent-modules__header,
  .favorite-modules__header,
  .progress-summary__header,
  .leaderboard-panel__header,
  .settings-panel__header,
  .data-status-panel__header,
  .system-info-panel__header,
  .help-panel__header {
    display: grid;
    gap: var(--space-3);
  }

  .dashboard-widgets__title,
  .quick-actions__title,
  .recent-modules__title,
  .favorite-modules__title,
  .progress-summary__title,
  .leaderboard-panel__title,
  .settings-panel__title,
  .data-status-panel__title,
  .system-info-panel__title,
  .help-panel__title {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  }

  .recent-modules__item,
  .favorite-modules__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .recent-modules__item-actions,
  .favorite-modules__item-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .search-box__form {
    grid-template-columns: 1fr auto;
  }

  .system-info-panel__actions,
  .data-status-panel__actions,
  .settings-panel__actions {
    justify-content: flex-start;
  }

  .app-error-boundary__card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .app-error-boundary__icon {
    margin-inline: auto;
  }
}

/* ---------- Tablet / Phone Large ---------- */

@media (max-width: 768px) {
  .dashboard-widgets__grid,
  .quick-actions__grid,
  .settings-panel__grid,
  .data-status-panel__grid,
  .system-info-panel__grid,
  .help-item-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-widget,
  .settings-section,
  .data-status-section,
  .system-info-section,
  .help-section {
    padding: var(--space-4);
    border-radius: var(--radius-2xl);
  }

  .dashboard-widget:hover,
  .quick-action:hover,
  .recent-modules__item:hover,
  .favorite-modules__item:hover {
    transform: none;
  }

  .quick-action {
    min-height: 82px;
  }

  .quick-action__icon,
  .settings-section__icon,
  .data-status-section__icon,
  .system-info-section__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
  }

  .recent-modules__item,
  .favorite-modules__item {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .recent-modules__item-icon,
  .favorite-modules__item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    font-size: 1.45rem;
  }

  .recent-modules__item-title,
  .favorite-modules__item-title {
    font-size: var(--text-base);
  }

  .recent-modules__item-description,
  .favorite-modules__item-description {
    font-size: var(--text-xs);
  }

  .recent-modules__item-actions .button,
  .favorite-modules__item-actions .button {
    flex: 1 1 140px;
  }

  .search-box__form {
    grid-template-columns: 1fr;
    padding: var(--space-2);
  }

  .search-box__form .button {
    width: 100%;
  }

  .system-info-kv {
    grid-template-columns: 1fr;
  }

  .system-info-kv dd {
    text-align: left;
  }

  .help-quick-start,
  .help-panel__actions,
  .dashboard-quick-start {
    display: grid;
    grid-template-columns: 1fr;
  }

  .help-quick-start .button,
  .help-panel__actions .button,
  .dashboard-quick-start .button {
    width: 100%;
  }

  .loading-screen,
  .onboarding-tour {
    padding: var(--space-3);
  }

  .loading-screen__card,
  .onboarding-tour__card {
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
  }

  .loading-screen__logo-mark {
    width: 68px;
    height: 68px;
    font-size: 2.2rem;
  }

  .onboarding-tour__icon {
    width: 62px;
    height: 62px;
    font-size: 1.8rem;
  }

  .onboarding-tour__actions {
    display: grid;
    gap: var(--space-3);
  }

  .onboarding-tour__actions-left,
  .onboarding-tour__actions-right {
    display: grid;
    grid-template-columns: 1fr;
  }

  .onboarding-tour__actions .button {
    width: 100%;
  }

  .offline-banner {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    transform: none;
  }

  .update-toast,
  .offline-banner {
    padding: var(--space-3);
  }
}

/* ---------- Phone General ---------- */

@media (max-width: 640px) {
  .dashboard-widgets__title,
  .quick-actions__title,
  .recent-modules__title,
  .favorite-modules__title,
  .progress-summary__title,
  .leaderboard-panel__title,
  .settings-panel__title,
  .data-status-panel__title,
  .system-info-panel__title,
  .help-panel__title,
  .loading-screen__title,
  .onboarding-tour__title,
  .app-error-boundary__title {
    font-size: var(--text-2xl);
  }

  .dashboard-widgets__description,
  .quick-actions__description,
  .recent-modules__description,
  .favorite-modules__description,
  .progress-summary__description,
  .leaderboard-panel__description,
  .settings-panel__description,
  .data-status-panel__description,
  .system-info-panel__description,
  .help-panel__description,
  .loading-screen__message,
  .onboarding-tour__description,
  .app-error-boundary__message {
    font-size: var(--text-sm);
  }

  .dashboard-widget__header,
  .settings-section__header,
  .data-status-section__header,
  .system-info-section__header,
  .help-section__header {
    gap: var(--space-2);
  }

  .dashboard-widget__icon,
  .help-section__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-xl);
    font-size: 1.35rem;
  }

  .dashboard-widget__title,
  .settings-section__title,
  .data-status-section__title,
  .system-info-section__title,
  .help-section__title {
    font-size: var(--text-lg);
  }

  .dashboard-widget__metrics,
  .dashboard-welcome__stats,
  .system-info-metric-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metric,
  .system-info-metric {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .dashboard-metric__icon,
  .system-info-metric__icon {
    grid-row: span 2;
  }

  .dashboard-metric__value,
  .system-info-metric__value {
    font-size: var(--text-lg);
  }

  .quick-action {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: auto;
    padding: var(--space-3);
  }

  .quick-action__badge {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .quick-action__description {
    display: none;
  }

  .recent-modules__item,
  .favorite-modules__item {
    grid-template-columns: 1fr;
  }

  .recent-modules__item-icon,
  .favorite-modules__item-icon {
    width: 52px;
    height: 52px;
  }

  .recent-modules__item-actions,
  .favorite-modules__item-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .recent-modules__item-actions .button,
  .favorite-modules__item-actions .button {
    width: 100%;
  }

  .favorite-button {
    min-height: 40px;
  }

  .help-panel__hint {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .help-item {
    padding: var(--space-3);
  }

  .help-step {
    gap: var(--space-2);
  }

  .help-step__marker {
    width: 28px;
    height: 28px;
  }

  .module-detail-hero {
    gap: var(--space-5);
  }

  .module-detail-hero__visual .module-card__visual {
    min-height: 140px;
  }

  .app-error-boundary {
    padding: var(--space-3);
  }

  .app-error-boundary__card {
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
  }

  .app-error-boundary__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-error-boundary__actions .button {
    width: 100%;
  }

  .app-error-boundary__stack {
    max-height: 190px;
    font-size: 0.68rem;
  }
}

/* ---------- Small Phone ---------- */

@media (max-width: 480px) {
  .dashboard-widgets,
  .quick-actions,
  .recent-modules,
  .favorite-modules,
  .progress-summary,
  .leaderboard-panel,
  .settings-panel,
  .data-status-panel,
  .system-info-panel,
  .help-panel {
    gap: var(--space-4);
  }

  .dashboard-widget,
  .settings-section,
  .data-status-section,
  .system-info-section,
  .help-section {
    padding: var(--space-3);
  }

  .dashboard-widget__description,
  .settings-section__description,
  .data-status-section__description,
  .system-info-section__description,
  .help-section__description {
    font-size: var(--text-xs);
  }

  .dashboard-mini-progress,
  .progress-line,
  .loading-screen__progress,
  .onboarding-tour__progress {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .dashboard-mini-progress__value,
  .progress-line__value,
  .loading-screen__progress-value,
  .onboarding-tour__counter {
    justify-self: start;
  }

  .search-box__input {
    min-height: 46px;
    font-size: 16px;
  }

  .system-info-kv,
  .dashboard-simple-list li,
  .dashboard-check-list li {
    padding: var(--space-2);
  }

  .system-info-chip-list {
    gap: var(--space-1);
  }

  .system-info-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loading-screen__card,
  .onboarding-tour__card {
    padding: var(--space-4);
  }

  .loading-screen__logo-mark {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-xl);
    font-size: 1.9rem;
  }

  .onboarding-tour__icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-xl);
    font-size: 1.55rem;
  }

  .onboarding-tour__step-action {
    width: 100%;
  }

  .update-toast,
  .offline-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .update-toast__actions,
  .offline-banner__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
  }

  .update-toast__actions .button,
  .offline-banner__actions .button {
    width: 100%;
  }
}

/* ---------- Extra Small Phone ---------- */

@media (max-width: 390px) {
  .quick-action__icon,
  .dashboard-widget__icon,
  .settings-section__icon,
  .data-status-section__icon,
  .system-info-section__icon,
  .help-section__icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .dashboard-widget__title,
  .settings-section__title,
  .data-status-section__title,
  .system-info-section__title,
  .help-section__title {
    font-size: var(--text-base);
  }

  .recent-modules__item,
  .favorite-modules__item,
  .quick-action {
    padding: var(--space-2);
    border-radius: var(--radius-xl);
  }

  .recent-modules__meta span,
  .favorite-modules__meta span,
  .quick-action__badge,
  .system-info-chip {
    font-size: 0.65rem;
  }

  .help-panel__nav {
    padding: var(--space-1);
  }

  .help-panel__nav-item {
    min-height: 34px;
    padding: 0.45rem 0.62rem;
    font-size: 0.68rem;
  }

  .loading-screen,
  .onboarding-tour {
    padding: var(--space-2);
  }

  .loading-screen__card,
  .onboarding-tour__card,
  .app-error-boundary__card {
    padding: var(--space-3);
    border-radius: var(--radius-xl);
  }

  .loading-screen__title,
  .onboarding-tour__title,
  .app-error-boundary__title {
    font-size: var(--text-xl);
  }

  .offline-banner {
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
  }
}

/* ---------- Very Small Screen Safety ---------- */

@media (max-width: 360px) {
  .dashboard-widget__header,
  .settings-section__header,
  .data-status-section__header,
  .system-info-section__header,
  .help-section__header,
  .quick-action {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .dashboard-widget__icon,
  .settings-section__icon,
  .data-status-section__icon,
  .system-info-section__icon,
  .help-section__icon,
  .quick-action__icon {
    margin: 0;
  }

  .dashboard-metric,
  .system-info-metric {
    grid-template-columns: 1fr;
  }

  .update-toast,
  .offline-banner {
    grid-template-columns: 1fr;
  }

  .update-toast__icon,
  .offline-banner__icon {
    width: 36px;
    height: 36px;
  }
}

/* ---------- Landscape Phone Safety for Modern Components ---------- */

@media (max-height: 520px) and (orientation: landscape) {
  .loading-screen,
  .onboarding-tour,
  .app-error-boundary {
    position: fixed;
    align-items: start;
    overflow-y: auto;
    padding: var(--space-2);
  }

  .loading-screen__card,
  .onboarding-tour__card,
  .app-error-boundary__card {
    margin-block: var(--space-2);
    padding: var(--space-4);
  }

  .loading-screen__logo-mark,
  .onboarding-tour__icon,
  .app-error-boundary__icon {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  .loading-screen__title,
  .onboarding-tour__title,
  .app-error-boundary__title {
    font-size: var(--text-xl);
  }

  .offline-banner {
    position: static;
    width: auto;
    margin: var(--space-2);
    transform: none;
  }
}

/* ---------- Touch Device Upgrade ---------- */

@media (hover: none) and (pointer: coarse) {
  .quick-action:hover,
  .dashboard-widget:hover,
  .recent-modules__item:hover,
  .favorite-modules__item:hover,
  .pwa-install-button:hover {
    transform: none;
  }

  .quick-action,
  .favorite-button,
  .pwa-install-button,
  .help-panel__nav-item,
  .update-toast__close {
    min-height: 44px;
  }

  .is-onboarding-target {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* ---------- Reduced Motion Upgrade ---------- */

@media (prefers-reduced-motion: reduce) {
  .loading-screen__spinner span,
  .skeleton::after,
  .toast,
  .loading-screen.is-leaving {
    animation: none !important;
  }

  .dashboard-widget,
  .quick-action,
  .recent-modules__item,
  .favorite-modules__item,
  .favorite-button,
  .pwa-install-button,
  .loading-screen__progress-bar,
  .onboarding-tour__progress-bar,
  .dashboard-mini-progress__bar,
  .progress-line__bar {
    transition: none !important;
  }

  .is-onboarding-target {
    scroll-margin-top: 0;
  }
}

/* ---------- Print Cleanup for Modern Components ---------- */

@media print {
  .quick-actions,
  .search-box,
  .settings-panel,
  .data-status-panel__actions,
  .system-info-panel__actions,
  .help-quick-start,
  .help-panel__nav,
  .loading-screen,
  .onboarding-tour,
  .offline-banner,
  .update-toast,
  .app-error-boundary,
  .pwa-install-button {
    display: none !important;
  }

  .dashboard-widgets,
  .recent-modules,
  .favorite-modules,
  .progress-summary,
  .leaderboard-panel,
  .system-info-panel,
  .help-panel {
    display: block;
  }

  .dashboard-widget,
  .recent-modules__item,
  .favorite-modules__item,
  .settings-section,
  .data-status-section,
  .system-info-section,
  .help-section {
    margin-bottom: 1rem;
    break-inside: avoid;
    border: 1px solid #cccccc !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
}