:root {
  color-scheme: light;
  --cf-navy-950: #061326;
  --cf-navy-900: #0a1c35;
  --cf-navy-800: #102947;
  --cf-blue-700: #1439d4;
  --cf-blue-600: #1f4eea;
  --cf-teal-600: #078574;
  --cf-teal-500: #0f9f8d;
  --cf-text-primary: #09172b;
  --cf-text-secondary: #526579;
  --cf-text-muted: #66778a;
  --cf-canvas: #f4f8f9;
  --cf-surface: #ffffff;
  --cf-surface-subtle: #edf4f6;
  --cf-border: #d7e2e8;
  --cf-border-strong: #b8c8d2;
  --cf-action-primary: #1439d4;
  --cf-action-primary-hover: #0f30be;
  --cf-action-primary-active: #0b269d;
  --cf-accent: #0f9f8d;
  --cf-success: #087f70;
  --cf-warning: #946200;
  --cf-danger: #c73547;
  --cf-info: #1f4eea;
  --cf-focus: #1f4eea;
  --cf-focus-ring: rgba(31, 78, 234, 0.32);
  --cf-radius-sm: 8px;
  --cf-radius-md: 12px;
  --cf-radius-lg: 18px;
  --cf-shadow-sm: 0 1px 2px rgba(6, 19, 38, 0.08);
  --cf-shadow-md: 0 12px 32px rgba(6, 19, 38, 0.12);
  --cf-font-sans: Inter, "Vazirmatn Variable", Vazirmatn, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tblr-primary: var(--cf-action-primary);
  --tblr-primary-rgb: 20, 57, 212;
  --tblr-body-color: var(--cf-text-primary);
  --tblr-body-bg: var(--cf-canvas);
  --tblr-border-color: var(--cf-border);
  --bs-primary: var(--cf-action-primary);
  --bs-primary-rgb: 20, 57, 212;
  --bs-body-color: var(--cf-text-primary);
  --bs-body-bg: var(--cf-canvas);
  --bs-border-color: var(--cf-border);
}

body {
  background: var(--cf-canvas);
  color: var(--cf-text-primary);
  font-family: var(--cf-font-sans);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--cf-action-primary);
}

a:hover {
  color: var(--cf-action-primary-hover);
}

.btn-primary,
.bg-primary {
  background-color: var(--cf-action-primary) !important;
  border-color: var(--cf-action-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--cf-action-primary-hover) !important;
  border-color: var(--cf-action-primary-hover) !important;
}

.btn,
.form-control,
.form-select,
.card,
.dropdown-menu,
.modal-content {
  border-radius: var(--cf-radius-sm);
}

.card,
.dropdown-menu,
.modal-content {
  border-color: var(--cf-border);
  box-shadow: var(--cf-shadow-sm);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  border-color: var(--cf-focus);
  box-shadow: 0 0 0 3px var(--cf-focus-ring) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.navbar-vertical {
  background: var(--cf-navy-950) !important;
  border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
}

.navbar-vertical .nav-link,
.navbar-vertical .nav-link-icon,
.navbar-vertical .navbar-brand {
  color: #dce8f2 !important;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus-visible,
.navbar-vertical .nav-link.active {
  background: rgba(31, 78, 234, 0.22) !important;
  color: #ffffff !important;
}

.navbar-vertical .nav-link.active {
  box-shadow: inset 3px 0 0 var(--cf-accent);
}

[dir="rtl"] .navbar-vertical .nav-link.active {
  box-shadow: inset -3px 0 0 var(--cf-accent);
}

.page-title,
h1,
h2,
h3 {
  color: var(--cf-navy-950);
}

.badge.bg-success,
.text-bg-success {
  background: var(--cf-success) !important;
}

.badge.bg-danger,
.text-bg-danger {
  background: var(--cf-danger) !important;
}

.glpi-logo {
  content: none !important;
  display: block;
  width: 190px !important;
  height: 55px !important;
  background-image: url("cloudfabric-wordmark.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.welcome-anonymous .glpi-logo {
  width: min(300px, 72vw) !important;
  height: 86px !important;
}

.navbar-vertical .navbar-brand {
  min-height: 70px;
  margin: 12px 10px 18px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cf-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.navbar-vertical .navbar-brand .glpi-logo {
  width: 170px !important;
  height: 49px !important;
}

body.navbar-collapsed .navbar-vertical .navbar-brand {
  min-height: 56px;
  margin-inline: 6px;
  padding: 6px;
}

body.navbar-collapsed .navbar-brand .glpi-logo {
  width: 40px !important;
  height: 40px !important;
  background-image: url("cloudfabric-mark.png") !important;
}

.modal-body img[src*="logo-GLPI"],
.modal-body img[title="GLPI Logo"] {
  width: min(230px, 70vw) !important;
  max-width: none !important;
  height: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}