/* ==========================================================================
   mobile.css — mobil və planşet görünüşü
   ==========================================================================

   MASAÜSTÜ TOXUNULMAZLIĞI
   Şablonda masaüstü tərtibatı 1200px-dən başlayır — `style.css`-də həm
   `.sidebar { inset-inline-start: 0 }`, həm `.dashboard-main
   { margin-inline-start: 15.75rem }` `@media (min-width: 1200px)` altındadır.
   Bu fayldakı ən geniş qayda `max-width: 1199.98px`-dir, yəni 1200px və
   yuxarısı — bütün masaüstü/Windows ekranları — heç bir qaydanı görmür.

   KƏSİM NÖQTƏSİ PİLLƏSİ
     ≤1199.98px  tərtibat   — menyu düyməsi, drawer, cədvəl sürüşməsi
     ≤991.98px   sıxlıq     — boşluqlar, toxunma sahələri, şrift
     ≤767.98px   şəbəkə     — dar sütunların açılması
     ≤575.98px   telefon    — formalar, modallar, üst panel, tipoqrafiya

   style.css (15 762 sətir) və app.js hazır WowDash şablonudur, qəsdən
   dəyişdirilmir — şablon yeniləndikdə düzəlişlər itərdi. Bütün mobil
   fərqlər burada toplanır; geri qaytarmaq üçün <link> sətrini silmək bəsdir.

   Rənglər sabit yazılmır, `var(--…)` işlədilir — əks halda dark mode-da
   qara fonda ağ ləkələr çıxardı.

   Şablonun utility sinifləri (`p-24`, `px-24` …) `!important` ilə təyin
   olunub; onları üstələmək üçün burada da `!important` lazımdır.
   ========================================================================== */


/* ==========================================================================
   1. TƏRTİBAT  (≤1199.98px)
   ========================================================================== */
