:root{
  --bg:#070b14;
  --panel:#0b1220;
  --stroke:rgba(255,255,255,.07);
  --muted:rgba(255,255,255,.55);
  --text:rgba(255,255,255,.92);
  --blue:#3b82f6;
  --green:#22c55e;
  --orange:#f59e0b;
  --purple:#7c3aed;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
}

/* Light Mode */
body.light{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --stroke:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.55);
  --text:#111827;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

body{
  background:var(--bg);
  color:var(--text);
}
.card{
  background:var(--panel);
  border:1px solid var(--stroke);
}
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--stroke);
}
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--stroke);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(900px 600px at 20% 90%, rgba(34,197,94,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
small{color:var(--muted)}

.app{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:280px;
  padding:18px 16px;
  border-right:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  position:sticky;
  top:0;
  height:100vh;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 10px 14px;
}
.brand .logo{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(124,58,237,.95));
  box-shadow:0 10px 30px rgba(59,130,246,.25);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
}
.brand .title{font-weight:800; letter-spacing:.2px}
.brand .sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav-section{
  margin-top:16px;
  padding:10px;
}
.nav-label{
  font-size:12px;
  color:rgba(255,255,255,.40);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:10px 6px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  color:rgba(255,255,255,.72);
  margin-bottom:6px;
  border:1px solid transparent;
}
.nav a:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.06);
}
.nav a.active{
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
  border-color:rgba(59,130,246,.25);
  color:#fff;
}
.nav .icon{
  width:28px;height:28px;border-radius:10px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}

.sidebar-bottom{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  border-top:1px solid var(--stroke);
  padding-top:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.user{
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.user .name{font-size:13px;font-weight:700}
.user .role{font-size:12px;color:var(--muted)}

/* Main */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Topbar */
.topbar{
  height:64px;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--stroke);
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  position:sticky;
  top:0;
  z-index:10;
}

.search{
  flex:1;
  max-width:520px;
  margin:0 18px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.search input{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:rgba(255,255,255,.9);
}
.top-actions{display:flex; align-items:center; gap:10px}

.pill{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  display:flex; align-items:center; gap:8px;
}
.pill:hover{background:rgba(255,255,255,.06)}

.btn{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{
  border-color:rgba(59,130,246,.35);
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.92));
  box-shadow:0 14px 35px rgba(59,130,246,.25);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px}

/* Content */
.content{
  padding:22px;
}

.h1{font-size:30px;font-weight:900;margin:0}
.subtext{color:var(--muted); margin-top:6px}

.grid{
  display:grid;
  gap:16px;
}
.grid.cols-2{grid-template-columns: 1.3fr .7fr}
.grid.cols-4{grid-template-columns: repeat(4, 1fr)}
@media (max-width: 1100px){
  .sidebar{display:none}
  .grid.cols-2{grid-template-columns: 1fr}
  .grid.cols-4{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 680px){
  .grid.cols-4{grid-template-columns: 1fr}
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card .inner{padding:18px}
.card-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.card-title h3{margin:0;font-size:16px}
.kpi{
  display:flex; gap:12px; align-items:flex-end;
}
.kpi .value{font-size:34px;font-weight:900}
.kpi .hint{color:var(--muted);font-size:13px}
.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.80);
}
.badge.green{border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.08); color:rgba(200,255,220,.92)}
.badge.blue{border-color:rgba(59,130,246,.25); background:rgba(59,130,246,.08)}
.badge.orange{border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.08)}
.badge.purple{border-color:rgba(124,58,237,.25); background:rgba(124,58,237,.08)}

.step{
  display:flex; gap:14px; padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.10);
  margin-top:12px;
}
.step .num{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
}
.step h4{margin:0 0 4px 0}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.toolbar{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.12);
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}

