/* ── Reset & Base ─────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:    #1D9E75;
  --green-d:  #0F6E56;
  --green-l:  #E1F5EE;
  --green-ll: #F4FEFA;
  --blue:     #3B82F6;
  --blue-l:   #EFF6FF;
  --amber:    #F59E0B;
  --amber-l:  #FFFBEB;
  --red:      #EF4444;
  --red-l:    #FEF2F2;
  --purple:   #8B5CF6;
  --purple-l: #F5F3FF;
  --ink:      #0F172A;
  --ink-2:    #1E293B;
  --ink-3:    #334155;
  --muted:    #64748B;
  --subtle:   #94A3B8;
  --ghost:    #CBD5E1;
  --line:     #E2E8F0;
  --bg:       #F1F5F9;
  --surface:  #FFFFFF;
  --sidebar-w: 252px;
  --topbar-h:  58px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --font: 'IBM Plex Sans Arabic', sans-serif;
  --font-sidebar: 'Cairo', sans-serif;
  --sidebar-text: #E8EDF4;
  --sidebar-text-muted: #A8B8CC;
  --sidebar-text-label: #8FA3B8;
  --mono: 'JetBrains Mono', monospace;
}
html{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg)}
body{display:flex;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:var(--font);cursor:pointer}

/* ── Sidebar ──────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--ink-2);
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;
  overflow-y:auto;overflow-x:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);
  font-family:var(--font-sidebar);
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

/* logo */
.sb-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-logo-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sb-logo-icon svg{width:20px;height:20px;fill:none;stroke:white;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sb-logo-text{overflow:hidden}
.sb-logo-text strong{display:block;font-size:16px;font-weight:700;color:#fff;letter-spacing:1px}
.sb-logo-text span{font-size:10px;color:var(--sidebar-text-muted);letter-spacing:.04em}

/* nav */
.sb-nav{flex:1;padding:10px 0}
.sb-section{margin-bottom:4px}
.sb-section-label{
  font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--sidebar-text-label);text-transform:uppercase;
  padding:10px 16px 4px;
}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;margin:1px 8px;
  border-radius:8px;cursor:pointer;
  color:var(--sidebar-text);font-size:13px;font-weight:500;
  transition:all .15s;position:relative;
}
a.sb-item{text-decoration:none;color:var(--sidebar-text)}
.sb-item:hover{background:rgba(255,255,255,.08);color:#fff}
.sb-item.active{
  background:rgba(29,158,117,.15);
  color:var(--green);font-weight:500;
}
.sb-item.active::before{
  content:'';position:absolute;right:-8px;top:6px;bottom:6px;
  width:3px;background:var(--green);border-radius:2px 0 0 2px;
}
.sb-item svg{width:16px;height:16px;flex-shrink:0;opacity:.7}
.sb-item.active svg{opacity:1}
.sb-item .sb-badge{
  margin-right:auto;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:99px;
}
.badge-red{background:rgba(239,68,68,.2);color:#FCA5A5}
.badge-amber{background:rgba(245,158,11,.2);color:#FCD34D}
.badge-green{background:rgba(29,158,117,.2);color:#6EE7C7}
.badge-blue{background:rgba(59,130,246,.2);color:#93C5FD}

.sb-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 16px}

/* footer */
.sb-footer{
  padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:10px;
}
.sb-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.sb-user-info{flex:1;overflow:hidden}
.sb-user-info p{font-size:12px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-info span{font-size:10px;color:var(--sidebar-text-muted)}
.sb-logout{background:none;border:none;color:var(--sidebar-text-muted);padding:4px;border-radius:5px;font-family:inherit}
.sb-logout:hover{color:var(--red);background:rgba(239,68,68,.1)}
.sb-logout svg{width:15px;height:15px}

/* ── Main ─────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* topbar */
.topbar{
  height:var(--topbar-h);background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 24px;gap:14px;
  position:sticky;top:0;z-index:100;
}
.topbar-title{font-size:15px;font-weight:600;color:var(--ink)}
.topbar-sub{font-size:11px;color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:10px;margin-right:auto}
.topbar-search{
  display:flex;align-items:center;gap:7px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;
  font-size:12px;color:var(--muted);
  width:220px;
}
.topbar-search svg{width:13px;height:13px;opacity:.5;flex-shrink:0}
.topbar-btn{
  width:34px;height:34px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);position:relative;
}
a.topbar-btn{text-decoration:none}
.topbar-btn:hover{background:var(--line);color:var(--ink)}
.topbar-btn svg{width:15px;height:15px}
.notif-dot{
  position:absolute;top:5px;right:5px;
  width:7px;height:7px;border-radius:50%;
  background:var(--red);border:2px solid var(--surface);
}
.topbar-user{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:5px 10px 5px 5px;
}
.topbar-user-av{
  width:26px;height:26px;border-radius:50%;
  background:var(--green);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.topbar-user span{font-size:12px;font-weight:500;color:var(--ink)}

/* content */
.content{flex:1;padding:24px;overflow-y:auto}
.page{display:none}
.page.active{display:block}

/* ── Cards & Grid ─────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--radius-lg);
  border:1px solid var(--line);box-shadow:var(--shadow);
  overflow:hidden;
}
.card-header{
  padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:14px;font-weight:600;color:var(--ink)}
.card-body{padding:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* stat card */
.stat-card{
  background:var(--surface);border-radius:var(--radius-lg);
  border:1px solid var(--line);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;
  bottom:-20px;left:-20px;
  width:80px;height:80px;border-radius:50%;
  opacity:.06;
}
.stat-card.green::after{background:var(--green)}
.stat-card.blue::after{background:var(--blue)}
.stat-card.amber::after{background:var(--amber)}
.stat-card.red::after{background:var(--red)}
.stat-card.purple::after{background:var(--purple)}
.stat-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.stat-icon svg{width:20px;height:20px}
.stat-icon.green{background:var(--green-l);color:var(--green)}
.stat-icon.blue{background:var(--blue-l);color:var(--blue)}
.stat-icon.amber{background:var(--amber-l);color:var(--amber)}
.stat-icon.red{background:var(--red-l);color:var(--red)}
.stat-icon.purple{background:var(--purple-l);color:var(--purple)}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:4px}
.stat-value{font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.stat-delta{
  font-size:11px;font-weight:500;margin-top:6px;
  display:flex;align-items:center;gap:3px;
}
.delta-up{color:var(--green)}
.delta-dn{color:var(--red)}

/* table */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--bg)}
th{
  padding:10px 16px;font-size:11px;font-weight:600;
  color:var(--muted);text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line);letter-spacing:.03em;
}
td{
  padding:12px 16px;font-size:13px;color:var(--ink);
  border-bottom:1px solid var(--line);vertical-align:middle;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}
.td-mono{font-family:var(--mono);font-size:11px;color:var(--blue)}

/* badge */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.badge-active{background:#DCFCE7;color:#15803D}
.badge-inactive{background:#F1F5F9;color:#64748B}
.badge-trial{background:#FFFBEB;color:#B45309}
.badge-expired{background:#FEF2F2;color:#B91C1C}
.badge-pending{background:#EFF6FF;color:#1D4ED8}
.badge-paid{background:#DCFCE7;color:#15803D}
.badge-open{background:#FEF3C7;color:#92400E}
.badge-closed{background:#F1F5F9;color:#64748B}

/* btn */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;
  font-size:12px;font-weight:500;border:none;
  transition:all .14s;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d)}
.btn-ghost{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--line);color:var(--ink)}
.btn-danger{background:var(--red-l);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn svg{width:13px;height:13px}
.btn-icon{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);
  color:var(--muted);transition:all .12s;
}
a.btn-icon{text-decoration:none}
.btn-icon:hover{background:var(--green-l);color:var(--green);border-color:var(--green)}
.btn-icon svg{width:13px;height:13px}

/* search */
.search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;
  font-size:13px;color:var(--ink);width:100%;
}
.search-bar svg{width:14px;height:14px;color:var(--subtle);flex-shrink:0}
.search-bar input{
  border:none;background:none;outline:none;
  font-family:var(--font);font-size:13px;
  color:var(--ink);flex:1;
}

/* pills tabs */
.tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px}
.tab-pill{
  padding:6px 14px;border-radius:7px;border:none;background:none;
  font-family:var(--font);font-size:12px;font-weight:500;
  color:var(--muted);cursor:pointer;transition:all .14s;white-space:nowrap;
}
.tab-pill.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* mini chart bar */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-label{font-size:12px;color:var(--muted);width:90px;flex-shrink:0;text-align:right}
.bar-track{flex:1;height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.bar-val{font-size:12px;font-weight:500;color:var(--ink);width:50px;text-align:left}

/* kpi row */
.kpi-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.kpi-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;
  font-size:12px;color:var(--muted);
}
.kpi-pill span{font-weight:600;color:var(--ink)}
.kpi-dot{width:7px;height:7px;border-radius:50%}

/* notification item */
.notif-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.notif-item:last-child{border-bottom:none}
.notif-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.notif-icon svg{width:16px;height:16px}
.notif-body{flex:1}
.notif-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:2px}
.notif-sub{font-size:12px;color:var(--muted)}
.notif-time{font-size:11px;color:var(--subtle);white-space:nowrap}
.notif-unread .notif-title::before{
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);margin-left:6px;vertical-align:middle;
}

/* ticket */
.ticket-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.ticket-row:last-child{border-bottom:none}
.ticket-priority{width:4px;height:40px;border-radius:2px;flex-shrink:0}
.priority-high{background:var(--red)}
.priority-med{background:var(--amber)}
.priority-low{background:var(--green)}
.ticket-body{flex:1}
.ticket-title{font-size:13px;font-weight:500;margin-bottom:3px}
.ticket-meta{font-size:11px;color:var(--muted)}

/* device card */
.device-card{
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
.device-top{display:flex;align-items:flex-start;justify-content:space-between}
.device-name{font-size:13px;font-weight:600}
.device-id{font-family:var(--mono);font-size:10px;color:var(--blue)}
.device-meta{font-size:11px;color:var(--muted)}

/* faq item */
.faq-item{
  border:1px solid var(--line);border-radius:10px;
  margin-bottom:8px;overflow:hidden;
}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;
  font-size:13px;font-weight:500;
  background:var(--surface);transition:background .12s;
}
.faq-q:hover{background:var(--bg)}
.faq-a{
  padding:0 16px;max-height:0;overflow:hidden;
  font-size:13px;color:var(--muted);line-height:1.7;
  transition:max-height .2s, padding .2s;background:var(--bg);
}
.faq-item.open .faq-a{max-height:200px;padding:12px 16px}
.faq-arrow{width:16px;height:16px;transition:transform .2s;flex-shrink:0;color:var(--subtle)}
.faq-item.open .faq-arrow{transform:rotate(90deg)}

/* sub plan card */
.plan-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;background:var(--surface);
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .15s;
}
.plan-card:hover{box-shadow:var(--shadow-md)}
.plan-card.featured{border-color:var(--green);border-width:2px}
.plan-name{font-size:16px;font-weight:700}
.plan-price{font-size:28px;font-weight:700;color:var(--green)}
.plan-price span{font-size:13px;font-weight:400;color:var(--muted)}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:8px}
.plan-features li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.plan-features li svg{width:14px;height:14px;color:var(--green);flex-shrink:0}

/* progress ring */
.ring-wrap{display:flex;align-items:center;justify-content:center;position:relative}
.ring-label{position:absolute;text-align:center}
.ring-label strong{display:block;font-size:20px;font-weight:700;color:var(--ink)}
.ring-label span{font-size:11px;color:var(--muted)}

/* page section header */
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-hd h2{font-size:15px;font-weight:600;color:var(--ink)}
.section-hd-actions{display:flex;gap:8px;align-items:center}

/* input */
.input{
  width:100%;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;font-family:var(--font);font-size:13px;
  color:var(--ink);background:var(--surface);outline:none;
}
.input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,.1)}
.form-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:5px;display:block}
.form-group{margin-bottom:14px}