@media (max-width: 1199.98px) {

  /* --- ŞABLON NASAZLIĞININ DÜZƏLİŞİ -----------------------------------
     style.css:15154 menyu düyməsini 992px-dən gizlədir:
         @media (min-width: 992px) { .sidebar-mobile-toggle { display: none } }
     Yan menyu isə yalnız 1200px-dən görünür (style.css:15239).

     Nəticədə 992–1199px aralığında menyu ekrandan kənarda qalır, onu açan
     düymə isə gizlidir — planşetdə və kiçik noutbukda naviqasiyaya çıxış
     yolu ÜMUMİYYƏTLƏ yoxdur.

     Düymə həmin aralıqda geri qaytarılır. 1200px-dən yuxarıda şablonun öz
     qaydası qüvvədə qalır (düymə gizli, menyu daimi görünür).            */
  .sidebar-mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* --- Yan menyu (drawer) ----------------------------------------------
     Şablonda menyu `inset-inline-start`-ı `-100%`-dən `0`-a dəyişməklə
     açılır. İki problemi var:

       1. `inset-inline-start` TƏRTİBAT xassəsidir — hər kadrda brauzer
          səhifəni yenidən hesablayır (reflow). Zəif telefonda animasiya
          büdrəyir.
       2. `-100%` ekranın enidir, menyunun yox. Yəni 390px-lik telefonda
          menyu 390px yol gedir, halbuki eni 284px-dir — 106px «boş» yol.
          Nəticədə hərəkət ləng və qeyri-təbii görünür.

     `transform: translateX()` işlədilir: yalnız kompozisiya qatında icra
     olunur (reflow yoxdur, 60 fps) və yol dəqiq menyunun eni qədərdir.

     Keçid əyrisi `cubic-bezier(0.32, 0.72, 0, 1)` — sürətli başlayıb
     yumşaq dayanan hərəkət. `ease` ilə müqayisədə mobil sistemlərin öz
     drawer davranışına daha yaxındır.                                    */
  .sidebar {
    width: 284px;
    max-width: 84vw;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);

    /* Şablonun `-100%` sürüşdürməsi ləğv olunur — mövqe sabit qalır,
       görünmə `transform` ilə idarə edilir. */
    inset-inline-start: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);

    /* `100vh` mobil brauzerdə ünvan sətrinin altını da sayır — menyunun son
       bəndi ekrandan çıxır və ona çatmaq mümkün olmurdu. `dvh` real görünən
       hündürlükdür; dəstəklənmirsə yuxarıdakı `100vh` qüvvədə qalır. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Sağdan-sola dillər üçün istiqamət tərsinə çevrilir. Layihədə hazırda
     belə dil yoxdur (az/ru/en), amma şablonda `[dir=rtl]` qaydaları var —
     sabah əlavə olunsa menyu ekrandan kənarda ilişib qalmasın. */
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }

  [dir="rtl"] .sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* --- Arxa fon örtüyü (scrim) ------------------------------------------
     ƏSAS DÜZƏLİŞ. Şablonda örtük `body::after`-dir və `width: 0 → 100%`
     ilə animasiya olunur:

         body::after            { width: 0;    transition: all 0.3s }
         body.overlay-active::after { width: 100% }

     Yəni qara pərdə soldan sağa «açılır» — menyu ilə eyni istiqamətdə,
     eyni sürətlə. İki fərqli səth eyni hərəkəti təkrarlayır və nəticə
     ucuz görünür.

     Düzgün davranış: örtük YERİNDƏN TƏRPƏNMİR, sadəcə şəffaflığı dəyişir.
     Menyu sürüşür, fon qaralır — iki ayrı, bir-birini tamamlayan hərəkət.

     `width` niyə hələ də saxlanılır: `body::after` tam ekranı tutanda
     kliklər ona düşür və altındakı elementlərə çatmır. `opacity: 0`
     bunun qarşısını almır. Ona görə söndürülmüş vəziyyətdə en 0-dır —
     amma en DƏRHAL dəyişir (`0s`), açılanda başlanğıcda, bağlananda isə
     `0.28s` gecikmə ilə, yəni sönmə animasiyası bitəndən sonra.          */
  body::after {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 0;
    height: 100%;

    /* Xalis qara (#000) sərt görünür; bir az mavi çalarlı tünd ton və
       daha az sıxlıq (0.65 → 0.45) məzmunu tamam «öldürmür». */
    background-color: #0b1220;
    opacity: 0;

    transition:
      opacity 0.28s ease,
      width 0s linear 0.28s;   /* en sönmə bitəndən SONRA sıfırlanır */
  }

  body.overlay-active::after {
    width: 100%;
    opacity: 0.45;
    transition:
      opacity 0.28s ease,
      width 0s linear 0s;      /* açılanda en dərhal tam olur */
  }

  /* Menyu açıq ikən arxa fon sürüşməsin */
  body.overlay-active {
    overflow: hidden;
  }

  /* --- Hərəkət həssaslığı -----------------------------------------------
     Sistem parametrlərində «hərəkəti azalt» seçilibsə animasiya söndürülür
     (iOS: Settings → Accessibility → Motion). Vestibulyar pozuntusu olan
     istifadəçilər üçün sürüşən panellər narahatlıq yaradır — bu, WCAG
     tövsiyəsidir və brauzer parametri onsuz da hazırdır.                 */
  @media (prefers-reduced-motion: reduce) {
    .sidebar,
    body::after,
    body.overlay-active::after {
      transition-duration: 0.01ms;
    }
  }

  .sidebar-menu li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sidebar-close-btn {
    width: 34px;
    height: 34px;
    top: 12px;
    inset-inline-end: 12px;
  }

  /* --- Cədvəllər --------------------------------------------------------
     Qərar: cədvəl SIXILMIR, üfüqi sürüşür. 6 sütunu 360px-ə sığdırmaq
     onları oxunmaz edir; admin panelində məlumatın tam görünməsi vacibdir.
     Şərt: istifadəçi sürüşdürməyin mümkün olduğunu GÖRMƏLİDİR.           */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Mobil brauzerlər sürüşdürmə zolağını gizlədir — daimi göstərilir */
  .table-responsive::-webkit-scrollbar {
    height: 4px;
  }

  .table-responsive::-webkit-scrollbar-track {
    background: var(--neutral-100);
    border-radius: 4px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 4px;
  }

  /* Blade fayllarında `style="width:400px"` kimi sətir içi enlər var
     (29 faylda). Sətir içi stil yalnız `!important` ilə üstələnir. */
  .table-responsive .table td[style*="width"],
  .table-responsive .table th[style*="width"] {
    width: auto !important;
  }

  /* Əməliyyat sütunundakı düymələr alt-alta düşməsin */
  .table td:last-child {
    white-space: nowrap;
  }

  /* --- Sarğısız cədvəllər ------------------------------------------------
     `.js-table-scroll` sarğısını mobile.js əlavə edir — `.table-responsive`
     olmadan qalmış cədvəllər üçün (7 səhifə, bax mobile.js bölmə 4).

     Sürüşdürmə qaydası QƏSDƏN burada, media sorğusunun içindədir:
     masaüstündə sarğı divin heç bir görünüşü olmur, tərtibat dəyişmir. */
  .js-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
  }

  .js-table-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .js-table-scroll::-webkit-scrollbar-track {
    background: var(--neutral-100);
    border-radius: 4px;
  }

  .js-table-scroll::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 4px;
  }
}