.mini{
  position:relative;
  overflow:hidden;
}
.mini .inner{padding:16px}
.mini .mini-row{
  display:flex; align-items:center; justify-content:space-between;
}
.mini .mini-icon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.mini .mini-icon.blue{background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.18)}
.mini .mini-icon.green{background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.18)}
.mini .mini-icon.orange{background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.18)}
.mini .mini-icon.purple{background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.18)}
.mini .label{color:var(--muted);font-size:13px}
.mini .big{font-weight:900;font-size:28px;margin-top:6px}
.mini .small{color:rgba(34,197,94,.9);font-size:12px;margin-top:6px}

/* Collapse */
.sidebar.collapsed{
  width:90px;
}
.sidebar.collapsed .brand .title,
.sidebar.collapsed .brand .sub,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav a span:not(.icon),
.sidebar.collapsed .user{
  display:none;
}

/* Mobile */
@media (max-width: 1100px){
  .sidebar{
    position:fixed;
    left:-280px;
    top:0;
    transition:.3s;
    z-index:1000;
  }
  .sidebar.open{
    left:0;
  }
}


/* =========================
   Theme Contrast Fix
========================= */
body{
  color: var(--text);
}

/* Text + muted */
.nav a{ color: color-mix(in srgb, var(--text) 75%, transparent); }
.nav a:hover{ color: var(--text); }
.subtext, .label, .hint, small{ color: var(--muted) !important; }

/* Inputs / pills / buttons */
.search, .pill, .btn{
  border: 1px solid var(--stroke) !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  color: var(--text) !important;
}

.search input{ color: var(--text) !important; }
.search input::placeholder{ color: var(--muted) !important; }

/* Cards */
.card{
  background: var(--panel) !important;
  border: 1px solid var(--stroke) !important;
}

/* Step blocks */
.step{
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border: 1px solid var(--stroke) !important;
}
.step .num{
  background: color-mix(in srgb, var(--panel) 75%, transparent) !important;
  border: 1px solid var(--stroke) !important;
}

/* Top/side backgrounds */
.sidebar, .topbar{
  background: var(--panel) !important;
  border-color: var(--stroke) !important;
}

/* Light mode gradients (خفيفة) */
body.light{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(124,58,237,.08), transparent 55%),
    radial-gradient(900px 600px at 20% 90%, rgba(34,197,94,.06), transparent 55%),
    var(--bg) !important;
}

/* =========================
   Sidebar Collapse Fix
========================= */
.sidebar{
  overflow:hidden; /* يمنع أي حاجة تطلع برا */
}

