/* ═══════════════════════════════════════════════════════════════════
   ODA 5 — MOBIL VERSIYA
   Bu fayldagi BARCHA qoidalar faqat telefon/planshet ekranida
   (kengligi ≤ 768px) ishlaydi. Kompyuter dizayni o'zgarmaydi.
   Fayl har bir sahifada <head> ning eng oxirida ulanadi — sahifalarning
   ichki <style> bloklaridagi qoidalarni ham shu yerda bekor qilamiz.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  html { background: #071122; }

  html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* pastki navigatsiya paneli uchun joy */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .page {
    padding: 12px 10px !important;
    min-height: auto;
  }

  /* ── TOP BAR: logo chapda, til + soat o'ngda ── */
  .topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px !important;
    position: static !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    background: none !important;
  }

  .brand-box {
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .brand-logo {
    font-size: 28px !important;
    letter-spacing: 1px;
  }

  .top-right {
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-shrink: 0;
  }

  .lang-switch {
    height: 40px !important;
    padding: 0 3px !important;
    border-radius: 14px !important;
  }

  .lang-switch-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  .clock-box {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 12px;
    font-size: 19px !important;
    border-radius: 14px !important;
  }

  .clock-colon { width: 6px; }

  /* ── DOCK → ekran pastidagi navigatsiya paneli ── */
  .top-center {
    position: static !important;
    display: block !important;
  }

  /* Tugmalar sig'sa — ekran kengligiga teng taqsimlanadi;
     sig'masa — panel barmoq bilan gorizontal suriladi (chetlarida soya-ishora). */
  .dock {
    position: fixed !important;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    max-width: none !important;
    justify-content: space-between;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(10, 22, 44, 0.82) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding: 0 8px;
  }

  .dock::-webkit-scrollbar { display: none; }

  .dock.can-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .dock.can-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px);
            mask-image: linear-gradient(90deg, transparent, #000 34px);
  }
  .dock.can-left.can-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  }

  .dock-item,
  .extra-btn {
    width: auto !important;
    height: 46px !important;
    min-width: 40px;
    max-width: 56px;
    border-radius: 14px !important;
    flex: 1 0 40px !important;
    transform: none !important;
    scroll-snap-align: start;
    /* iOS Safari: aylanadigan konteyner ichidagi blur/3D qatlamlar surishni buzadi */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dock .fx3d { perspective: none; }
  .dock .fx3d-spin,
  .dock .fx3d-stack { transform-style: flat; animation: none !important; }
  .dock .fx3d-stack > :not(.fx3d-front) { display: none; }

  .dock-item svg { width: 22px !important; height: 22px !important; }
  .dock-item img { width: 30px !important; height: 30px !important; }

  .dock-item .indicator { bottom: 3px; width: 5px; height: 5px; }

  /* dock ichidagi matnli tugmalar (agar bo'lsa) ko'rinmasin — joy tor */
  .dock-item:hover { transform: none !important; }

  /* ── LAYOUT ── */
  .layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  .layout > *,
  .workspace > *,
  .content-area,
  .content-inner {
    min-width: 0 !important;
    max-width: 100%;
  }

  .sidebar,
  .workspace {
    border-radius: 20px !important;
  }

  .workspace {
    padding: 14px 12px !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  .workspace-top {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .workspace-logo > img { height: 30px !important; }

  .content-area {
    padding: 14px 12px !important;
    border-radius: 18px !important;
  }

  .content-inner p { font-size: 15px !important; line-height: 1.6; }

  /* Sarlavhalar va sahifa boshlari */
  .page-header,
  .credit-header,
  .uni-form-header,
  .uni-frame-topbar {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .uni-frame-title { font-size: 14px !important; }

  /* ── FORMALAR ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;   /* iPhone avtomatik kattalashtirmasligi uchun */
    max-width: 100%;
  }

  .uf-grid,
  .ef-grid,
  .dm-form-grid,
  .st-grid,
  .tr-grid,
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .uf-select, .uf-input,
  .ef-select, .ef-input,
  .db-input, .db-select,
  .fm-input, .dm-select,
  .ctrl-input {
    height: 46px;
    min-width: 0 !important;
  }

  .uf-select-sm { height: 42px; }

  .uf-date-row { flex-wrap: wrap; }
  .uf-date-row > * { flex: 1 1 30%; }

  .uf-submit,
  .ef-save,
  .login-btn {
    min-height: 50px;
  }

  .uf-btn-sm,
  .uni-back-btn,
  .ctrl-btn,
  .op-btn {
    min-height: 40px;
  }

  .select-wrap,
  .select-wrap select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── JADVALLAR: gorizontal aylantirish ── */
  .db-table-wrap,
  .credit-table-wrap,
  .arch-table-wrap,
  .dm-table-wrap,
  .m-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .db-table-wrap table,
  .credit-table-wrap table,
  .arch-table-wrap table,
  .dm-table-wrap table,
  .m-table-scroll table {
    min-width: max-content;
  }

  /* ── MODAL oynalar ── */
  .dm-modal,
  .op-modal,
  .modal,
  .modal-content,
  .pc-box {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }

  /* ── Hover animatsiyalari telefonda "yopishib" qolmasin ── */
  .subject-btn:hover,
  .sidebar-nav a:hover,
  .sidebar-uni-btn:hover,
  .uni-btn:hover,
  .uf-submit:hover {
    transform: none !important;
  }

  /* ═════════════════ MAIN sahifa ═════════════════ */

  .sidebar { padding: 14px 12px !important; }

  .sidebar-header h2 { font-size: 16px !important; margin-bottom: 8px !important; }
  .sidebar-line { margin-bottom: 10px !important; }

  /* Universitetlar ro'yxati — ixcham 2 ustunli katak */
  .sidebar-uni-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .sidebar-country-label {
    grid-column: 1 / -1;
    margin: 6px 0 0 !important;
  }

  .sidebar-uni-btn {
    padding: 9px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1.25;
    min-height: 50px;
    min-width: 0;
  }

  .sidebar-uni-btn span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .sidebar-uni-btn img { width: 26px !important; height: 26px !important; }

  .sidebar-uni-btn.active-uni { transform: none !important; }

  .date-day { font-size: 44px !important; }
  .date-rest { font-size: 16px !important; }

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

  .stat-card-hw { white-space: normal; }

  [id$="StudentFields"] > .uf-fio-row::before { min-width: 26px; height: 26px; font-size: 12px; }

  .smu-result-card { padding: 12px !important; gap: 10px !important; }
  .smu-result-fio { min-width: 0 !important; flex-basis: 100% !important; }
  .smu-doc-btn { min-width: 58px; padding: 8px 10px; }

  .uni-iframe { min-height: 70vh !important; }

  #welcomeSplash { padding: 16px; }

  .fio-suggest-box { max-width: calc(100vw - 20px); }

  /* ═════════════════ DATABASE sahifasi ═════════════════ */

  .db-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }

  .db-filter-group {
    min-width: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .db-filter-group label { white-space: normal !important; }

  .db-filter-group .db-input,
  .db-filter-group .db-select {
    width: 100% !important;
  }

  .year-tabs,
  .db-pager {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .year-tabs::-webkit-scrollbar,
  .db-pager::-webkit-scrollbar { display: none; }

  .year-tab,
  .db-pager > * { flex: 0 0 auto; }

  .db-stats { flex-wrap: wrap; }

  /* ── DATABASE jadvali → ixcham mobil jadval ──
     Ustunlar tartibi: 1 №, 2 Ф.И.О., 3 ВУЗ, 4 Факультет, 5 Курс, 6 Дата,
     7 Транскрипт, 8 Документ, 9 Акад., 10 ID, 11 Шлюз, 12 Баланс,
     13 Наш баланс, 14 Статус, 15 Edit, 16 Qora
     Telefonda faqat: Ф.И.О. | Транскрипт | Документ | Акад. справка | Баланс */
  table.m-compact {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 12px !important;
  }

  table.m-compact th,
  table.m-compact td { display: none; }

  table.m-compact th:nth-child(2),  table.m-compact td:nth-child(2),
  table.m-compact th:nth-child(7),  table.m-compact td:nth-child(7),
  table.m-compact th:nth-child(8),  table.m-compact td:nth-child(8),
  table.m-compact th:nth-child(9),  table.m-compact td:nth-child(9),
  table.m-compact th:nth-child(12), table.m-compact td:nth-child(12) {
    display: table-cell;
  }

  /* O'chirish uchun tanlash rejimida belgilash katakchasi ustuni ham chiqadi */
  .select-mode table.m-compact th:nth-child(1),
  .select-mode table.m-compact td:nth-child(1) {
    display: table-cell;
    width: 30px;
  }

  table.m-compact th:nth-child(2)  { width: 34%; }
  table.m-compact th:nth-child(7)  { width: 19%; }
  table.m-compact th:nth-child(8)  { width: 14%; }
  table.m-compact th:nth-child(9)  { width: 14%; }
  table.m-compact th:nth-child(12) { width: 19%; }

  /* Sarlavhalar telefonda qisqa yoziladi (so'z o'rtasidan bo'linmasligi uchun) */
  table.m-compact thead th:nth-child(7),
  table.m-compact thead th:nth-child(8),
  table.m-compact thead th:nth-child(9) { font-size: 0 !important; }
  table.m-compact thead th:nth-child(7)::after,
  table.m-compact thead th:nth-child(8)::after,
  table.m-compact thead th:nth-child(9)::after { font-size: 9.5px; }
  table.m-compact thead th:nth-child(7)::after { content: "Транскр."; }
  table.m-compact thead th:nth-child(8)::after { content: "Докум."; }
  table.m-compact thead th:nth-child(9)::after { content: "Акад."; }
  html[lang="en"] table.m-compact thead th:nth-child(7)::after { content: "Transcr."; }
  html[lang="en"] table.m-compact thead th:nth-child(8)::after { content: "Doc"; }
  html[lang="en"] table.m-compact thead th:nth-child(9)::after { content: "Acad."; }

  table.m-compact thead th {
    padding: 8px 3px !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
    white-space: normal !important;
    word-break: normal;
    overflow: visible !important;
    vertical-align: middle;
  }

  table.m-compact tbody td {
    padding: 8px 2px !important;
    vertical-align: middle;
  }

  /* Ф.И.О. — to'liq ko'rinsin, kerak bo'lsa 2 qatorga o'tsin */
  table.m-compact thead th:nth-child(2) { padding-left: 8px !important; }
  table.m-compact tbody td:nth-child(2) {
    padding-left: 8px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.3;
  }

  /* Hujjat tugmalari — ustunga to'liq sig'adi */
  table.m-compact .db-link {
    display: block;
    padding: 7px 1px;
    font-size: 10px;
    letter-spacing: -0.2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.m-compact tbody td:nth-child(12) {
    white-space: normal !important;
    word-break: break-word;
    font-size: 11.5px;
    line-height: 1.25;
  }

  table.m-compact .row-check { width: 18px; height: 18px; }

  /* ═════════════════ Boshqa sahifalar ═════════════════ */

  .edit-card { max-width: 100% !important; padding: 16px !important; }

  .lic-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .lic-card { width: auto !important; min-width: 0; padding: 14px 8px 12px !important; }

  .dm-toolbar > .dm-select,
  .dm-toolbar > .dm-search { flex: 1 1 100%; width: 100% !important; min-width: 0 !important; }

  .doc-card { flex-wrap: wrap; }

  .ctrl-row { flex-wrap: wrap; }

  .balance-bar {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .balance-bar .ctrl-select { flex: 1 1 100%; height: 42px; }
  .balance-bar .ctrl-btn { flex: 1 1 auto; }

  .ctrl-card { padding: 14px 12px !important; }

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

  .smu-codes-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; }

  .fm-tab-bar,
  .fm-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  .form-card { padding: 16px !important; }

  /* Login sahifalari */
  .login-wrap { padding: 16px !important; }
  .login-card {
    width: 100% !important;
    max-width: 420px !important;
    padding: 26px 18px !important;
  }
}

/* Juda tor telefonlar (≤ 380px) */
@media (max-width: 380px) {
  .brand-logo { font-size: 23px !important; }
  .clock-box { font-size: 16px !important; padding: 0 8px; }
  .lang-switch-btn { padding: 5px 6px !important; }
  .dock-item { height: 42px !important; min-width: 36px; flex-basis: 36px !important; }
  .sidebar-uni-list { grid-template-columns: 1fr !important; }
  .lic-cards { grid-template-columns: 1fr 1fr !important; }
}

/* Juda kichik ekranlar (≤ 340px) — filtrlar bitta ustunda */
@media (max-width: 340px) {
  .db-filters { grid-template-columns: 1fr !important; }
}