/* ============================================================
   WEB387 — boja brenda (#000CFF)
   Zalijepiti na POCETAK fajla public/css/mobilne-popravke.css,
   IZVAN svakog @media bloka.
   ============================================================ */

:root,
html,
body,
body[class*="theme-"] {
    --color-primary-50:  rgb(237, 238, 255) !important;
    --color-primary-100: rgb(217, 219, 255) !important;
    --color-primary-200: rgb(181, 185, 255) !important;
    --color-primary-300: rgb(133, 138, 255) !important;
    --color-primary-400: rgb(82, 90, 255)   !important;
    --color-primary-500: rgb(41, 51, 255)   !important;
    --color-primary-600: rgb(0, 12, 255)    !important;
    --color-primary-700: rgb(0, 10, 217)    !important;
    --color-primary-800: rgb(0, 8, 178)     !important;
    --color-primary-900: rgb(0, 7, 145)     !important;
    --color-primary-950: rgb(0, 5, 97)      !important;
}

/* ============================================================
   WEB387 — popravke prikaza na mobilnim uredjajima
   Zalijepiti na KRAJ fajla resources/css/invoiceshelf.css
   ============================================================ */

@media (max-width: 767px) {

  /* --- 1. Sprijeci vodoravno pomjeranje cijele stranice --- */
  body {
    overflow-x: hidden;
  }

  /* --- 2. Ponisti minimalne sirine kolona koje gusaju tabelu van ekrana --- */
  .item-table,
  .item-table table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .item-table col {
    width: auto !important;
    min-width: 0 !important;
  }

  /* --- 3. Sakrij zaglavlje tabele (oznake idu iznad svakog polja) --- */
  .item-table thead {
    display: none !important;
  }

  /* --- 4. Omotac reda: bez unutrasnjeg razmaka --- */
  .item-table > tbody {
    display: block !important;
  }

  .item-table > tbody > tr {
    display: block !important;
    margin-bottom: 14px;
    border-radius: 8px;
  }

  .item-table > tbody > tr > td {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* --- 5. Unutrasnja tabela -> kartica --- */
  .item-table table tbody,
  .item-table table tbody tr {
    display: block !important;
    width: 100% !important;
  }

  .item-table table tbody tr > td {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    text-align: left !important;
    border: 0 !important;
  }

  /* Oznaka iznad svakog polja */
  .item-table table tbody tr > td::before {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7280;
  }

  .item-table table tbody tr > td:nth-child(1)::before { content: "Stavka"; }
  .item-table table tbody tr > td:nth-child(2)::before { content: "Količina"; }
  .item-table table tbody tr > td:nth-child(3)::before { content: "Cijena"; }
  .item-table table tbody tr > td:nth-child(4)::before { content: "Popust"; }
  .item-table table tbody tr > td:nth-child(5)::before { content: "Iznos"; }

  /* Zadnji red (Iznos) - istaknut i odvojen crtom */
  .item-table table tbody tr > td:nth-child(5) {
    border-top: 1px solid #e5e7eb !important;
    background: #fafafa;
    font-weight: 600;
  }

  .item-table table tbody tr > td:nth-child(5) .justify-end {
    justify-content: flex-start !important;
  }

  /* --- 6. Hvataljka za prevlacenje nema smisla na dodir --- */
  .item-table .handle {
    display: none !important;
  }

  /* --- 7. Polja neka zauzmu punu sirinu --- */
  .item-table [role="group"] {
    width: 100% !important;
  }

  .item-table [role="group"] > div:first-child {
    flex: 1 1 auto !important;
  }

  .item-table input,
  .item-table textarea {
    font-size: 16px !important;   /* sprjecava da iOS zumira pri fokusu */
  }

  /* --- 8. Padajuci meniji neka stanu u ekran --- */
  [data-popper-placement],
  .item-table .z-10.w-56 {
    max-width: calc(100vw - 20px) !important;
  }

  /* --- 9. Sadrzaj stranice neka ne izlazi iz okvira --- */
  .main-content,
  main {
    overflow-x: hidden;
  }
}
@media (max-width: 767px) {

  /* Meni za porez -> ploca pri dnu ekrana */
  .tax-select [id^="headlessui-popover-panel"] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 99999 !important;
  }

  .tax-select [id^="headlessui-popover-panel"] > div {
    border-radius: 12px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3) !important;
  }

  /* Lista poreza neka bude visa */
  .tax-select .max-h-36 {
    max-height: 45vh !important;
  }

  /* Omotac ne smije ograniciti sirinu */
  .tax-select .max-w-md {
    max-width: none !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {

  .tax-select > div > div.relative.w-full {
    position: static !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .tax-select div[id^="headlessui-popover-panel"] {
    position: fixed !important;
    inset: auto 12px 16px 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    translate: none !important;
    z-index: 99999 !important;
  }
}