/* ==========================================================================
   2. SIXLIQ  (≤991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {

  .dashboard-main-body {
    padding: 12px;
    z-index:1;
  }

  /* 24px daxili boşluq 360px ekranda faydalı sahənin 13%-ni yeyirdi */
  .card-body,
  .card-body.p-24 {
    padding: 16px !important;
  }

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

  .card {
    margin-bottom: 12px;
  }

  /* Barmaq üçün minimum toxunma sahəsi — şablonun ikon düymələri 28px-ə
     qədər kiçilirdi, səhv düyməyə dəymək adi hal idi. */
  .btn-icon {
    min-width: 36px;
    min-height: 36px;
  }

  .btn {
    padding: 0.5rem 0.85rem;
  }

  td .d-flex.gap-2,
  td .d-flex.align-items-center.gap-2 {
    gap: 6px !important;
  }

  .table > :not(caption) > * > * {
    padding: 10px 12px;
  }

  .table {
    font-size: 13px;
  }

  .table thead th {
    font-size: 12px;
    white-space: nowrap;
  }

  .card-title,
  h5.card-title {
    font-size: 1rem;
  }

  .d-footer {
    padding: 14px 12px;
    font-size: 12px;
  }
}


/* ==========================================================================
   3. ŞƏBƏKƏ (GRID)  (≤767.98px)
   ==========================================================================
   Layihədə sütunlar tez-tez kəsim nöqtəsi OLMADAN yazılıb — `col-4`,
   `col-6`, hətta `col-2` (34 faylda). Bootstrap-da kəsim nöqtəsiz `col-N`
   BÜTÜN ekran enlərində qüvvədədir, yəni telefonda da 12-lik şəbəkə qalır:

       col-2  →  360px ekranda ~60px      (məs. homework/add_new.blade.php)
       col-3  →  ~90px
       col-4  →  ~120px                   (məs. classes.blade.php-dəki düymə)

   Bu, mobil görünüşün pis olmasının əsas səbəbidir. Blade fayllarını
   bir-bir düzəltmək əvəzinə (34 fayl, hər dəyişiklik risk) sütunlar
   CSS səviyyəsində açılır.

   `col-lg-*`, `col-md-*` kimi kəsim nöqtəli siniflərə TOXUNULMUR — onlar
   onsuz da düzgün davranır. Seçici yalnız «çılpaq» `col-N`-i tutur.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* İki dar sütun (2/3/4) yarım enə açılır — hələ də yan-yana, amma oxunaqlı */
  .row > .col-2,
  .row > .col-3,
  .row > .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Yarıdan geniş sütunlar tam enə keçir */
  .row > .col-5,
  .row > .col-6,
  .row > .col-7,
  .row > .col-8,
  .row > .col-9,
  .row > .col-10,
  .row > .col-11 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Kart başlığı: «başlıq solda + düymə sağda» quruluşu alt-alta düzülür */
  .card-header .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .card-header .row > [class*="col-"] + [class*="col-"] {
    margin-top: 10px;
  }
}


