/* ===== Mobile overrides (safe, bez zmian vendorów) ===== */

/* Uporządkowanie box-sizing i przewijania w poziomie */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Zmienna na wysokość top-navbar */
:root { --nav-h: 56px; }
@media (min-width: 992px) { :root { --nav-h: 64px; } }

/* Zapobiegaj przykrywaniu treści przez fixed-top nav */
body { padding-top: var(--nav-h); }

/* Obrazy responsywne z automatyczną wysokością */
img, video { max-width: 100%; height: auto; }

/* LOGO w navbar – nie trzymaj na sztywno 55px */
.navbar-brand img { max-height: 40px; height: auto !important; }
@media (min-width: 576px) {
  .navbar-brand img { max-height: 48px; }
}

/* Na telefonach pokazuj mini-logo, ukryj duże */
@media (max-width: 576px) {
  .navbar .brand-logo { display: none !important; }
  .navbar .brand-logo-mini { display: inline-block !important; }
  .navbar-menu-wrapper { padding-right: 8px; }
  .navbar { padding-left: 8px; padding-right: 8px; }
}

/* Sidebar jako prawdziwy off-canvas na małych ekranach */
@media (max-width: 991.98px) {
  #sidebar.sidebar-offcanvas {
    position: fixed;
    top: var(--nav-h);
    left: -280px;               /* schowany */
    width: 260px;
    height: calc(100vh - var(--nav-h));
    z-index: 1040;
    transition: left .25s ease;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
  }
  /* klasa .active jest zgodna z większością template'ów off-canvas */
  #sidebar.sidebar-offcanvas.active { left: 0; }
  .page-body-wrapper { margin-left: 0 !important; } /* pełna szerokość */
}

/* Główna kolumna – nie pozwól wychodzić poza viewport */
.main-panel { width: 100%; }

/* Tabele i DataTables – przewijanie horyzontalne na mobilu (bez łamania pluginu) */
@media (max-width: 767.98px) {
  table.dataTable, table.table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .dataTables_wrapper .row { margin-left: 0; margin-right: 0; }
}

/* Siatka footer – układ kolumnowy -> stos na mobilu */
.footer { padding: 16px; }
.footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}
.footer__addr { margin-bottom: 16px; }
.footer__logo img { height: auto !important; max-width: 100%; }

/* Drobnica – klikane elementy */
.nav .nav-item > .nav-link { line-height: 1.2; padding: 10px 12px; }

/* Zmniejszamy przerost marginesów/paddingów w panelach na XS */
@media (max-width: 576px) {
  .content-wrapper, .card, .card-body { padding: 12px !important; }
}

/* Usunięcie zbędnych efektów, które rozpychają */
.theme-setting-wrapper { display: none; } /* ten pływający “settings” zazwyczaj psuje mobilkę */

/* ========== Mobile overrides (non-destructive) ========== */

/* Universal fixes */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }

/* Respect the fixed navbar height from template (60px) */
body { padding-top: 60px; } /* style1.css sets navbar height=60px */ /* :contentReference[oaicite:3]{index=3} */

/* Navbar brand area is 235px in template; shrink on phones */
@media (max-width: 575.98px) {
  .navbar .navbar-brand-wrapper { width: 70px !important; height: 60px; } /* :contentReference[oaicite:4]{index=4} */
  .navbar .brand-logo { display: none !important; }                        /* large logo off */
  .navbar .brand-logo-mini { display: inline-block !important; }           /* mini logo on */
}

/* Sidebar off-canvas behavior (template uses right:-235px) */
@media (max-width: 991.98px) {
  /* Keep template’s right-slide, just ensure it sits below navbar and doesn't compress content */
  .sidebar-offcanvas {
    top: 60px !important;                      /* same as navbar height */ /* :contentReference[oaicite:5]{index=5} */
    height: calc(100vh - 60px) !important;
    box-shadow: 0 0 20px rgba(0,0,0,.15);
  }
  .page-body-wrapper { margin: 0 !important; } /* full width content on mobile */
}

/* Kill the floating settings bubble on mobile; it overlaps UI */
@media (max-width: 991.98px) {
  #settings-trigger, .theme-setting-wrapper, #theme-settings { display: none !important; } /* :contentReference[oaicite:6]{index=6} */
}

/* ===== Your custom grid classes: make them stack on mobile ===== */
/* They currently lock widths (16–28%) and add large paddings. Collapse to 100% on small screens. */
@media (max-width: 767.98px) {
  .col-sm-2-grid,
  .col-sm-2-grid-text,
  .col-sm-3-grid,
  .col-sm-3-text,
  .col-sm-4-grid,
  .col-sm-4-text {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Cards/content breathing space on phones */
@media (max-width: 575.98px) {
  .content-wrapper, .card, .card-body { padding: 12px !important; }
  .grid-margin { margin: 0 0 12px 0 !important; }
}

/* Article tiles: prevent hover-zoom from creating horizontal scroll */
.article-container { overflow: hidden; }
.article-container img { transform-origin: center center; }

/* DataTables and wide tables: horizontal scroll when needed */
@media (max-width: 767.98px) {
  table, .table, .dataTables_wrapper .row {
    width: 100% !important;
  }
  .table, table.dataTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Footer: one column on phones; back to template from ~768px */
.footer__nav { display: grid; grid-template-columns: 1fr; gap: 16px; }      /* your footer grid */ /* :contentReference[oaicite:7]{index=7} */
@media (min-width: 768px) {
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
}

/* Misc: ensure main panel uses full width on mobile */
.main-panel { width: 100% !important; }