/* TopLink - Modern Dark Theme (Solid / High-Contrast)
   الهدف: واجهة "جامدة" وواضحة (بدون شفافية مزعجة)، مع نفس الترتيب العام.
*/
:root{
  --bg:#0a1022;
  --panel:#0f1833;
  --panel2:#111f3f;
  --text:#f3f6ff;
  --muted:rgba(243,246,255,.74);
  --line:rgba(255,255,255,.12);
  --brand:#4f8cff;
  --ok:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
}

/* Base */
body{
  /* خلفية داكنة واضحة (بدون شفافية/بهتان) */
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(79,140,255,.22), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, rgba(8,12,26,1) 0%, rgba(6,9,20,1) 100%) !important;
  color: var(--text) !important;
}

/* Hidden by default; ui-guard.js will unhide for role=owner */
.owner-only{display:none !important;}
body.is-owner .owner-only{display:block !important;}
body.is-owner .nav .owner-only{display:block !important;}

a{ color: var(--text); }

/* Sidebar */
.sidebar{
  background: rgba(15,24,51,.98) !important;
  border-left:1px solid var(--line) !important;
  backdrop-filter: none !important;
}
.nav a, .nav button.nav-btn{
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color: rgba(243,246,255,.82) !important;
}
.nav a:hover, .nav button.nav-btn:hover{
  background: rgba(79,140,255,.12) !important;
  border-color: rgba(79,140,255,.28) !important;
  color: var(--text) !important;
}
.nav a.active{
  background: rgba(79,140,255,.18) !important;
  border-color: rgba(79,140,255,.35) !important;
  color: var(--text) !important;
}

/* Panels / cards */
.topbar, .panel, .box{
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow) !important;
}

/* Topbar (كانت شفافة في بعض الصفحات) */
.topbar{
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--shadow) !important;
}
.selectRow{
  background: var(--panel2) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
hr{ border-color: rgba(255,255,255,.10) !important; }

/* Inputs */
input, select, textarea{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(243,246,255,.55) !important; }
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(79,140,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(79,140,255,.18) !important;
}

/* Buttons */
button, .btn{
  background: rgba(255,255,255,.07) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
button:hover, .btn:hover{
  background: rgba(255,255,255,.10) !important;
}
button.primary, .btn.primary{
  background: rgba(79,140,255,.92) !important;
  border-color: rgba(79,140,255,.75) !important;
  color: #061027 !important;
}
button.primary:hover, .btn.primary:hover{
  filter: brightness(1.05);
}
button.danger, .btn.danger{
  background: rgba(239,68,68,.90) !important;
  border-color: rgba(239,68,68,.70) !important;
  color: #1a0a0a !important;
}
button.ok, .btn.ok{
  background: rgba(34,197,94,.88) !important;
  border-color: rgba(34,197,94,.70) !important;
  color: #07130c !important;
}

/* Modal overlay (keep readable) */
.modal, .modal-overlay{
  backdrop-filter: none !important;
}

/* Reduce global dimming if any page uses heavy overlays */
.modal{ background: rgba(0,0,0,.45) !important; }

/* Some pages use semi-transparent panels inline; force solid */
.panel{ background: rgba(15,24,51,.96) !important; }
.selectRow{ background: rgba(17,31,63,.96) !important; }

/* تخفيف تعتيم الخلفية مع الـ overlays */
#toplink-uiops-overlay{
  background: rgba(0,0,0,.45) !important;
}

/* Tables / badges (best-effort) */
.badge{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}



/* Live status (cafes) */
.liveStatus{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:10px 0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(0,0,0,.12);
}
.dot{
  width:10px; height:10px;
  border-radius:50%;
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.dot.ok{ background: var(--ok); }
.dot.bad{ background: var(--bad); }

.liveGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin: 0 0 14px;
}
.live-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(255,255,255,.03);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.live-item b{
  color: var(--muted);
  font-weight: 800;
  letter-spacing:.2px;
}