/* Application overrides on top of vendored Tabler (never edit files under /lib). */
.gc-skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--tblr-bg-surface, #fff);
  border: 2px solid var(--tblr-primary);
  border-radius: var(--tblr-border-radius);
}

.gc-company-name {
  max-width: 14rem;
  display: inline-block;
  vertical-align: bottom;
}

@media (max-width: 575.98px) {
  .gc-company-name { max-width: 9rem; }
}

.gc-hash { font-size: .8rem; }

/* Visible keyboard focus everywhere (WCAG 2.4.7). */
:focus-visible {
  outline: 3px solid var(--tblr-primary);
  outline-offset: 2px;
}

main:focus { outline: none; }

/* M06: the main menu has 13 entries; on desktop keep each label on one line and let the bar scroll instead of wrapping. */
/* M08: the main menu is grouped in dropdowns, so it fits without horizontal scrolling (dropdowns must not be clipped). */
@media (min-width: 768px) {
    #navbar-menu .nav-link-title { white-space: nowrap; }
}

/* M06d: payroll template editor (the payslip page with the background image and clickable values). */
.gc-narrow { max-width: 46rem; }
.gc-payslip { position: relative; width: 100%; border: 1px solid var(--tblr-border-color); background: #fff; overflow: hidden; user-select: none; touch-action: none; }
.gc-payslip > img { position: absolute; pointer-events: none; opacity: .9; }
.gc-payslip .gc-word { position: absolute; padding: 0; margin: 0; border: 1px solid transparent; background: rgba(32, 107, 196, .08); color: transparent;
    font-size: 1px; line-height: 1; cursor: pointer; border-radius: 1px; }
.gc-payslip .gc-word:hover, .gc-payslip .gc-word:focus-visible { border-color: var(--tblr-primary); background: rgba(32, 107, 196, .25); outline: none; }
.gc-payslip .gc-box { position: absolute; border: 2px solid var(--tblr-green); background: rgba(47, 179, 68, .12); pointer-events: none; }
.gc-payslip .gc-box.gc-anchor { border-color: var(--tblr-orange); background: rgba(247, 103, 7, .15); }
.gc-payslip .gc-box.gc-area { border-style: dashed; border-color: var(--tblr-purple); background: rgba(174, 62, 201, .06); }
.gc-payslip .gc-box.gc-col { border-width: 0 0 0 2px; border-color: var(--tblr-purple); background: none; }
.gc-payslip .gc-box span { position: absolute; top: -1.2em; left: 0; font-size: .65rem; white-space: nowrap; background: var(--tblr-green); color: #fff; padding: 0 .25em; }
.gc-payslip .gc-box.gc-anchor span { background: var(--tblr-orange); }
.gc-payslip .gc-drag { position: absolute; border: 1px dashed var(--tblr-primary); pointer-events: none; }
.gc-field-list .list-group-item { padding: .35rem .75rem; }