@import url("kaf-fonts.css");

:root {
  --kaf-ink: #172033;
  --kaf-muted: #657084;
  --kaf-line: #dbe3ef;
  --kaf-bg: #f4f7fb;
  --kaf-panel: #ffffff;
  --kaf-navy: #0f172a;
  --kaf-blue: #2563eb;
  --kaf-green: #10b981;
  --kaf-amber: #f59e0b;
  --kaf-rose: #e11d48;
}

html[dir="rtl"] body {
  direction: rtl;
  font-family: "Cairo", Tahoma, Arial, sans-serif;
}

body {
  background: var(--kaf-bg) !important;
  color: var(--kaf-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.app-sidebar, .navbar-collapse {
  background: var(--kaf-navy) !important;
}

.sidebar-brand {
  background: #111c32 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand img {
  max-height: 68px;
  border-radius: 16px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

.sidebar-nav > li > a {
  color: #cbd5e1 !important;
  border-radius: 8px;
  margin: 3px 10px;
}

.sidebar-nav > li.active,
.sidebar-nav > li.active > a {
  background: rgba(37,99,235,.16) !important;
}

.sidebar-nav > li.active > a {
  color: #fff !important;
  border: 1px solid rgba(96,165,250,.22);
}

.sidebar-nav .icon {
  color: #93c5fd !important;
}

.navbar-title, .navbar-brand {
  color: #fff !important;
  font-weight: 700;
}

.app-container {
  background: var(--kaf-bg);
}

.card, .container-fluid[style*="background: #FFF"] {
  border: 1px solid var(--kaf-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.08) !important;
}

.card-banner .card-body {
  min-height: 118px;
}

.card-banner .icon {
  opacity: .14 !important;
}

.card-banner .title {
  color: var(--kaf-muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.card-banner .value {
  color: var(--kaf-ink) !important;
  font-weight: 800 !important;
}

.btn-primary, .sweet-alert .btn-danger {
  background: var(--kaf-blue) !important;
  border-color: var(--kaf-blue) !important;
}

.btn-success {
  background: var(--kaf-green) !important;
  border-color: var(--kaf-green) !important;
}

.btn-warning {
  background: var(--kaf-amber) !important;
  border-color: var(--kaf-amber) !important;
}

.btn-danger {
  background: var(--kaf-rose) !important;
  border-color: var(--kaf-rose) !important;
}

.form-control {
  border-color: var(--kaf-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--kaf-blue) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

.table > thead > tr > th {
  color: var(--kaf-muted);
  font-weight: 800;
  border-bottom: 1px solid var(--kaf-line) !important;
}

.kaf-lang-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 10px 12px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  vertical-align: middle;
}

.kaf-lang-switch button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cbd5e1;
  font-weight: 800;
  padding: 6px 10px;
}

.kaf-lang-switch button.active {
  background: #fff;
  color: var(--kaf-navy);
}

.kaf-login-body {
  background:
    radial-gradient(circle at 20% 8%, rgba(77,142,255,.22), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(20,184,166,.17), transparent 28%),
    var(--kaf-navy) !important;
  font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}

.login-panel {
  background: #111c32 !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  color: #dae2fd !important;
}

.login-panel h1 {
  color: #fff;
}

.login-panel p, .login-panel label {
  color: #a9b4cc;
}