/* ==========================================================================
   Zeusz ERP – mobil / kis képernyős (responsive) kiegészítések
   Az admin_master.blade.php tölti be az app.min.css UTÁN. Asztali nézetben (≥ 992 px)
   szinte semmit nem módosít; a szabályok a kisebb képernyőkre vonatkoznak.
   A táblázat-görgetést a public/js/mobil.js hozza létre (.mobil-tablewrap).
   ========================================================================== */

/* ── Táblázat-görgetés (csak kis képernyőn aktív; asztalon a wrapper hatástalan) ── */
@media (max-width: 991.98px) {
  .mobil-tablewrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: .5rem;
  }
  .mobil-tablewrap > table {
    margin-bottom: 0;
    min-width: max-content;           /* az oszlopok teljes tartalmukkal látszanak, vízszintesen görgethetők */
  }
  .mobil-tablewrap > table {
    width: auto !important;           /* a DataTables szűk konténerhez számolt oszlopszélességeit felülírjuk */
    table-layout: auto !important;
  }
  .mobil-tablewrap > table col { width: auto !important; }
  .mobil-tablewrap > table td,
  .mobil-tablewrap > table th {
    width: auto !important;
    max-width: 18rem;                 /* a nagyon hosszú szöveg tördelődjön, ne húzza szét a táblát */
  }
  .mobil-tablewrap > table th { white-space: nowrap; }
  .mobil-tablewrap::-webkit-scrollbar { height: 8px; }
  .mobil-tablewrap::-webkit-scrollbar-thumb { background: #c4c9d4; border-radius: 4px; }

  /* Kompaktabb cellák */
  .main-content .table > :not(caption) > * > * { padding: .4rem .5rem; }
  .main-content .table { font-size: .875rem; }
}

/* ── Fejléc: a hamburger-gomb és a logó kis képernyőn mindig látszódjon ──
   (az inline style="display:flex" a .logo-lg-n miatt a téma elrejtő szabálya nem érvényesült,
    a doboz megnőtt és a menü-gombot kitolta a képből) */
@media (max-width: 991.98px) {
  .navbar-brand-box { height: 70px; overflow: hidden; padding: 0 .75rem; width: auto !important; max-width: 46vw; }
  .navbar-brand-box .logo-lg { display: none !important; }
  .navbar-brand-box .logo-sm { display: inline-block !important; max-width: 110px !important; }
  .navbar-header > .d-flex:first-child { align-items: center; height: 70px; }
  #vertical-menu-btn { flex-shrink: 0; min-width: 48px; }
}

/* ── Lábléc: kis képernyőn ne lógjon ki és ne takarja a tartalmat ── */
@media (max-width: 991.98px) {
  .footer {
    position: static !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 12px !important;
  }
  .footer .col-12 { flex-wrap: wrap; gap: .25rem; }
  .main-content { min-height: 100vh; display: flex; flex-direction: column; }
  .main-content > .page-content { flex: 1 0 auto; }
  .main-content > .footer { flex-shrink: 0; }
}

/* ── Oldal- és kártyakeretek ── */
@media (max-width: 767.98px) {
  .page-content { padding-left: 6px !important; padding-right: 6px !important; padding-bottom: 16px !important; }
  .page-content .container-fluid { padding-left: 4px; padding-right: 4px; }
  .card { margin-bottom: .75rem; }
  .card-body { padding: .85rem; }
  .card-title { font-size: 1.1rem; }
  h4, .h4 { font-size: 1.2rem; }
  .page-title-box { padding-bottom: .5rem; }
}

/* ── Fejléc-gombsorok (cím + sok ikon-gomb): törjenek szépen, egymás mellett ── */
@media (max-width: 767.98px) {
  .text-end:has(> .btn ~ .btn),
  .text-end:has(> a ~ a.btn),
  .text-right:has(> .btn ~ .btn) {
    display: flex !important;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: flex-start;
    text-align: left !important;
  }
  .text-end:has(> .btn ~ .btn) > .btn,
  .text-end:has(> a ~ a.btn) > .btn,
  .text-end:has(> a ~ a.btn) > a,
  .text-right:has(> .btn ~ .btn) > .btn {
    margin: 0 !important;
  }
  .card-header.d-flex,
  .card-body > .d-flex.justify-content-between,
  .page-title-box.d-flex { flex-wrap: wrap; gap: .5rem; }
}

