/* JitsuOS theme — dark + gold (overrides Skode/Nexio defaults) */
:root {
  --jitsu-bg: #0b0f14;
  --jitsu-bg-elevated: #0e1319;
  --jitsu-card: #121820;
  --jitsu-surface: #1a222d;
  --jitsu-border: rgba(248, 198, 48, 0.08);
  --jitsu-fg: #e6eaef;
  --jitsu-fg-muted: #7b8a9d;
  --jitsu-fg-soft: #c5cdd8;
  --jitsu-gold: #f8c630;
  --jitsu-gold-hover: #f0b820;
  --jitsu-gold-dark: #e8b41a;
  --jitsu-gold-glow: rgba(248, 198, 48, 0.16);
  --jitsu-primary: #f8c630;
  --jitsu-primary-rgb: 248, 198, 48;
  --jitsu-on-primary: #0b0f14;
}

body {
  background-color: var(--jitsu-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--jitsu-gold-glow), transparent 55%),
    linear-gradient(180deg, #0b0f14 0%, #0e1319 100%);
  color: var(--jitsu-fg);
  font-family: "Outfit", "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.font-display,
.brand-mark {
  font-family: "Sora", "Segoe UI", sans-serif;
}

/* Brand mark wordmark */
.brand-mark {
  margin: 0;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--jitsu-fg);
  line-height: 1;
  white-space: nowrap;
}

.brand-mark span {
  color: var(--jitsu-gold);
}

.brand-mark-sm {
  font-size: 1.15rem;
}

.brand-mark-lg {
  font-size: 2rem;
}

.brand-mark-xl {
  font-size: 2.5rem;
}

.jitsu-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none !important;
}

.jitsu-logo-link:hover .brand-mark {
  opacity: 0.92;
}

.jitsu-mark-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}

.jitsu-mark-icon-lg {
  width: 40px;
  height: 40px;
}

.jitsu-logo-horizontal {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.jitsu-logo-horizontal-sm {
  height: 28px;
}

.jitsu-logo-horizontal-lg,
.jitsu-logo-horizontal-xl {
  height: 40px;
  max-width: 220px;
}

.jitsu-logo-vertical {
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.jitsu-logo-vertical-sm {
  max-height: 72px;
}

.jitsu-logo-vertical-lg,
.jitsu-logo-vertical-xl {
  max-height: 140px;
}

.jitsu-login-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: min(200px, 70vw);
  height: auto;
  object-fit: contain;
}

.jitsu-home-brand {
  overflow: hidden;
}

.jitsu-home-brand-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Bootstrap primary → gold */
.btn-primary {
  background-color: var(--jitsu-gold) !important;
  border-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--jitsu-gold-hover) !important;
  border-color: var(--jitsu-gold-hover) !important;
  color: var(--jitsu-on-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--jitsu-primary-rgb), 0.35) !important;
}

.btn-outline-primary {
  color: var(--jitsu-gold) !important;
  border-color: var(--jitsu-gold) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--jitsu-gold) !important;
  border-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

.btn-success {
  background-color: #1f9d6c !important;
  border-color: #1f9d6c !important;
}

.text-primary,
a.text-primary {
  color: var(--jitsu-gold) !important;
}

.bg-primary {
  background-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

.badge-primary,
.badge.bg-primary {
  background-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

a {
  color: var(--jitsu-gold);
}

a:hover {
  color: var(--jitsu-gold-hover);
}

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--jitsu-gold) !important;
  border-color: var(--jitsu-gold) !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--jitsu-gold) !important;
  box-shadow: 0 0 0 0.15rem rgba(var(--jitsu-primary-rgb), 0.25) !important;
}

