@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════
   HEVOTEAM THEME — DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  --primary: #EA1E63;
  --primary-h: 339;
  --primary-light: #ff4d85;
  --primary-dark: #c0154f;
  --primary-a10: rgba(234,30,99,.10);
  --primary-a20: rgba(234,30,99,.20);
  --primary-a30: rgba(234,30,99,.30);

  --blue: #3C69FF;
  --blue-light: #6f9eec;
  --grad-brand: linear-gradient(90deg, #3C69FF 0%, #6f9eec 100%);
  --grad-primary: linear-gradient(135deg, #EA1E63 0%, #ff6b9d 100%);
  --grad-glow: linear-gradient(135deg, rgba(234,30,99,.15) 0%, rgba(60,105,255,.12) 100%);

  --font: 'IBM Plex Sans Arabic', sans-serif;
  --sidebar-w: 260px;
  --topbar-h: 60px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 100px;

  --t: .22s cubic-bezier(.4,0,.2,1);
  --t-spring: .45s cubic-bezier(.34,1.56,.64,1);

  --sh-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --sh-md: 0 4px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --sh-lg: 0 12px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
  --sh-xl: 0 24px 64px rgba(0,0,0,.20);
  --sh-primary: 0 6px 20px rgba(234,30,99,.35);
  --sh-blue: 0 6px 20px rgba(60,105,255,.30);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  --bg:        #f4f5f9;
  --bg2:       #eceef5;
  --surf:      #ffffff;
  --surf2:     #f8f9fc;
  --surf3:     #f0f2f8;
  --card:      #ffffff;
  --card-b:    rgba(0,0,0,.08);
  --sidebar:   #ffffff;
  --sidebar-b: rgba(0,0,0,.06);
  --topbar:    rgba(255,255,255,.92);
  --topbar-b:  rgba(0,0,0,.06);
  --t1:        #0f111a;
  --t2:        #545878;
  --t3:        #8c90aa;
  --inp:       #eef0f8;
  --inp-b:     #dde0f0;
  --div:       rgba(0,0,0,.06);
  --sel:       var(--primary-a10);
  --bn:        rgba(255,255,255,.97);
  --scrollbar: #d0d4e8;
  --success:   #059669;
  --warn:      #d97706;
  --danger:    #dc2626;
  --info:      #2563eb;
  --success-bg: rgba(5,150,105,.09);
  --warn-bg:   rgba(217,119,6,.09);
  --danger-bg: rgba(220,38,38,.09);
  --info-bg:   rgba(37,99,235,.09);
}

/* ══════════════════════════════════════════════════════════
   DARK THEME
══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:        #0a0c15;
  --bg2:       #0f1120;
  --surf:      #151827;
  --surf2:     #1a1e30;
  --surf3:     #1f2438;
  --card:      #151827;
  --card-b:    rgba(255,255,255,.07);
  --sidebar:   #0f1120;
  --sidebar-b: rgba(255,255,255,.06);
  --topbar:    rgba(12,14,24,.94);
  --topbar-b:  rgba(255,255,255,.06);
  --t1:        #eef0fa;
  --t2:        #9098c0;
  --t3:        #545878;
  --inp:       #1a1e30;
  --inp-b:     #252a42;
  --div:       rgba(255,255,255,.06);
  --sel:       var(--primary-a10);
  --bn:        rgba(10,12,21,.97);
  --scrollbar: #252a42;
  --success:   #10b981;
  --warn:      #f59e0b;
  --danger:    #f87171;
  --info:      #60a5fa;
  --success-bg: rgba(16,185,129,.10);
  --warn-bg:   rgba(245,158,11,.10);
  --danger-bg: rgba(248,113,113,.10);
  --info-bg:   rgba(96,165,250,.10);
}

/* ══════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { direction:rtl; scroll-behavior:smooth; font-size:15px }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3,h4,h5,h6 { font-family:var(--font); font-weight:700; line-height:1.3; color:var(--t1) }
h1{font-size:1.8rem} h2{font-size:1.5rem} h3{font-size:1.2rem} h4{font-size:1rem}
p { color:var(--t2); margin-bottom:.75rem }
a { color:var(--primary); text-decoration:none; transition:color var(--t) }
a:hover { color:var(--primary-light) }
::selection { background:var(--primary-a20); color:var(--primary) }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:10px }
::-webkit-scrollbar-thumb:hover { background:var(--primary) }
img { max-width:100% }
code { font-family:monospace; font-size:.88em; background:var(--inp); padding:2px 7px; border-radius:var(--r-xs); color:var(--info) }

/* ══════════════════════════════════════════════════════════
   LAYOUT — SIDEBAR + MAIN
══════════════════════════════════════════════════════════ */
.hv-shell {
  display:flex;
  min-height:100vh;
}

/* ──── SIDEBAR ──── */
.hv-sidebar {
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--sidebar);
  border-left:1px solid var(--sidebar-b);
  position:fixed;
  top:0; right:0; bottom:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  transition:transform var(--t), background .3s ease;
}

