/* Profil — responsive overrides (mobile/tablet) */

/* Prevent accidental horizontal scroll from wide elements */
html {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
}

/* Layout shells must shrink inside flex/grid parents */
.dash-page-wrap,
.dash-container,
.dash-subbar,
.dash-nav-inner,
.auth-nav-inner,
.login-container,
.pz-container,
.pz-nav-inner,
.page,
.content,
#main.main,
.main,
.tab-content,
.table-container {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.m-crumbs {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Better tap targets */
button, a, input, select, textarea { touch-action: manipulation; }

/* Tables: allow horizontal scrolling when needed */
table { max-width: 100%; }

@media (max-width: 1024px) {
  .body-split { flex-direction: column !important; }
  .main { flex: 1; }

  /* admin/dashboard card grids */
  .metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .two { grid-template-columns: 1fr !important; }
}

@media (max-width: 820px) {
  /* Shared paddings on pages with .nav-in/.topbar */
  .nav-in { padding-left: 18px !important; padding-right: 18px !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Results page hero padding */
  .hero { padding-left: 18px !important; padding-right: 18px !important; overflow-x: clip; }
  .page {
    padding-left: 18px !important;
    padding-right: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .body-split { flex-direction: column !important; }

  /* dashboard.html: убрать горизонтальный «слайдер» — flex-child не сжимался (min-width:auto) */
  #main.main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* Сетки обзора: не 4+ колонок в ряд на планшете */
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .profile-layout { grid-template-columns: 1fr !important; }
  .result-header { grid-template-columns: 1fr !important; }
  .rh-score { text-align: left !important; }
  .dl-item { grid-template-columns: 1fr !important; }
  .dl-right { width: 100% !important; justify-content: space-between !important; }
  .page-header { flex-wrap: wrap !important; gap: 14px !important; }
  body:not(.dash-page) .tab-content { padding-left: 18px !important; padding-right: 18px !important; }
  .dash-page .tab-content { padding-left: 0 !important; padding-right: 0 !important; }
  .dash-page .page-header { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 640px) {
  /* Generic: tighten typography */
  body { font-size: 14px; }

  /* Many pages use fixed headers; ensure content spacing */
  .page { padding-left: 16px !important; padding-right: 16px !important; }

  /* question.html: navigation buttons stack nicely */
  .q-nav { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .btn-next, .btn-back { width: 100% !important; text-align: center !important; }
  .btn-back { padding: 12px 12px !important; border-radius: 16px; background: rgba(255,255,255,.65); border: 1px solid var(--bord); }
}

@media (max-width: 480px) {
  /* Mobile crumbs bar */
  .m-crumbs {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 8px 12px;
    border: 1px solid rgba(221,216,248,.85);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: 0 6px 18px rgba(86,54,224,.08), inset 0 1px 0 rgba(255,255,255,.8);
    position: sticky;
    top: 58px;
    z-index: 100;
  }
  .m-crumbs a {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
  }
  .m-crumbs a:hover { color: var(--ink); }
  .m-crumbs .sep { opacity: .5; color: var(--bord); }
  .m-crumbs .cur {
    font-size: 12px;
    color: var(--ind);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .m-crumbs select{
    appearance:none;-webkit-appearance:none;
    border:1px solid rgba(86,54,224,.14);
    background:rgba(234,230,255,.35);
    border-radius:12px;
    padding:8px 34px 8px 10px;
    font-size:12px;
    color:var(--ind);
    font-weight:600;
    min-width:120px;
    flex:1;
    outline:none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  }
  .m-crumbs select:focus{
    border-color: rgba(78, 0, 0, 0.28);
    background: rgba(248, 248, 248, 0.55);
  }
  .m-crumbs::after{
    content:'▾';
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    font-size:11px;
    color:rgba(136,120,176,.85);
    pointer-events:none;
  }

  /* --- test.html --- */
  html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
  }
  .page {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .content,
  .test-blocks,
  .sec-header {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .sec-header {
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }
  .test-block {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    min-width: 0 !important;
  }
  .test-block .tb-left,
  .test-block .tb-name,
  .test-block .tb-meta {
    min-width: 0 !important;
  }
  .test-block .tb-name,
  .sec-name,
  .sec-header-h {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .test-block .tb-right {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .nav-in {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .nav-right {
    min-width: 0 !important;
    gap: 8px !important;
  }
  .nav-user span {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar { position: static !important; top: auto !important; min-width: 0 !important; }
  /* On phone: hide big sections list, use crumbs selector instead */
  #sections { display:none !important; }
  .sb-title { display:none !important; }
  .nav-in { padding-left: 14px !important; padding-right: 14px !important; }
  .sec-item { padding: 12px 12px !important; }

  /* --- question.html --- */
  .nav-in { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
  .nav-mid { display: none !important; } /* keep avatar + pause */
  .page {
    padding-top: 78px !important;
    padding-bottom: 86px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .q-text, .q-card, .pair-item, .single-opt, .scale-wrap-h {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .pair-item { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pair-vs { display: none !important; }
  .pair-opt { padding: 14px 14px !important; }
  .single-opt { padding: 13px 14px !important; }

  /* Block intro overlay: full height + safe paddings */
  .bintro-scroll { padding-left: 12px !important; padding-right: 12px !important; }
  .bintro-hero { padding: 20px 18px !important; border-radius: 18px !important; }
  .bintro-cta { gap: 10px !important; }
  .bintro-cta-go { width: 100% !important; justify-content: center !important; }

  /* Stretch "pills" to device width (no centered small badges) */
  .bintro-meta { width: 100% !important; align-items: stretch !important; }
  .bintro-pill { width: 100% !important; justify-content: space-between !important; }

  /* --- results.html --- */
  .res-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .development-actions { grid-template-columns: 1fr !important; }

  /* --- auth.html (новый layout) --- */
  .auth-page .login-container {
    padding: var(--space-md) var(--space-sm) !important;
    gap: var(--space-md) !important;
  }

  .auth-page .login-header h1 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  .auth-page .tab-btn,
  .auth-page .tab {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }

  /* --- dashboard.html (новый layout) --- */
  .dash-page .dash-subbar {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: clip;
    width: 100%;
  }

  .dash-page .dash-crumbs,
  .dash-page .dash-select-wrap,
  .dash-page .dash-progress-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .dash-page .dash-crumbs {
    flex: 1 1 100%;
  }

  .dash-page .dash-select-wrap {
    max-width: none;
    flex: 1 1 100%;
  }

  .dash-page .tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .dash-page .page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- auth.html (legacy) --- */
  .layout { grid-template-columns: 1fr !important; height: auto !important; min-height: 100vh; }
  .left { display: none !important; }
  .right { padding: 18px !important; }
  .form-wrap { max-width: 460px !important; }

  /* --- dashboard.html (legacy + new) --- */
  .body-split { flex-direction: column !important; }
  .topbar { padding-left: 14px !important; padding-right: 14px !important; }
  .main { padding-bottom: 18px !important; }
  body:not(.dash-page) .page-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ph-right {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .ph-right .btn-test,
  .ph-right .btn-ghost,
  .ph-right a.btn-test,
  .ph-right a.btn-ghost {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Метрики и карточки — одна колонка, на всю ширину */
  #main.main { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  .overview-grid { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; gap: 14px !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .sc, .dark-card, .ov-card { max-width: 100% !important; min-width: 0 !important; }
  .table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    contain: inline-size;
  }
  .dash-table { min-width: 480px !important; }
  .prog-row, .pr-head, .pr-meta { min-width: 0 !important; max-width: 100% !important; }
  .pr-name { word-break: break-word !important; overflow-wrap: anywhere !important; }
  /* Scroll-reveal: без transform до появления — не раздувает scrollWidth на iOS */
  .r:not(.on):not(.v) {
    transform: none !important;
  }
  body:not(.dash-page) .tab-content { padding-left: 14px !important; padding-right: 14px !important; padding-bottom: 28px !important; }
  .dash-page .tab-content { padding-bottom: 28px !important; }
  /* inline-обёртки с большим горизонтальным padding */
  #main.main div[style*="padding:28px 36px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 16px !important;
    max-width: 100% !important;
  }
  #main.main div[style*="max-width:640px"],
  #main.main div[style*="max-width:560px"] { max-width: 100% !important; }

  /* --- admin.html --- */
  .topbar { padding-left: 14px !important; padding-right: 14px !important; }
  .tb-search { width: 140px !important; }
  .body-split { flex-direction: column !important; }

  .metrics { grid-template-columns: 1fr !important; }

  /* make admin pages use full width padding */
  .ph { padding-left: 16px !important; padding-right: 16px !important; }
  .page.act { padding-left: 16px !important; padding-right: 16px !important; }

  /* Admin tables: allow horizontal scroll instead of squishing */
  .tbl-wrap { overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .tbl-wrap table { min-width: 680px; }

  /* Hide least important columns on very small screens */
  #p-users table thead th:nth-child(4),
  #p-users table tbody td:nth-child(4),
  #p-users table thead th:nth-child(5),
  #p-users table tbody td:nth-child(5) { display: none; }

  #p-results table thead th:nth-child(5),
  #p-results table tbody td:nth-child(5),
  #p-results table thead th:nth-child(6),
  #p-results table tbody td:nth-child(6) { display: none; }

  #p-flags table thead th:nth-child(5),
  #p-flags table tbody td:nth-child(5) { display: none; }

  /* Detail panel full-screen */
  .d-panel { width: 100% !important; max-width: 100% !important; height: 100% !important; border-radius: 0 !important; }
  .dp-foot { gap: 8px !important; }
  .dp-foot button { flex: 1 1 auto; }
}

@media (max-width: 390px) {
  /* Make paddings even tighter on very small phones */
  .nav-in, .topbar { padding-left: 12px !important; padding-right: 12px !important; }
  .page { padding-left: 12px !important; padding-right: 12px !important; }
  .btn-next { width: 100% !important; }
}

/* Touch devices: hover transforms can cause layout jitter while scrolling */
@media (hover: none) and (pointer: coarse) {
  .sec-item:hover,
  .test-block:hover,
  .ov-card:hover,
  .dash-stat-card:hover,
  .career-card:hover,
  .stat-card:hover {
    transform: none !important;
  }
}

/* Payment page (does not include common.css) */
@media (max-width: 480px) {
  .pay-topbar { padding: 14px 14px !important; }
  .pay-hero { padding: 28px 14px 22px !important; }
  .pay-body { padding-left: 12px !important; padding-right: 12px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .promo-row { flex-direction: column !important; }
  .promo-apply { width: 100% !important; }
}