/* ==========================================================================
   4. TELEFON  (≤575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {

  /* --- Şəbəkə: hər şey tam enə ------------------------------------------ */
  .row > .col-2,
  .row > .col-3,
  .row > .col-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* --- Üst panel ---------------------------------------------------------
     Sıralama artıq MARKUP-dadır (app.blade.php — `order-3 order-sm-2`),
     burada CSS hiyləsi yoxdur. Yalnız şablonun mane olan sabit hündürlüyü
     açılır: `.navbar-header { height: 4.5rem }` iki sətir üçün azdır,
     axtarış sətri panelin altından çıxırdı.                                */
  .navbar-header {
    height: auto;
    padding: 10px 12px;
  }

  .navbar-header #tableSearch {
    width: 100%;
    min-width: 0;
  }

  /* Dil/bildiriş menyuları ekranın sağ kənarından çıxmasın */
  .navbar-header .dropdown-menu {
    max-width: calc(100vw - 24px);
  }

  /* --- Formalar ---------------------------------------------------------
     16px KRİTİKDİR: iOS Safari font-size 16px-dən kiçik sahəyə fokuslananda
     səhifəni avtomatik yaxınlaşdırır və geri qaytarmır — istifadəçi sonra
     bütün səhifəni əl ilə kiçiltməli olur. Layihədəki bütün formaları
     əhatə edən ən nəzərəçarpan mobil nasazlıq budur.                      */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }

  textarea {
    min-height: 88px;
  }

  .form-label {
    margin-bottom: 6px;
  }

  /* Formanın təsdiq düyməsi tam enli olsun — kiçik düyməni ekranın
     kənarında axtarmaq lazım gəlmir */
  form .d-flex.justify-content-end {
    flex-direction: column;
    gap: 8px;
  }

  form .d-flex.justify-content-end > .btn,
  .modal-footer > .btn,
  .card-header .btn {
    width: 100%;
  }

  /* --- Modallar: aşağıdan açılan panel ----------------------------------
     Telefonda mərkəzləşmiş kiçik modal ekranın ortasında asılı qalır və
     klaviatura açılanda yuxarı itir.                                      */
  .modal-dialog,
  .modal-dialog.modal-dialog-centered {
    margin: 0;
    align-items: flex-end;
    min-height: 100%;
    max-width: 100%;
  }

  .modal-content {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh;
  }

  .modal-body {
    overflow-y: auto;
    padding: 16px;
  }

  .modal-header {
    padding: 14px 16px;
  }

  /* --- Tipoqrafiya ------------------------------------------------------- */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.9rem; }

  /* --- Boşluqlar ---------------------------------------------------------- */
  .dashboard-main-body {
    padding: 10px;
  }

  .card-body,
  .card-body.p-24 {
    padding: 14px !important;
  }

  /* --- Səhifələmə --------------------------------------------------------- */
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .page-link {
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ==========================================================================
   5. ÜÇÜNCÜ TƏRƏF KOMPONENTLƏR  (≤575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {

  /* --- Select2 (17 səhifə) ----------------------------------------------- */
  .select2-container {
    width: 100% !important;
  }

  .select2-container--bootstrap-5 .select2-selection {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
  }

  /* Eyni iOS zoom problemi axtarış sahəsində də var */
  .select2-search__field {
    font-size: 16px !important;
  }

  /* --- DataTables (28 səhifə) -------------------------------------------
     Uzunluq seçimi, axtarış və səhifələmə bir sətrə sığmır. */
  .dataTables_wrapper .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 8px;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    text-align: start;
    float: none;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-inline-start: 0;
    margin-top: 6px;
  }

  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    padding-top: 10px;
  }

  /* --- Flatpickr ---------------------------------------------------------- */
  .flatpickr-calendar {
    max-width: calc(100vw - 24px);
  }

  /* --- Tooltip -----------------------------------------------------------
     `data-bs-toggle="tooltip"` toxunma cihazlarında açılıb asılı qalır və
     altındakı elementi bağlayır. */
  .tooltip {
    display: none !important;
  }
}