.hv-sidebar::-webkit-scrollbar { width:3px }

/* Sidebar Brand */
.hv-sb-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sidebar-b);
  text-decoration:none;
  flex-shrink:0;
}
.hv-sb-logo {
  width:40px; height:40px;
  border-radius:12px;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:var(--sh-primary);
  transition:transform var(--t-spring);
}
.hv-sb-logo:hover { transform:scale(1.05) rotate(-3deg) }
.hv-sb-logo svg { width:22px; height:22px; fill:#fff }
.hv-sb-name {
  font-size:1.05rem; font-weight:800;
  background:var(--grad-primary);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-.3px;
}

/* Sidebar User Card */
.hv-sb-user {
  margin:12px 10px;
  padding:12px;
  background:var(--surf2);
  border-radius:var(--r);
  border:1px solid var(--card-b);
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition:all var(--t);
}
.hv-sb-user:hover { background:var(--primary-a10); border-color:var(--primary-a20) }
.hv-sb-avatar {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
  flex-shrink:0;
}
.hv-sb-uname { font-weight:600; font-size:13.5px; color:var(--t1) }
.hv-sb-balance {
  font-size:12px; color:var(--primary);
  font-weight:600; margin-top:1px;
}

/* Sidebar Section Label */
.hv-sb-label {
  padding:8px 18px 4px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--t3);
}

/* Sidebar Nav Links */
.hv-sb-nav { padding:4px 10px; flex:1 }
.hv-sb-link {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  color:var(--t2);
  font-size:13.5px;
  font-weight:500;
  transition:all var(--t);
  text-decoration:none;
  position:relative;
  margin-bottom:1px;
}
.hv-sb-link .icon { flex-shrink:0; opacity:.7; transition:opacity var(--t) }
.hv-sb-link .icon svg { width:18px; height:18px; stroke-width:1.8 }
.hv-sb-link:hover {
  background:var(--inp);
  color:var(--t1);
}
.hv-sb-link:hover .icon { opacity:1 }
.hv-sb-link.active {
  background:var(--primary-a10);
  color:var(--primary);
  font-weight:600;
}
.hv-sb-link.active .icon { opacity:1 }
.hv-sb-link.active::before {
  content:'';
  position:absolute;
  right:-10px; top:50%;
  transform:translateY(-50%);
  width:3px; height:60%;
  background:var(--grad-primary);
  border-radius:3px;
}
.hv-sb-badge {
  margin-right:auto;
  background:var(--primary);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:1px 7px;
  border-radius:var(--r-pill);
  line-height:1.6;
}

/* Sidebar Footer */
.hv-sb-footer {
  padding:12px 10px;
  border-top:1px solid var(--sidebar-b);
  flex-shrink:0;
}

