/*
 * ekatastar-theme.css
 * UI theme override za eKatastar aplikaciju.
 * Loaduje se POSLE easyui.css i ekatastar.css — sve izmene koriste !important.
 * Originalni fajlovi (ekatastar.css, easyui.css) se NE MENJAJU.
 *
 * Komponente:
 *   1. Top language bar
 *   2. Page header
 *   3. Section title bars
 *   4. Dugmad (.prijava, .pretrazi)
 *   5. Form inputs
 *   6. Body pozadina + font
 *   7. EasyUI Panel headers
 *   8. EasyUI Accordion sidebar
 *   9. EasyUI Tabs header
 *  10. EasyUI DataGrid headers + rows
 *  11. EasyUI Buttons (a.l-btn) + Toolbar
 */

/* =====================================================
   KOMPONENTA 1: Top language bar
   ===================================================== */
.toplanguage {
  background-color: #8B0000 !important;
  background: #8B0000 !important;
}
.toplanguageBottom {
  background: linear-gradient(0deg, #8B0000, #B22222) !important;
}

/* =====================================================
   KOMPONENTA 2: Page header
   ===================================================== */
.headerRow .header {
  background-color: #B22222 !important;
  /* Pozadinska slika se zadrzava radi brendinga */
}
.min-naslov {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px !important;
}

/* =====================================================
   KOMPONENTA 3: Section title bars
   ===================================================== */
.rowSectionTitle,
.rowSectionTitle[style],
.KatRowSectionTitle {
  background: transparent !important;
  background-color: transparent !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 0 8px 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 2px solid #B22222 !important;
  letter-spacing: -0.1px !important;
  text-transform: none !important;
  display: block !important;
  width: fit-content !important;
}
/* Parcijalni bgcolor TD override (ne moze zameniti HTML attr u potpunosti,
   ali smanjuje vizuelni efekat u modernim pretrazivaciima) */
td[bgcolor="#BB0009"] { background-color: #B22222 !important; }
td[bgcolor="#E1B93D"] { background-color: #B22222 !important; color: #fff !important; }
td[bgcolor="#ff0000"] { background-color: #CC0000 !important; }

/* =====================================================
   KOMPONENTA 4: Dugmad (.prijava, .pretrazi)
   ===================================================== */
body input[type=button].prijava,
body input[type=submit].prijava,
body input[type=button].pretrazi,
body input[type=submit].pretrazi {
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 42px !important;
  padding: 0 28px !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(178, 34, 34, 0.3) !important;
  transition: opacity 0.2s !important;
}
body input[type=button].prijava:hover,
body input[type=submit].prijava:hover,
body input[type=button].pretrazi:hover,
body input[type=submit].pretrazi:hover {
  opacity: 0.88 !important;
}

/* Pretraži EasyUI linkbutton */
body a.pretrazi,
body a.l-btn.pretrazi {
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 22px !important;
  height: 36px !important;
  line-height: 36px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(178, 34, 34, 0.25) !important;
}
body a.pretrazi:hover,
body a:hover.l-btn.pretrazi {
  opacity: 0.88 !important;
}
body a.pretrazi .l-btn-text,
body a.l-btn.pretrazi .l-btn-text {
  background-image: none !important;
  padding-left: 0 !important;
  color: #FFFFFF !important;
}

/* =====================================================
   KOMPONENTA 5: Form inputs
   ===================================================== */
input[type=text],
input[type=password],
select,
textarea {
  border: 1.5px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  background: #F9FAFB !important;
  color: #111827 !important;
  height: 40px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}
select {
  height: 40px !important;
  cursor: pointer !important;
}
textarea {
  height: auto !important;
  min-height: 70px !important;
}
input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border-color: #B22222 !important;
  outline: none !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.10) !important;
}

/* =====================================================
   KOMPONENTA 6: Body pozadina + font (globalni override Verdane)
   ===================================================== */
body {
  background: #F4F4F4 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
body td,
body th,
body label,
body span:not([class*="l-btn"]):not([class*="icon-"]),
body div:not([class*="l-btn"]):not([class*="panel"]):not([class*="tabs"]):not([class*="datagrid"]),
body p,
body li {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* =====================================================
   KOMPONENTA 7: EasyUI Panel headers — moderan card stil
   ===================================================== */
/* Globalni panel header: bijela pozadina, crveni bold naslov, crveni donji border */
.panel-header {
  background: #FFFFFF !important;
  border-color: #E8EAED !important;
  border-bottom: 2px solid #B22222 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
}
.panel-title {
  color: #B22222 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: -0.1px !important;
}
.panel-body {
  border-color: #E8EAED !important;
  background: #FFFFFF !important;
}

/* Card look — standalone easyui-panel (nije unutar layout regiona) */
.easyui-panel.panel:not(.layout-panel-west):not(.layout-panel-east):not(.layout-panel-north):not(.layout-panel-center):not(.layout-panel-south) {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09) !important;
  border: 1px solid #E8EAED !important;
  margin: 0 8px 20px 8px !important;
}

/* Center region bijela pozadina */
.layout-panel-center > .panel > .panel-body {
  background: #FFFFFF !important;
}
/* Paneli unutar center regiona: force full-width */
.layout-panel-center .panel-body > .panel,
.layout-panel-center .panel-body > .panel > .panel-header {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.layout-panel-center .panel-body > .panel > .panel-body {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}

/* =====================================================
   KOMPONENTA 8: EasyUI Accordion sidebar (inside iframe)
   — bijela pozadina, konzistentna sa outer sidebarom
   ===================================================== */
.accordion {
  background: #FAFAFA !important;
}
.accordion .accordion-header {
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
}
.accordion .accordion-header .panel-title {
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}
.accordion .accordion-header-selected {
  background: linear-gradient(135deg, #B22222 0%, #8B1A1A 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
.accordion .accordion-header-selected .panel-title {
  color: #FFFFFF !important;
}
.accordionSubItem {
  background: #FFFFFF !important;
  border-bottom: 1px solid #F3F4F6 !important;
  padding: 1px 0 !important;
}
.accordionSubItem:hover {
  background: #FEF2F2 !important;
}
a.accordionLink:link,
a.accordionLink:visited {
  color: #374151 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  display: block !important;
}
a.accordionLink:hover {
  color: #B22222 !important;
  font-weight: 600 !important;
}
/* West region panel body */
.layout-panel-west .panel-body {
  background: #FAFAFA !important;
}

/* =====================================================
   KOMPONENTA 9: EasyUI Tabs header
   ===================================================== */
.tabs-header {
  background: #F5F5F5 !important;
  border-color: #E0E0E0 !important;
  border-bottom: 2px solid #B22222 !important;
}
.tabs {
  border-bottom-color: #B22222 !important;
}
.tabs li {
  border-color: #DDDDDD !important;
}
.tabs li a.tabs-inner {
  background: #EEEEEE !important;
  color: #555555 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
}
.tabs li a.tabs-inner:hover {
  background: #E0E0E0 !important;
  color: #222222 !important;
}
.tabs li.tabs-selected a.tabs-inner {
  background: #FFFFFF !important;
  color: #B22222 !important;
  font-weight: 600 !important;
  border-top: 2px solid #B22222 !important;
}

/* =====================================================
   KOMPONENTA 10: EasyUI DataGrid — moderan, �ist dizajn
   ===================================================== */

/* === DataGrid width fix ===
   Korijen problema: EasyUI radi parseInt('100%') = 100, pa datagrid
   inicijalizuje sa width:100px. JS zatim setuje datagrid-header i
   datagrid-body na 100px inline. Naša CSS pravila ispravno popunjavaju
   sve slojeve od wrap do header/body.

   Lanac: wrap(100%) → datagrid(100%) → view(100%) → view2(auto, right:0)
          → header(100%) i body(100%) = uvijek isti width = poravnanje ✓ */
.datagrid-wrap { width: 100% !important; }
.datagrid { width: 100% !important; }
.datagrid-view { width: 100% !important; }
.datagrid-view2 { right: 0 !important; width: auto !important; }
/* KLJUÄŒNI FIX: header i body moraju biti isti width (100% view2) da se
   kolone ne raspadnu. EasyUI ih setuje na pogrešnih 100px inline. */
.datagrid-view2 .datagrid-header,
.datagrid-view2 .datagrid-body,
.datagrid-view2 .datagrid-footer { width: 100% !important; }

/* === DataGrid alignment fix ===
   box-sizing na ćelijama. table-layout i border-collapse se NE diraju —
   EasyUI interno njima upravlja i override bi poremetio kalkulacije. */
.datagrid-header td,
.datagrid-row td,
.datagrid-footer td {
  box-sizing: border-box !important;
}
.datagrid-cell {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.datagrid-header-inner {
  overflow: hidden !important;
}

/* Header — svjetlosivi, diskretni border, ne crveni */
.datagrid-header {
  background: #F5F7FA !important;
  border-bottom: 2px solid #E2E6EA !important;
}
.datagrid-header td {
  background: #F5F7FA !important;
  color: #374151 !important;
  border-right: 1px solid #E8ECEF !important;
  border-top: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  padding: 9px 10px !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
}
.datagrid-header td.datagrid-header-over {
  background: #EAECF0 !important;
}

/* Redovi */
.datagrid-row td {
  border-bottom: 1px solid #F0F2F5 !important;
  border-right: 1px solid #F0F2F5 !important;
  padding: 9px 10px !important;
  color: #374151 !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.datagrid-row-alt {
  background: #FFFFFF !important;
}
.datagrid-row-over {
  background: #FEF2F2 !important;
}
.datagrid-row-selected {
  background: #FEE2E2 !important;
  color: #7F1D1D !important;
  font-weight: 500 !important;
}
.datagrid-row-selected td {
  border-bottom-color: #FECACA !important;
  color: #7F1D1D !important;
}

.datagrid-cell {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  color: #374151 !important;
  text-overflow: ellipsis !important;
}

/* Row number kolona */
.datagrid-cell-rownumber {
  color: #9CA3AF !important;
  font-size: 11px !important;
}

/* Footer (suma redova) */
.datagrid-footer td {
  background: #F5F7FA !important;
  border-top: 2px solid #E2E6EA !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 9px 10px !important;
  vertical-align: middle !important;
}

/* Pager/paginacija — moderan */
.datagrid-pager {
  background: #FFFFFF !important;
  border-top: 1px solid #E8ECEF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  color: #6B7280 !important;
  padding: 6px 10px !important;
}
/* Paginacioni navigacioni dugmadi */
.datagrid-pager .pagination a.l-btn,
.pagination-btn a.l-btn,
.pagination a.l-btn {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #374151 !important;
  border-radius: 4px !important;
  height: 28px !important;
  min-width: 28px !important;
  line-height: 26px !important;
  padding: 0 7px !important;
  margin: 0 2px !important;
  font-size: 12px !important;
}
.datagrid-pager .pagination a.l-btn:hover,
.pagination a.l-btn:hover {
  background: #F3F4F6 !important;
  border-color: #9CA3AF !important;
}
/* Input za broj stranice */
.datagrid-pager input,
.pagination-num {
  border: 1px solid #D1D5DB !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  height: 24px !important;
  width: 50px !important;
  text-align: center !important;
}

/* Toolbar (npr. "Brisanje selekcije") */
.datagrid-toolbar {
  background: #FAFBFC !important;
  border-bottom: 1px solid #E8ECEF !important;
  padding: 5px 8px !important;
}

/* Sortiranje strelice */
.datagrid-sort-asc, .datagrid-sort-desc {
  color: #B22222 !important;
}

/* Scroll bar unutar DataGrid — vidljiv vertikalni i horizontalni */
.datagrid-body { scrollbar-width: thin; }
.datagrid-body::-webkit-scrollbar { height: 8px; width: 8px; }
.datagrid-body::-webkit-scrollbar-track { background: #F5F7FA; }
.datagrid-body::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
.datagrid-body::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* =====================================================
   KOMPONENTA 11: EasyUI Buttons (a.l-btn) + Toolbar
   ===================================================== */
a.l-btn {
  color: #FFFFFF !important;
  background: #B22222 !important;
  border: 1px solid #8B0000 !important;
  border-radius: 3px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
}
a:hover.l-btn {
  background: #8B0000 !important;
  border-color: #6B0000 !important;
}
a.l-btn .l-btn-left span.l-btn-text {
  color: #FFFFFF !important;
}
a.l-btn-disabled,
a.l-btn-disabled:hover {
  background: #CCCCCC !important;
  border-color: #BBBBBB !important;
  color: #888888 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}
/* =====================================================
   KOMPONENTA 11b: Sidebar navigacija (zamjena horizontal toolbara)
   ===================================================== */

/* Shell: flex red — sidebar lijevo, content desno */
.ek-page-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: calc(100vh - 76px) !important;
  overflow: hidden !important;
}

/* Lijevi sidebar — vertikalna navigacija */
.ek-toolbar {
  width: 270px !important;
  min-width: 270px !important;
  background: #FFFFFF !important;
  border-right: 3px solid #B22222 !important;
  border-bottom: none !important;
  border-top: none !important;
  padding: 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: width 0.22s ease, min-width 0.22s ease, padding 0.22s ease, border-width 0.22s ease !important;
}

/* Collapsed state — potpuno sakriva sidebar, desni deo se siri */
.ek-page-shell.sidebar-collapsed .ek-toolbar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right-width: 0 !important;
  overflow: hidden !important;
}

/* Hamburger dugme u top-baru */
.ek-sidebar-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  margin-right: 4px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.ek-sidebar-toggle:hover {
  background: #F3F4F6;
  border-color: #B22222;
}
.ek-sidebar-toggle:focus { outline: none; box-shadow: 0 0 0 2px rgba(178,34,34,0.15); }
.ek-sidebar-toggle::before,
.ek-sidebar-toggle::after,
.ek-sidebar-toggle .bar {
  content: '';
  display: block;
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: #4B5563;
  border-radius: 1px;
  transition: background 0.15s ease;
}
.ek-sidebar-toggle::before { top: 11px; }
.ek-sidebar-toggle .bar { top: 50%; transform: translateY(-50%); }
.ek-sidebar-toggle::after { bottom: 11px; }
.ek-sidebar-toggle:hover::before,
.ek-sidebar-toggle:hover::after,
.ek-sidebar-toggle:hover .bar { background: #B22222; }

/* Ukloni ikonu i padding — vertikalni prikaz */
.ek-toolbar .l-btn-text {
  background-image: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
.ek-toolbar .l-btn-left {
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* Nav dugmad — puna širina, vertikalni blok */
.ek-toolbar a.l-btn,
body .ek-toolbar a.l-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #EEEEEE !important;
  border-radius: 0 !important;
  color: #333333 !important;
  padding: 10px 14px !important;
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
  font-weight: normal !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body .ek-toolbar a.l-btn:hover,
body .ek-toolbar a:hover.l-btn {
  background: #B22222 !important;
  background-color: #B22222 !important;
  border-color: #B22222 !important;
  color: #FFFFFF !important;
}
body .ek-toolbar a.l-btn .l-btn-text {
  color: inherit !important;
}
/* Dropdown strelica */
.ek-toolbar .m-btn-downarrow {
  border-left-color: #AAAAAA !important;
  float: right !important;
  margin-top: 2px !important;
}

/* Desna oblast — iframe content */
.ek-content-area {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
}

/* iframe — flex:1 u ek-content-area */
.searchFrame,
#searchFrame {
  flex: 1 !important;
  width: 100% !important;
  height: calc(100vh - 76px) !important;
  min-height: 400px !important;
  border: none !important;
  display: block !important;
}

/* =====================================================
   KOMPONENTA 14: Full-width responsive layout
   ===================================================== */

/* Topbar — bijela traka sa shadow-om */
.ek-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  padding: 0 24px !important;
  height: 64px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}
.ek-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ek-topbar-coat {
  height: 42px !important;
  width: auto !important;
  display: block !important;
}
.ek-topbar-brand {
  color: #B22222 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  text-decoration: none !important;
}
.ek-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.ek-topbar-user {
  color: #6B7280 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
}
.ek-logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  color: #FFFFFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.ek-logout-btn:hover {
  opacity: 0.88 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* Sakrij stari MNE header (tabla sa amblemom) */
#ek-legacy-header {
  display: none !important;
}

/* Ukloni stare box/border wrapper-e */
.pageWidth {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.body {
  width: auto !important;
}
.bodyMargin {
  width: 0 !important;
  display: none !important;
}
.bodyBorderLeft,
.bodyBorderRight {
  border: none !important;
  width: 0 !important;
  display: none !important;
}

/* Body margin reset (override leftmargin/topmargin HTML attr) */
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* md-page: garantovani padding za sve content stranice u iframe-u */
.md-page {
  padding: 28px 32px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Iframe — puna širina, visina od flex roditelja */
.searchFrame {
  width: 100% !important;
  border: none !important;
  display: block !important;
}

/* EasyUI layout u content JSP-ovima — puna širina */
.easyui-layout,
div[class="easyui-layout"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Datum bar u content JSP-ovima */
.datum {
  background: #F0F0F0 !important;
  border-bottom: 1px solid #DDD !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  color: #555 !important;
}

/* West region sidebar — fiksna širina 240px */
.layout-panel-west {
  width: 240px !important;
}

/* =====================================================
   KOMPONENTA 15: Search criteria linkovi — moderan pill stil
   ===================================================== */

/* Pill container */
.md-criteria-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* md-criteria-tab (zemljisna_knjiga.jsp stil) — neaktivan */
a.md-criteria-tab,
a.md-criteria-tab:link,
a.md-criteria-tab:visited,
a.md-criteria-tab:active {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  background: #F0F0F0 !important;
  border: 1.5px solid #DDDDDD !important;
  color: #555555 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
a.md-criteria-tab:hover {
  background: #E0E0E0 !important;
  color: #222222 !important;
  text-decoration: none !important;
}
a.md-criteria-tab.selected,
a.md-criteria-tab.selected:link,
a.md-criteria-tab.selected:visited,
a.md-criteria-tab.selected:hover,
a.md-criteria-tab.selected:active {
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Pill tab — neaktivan */
a.searchCriteriaLink,
a.searchCriteriaLink:link,
a.searchCriteriaLink:visited,
a.searchCriteriaLink:active {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  background: #F0F0F0 !important;
  border: 1.5px solid #DDDDDD !important;
  color: #555555 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
a.searchCriteriaLink:hover {
  background: #E0E0E0 !important;
  color: #222222 !important;
  text-decoration: none !important;
}

/* Pill tab — aktivan/selektovan */
a.selectedLink,
a.selectedLink:link,
a.selectedLink:visited,
a.selectedLink:hover,
a.selectedLink:active {
  display: inline-flex !important;
  align-items: center !important;
  height: 42px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

a.searchAreaLink:link,
a.searchAreaLink:visited,
a.searchAreaLink:hover,
a.searchAreaSubItemLink:link,
a.searchAreaSubItemLink:visited,
a.searchAreaSubItemLink:hover {
  color: #B22222 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  text-decoration: none !important;
}

/* =====================================================
   KOMPONENTA 16: Pretraži / Filtriraj button — ukloni sivi icon
   ===================================================== */
/* Ukloni l-btn-left span background (EasyUI gradient) */
a.pretrazi .l-btn-left,
a.l-btn.pretrazi .l-btn-left {
  background: transparent !important;
  background-image: none !important;
}
/* Ukloni icon background-image i padding sa tekst spana */
a.pretrazi .l-btn-text,
a.l-btn.pretrazi .l-btn-text,
a.pretrazi span[class*="icon-"],
a.l-btn.pretrazi span[class*="icon-"] {
  background-image: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #FFFFFF !important;
}
/* Osiguraj da inline style="padding-left:20px" (EasyUI) bude poništen */
a.pretrazi .l-btn-text[style],
a.l-btn.pretrazi .l-btn-text[style] {
  padding-left: 0 !important;
}
/* Centriraj tekst u dugmetu — svi nivoi EasyUI span chain-a */
body a.pretrazi,
body a.l-btn.pretrazi {
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body a.pretrazi .l-btn-left,
body a.l-btn.pretrazi .l-btn-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  float: none !important;
}
body a.pretrazi .l-btn-text,
body a.l-btn.pretrazi .l-btn-text {
  display: block !important;
  text-align: center !important;
  width: auto !important;
  float: none !important;
}

/* =====================================================
   KOMPONENTA 17: EasyUI textbox / input wrapperi
   — bijela pozadina, sistemski font
   ===================================================== */
.textbox {
  border: 1px solid #CCCCCC !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.textbox:focus-within,
.textbox-focused {
  border-color: #B22222 !important;
  box-shadow: 0 0 0 2px rgba(178,34,34,0.12) !important;
}
.textbox-text,
input.textbox-text {
  background: #FFFFFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  color: #333333 !important;
  border: none !important;
  outline: none !important;
}
/* Chrome autofill override — sprje�ava plavi�astu pozadinu */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #333333 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* EasyUI numberbox, searchbox inner input */
.numberbox, .searchbox-text {
  background: #FFFFFF !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
}

/* =====================================================
   KOMPONENTA 18: Table-based form styling (dv-table / searchInputArea)
   ===================================================== */

/* Form table reset */
table.dv-table {
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}
table.dv-table td {
  padding: 5px 10px !important;
  vertical-align: middle !important;
  border: 0 !important;
  background: transparent !important;
}

/* Labels — desno poravnani, sivi, manji font */
span.leftsmall,
table.dv-table label span.leftsmall {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  text-align: right !important;
}

/* Input fields unutar formi — konzistentna visina i izgled */
table.dv-table input[type=text],
table.dv-table input[type=password],
.searchInputArea input[type=text],
.searchInputArea input[type=password] {
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  min-width: 160px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}
table.dv-table input[type=text]:focus,
table.dv-table input[type=password]:focus,
.searchInputArea input[type=text]:focus {
  border-color: #B22222 !important;
  box-shadow: 0 0 0 2px rgba(178,34,34,0.12) !important;
  outline: none !important;
}

/* Select elementi u formama */
table.dv-table select,
.searchInputArea select {
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}
table.dv-table select:focus,
.searchInputArea select:focus {
  border-color: #B22222 !important;
  outline: none !important;
}

/* Calendar trigger dugme (jQuery UI datepicker) */
.ui-datepicker-trigger {
  vertical-align: middle !important;
  margin-left: 5px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  width: 20px !important;
  height: 20px !important;
}
.ui-datepicker-trigger:hover {
  opacity: 1 !important;
}

/* "obriši" i sli�ni akcioni linkovi uz inpute */
a.detaljiLink,
a[onclick*="deleteDate"],
a[onclick*="obrisi"] {
  font-size: 11px !important;
  color: #B22222 !important;
  text-decoration: none !important;
  margin-left: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  opacity: 0.8 !important;
  vertical-align: middle !important;
}
a.detaljiLink:hover,
a[onclick*="deleteDate"]:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}

/* Panel body padding — daje prostora formi unutar card-a */
.easyui-panel.panel:not(.layout-panel-west):not(.layout-panel-east):not(.layout-panel-north):not(.layout-panel-center):not(.layout-panel-south) > .panel-body {
  padding: 16px 20px !important;
}

/* topMargin spacing klase */
.topMargin15 { margin-top: 15px !important; }
.topMargin40 { margin-top: 24px !important; }

/* =====================================================
   KOMPONENTA 19: EasyUI Menu / Menubutton dropdown
   ===================================================== */

/* Popup menu kontejner */
.menu {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
  min-width: 200px !important;
}

/* Svaka stavka menija */
.menu-item {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  color: #374151 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.menu-item td {
  padding: 9px 18px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  color: #374151 !important;
  white-space: nowrap !important;
}

/* Nested menu header (span) — izgleda kao section header */
.menu-item > span,
.menu-item td > span:first-child:not(.menu-arrow) {
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #B22222 !important;
}

/* Hover stanje */
.menu-item-hover {
  background: #FEF2F2 !important;
}
.menu-item-hover td {
  color: #B22222 !important;
  font-weight: 500 !important;
}

/* Separator */
.menu-sep {
  background: #F3F4F6 !important;
  margin: 4px 12px !important;
  height: 1px !important;
  border: none !important;
}

/* Submenu arrow */
.menu-item span.menu-arrow {
  color: #D1D5DB !important;
  font-size: 11px !important;
}
.menu-item-hover span.menu-arrow {
  color: #B22222 !important;
}

/* Nested popup (submenu) */
.menu-top {
  border-radius: 12px !important;
}

/* Menubutton trigger button u topbaru */
.easyui-menubutton,
a.easyui-menubutton {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  transition: background 0.15s !important;
}
.easyui-menubutton:hover,
a.easyui-menubutton:hover {
  background: #FEF2F2 !important;
  color: #B22222 !important;
}
.m-btn-active .m-btn-plain-inner,
.easyui-menubutton.m-btn-active {
  background: #FEF2F2 !important;
  color: #B22222 !important;
  border-color: transparent !important;
}

/* =====================================================
   KOMPONENTA 17: Checkbox polja — inline row layout
   ===================================================== */

/* Globalni stil za sve checkbox inpute */
input[type=checkbox] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  accent-color: #B22222 !important;
  cursor: pointer !important;
  margin: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* PATTERN 1: md-field sa direktnim checkbox djetetom (SIMPLE)
   <div class="md-field"><label class="md-label">...</label><input checkbox/></div> */
.md-field:has(> input[type=checkbox]) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.md-field:has(> input[type=checkbox]) .md-label,
.md-field:has(> input[type=checkbox]) > label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* PATTERN 2: md-field sa nested checkbox unutar inner div-a — sakrij duplikat md-label
   <div class="md-field"><label class="md-label">X</label><div flex><checkbox><label>X</label></div></div> */
.md-field:has(> div > input[type=checkbox]) > .md-label {
  display: none !important;
}
.md-field:has(> div > input[type=checkbox]) {
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 !important;
}
.md-field:has(> div > input[type=checkbox]) > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: 0 !important;
}
.md-field:has(> div > input[type=checkbox]) > div > label {
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* PATTERN 3: md-form-group sa checkbox
   <div class="md-form-group"><label>...</label><input checkbox/></div> */
.md-form-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 !important;
}
.md-form-group label {
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* md-checkbox-row — već ispravno, samo poja�aj */
.md-checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.md-checkbox-row label {
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* filter-row checkbox */
.filter-row input[type=checkbox] {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
}

/* =====================================================
   KOMPONENTA 18: jQuery UI Datepicker — moderan dizajn
   ===================================================== */

/* Wrapper */
.ui-datepicker {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
  padding: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  width: 280px !important;
}

/* Header (naslov sa navigacijom) */
.ui-datepicker .ui-datepicker-header {
  background: #B22222 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 4px !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
}

/* Prev / Next strelice */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev { left: 4px !important; }
.ui-datepicker .ui-datepicker-next { right: 4px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: rgba(255,255,255,0.3) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: #ffffff !important;
}
.ui-datepicker .ui-datepicker-prev span::before { content: "‹" !important; }
.ui-datepicker .ui-datepicker-next span::before { content: "›" !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Naslov — selekti za mjesec i godinu */
.ui-datepicker .ui-datepicker-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 28px !important;
  margin: 0 36px !important;
}
.ui-datepicker .ui-datepicker-title select,
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  height: auto !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.ui-datepicker .ui-datepicker-title select option,
.ui-datepicker select.ui-datepicker-month option,
.ui-datepicker select.ui-datepicker-year option {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

/* Tabela dana */
.ui-datepicker table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Header row — dani u sedmici */
.ui-datepicker th {
  padding: 6px 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  border: none !important;
  background: none !important;
}

/* Ćelije dana */
.ui-datepicker td {
  border: none !important;
  padding: 2px !important;
}
.ui-datepicker td span,
.ui-datepicker td a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #111827 !important;
  text-decoration: none !important;
  background: none !important;
  border: 1px solid transparent !important;
  transition: background 0.15s, color 0.15s !important;
}
.ui-datepicker td a:hover {
  background: #FEF2F2 !important;
  color: #B22222 !important;
  border-color: #FECACA !important;
}

/* Danas */
.ui-datepicker .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-today span,
.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker td.ui-datepicker-today span {
  background: #FFF3F3 !important;
  color: #B22222 !important;
  border-color: #FECACA !important;
  font-weight: 700 !important;
}

/* Selektovani dan */
.ui-datepicker .ui-datepicker-current-day a,
.ui-datepicker td.ui-datepicker-current-day a,
.ui-state-active,
.ui-widget-content .ui-state-active {
  background: #B22222 !important;
  color: #ffffff !important;
  border-color: #8B0000 !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* Neaktivni dani (prethodni/sledeći mesec) */
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-datepicker-other-month a,
.ui-datepicker td.ui-datepicker-other-month span {
  color: #D1D5DB !important;
  background: none !important;
}

/* Ukloni stare ui-widget stilove koji remete izgled */
.ui-datepicker.ui-widget {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
.ui-datepicker .ui-widget-header {
  background-image: none !important;
  border: none !important;
}

/* =====================================================
   KOMPONENTA 18 FIX: Sakrij Prev/Next tekst, prikaži strelice
   ===================================================== */

/* Sakrij originalni tekst "Prev" i "Next" */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  position: relative !important;
  background-image: none !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* Prikaži strelice kroz ::before */
.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-next span::before {
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 28px !important;
  display: block !important;
  text-indent: 0 !important;
  text-align: center !important;
  width: 28px !important;
  height: 28px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.ui-datepicker .ui-datepicker-prev span::before { content: "‹" !important; }
.ui-datepicker .ui-datepicker-next span::before { content: "›" !important; }

/* Dugmad prev/next — centriranje */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 6px !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.ui-datepicker .ui-datepicker-prev { left: 6px !important; }
.ui-datepicker .ui-datepicker-next { right: 6px !important; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  top: 6px !important;
  transform: none !important;
}

/* =====================================================
   KOMPONENTA 19: md-* klase — globalna standardizacija
   Pobjeđuje sve inline <style> overrides u JSP fajlovima
   ===================================================== */

.md-btn-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 28px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  margin-top: 0 !important;
  transition: opacity 0.2s !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0.2px !important;
}
.md-btn-search:hover {
  opacity: 0.9 !important;
}

.md-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
}

.md-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin: 0 0 6px 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.md-title-line {
  width: 40px !important;
  height: 3px !important;
  background: #B22222 !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}

.md-subtitle {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #B22222 !important;
  margin: 0 0 4px 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.md-subtitle-line {
  width: 30px !important;
  height: 2px !important;
  background: #B22222 !important;
  border-radius: 2px !important;
  margin-bottom: 18px !important;
}

.md-label,
.md-field > label,
.md-field > .md-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.md-field input[type=text],
.md-field input[type=password],
.md-field select,
.md-field textarea {
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #111827 !important;
  background: #F9FAFB !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  outline: none !important;
}
.md-field input[type=text]:focus,
.md-field select:focus,
.md-field textarea:focus {
  border-color: #B22222 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(178,34,34,0.10) !important;
}

.md-date-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.md-date-wrap input[type=text] {
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}
.md-date-wrap .ui-datepicker-trigger {
  flex-shrink: 0 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}
.md-date-clear {
  font-size: 11px !important;
  color: #B22222 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.md-date-clear:hover {
  text-decoration: underline !important;
}

.md-form-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px 24px !important;
  margin-bottom: 20px !important;
}

/* Detail panel forma: fiksiraj levo i ogranici na sirinu ekrana */
.datagrid-row-detail .ddv {
  position: sticky !important;
  left: 8px !important;
  max-width: calc(100vw - 316px) !important;
  overflow: visible !important;
}
.datagrid-row-detail .md-form-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.md-field-full {
  grid-column: 1 / -1 !important;
}

.md-submit-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 22px 24px !important;
  margin-top: 4px !important;
}

.md-check-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}

.md-page {
  padding: 28px 32px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =====================================================
   KOMPONENTA 11 FIX: Samo .md-actions dugmad (ne sidebar)
   ===================================================== */

/* Aktivno dugme u md-actions */
.md-actions a.l-btn,
.md-actions a.l-btn:link,
.md-actions a.l-btn:visited {
  background: #B22222 !important;
  background-image: none !important;
  border: 1px solid #8B0000 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}
.md-actions a:hover.l-btn {
  background: #8B0000 !important;
  background-image: none !important;
  background-position: unset !important;
}
.md-actions a.l-btn span.l-btn-left,
.md-actions a:hover.l-btn span.l-btn-left {
  background: transparent !important;
  background-image: none !important;
  padding: 7px 14px !important;
  line-height: 1.4 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.md-actions a.l-btn span.l-btn-left span.l-btn-text {
  color: #ffffff !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.md-actions a.l-btn .l-btn-icon {
  filter: brightness(0) invert(1) !important;
}

/* Disabled stanje u md-actions */
.md-actions a.l-btn-disabled,
.md-actions a.l-btn-disabled:link,
.md-actions a.l-btn-disabled:visited,
.md-actions a.l-btn-disabled:hover {
  background: #E5E7EB !important;
  background-image: none !important;
  border-color: #D1D5DB !important;
  color: #9CA3AF !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
}
.md-actions a.l-btn-disabled span.l-btn-left,
.md-actions a.l-btn-disabled:hover span.l-btn-left {
  background: transparent !important;
  background-image: none !important;
}
.md-actions a.l-btn-disabled span.l-btn-left span.l-btn-text {
  color: #9CA3AF !important;
}
.md-actions a.l-btn-disabled .l-btn-icon {
  filter: grayscale(1) opacity(0.4) !important;
}

/* ============================================================
   KOMPONENTA 11c: md-btn-action — custom action buttons
   (zamjena za easyui-linkbutton u md-actions sekciji)
   ============================================================ */
.md-btn-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  transition: opacity 0.2s !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.md-btn-action:hover {
  opacity: 0.85;
  color: #fff !important;
  text-decoration: none !important;
}
.md-btn-action.disabled {
  background: #D1D5DB !important;
  color: #9CA3AF !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1 !important;
}
.md-btn-action.disabled:hover {
  background: #D1D5DB !important;
  color: #9CA3AF !important;
  opacity: 1 !important;
}

/* KOMPONENTA: md-btn-action danger variant */
.md-btn-action.danger {
  background: #fff !important;
  color: #B22222 !important;
  border: 1.5px solid #B22222 !important;
}
.md-btn-action.danger:hover {
  background: #FEF2F2 !important;
  color: #B22222 !important;
}

/* KOMPONENTA: filter-row (pretraga po broju parcele/blok) */
.filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.filter-row label {
  font-size: 12px !important;
  color: #6B7280 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
/* EasyUI validatebox override for filter-row */
.filter-row .validatebox-text,
.filter-row span.validatebox-text {
  display: inline-flex !important;
  width: auto !important;
}
.filter-row input[type=text] {
  width: 140px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  background: #F9FAFB !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.filter-row input[type=text]:focus {
  border-color: #B22222 !important;
  background: #fff !important;
}

/* KOMPONENTA: inline row (broj predmeta) */
.md-inline-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
/* EasyUI validatebox wraps input in span.validatebox-text with display:block — override it */
.md-inline-row .validatebox-text,
.md-inline-row span.validatebox-text {
  display: inline-flex !important;
  width: 80px !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
}
.md-inline-row input[type=text] {
  width: 80px !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
  height: 40px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}
.md-inline-sep {
  font-size: 13px !important;
  color: #6B7280 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* KOMPONENTA: fragment form wrapper */
.md-form-wrapper {
  background: #fafafa;
  padding: 14px 16px;
  margin-top: 5px;
  border-radius: 8px;
}

/* KOMPONENTA: EasyUI messager/dialog redesign */
.window {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
}
.window-shadow {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border-radius: 12px !important;
  background: transparent !important;
}
.window .window-header {
  padding: 0 !important;
  background: transparent !important;
}
.window .window-header .panel-header {
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  border: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 16px !important;
}
.window .window-header .panel-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  background: none !important;
}
.window .window-header .panel-tool {
  top: 10px !important;
  right: 12px !important;
}
.window .window-header .panel-tool a {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  filter: none !important;
}
.window .window-header .panel-tool a:hover {
  background: rgba(255,255,255,0.45) !important;
}
.window .window-body {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: 4px 0 0 0 !important;
}
.messager-body {
  padding: 24px 24px 8px 24px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px !important;
  color: #1F2937 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.messager-icon {
  display: none !important;
}
.messager-button {
  padding: 16px 24px 24px 24px !important;
  text-align: center !important;
}
.messager-button a.l-btn,
.dialog-button a.l-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #C0392B 0%, #922B21 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.messager-button a.l-btn:hover,
.dialog-button a.l-btn:hover {
  opacity: 0.88 !important;
}
.messager-button a.l-btn:focus,
.dialog-button a.l-btn:focus {
  outline: none !important;
}
.messager-button a.l-btn span.l-btn-left,
.dialog-button a.l-btn span.l-btn-left {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.messager-button a.l-btn span.l-btn-left span.l-btn-text,
.dialog-button a.l-btn span.l-btn-left span.l-btn-text {
  padding: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* =====================================================
   EasyUI tabs width fix (kancelarijsko, akti, ...)
   Kad se tabs widget (#tabDetalji itd.) kreira unutar hidden
   kontejnera, EasyUI racuna sirinu kao 0. Forsira na 100% da
   se tabela unutra prosiri na pun prostor md-card-a.
   ===================================================== */
.md-card .easyui-tabs,
.md-card > [id^="tabDetalji"],
#tabDetalji {
	width: 100% !important;
	box-sizing: border-box !important;
}
#tabDetalji > .tabs-panels,
#tabDetalji > .tabs-header,
.md-card .easyui-tabs > .tabs-panels,
.md-card .easyui-tabs > .tabs-header {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Modern EasyUI datagrid loading mask */
.datagrid-mask {
	background: rgba(17, 24, 39, 0.35) !important;
	opacity: 1 !important;
	filter: none !important;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.datagrid-mask-msg {
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	height: auto !important;
	min-width: 220px;
	padding: 18px 24px 18px 56px !important;
	background: #ffffff !important;
	background-image: none !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	color: #1F2937 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2px;
	line-height: 1.3 !important;
	white-space: nowrap;
}
.datagrid-mask-msg::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	border: 2.5px solid rgba(178, 34, 34, 0.18);
	border-top-color: #B22222;
	animation: md-spin 0.8s linear infinite;
}
@keyframes md-spin {
	to { transform: rotate(360deg); }
}