/* ===========================================
   WiFi System – Light Creative (G4 / 5G / Radar)
   =========================================== */

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

:root{
  --bg1:#f6fbff;
  --bg2:#eef6ff;
  --card:#ffffffcc;
  --line:rgba(15,23,42,.10);
  --text:#0f172a;
  --muted:#5b6b82;

  --cyan:#06b6d4;
  --blue:#3b82f6;
  --violet:#7c3aed;
  --green:#22c55e;

  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --shadow2: 0 10px 28px rgba(59,130,246,.16);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Tajawal',system-ui;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 30%, rgba(6,182,212,.18), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(59,130,246,.18), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(124,58,237,.12), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  overflow-x:hidden;
}

/* ====== خلفية SVG مكتوب عليها "شبكة G4 للإنترنت" (بدون ملفات) ====== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'>\
  <defs>\
    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
      <stop offset='0' stop-color='%2306b6d4' stop-opacity='0.10'/>\
      <stop offset='1' stop-color='%233b82f6' stop-opacity='0.10'/>\
    </linearGradient>\
    <filter id='blur' x='-20%' y='-20%' width='140%' height='140%'>\
      <feGaussianBlur stdDeviation='8'/>\
    </filter>\
  </defs>\
  <rect width='1600' height='900' fill='url(%23g)'/>\
  <g opacity='0.55'>\
    <path d='M220 520c200-210 460-210 660 0' fill='none' stroke='%2306b6d4' stroke-width='10' stroke-linecap='round'/>\
    <path d='M300 560c160-160 360-160 520 0' fill='none' stroke='%233b82f6' stroke-width='10' stroke-linecap='round'/>\
    <path d='M390 600c110-110 240-110 350 0' fill='none' stroke='%237c3aed' stroke-width='10' stroke-linecap='round'/>\
    <circle cx='565' cy='640' r='16' fill='%230f172a' opacity='0.35'/>\
    <circle cx='565' cy='640' r='7' fill='%2306b6d4'/>\
  </g>\
  <g filter='url(%23blur)' opacity='0.22'>\
    <circle cx='1300' cy='160' r='120' fill='%2306b6d4'/>\
    <circle cx='1400' cy='260' r='110' fill='%233b82f6'/>\
    <circle cx='1180' cy='230' r='95' fill='%237c3aed'/>\
  </g>\
  <g opacity='0.55' transform='translate(0,0)'>\
    <text x='80' y='140' font-family='Tajawal, Arial' font-size='72' font-weight='800' fill='%230f172a' opacity='0.15'>شبكة G4 للإنترنت</text>\
    <text x='80' y='140' font-family='Tajawal, Arial' font-size='72' font-weight='800' fill='%2306b6d4' opacity='0.22'>شبكة G4 للإنترنت</text>\
  </g>\
</svg>");
  background-size:cover;
  background-position:center;
}

/* ====== طبقة تأثيرات متحركة: رادار + أعمدة 5G + خطوط بيانات ====== */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

/* Radar */
.fx .radar{
  position:absolute;
  width:520px;
  height:520px;
  left:-120px;
  bottom:-140px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(34,197,94,.20), transparent 52%),
    radial-gradient(circle at center, rgba(34,197,94,.12), transparent 68%),
    radial-gradient(circle at center, rgba(34,197,94,.08), transparent 78%);
  border:1px solid rgba(34,197,94,.22);
  box-shadow: 0 0 0 12px rgba(34,197,94,.06);
}
.fx .radar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(34,197,94,.0) 0 300deg, rgba(34,197,94,.28) 330deg, rgba(34,197,94,.0) 360deg);
  animation: sweep 2.8s linear infinite;
  mix-blend-mode:multiply;
}
@keyframes sweep{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* 5G Bars */
.fx .bars{
  position:absolute;
  right:46px;
  top:34px;
  width:180px;
  height:160px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  opacity:.55;
}
.fx .bars span{
  width:22px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(6,182,212,.90), rgba(59,130,246,.80));
  box-shadow: 0 8px 24px rgba(59,130,246,.20);
  animation: bars 1.2s ease-in-out infinite;
}
.fx .bars span:nth-child(1){ height:40px;  animation-delay:.00s; }
.fx .bars span:nth-child(2){ height:70px;  animation-delay:.10s; }
.fx .bars span:nth-child(3){ height:100px; animation-delay:.20s; }
.fx .bars span:nth-child(4){ height:130px; animation-delay:.30s; }
.fx .bars span:nth-child(5){ height:150px; animation-delay:.40s; }
@keyframes bars{
  0%,100%{ transform:translateY(0); filter:saturate(1); }
  50%{ transform:translateY(-10px); filter:saturate(1.2); }
}

/* Data lines */
.fx .lines{
  position:absolute;
  inset:-40px;
  opacity:.32;
  background:
    linear-gradient(90deg, rgba(59,130,246,.12) 1px, transparent 1px) 0 0/52px 52px,
    linear-gradient(0deg, rgba(6,182,212,.10) 1px, transparent 1px) 0 0/52px 52px;
  animation: drift 18s linear infinite;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-120px, 80px, 0); }
}

