/* ==========================================================================
   x.ERP v4 — Zajedničke površine i komponente (web/components.css)
   Obuhvata:
   - XPage, XDrawer (480px desno / bottom-sheet), XDialog (max 640px / bottom-sheet)
   - Konverter *ModalBackdrop prozora u stranice (.x-inline-modal-page)
   - <x-map> geoprostorni kontejner i alate (WGS84 φλh / ECEF XYZ)
   - Mobilni i desktop ESIR (x.Fiscal) tok u 3 koraka (Poglavlje 5.6, D12)
   ========================================================================== */

/* ==========================================================================
   1. BOČNI PANEL — XDrawer (.x-drawer, 480px desno na desktopu, sheet < 768px)
      Ne zatamnjuje cijeli ekran; sadržaj stranice ostaje vidljiv lijevo (D4).
   ========================================================================== */
.x-drawer {
  position: fixed;
  top: 56px;
  bottom: 32px;
  right: var(--ai-w, 48px);
  width: 480px;
  max-width: 100vw;
  background: var(--x-bg-surface, #FFFFFF);
  border-left: 1px solid var(--x-border-strong, rgba(0, 32, 63, 0.20));
  border-top: 3px solid var(--x-primary, #FC6735);
  box-shadow: -8px 0 28px rgba(0, 32, 63, 0.12);
  z-index: 85;
  display: flex;
  flex-direction: column;
  transform: translateX(104%);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.x-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.x-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
}

.x-drawer-title {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--x-text-main, #00203F);
}

.x-drawer-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--x-radius-ctrl, 4px);
  border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  background: var(--x-bg-elevated, #EDF1F5);
  color: var(--x-text-main, #00203F);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.x-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.x-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  background: var(--x-bg-elevated, #EDF1F5);
}

@media (max-width: 1023px) {
  .x-drawer {
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 767px) {
  .x-drawer {
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    border-left: none;
    border-radius: 14px 14px 0 0;
    transform: translateY(104%);
    z-index: 120;
  }

  .x-drawer.is-open {
    transform: translateY(0);
  }
}

/* ==========================================================================
   2. DIJALOG — XDialog (.x-dialog-backdrop & .x-dialog, max 640px)
      Za kratke akcije < 1 min: potvrda, M:N alokacija, štampa, PIN, brisanje,
      komandna paleta (/) i ⠿ Launcher katalog.
   ========================================================================== */
.x-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--x-scrim, rgba(0, 21, 41, 0.48));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.x-dialog {
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - 32px);
  background: var(--x-bg-surface, #FFFFFF);
  color: var(--x-text-main, #00203F);
  border: 1px solid var(--x-border-strong, rgba(0, 32, 63, 0.20));
  border-top: 3px solid var(--x-primary, #FC6735);
  border-radius: var(--x-radius-card, 12px);
  box-shadow: 0 18px 48px rgba(0, 21, 41, 0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.x-dialog.is-wide {
  max-width: 880px;
}

.x-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
}

.x-dialog-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--x-text-main, #00203F);
}

.x-dialog-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.x-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  background: var(--x-bg-elevated, #EDF1F5);
}

@media (max-width: 767px) {
  .x-dialog-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .x-dialog {
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ==========================================================================
   3. DUGMAD I KONTROLE (.x-btn-primary, .x-btn-secondary)
   ========================================================================== */
.x-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--x-radius-ctrl, 4px);
  border: 1px solid var(--x-btn-fill, #E3541F);
  background: var(--x-btn-fill, #E3541F);
  color: var(--x-btn-text, #FFFFFF);
  font-family: var(--x-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.x-btn-primary:hover:not(:disabled) {
  background: var(--x-btn-hover, #CC4614);
}

.x-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.x-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--x-radius-ctrl, 4px);
  border: 1px solid var(--x-border-strong, rgba(0, 32, 63, 0.20));
  background: var(--x-bg-surface, #FFFFFF);
  color: var(--x-text-main, #00203F);
  font-family: var(--x-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.x-btn-secondary:hover:not(:disabled) {
  border-color: var(--x-primary, #FC6735);
  background: var(--x-chip-active-bg, rgba(252, 103, 53, 0.10));
}

/* ==========================================================================
   4. KONVERTER *ModalBackdrop PROZORA U ČISTE STRANICE (.x-inline-modal-page)
      Uklanja plutajući modal okvir, zatamnjenje i duple zaglavne trake (D4).
   ========================================================================== */
.x-inline-modal-page,
.x-page-body .xsc-modal-backdrop,
.x-page-body .f2a-modal-backdrop,
.x-page-body .x-v3-modal-backdrop,
.x-page-body .xpm-modal-backdrop,
.x-page-body .xwb-modal-backdrop,
.x-page-body .v3-bd-backdrop,
.x-page-body .v3-hrf-backdrop,
.x-page-body .v3-prr-backdrop,
.x-page-body .fop-modal-backdrop,
.x-page-body .x-pgg-backdrop,
.x-page-body .xlcs-modal-backdrop,
.x-page-body .xsir-modal-backdrop,
.x-page-body .xre-modal-backdrop,
.x-page-body .xmkt-modal-backdrop,
.x-page-body .xvb-backdrop,
.x-page-body .xreg-modal-backdrop {
  position: static !important;
  inset: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  box-shadow: none !important;
}

.x-inline-modal-page > div,
.x-page-body .xsc-modal-dialog,
.x-page-body .f2a-modal-dialog,
.x-page-body .x-v3-modal-dialog,
.x-page-body .xpm-modal-dialog,
.x-page-body .xwb-modal-dialog,
.x-page-body .v3-bd-window,
.x-page-body .v3-hrf-window,
.x-page-body .v3-prr-window,
.x-page-body .fop-modal-dialog,
.x-page-body .x-pgg-window,
.x-page-body .xlcs-modal-dialog,
.x-page-body .xsir-modal-dialog,
.x-page-body .xre-modal-dialog,
.x-page-body .xmkt-modal-dialog,
.x-page-body .xvb-window,
.x-page-body .xreg-modal-dialog {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Sakrij dugmad "Zatvori modal" kada je prozor montiran kao stranica */
.x-page-body [data-xsc-close],
.x-page-body [data-xpm-close],
.x-page-body [data-xwb-close],
.x-page-body [data-xlcs-close],
.x-page-body [data-xsir-close],
.x-page-body [data-xvb-close],
.x-page-body [data-f2a-close],
.x-page-body [data-fop-close],
.x-page-body [data-xre-close],
.x-page-body [data-xmkt-close],
.x-page-body .xsc-close-btn,
.x-page-body .xpm-close-btn,
.x-page-body .xwb-close-btn,
.x-page-body .v3-bd-close,
.x-page-body .v3-hrf-close,
.x-page-body .v3-prr-close,
.x-page-body .x-pgg-close-btn,
.x-page-body #v3EsirCloseBtn,
.x-page-body #v3PdvCloseBtn,
.x-page-body #v3MnCloseBtn {
  display: none !important;
}

/* Osiguraj da nijedna kartica ili tabela unutar stranice ne izazove overflow-x */
.x-page-body * {
  max-width: 100%;
}

.x-page-body table {
  max-width: none;
}

/* ==========================================================================
   5. GEOPROSTORNI KONTEJNER (<x-map> i Lista / Karta, Poglavlje 3.4 & Handoff 10)
   ========================================================================== */
.x-map-view-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  background: var(--x-bg-surface, #FFFFFF);
  border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  border-radius: var(--x-radius-card, 12px);
  padding: 12px;
  box-shadow: var(--x-shadow);
}

.x-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
}

.x-map-canvas-host {
  position: relative;
  width: 100%;
  min-height: 460px;
  border-radius: 8px;
  border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  background: var(--x-bg-page, #F2F6FA);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.x-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--x-font-mono);
  font-size: 12px;
  color: var(--x-text-mono, rgba(0, 32, 63, 0.62));
}

/* ==========================================================================
   6. MOBILNI I DESKTOP ESIR (x.Fiscal) TOK U 3 KORAKA — Poglavlje 5.6 (D12)
   ========================================================================== */
.x-esir-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.x-esir-steps-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: var(--x-bg-surface, #FFFFFF);
  border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  border-radius: var(--x-radius-card, 12px);
}

.x-esir-step-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--x-radius-ctrl, 4px);
  border: 1.5px solid transparent;
  background: var(--x-bg-elevated, #EDF1F5);
  color: var(--x-text-body, rgba(0, 32, 63, 0.72));
  font-family: var(--x-font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.x-esir-step-tab.is-active {
  background: var(--x-chip-active-bg, rgba(252, 103, 53, 0.10));
  border-color: var(--x-primary, #FC6735);
  color: var(--x-text-main, #00203F);
}

.x-esir-card {
  background: var(--x-bg-surface, #FFFFFF);
  border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
  border-radius: var(--x-radius-card, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--x-shadow);
}

.x-esir-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 110px 130px 90px 44px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
}

@media (max-width: 767px) {
  .x-esir-item-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 10px;
    border: 1px solid var(--x-border, rgba(0, 32, 63, 0.12));
    border-radius: 8px;
    background: var(--x-bg-page, #F2F6FA);
  }
  .x-esir-item-row > :first-child {
    grid-column: 1 / -1;
  }
}

.x-esir-sticky-total {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--x-bg-surface, #FFFFFF);
  border: 1.5px solid var(--x-primary, #FC6735);
  border-radius: var(--x-radius-card, 12px);
  box-shadow: 0 -4px 18px rgba(0, 32, 63, 0.08);
}

/* ==========================================================================
   7. KOMANDNA PALETA & ⠿ KATALOG SVIH PODRUČJA
   ========================================================================== */
.x-cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--x-primary, #FC6735);
  border-radius: var(--x-radius-ctrl, 4px);
  background: var(--x-bg-page, #F2F6FA);
}

.x-cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--x-text-main, #00203F);
  font-family: var(--x-font-sans);
  font-size: 15px;
  outline: none;
}

.x-cmd-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow-y: auto;
}

.x-cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  min-height: 44px;
  border-radius: var(--x-radius-ctrl, 4px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--x-text-main, #00203F);
  text-align: left;
  cursor: pointer;
}

.x-cmd-item:hover,
.x-cmd-item.is-selected {
  background: var(--x-chip-active-bg, rgba(252, 103, 53, 0.10));
  border-color: var(--x-primary, #FC6735);
}

.x-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 767px) {
  .x-launcher-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}