/* =========================================
   MOBILE-FIRST RESPONSIVE LAYER (GLOBAL)
   Nalepi na kraj assets/style.css
========================================= */

/* Improve tap targets */
.btn, .input, select.input, textarea.input {
  min-height: 44px; /* touch friendly */
}

/* Prevent overflow issues */
body { overflow-x: hidden; }
.container { width: 100%; }

/* Topbar: wrap & stack on mobile */
.topbar {
  flex-wrap: wrap;
  align-items: flex-start;
}
.topbar .row {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}
.topbar .brand {
  font-size: 16px;
}

/* Make buttons wrap nicely */
.row { flex-wrap: wrap; }
.row .btn { white-space: nowrap; }

/* Cards: better spacing on small screens */
.card {
  padding: 16px;
}
.h1 {
  font-size: 22px;
  line-height: 1.2;
}
.h2 {
  font-size: 14px;
}

/* Grid responsiveness: 2-col -> 1-col */
.grid {
  grid-template-columns: 1fr;
}

/* KPI blocks: full width on mobile */
.kpi { min-width: 0; width: 100%; }

/* Tables: always scrollable on mobile */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table { min-width: 720px; }

/* Inputs */
.input {
  font-size: 16px; /* prevent iOS zoom */
}

/* Notices: readable */
.notice {
  line-height: 1.5;
  word-break: break-word;
}

/* Progress bar bigger on mobile */
.progress {
  height: 12px;
}

/* =========================================
   ADMIN SIDEBAR RESPONSIVE
========================================= */
@media (max-width: 980px){
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: relative;
    top: auto;
  }
  .admin-nav a {
    padding: 12px 12px;
  }
}

/* =========================================
   EXTRA SMALL PHONES
========================================= */
@media (max-width: 420px){
  .container { padding: 18px 14px; }
  .btn { width: 100%; justify-content: center; }
  .topbar .row { width: 100%; }
  .badge { width: 100%; justify-content: center; }
  .card { border-radius: 14px; }
}

/* =========================================
   FORM LAYOUT HELPERS
========================================= */
form { max-width: 100%; }
textarea.input { resize: vertical; }