/* ══════════════════════════════════════
   MOBILNI RESPONSIVE LAYOUT
   ══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Sakrij overflow na body za mobilni */
  html { overflow: hidden; }
  body { overflow: hidden; }
  .col-main {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Header — kompaktniji */
  header {
    padding: 0;
    height: 52px;
    overflow: hidden;        /* spjeci preljev desno */
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Sva djeca headera smiju se skupiti (flex item default min-width:auto sprjecava skupljanje) */
  header > * { min-width: 0; }
  .h-brand { min-width: auto; padding: 0 12px; border-right: none; }
  .h-brand-txt { font-size: 13px; }
  .h-brand-ico { width: 28px; height: 28px; font-size: 14px; }

  /* Sakrij desktop nav i datum */
  .h-nav { display: none !important; }
  .h-date { display: none !important; }
  .h-novi { display: none !important; }
  /* Dugme za odjavu — prilagodjeno mobilnom */
  #btn-odjava {
    padding: 6px 12px !important;
    font-size: 12px !important;
    background: rgba(255,255,255,.15) !important;
    border: 1.5px solid rgba(255,255,255,.35) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
  }
  #nav-naziv { display: none !important; }

  /* Mobilni header desno — samo + dugme */
  .h-right { padding: 0 10px; gap: 6px; min-width: 0; flex-shrink: 1; overflow: hidden; }
  .h-mob-new {
    display: flex !important;
    padding: 7px 14px; background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.35); border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  }

  /* MAIN — jedan panel vidljiv */
  .app { grid-template-columns: 1fr; grid-template-rows: 52px 1fr; height: 100svh; }
  .sidebar { display: none; }
  header { grid-column: 1; }
  .main { grid-column: 1; }
  #mob-hamburger { display: block !important; }
  #mob-brand-ico { display: flex !important; }
  #mob-brand-txt { display: block !important; }
  .main {
    grid-template-columns: 1fr;
    height: calc(100svh - 52px);
    position: relative;
    overflow: hidden;
  }

  /* Oba panela full-width, klizno prebacivanje */
  .col-lista {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 2;
  }
  .col-main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 1;
  }

  /* Panel states */
  .mob-show-detail .col-lista  { transform: translateX(-100%); }
  .mob-show-detail .col-main   { transform: translateX(0); z-index: 2; }
  .mob-show-lista  .col-lista  { transform: translateX(0); z-index: 2; }
  .mob-show-lista  .col-main   { transform: translateX(100%); }

  /* Donja navigacijska traka — SAKRIVENA na mobilnom (koristi se sidebar) */
  .mob-nav {
    display: none !important;
  }
  .mob-nav-btn {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    border: none; background: none;
    font-family: Inter, sans-serif;
    font-size: 9px; font-weight: 600;
    color: #8b95b0;
    cursor: pointer;
    transition: all .15s;
    padding: 6px 2px;
  }
  .mob-nav-btn .mni { font-size: 18px; line-height: 1; }
  .mob-nav-btn.on { color: #3a6bd0; }
  .mob-nav-btn.on .mni-bg {
    background: #edf2fc;
    border-radius: 12px;
    padding: 3px 16px;
  }

  /* Nazad dugme u detalju */
  .mob-back-btn {
    display: flex !important;
    align-items: center; gap: 6px;
    padding: 6px 14px 6px 10px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer;
    margin-right: 4px;
  }

  /* Sakrij desktopske elemente koji ne trebaju mobilnom */
  .lista-foot { padding: 8px; }
  .btn-novi { padding: 11px; font-size: 12px; }

  /* Manji kalendar na mobilnom */
  #monthCal { padding: 6px 8px 8px; }
  .cal-d { font-size: 11px; min-height: 30px; }

  /* Detalji — puni ekran scroll */
  #view-detalji, #view-kasa, #view-statistika,
  #view-termini, #view-izvjestaj, #view-crm,
  #view-katalog, #view-marketing, #view-settings {
    height: 100%;
    overflow-y: auto;
  }

  /* Termini kalendar na mobilnom */
  /* Kalendar: kolone se NE smiju siriti preko 1/7 ekrana (minmax(0,1fr) ukida auto-min) */
  .tk-grid, .tk-wd { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  /* Fiksna visina celije — kalendar se ne siri uvis bez obzira na broj termina */
  .tk-cell { min-height: 64px; height: 64px; max-height: 64px; min-width: 0; padding: 4px 3px; overflow: hidden; }
  .tk-ev { font-size: 8px; padding: 1px 3px; }
  .tk-wrap { padding: 10px; }
  .tk-header { margin-bottom: 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tk-naslov { font-size: 16px; }
  .tk-nav { width: 100%; justify-content: space-between; }
  .tk-nav > div { flex: 1; text-align: center; }
  .tk-danas-btn { padding: 6px 14px; font-size: 11px; }
  .tk-filters { gap: 6px; }
  .tk-chip { padding: 4px 10px; font-size: 10px; }
  .tk-wd-cell { font-size: 9px; padding: 7px 2px; }
  .tk-num { font-size: 11px; }

  /* Stat chips na mobilnom */
  .sc-n { font-size: 18px; }
  .sc-l { font-size: 9px; }

  /* Modali na mobilnom */
  .modal { width: 94vw !important; padding: 18px !important; }

  /* Splash — samo uski ekran: veći spinner, centar (desktop default ostaje ispod, bez međusobnog kvaranja) */
  #splash-spinner {
    top: 50%;
    width: 64px;
    height: 64px;
  }
  #splash-spinner::before {
    border-width: 4px;
  }
  #splash-spinner::after {
    inset: 10px;
    border-width: 2px;
  }

  /* ── P1 OVERFLOW FIX ── */

  /* Katalog stavke */
  /* Mobilni: stavke u jednom redu, naziv puna sirina */
  .kat-item,
  .kat-item-dio,
  .kat-item-usluga {
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
  }
  /* Na mobilnom: naziv prelama u 1-2 reda, ostalo kompaktno */
  .kat-item .kat-name,
  .kat-item-dio .kat-name,
  .kat-item-usluga .kat-name {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Normativi/Usluge mobilni: naziv pune sirine, tehnicki podaci ispod u jednom redu */
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
    padding: 10px 12px !important;
    gap: 4px !important;
    font-size: 12px !important;
  }
  /* Naziv normativa u svom redu, puna sirina */
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] > div:first-child {
    grid-column: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
  }
  /* Sati, cijena sata, ukupna cijena — sva tri u jednom redu lijevo poravnata,
     override-uje inline text-align:right i min-width:70px iz JS-a */
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] > div:nth-child(2),
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] > div:nth-child(3),
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] > div:nth-child(4) {
    grid-column: 1;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  /* Edit dugme (✏️) — u istom redu kao cijene, ne ispod */
  #katalog-content [style*="display:grid"][style*="grid-template-columns:1fr auto"] > button {
    grid-column: 1;
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
  }

  .kat-code {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Detalji naloga toolbar */
  .nd-parts-toolbar {
    flex-wrap: wrap !important;
  }

  .nd-table-summary {
    grid-template-columns: 1fr !important;
  }

  .nd-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  /* Statistika */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Modali */
  .fr {
    grid-template-columns: 1fr !important;
  }

  /* Nalozi lista */
  #view-nalozi,
  #nalozi-list-wrap {
    padding: 8px !important;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
  }

  /* Globalni overflow fix */
  .col-main * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .view-section {
    overflow-x: hidden;
    width: 100%;
  }

  /* Splash — zasebna uspravna slika za telefon */
  #splash-screen {
    background-image: url('../splash-bg-mobile.jpg') !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* Desktop — sakrij mobilne elemente */