/* ── Érintés-barát űrlapok és gombok ── */
@media (max-width: 767.98px) {
  .form-control, .form-select, .select2-selection, textarea, input[type="text"],
  input[type="number"], input[type="email"], input[type="date"], input[type="search"] {
    font-size: 16px;                  /* az iOS ne nagyítson rá fókuszkor */
  }
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; padding: .35rem .65rem; }
  .input-group { flex-wrap: nowrap; }
  .form-label, label { margin-bottom: .25rem; }
  .select2-container { width: 100% !important; }
  .row > [class*="col-"] { margin-bottom: .25rem; }
  .input-group-text { padding-left: .6rem; padding-right: .6rem; }
  .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
}

/* ── Ablakok (modal) ── */
@media (max-width: 767.98px) {
  .modal-dialog { margin: .5rem; max-width: none; }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: none; }
  .modal-body { max-height: calc(100vh - 170px); overflow-y: auto; }
  .modal-footer { flex-wrap: wrap; gap: .4rem; }
  .modal-footer > * { margin: 0; }
}

/* ── DataTables vezérlők (keresés, lapozás, hosszúság) ── */
@media (max-width: 767.98px) {
  .dt-top-left, .dt-top-right, .dt-bottom-left, .dt-bottom-right {
    display: block; float: none; width: 100%; text-align: left; padding: 3px 0;
  }
  .dt-bottom-left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .dt-bottom-right { text-align: center; }
  div.dt-container .dt-search { text-align: left; margin: 0; }
  div.dt-container .dt-search input { width: 100%; margin: 0; }
  div.dt-container .dt-length { display: block; margin-bottom: .25rem; }
  div.dt-container .dt-paging { text-align: center; }
  div.dt-container .dt-paging .dt-paging-button { padding: .3rem .55rem; min-width: 2rem; }
  .dt-buttons { display: flex; flex-wrap: wrap; gap: .25rem; }
  div.dt-container .dt-layout-row { flex-wrap: wrap; }
  div.dt-container .dt-layout-cell { max-width: 100%; }
}

/* ── Gombcsoportok (pl. időszak-váltók) telefonon törjenek sorokba ── */
@media (max-width: 767.98px) {
  .btn-group:not(.dropdown):not(.dt-buttons) { flex-wrap: wrap; max-width: 100%; }
}

/* ── Lapozó (Laravel / Bootstrap pagination): sok oldalszám törjön sorokba ── */
@media (max-width: 767.98px) {
  .pagination { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
  nav[aria-label*="agination"], nav[role="navigation"] { max-width: 100%; }
}

/* ── Főoldal (Dashboard) összesítő kártyák: telefonon két oszlop, ne törjön a felirat ── */
@media (max-width: 575.98px) {
  .row > .col:has(> .card.stat-card) { flex: 1 1 44%; min-width: 140px; }
  .stat-card .card-body { padding: .75rem !important; }
  .stat-card .stat-value { font-size: 1.6rem; }
  .stat-card .stat-label { font-size: .72rem; letter-spacing: 0; word-break: normal; overflow-wrap: normal; }
  .stat-card .stat-icon { font-size: 1.8rem !important; }
}

/* ── Képek, videók, térképek ne lógjanak ki ── */
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
.leaflet-container img { max-width: none !important; }

/* ── Hosszú szavak (e-mail, link) tördelése ── */
@media (max-width: 767.98px) {
  .card-body, .modal-body, .alert { overflow-wrap: anywhere; }
  .mobil-tablewrap table { overflow-wrap: normal; }
}

/* ── Nyomtatás: a mobil kiegészítések ne zavarjanak ── */
@media print {
  .footer { position: static !important; }
}