/* ===================================================================
   AliCargo — EvoBot panelini telefonga moslash (v2, 2026-09-12)
   -------------------------------------------------------------------
   Shablonning haqiqiy tuzilmasiga qarab yozilgan:
     .page-main-header  — position: fixed, tagida 76px joy ajratilgan
     .page-body         — margin-top: 76px
     jadvallar          — .card > .card-body ichida (ko'pida
                          .table-responsive o'rovchisi YO'Q)

   Faqat <=767px da ishlaydi — kompyuterdagi ko'rinishga TEGMAYDI.
   =================================================================== */

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------------
     1) YUQORI PANEL
     Muammo: header `fixed` va tagiga qat'iy 76px joy ajratilgan.
     Telefonda tugmalar (Kassa, Murojaatlar, Log out) bir qatorga
     sig'masa header balandlashadi va KONTENTNI YOPIB QO'YADI.
     Yechim: telefonda header oddiy oqimda tursin (fixed emas) —
     u holda balandligi qancha bo'lsa ham hech narsani yopmaydi.
     --------------------------------------------------------------- */
  .page-wrapper .page-main-header {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .page-wrapper .page-body-wrapper .page-body,
  .page-wrapper.horizontal-wrapper .page-body-wrapper .page-body {
    margin-top: 0 !important;
    padding: 10px !important;
    min-height: auto !important;
  }

  /* Tugmalar qatorga sig'masa pastga o'tsin va chetdan chiqib ketmasin */
  .page-main-header .main-header-right {
    flex-wrap: wrap !important;
    row-gap: 6px;
    padding: 8px 10px !important;
    max-width: 100%;
  }
  .page-main-header .nav-right,
  .page-main-header .nav-right > ul,
  .page-main-header .nav-right ul.nav-menus {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    row-gap: 6px;
  }
  .page-main-header .nav-right > ul > li {
    margin-right: 6px !important;
  }

  /* ---------------------------------------------------------------
     2) JADVALLAR
     Muammo: 10 dan ortiq sahifada jadval `.table-responsive` ichiga
     olinmagan — ustunlar ekranga sig'may, oxirgilari kesilib qolardi
     (masalan TELEFON ustuni) va matn 4 qatorga o'ralib ketardi.
     Yechim: jadvalni o'rovchi element gorizontal suriladi, kataklar
     esa o'ralmaydi — barmoq bilan surib ko'riladi.
     --------------------------------------------------------------- */
  .card > .card-body,
  .card-body,
  .table-responsive,
  .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* DIQQAT: `table.table` EMAS, oddiy `table`.
     Panelda jadvallarning ko'pi .table klassini ishlatmaydi:
       79 ta — class="display" (DataTables)
       32 ta — umuman klasssiz <table>
       21 ta — .cc-table,  5 ta — .sk-table
     Shuning uchun element selektori olinadi, aks holda ular chetda qoladi. */
  table {
    min-width: max-content;
  }

  table th,
  table td {
    white-space: nowrap !important;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    vertical-align: middle;
  }

  /* Uzun matnli ustun (murojaat matni, izoh) aksincha o'ralsin */
  table td.wrap,
  table td[data-wrap] {
    white-space: normal !important;
    min-width: 170px;
    max-width: 260px;
  }

  /* Jadvalni yon tomonga surish mumkinligi bilinib tursin:
     o'ng chekkada yengil soya — aks holda foydalanuvchi ustun
     kesilgan deb o'ylaydi va surib ko'rmaydi. */
  .card > .card-body,
  .table-responsive,
  .dataTables_wrapper {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 28px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 28px 100%;
    background-attachment: local;
  }

  /* ---------------------------------------------------------------
     3) UMUMIY
     --------------------------------------------------------------- */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .card { margin-bottom: 14px; }
  .card .card-header { padding: 12px 14px !important; }
  .card .card-header h4,
  .card .card-header .h4 { font-size: 16px !important; }

  /* Tugmalar barmoq uchun qulay o'lchamda */
  .btn { padding: 8px 14px; font-size: 13.5px; }
  .btn-sm { padding: 6px 10px; font-size: 12.5px; }

  /* Modal oynalar ekranga sig'sin */
  .modal-dialog {
    margin: 8px;
    max-width: calc(100% - 16px);
  }
  .modal-body { padding: 14px; }

  /* DataTables boshqaruvi (Show/Поиск/sahifalash) ustma-ust tushsin */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Formalardagi yonma-yon maydonlar ustma-ust */
  .form-inline .form-group {
    width: 100%;
    margin-bottom: 8px;
  }
  .form-inline .form-group .form-control,
  .form-inline .form-group select {
    width: 100%;
  }

  img { max-width: 100%; height: auto; }
  .select2-container { max-width: 100% !important; }
}

/* Juda kichik ekranlar */
@media (max-width: 360px) {
  body { font-size: 13px; }
  table th, table td { font-size: 12px !important; padding: 6px 8px !important; }
  .btn { font-size: 12.5px; }
}