/* SPARK 2.0 component skins: Button, Chip, Switch, Table, Modal, Tabs, KPI */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-height-regular);
  padding: 0 var(--button-pad-x-regular);
  border-radius: var(--button-radius);
  border: 1px solid var(--border-secondary);
  background: var(--bg-elevation-2);
  color: var(--text-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--button-font-size-regular);
  white-space: nowrap;
  text-transform: none;
}

.btn:hover {
  background: var(--bg-base-hover);
  border-color: var(--border-tertiary);
}

.btn.p {
  background: var(--button-bg-default);
  border-color: var(--button-bg-default);
  color: var(--text-on-color);
}

.btn.p:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  filter: none;
}

.btn.s {
  height: var(--button-height-sm);
  padding: 0 var(--button-pad-x-sm);
  font-size: var(--button-font-size-sm);
}

.btn.d {
  color: var(--text-error);
  border-color: var(--chip-red-border);
}

.btn.d:hover,
.btn.p.d:hover,
.btn[data-act="delok"]:hover,
.btn[data-act="delok2"]:hover,
.btn[data-act="clearok"]:hover {
  background: var(--button-danger-hover);
  border-color: var(--button-danger-hover);
  color: var(--text-on-color);
}

.btn[disabled] {
  opacity: 1;
  cursor: not-allowed;
  background: var(--button-disable);
  border-color: var(--border-tertiary);
  color: var(--text-disable);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--chip-height);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border-radius: var(--chip-radius);
  background: var(--chip-generic-bg);
  border: 1px solid var(--chip-generic-border);
  color: var(--chip-label);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  line-height: 1;
}

.chip.g {
  background: var(--chip-green-bg);
  border-color: var(--chip-green-border);
  color: var(--chip-label);
}

.chip.a {
  background: var(--chip-yellow-bg);
  border-color: var(--chip-yellow-border);
  color: var(--chip-label);
}

.chip.r {
  background: var(--chip-red-bg);
  border-color: var(--chip-red-border);
  color: var(--chip-label);
}

.chip.p {
  background: var(--chip-brand-bg);
  border-color: var(--chip-brand-border);
  color: var(--chip-label);
}

.chip.b {
  background: var(--chip-blue-bg);
  border-color: var(--chip-blue-border);
  color: var(--chip-label);
}

.seg {
  display: flex;
  border: 1px solid var(--border-secondary);
  border-radius: var(--button-radius);
  overflow: hidden;
  background: var(--bg-elevation-2);
  height: var(--button-height-sm);
}

.seg button {
  padding: 0 12px;
  font-size: var(--button-font-size-sm);
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
  border-right: 1px solid var(--border-secondary);
  height: 100%;
}

.seg button:last-child {
  border: 0;
}

.seg button:hover {
  color: var(--text-heading);
  background: var(--bg-base-hover);
}

.seg button.on.p {
  background: var(--chip-green-bg);
  color: var(--chip-label);
  border-color: var(--chip-green-border);
}

.seg button.on.f {
  background: var(--chip-red-bg);
  color: var(--chip-label);
}

.seg button.on.n {
  background: var(--chip-generic-bg);
  color: var(--chip-label);
}

.sw {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--border-tertiary);
  position: relative;
  transition: 0.2s;
  flex: none;
}

.sw:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

.sw.on {
  background: var(--text-success);
}

.sw.on:after {
  left: 19px;
}

.ib {
  width: var(--icon-button-size-sm);
  height: var(--icon-button-size-sm);
  border-radius: var(--icon-button-radius);
  border: 0;
  color: var(--icon-secondary);
  display: grid;
  place-items: center;
  background: transparent;
}

.ib:hover {
  background: var(--bg-base-hover);
  color: var(--icon-primary);
}

.ib.on {
  color: var(--text-warning);
}

.ib sup {
  font-size: 9px;
  margin-left: 1px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: var(--table-header-font-size);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--table-cell-pad-x);
  height: var(--table-header-height);
  border-bottom: 1px solid var(--table-row-border);
  background: var(--table-head-bg);
  white-space: nowrap;
}

td {
  padding: 0 var(--table-cell-pad-x);
  height: var(--table-row-height);
  border-bottom: 1px solid var(--table-row-border);
  vertical-align: middle;
  font-size: var(--table-body-font-size);
  font-weight: var(--font-weight-regular);
  color: var(--text-body);
}

td b,
td .chip {
  color: var(--text-heading);
}

tr:hover td {
  background: var(--bg-base-hover);
}

tr:last-child td {
  border-bottom: 0;
}

