:root {
  --brand-primary: #1d7af3;
  --brand-primary-dark: #1769e0;
  --brand-accent-red: #f3545d;
  --brand-blue-600: #0f5bd6;
}

.main-header[data-background-color="blue"] {
  background: var(--brand-primary) !important;
}
.main-header[data-background-color="white"] {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.main-header[data-background-color="white"] .logo-header,
.main-header[data-background-color="white"] .navbar {
  background: #ffffff !important;
}
.main-header[data-background-color="white"] .topbar-toggler,
.main-header[data-background-color="white"] .topbar-toggler i {
  color: #233142 !important;
}
.sidebar[data-background-color="blue"] .sidebar-wrapper {
  background: linear-gradient(180deg, var(--brand-blue-600) 0%, #0b3ea0 100%) !important;
}

.btn-primary { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-primary-dark) !important; border-color: var(--brand-primary-dark) !important; }
.text-primary { color: var(--brand-primary) !important; }
.badge-primary { background-color: var(--brand-primary) !important; }
.icon-primary { color: var(--brand-primary) !important; }

.btn-danger { background-color: var(--brand-accent-red) !important; border-color: var(--brand-accent-red) !important; }
.badge-danger { background-color: var(--brand-accent-red) !important; }

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

/* Cards accents */
.card .card-title { color: #233142; }
.bubble-shadow-small { box-shadow: 0 8px 20px rgba(29, 122, 243, 0.25); }

.login .bg-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); }
.login .orb { position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.35; animation: float 9s ease-in-out infinite; }
.login .orb.blue { background: var(--brand-primary); width: 220px; height: 220px; top: 10%; left: 8%; }
.login .orb.red { background: var(--brand-accent-red); width: 180px; height: 180px; bottom: 12%; right: 10%; animation-duration: 12s; }
.login .orb.deep { background: var(--brand-blue-600); width: 160px; height: 160px; bottom: 25%; left: 18%; animation-duration: 11s; }
@keyframes float { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-25px) translateX(10px); } 100% { transform: translateY(0) translateX(0); } }

.login .glass-card { backdrop-filter: saturate(130%) blur(10px); background: rgba(255,255,255,0.9); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); overflow: hidden; }
.login .brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login .brand .pulse-logo { animation: pulse 2.8s ease-in-out infinite; }
.login .brand .brand-text .title { font-weight: 700; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login .brand .brand-text .subtitle { color: #6c7a89; }
@keyframes pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(29,122,243,0)); } 50% { transform: scale(1.04); filter: drop-shadow(0 8px 20px rgba(29,122,243,0.35)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(29,122,243,0)); } }

.login .form-control { border-radius: 10px; border-color: #e1e6ef; transition: box-shadow .2s, border-color .2s; }
.login .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(29,122,243,0.2); }
.login .btn-login { border-radius: 10px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); border: none; box-shadow: 0 10px 20px rgba(29,122,243,0.25); transition: transform .15s ease, box-shadow .15s ease; }
.login .btn-login:hover { transform: translateY(-1px); box-shadow: 0 16px 26px rgba(29,122,243,0.35); }
.login .card { border: none; }
.login .card-header { background: transparent; border-bottom: none; }
.login .card-body { padding-top: 10px; }

.form-section { border-radius: 12px; border: 1px solid #e9edf5; padding: 16px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.06); }
.summary-box { border-radius: 12px; background: linear-gradient(135deg, #f5f9ff, #eef5ff); padding: 16px; box-shadow: 0 12px 28px rgba(13, 60, 140, 0.12); }
.summary-box .metric { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.summary-box .metric i { color: var(--brand-primary); }
.input-icon .input-group-text { background: #f5f7fb; }
.badge-list .badge { margin-right: 6px; margin-bottom: 6px; }

/* Floating Dock */
.floating-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(29, 122, 243, 0.18);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 14px 26px rgba(29,122,243,0.18);
  border: 1px solid rgba(29,122,243,0.35);
  z-index: 1040;
}
.floating-dock .dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  color: #233142;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.floating-dock .dock-item .dock-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  color: var(--brand-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.floating-dock .dock-item .dock-label { font-weight: 600; font-size: 11px; }
.floating-dock .dock-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(29, 122, 243, 0.22);
  background: rgba(29,122,243,0.24);
}

/* Header Dock */
.header-dock {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(29,122,243,0.12);
  backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid rgba(29,122,243,0.28);
}
.header-dock .dock-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  color: #233142;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.header-dock .dock-item .dock-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  color: var(--brand-primary);
}
.header-dock .dock-item .dock-label { font-weight: 600; font-size: 11px; }
.header-dock .dock-item:hover { background: rgba(29,122,243,0.18); transform: translateY(-1px); }

/* Header Settings */
.btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 6px 10px;
  background: rgba(29,122,243,0.12);
  color: #233142;
  border: 1px solid rgba(29,122,243,0.28);
}
.btn-settings:hover, .btn-settings:focus {
  background: rgba(29,122,243,0.18);
  color: #233142;
}
.settings-menu {
  min-width: 220px;
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid rgba(29,122,243,0.18);
  box-shadow: 0 16px 30px rgba(0,0,0,0.12);
}
.settings-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 10px;
}
.settings-menu .dropdown-item:hover {
  background: rgba(29,122,243,0.12);
}
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(29,122,243,0.12);
  color: #233142;
  border: 1px solid rgba(29,122,243,0.28);
}
.profile-chip .chip-icon { color: var(--brand-primary); font-size: 18px; }
.profile-menu { min-width: 220px; border-radius: 12px; }
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.filter-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:8px}
.metric-card{border-radius:12px;padding:16px;color:#fff;position:relative;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease;border:1px solid rgba(255,255,255,.25);backdrop-filter:saturate(120%) contrast(105%)}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.metric-icon{font-size:22px;opacity:.95;margin-bottom:6px;color:#fff !important}
.metric-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.95;color:#fff !important}
.metric-value{font-size:26px;font-weight:700;line-height:1.1;margin-top:4px;color:#fff !important;display:flex;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums}
.metric-number{color:#fff !important}
.metric-unit{font-size:12px;opacity:.9;color:#fff !important;background:rgba(255,255,255,.18);padding:2px 6px;border-radius:6px}
.metric-green{background:linear-gradient(135deg,#28a745,#79d88b)}
.metric-orange{background:linear-gradient(135deg,#fdaf4b,#ff7f50)}
.metric-blue{background:linear-gradient(135deg,#1d7af3,#4eb5ff)}
.metric-purple{background:linear-gradient(135deg,#8b5cf6,#b084fc)}
.metric-red{background:linear-gradient(135deg,#f3545d,#ff8a9b)}
.metric-teal{background:linear-gradient(135deg,#20c997,#6ee7d6)}