/* FREED 2026 — Navy Glass Theme (v1) */
:root{
  /* Base */
  --bg-0:#0b1220;
  --bg-1:#0f172a;
  --bg-2:#111c33;
  --surface: rgba(17, 28, 51, .55);
  --surface-2: rgba(15, 23, 42, .55);
  --border: rgba(148, 163, 184, .18);
  --border-strong: rgba(148, 163, 184, .28);

  /* Text */
  --text-0:#e5e7eb;
  --text-1:#cbd5e1;
  --text-2:#94a3b8;

  /* Accents */
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --green-500:#10b981;
  --amber-500:#f59e0b;
  --red-500:#ef4444;

  /* Effects */
  --radius-12:12px;
  --radius-16:16px;
  --blur-16:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --glow-blue: 0 0 0 1px rgba(59,130,246,.35), 0 0 28px rgba(59,130,246,.15);
}

/* Global */
html,body{height:100%;}
body{
  margin:0;
  color:var(--text-0);
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(900px 500px at 20% 20%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0));
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  direction: rtl;
}

/* Helpers */
.freed-card{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--blur-16));
  -webkit-backdrop-filter: blur(var(--blur-16));
  border-radius: var(--radius-16);
  box-shadow: var(--shadow);
}

.freed-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text-0);
  border-radius: 12px;
  padding: 10px 14px;
  cursor:pointer;
  transition: .18s ease;
}
.freed-btn:hover{
  box-shadow: var(--glow-blue);
  border-color: rgba(59,130,246,.45);
}

a{ color: var(--blue-500); text-decoration:none; }
a:hover{ color: var(--blue-600); }
/* =========================
   Freed Identity Override Pack (v1)
   Forces the look over inline <style>
   ========================= */

/* 1) Force global look */
body{
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(900px 500px at 20% 20%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0)) !important;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Arial,sans-serif !important;
  color: var(--text-0) !important;
}

/* 2) Make the major containers glass */
.topbar{
  background: rgba(15, 23, 42, .55) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(var(--blur-16)) !important;
  -webkit-backdrop-filter: blur(var(--blur-16)) !important;
}

.sidebar, .main, .card, .modal{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(var(--blur-16)) !important;
  -webkit-backdrop-filter: blur(var(--blur-16)) !important;
  border-radius: var(--radius-16) !important;
}

/* 3) Buttons and tabs */
.btn, .tab{
  border: 1px solid rgba(59,130,246,.30) !important;
  background: rgba(59,130,246,.12) !important;
  color: var(--text-0) !important;
}
.btn:hover, .tab:hover{
  box-shadow: var(--glow-blue) !important;
  border-color: rgba(59,130,246,.45) !important;
}
.btn.ghost{
  background: rgba(255,255,255,.03) !important;
  border-color: var(--border) !important;
}

/* 4) Tables */
.table{
  border: 1px solid var(--border) !important;
}
.table th{
  background: rgba(15,23,42,.70) !important;
  color: var(--text-2) !important;
}
.table td{
  color: var(--text-1) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
}

/* 5) Badges */
.badge{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: var(--text-2) !important;
}
.badge.ok{ background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.30) !important; color: #b6f7d8 !important; }
.badge.warn{ background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.30) !important; color: #ffe6b8 !important; }
.badge.bad{ background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.30) !important; color: #ffb9b9 !important; }

/* 6) Nav active state */
.nav a.active{
  background: rgba(59,130,246,.16) !important;
  border-color: rgba(59,130,246,.32) !important;
}
.nav a:hover{
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.24) !important;
}