@media (min-width: 769px) {
  .mob-nav { display: none !important; }
  .mob-back-btn { display: none !important; }
  .h-mob-new { display: none !important; }
}
/* Jezik prebacivac u headeru — sakriven na svim ekranima (izbor je u Postavkama) */
#lang-switcher { display: none !important; }
.mob-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9000;
}
.mob-sidebar-overlay.open { display: block; }
.mob-sidebar-panel {
  position: fixed; top: 0; left: -260px;
  width: 240px; height: 100%;
  background: #1a1d2e; z-index: 9001;
  transition: left .25s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.mob-sidebar-panel.open { left: 0; }
.mob-sb-header {
  height: 54px; display: flex; align-items: center;
  padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); gap: 10px;
}
.mob-sb-close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.6); font-size: 20px; cursor: pointer; }

/* ─── SPLASH SCREEN ─── */
#splash-screen {
  position: fixed;
  inset: 0;
  /* Iznad #login-overlay; !important ako tablet učita staru verziju drugog CSS-a */
  z-index: 100020 !important;
  background-color: #050c1a;
  background-image: url('../splash-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease;
}
#splash-screen.fade-out { opacity: 0; }

/* Desktop (i široki ekrani): originalni položaj i veličina */
#splash-spinner {
  position: absolute;
  left: 50%;
  top: 69%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
}
#splash-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(58,107,208,0.2);
  border-top-color: #3a6bd0;
  border-right-color: #3a6bd0;
  animation: splash-spin 1.1s linear infinite;
}
#splash-spinner::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #5aabff;
  border-left-color: #5aabff;
  animation: splash-spin-rev 0.75s linear infinite;
}
@keyframes splash-spin     { to { transform: rotate(360deg); } }
@keyframes splash-spin-rev { to { transform: rotate(-360deg); } }