/* AnyGlance presentation overrides for the existing VMS. */
:root {
  --anyglance-primary: #053d5a;
  --anyglance-primary-hover: #075677;
  --anyglance-primary-soft: #e8f0f4;
  --anyglance-font: "Century Gothic", CenturyGothic, AppleGothic, "Avenir Next", Arial, sans-serif;
}

/* SmartAdmin reads these tokens, while some of its utilities use fixed colors. */
:root,
html body {
  --theme-primary: #053d5a;
  --theme-rgb-primary: 5, 61, 90;
  --theme-primary-50: #eef4f7;
  --theme-primary-100: #d8e7ee;
  --theme-primary-200: #b8d0dc;
  --theme-primary-300: #91b3c4;
  --theme-primary-400: #6595ab;
  --theme-primary-500: #053d5a;
  --theme-primary-600: #04364f;
  --theme-primary-700: #032e44;
  --theme-primary-800: #022538;
  --theme-primary-900: #011b2a;
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body option,
html body .form-control,
html body .nav-menu,
html body .dropdown-menu,
html body .select2-container,
html body .modal,
html body .panel,
html body .card,
html body .page-header,
html body .page-footer,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--anyglance-font) !important;
}

html body .page-sidebar,
html body .page-sidebar .page-logo,
html body .bg-brand-gradient {
  background: var(--anyglance-primary) !important;
}

html body .page-sidebar .page-logo-link,
html body .page-sidebar .page-logo-text {
  color: #fff !important;
}

html body .page-sidebar .info-card.anyglance-account-card {
  display: flex !important;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  width: calc(100% - 24px) !important;
  min-height: 84px;
  height: auto !important;
  margin: 12px;
  padding: 12px 42px 12px 12px !important;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none;
  overflow: hidden;
}

html body .page-sidebar .anyglance-account-avatar {
  display: flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f0f4;
  color: var(--anyglance-primary) !important;
  font-size: 20px;
  text-decoration: none;
}

html body .page-sidebar .anyglance-account-avatar:hover,
html body .page-sidebar .anyglance-account-avatar:focus {
  background: #fff;
  color: var(--anyglance-primary-hover) !important;
}

html body .page-sidebar .anyglance-account-avatar img,
html body .page-header .anyglance-header-avatar img,
html body .page-header .anyglance-dropdown-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

html body .page-header .anyglance-header-avatar,
html body .page-header .anyglance-dropdown-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--anyglance-primary-soft);
  color: var(--anyglance-primary);
  font-size: 17px;
}

html body .page-header .anyglance-dropdown-avatar {
  width: 44px;
  height: 44px;
  background: #fff;
  font-size: 20px;
}

html body .page-sidebar .anyglance-account-card .info-card-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 0;
  color: #fff;
  line-height: 1.2;
  text-shadow: none;
}

