/* UI Overrides: make current System A look like the new dark dashboard
   بدون تغيير أي وظائف (فقط CSS/شكل). */

/* Better default dark surface variables (used across existing CSS) */
body.dark{
  --surface:#0b1220;
  --surface-lowest:#0b1220;
  --surface-low:#0f172a;
  --surface-mid:#0f1a2f;
  --surface-high:#111f38;
  --surface-highest:#152849;

  --border:rgba(255,255,255,0.12);
  --outline-variant:rgba(255,255,255,0.22);

  --text:rgba(255,255,255,0.92);
  --text-muted:rgba(255,255,255,0.62);

  --sidebar:rgba(7,11,20,0.86);
  --sidebar-hover:rgba(255,255,255,0.06);

  --shadow:0 10px 24px rgba(0,0,0,0.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.45);
}

/* Background texture similar to the screenshot */
body.dark{
  background: #050914 !important;
}
body.dark::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(37,99,235,.26), transparent 60%),
    radial-gradient(820px 520px at 85% 18%, rgba(16,185,129,.14), transparent 62%),
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    linear-gradient(180deg, #050914 0%, #070c1b 100%);
  background-size: auto, auto, 320px 320px, 420px 420px, 520px 520px, 620px 620px, auto;
  opacity: .95;
}

/* Header redesign (keep existing ids/buttons) */
.app-header{
  background: rgba(11,18,32,.70) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.header-title{ font-weight: 800; letter-spacing: -.02em; }
.header-sub{ color: var(--text-muted) !important; }

.header-center{
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  min-width: 220px;
  position: relative;
}
.top-search{
  width: min(640px, 100%);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.top-search input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.top-search .hint{
  color: rgba(255,255,255,.40);
  font-size: 12px;
  white-space:nowrap;
}
.global-search-menu{
  position: absolute;
  top: calc(100% + 10px);
  width: min(640px, 100%);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 18, 32, .92);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  z-index: 9999;
  backdrop-filter: blur(14px);
}
.gsm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  color: rgba(255,255,255,.88);
  border: 1px solid transparent;
}
.gsm-row:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.06);
}
.gsm-left{display:flex;align-items:center;gap:10px;}
.gsm-ic{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(47,120,255,.14);border:1px solid rgba(47,120,255,.22);}
.gsm-sub{font-size:12px;color:rgba(255,255,255,.55);}
.gsm-count{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.65);}
.top-icon-btn{
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: var(--transition);
}
.top-icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

.header-user{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
}
.user-role{
  background: rgba(37,99,235,.16) !important;
  color: rgba(37,99,235,.95) !important;
}

/* Sidebar closer to screenshot */
.sidebar{
  background: var(--sidebar) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
}
.nav-item{
  border-radius: 12px !important;
  border: 1px solid transparent;
  color: rgba(255,255,255,.78) !important;
}
.nav-item:hover{
  background: var(--sidebar-hover) !important;
  transform: translateY(-1px);
}
.nav-item.active{
  background: rgba(37,99,235,.18) !important;
  border-color: rgba(37,99,235,.35) !important;
  color: rgba(255,255,255,.92) !important;
}
.sidebar-section{ color: rgba(255,255,255,.40) !important; }
.sidebar-footer{ color: rgba(255,255,255,.30) !important; }

/* Cards + tables feel */
.table-card,.chart-card,.form-card{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.data-table thead th{
  background: rgba(11,18,32,.92) !important;
  border-bottom: 1px solid var(--border) !important;
  color: rgba(255,255,255,.55) !important;
}
.data-table tbody tr{ border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.data-table tbody tr:hover{ background: rgba(255,255,255,.03) !important; }

/* Mobile: hide header-center to keep space */
@media(max-width: 920px){
  .header-center{ display:none; }
}

/* Mobile fixes: don't override bottom navigation behavior */
@media(max-width:768px){
  .sidebar{ border-right:none !important; border-top: 1px solid var(--border) !important; }
  .nav-item{ color: var(--text-muted) !important; }
  .nav-item.active{
    background: rgba(47,120,255,.18) !important;
    border-color: rgba(47,120,255,.35) !important;
    color: rgba(255,255,255,.92) !important;
  }
  .app-header{ height:auto !important; padding: 10px 12px !important; }
  .header-right{ gap:8px; flex-wrap:wrap; justify-content:flex-end; }
  .top-icon-btn{ height:34px; min-width:34px; }
}