/* Theme Toggle — 3 buttons */
.hv-theme-row {
  display:flex;
  align-items:center;
  background:var(--inp);
  border:1px solid var(--inp-b);
  border-radius:var(--r);
  padding:3px;
  gap:2px;
  margin-bottom:8px;
}
.hv-theme-btn {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:5px;
  padding:7px 6px;
  border-radius:var(--r-sm);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--t3);
  font-family:var(--font);
  font-size:11px;
  font-weight:600;
  transition:all var(--t);
}
.hv-theme-btn svg { width:14px; height:14px; stroke-width:2; flex-shrink:0 }
.hv-theme-btn:hover { color:var(--t1); background:var(--surf) }
.hv-theme-btn.active {
  background:var(--surf);
  color:var(--primary);
  box-shadow:var(--sh-xs);
}
[data-theme="dark"] .hv-theme-btn.active {
  background:var(--surf2);
}

.hv-sb-signout {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:var(--t3);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all var(--t);
  text-decoration:none;
  width:100%;
  border:none;
  background:none;
  font-family:var(--font);
}
.hv-sb-signout svg { width:17px; height:17px; stroke-width:1.8 }
.hv-sb-signout:hover { color:var(--danger); background:var(--danger-bg) }

/* ──── TOPBAR (mobile + hamburger) ──── */
.hv-topbar {
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  z-index:300;
  height:var(--topbar-h);
  background:var(--topbar);
  border-bottom:1px solid var(--topbar-b);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  align-items:center;
  padding:0 16px;
  gap:12px;
}
.hv-hamburger {
  width:38px; height:38px;
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--inp);
  border:none; cursor:pointer;
  color:var(--t2);
  flex-shrink:0;
  transition:all var(--t);
}
.hv-hamburger svg { width:20px; height:20px; stroke-width:1.8 }
.hv-hamburger:hover { background:var(--primary-a10); color:var(--primary) }
.hv-topbar-brand { display:flex; align-items:center; gap:8px; text-decoration:none; flex:1 }
.hv-topbar-logo { width:32px; height:32px; border-radius:9px; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.hv-topbar-logo svg { width:18px; height:18px; fill:#fff }
.hv-topbar-name { font-size:.95rem; font-weight:800; background:var(--grad-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* Sidebar overlay on mobile */
.hv-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  z-index:190;
  opacity:0;
  transition:opacity var(--t);
}
.hv-overlay.show { opacity:1 }

/* ──── MAIN CONTENT ──── */
.hv-main {
  flex:1;
  margin-right:var(--sidebar-w);
  min-height:100vh;
  transition:margin var(--t);
}
.hv-page {
  max-width:1100px;
  margin:0 auto;
  padding:28px 28px 60px;
}

/* ──── PAGE HEADER ──── */
.hv-page-hdr { margin-bottom:24px }
.hv-page-title {
  font-size:1.4rem; font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.hv-page-title .pg-icon {
  width:38px; height:38px;
  border-radius:10px;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:var(--sh-primary);
}
.hv-page-title .pg-icon svg { width:20px; height:20px; stroke:#fff; stroke-width:2; fill:none }
.hv-page-sub { color:var(--t3); font-size:13px; margin-top:4px; padding-right:48px }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */
.hv-card {
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t), transform var(--t), background .3s ease;
  position:relative;
  overflow:hidden;
}
.hv-card > .card-glow {
  position:absolute;
  top:-50px; right:-50px;
  width:180px; height:180px;
  background:radial-gradient(circle, var(--primary-a10) 0%, transparent 70%);
  pointer-events:none;
}
.hv-card:hover { box-shadow:var(--sh-md) }

.hv-card__hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:12px;
}
.hv-card__title { font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:8px }
.hv-card__title svg { width:17px; height:17px; stroke-width:2; color:var(--primary) }

/* Stat Cards */
.hv-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px }
.hv-stat {
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  transition:all var(--t);
  position:relative; overflow:hidden;
}
.hv-stat:hover { box-shadow:var(--sh-sm); transform:translateY(-1px) }
.hv-stat__ico {
  width:48px; height:48px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hv-stat__ico svg { width:22px; height:22px; stroke-width:1.8 }
.hv-stat__ico--p { background:var(--primary-a20); color:var(--primary) }
.hv-stat__ico--p svg { stroke:var(--primary) }
.hv-stat__ico--b { background:rgba(60,105,255,.12); color:var(--blue) }
.hv-stat__ico--b svg { stroke:var(--blue) }
.hv-stat__ico--s { background:var(--success-bg); color:var(--success) }
.hv-stat__ico--s svg { stroke:var(--success) }
.hv-stat__ico--w { background:var(--warn-bg); color:var(--warn) }
.hv-stat__ico--w svg { stroke:var(--warn) }
.hv-stat__val { font-size:1.55rem; font-weight:800; line-height:1; color:var(--t1) }
.hv-stat__lbl { font-size:12px; color:var(--t3); margin-top:3px }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font); font-size:13.5px; font-weight:600;
  padding:9px 18px;
  border-radius:var(--r-sm);
  border:none; cursor:pointer;
  transition:all var(--t);
  text-decoration:none; white-space:nowrap;
}
.btn svg { width:16px; height:16px; stroke-width:2; flex-shrink:0 }
.btn-primary { background:var(--grad-primary); color:#fff; box-shadow:var(--sh-primary) }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(234,30,99,.4); color:#fff }
.btn-gradient { background:var(--grad-brand); color:#fff; box-shadow:var(--sh-blue) }
.btn-gradient:hover { transform:translateY(-1px); color:#fff }
.btn-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary) }
.btn-outline:hover { background:var(--primary-a10) }
.btn-ghost { background:var(--inp); color:var(--t2); border:1px solid var(--card-b) }
.btn-ghost:hover { background:var(--primary-a10); color:var(--primary); border-color:var(--primary-a30) }
.btn-default { background:var(--inp); color:var(--t2); border:1px solid var(--inp-b) }
.btn-default:hover { background:var(--primary-a10); color:var(--primary) }
.btn-danger-soft { background:var(--danger-bg); color:var(--danger); border:1px solid rgba(220,38,38,.15) }
.btn-danger-soft:hover { background:var(--danger); color:#fff }
.btn-sm { padding:6px 14px; font-size:12.5px }
.btn-xs { padding:4px 10px; font-size:12px; border-radius:var(--r-xs) }
.btn-lg { padding:12px 24px; font-size:15px; border-radius:var(--r) }
.btn-xl { padding:15px 32px; font-size:16px; border-radius:var(--r-lg) }
.btn-block { width:100% }
.btn-pill { border-radius:var(--r-pill) }
.btn:disabled, .btn.disabled { opacity:.45; cursor:not-allowed; transform:none !important }

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.form-group { margin-bottom:18px }
label, .control-label {
  display:block; font-size:13px; font-weight:600;
  color:var(--t2); margin-bottom:7px; letter-spacing:.1px;
}
.form-control {
  width:100%; padding:11px 14px;
  background:var(--inp); border:1.5px solid var(--inp-b);
  border-radius:var(--r-sm); color:var(--t1);
  font-family:var(--font); font-size:14px;
  transition:all var(--t); outline:none;
  appearance:none; -webkit-appearance:none;
}
.form-control:focus {
  border-color:var(--primary);
  background:var(--surf);
  box-shadow:0 0 0 3px var(--primary-a10);
}
.form-control::placeholder { color:var(--t3) }
.form-control:disabled { opacity:.6; cursor:not-allowed }
select.form-control {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c90aa' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:12px center;
  padding-left:34px;
}
textarea.form-control { resize:vertical; min-height:100px; line-height:1.6 }

/* Input with icon */
.inp-wrap { position:relative }
.inp-wrap .inp-icon {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--t3); pointer-events:none;
}
.inp-wrap .inp-icon svg { width:17px; height:17px; stroke-width:1.8 }
.inp-wrap .form-control { padding-right:42px }
.inp-wrap .inp-icon-left {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  cursor:pointer; color:var(--t3); background:none; border:none;
  transition:color var(--t);
}
.inp-wrap .inp-icon-left:hover { color:var(--primary) }
.inp-wrap .inp-icon-left svg { width:17px; height:17px; stroke-width:1.8 }

/* Phone Input */
.hv-phone-wrap { position:relative }
.hv-phone-input {
  display:flex; align-items:stretch;
  border:1.5px solid var(--inp-b); border-radius:var(--r-sm);
  background:var(--inp); transition:all var(--t); overflow:visible;
}
.hv-phone-input:focus-within {
  border-color:var(--primary);
  background:var(--surf);
  box-shadow:0 0 0 3px var(--primary-a10);
}
.hv-phone-cc {
  display:flex; align-items:center; gap:7px;
  padding:0 13px;
  background:var(--surf2); border-left:1.5px solid var(--inp-b);
  cursor:pointer; min-width:108px;
  transition:background var(--t);
  position:relative; user-select:none; flex-shrink:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.hv-phone-cc:hover { background:var(--primary-a10) }
.hv-phone-flag { font-size:18px; line-height:1 }
.hv-phone-code { font-size:13.5px; font-weight:600; color:var(--t1) }
.hv-phone-arrow { flex-shrink:0; color:var(--t3); transition:transform var(--t) }
.hv-phone-arrow svg { width:12px; height:12px; stroke-width:2.5 }
.hv-phone-cc.open .hv-phone-arrow { transform:rotate(180deg) }
.hv-phone-num {
  flex:1; padding:11px 13px;
  background:transparent; border:none; outline:none;
  color:var(--t1); font-family:var(--font); font-size:14px;
  direction:ltr; text-align:right; min-width:0;
}
.hv-phone-num::placeholder { color:var(--t3) }

/* Country Dropdown */
.hv-cc-drop {
  position:absolute; top:calc(100% + 5px); right:0;
  width:270px; background:var(--surf);
  border:1px solid var(--card-b); border-radius:var(--r);
  box-shadow:var(--sh-lg); z-index:400;
  overflow:hidden; display:none;
}
.hv-cc-drop.open { display:block; animation:dropIn .18s ease }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.hv-cc-search { padding:9px; border-bottom:1px solid var(--div) }
.hv-cc-search input {
  width:100%; padding:8px 12px;
  background:var(--inp); border:1px solid var(--inp-b); border-radius:var(--r-sm);
  outline:none; font-family:var(--font); font-size:13px; color:var(--t1);
}
.hv-cc-list { overflow-y:auto; max-height:250px }
.hv-cc-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 13px; cursor:pointer;
  transition:background var(--t); font-size:13.5px;
}
.hv-cc-item:hover { background:var(--primary-a10); color:var(--primary) }
.hv-cc-item.sel { background:var(--primary-a20); color:var(--primary); font-weight:600 }
.hv-cc-item-name { flex:1 }
.hv-cc-item-code { color:var(--t3); font-size:12px }

/* ══════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════ */
.alert {
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 16px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:500; margin-bottom:16px;
  position:relative; border-right:3px solid transparent;
}
.alert svg { width:17px; height:17px; stroke-width:2; flex-shrink:0; margin-top:1px }
.alert-danger  { background:var(--danger-bg);  color:var(--danger);  border-right-color:var(--danger) }
.alert-success { background:var(--success-bg); color:var(--success); border-right-color:var(--success) }
.alert-info    { background:var(--info-bg);    color:var(--info);    border-right-color:var(--info) }
.alert-warning { background:var(--warn-bg);    color:var(--warn);    border-right-color:var(--warn) }
.alert .close {
  position:absolute; top:9px; left:13px;
  background:none; border:none; cursor:pointer;
  color:inherit; opacity:.5; transition:opacity var(--t);
  display:flex; align-items:center; padding:2px;
}
.alert .close:hover { opacity:1 }
.alert .close svg { width:16px; height:16px; stroke-width:2 }
.alert-dismissible { padding-left:38px }
.rtl-alert { text-align:right }

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
.table-responsive { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--card-b) }
.table { width:100%; border-collapse:collapse; font-size:13.5px }
.table thead tr { background:var(--surf2) }
.table th {
  padding:12px 16px; text-align:right;
  font-weight:700; color:var(--t3); font-size:11px;
  text-transform:uppercase; letter-spacing:.6px;
  border-bottom:1px solid var(--div); white-space:nowrap;
}
.table td {
  padding:12px 16px; text-align:right;
  border-bottom:1px solid var(--div); color:var(--t1); vertical-align:middle;
}
.table tbody tr { transition:background var(--t) }
.table tbody tr:hover { background:var(--surf2) }
.table tbody tr:last-child td { border-bottom:none }
.table .link { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rtl-table th,.rtl-table td { text-align:right !important }
.width-40 { max-width:160px }
.width-service-name { min-width:180px }

/* ══════════════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700;
}
.badge svg { width:11px; height:11px; stroke-width:2.5 }
.badge-primary { background:var(--primary-a20); color:var(--primary) }
.badge-success { background:var(--success-bg); color:var(--success) }
.badge-warning { background:var(--warn-bg); color:var(--warn) }
.badge-danger  { background:var(--danger-bg); color:var(--danger) }
.badge-info    { background:var(--info-bg);   color:var(--info) }
.badge-secondary { background:var(--inp); color:var(--t2) }

/* ══════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════ */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:4px; list-style:none; flex-wrap:wrap; margin:22px 0;
}
.pagination li a, .pagination li span {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--inp); border:1px solid var(--inp-b);
  color:var(--t2); font-size:13.5px; font-weight:600;
  transition:all var(--t); text-decoration:none;
}
.pagination li a:hover { background:var(--primary-a10); border-color:var(--primary-a30); color:var(--primary) }
.pagination li.active a { background:var(--grad-primary); border-color:transparent; color:#fff; box-shadow:var(--sh-primary) }
.rtl-pagination { direction:rtl }

/* ══════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════ */
.hv-tabs {
  display:flex; gap:3px; background:var(--inp);
  border-radius:var(--r); padding:4px;
  margin-bottom:20px; overflow-x:auto;
}
.hv-tab {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r-sm);
  color:var(--t2); font-size:13.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  text-decoration:none; border:none; background:none; font-family:var(--font);
  transition:all var(--t);
}
.hv-tab svg { width:15px; height:15px; stroke-width:2; flex-shrink:0 }
.hv-tab:hover { color:var(--t1); background:var(--surf) }
.hv-tab.active { background:var(--surf); color:var(--primary); font-weight:700; box-shadow:var(--sh-xs) }