html body .page-sidebar .anyglance-account-card .info-card-text a,
html body .page-sidebar .anyglance-account-card .info-card-text a:hover,
html body .page-sidebar .anyglance-account-card .info-card-text a:focus {
  display: block !important;
  max-width: 100%;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

html body .page-sidebar .anyglance-account-card .info-card-text a:hover,
html body .page-sidebar .anyglance-account-card .info-card-text a:focus {
  text-decoration: underline;
}

html body .page-sidebar .anyglance-account-card .info-card-text a span,
html body .page-sidebar .anyglance-account-card .anyglance-account-role,
html body .page-sidebar .anyglance-account-card .anyglance-account-username {
  display: block !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .page-sidebar .anyglance-account-card .anyglance-account-role {
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 400;
}

html body .page-sidebar .anyglance-account-card .anyglance-account-username {
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  font-weight: 400;
}

html body .page-sidebar .anyglance-account-card .pull-trigger-btn {
  top: 10px !important;
  right: 9px !important;
  left: auto !important;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 23px;
  box-shadow: none;
}

html body .page-sidebar .page-logo img.anyglance-brand-mark,
html body .page-header .page-logo img.anyglance-brand-mark {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  margin: 0 10px 0 0 !important;
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
}

html body .page-logo-text {
  font-family: var(--anyglance-font) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

html body .page-header .page-logo {
  background: #fff !important;
}

html body .page-header .page-logo-text {
  color: var(--anyglance-primary) !important;
}

html body .nav-menu li.active > a,
html body .nav-menu li.open > a,
html body .nav-menu li > a:hover {
  background-color: rgba(255, 255, 255, .13) !important;
}

html body .btn-primary,
html body .bg-primary,
html body .bg-primary-500,
html body .badge-primary,
html body .nav-menu li.active > a::before {
  background-color: var(--anyglance-primary) !important;
  border-color: var(--anyglance-primary) !important;
}

html body .btn-primary {
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(5, 61, 90, .28) !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
  background-color: var(--anyglance-primary-hover) !important;
  border-color: var(--anyglance-primary-hover) !important;
}

html body .text-primary,
html body a.text-primary,
html body .color-primary-500 {
  color: var(--anyglance-primary) !important;
}

html body .bg-primary-50 { background-color: var(--theme-primary-50) !important; }
html body .bg-primary-100 { background-color: var(--theme-primary-100) !important; }
html body .bg-primary-200 { background-color: var(--theme-primary-200) !important; }
html body .bg-primary-300 { background-color: var(--theme-primary-300) !important; }
html body .bg-primary-400 { background-color: var(--theme-primary-400) !important; }
html body .bg-primary-500 { background-color: var(--theme-primary-500) !important; }
html body .bg-primary-600 { background-color: var(--theme-primary-600) !important; }
html body .bg-primary-700 { background-color: var(--theme-primary-700) !important; }
html body .bg-primary-800 { background-color: var(--theme-primary-800) !important; }
html body .bg-primary-900 { background-color: var(--theme-primary-900) !important; }

html body .color-primary-50 { color: var(--theme-primary-50) !important; }
html body .color-primary-100 { color: var(--theme-primary-100) !important; }
html body .color-primary-200 { color: var(--theme-primary-200) !important; }
html body .color-primary-300 { color: var(--theme-primary-300) !important; }
html body .color-primary-400 { color: var(--theme-primary-400) !important; }
html body .color-primary-500 { color: var(--theme-primary-500) !important; }
html body .color-primary-600 { color: var(--theme-primary-600) !important; }
html body .color-primary-700 { color: var(--theme-primary-700) !important; }
html body .color-primary-800 { color: var(--theme-primary-800) !important; }
html body .color-primary-900 { color: var(--theme-primary-900) !important; }

html body .border-primary,
html body .btn-outline-primary {
  border-color: var(--anyglance-primary) !important;
}

html body .btn-outline-primary {
  color: var(--anyglance-primary) !important;
}

html body .btn-outline-primary:hover,
html body .btn-outline-primary:focus {
  color: #fff !important;
  background-color: var(--anyglance-primary) !important;
}

html body .bg-primary-gradient {
  background-image: linear-gradient(250deg, rgba(5, 61, 90, .7), transparent) !important;
}

html body .page-link:hover,
html body .page-item.active .page-link {
  color: #fff !important;
  background-color: var(--anyglance-primary) !important;
  border-color: var(--anyglance-primary) !important;
}

html body .nav-function-top .page-sidebar .primary-nav .nav-menu > li:hover > a {
  color: var(--anyglance-primary) !important;
}

html body a:not(.btn):hover,
html body a:not(.btn):focus {
  color: var(--anyglance-primary-hover);
}

html body .form-control:focus,
html body .custom-select:focus {
  border-color: var(--anyglance-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(5, 61, 90, .16) !important;
}

html body .blankpage-form-field .page-logo {
  min-height: 96px;
  background: #fff !important;
}

html body .blankpage-form-field .page-logo-link {
  width: 100%;
  justify-content: center;
}

html body .blankpage-form-field .page-logo img.anyglance-full-logo,
html body .auth .page-logo img.anyglance-full-logo {
  display: block;
  width: 210px !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  object-fit: contain;
}

html body .auth .page-logo {
  background: #fff !important;
}

@media (max-width: 480px) {
  html body .page-logo-text { font-size: 16px; }
  html body .blankpage-form-field .page-logo img.anyglance-full-logo { width: 180px !important; }
}