.tw {
  overflow-x: auto;
  border: 1px solid var(--table-border);
  border-radius: var(--table-radius);
  background: var(--table-body-bg);
}

.lnk {
  color: var(--text-brand-default);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ov {
  position: fixed;
  inset: 0;
  background: var(--bg-mask);
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: var(--navbar-height);
}

.ov.on {
  display: flex;
}

.md {
  background: var(--modal-body-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--navbar-height) - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.md.wd {
  max-width: 980px;
  height: calc(100vh - var(--navbar-height) - 24px);
}

.mh {
  display: flex;
  align-items: center;
  padding: 16px var(--modal-pad-x);
  border-bottom: 1px solid var(--modal-border);
  background: var(--modal-header-bg);
  gap: 10px;
}

.mh h3 {
  flex: 1;
  font-size: var(--modal-title-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading);
}

.mb {
  padding: var(--modal-pad-y) var(--modal-pad-x);
  overflow: auto;
  flex: 1;
  background: var(--modal-body-bg);
  min-height: 0;
}

.mf {
  padding: 14px var(--modal-pad-x);
  border-top: 1px solid var(--modal-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  background: var(--modal-footer-bg);
}

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--sonner-bg);
  border: 1px solid var(--sonner-border);
  color: var(--sonner-title);
  padding: 12px 18px;
  border-radius: var(--sonner-radius);
  opacity: 0;
  transition: 0.25s;
  z-index: 80;
  pointer-events: none;
  font-size: 14px;
}

.toast.on {
  opacity: 1;
  transform: translateX(-50%);
}

.bar {
  height: 6px;
  border-radius: 9px;
  background: var(--bg-elevation-2);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--bg-brand);
  border-radius: 9px;
  transition: width 0.25s;
}

.bar.g i {
  background: var(--text-success);
}

.sb {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--bg-elevation-2);
  min-width: 140px;
}

.sb i {
  display: block;
  height: 100%;
}

.mode,
.sub {
  display: flex;
  background: var(--bg-elevation-1);
  border: 1px solid var(--border-secondary);
  border-radius: var(--segmented-radius);
  padding: 3px;
}

.mode button,
.sub button {
  padding: 6px 16px;
  border-radius: 7px;
  color: var(--segmented-label-inactive);
  font-weight: var(--font-weight-medium);
  font-size: var(--segmented-font-size);
  height: var(--segmented-height);
}

.mode button.on {
  background: var(--bg-brand);
  color: var(--text-on-color);
}

.sub button.on {
  background: var(--segmented-bg-active);
  color: var(--segmented-label-active);
}

.at {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-secondary);
  margin-bottom: 16px;
}

.at button {
  padding: 10px 18px;
  color: var(--text-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--tabs-font-size);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.at button.on {
  color: var(--text-heading);
  border-color: var(--bg-brand);
}

.at .ct {
  background: var(--bg-elevation-2);
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
  margin-left: 6px;
}

.lock-fields input,
.lock-fields textarea,
.lock-fields .seg button,
.lock-fields .ib,
.lock-fields .sw,
.lock-fields .units button {
  pointer-events: none;
}

.login-wrap {
  min-height: calc(100vh - var(--navbar-height));
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(121, 98, 213, 0.18), transparent 55%),
    var(--bg-base);
}

.login-card {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 28px 24px 24px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  color: var(--text-heading);
}

.login-brand b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg-brand);
  color: var(--text-on-color);
  font-size: 14px;
}

.login-card h1 {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 6px;
}

.login-hint {
  color: var(--text-body);
  font-size: 13px;
  margin-bottom: 18px;
}

.login-err {
  background: var(--bg-error-base);
  color: var(--text-error);
  border: 1px solid var(--border-error);
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

#mLogout {
  flex-shrink: 0;
  white-space: nowrap;
  height: var(--segmented-height);
}

.pdfjs-host {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  overflow: auto;
  background: #525659;
  padding: 8px 8px 16px;
  -webkit-overflow-scrolling: touch;
}

.pdfjs-page {
  position: relative;
  margin: 0 auto 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pdfjs-page canvas {
  display: block;
}

/* Transparent text on top of the canvas: lets users select, highlight and copy. */
.pdfjs-text {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.pdfjs-text span,
.pdfjs-text br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.pdfjs-text ::selection {
  background: rgba(0, 100, 255, 0.35);
}

.pdfjs-ann-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pdfjs-link-hit {
  position: absolute;
  transform: translateY(-50%);
  min-width: 56px;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.25);
}