/* ==========================================================================
   VZ VPŽ - Prilagodba prikaza prema detektiranom uređaju (Mobitel vs Računalo)
   Automatski se primjenjuje preko klasa html.is-mobile, html.is-tablet, html.is-desktop
   ========================================================================== */

/* Sprječavanje horizontalnog "bježanja" stranice na svim uređajima */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Pravilo za logotip na karticama dokumenata (Narudžbenice / Reversi / Izdatnice) */
.po-card .po-logo,
.po-card .po-logo-area img,
.po-card img.po-logo {
  width: 65px !important;
  max-width: 65px !important;
  min-width: 65px !important;
  height: 65px !important;
  max-height: 65px !important;
  min-height: 65px !important;
  object-fit: contain !important;
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Sprječavanje preklapanja ikone na polju za YouTube video poveznicu */
.relative > input.pl-10,
.relative > input[placeholder*="youtube"],
.relative > input[placeholder*="YouTube"] {
  padding-left: 38px !important;
}

/* ==========================================================================
   1. PRIKAZ ZA RAČUNALO (html.is-desktop)
   ========================================================================== */
html.is-desktop body {
  overflow-x: clip;
}

html.is-desktop main table {
  display: table;
  width: 100%;
}

/* ==========================================================================
   2. PRIKAZ ZA MOBITEL (html.is-mobile i ekrani <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Sprječava automatsko zumiranje preglednika pri kliku na polje unosa (iOS/Android) */
  input, select, textarea, .ql-editor {
    font-size: 16px !important;
  }
}

html.is-mobile input,
html.is-mobile select,
html.is-mobile textarea,
html.is-mobile .ql-editor {
  font-size: 16px !important;
}

/* --- A. JAVNI PORTAL: ZAGLAVLJE I NAVIGACIJA NA MOBITELU --- */
html.is-mobile header > div.bg-\[\#800000\] {
  height: auto !important;
  min-height: 68px !important;
  padding: 10px 0 !important;
}

/* Grb u zaglavlju na mobitelu da ne prekriva tražilicu i tekst */
html.is-mobile header a.group > div.h-32.w-32,
html.is-mobile header a.group > div.h-11.w-11 {
  width: 48px !important;
  height: 48px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html.is-mobile header a.group > div.flex.flex-col {
  margin-left: 10px !important;
}

html.is-mobile header a.group > div.flex.flex-col > span:first-child {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

html.is-mobile header a.group > div.flex.flex-col > span:last-child {
  font-size: 10px !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  letter-spacing: 0.06em !important;
}

/* Mobilni klizni izbornik (Drawer) - očuvanje tamnog izgleda i crvenog zaglavlja */
html.is-mobile .fixed.inset-0.z-50.flex.justify-end {
  background: transparent !important;
  padding: 0 !important;
}

html.is-mobile .fixed.inset-0.z-50.flex.justify-end > div.bg-black\/60 {
  background: rgba(0, 0, 0, 0.65) !important;
  width: 100% !important;
  height: 100% !important;
}

html.is-mobile .fixed.inset-0.z-50.flex.justify-end > div.bg-\[\#1a1a1a\] {
  background: #1a1a1a !important;
  color: #ffffff !important;
  width: 82vw !important;
  max-width: 310px !important;
  height: 100% !important;
}

html.is-mobile .fixed.inset-0.z-50.flex.justify-end > div.bg-\[\#1a1a1a\] > div:first-child {
  background: #800000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 16px !important;
}

/* --- B. JAVNI PORTAL: NASLOVNICA, VIJESTI I STRANICE NA MOBITELU --- */
html.is-mobile #aktualne_vijesti {
  padding-top: 4px !important;
}

html.is-mobile .max-w-6xl.mx-auto.px-4.mt-12 {
  margin-top: 16px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Glavna istaknuta vijest na mobitelu - prilagođena visina slike i naslova */
html.is-mobile #aktualne_vijesti .h-\[400px\] {
  height: 210px !important;
}

html.is-mobile #aktualne_vijesti h2.text-3xl {
  font-size: 1.35rem !important;
  line-height: 1.3 !important;
}

html.is-mobile #printable-article {
  padding: 16px !important;
}

html.is-mobile #printable-article h1 {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}

html.is-mobile #printable-article img,
html.is-mobile .prose img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* Statičke stranice (p-12 -> p-5 na mobitelu) */
html.is-mobile main .p-12 {
  padding: 20px 16px !important;
}

/* --- C. ADMINISTRACIJA (CMS / ERP) NA MOBITELU --- */
html.is-mobile aside.w-64 {
  width: 280px !important;
  max-width: 85vw !important;
}

