@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --navy: #1a1a2e;
  --navy-2: #3d1a6e;
  --blue: #5b2d8e;
  --cyan: #c9a84c;
  --bg: #f8f7fc;
  --line: #e5e7eb;
  --text: #1a1a2e;
  --muted: #6b7280;
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

body,
button,
input,
textarea,
select {
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
}

.btn-primary {
  box-shadow: 0 10px 22px rgba(91, 45, 142, .18);
}

.btn-primary:hover {
  background: #3d1a6e;
}

.pill {
  background: rgba(201, 168, 76, .12);
  border-color: rgba(232, 212, 139, .24);
  color: #e8d48b;
}

.official-logo {
  display: block;
  width: min(100%, 310px);
  height: auto;
  object-fit: contain;
}

.brand.official-brand {
  display: block;
}

.brand.official-brand small {
  display: block;
  margin-top: 10px;
  color: #5b2d8e;
  font-weight: 800;
}

.sidebar-brand {
  height: 112px;
  padding: 14px 20px;
}

.sidebar-brand .logo-panel {
  flex: 1;
  border-radius: 13px;
  background: #fff;
  padding: 9px 12px 7px;
}

.sidebar-brand .official-logo {
  width: 100%;
  max-height: 41px;
}

.sidebar-brand .logo-panel small {
  display: block;
  margin-top: 5px;
  color: #3d1a6e;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

.avatar {
  background: #c9a84c;
}

.sidebar nav a.active span,
.view-btn {
  color: #5b2d8e;
}

.login-visual:before {
  background: rgba(201, 168, 76, .13);
}

.hero-card:after {
  border-color: rgba(232, 212, 139, .22);
}

.stat-icon.blue,
.stat-icon.cyan {
  background: #f4eef9;
  color: #5b2d8e;
}

.badge-cyan {
  background: #f4eef9;
  color: #5b2d8e;
}

.badge-blue {
  background: #fff8e7;
  color: #8b6c19;
}

.table-card tbody tr:hover {
  background: #faf7fd;
}

.direction-picker input:checked + span,
.serial-hint {
  border-color: #c4a8e0;
  background: #f7f2fb;
  color: #3d1a6e;
}

.stack-form input:focus,
.form-row input:focus,
.search-grid input:focus,
.search-grid select:focus,
.form-panel textarea:focus {
  border-color: #5b2d8e;
  box-shadow: 0 0 0 4px rgba(91, 45, 142, .10);
}

::selection {
  background: #e8d48b;
  color: #3d1a6e;
}