/* ══════════════════════════════════════════════════════════
   RESPONSIVE — mobil, planshet, katta ekran
   base.css va modern.css ustiga qo'shiladi
   ══════════════════════════════════════════════════════════ */

/* ── Umumiy: hech narsa ekrandan chiqib ketmasin ───────── */

html {
  -webkit-text-size-adjust: 100%;   /* iOS matn kattalashuvining oldini oladi */
}

* {
  /* Uzun so'zlar (URL, login) mobilda chiqib ketmasin */
  overflow-wrap: break-word;
}

img, svg, video, table {
  max-width: 100%;
}

/* Mobilda gorizontal skroll BUTUNLAY yo'q */
body {
  overflow-x: hidden;
}

/* ── Topbar — mobilda ixcham ───────────────────────────── */

@media (max-width: 720px) {
  .topbar__inner {
    padding: 0 14px;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 56px;
  }
  .topbar__brand {
    font-size: 14px;
  }
  .topbar__brand span,
  .topbar__brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
  }
  .topbar__user {
    display: none;   /* ismni yashiramiz, joy tejaymiz */
  }
  .topbar .btn {
    padding: 7px 10px;
    font-size: 12.5px;
  }
}

@media (max-width: 460px) {
  /* Juda kichik ekranda faqat muhim tugmalar */
  .topbar__brand {
    font-size: 13px;
    max-width: 38vw;
  }
  /* "Hisobim" tugmasi matnini qisqartirish mumkin emas — lekin padding kichrayadi */
  .topbar .btn--sm {
    padding: 6px 9px;
    font-size: 12px;
  }
}

/* ── Asosiy konteyner — mobilda kichikroq padding ──────── */

@media (max-width: 720px) {
  .shell {
    padding: 0 14px;
  }
  .page {
    padding-top: 18px;
    padding-bottom: 40px;
  }
}

@media (max-width: 460px) {
  .shell {
    padding: 0 11px;
  }
}

/* ── Kartochkalar to'ri — mobilda bitta ustun ──────────── */

@media (max-width: 620px) {
  .grid--cats {
    grid-template-columns: 1fr !important;
  }
  .grid--stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 380px) {
  .grid--stats {
    grid-template-columns: 1fr !important;
  }
}

/* ── Sarlavhalar mobilda kichrayadi ────────────────────── */

@media (max-width: 620px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .section-title { margin: 22px 0 12px; }
}

/* ── Kirish sahifasi — mobilda to'liq ekran ────────────── */

@media (max-width: 480px) {
  .auth-wrap {
    padding: 14px;
    align-items: flex-start;
  }
  .auth-card {
    padding: 26px 20px;
    margin-top: 20px;
  }
  .auth-head img {
    width: 64px;
    height: 64px;
  }
  .auth-head h1 {
    font-size: 20px;
  }
}

/* ── Jadvallar — mobilda gorizontal skroll ─────────────── */

@media (max-width: 760px) {
  .table-wrap,
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table {
    min-width: 520px;   /* jadval siqilib o'qib bo'lmas holga tushmasin */
  }
  /* Skroll borligini bildiruvchi ishora */
  .table-wrap {
    position: relative;
    background:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left, var(--surface) 30%, transparent) 100% 0;
    background-size: 40px 100%, 40px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local;
  }
  th, td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ── Modal oynalar — mobilda pastdan chiqadi ───────────── */

@media (max-width: 560px) {
  .modal-bg {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    max-width: 100% !important;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    animation: modal-slide-up .3s cubic-bezier(.22, .8, .3, 1);
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0));
  }
  @keyframes modal-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Yopish uchun yuqorida chiziqcha */
  .modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--rule);
    border-radius: 3px;
    margin: -8px auto 16px;
  }
}

/* ── Toolbar — mobilda ustma-ust ───────────────────────── */

@media (max-width: 640px) {
  .toolbar {
    gap: 8px;
  }
  .toolbar input,
  .toolbar select {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
  }
  .toolbar .grow {
    flex: 1 1 100%;
  }
  .toolbar .btn {
    flex: 1 1 auto;
  }
}

/* ── Tablar — mobilda skroll qilinadi ──────────────────── */