.nav a{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* عند collapse نخلي اللينك centered */
.sidebar.collapsed .nav a{
  justify-content:center;
  padding:11px 10px;
}

/* نخلي الأيقونة ثابتة */
.nav .icon{
  flex:0 0 28px;
}

/* النص يتخفي فعليًا */
.sidebar.collapsed .nav a{
  gap:0;
}
.sidebar.collapsed .nav a:not(.active){
  color: rgba(255,255,255,.75);
}
.sidebar.collapsed .nav a span:not(.icon){
  display:none !important;
}

/* brand collapse */
.sidebar.collapsed .brand{
  justify-content:center;
}

/* =========================
   TOOLTIP (Desktop)
========================= */
.nav a { position:relative; }
.nav a[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events:none;
  transition:.15s;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  z-index: 9999;
}
body.light .nav a[data-tip]::after{
  background: rgba(17,24,39,.92);
}
.nav a[data-tip]:hover::after{ opacity: 1; }

/* =========================
   SIDEBAR MINI RAIL (Mobile)
   - شريط أيقونات صغير دائم
========================= */
@media (max-width: 1100px){
  .sidebar{
    width:78px !important;
    left:0 !important;
    position:fixed;
    top:0;
    height:100vh;
    z-index:1000;
    padding:14px 10px;
    transition: .25s;
    overflow:hidden;
  }

  /* نخلي المحتوى يسيب مساحة للشريط */
  .main{
    margin-left:78px;
  }

  /* نخفي الكلام في وضع الموبايل الافتراضي */
  .sidebar .brand .title,
  .sidebar .brand .sub,
  .sidebar .nav-label,
  .sidebar .nav a .txt,
  .sidebar .user-text{
    display:none !important;
  }

  .sidebar .brand{
    justify-content:center;
  }
  .sidebar .brand .logo{
    width:40px;height:40px;
  }

  .sidebar .nav a{
    justify-content:center;
    padding:12px 10px;
  }

  /* نخفي user block ونسيب زر settings بس */
  .sidebar-bottom{
    justify-content:center;
  }
  .sidebar-bottom .user{ display:none !important; }
}

/* =========================
   DRAWER FULL (Mobile)
   - لما تفتح من الزرار ☰
========================= */
@media (max-width: 1100px){
  .sidebar.drawer-open{
    width:280px !important;
  }

  .sidebar.drawer-open .brand .title,
  .sidebar.drawer-open .brand .sub,
  .sidebar.drawer-open .nav-label,
  .sidebar.drawer-open .nav a .txt,
  .sidebar.drawer-open .user-text{
    display:block !important;
  }

  .sidebar.drawer-open .nav a{
    justify-content:flex-start;
  }

  .sidebar.drawer-open .sidebar-bottom .user{
    display:flex !important;
  }
}

/* =========================
   OVERLAY (Mobile Drawer)
========================= */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}
.overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   DESKTOP COLLAPSE FIX (No overflow)
========================= */
.sidebar{ overflow:hidden; }
.nav a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar.collapsed{ width:90px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav a .txt,
.sidebar.collapsed .user,
.sidebar.collapsed .user-text{
  display:none !important;
}
.sidebar.collapsed .nav a{ justify-content:center; padding:11px 10px; gap:0; }
.nav .icon{ flex:0 0 28px; }

/* =========================
   Tooltip logic when collapsed (Desktop)
   - يظهر tooltip فقط في collapse
========================= */
@media (min-width: 1101px){
  .sidebar:not(.collapsed) .nav a[data-tip]::after{ display:none; }
}

/* =========================
   MOBILE MODE (Guaranteed)
   - Mini icon rail always visible
   - Drawer opens full sidebar
========================= */

/* خلي البريك بوينت أوضح للموبايل/التابلت */
@media (max-width: 992px){

  /* Sidebar mini rail */
  .sidebar{
    display:block !important;
    width:78px !important;
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    height:100vh !important;
    z-index:1000 !important;
    padding:14px 10px !important;
    overflow:hidden !important;
    border-right:1px solid var(--stroke) !important;
  }

  /* main content يسيب مساحة للشريط */
  .main{
    margin-left:78px !important;
    width:calc(100% - 78px) !important;
  }

  /* اخفاء النصوص في وضع الموبايل الافتراضي */
  .sidebar .brand .title,
  .sidebar .brand .sub,
  .sidebar .nav-label,
  .sidebar .nav a .txt,
  .sidebar .user-text{
    display:none !important;
  }

  .sidebar .brand{
    justify-content:center !important;
  }

  .sidebar .nav a{
    justify-content:center !important;
    padding:12px 10px !important;
  }

  .sidebar-bottom{
    justify-content:center !important;
  }
  .sidebar-bottom .user{ display:none !important; }

  /* Drawer open: يفتح السايدبار كامل */
  .sidebar.drawer-open{
    width:280px !important;
    overflow:auto !important;
  }

  .sidebar.drawer-open .brand .title,
  .sidebar.drawer-open .brand .sub,
  .sidebar.drawer-open .nav-label,
  .sidebar.drawer-open .nav a .txt,
  .sidebar.drawer-open .user-text{
    display:block !important;
  }

  .sidebar.drawer-open .nav a{
    justify-content:flex-start !important;
  }

  .sidebar.drawer-open .sidebar-bottom .user{
    display:flex !important;
  }

  /* Overlay */
  .overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity:0;
    pointer-events:none;
    transition:.2s;
  }
  .overlay.show{
    opacity:1;
    pointer-events:auto;
  }
}

.toast{
    position:fixed;
    top:20px;
    right:20px;
    background:#111;
    color:#fff;
    padding:15px 20px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,.3);
    z-index:9999;
    transition:.3s;
}
.hidden{opacity:0;transform:translateY(-20px);}
.show{opacity:1;transform:translateY(0);}