/* chart placeholder (CSS only bars) */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:80px;padding:0 4px}
.chart-bar{flex:1;border-radius:4px 4px 0 0;background:var(--green-l);position:relative;transition:background .15s;cursor:pointer;min-height:6px}
.chart-bar:hover{background:var(--green)}
.chart-bar.active{background:var(--green)}

/* toggle */
.toggle{
  width:36px;height:20px;border-radius:99px;
  border:none;cursor:pointer;position:relative;
  transition:background .15s;flex-shrink:0;
}
.toggle.on{background:var(--green)}
.toggle.off{background:var(--ghost)}
.toggle::after{
  content:'';position:absolute;
  top:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:right .15s, left .15s;
}
.toggle.on::after{right:2px}
.toggle.off::after{left:2px}

/* ── Animations ────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.page.active .card,
.page.active .stat-card,
.page.active .plan-card{animation:fadeUp .25s ease both}
.page.active .stat-card:nth-child(2){animation-delay:.04s}
.page.active .stat-card:nth-child(3){animation-delay:.08s}
.page.active .stat-card:nth-child(4){animation-delay:.12s}
.admin-content > .card,
.admin-content > .grid-4 > .stat-card,
.admin-content > .grid-2 > .card{animation:fadeUp .25s ease both}

/* ── Auth (login) ─────────────────────────────── */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(160deg,var(--ink-2) 0%,#0f172a 50%,var(--green-d) 100%);
  font-family:var(--font-sidebar);
}
.auth-card{
  width:100%;max-width:400px;background:var(--surface);
  border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-md);padding:28px 26px;
}
.auth-logo{
  width:48px;height:48px;border-radius:12px;background:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.auth-logo svg{width:26px;height:26px;fill:none;stroke:white;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-title{text-align:center;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px}
.auth-sub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:22px}
.auth-error{
  background:var(--red-l);color:var(--red);font-size:12px;padding:10px 12px;
  border-radius:8px;margin-bottom:14px;border:1px solid rgba(239,68,68,.2);
}
.auth-remember{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:12px 0 18px}
.auth-remember input{width:14px;height:14px;accent-color:var(--green)}
.auth-submit{width:100%;padding:11px;border-radius:8px;border:none;background:var(--green);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font)}
.auth-submit:hover{background:var(--green-d)}

/* ── Responsive ────────────────────────────────── */
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{width:60px}
  .sb-logo-text,.sb-section-label,.sb-item span,.sb-user-info,.sb-logout{display:none}
  .sb-item{justify-content:center;padding:10px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .topbar-search{display:none}
}