/* ========================================
   Weqaya Surveillance Platform
   Public Health Authority - Saudi Arabia
   Custom Styles - Full Width Edition
   ======================================== */

:root {
  --weqaya-teal: #00B5BD;
  --weqaya-teal-light: #4DD4DA;
  --weqaya-teal-dark: #008B91;
  --weqaya-blue: #2C5078;
  --weqaya-blue-dark: #1E3A56;
  --weqaya-blue-deeper: #142A40;
  --weqaya-gold: #D4A752;
  --zone-green: #10b981;
  --zone-yellow: #f59e0b;
  --zone-orange: #f97316;
  --zone-red: #ef4444;
}

* {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background:
    radial-gradient(at 0% 0%, rgba(0,181,189,0.06) 0%, transparent 50%),
    radial-gradient(at 100% 0%, rgba(44,80,120,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  min-height: 100vh;
}

/* ============ Weqaya Brand Colors ============ */
.bg-weqaya-teal { background-color: var(--weqaya-teal); }
.bg-weqaya-blue { background-color: var(--weqaya-blue); }
.bg-weqaya-blue-dark { background-color: var(--weqaya-blue-dark); }
.bg-weqaya-blue-deeper { background-color: var(--weqaya-blue-deeper); }
.text-weqaya-teal { color: var(--weqaya-teal); }
.text-weqaya-blue { color: var(--weqaya-blue); }
.border-weqaya-teal { border-color: var(--weqaya-teal); }

/* ============ Gradient Backgrounds ============ */
.bg-gradient-weqaya {
  background: linear-gradient(135deg, var(--weqaya-blue-deeper) 0%, var(--weqaya-blue) 50%, var(--weqaya-teal-dark) 100%);
  position: relative;
  overflow: hidden;
}
.bg-gradient-weqaya::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,181,189,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(77,212,218,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.bg-gradient-weqaya-soft {
  background: linear-gradient(135deg, rgba(0,181,189,0.08) 0%, rgba(44,80,120,0.05) 100%);
}

/* ============ Premium Circular Logo with Animated Rays ============ */
.logo-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #f0fdfe 60%, #e0f7f8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 8px rgba(0, 139, 145, 0.12),
    0 0 0 2px rgba(255, 255, 255, 0.4),
    0 0 0 4px rgba(0, 181, 189, 0.25),
    0 0 24px rgba(0, 181, 189, 0.55),
    0 0 48px rgba(0, 181, 189, 0.28),
    0 0 80px rgba(0, 181, 189, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.2);
  isolation: isolate;
  animation: logo-pulse 3.2s ease-in-out infinite;
}

/* Rotating sun-rays behind the logo */
.logo-container::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(0, 181, 189, 0.85) 6deg,
      transparent 18deg,
      transparent 42deg,
      rgba(77, 212, 218, 0.7) 48deg,
      transparent 60deg,
      transparent 84deg,
      rgba(0, 181, 189, 0.85) 90deg,
      transparent 102deg,
      transparent 126deg,
      rgba(77, 212, 218, 0.7) 132deg,
      transparent 144deg,
      transparent 168deg,
      rgba(0, 181, 189, 0.85) 174deg,
      transparent 186deg,
      transparent 210deg,
      rgba(77, 212, 218, 0.7) 216deg,
      transparent 228deg,
      transparent 252deg,
      rgba(0, 181, 189, 0.85) 258deg,
      transparent 270deg,
      transparent 294deg,
      rgba(77, 212, 218, 0.7) 300deg,
      transparent 312deg,
      transparent 336deg,
      rgba(0, 181, 189, 0.85) 342deg,
      transparent 354deg
    );
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 92%, transparent 100%);
          mask: radial-gradient(circle, transparent 50%, #000 52%, #000 92%, transparent 100%);
  z-index: -2;
  animation: rays-rotate 14s linear infinite;
  filter: drop-shadow(0 0 6px rgba(0, 181, 189, 0.55));
}

/* Soft halo glow between rays and the disc */
.logo-container::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 181, 189, 0.45) 0%, rgba(0, 181, 189, 0.18) 50%, transparent 75%);
  z-index: -1;
  filter: blur(10px);
  animation: halo-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}

.logo-container img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