/* ══════════════════════════════════════════════════════════
   DROPDOWN
══════════════════════════════════════════════════════════ */
.dropdown { position:relative; display:inline-block }
.dropdown-menu {
  position:absolute; top:calc(100% + 7px); right:0;
  min-width:190px; background:var(--surf);
  border:1px solid var(--card-b); border-radius:var(--r);
  box-shadow:var(--sh-lg); z-index:200;
  overflow:hidden; display:none; animation:dropIn .18s ease;
}
.dropdown-menu.show,.dropdown.open .dropdown-menu { display:block }
.dropdown-menu li { list-style:none }
.dropdown-menu li a,.dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; color:var(--t1); font-size:13.5px;
  transition:background var(--t); text-decoration:none; cursor:pointer;
}
.dropdown-menu li a svg,.dropdown-item svg { width:16px; height:16px; stroke-width:1.8; color:var(--t3) }
.dropdown-menu li a:hover,.dropdown-item:hover { background:var(--primary-a10); color:var(--primary) }
.dropdown-menu li.active a { color:var(--primary); background:var(--primary-a10); font-weight:600 }
.dropdown-divider { height:1px; background:var(--div); margin:4px 0 }
.dropdown-max-height { max-height:280px; overflow-y:auto }

/* ══════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px); z-index:1040; display:none;
}
.modal-backdrop.show { display:block }
.modal {
  position:fixed; inset:0; z-index:1050;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal.show { display:flex }
.modal-dialog {
  background:var(--surf); border-radius:var(--r-xl); width:100%; max-width:480px;
  box-shadow:var(--sh-xl); overflow:hidden; animation:modalIn .3s var(--t-spring);
}
@keyframes modalIn { from{opacity:0;transform:scale(.93) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--div);
}
.modal-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:8px }
.modal-title svg { width:18px; height:18px; stroke-width:2; color:var(--primary) }
.modal-body { padding:22px }
.modal-footer {
  padding:15px 22px; border-top:1px solid var(--div);
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}
.close {
  background:none; border:none; cursor:pointer; color:var(--t3);
  width:32px; height:32px; border-radius:var(--r-xs);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.close svg { width:18px; height:18px; stroke-width:2 }
.close:hover { background:var(--danger-bg); color:var(--danger) }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════════════════════ */
.hv-auth {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg); position:relative; overflow:hidden;
}
.hv-auth-glow1 {
  position:absolute; width:700px; height:700px;
  background:var(--grad-primary); border-radius:50%;
  top:-350px; right:-250px; opacity:.06; filter:blur(80px); pointer-events:none;
}
.hv-auth-glow2 {
  position:absolute; width:500px; height:500px;
  background:var(--grad-brand); border-radius:50%;
  bottom:-250px; left:-150px; opacity:.06; filter:blur(80px); pointer-events:none;
}
.hv-auth-box { width:100%; max-width:430px; position:relative; z-index:1 }
.hv-auth-logo { text-align:center; margin-bottom:28px }
.hv-auth-mark {
  width:60px; height:60px; border-radius:18px;
  background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-primary); margin:0 auto 14px;
}
.hv-auth-mark svg { width:28px; height:28px; fill:#fff }
.hv-auth-site { font-size:1.35rem; font-weight:800; background:var(--grad-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hv-auth-tag { font-size:13px; color:var(--t3); margin-top:4px }
.hv-auth-card {
  background:var(--card); border:1px solid var(--card-b);
  border-radius:var(--r-xl); padding:30px;
  box-shadow:var(--sh-md);
}
.hv-auth-title { font-size:1.2rem; font-weight:800; margin-bottom:3px }
.hv-auth-sub { font-size:13.5px; color:var(--t3); margin-bottom:22px }
.hv-auth-footer { text-align:center; margin-top:18px; font-size:13.5px; color:var(--t3) }
.hv-auth-footer a { color:var(--primary); font-weight:700 }

/* ══════════════════════════════════════════════════════════
   ORDER SUMMARY
══════════════════════════════════════════════════════════ */
.hv-order-sum {
  background:var(--surf2); border-radius:var(--r-sm);
  padding:14px; margin-top:14px; border:1px solid var(--div);
}
.hv-os-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; font-size:13.5px;
}
.hv-os-row:not(:last-child) { border-bottom:1px solid var(--div) }
.hv-os-lbl { color:var(--t3) }
.hv-os-val { font-weight:700; color:var(--t1) }
.hv-os-val--p { color:var(--primary) }

/* ══════════════════════════════════════════════════════════
   SEARCH
══════════════════════════════════════════════════════════ */
.hv-search { position:relative }
.hv-search .si {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--t3); pointer-events:none;
}
.hv-search .si svg { width:16px; height:16px; stroke-width:1.8 }
.hv-search input {
  width:100%; padding:10px 40px 10px 14px;
  background:var(--inp); border:1.5px solid var(--inp-b);
  border-radius:var(--r-sm); color:var(--t1);
  font-family:var(--font); font-size:13.5px;
  transition:all var(--t); outline:none;
}
.hv-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-a10); background:var(--surf) }