/* ====== Topbar ====== */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.4px;
}
.brand::before{
  content:"📶";
  font-size:22px;
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nav a{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--text);
  background:rgba(15,23,42,.02);
}
.nav a:hover{
  border-color: rgba(59,130,246,.22);
  box-shadow: 0 8px 20px rgba(59,130,246,.10);
}
.nav a.active{
  background: linear-gradient(90deg, rgba(6,182,212,.18), rgba(59,130,246,.18));
  border-color: rgba(59,130,246,.25);
  font-weight:700;
}

/* ====== Layout ====== */
.container{max-width:1200px;margin:22px auto;padding:0 16px;position:relative;z-index:1;}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
}

.grid2{
  display:grid;
  grid-template-columns: 1.6fr .8fr;
  gap:16px;
}
@media (max-width: 980px){
  .grid2{ grid-template-columns: 1fr; }
}

/* ====== Inputs / Buttons ====== */
.row{display:flex;align-items:center}
.gap{gap:10px}
.mt{margin-top:12px}
.small{font-size:13px}
.muted{color:var(--muted)}

.input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.88);
  color:var(--text);
  outline:none;
}
textarea.input{min-height:90px; resize:vertical;}
.input:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,.18);
}

.btn{
  padding:12px 16px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:800;
  color:#fff;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: var(--shadow2);
}
.btn:hover{filter:brightness(1.03)}
.btn.light{
  color:var(--text);
  background:rgba(15,23,42,.05);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.gold{
  background: linear-gradient(90deg, #22c55e, #06b6d4);
}
.btn.danger{
  background: linear-gradient(90deg, #ef4444, #f97316);
}
.btn.mini{
  padding:7px 10px;
  font-size:13px;
  font-weight:800;
}

/* ====== Map ====== */
.map{
  height:70vh;
  border-radius:20px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* ====== Tooltip on map ====== */
.leaflet-tooltip.wifi-label{
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
  white-space: nowrap;
}

/* ====== Stats / Lists ====== */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.stat{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--line);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.stat span{color:var(--muted);font-size:13px}
.stat b{display:block;margin-top:6px;font-size:26px;color:var(--blue)}

.list{display:flex;flex-direction:column;gap:10px}
.item{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.92);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
  cursor:pointer;
}
.item:hover{border-color:rgba(59,130,246,.25)}
.item .t{font-weight:800}
.item .s{color:var(--muted);font-size:13px;margin-top:6px}

.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.92)}
.table{width:100%;border-collapse:collapse;min-width:820px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(15,23,42,.08);text-align:right;vertical-align:top}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ====== Modal ====== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.35);display:none;align-items:center;justify-content:center;padding:14px;z-index:50}
.modal.show{display:flex}
.modal-card{
  width:min(540px,100%);
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow: var(--shadow);
}

/* ====== Login Page (New) ====== */
.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  position:relative;
  z-index:1;
}

.login-shell{
  width:min(980px,100%);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 900px){
  .login-shell{ grid-template-columns:1fr; }
}

.login-hero{
  border-radius:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,212,.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(59,130,246,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  box-shadow: var(--shadow);
  padding:22px;
  position:relative;
  overflow:hidden;
}

.login-hero .title{
  font-size:30px;
  font-weight:900;
  margin:0 0 8px;
}
.login-hero .sub{
  color:var(--muted);
  margin:0 0 14px;
  font-weight:600;
}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.18);
  background: rgba(59,130,246,.08);
  font-weight:800;
  margin-bottom:12px;
}
.badge i{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 0 6px rgba(6,182,212,.14);
}

/* hero animated "wifi pulses" */
.pulses{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.65;
}
.pulses::before, .pulses::after{
  content:"";
  position:absolute;
  left:50%;
  top:62%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(6,182,212,.22);
  animation:pulse 2.6s ease-out infinite;
}
.pulses::after{
  width:680px;height:680px;
  border-color: rgba(59,130,246,.18);
  animation-delay: .6s;
}
@keyframes pulse{
  0%{ transform:translate(-50%,-50%) scale(.55); opacity:0; }
  20%{opacity:.6}
  100%{ transform:translate(-50%,-50%) scale(1.05); opacity:0; }
}

.login-card{
  border-radius:28px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding:22px;
}

.login-card h2{
  margin:0 0 8px;
  font-size:22px;
  font-weight:900;
}
.login-card .desc{
  margin:0 0 14px;
  color:var(--muted);
  font-weight:600;
}

.alert{
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.22);
  padding:12px;
  border-radius:16px;
  margin:10px 0;
  font-weight:700;
  color:#991b1b;
}

/* pick mode button highlight */
#pickMode.active{ box-shadow:0 0 0 4px rgba(34,197,94,.16); }