.page-item.active .page-link {
  background-color: var(--jitsu-gold) !important;
  border-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

.page-link {
  color: var(--jitsu-gold);
}

.page-link:hover {
  color: var(--jitsu-gold-hover);
}

/* Shell / sidebar / topbar */
#page-topbar {
  background-color: var(--jitsu-card) !important;
  border-bottom: 1px solid var(--jitsu-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.navbar-header {
  background-color: transparent !important;
}

body[data-sidebar="dark"] .navbar-brand-box,
.navbar-brand-box {
  background: var(--jitsu-bg) !important;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
}

.navbar-brand-box .logo {
  line-height: 1;
}

.vertical-collpsed .navbar-brand-box .brand-mark {
  display: none;
}

.vertical-collpsed .navbar-brand-box .jitsu-logo-horizontal {
  height: 28px;
  max-width: 36px;
  object-fit: cover;
  object-position: left center;
}

.vertical-menu {
  background: var(--jitsu-bg) !important;
  border-right: 1px solid var(--jitsu-border);
}

body[data-sidebar="dark"] .vertical-menu {
  background: var(--jitsu-bg) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: var(--jitsu-fg-soft);
}

body[data-sidebar="dark"] #sidebar-menu ul li a i {
  color: var(--jitsu-fg-muted);
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus,
body[data-sidebar="dark"] #sidebar-menu ul li a:active {
  color: var(--jitsu-gold) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus i {
  color: var(--jitsu-gold) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li .mm-active > a {
  color: var(--jitsu-gold) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a i {
  color: var(--jitsu-gold) !important;
}

body[data-sidebar="dark"] .menu-title {
  color: var(--jitsu-fg-muted) !important;
}

#sidebar-menu ul li .badge {
  background: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

.main-content {
  background: transparent;
}

.page-content {
  background: transparent;
}

.card {
  background-color: var(--jitsu-card) !important;
  border: 1px solid var(--jitsu-border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  border-radius: 1rem;
}

.card-header,
.card-footer {
  background-color: var(--jitsu-surface) !important;
  border-color: var(--jitsu-border) !important;
}

.table {
  color: var(--jitsu-fg);
}

.table thead th {
  border-color: var(--jitsu-border) !important;
  color: var(--jitsu-fg-soft);
}

.table td,
.table th {
  border-color: rgba(248, 198, 48, 0.06) !important;
}

.footer {
  background-color: var(--jitsu-card) !important;
  border-top: 1px solid var(--jitsu-border);
  color: var(--jitsu-fg-muted);
}

.dropdown-menu {
  background-color: var(--jitsu-card) !important;
  border: 1px solid var(--jitsu-border) !important;
}

.dropdown-item {
  color: var(--jitsu-fg-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--jitsu-surface) !important;
  color: var(--jitsu-gold) !important;
}

.breadcrumb-item.active {
  color: var(--jitsu-fg-muted);
}

.header-item {
  color: var(--jitsu-fg) !important;
}

.jitsu-user-btn {
  display: inline-flex !important;
  align-items: center;
  min-height: 42px;
  padding: 0.35rem 0.75rem !important;
}

.jitsu-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 198, 48, 0.14);
  border: 1px solid rgba(248, 198, 48, 0.28);
  color: var(--jitsu-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.jitsu-user-name {
  color: var(--jitsu-fg);
  font-weight: 500;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-header-user-dropdown:hover .jitsu-user-avatar,
#page-header-user-dropdown[aria-expanded="true"] .jitsu-user-avatar {
  background: rgba(248, 198, 48, 0.22);
  border-color: var(--jitsu-gold);
}

/* Login */
.account-pages {
  min-height: 100vh;
}

.jitsu-login-card {
  background-color: var(--jitsu-card) !important;
  border: 1px solid var(--jitsu-border) !important;
  border-radius: 1.35rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.jitsu-login-card .form-control {
  background-color: var(--jitsu-surface);
  border-color: rgba(248, 198, 48, 0.12);
  color: var(--jitsu-fg);
}

.jitsu-login-card .form-control::placeholder {
  color: var(--jitsu-fg-muted);
}

.jitsu-login-subtitle {
  color: var(--jitsu-fg-muted);
  font-size: 0.9rem;
}

/* Dashboard */
.jitsu-dash-hero {
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(248, 198, 48, 0.12), transparent 55%),
    var(--jitsu-card) !important;
  overflow: hidden;
}

.jitsu-dash-eyebrow {
  color: var(--jitsu-gold);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.jitsu-kpi-card {
  position: relative;
  overflow: hidden;
}

.jitsu-kpi-card-alert {
  border-color: rgba(227, 93, 106, 0.35) !important;
}

.jitsu-kpi-label {
  color: var(--jitsu-fg-muted);
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.jitsu-kpi-value {
  color: var(--jitsu-fg);
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
  font-size: 1.85rem;
}

.jitsu-kpi-value-sm {
  font-size: 1.35rem;
}

.jitsu-kpi-meta {
  color: var(--jitsu-fg-muted);
  font-size: 0.8rem;
}

.jitsu-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 198, 48, 0.12);
  color: var(--jitsu-gold);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.jitsu-chart {
  min-height: 260px;
}

.jitsu-chart-donut {
  min-height: 240px;
}

.jitsu-status-legend {
  color: var(--jitsu-fg-soft);
  font-size: 0.88rem;
  border-top: 1px solid var(--jitsu-border);
  padding-top: 0.75rem;
}

.jitsu-dash-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jitsu-fg-muted) !important;
  border-top: 0 !important;
}

.jitsu-dash-table td a {
  color: var(--jitsu-fg);
  font-weight: 500;
}

.jitsu-dash-table td a:hover {
  color: var(--jitsu-gold);
}

.jitsu-dash-actions .btn-outline-primary {
  background: transparent;
}

/* Waves / metismenu active underline feel */
body[data-sidebar="dark"] .vertical-menu .vertical-menu-btn {
  color: var(--jitsu-fg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--jitsu-gold) !important;
  color: var(--jitsu-on-primary) !important;
}

.select2-dropdown {
  background-color: var(--jitsu-card);
  border-color: var(--jitsu-border);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--jitsu-surface);
  border-color: rgba(248, 198, 48, 0.12);
  color: var(--jitsu-fg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--jitsu-fg);
}