html.is-mobile header.sticky.top-0 {
  padding: 10px 14px !important;
  z-index: 35 !important;
}

html.is-mobile main.flex-1 {
  padding: 12px !important;
}

/* Gumbi u zaglavljima administrativnih modula - automatsko prelamanje u više redova na mobitelu */
html.is-mobile main .bg-white.p-6.rounded-2xl {
  padding: 16px !important;
}

html.is-mobile main .flex.gap-3,
html.is-mobile main .flex.gap-2 {
  flex-wrap: wrap !important;
}

/* ==========================================================================
   PREGLEDNE MOBILNE KARTICE ZA TABLICE U ADMINISTRACIJI (Narudžbenice, Partneri, Reversi, Inventura...)
   Na mobitelu se svaki redak tablice pretvara u preglednu karticu sa svim poljima.
   ========================================================================== */
@media screen {
  html.is-mobile main table[data-mobile-cards="true"] {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > thead {
    display: none !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px !important;
    background: #f8fafc !important;
    border: none !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    margin: 0 !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr[data-empty-row="true"] {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 14px !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr[data-empty-row="true"] > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 32px 16px !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 8px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }

  /* Prvi redak na kartici (npr. RBR narudžbenice 129/2026 ili Naziv) */
  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td:first-child {
    padding-top: 2px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    font-size: 15px !important;
  }

  /* Zadnji redak na kartici (Akcije - gumbi za ispis, uređivanje, brisanje) */
  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td:last-child {
    border-bottom: none !important;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
  }

  /* Oznaka polja s lijeve strane kartice (RBR, POSLOVNI PARTNER, OPIS, DATUM, IZNOS, STATUS, AKCIJE) */
  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td::before {
    content: attr(data-label);
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    max-width: 44% !important;
    line-height: 1.3 !important;
  }

  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td[data-label=""]::before,
  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td:not([data-label])::before {
    display: none !important;
  }

  /* Gumbi akcija na mobilnoj kartici - veći i lakši za dodir prstom */
  html.is-mobile main table[data-mobile-cards="true"] > tbody > tr:not([data-empty-row="true"]) > td:last-child button {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
  }
}

/* Tablice za unos stavki unutar formi (npr. Stavke narudžbenice) i tablice za ispis */
html.is-mobile table[data-table-role="form-items"] {
  display: table !important;
  width: 100% !important;
  min-width: 680px !important;
}

html.is-mobile .po-card table,
html.is-mobile .print-only table {
  display: table !important;
  white-space: normal !important;
}

/* Prilagodba modala za unos i pregled u administraciji na mobitelu (z-50, z-[70], z-[100]) */
html.is-mobile .fixed.inset-0.z-50:not(.flex.justify-end):not(.bg-black\/95):not(.bg-black\/90),
html.is-mobile .fixed.inset-0.z-\[70\],
html.is-mobile .fixed.inset-0.z-\[100\] {
  padding: 6px !important;
}

html.is-mobile .fixed.inset-0.z-50:not(.flex.justify-end):not(.bg-black\/95):not(.bg-black\/90) > div.bg-white,
html.is-mobile .fixed.inset-0.z-\[70\] > div.bg-white,
html.is-mobile .fixed.inset-0.z-\[100\] > div.bg-white {
  max-width: 100% !important;
  width: 100% !important;
  max-height: 96vh !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

html.is-mobile .fixed.inset-0.z-\[70\] > div.bg-white {
  padding: 0 !important;
}

html.is-mobile .fixed.inset-0.z-\[70\] > div.bg-white > div:first-child {
  padding: 12px 14px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Quill Rich Text Editor alatna traka prilagođena za dodir na mobitelu */
html.is-mobile .ql-toolbar.ql-snow {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 6px !important;
  gap: 2px !important;
  background: #f8fafc !important;
}

html.is-mobile .ql-snow .ql-formats {
  margin-right: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

html.is-mobile .ql-snow.ql-toolbar button,
html.is-mobile .ql-snow .ql-toolbar button {
  width: 34px !important;
  height: 34px !important;
  padding: 5px !important;
}

html.is-mobile .ql-editor {
  min-height: 220px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* --- D. POD-APLIKACIJE (NATJECANJA ADMIN, OGLASNIK ADMIN, PRIJAVA DOGAĐANJA) --- */
html.is-mobile .topbar {
  flex-wrap: wrap !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}

html.is-mobile .topbar-nav {
  order: 3 !important;
  width: 100% !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
}

html.is-mobile .form-row,
html.is-mobile .form-row-3,
html.is-mobile .form-grid-2,
html.is-mobile .form-grid-3 {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html.is-mobile .card-header {
  flex-wrap: wrap !important;
  gap: 10px !important;
}