/* iSecurity VMS theming on top of Tabler.
 *
 * Light surfaces, because this is a back-office tool used in daylight next to
 * a spreadsheet and an invoice — not the operator console, which is dark
 * because video is the subject there. Different job, different ground.
 *
 * Only the brand colours are overridden; every layout, spacing and component
 * decision stays Tabler's, so upgrading it remains a file swap.
 */

:root {
  /* Crest gold. Two shades on purpose: the bright one fills buttons and
     badges, the darker one carries text and links, where #D9A441 on white
     falls below a comfortable contrast ratio. */
  --tblr-primary: #A87C22;
  --tblr-primary-rgb: 168, 124, 34;
  --is-gold: #D9A441;
  --is-gold-dark: #A87C22;
  --is-navy: #101A35;
}

/* Buttons keep the bright gold with dark ink — the same pairing as the app's
   accent buttons, so the two products look related. */
.btn-primary {
  --tblr-btn-bg: var(--is-gold);
  --tblr-btn-border-color: var(--is-gold);
  --tblr-btn-color: #14210f;
  --tblr-btn-hover-bg: #C89A3C;
  --tblr-btn-hover-border-color: #C89A3C;
  --tblr-btn-hover-color: #14210f;
  --tblr-btn-active-bg: var(--is-gold-dark);
  --tblr-btn-active-border-color: var(--is-gold-dark);
  --tblr-btn-active-color: #fff;
  font-weight: 600;
}

/* The sidebar is the one dark surface: it anchors the page and carries the
   crest, the way the app's own chrome does. */
.navbar-vertical.navbar-dark {
  background: var(--is-navy);
  border-right: 0;
}
.navbar-vertical .nav-link { color: rgba(255, 255, 255, .72); }
.navbar-vertical .nav-link:hover { color: #fff; }
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
  color: #14210f;
  background: var(--is-gold);
  border-radius: 6px;
  font-weight: 600;
}
.navbar-vertical .nav-link-icon { opacity: .9; }

/* Crest mark, used in the sidebar and on the sign-in card. */
.crest {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--is-gold);
  color: #14210f;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.crest-lg { width: 46px; height: 46px; font-size: 18px; border-radius: 10px; }

/* Ids, machine names and fingerprints get read out loud during support, so
   they are monospaced and select in one click. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  user-select: all;
}

.key-blob {
  word-break: break-all;
  font-size: 11px;
  line-height: 1.55;
}

/* Customer initials in list rows. */
.avatar-initials {
  background: rgba(168, 124, 34, .13);
  color: var(--is-gold-dark);
  font-weight: 600;
}