/* ====================================================
   الهوية البصرية — الأزرق السماوي الصافي
   Sky Blue Visual Identity
   ==================================================== */

:root {
  --sky-50:  #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;

  /* Override Bootstrap variables */
  --bs-primary:           #0ea5e9;
  --bs-primary-rgb:       14, 165, 233;
  --bs-link-color:        #0284c7;
  --bs-link-hover-color:  #0369a1;
  --bs-btn-bg:            #0ea5e9;
  --bs-btn-border-color:  #0ea5e9;
}

/* ── Topbar ── */
.topbar {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 60%, #38bdf8 100%) !important;
  border-bottom: 2px solid #0284c7;
  box-shadow: 0 2px 12px rgba(2,132,199,.25);
}

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #075985 0%, #0369a1 50%, #0ea5e9 100%) !important;
  border-left: none;
  box-shadow: 4px 0 20px rgba(3,105,161,.2);
}
.sidebar .nav-link,
.sidebar a { color: #e0f2fe !important; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-right: 3px solid #7dd3fc;
}
.sidebar .sidebar-heading { color: #bae6fd !important; }

/* ── Buttons ── */
.btn-primary,
.btn-primary-modern {
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  border-color: #0284c7 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(2,132,199,.35);
}
.btn-primary:hover,
.btn-primary-modern:hover {
  background: linear-gradient(135deg, #0369a1, #0284c7) !important;
  border-color: #0369a1 !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(2,132,199,.45);
}
.btn-outline-primary {
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}
.btn-outline-primary:hover {
  background: #0284c7 !important;
  color: #fff !important;
}

/* ── Cards & KPIs ── */
.kpi-card, .stat-card, .card {
  border-top: 3px solid #0ea5e9 !important;
  box-shadow: 0 4px 20px rgba(14,165,233,.1) !important;
}
.kpi-card .kpi-icon,
.stat-icon {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8) !important;
}
.kpi-value, .stat-value { color: #0369a1 !important; }

/* ── Badges ── */
.badge-notify { background: #0ea5e9 !important; }
.badge.bg-primary { background: #0ea5e9 !important; }

/* ── Tables ── */
.table thead th {
  background: linear-gradient(135deg, #0369a1, #0ea5e9) !important;
  color: #fff !important;
  border: none !important;
}
.table tbody tr:hover { background: #f0f9ff !important; }

/* ── Nav Tabs ── */
.nav-tabs .nav-link.active {
  background: #0ea5e9 !important;
  color: #fff !important;
  border-color: #0ea5e9 !important;
}
.nav-tabs .nav-link:hover:not(.active) {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}
.nav-pills .nav-link.active {
  background: #0ea5e9 !important;
}

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.2) !important;
}

/* ── Alerts ── */
.alert-primary {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}
.alert-info {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* ── Links ── */
a { color: #0284c7; }
a:hover { color: #0369a1; }

/* ── Progress bars ── */
.progress-bar { background: linear-gradient(90deg, #0284c7, #38bdf8) !important; }

/* ── Login Page ── */
.login-page { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 40%, #0ea5e9 100%) !important; }
.login-card, .card-login {
  border-top: 4px solid #38bdf8 !important;
  box-shadow: 0 20px 60px rgba(3,105,161,.4) !important;
}

/* ── Hero sections ── */
.hero-section, .page-hero, .rp-hero, .tr-hero, .bd-hero {
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 60%, #7dd3fc 100%) !important;
}

/* ── Dropdown ── */
.dropdown-item:hover, .dropdown-item:focus {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

/* ── Modal header ── */
.modal-header {
  background: linear-gradient(135deg, #0369a1, #0ea5e9) !important;
  color: #fff !important;
}
.modal-header .btn-close { filter: invert(1); }
.modal-title { color: #fff !important; }

/* ── Status badges ── */
.status-badge, .badge {
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb { background: #7dd3fc !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #38bdf8 !important; }
::-webkit-scrollbar-track { background: #f0f9ff !important; }

/* ── User chip ── */
.user-chip {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
}
.user-chip:hover { background: rgba(255,255,255,.3) !important; }
.user-avatar { background: #0369a1 !important; color: #fff !important; }

/* ── Icon pills ── */
.icon-pill {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.icon-pill:hover { background: rgba(255,255,255,.35) !important; }

/* ── Footer ── */
footer {
  background: #0c4a6e !important;
  border-top: 2px solid #0369a1;
}

/* ── Map overlays ── */
.real-map-total {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

/* ── Trend arrows ── */
.trend-up   { color: #0ea5e9 !important; }
.trend-down { color: #ef4444 !important; }

/* ── Toast notifications ── */
.toast-header { background: #0ea5e9 !important; color: #fff !important; }