/* ══════════════════════════════════════════════════════════
   CHECKBOX
══════════════════════════════════════════════════════════ */
.hv-check {
  display:flex; align-items:center; gap:9px;
  cursor:pointer; font-size:13.5px; color:var(--t2);
}
.hv-check input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; border-radius:5px;
  border:1.5px solid var(--inp-b); background:var(--inp);
  cursor:pointer; transition:all var(--t); position:relative; flex-shrink:0;
}
.hv-check input[type="checkbox"]:checked { background:var(--grad-primary); border-color:var(--primary) }
.hv-check input[type="checkbox"]:checked::after {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION (Mobile)
══════════════════════════════════════════════════════════ */
.hv-bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:500;
  background:var(--bn); border-top:1px solid var(--topbar-b);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.hv-bn-inner {
  display:flex; align-items:center; justify-content:space-around;
  height:62px; padding:0 8px;
}
.hv-bn-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:6px 10px; border-radius:var(--r);
  color:var(--t3); text-decoration:none; font-size:10px; font-weight:600;
  transition:all var(--t); min-width:50px;
}
.hv-bn-item svg { width:22px; height:22px; stroke-width:1.8; transition:transform var(--t-spring) }
.hv-bn-item.active { color:var(--primary) }
.hv-bn-item.active svg { transform:translateY(-2px) scale(1.1) }
.hv-bn-cta {
  background:var(--grad-primary) !important; color:#fff !important;
  width:50px; height:50px; border-radius:15px;
  box-shadow:var(--sh-primary); padding:0 !important; margin-top:-12px;
}
.hv-bn-cta svg { stroke:#fff !important }
.hv-bn-cta span:not(.bn-ico) { display:none }

/* ══════════════════════════════════════════════════════════
   RTL OVERRIDES
══════════════════════════════════════════════════════════ */
.rtl-form { text-align:right }
.rtl-modal,.rtl-content,.rtl-nav,.rtl-btn,.rtl-ul { direction:rtl }
.rtl-table th,.rtl-table td { text-align:right !important }
.pull-right { float:left } .pull-left { float:right }
.pull-right-middle { display:inline-flex; align-items:center }

/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */
.nowrap { white-space:nowrap }
.text-primary { color:var(--primary)!important }
.text-muted  { color:var(--t3)!important }
.text-success{ color:var(--success)!important }
.text-danger { color:var(--danger)!important }
.text-warn   { color:var(--warn)!important }
.fw-7 { font-weight:700 } .fw-6 { font-weight:600 } .fs-sm { font-size:12px }
.d-flex { display:flex } .ai-c { align-items:center } .jc-sb { justify-content:space-between }
.g-2 { gap:8px } .g-3 { gap:12px }
.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px}
.hv-divider { height:1px; background:var(--div); margin:18px 0 }

/* Animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.hv-fade { animation:fadeUp .3s ease forwards }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skeleton {
  background:linear-gradient(90deg, var(--inp) 25%, var(--surf2) 50%, var(--inp) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r-sm);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hv-sidebar {
    transform:translateX(100%);
    box-shadow:var(--sh-xl);
  }
  .hv-sidebar.open { transform:translateX(0) }
  .hv-main { margin-right:0; padding-top:var(--topbar-h) }
  .hv-topbar { display:flex }
  .hv-bottom-nav { display:block }
  .hv-overlay { display:block }
  body { padding-bottom:70px }
  .hv-page { padding:20px 16px 80px }
}
@media (max-width: 600px) {
  .hv-stat-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 400px) {
  .hv-stat-grid { grid-template-columns:1fr }
}