/* ==========================================================================
   6. MALİYYƏ MODULU  (resources/views/finance/layout.blade.php)
   ==========================================================================
   Bu modulun öz layout-u və öz yan menyusu var (`.fin-sidebar`), əsas
   şablonla əlaqəsi yoxdur.

   Mövcud davranış: 768px-dən aşağıda menyu 64px-lik ikon zolağına çevrilir.
   360px ekranda bu, faydalı sahənin 18%-ni yeyir — modulun bütün səhifələri
   isə cədvəldir (ödənişlər, borclular, hesabatlar), yəni en ən çox lazım
   olan yerdir. Telefonda menyu yuxarıya, üfüqi sürüşən lentə çevrilir və
   adlar geri qayıdır.
   ========================================================================== */
@media (max-width: 575.98px) {

  .fin-wrap {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .fin-sidebar {
    width: 100% !important;
    flex-shrink: 1;
    position: sticky;
    top: 0;
    z-index: 5;
  }

  .fin-sidebar .brand {
    padding: 12px 14px;
    font-size: 15px;
  }

  .fin-sidebar nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .fin-sidebar nav::-webkit-scrollbar {
    display: none;
  }

  .fin-sidebar nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 14px;
    border-bottom: 3px solid transparent;
  }

  /* Adlar geri qaytarılır — 64px ikon zolağı üçün gizlədilmişdi */
  .fin-sidebar .brand span,
  .fin-sidebar nav a span {
    display: inline !important;
  }

  /* Üfüqi lentdə fon rəngi aktivliyi göstərmir — alt xətt işlədilir */
  .fin-sidebar nav a.active {
    border-bottom-color: #fff;
  }

  .fin-topbar {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .fin-content {
    padding: 12px;
  }

  .kpi {
    padding: 14px;
  }

  .kpi .v {
    font-size: 20px;
  }
}


/* ==========================================================================
   7. GİRİŞ SƏHİFƏSİ  (resources/views/login.blade.php)
   ==========================================================================
   İstifadəçinin gördüyü ilk ekran.

   Problem: həm `<body>`, həm sarğı elementi `height: 100vh` idi. Mobil
   brauzerlərdə `100vh` ünvan sətrinin ALTINDAKI sahəni də sayır, yəni real
   görünən sahədən böyükdür. Nəticədə «Log In» düyməsi ekranın altından
   çıxırdı — `height` (min-height deyil) olduğu üçün səhifə sürüşmürdü də,
   istifadəçi düyməyə çata bilmirdi.
   ========================================================================== */
@media (max-width: 1199.98px) {

  body.auth-page {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }

  body.auth-page > div[style*="height"] {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (max-width: 575.98px) {

  /* Şaquli boşluqlar telefonda çox böyükdür (gap-32 = 32px) */
  body.auth-page form.submit-form {
    gap: 20px !important;
  }

  body.auth-page .mt-32 {
    margin-top: 20px !important;
  }

  body.auth-page .mb-32 {
    margin-bottom: 20px !important;
  }

  body.auth-page .py-32 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body.auth-page .px-24 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.auth-page .loginBtn {
    min-height: 50px;
  }

  /* Şifrə sahəsindəki «göz» düyməsinin toxunma sahəsi */
  body.auth-page .toggle-password {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}