/* PBI 8754 — Pomoć na ekranu (ScreenHelp + ScreenHelpInfo). Globalno linkovano u Pages/_Host.cshtml jer se
   komponenta ugrađuje na mnogo ekrana. Port iz projects/PBI-8754-screen-help-panel/design/ na --is-* tokene.
   Prefiks sh- (ne bi- — kolizija sa Bootstrap Icons). */

/* ---- Dugme u zaglavlju ekrana ---- */
.sh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: var(--is-radius-md);
  border: 1px solid var(--is-brand-blue-300);
  background: var(--is-bg-surface, #fff);
  color: var(--is-brand-blue-700);
  font: 700 13.5px var(--is-font-sans);
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sh-btn:hover { background: var(--is-brand-blue-100); border-color: var(--is-brand-blue); }
.sh-btn:focus-visible { outline: 2px solid var(--is-brand-blue); outline-offset: 2px; }
.sh-btn i { flex-shrink: 0; font-size: 16px; }
.sh-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sh-btn__count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--is-brand-blue);
  color: #fff;
  font: 700 11px var(--is-font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sh-btn--open,
.sh-btn--open:hover { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.sh-btn--open .sh-btn__count { background: #fff; color: var(--is-brand-blue-700); }

/* ---- Panel ---- */
.sh-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 50, .18);
  z-index: 1059;
}
.sh-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--is-bg-surface, #fff);
  border-left: 1px solid var(--is-border-1);
  box-shadow: -12px 0 32px rgba(20, 28, 50, .12);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  font-family: var(--is-font-sans);
  color: var(--is-fg-1);
  outline: none;
  text-align: left;
}
.sh-panel__head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--is-border-1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.sh-panel__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sh-panel__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--is-brand-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-panel__title { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sh-panel__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--is-radius-sm);
  border: 1px solid var(--is-border-1);
  background: var(--is-bg-surface, #fff);
  color: var(--is-fg-2);
  cursor: pointer;
}
.sh-panel__close:hover { background: var(--is-bg-surface-3, #f8f9fa); }
.sh-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: thin;
}
.sh-panel__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--is-border-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.sh-panel__foot a { font-weight: 700; color: var(--is-brand-blue-700); text-decoration: none; white-space: nowrap; }
.sh-panel__foot a:hover { text-decoration: underline; }
.sh-panel__foot i { font-size: 11px; margin-left: 4px; }
.sh-panel__lang { font-size: 11.5px; color: var(--is-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Sekcije ---- */
.sh-section { display: flex; flex-direction: column; gap: 10px; }
.sh-section__title { margin: 0; font-size: 13px; font-weight: 800; color: var(--is-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-summary { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--is-fg-1); }

/* ---- Kartica uputstva ---- */
.sh-guide {
  border: 1px solid var(--is-border-1);
  border-radius: var(--is-radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sh-guide__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--is-fg-3); }
.sh-guide__title { font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--is-fg-1); text-decoration: none; }
.sh-guide__title:hover { color: var(--is-brand-blue-700); text-decoration: underline; }
.sh-guide__meta { font-size: 12px; color: var(--is-fg-3); }
.sh-guide__open {
  height: 38px;
  border-radius: var(--is-radius-md);
  background: var(--is-brand-blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.sh-guide__open:hover { background: var(--is-brand-blue-700); color: #fff; }
.sh-guide__open i { font-size: 12px; }

.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-chips__label { font-size: 11.5px; color: var(--is-fg-3); margin-right: 2px; white-space: nowrap; }
.sh-chip {
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--is-brand-blue-700);
  background: var(--is-brand-blue-100);
  border-radius: 999px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-chip:hover { background: var(--is-brand-blue-200, #cfe4f4); color: var(--is-brand-blue-700); }

/* ---- Lista novosti / dodatnih uputstava ---- */
.sh-news {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--is-radius-md);
  border: 1px solid var(--is-border-1);
  background: var(--is-bg-surface-3, #f8f9fa);
  color: var(--is-fg-1);
  text-decoration: none;
}
.sh-news:hover { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); color: var(--is-fg-1); }
.sh-news__icon { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--is-brand-blue); }
.sh-news__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-news__title { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.sh-news__date { font-size: 11.5px; color: var(--is-fg-3); }

/* ---- Ekrani sa tabovima: prekidač „Ovaj tab / Cijeli ekran" + pretraga (fiksno, skroluje samo lista) ---- */
.sh-panel__head:has(+ .sh-panel__controls) { border-bottom: none; padding-bottom: 14px; }
.sh-panel__controls {
  padding: 0 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--is-border-1);
  box-shadow: 0 6px 10px -8px rgba(20, 28, 50, .35);
  position: relative;
  z-index: 2;
  background: var(--is-bg-surface, #fff);
}
.sh-segs { display: flex; gap: 4px; padding: 4px; background: var(--is-bg-surface-2, #eef1f5); border-radius: var(--is-radius-md); }
.sh-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  border: none;
  border-radius: var(--is-radius-sm);
  background: transparent;
  color: var(--is-fg-2);
  font: 700 12.5px var(--is-font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  cursor: pointer;
}
.sh-seg:hover { color: var(--is-brand-blue-700); }
.sh-seg:focus-visible { outline: 2px solid var(--is-brand-blue); outline-offset: 1px; }
.sh-seg--on { background: var(--is-bg-surface, #fff); color: var(--is-brand-blue-700); box-shadow: 0 1px 2px rgba(20, 28, 50, .12); }
.sh-seg__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sh-seg__count,
.sh-group__count {
  flex-shrink: 0;
  font: 700 10.5px var(--is-font-mono);
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--is-brand-blue-100);
  color: var(--is-brand-blue-700);
}
.sh-seg:not(.sh-seg--on) .sh-seg__count { background: var(--is-bg-surface, #fff); }

.sh-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--is-border-2);
  border-radius: var(--is-radius-sm);
  background: var(--is-bg-surface, #fff);
}
.sh-search:focus-within { border-color: var(--is-brand-blue); box-shadow: 0 0 0 2px rgba(4, 148, 218, .10); }
.sh-search i { font-size: 13px; color: var(--is-fg-3); }
.sh-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 13px var(--is-font-sans);
  color: var(--is-fg-1);
}

/* ---- „Cijeli ekran": grupe po tabu, zaglavlja grupa se lijepe uz vrh liste ---- */
.sh-panel__body--groups { padding: 0 0 12px; gap: 0; }
.sh-group {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px;
  background: var(--is-bg-surface-3, #f8f9fa);
  border-bottom: 1px solid var(--is-border-1);
  box-shadow: 0 -1px 0 var(--is-border-1);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--is-fg-2);
  outline: none;
}
.sh-group__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sh-group--current { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }
.sh-group--current .sh-group__count { background: var(--is-bg-surface, #fff); }
.sh-group__current { margin-left: auto; font-size: 10.5px; letter-spacing: 0; text-transform: none; white-space: nowrap; }

.sh-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 22px;
  color: var(--is-fg-1);
  text-decoration: none;
}
.sh-item:hover { background: var(--is-brand-blue-100); color: var(--is-fg-1); }
.sh-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-item__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.sh-item__kind { font-size: 11.5px; color: var(--is-fg-3); }
.sh-type {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 4px;
  font: 700 10px var(--is-font-mono);
}
.sh-type--guide { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }
.sh-type--news { background: #fdf1d8; color: #8a5a00; }
.sh-hit { padding: 0 1px; border-radius: 2px; background: #fde68a; color: inherit; }
.sh-hit:empty { display: none; }
.sh-more {
  align-self: flex-start;
  margin: 2px 22px 8px;
  padding: 0;
  border: none;
  background: none;
  font: 700 12.5px var(--is-font-sans);
  color: var(--is-brand-blue-700);
  cursor: pointer;
}
.sh-more:hover { text-decoration: underline; }
.sh-empty { margin: 0; padding: 18px 22px; font-size: 13px; color: var(--is-fg-3); }

/* ---- „Ostali tabovi na ovom ekranu" (pogled Ovaj tab) ---- */
.sh-tablink {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--is-border-1);
  border-radius: var(--is-radius-md);
  background: var(--is-bg-surface, #fff);
  font: 700 13px var(--is-font-sans);
  color: var(--is-fg-1);
  text-align: left;
  cursor: pointer;
}
.sh-tablink:hover { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.sh-tablink__title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sh-tablink i { font-size: 11px; color: var(--is-fg-3); }

/* ---- Dugme u redu sa tabovima (TabControl__V1 TabBarEnd, npr. karton zaposlenika) ----
   Niže od dugmeta u zaglavlju, da ne podiže red tabova; ispod ~1400px samo ikona + broj (labela u tooltipu). */
.nav-wrapper__end .sh-btn { height: 34px; padding: 0 10px 0 12px; font-size: 13px; }
@media (max-width: 1399.98px) {
  .nav-wrapper__end .sh-btn { padding: 0 8px; gap: 6px; }
  .nav-wrapper__end .sh-btn__label { display: none; }
}

/* ---- ⓘ uz pojam (ScreenHelpInfo) ---- */
.sh-info {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--is-brand-blue-100);
  color: var(--is-brand-blue-700);
  align-items: center;
  justify-content: center;
  font: 800 11px var(--is-font-sans);
  font-style: normal;
  text-decoration: none;
  margin-left: 6px;
  vertical-align: middle;
}
.sh-info:hover { background: var(--is-brand-blue); color: #fff; text-decoration: none; }

@media (max-width: 600px) {
  .sh-panel { width: 100vw; }
  .sh-btn__label { display: none; }
}

/* =========================================================================
   PBI 9099 — ScreenHelpSnippetInfo: ⓘ uz kontrolu + popup sa isječkom uputstva.
   Port 1:1 iz projects/PBI-9099-shift-calc-settings-redesign/design/InfoPopup + InfoUnavailable.
   Vrijednosti iz mockupa su pinovane (ne tokeni) da popup izgleda isto bez obzira na redoslijed token-fajlova.
   ========================================================================= */
.sh-snip-btn {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #097cb9;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}
.sh-snip-btn i { font-size: 14px; line-height: 1; }
.sh-snip-btn:hover { color: #066894; background: #e6f4fb; }
.sh-snip-btn:focus-visible { outline: 2px solid #3cc4d8; outline-offset: 1px; }

.sh-snip-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 29, 69, .35);
  z-index: 10060;
}

/* Centrirano vertikalno i horizontalno — raste podjednako gore i dole. */
.sh-snip-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10070;
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(20, 28, 50, .35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: #1a1f2e;
  text-align: left;
  white-space: normal;
  cursor: default;
}
.sh-snip-dialog *, .sh-snip-dialog *::before, .sh-snip-dialog *::after { box-sizing: border-box; }
.sh-snip-dialog--na {
  width: min(520px, calc(100vw - 32px));
}

.sh-snip-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e6e9ef;
  flex-shrink: 0;
}
.sh-snip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e6f4fb;
  color: #066894;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sh-snip-icon i { font-size: 17px; }
.sh-snip-icon--na { background: #f0f2f4; color: #4a5468; }
.sh-snip-headtext { flex: 1; min-width: 0; }
.sh-snip-title { margin: 0; font: 700 18px 'Plus Jakarta Sans', Arial, sans-serif; color: #191d45; }
.sh-snip-sub {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px 'Plus Jakarta Sans', Arial, sans-serif;
  color: #5f6b80;
}
.sh-snip-sub i { font-size: 12px; }
.sh-snip-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #4a5468;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.sh-snip-x i { font-size: 17px; }
.sh-snip-x:hover { background: #f0f2f4; }

/* Tijelo — tipografija sanitizovanog HTML-a iz uputstva (h4, p, code, ul/ol, table). */
.sh-snip-body { padding: 4px 22px 20px; max-height: 520px; overflow: auto; }
.sh-snip-body h4 { font: 700 13px 'Plus Jakarta Sans', Arial, sans-serif; color: #191d45; margin: 18px 0 6px; }
.sh-snip-body p { font: 400 14px/1.6 'Plus Jakarta Sans', Arial, sans-serif; color: #1a1f2e; margin: 0; }
.sh-snip-body p + p { margin-top: 8px; }
.sh-snip-body > :first-child { margin-top: 18px; }
.sh-snip-body ul, .sh-snip-body ol { margin: 6px 0 0; padding-left: 20px; font: 400 14px/1.6 'Plus Jakarta Sans', Arial, sans-serif; color: #1a1f2e; }
.sh-snip-body b, .sh-snip-body strong { font-weight: 700; }
.sh-snip-body a { color: #066894; }
.sh-snip-body a:hover { color: #191d45; }
.sh-snip-body code {
  font: 600 12px 'JetBrains Mono', monospace;
  background: #f0f2f4;
  border: 1px solid #e6e9ef;
  border-radius: 4px;
  padding: 1px 5px;
  color: #191d45;
  white-space: nowrap;
}
.sh-snip-body table {
  width: 100%;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.sh-snip-body th {
  background: #fafafb;
  padding: 8px 12px;
  text-align: left;
  font: 700 12px 'Plus Jakarta Sans', Arial, sans-serif;
  color: #4a5468;
}
.sh-snip-body td {
  padding: 8px 12px;
  border-top: 1px solid #e6e9ef;
  font: 500 13px 'Plus Jakarta Sans', Arial, sans-serif;
  color: #1a1f2e;
}
.sh-snip-body thead + tbody tr:first-child td { border-top: 1px solid #e6e9ef; }
/* Hover reda — ista plavkasta nijansa kao V2 tabele (.ar-table tbody tr:hover), ne globalni tamnosivi hover. */
.sh-snip-body table tr,
.sh-snip-body table tr:hover { background: transparent !important; }
.sh-snip-body table tbody tr:hover td { background: rgba(0, 123, 255, .04) !important; }
.sh-snip-body table thead tr:hover th { background: #fafafb !important; }

.sh-snip-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e6e9ef;
  background: #fafafb;
  flex-shrink: 0;
}
.sh-snip-foot--end { justify-content: flex-end; }
.sh-snip-spacer { flex: 1; }
.sh-snip-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px 'Plus Jakarta Sans', Arial, sans-serif;
  text-decoration: none;
  color: #066894;
}
.sh-snip-guide:hover { color: #191d45; text-decoration: none; }
.sh-snip-guide i { font-size: 12px; }
.sh-snip-btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #d6d5d5;
  background: #fff;
  color: #4a5468;
  font: 600 13px 'Plus Jakarta Sans', Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.sh-snip-btn-ghost:hover { background: #fafafb; }

.sh-snip-na { padding: 22px; display: flex; gap: 14px; align-items: flex-start; }
.sh-snip-na__icon { color: #5f6b80; flex-shrink: 0; margin-top: 1px; }
.sh-snip-na__t { margin: 0; font: 600 14px 'Plus Jakarta Sans', Arial, sans-serif; color: #1a1f2e; }
.sh-snip-na__d { margin: 6px 0 0; font: 400 13px/1.55 'Plus Jakarta Sans', Arial, sans-serif; color: #4a5468; }