:root {
  --ali-dark: #03112b;
  --ali-blue: #1a8af7;
  --ali-teal: #3de8c8;
  --ali-bg: #f4f6fb;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--ali-bg);
  font-family: "Segoe UI", sans-serif;
  color: #12233f;
  overflow: hidden;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.navbar-brand span {
  color: var(--ali-teal);
}

.sidebar {
  background: var(--ali-dark);
}

.app-shell {
  display: flex;
  height: calc(100vh - 56px);
}

.app-sidebar {
  width: 220px;
  flex: 0 0 220px;
  overflow-y: auto;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: rgba(26, 138, 247, 0.22);
  color: #fff;
  transform: translateX(4px);
}

.sidebar .nav-link i {
  width: 22px;
}

.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(6, 29, 72, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 29, 72, 0.14);
}

.badge-sub {
  font-size: 0.7rem;
}

.btn-ali {
  background: linear-gradient(120deg, var(--ali-blue), #1f6fd9);
  color: #fff;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-ali:hover {
  background: linear-gradient(120deg, #157be1, #175fba);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(26, 138, 247, 0.36);
}

.stat-card {
  border-left: 4px solid var(--ali-blue);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(61, 232, 200, 0.2), transparent 42%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 16px 34px rgba(8, 34, 89, 0.2);
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-card.teal {
  border-color: var(--ali-teal);
}

.stat-card.dark {
  border-color: var(--ali-dark);
}

.agent-status-card {
  border-left-color: #17a673;
}

.agent-status-badge {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 4px 10px;
  color: #fff;
  font-weight: 600;
}

.agent-status-badge.active {
  background: linear-gradient(120deg, #18a865, #2cc98f);
}

.agent-status-badge.partial {
  background: linear-gradient(120deg, #f39c12, #f1b54a);
}

.agent-status-badge.inactive {
  background: linear-gradient(120deg, #d64545, #e26b6b);
}

.agent-health-item {
  border: 1px solid #e6ebf5;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fbfcff;
}

.agent-health-item.ok {
  border-color: rgba(24, 168, 101, 0.28);
  background: rgba(24, 168, 101, 0.06);
}

.agent-health-item.fail {
  border-color: rgba(214, 69, 69, 0.25);
  background: rgba(214, 69, 69, 0.06);
}

.agent-health-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-enter {
  animation: pageFadeIn 0.55s ease both;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.table tbody tr {
  transition: background 0.2s ease, transform 0.2s ease;
}

.table tbody tr:hover {
  transform: translateX(2px);
}

.swal2-popup {
  border-radius: 14px !important;
}

.swal2-confirm.btn-ali-confirm {
  background: var(--ali-blue) !important;
}

.ali-progress {
  height: 22px;
  border-radius: 999px;
  background: #e9eef7;
}

.ali-progress .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ali-blue), var(--ali-teal));
  font-weight: 600;
}

.token-item {
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  padding: 12px;
  background: #fbfcff;
}

.knowledge-hero {
  border: 1px solid #e6ebf5;
  background: linear-gradient(130deg, #fbfcff, #f2f8ff);
}

.knowledge-counter {
  min-width: 100px;
  text-align: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6ebf5;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
}

.knowledge-counter strong {
  color: var(--ali-blue);
  font-size: 1.1rem;
  line-height: 1.1;
}

.knowledge-filter .form-select {
  border-radius: 10px;
}

.knowledge-item {
  border-left: 4px solid #d7e8ff;
}

.knowledge-item:hover {
  border-left-color: var(--ali-blue);
}

.badge-company {
  color: #fff;
}

.badge-company-general {
  background: #6c7a92;
}

.badge-company-jimtech {
  background: #1a8af7;
}

.badge-company-greenballoon {
  background: #1eaf8a;
}

.employees-hero {
  border: 1px solid #e6ebf5;
  background: linear-gradient(130deg, #fbfcff, #f2f8ff);
}

.employees-table-card .table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #50607b;
}

.employees-table-card .table tbody td {
  border-color: #edf2fb;
}

.videos-hero {
  border: 1px solid #e6ebf5;
  background: linear-gradient(130deg, #fbfcff, #f2f8ff);
}

.video-item {
  border-left: 4px solid #d7e8ff;
}

.video-item:hover {
  border-left-color: var(--ali-blue);
}

.auth-body {
  background:
    radial-gradient(circle at 50% -10%, rgba(61, 232, 200, 0.22), transparent 48%),
    linear-gradient(145deg, #020b1f, #03112b 52%, #05204f);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.auth-agent-glow {
  position: absolute;
  width: min(760px, 88vw);
  height: min(760px, 88vw);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(26, 138, 247, 0.26), rgba(26, 138, 247, 0.06) 42%, transparent 72%);
  filter: blur(2px);
  animation: authPulse 6s ease-in-out infinite;
}

.auth-shell {
  width: min(1040px, 94vw);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.auth-shell-single {
  max-width: 460px;
}

.auth-card,
.auth-logout-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(250, 253, 255, 0.95);
  backdrop-filter: blur(4px);
}

.auth-brand {
  text-align: center;
}

.auth-logo-orbit {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(26, 138, 247, 0.18), rgba(61, 232, 200, 0.12));
}

.auth-logo-orbit::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(26, 138, 247, 0.34);
  animation: authRotate 7s linear infinite;
}

.auth-logo {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
}

.auth-pill {
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(120deg, #1a8af7, #3de8c8);
}

.auth-input {
  border-radius: 10px;
}

.auth-eye-btn {
  min-width: 46px;
}

.auth-eye-btn i {
  color: #1a8af7;
}

.auth-login-btn {
  font-weight: 600;
}

@keyframes authPulse {
  0%, 100% {
    transform: scale(0.97);
    opacity: 0.62;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.9;
  }
}

@keyframes authRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}