/* H ZGRADE WEB 4.0.35 — nativni izgled usklađen s Windows aplikacijom */
:root {
  --hz-native-navy: #082f43;
  --hz-native-navy-2: #104d61;
  --hz-native-teal: #197a77;
  --hz-native-gold: #d5a43e;
  --hz-native-gold-soft: #efd89f;
  --hz-native-ink: #17394c;
  --hz-native-paper: rgba(255, 253, 247, .82);
  --hz-native-paper-strong: rgba(255, 253, 247, .94);
  --hz-native-line: rgba(196, 145, 44, .42);
  --hz-native-shadow: 0 18px 48px rgba(5, 33, 48, .18), 0 2px 8px rgba(5, 33, 48, .08);
  --hz-native-radius: 24px;
  --hz-native-radius-small: 14px;
  color-scheme: light;
}

html.hz-native-web,
html.hz-native-web body {
  min-width: 320px;
  min-height: 100%;
  color: var(--hz-native-ink);
  background: #5e9dc3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.hz-native-web {
  background-position: center bottom !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body.hz-native-web::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(123, 193, 231, .08), rgba(8, 37, 53, .14));
}

body.hz-native-web.hz-nighttime::after {
  background: linear-gradient(180deg, rgba(4, 24, 40, .15), rgba(2, 17, 30, .32));
}