@media (max-width: 640px) {
  .tabbar,
  .tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabbar button {
    padding: 10px 13px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════
   TEST EKRANI — eng muhim responsive qism
   ══════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .layout {
    grid-template-columns: 1fr !important;
    padding: 16px 14px 90px;
    gap: 16px;
  }

  /* Savol raqamlari paneli — yuqorida, gorizontal skroll */
  .nav-panel {
    order: -1;
    position: static !important;
    padding: 12px;
  }
  .nav-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
  }
  /* Legendani yashiramiz — joy tejaymiz */
  .nav-panel > div:last-child {
    display: none;
  }

  .q-card {
    padding: 20px 16px;
  }
  .q-text {
    font-size: 16px;
  }
  .opt {
    padding: 13px 14px;
  }
  .opt__text {
    font-size: 14px;
  }
}

/* Test yuqori paneli — mobilda ixcham */
@media (max-width: 560px) {
  .test-bar__inner {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  #catName {
    font-size: 13px;
    max-width: 100%;
    order: 3;
    flex-basis: 100%;
  }
  .timer {
    font-size: 18px;
    padding: 4px 11px;
  }
  .ac-status {
    font-size: 11px;
    padding: 4px 9px;
  }
  .progress {
    order: 4;
    flex-basis: 100%;
  }
}

/* Test pastki tugmalari — mobilda to'liq kenglik */
@media (max-width: 560px) {
  .foot {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0));
  }
  .foot__inner {
    gap: 8px;
  }
  .foot .btn {
    flex: 1;
    padding: 11px 8px;
    font-size: 13px;
  }
  .save-hint {
    display: none;   /* mobilda joy yo'q */
  }
}

/* Navigatsiya nuqtalari — barmoq bilan bosishga qulay */
@media (max-width: 760px) {
  .nav-dot {
    min-height: 34px;
    font-size: 13px;
  }
}

/* ── Natija sahifasi ───────────────────────────────────── */

@media (max-width: 560px) {
  .hero {
    padding: 26px 20px;
  }
  .hero__percent {
    font-size: 46px;
  }
  .grid-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .rev {
    padding: 16px;
  }
}

/* ── Ban ekrani ────────────────────────────────────────── */

@media (max-width: 420px) {
  .ac-ban__card {
    padding: 28px 22px;
  }
  .ac-ban__ring {
    width: 108px;
    height: 108px;
  }
}

/* ── Ogohlantirish — mobilda kenglikka moslashadi ──────── */

@media (max-width: 480px) {
  .ac-warn {
    width: calc(100vw - 24px);
    top: 12px;
  }
}

/* ── Nazorat ogohlantirishlari (admin) ─────────────────── */

@media (max-width: 560px) {
  .alert-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .alert-row__time {
    flex-basis: 100%;
    text-align: right;
  }
}

/* ── Barmoq bilan bosish uchun minimal o'lcham ─────────── */

@media (hover: none) and (pointer: coarse) {
  /* Sensorli ekranlarda barcha bosiladigan narsalar kattaroq */
  .btn {
    min-height: 42px;
  }
  .btn--sm {
    min-height: 36px;
  }
  .opt {
    min-height: 50px;
  }
  input, select, textarea {
    font-size: 16px !important;   /* iOS zoom qilmasligi uchun */
    min-height: 44px;
  }
  .nav-dot {
    min-height: 38px;
  }
  /* Hoverga bog'liq effektlarni o'chiramiz */
  .cat:hover, .stat:hover {
    transform: none;
  }
}

/* ── Katta ekranlar — kontent juda cho'zilib ketmasin ──── */

@media (min-width: 1600px) {
  .shell {
    max-width: 1280px;
  }
}

/* ── Landshaft (yotiq) telefon — test ekrani ───────────── */

@media (max-height: 480px) and (orientation: landscape) {
  .test-bar {
    position: static;
  }
  .foot {
    position: static;
  }
  .layout {
    padding-bottom: 20px;
  }
}

/* ── Animatsiyalarni o'chirish klassi (sozlamalardan) ──── */

.no-anim *,
.no-anim *::before,
.no-anim *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .05ms !important;
  scroll-behavior: auto !important;
}
/* Lekin mavzu o'tishi va toggle animatsiyasi qolsin (juda tez) */
.no-anim .theme-toggle svg {
  transition-duration: .2s !important;
}

/* ── Print (natijani chop etish) ───────────────────────── */

@media print {
  .topbar, .foot, .test-bar, .theme-toggle,
  .btn, .toolbar, .ac-status {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card, .rev, .hero {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}