@keyframes logo-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.9),
      inset 0 -3px 8px rgba(0, 139, 145, 0.12),
      0 0 0 2px rgba(255, 255, 255, 0.4),
      0 0 0 4px rgba(0, 181, 189, 0.25),
      0 0 24px rgba(0, 181, 189, 0.55),
      0 0 48px rgba(0, 181, 189, 0.28),
      0 0 80px rgba(0, 181, 189, 0.12),
      0 8px 20px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.95),
      inset 0 -3px 10px rgba(0, 139, 145, 0.18),
      0 0 0 2px rgba(255, 255, 255, 0.55),
      0 0 0 4px rgba(0, 181, 189, 0.4),
      0 0 32px rgba(0, 181, 189, 0.75),
      0 0 64px rgba(0, 181, 189, 0.42),
      0 0 100px rgba(0, 181, 189, 0.22),
      0 10px 28px rgba(0, 0, 0, 0.25);
  }
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

@keyframes rays-rotate {
  to { transform: rotate(360deg); }
}

/* Pause animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-container,
  .logo-container::before,
  .logo-container::after { animation: none; }
}

/* Smaller footer variant */
.logo-container-sm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f0fdfe 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 2px rgba(0, 181, 189, 0.3),
    0 0 14px rgba(0, 181, 189, 0.55),
    0 0 28px rgba(0, 181, 189, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.18);
}
.logo-container-sm::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 181, 189, 0.7) 8deg, transparent 20deg,
    transparent 80deg,
    rgba(77, 212, 218, 0.6) 88deg, transparent 100deg,
    transparent 160deg,
    rgba(0, 181, 189, 0.7) 168deg, transparent 180deg,
    transparent 240deg,
    rgba(77, 212, 218, 0.6) 248deg, transparent 260deg,
    transparent 320deg,
    rgba(0, 181, 189, 0.7) 328deg, transparent 340deg
  );
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 54%, #000 92%, transparent 100%);
          mask: radial-gradient(circle, transparent 50%, #000 54%, #000 92%, transparent 100%);
  z-index: -1;
  animation: rays-rotate 16s linear infinite;
}
.logo-container-sm img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
}

/* ============ Zone Colors ============ */
.zone-green {
  background-color: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.zone-yellow {
  background-color: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.zone-orange {
  background-color: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.zone-red {
  background-color: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.35);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ============ Sidebar ============ */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}
.sidebar-link:hover {
  background-color: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateX(4px);
}
.sidebar-link.active {
  background-color: rgba(0,181,189,0.25);
  color: #fff;
  border-left: 3px solid var(--weqaya-teal);
}

/* ============ Cards ============ */
.stat-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* ============ Buttons ============ */
.btn-primary {
  background: linear-gradient(135deg, var(--weqaya-teal) 0%, var(--weqaya-teal-dark) 100%);
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,181,189,0.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,181,189,0.4);
}
.btn-secondary {
  background: #fff;
  color: var(--weqaya-blue);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-secondary:hover {
  border-color: var(--weqaya-teal);
  color: var(--weqaya-teal);
}
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* ============ Tables ============ */
table.data-table {
  width: 100%;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
table.data-table thead {
  background: linear-gradient(135deg, var(--weqaya-blue-deeper) 0%, var(--weqaya-blue) 100%);
  color: #fff;
}
table.data-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}
table.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
}
table.data-table tr:hover {
  background-color: rgba(0,181,189,0.04);
}

/* ============ Inputs ============ */
.input-field {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  background: white;
}
.input-field:focus {
  outline: none;
  border-color: var(--weqaya-teal);
  box-shadow: 0 0 0 3px rgba(0,181,189,0.15);
}

/* ============ Modal ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-content {
  background: white;
  border-radius: 1rem;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ============ Badges ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-gray    { background: #f1f5f9; color: #475569; }

/* ============ Animations ============ */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Loader ============ */
.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid rgba(0,181,189,0.2);
  border-top-color: var(--weqaya-teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Layout: Full Width ============ */
.app-container {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 76px);
}

.sidebar-fixed {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow-y: auto;
}

.main-fullwidth {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 2rem;
}

/* ============ Responsive ============ */
@media (max-width: 1023px) {
  .sidebar-fixed {
    position: fixed;
    top: 76px;
    left: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .sidebar-fixed.open { transform: translateX(0); }
  .main-fullwidth { padding: 1rem; }
}

/* ============ Print ============ */
@media print {
  .no-print { display: none !important; }
  .sidebar-fixed { display: none; }
  .main-fullwidth { padding: 0; }
}

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--weqaya-teal); }

/* ============ Tabs ============ */
.tab-btn {
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover { color: var(--weqaya-teal); }
.tab-btn.active {
  color: var(--weqaya-teal);
  border-bottom-color: var(--weqaya-teal);
}

/* ============ Status Indicators ============ */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.online {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
  animation: pulse-online 2s ease-in-out infinite;
}
@keyframes pulse-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}