body.hz-native-web #root,
body.hz-native-web .app {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body.hz-native-web .app {
  min-height: 100dvh !important;
  padding: clamp(12px, 1.4vw, 24px);
  gap: clamp(12px, 1.25vw, 22px);
}

body.hz-native-web .side {
  border: 1px solid rgba(238, 198, 113, .44) !important;
  border-radius: 28px !important;
  background: linear-gradient(165deg, rgba(8, 50, 69, .93), rgba(5, 38, 54, .86)) !important;
  box-shadow: var(--hz-native-shadow) !important;
  backdrop-filter: blur(18px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
  overflow: clip !important;
}

body.hz-native-web .side nav {
  padding-inline: 10px;
}

body.hz-native-web .side nav button,
body.hz-native-web .appearance-panel button,
body.hz-native-web .advanced-switch {
  min-height: 42px;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body.hz-native-web .side nav button:hover,
body.hz-native-web .side nav button:focus-visible {
  transform: translateX(2px);
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(238, 205, 137, .25) !important;
}

body.hz-native-web .side nav button.selected {
  color: #102f42 !important;
  background: linear-gradient(135deg, #f4deaa, #d8aa4e) !important;
  border-color: rgba(255, 243, 205, .85) !important;
  box-shadow: 0 8px 20px rgba(0, 24, 38, .22), inset 0 1px rgba(255,255,255,.7) !important;
}

body.hz-native-web .side nav button.selected .app-icon {
  color: #0b4960 !important;
}

body.hz-native-web .main {
  min-width: 0;
  border: 1px solid rgba(238, 198, 113, .34);
  border-radius: 28px;
  background: rgba(244, 248, 247, .13) !important;
  box-shadow: 0 22px 65px rgba(5, 33, 48, .16);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: clip !important;
}

body.hz-native-web .top {
  margin: 0 !important;
  padding: 10px 14px !important;
  min-height: 70px;
  border: 0 !important;
  border-bottom: 1px solid var(--hz-native-line) !important;
  border-radius: 27px 27px 18px 18px !important;
  background: linear-gradient(100deg, rgba(255,253,246,.95), rgba(238,244,242,.88)) !important;
  box-shadow: 0 8px 24px rgba(9, 48, 63, .10) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}

body.hz-native-web .page {
  padding: clamp(12px, 1.35vw, 24px) !important;
}

body.hz-native-web :is(.module-card,.dashboard-card,.summary-card,.hero-card,.personal-front-summary,.operational-readiness,.home-date-weather>*,.welcome,.module-titlebar,.real-building-registry,.content-card,.panel,.detail-panel,.guide,.section-head) {
  border-color: var(--hz-native-line) !important;
  border-radius: var(--hz-native-radius) !important;
  background: linear-gradient(145deg, rgba(255,253,247,.90), rgba(239,247,245,.76)) !important;
  box-shadow: var(--hz-native-shadow) !important;
  backdrop-filter: blur(15px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(110%) !important;
}

body.hz-native-web :is(.real-kpi,.mini-stat,.detail,.summary,.quick,.date-console,.weather-console,.meeting-notes-button,.top-personal-tools button,.profile-menu-trigger,.search,.search-scope,.company,.appearance-panel,.presence-mini,.profile-dropdown,.hz-building-card) {
  border-color: rgba(197, 149, 57, .34) !important;
  border-radius: var(--hz-native-radius-small) !important;
}

body.hz-native-web :is(input,select,textarea) {
  border: 1px solid rgba(179, 137, 58, .40) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--hz-native-ink) !important;
  box-shadow: inset 0 1px 2px rgba(11,48,63,.04) !important;
  outline: none;
}

body.hz-native-web :is(input,select,textarea):focus {
  border-color: var(--hz-native-teal) !important;
  box-shadow: 0 0 0 3px rgba(25,122,119,.14), inset 0 1px 2px rgba(11,48,63,.04) !important;
}

body.hz-native-web button,
body.hz-native-web a {
  -webkit-tap-highlight-color: transparent;
}

body.hz-native-web :is(button,.button,[role="button"]) {
  border-radius: 13px;
}

body.hz-native-web :is(.add-building-button,.letter-button,.import-button,.hz-inline-scan,.primary,.save-button) {
  border: 1px solid rgba(255, 240, 194, .75) !important;
  border-radius: 999px !important;
  color: #102f42 !important;
  background: linear-gradient(135deg, #f1d78f, #d7a33a) !important;
  box-shadow: 0 7px 18px rgba(124, 83, 18, .17), inset 0 1px rgba(255,255,255,.7) !important;
}

body.hz-native-web :is(.help-button,.notification,.hz-window-close,.profile-dropdown .logout) {
  border-radius: 50% !important;
}

body.hz-native-web table,
body.hz-native-web [class*="table"] {
  border-radius: 15px;
}

body.hz-native-web thead,
body.hz-native-web [class*="table"]>.head {
  color: #eef9f7;
  background: linear-gradient(90deg, var(--hz-native-navy), var(--hz-native-navy-2)) !important;
}

body.hz-native-web tbody tr:nth-child(even) {
  background: rgba(238, 224, 189, .20);
}

body.hz-native-web tbody tr:hover {
  background: rgba(48, 153, 143, .12);
}

.hz-web-version-chip {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 13px;
  border: 1px solid rgba(233, 195, 115, .55);
  border-radius: 999px;
  color: #f7e8bd;
  background: rgba(6, 45, 62, .88);
  box-shadow: 0 8px 25px rgba(3, 24, 36, .25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 750 10px/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}

.hz-web-version-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #73d7b0;
  box-shadow: 0 0 0 4px rgba(115,215,176,.12);
}

@media (max-width: 1180px) {
  body.hz-native-web .app { padding: 10px; gap: 10px; }
  body.hz-native-web .side,
  body.hz-native-web .main { border-radius: 22px !important; }
  body.hz-native-web .top { border-radius: 21px 21px 15px 15px !important; }
}

@media (max-width: 980px) {
  body.hz-native-web { background-attachment: scroll !important; }
  body.hz-native-web .app { display: block; padding: 0; }
  body.hz-native-web .main { border: 0; border-radius: 0 !important; min-height: 100dvh; }
  body.hz-native-web .top { position: sticky; top: 0; z-index: 120; border-radius: 0 0 18px 18px !important; }
  body.hz-native-web .page { padding: 12px !important; padding-bottom: 82px !important; }
  body.hz-native-web :is(.module-card,.dashboard-card,.summary-card,.hero-card,.personal-front-summary,.operational-readiness,.home-date-weather>*,.welcome,.module-titlebar) {
    border-radius: 19px !important;
  }
  .hz-web-version-chip { bottom: 72px; right: 12px; opacity: .86; }
}

@media (max-width: 620px) {
  body.hz-native-web .top { min-height: 58px; padding: 8px !important; }
  body.hz-native-web .page { padding: 9px !important; padding-bottom: 78px !important; }
  body.hz-native-web :is(.module-card,.dashboard-card,.summary-card,.hero-card,.personal-front-summary,.operational-readiness,.home-date-weather>*,.welcome,.module-titlebar) {
    border-radius: 17px !important;
    box-shadow: 0 10px 30px rgba(5,33,48,.14) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hz-native-web *, body.hz-native-web *::before, body.hz-native-web *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}