:root {
  --primary: #F6921E;
  --primary-dk: #E07D0A;
  --primary-lt: #FFF3E0;
  --primary-xlt: #FFF7ED;
  --teal: #0D9488;
  --teal-dk: #0F766E;
  --teal-lt: #CCFBF1;
  --purple: #3E5C8A;
  --purple-lt: #EAEEF5;
  --rose: #DC2626;
  --rose-lt: #FBEAEA;
  --green: #16A34A;
  --green-dk: #15803D;
  --green-lt: #DCFCE7;
  --amber: #F6921E;
  --amber-lt: #FEF3C7;
  --s50: #FAFAFA; --s100: #F5F5F5; --s200: #E5E5E5; --s300: #D4D4D4;
  --s400: #A3A3A3; --s500: #737373; --s600: #525252; --s700: #404040;
  --s800: #262626; --s900: #171717;
  --r: 16px;
  --font: 'Tajawal', sans-serif;
  --sidebar-w: 260px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
  --shadow-md: 0 6px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.13);
  /* flat, restrained elevation — no colored glow, no gradients */
  --glow: var(--shadow-sm);
  --glow-strong: var(--shadow-md);
  --grad-primary: var(--primary);
  --ease: cubic-bezier(.25,.8,.25,1);
  --skel-1: #EAEBEE;
  --skel-2: #F4F5F7;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: #F4F6FA;
  color: var(--s900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}
input, select, textarea, button { font-family: inherit; }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s400); }

/* ===== SIDEBAR — clean light panel (right side) ===== */
.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--sidebar-w); background: var(--card);
  z-index: 100; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.06);
  border-left: 1px solid var(--border);
  border-top-left-radius: 26px; border-bottom-left-radius: 26px;
}
.sidebar-header { padding: 20px 20px 8px; text-align: center; }
.sidebar-logo { height: 56px; width: auto; max-width: 165px; margin: 0 auto; object-fit: contain; display: block; }
html[data-theme="dark"] .sidebar-logo { filter: brightness(0) invert(1); }
.sidebar-brand, .sidebar-label { display: none; }

.sidebar-nav { flex: 1; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  font-size: 14.5px; font-weight: 700; color: var(--text);
  cursor: pointer; border: none; background: none;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  width: 100%; text-align: right; position: relative;
}
.nav-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--muted); stroke-width: 1.8; transition: color .18s; }
.nav-text { flex: 1; }
.nav-item:hover { background: var(--hover); }
.nav-item:hover svg { color: var(--text); }
.nav-item.active {
  background: var(--primary-lt); color: var(--primary); font-weight: 800;
  box-shadow: 0 8px 20px rgba(246,146,30,.18);
}
.nav-item.active svg { color: var(--primary); }
/* شارات موحّدة الشكل (حبّة أنيقة) + أرقام بخطّ جدولي مرتّب */
.nav-badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; line-height: 1; flex-shrink: 0;
  background: var(--s100); color: var(--s500);
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
  transition: background .2s, color .2s, box-shadow .2s;
}
html[data-theme="dark"] .nav-badge { background: var(--hover); color: var(--muted); }
.nav-badge.notif { background: linear-gradient(135deg,#F6921E,#fb923c); color: #fff; box-shadow: 0 2px 7px rgba(246,146,30,.4); }
.nav-item.active .nav-badge { background: var(--primary); color: #fff; box-shadow: 0 2px 7px rgba(246,146,30,.4); }
.sidebar-footer {
  padding: 12px 16px 18px; border-top: 1px solid var(--border);
  text-align: center;
}
.sidebar-footer p { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 14px; }
/* logout button — outlined orange pill */
.logout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px; border: 1.5px solid var(--primary); border-radius: 13px;
  background: transparent; color: var(--primary);
  font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.logout-btn:hover { background: var(--primary); color: #fff; }
.logout-btn svg { display: block; width: 17px; height: 17px; flex-shrink: 0; }

/* Mobile sidebar */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px); z-index: 99;
  opacity: 0; visibility: hidden; transition: all .3s;
}
.sidebar-overlay.open { opacity: 1; visibility: visible; }

@media (max-width: 1023px) {
  .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
}

/* ===== MAIN - ADJUSTED FOR RIGHT SIDEBAR ===== */
.main { margin-right: var(--sidebar-w); min-height: 100vh; min-width: 0; overflow-x: hidden; }
@media (max-width: 1023px) { .main { margin-right: 0; } }
/* الشاشات المتوسّطة (لابتوب صغير): صغّر الشريط الجانبي إلى شريط أيقونات
   ليتّسع المحتوى ولا تتداخل العناصر — دون لمس سلوك الموبايل (≤1023). */
@media (min-width: 1024px) and (max-width: 1279px) {
  body:not(.sidebar-collapsed) { --sidebar-w: 200px; }
  body:not(.sidebar-collapsed) .nav-item { padding: 11px 14px; }
  .content { padding-left: 16px; padding-right: 16px; }
}

/* ===== COLLAPSIBLE SIDEBAR (desktop ≥1024px only) =====
   The collapse toggle and icon-only rail exist ONLY where the
   persistent sidebar is shown. Below 1024px the sidebar is an
   off-canvas drawer that always opens fully expanded — untouched. */
.sidebar-collapse-btn { display: none; }
@media (min-width: 1024px) {
  /* زرّ طيّ ناعم احترافي في زاوية الشريط (الحافة الداخلية) */
  .sidebar-collapse-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; left: 14px; z-index: 3;
    width: 32px; height: 32px;
    border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
    background: var(--card-2); color: var(--muted);
    transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .25s cubic-bezier(.34,1.56,.64,1), left .3s cubic-bezier(.4,0,.2,1);
  }
  .sidebar-collapse-btn:hover { background: var(--primary-lt); color: var(--primary); box-shadow: 0 3px 10px rgba(246,146,30,.22); }
  .sidebar-collapse-btn:active { transform: scale(.88); }
  .sidebar-collapse-btn svg { width: 17px; height: 17px; transition: transform .35s cubic-bezier(.4,0,.2,1); }
  body.sidebar-collapsed .sidebar-collapse-btn { left: 50%; transform: translateX(-50%); top: 12px; }
  body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

  /* logout button gets its icon on desktop (kept icon-only when collapsed) */
  .logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .logout-btn svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }

  /* smooth width / margin animation when toggling */
  .sidebar { transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1); }
  .main { transition: margin-right .3s cubic-bezier(.4,0,.2,1); }
  .nav-item { transition: background .2s, color .2s, padding .3s cubic-bezier(.4,0,.2,1); }

  /* ---- collapsed: icon-only rail ---- */
  body.sidebar-collapsed { --sidebar-w: 76px; }
  body.sidebar-collapsed .nav-text { display: none; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
  /* count badge becomes a small red dot on the icon corner — the SVG stays centered */
  body.sidebar-collapsed .nav-badge {
    position: absolute; top: 8px; left: 50%; transform: translateX(9px);
    width: 9px; height: 9px; min-width: 0; padding: 0; margin: 0;
    font-size: 0; line-height: 0; color: transparent;
    background: #ef4444; border: 2px solid var(--card); border-radius: 50%;
  }
  body.sidebar-collapsed .nav-item.active::before { right: -10px; }
  body.sidebar-collapsed .sidebar-label { display: none; }
  /* مطويّ: نخفي اللوغو (كان يتداخل مع زرّ الطيّ) ونترك مساحة نظيفة للزرّ بالأعلى */
  body.sidebar-collapsed .sidebar-logo { display: none; }
  body.sidebar-collapsed .sidebar-header { padding: 0; height: 54px; }
  body.sidebar-collapsed .sidebar-nav { padding: 8px 10px 16px; }
  body.sidebar-collapsed #themeLabel { display: none; }
  body.sidebar-collapsed .theme-toggle { padding: 10px 0; justify-content: center; }
  body.sidebar-collapsed .sidebar-footer { padding: 14px 8px; }
  body.sidebar-collapsed .sidebar-footer p { display: none; }
}

/* ===== TOPBAR (Blue, Curved, Logo on left, Sidebar button right) ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--primary);
  color: white;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  overflow: hidden;
}
.topbar-left {
  display: flex;
  align-items: center;
}
.topbar-right {
  display: flex;
  align-items: center;
}
.mobile-menu-btn {
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255,255,255,.2);
  border-radius: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all .2s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.3); }
.mobile-menu-btn:focus, .topbar-logo:focus { outline: none; box-shadow: none; }
.mobile-menu-btn:active, .topbar-logo:active { outline: none; -webkit-tap-highlight-color: transparent; }
.mobile-menu-btn svg { width: 26px; height: 26px; }
.topbar-logo {
  height: 42px;
  width: auto;
  max-width: 155px;
  filter: brightness(0) invert(1);   /* يحوّل logo.png الأسود إلى أبيض على الشريط الملوّن */
  display: block;
  object-fit: contain;
}
.topbar-actions {
  display: none;
}
@media (max-width: 1023px) {
  .mobile-menu-btn { display: flex; }
}
@media (min-width: 1024px) {
  .topbar { display: none; }
  .topbar-logo { height: 120px; }
  .mobile-menu-btn { display: none; }
  .sidebar-logo { display: block; height: 80px; max-width: 180px; filter: none; }
  .sidebar-brand { display: none; }
  .sidebar-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    letter-spacing: 0;
  }
}
@media (max-width: 767px) {
  .topbar { padding: 0 14px; height: 54px; }
  .topbar-logo { height: 38px; max-width: 130px; }
  .mobile-menu-btn { width: 38px; height: 38px; }
  .mobile-menu-btn svg { width: 22px; height: 22px; }
  .sidebar-logo { height: 65px; max-width: 160px; }
}

/* ===== CONTENT ===== */
.content { padding: 28px; }
@media (max-width: 767px) { .content { padding: 16px; } }

/* Search Bar */
.search-bar {
  display: flex; gap: 12px; margin-bottom: 24px;
  flex-wrap: wrap; align-items: center;
}
.search-input-wrap {
  flex: 1; min-width: 200px; position: relative;
}
.search-input-wrap svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--s400); pointer-events: none;
}
.search-input {
  width: 100%; padding: 12px 44px 12px 16px;
  border: 2px solid var(--s200); border-radius: 14px;
  font-size: 14px; font-weight: 500; outline: none;
  background: #fff; transition: all .2s; color: var(--s800);
}
.search-input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(246,146,30,.12); }
.search-input::placeholder { color: var(--s400); }

.filter-select {
  padding: 12px 16px; border: 2px solid var(--s200);
  border-radius: 14px; font-size: 13px; font-weight: 700;
  background: #fff; color: var(--s700); outline: none;
  cursor: pointer; min-width: 140px; transition: all .2s;
}
.filter-select:focus { border-color: var(--primary); }

.btn-add {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px; background: var(--grad-primary);
  color: #fff; border: none; border-radius: 14px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  white-space: nowrap;
  box-shadow: var(--glow);
  font-family: var(--font);
}
.btn-add:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: var(--glow-strong); }
.btn-add:active { transform: scale(.97); }
.btn-add svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .search-bar { flex-wrap: wrap; }
  .search-bar .btn-add { width: 100%; justify-content: center; order: 3; }
  .search-bar .filter-select { flex: 1; min-width: 0; }
}

/* ===== ADS TABLE ===== */
.ads-table-wrap {
  background: #fff; border-radius: 20px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  border: 1px solid rgba(0,0,0,.04);
}
.ads-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.ads-table thead { background: var(--card); }
.ads-table th {
  padding: 16px 16px; font-weight: 800; color: var(--text);
  text-align: right; font-size: 13px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.ads-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ads-table tbody tr { transition: background .15s; }
.ads-table tbody tr:hover { background: var(--hover); }
.ads-table tbody tr:last-child td { border-bottom: none; }

.ad-ref {
  font-weight: 800; color: var(--primary);
  font-size: 14px; direction: ltr; display: inline-block;
}
.ad-title-cell { display: flex; align-items: center; gap: 11px; }
.ad-thumb {
  width: 66px; height: 48px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0; background: var(--s100);
}
.ad-title-text { font-weight: 800; color: var(--text); font-size: 14px; line-height: 1.4; }
.loc-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--s600); font-weight: 600; }
.loc-cell svg { width: 15px; height: 15px; color: var(--s400); flex-shrink: 0; }
.views-cell { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--s500); font-weight: 700; white-space: nowrap; }
.views-cell svg { width: 15px; height: 15px; stroke: var(--s400); flex-shrink: 0; }
.m-card-tag.views { color: var(--s500); font-weight: 700; }
.ad-title-sub { font-size: 11px; color: var(--s400); font-weight: 500; }

.cat-badge {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.cat-badge.apt-rent { background: rgba(13,148,136,.1); color: #0D9488; }
.cat-badge.apt-sale { background: rgba(246,146,30,.1); color: #F6921E; }
.cat-badge.car-rent { background: rgba(62,92,138,.1); color: #3E5C8A; }
.cat-badge.car-sale { background: rgba(220,38,38,.1); color: #DC2626; }
.cat-badge.equip-rent { background: rgba(217,119,6,.1); color: #D97706; }
.cat-badge.equip-sale { background: rgba(180,83,9,.1); color: #B45309; }
.cat-badge.shop-rent { background: rgba(37,99,235,.1); color: #2563EB; }
.cat-badge.shop-sale { background: rgba(29,78,216,.1); color: #1D4ED8; }
.cat-badge.farm-rent { background: rgba(22,163,74,.1); color: #16A34A; }
.cat-badge.farm-sale { background: rgba(21,128,61,.1); color: #15803D; }
.cat-badge.free-ad { background: rgba(5,150,105,.1); color: #059669; }

.price-cell { font-weight: 900; color: var(--text); white-space: nowrap; font-size: 14px; }

.actions-cell { display: flex; gap: 8px; }
.btn-icon {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-icon:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-icon:active { transform: scale(.92); }
.btn-icon svg { width: 16px; height: 16px; }
.btn-edit { background: var(--primary-lt); color: var(--primary); }
.btn-edit:hover { background: var(--primary); color: #fff; }
.btn-view { background: rgba(37,99,235,.12); color: #2563EB; }
.btn-view:hover { background: #2563EB; color: #fff; }
.btn-delete { background: var(--rose-lt); color: var(--rose); }
.btn-delete:hover { background: var(--rose); color: #fff; }
.btn-calendar { background: var(--teal-lt); color: var(--teal); }
.btn-calendar:hover { background: var(--teal); color: #fff; }

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--s400);
}
.empty-state svg {
  width: 46px; height: 46px; color: var(--primary); margin-bottom: 16px;
  padding: 20px; box-sizing: content-box; border-radius: 50%;
  background: var(--primary-lt);
}
.empty-state h3 { font-size: 18px; font-weight: 800; color: var(--s500); margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* ===== MOBILE CARDS ===== */
.mobile-cards { display: none; }
@media (max-width: 900px) {
  .ads-table-wrap { display: none; }
  .mobile-cards { display: flex; flex-direction: column; gap: 12px; }
}
.m-card {
  background: var(--card); border-radius: 18px; padding: 16px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  position: relative;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.m-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.m-card-eye-btn {
  position: absolute; top: 12px; left: 12px;
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: var(--s100); color: var(--s500);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 2;
}
.m-card-eye-btn { transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.m-card-eye-btn:hover { background: var(--primary-lt); color: var(--primary); }
.m-card-eye-btn:active { transform: scale(.9); }
.m-card-eye-btn i { font-size: 16px; }
.m-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-left: 44px; }
.m-card-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--s100); }
.m-card-info { flex: 1; }
.m-card-title { font-size: 14px; font-weight: 800; color: var(--s800); margin-bottom: 2px; }
.m-card-ref { font-size: 11px; color: var(--s400); direction: ltr; display: inline-block; }
.m-card-body { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.m-card-tag {
  padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700;
  background: var(--s100); color: var(--s600);
}
.m-card-actions { display: flex; gap: 8px; }
.m-card-btn {
  flex: 1; padding: 10px; border: none; border-radius: 11px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.m-card-btn:active { transform: scale(.95); }
.m-card-btn i { font-size: 14px; }
.m-card-btn.edit { background: var(--primary-lt); color: var(--primary); }
.m-card-btn.edit:hover { background: var(--primary); color: #fff; }
.m-card-btn.delete { background: var(--rose-lt); color: var(--rose); }
.m-card-btn.delete:hover { background: var(--rose); color: #fff; }
.m-card-btn.cal { background: var(--teal-lt); color: var(--teal); }
.m-card-btn.cal:hover { background: var(--teal); color: #fff; }

/* ===== STATS ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.04);
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px; border-radius: 0 0 0 80px;
  opacity: .08;
}
.stat-card.blue::before { background: var(--primary); }
.stat-card.teal::before { background: var(--teal); }
.stat-card.purple::before { background: var(--purple); }
.stat-card.rose::before { background: var(--rose); }
.stat-card.amber::before { background: var(--amber); }
.stat-card.green::before { background: var(--green); }

.stat-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-icon.blue { background: var(--primary-lt); color: var(--primary); }
.stat-icon.teal { background: var(--teal-lt); color: var(--teal); }
.stat-icon.purple { background: var(--purple-lt); color: var(--purple); }
.stat-icon.rose { background: var(--rose-lt); color: var(--rose); }
.stat-icon.amber { background: var(--amber-lt); color: var(--amber); }
.stat-icon.green { background: var(--green-lt); color: var(--green); }

.stat-value { font-size: 28px; font-weight: 900; color: var(--s900); margin-bottom: 2px; }
.stat-label { font-size: 13px; font-weight: 600; color: var(--s400); }

/* Chart area */
.chart-section {
  background: #fff; border-radius: 20px; padding: 24px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.04);
}
.chart-title { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 20px; }
.chart-bars { display: flex; flex-direction: column; gap: 14px; }
.chart-bar-row { display: flex; align-items: center; gap: 12px; }
.chart-bar-label { width: 120px; font-size: 12px; font-weight: 700; color: var(--s600); text-align: left; flex-shrink: 0; }
.chart-bar-track { flex: 1; height: 28px; background: var(--s100); border-radius: 9px; overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.05); }
.chart-bar-fill {
  height: 100%; border-radius: 9px; transition: width .8s var(--ease);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
  font-size: 12px; font-weight: 800; color: #fff; min-width: 30px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.10);
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px); z-index: 200;
  display: none; align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 24px; width: 100%; max-width: 900px;
  box-shadow: var(--shadow-lg); margin-top: 40px; margin-bottom: 40px;
  animation: modalIn .3s ease;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  padding: 24px 28px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--s100);
}
.modal-title { font-size: 18px; font-weight: 900; color: var(--primary); }
.modal-close {
  width: 38px; height: 38px; border-radius: 12px; border: none;
  background: var(--s100); color: var(--s600); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease); font-size: 18px;
}
.modal-close:hover { background: var(--rose-lt); color: var(--rose); }
.modal-close:active { transform: scale(.92); }

.modal-body {
  padding: 28px;
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  grid-auto-rows: max-content;
}
@media (max-width: 900px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
}
.form-group { margin-bottom: 0; }
.modal-body > .form-group:first-child {
  grid-column: 1 / -1;
}
.modal-body > .form-row {
  grid-column: 1 / -1;
}
.modal-body > div[style*="background"] {
  grid-column: 1 / -1;
}
.modal-body > .form-group:has(textarea) {
  grid-column: 1 / -1;
}
.modal-body > .form-group:has(.form-images) {
  grid-column: 1 / -1;
}
.form-label {
  display: block; font-size: 13px; font-weight: 800;
  color: var(--s700); margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--s200); border-radius: 12px;
  font-size: 14px; font-weight: 500; outline: none;
  background: #fff; transition: all .2s; color: var(--s800);
}
/* حقل الهاتف: قائمة دول بأعلام + الرقم في صندوق موحّد */
.tel-row{display:flex;align-items:stretch;direction:ltr;width:100%}
.tel-row>select.tel-cc{
  flex:0 0 auto;width:90px;max-width:90px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-weight:700;font-size:14px;color:var(--s800,#0f172a);
  background:var(--s100,#f1f5f9);border:2px solid var(--s200);border-right:none;
  border-radius:12px 0 0 12px;padding:0 22px 0 9px;outline:none;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px 6px;
}
.tel-row>select.tel-cc:focus{border-color:var(--primary)}
.tel-row>input:last-child{border-radius:0 12px 12px 0}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(246,146,30,.12);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { 
  display: contents;
}
.form-row-3 {
  display: contents;
}

.form-images {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 900px) {
  .form-images { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .form-images { grid-template-columns: repeat(3, 1fr); }
}
.form-img-slot {
  aspect-ratio: 1; border-radius: 12px;
  border: 2px dashed var(--s300); background: var(--s50);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; position: relative;
  overflow: hidden;
}
.form-img-slot:hover { border-color: var(--primary); background: var(--primary-lt); }
.form-img-slot svg { width: 24px; height: 24px; color: var(--s400); }
.form-img-slot img { width: 100%; height: 100%; object-fit: cover; }
.form-img-remove {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--rose); color: #fff;
  border: none; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

.modal-footer {
  padding: 16px 28px 24px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--s100);
}
.btn-save {
  padding: 12px 32px; background: var(--grad-primary); color: #fff;
  border: none; border-radius: 13px; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  box-shadow: var(--glow);
}
.btn-save:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: var(--glow-strong); }
.btn-save:active { transform: scale(.97); }
.btn-cancel {
  padding: 12px 24px; background: var(--s100); color: var(--s600);
  border: none; border-radius: 13px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn-cancel:hover { background: var(--s200); }
.btn-cancel:active { transform: scale(.97); }

/* ===== CALENDAR MODAL ===== */
.cal-modal { max-width: 520px; }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 11px; border: none;
  background: var(--primary-lt); color: var(--primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.cal-nav-btn:hover { background: var(--primary); color: #fff; box-shadow: var(--glow); }
.cal-nav-btn:active { transform: scale(.92); }
.cal-nav-btn svg { width: 18px; height: 18px; }
.cal-month-label { font-size: 16px; font-weight: 800; color: var(--primary); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-day-name {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--s400); padding: 6px 0;
}
.cal-day {
  aspect-ratio: 1; border-radius: 10px; border: none;
  background: none; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--s700); transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.cal-day:hover { background: var(--primary-lt); }
.cal-day.blocked { background: var(--rose-lt); color: var(--rose); font-weight: 800; cursor: default; }
.cal-day.blocked:hover { background: var(--rose-lt); }
.cal-day.past { color: var(--s300); cursor: default; }
.cal-day.past:hover { background: none; }
.cal-day.empty { cursor: default; }
.cal-day.empty:hover { background: none; }
.cal-day.range-start, .cal-day.range-end { background: var(--primary); color: white; }

.blocked-dates-list { margin-top: 16px; }
.blocked-date-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--rose-lt); border-radius: 10px;
  margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--rose);
}
.blocked-date-remove {
  width: 24px; height: 24px; border-radius: 6px; border: none;
  background: rgba(220,38,38,.12); color: var(--rose); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all .2s;
}
.blocked-date-remove:hover { background: var(--rose); color: #fff; }

/* Range & Month controls */
.range-controls {
  display: flex; gap: 8px; margin-top: 16px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.range-btn {
  flex: 1; padding: 8px; border-radius: 10px; border: none;
  font-weight: 700; font-size: 12px; cursor: pointer;
  transition: all .2s;
  background: var(--primary-lt); color: var(--primary);
}
.range-btn.active { background: var(--primary); color: white; }
.range-btn:hover { background: var(--primary-dk); color: white; }
.reset-month-btn {
  background: var(--amber-lt); color: var(--amber);
}
.reset-month-btn:hover { background: var(--amber); color: white; }

/* ===== DELETE CONFIRM ===== */
.confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px); z-index: 300;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-overlay.open { display: flex; }
.confirm-box {
  background: #fff; border-radius: 20px; padding: 32px;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: var(--shadow-lg); animation: modalIn .3s ease;
}
.confirm-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--rose-lt); color: var(--rose);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.confirm-icon svg { width: 28px; height: 28px; }
.confirm-title { font-size: 18px; font-weight: 900; color: var(--s800); margin-bottom: 8px; }
.confirm-text { font-size: 13px; color: var(--s500); margin-bottom: 24px; line-height: 1.6; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.btn-confirm-del {
  padding: 10px 28px; background: var(--rose); color: #fff;
  border: none; border-radius: 12px; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: all .2s;
}
.btn-confirm-del:hover { background: #BE123C; }
.btn-confirm-cancel {
  padding: 10px 24px; background: var(--s100); color: var(--s600);
  border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}

/* Toast */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--s800); color: #fff; padding: 14px 28px;
  border-radius: 14px; font-size: 14px; font-weight: 700;
  z-index: 9999; box-shadow: var(--shadow-lg);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green-dk); }
.toast.error { background: var(--rose); }

/* ===== DEALS ===== */
.deal-card {
  background: #fff; border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; gap: 12px;
}
.deal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.deal-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.deal-card-title { font-size: 15px; font-weight: 900; color: var(--s800); line-height: 1.4; }
.deal-card-ref { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-lt); padding: 2px 8px; border-radius: 6px; font-family: monospace; }
.deal-card-type { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.deal-card-type.rent { background: var(--teal-lt); color: var(--teal); }
.deal-card-type.sale { background: var(--primary-lt); color: var(--primary); }
.deal-card-price { font-size: 20px; font-weight: 900; color: var(--primary); }
.deal-card-client { font-size: 13px; color: var(--s500); font-weight: 600; }
.deal-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.deal-btn { flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .2s; }
.deal-btn.details { background: var(--primary-lt); color: var(--primary); }
.deal-btn.details:hover { background: var(--primary); color: #fff; }
.deal-btn.delete { background: var(--rose-lt); color: var(--rose); }
.deal-btn.delete:hover { background: var(--rose); color: #fff; }
.deal-btn.edit { background: var(--teal-lt); color: var(--teal); }
.deal-btn.edit:hover { background: var(--teal); color: #fff; }

.deal-search-results {
  max-height: 280px; overflow-y: auto; border: 2px solid var(--s200);
  border-radius: 14px; margin-top: 8px; display: none;
}
.deal-search-item {
  padding: 14px 16px; cursor: pointer; transition: background .15s;
  border-bottom: 1px solid var(--s100); display: flex; align-items: center; gap: 12px;
}
.deal-search-item:last-child { border-bottom: none; }
.deal-search-item:hover { background: var(--primary-xlt); }
.deal-search-item.selected { background: var(--primary-lt); }
.deal-search-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--s100); flex-shrink: 0; }
.deal-search-info { flex: 1; }
.deal-search-name { font-size: 14px; font-weight: 800; color: var(--s800); }
.deal-search-meta { font-size: 11px; color: var(--s400); font-weight: 600; }

.revenue-card {
  background: var(--primary);
  border-radius: 20px; padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; box-shadow: var(--shadow-sm);
}
.revenue-card-label { font-size: 14px; font-weight: 700; opacity: .8; margin-bottom: 4px; }
.revenue-card-value { font-size: 32px; font-weight: 900; letter-spacing: -.5px; }
.revenue-card-currency { font-size: 16px; font-weight: 700; opacity: .7; margin-left: 6px; }
.revenue-card-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.revenue-card-icon svg { width: 28px; height: 28px; }

.pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin-top: 20px; padding: 16px;
}
.page-btn {
  width: 38px; height: 38px; border-radius: 11px; border: none;
  background: #fff; color: var(--s600); font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: var(--shadow-sm);
}
.page-btn:hover:not(:disabled) { background: var(--primary-lt); color: var(--primary); transform: translateY(-1px); }
.page-btn.active { background: var(--grad-primary); color: #fff; box-shadow: var(--glow); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-info { font-size: 12px; color: var(--s400); margin: 0 8px; }
.page-ellipsis { color: var(--s400); font-weight: 800; padding: 0 4px; user-select: none; align-self: center; }
/* شريط إحصائيات العملاء */
.cust-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.cust-stats-bar:empty { display: none; }
.cust-stat { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 14px; text-align: center; box-shadow: var(--shadow-sm); }
.cust-stat .v { font-size: 26px; font-weight: 900; color: var(--primary); line-height: 1; }
.cust-stat .l { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.cust-stat.active .v { color: #16a34a; }
.cust-stat.blocked .v { color: #e11d48; }
@media (max-width: 640px) { .cust-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; } .cust-stat { padding: 13px 10px; } .cust-stat .v { font-size: 22px; } }
/* ملاحظات داخلية عن العميل */
.cp-note-area { width: 100%; min-height: 90px; resize: vertical; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--text, #1e293b); background: var(--card); outline: none; line-height: 1.7; }
.cp-note-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(246,146,30,.12); }

/* ===== قسم الإحصائيات ===== */
.stat-empty { padding: 22px; text-align: center; color: var(--muted); font-weight: 600; }
.stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--primary); }
.kpi-card.green::before { background: #16a34a; } .kpi-card.gold::before { background: #eab308; }
.kpi-card.rose::before { background: #e11d48; } .kpi-card.purple::before { background: #7c3aed; }
.kpi-v { font-size: 27px; font-weight: 900; color: var(--text, var(--s900)); line-height: 1.1; }
.kpi-l { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 5px; }
.kpi-sub { font-size: 11px; font-weight: 700; color: var(--primary); margin-top: 4px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stat-panel { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.stat-panel.wide { grid-column: 1 / -1; }
.stat-panel-h { font-size: 15px; font-weight: 800; color: var(--text, var(--s900)); margin-bottom: 16px; }
.hbar-row { display: grid; grid-template-columns: 96px 1fr 46px; align-items: center; gap: 10px; margin-bottom: 10px; }
.hbar-lbl { font-size: 12.5px; font-weight: 700; color: var(--s600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topv-row { display: grid; grid-template-columns: 22px 48px 1fr 46px; align-items: center; gap: 11px; margin-bottom: 8px; padding: 6px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.topv-rank { font-size: 13px; font-weight: 800; color: var(--s400); text-align: center; }
.topv-row:hover { background: var(--s100); }
.topv-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block; }
.topv-noimg { background: repeating-linear-gradient(45deg, var(--s100), var(--s100) 6px, var(--s200) 6px, var(--s200) 12px); }
.topv-main { min-width: 0; }
.topv-title { font-size: 12.5px; font-weight: 700; color: var(--s700, var(--s600)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.topv-val { font-size: 14px; font-weight: 800; color: #7c3aed; text-align: left; }
.hbar-track { height: 10px; background: var(--s100); border-radius: 6px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, #F6921E, #E07D0A); border-radius: 6px; transition: width .5s ease; }
.hbar-fill.views { background: linear-gradient(90deg, #7c3aed, #6d28d9); }
.hbar-fill.sale { background: linear-gradient(90deg, #e11d48, #be123c); }
.hbar-fill.rent { background: linear-gradient(90deg, #0d9488, #0f766e); }
.hbar-val { font-size: 12.5px; font-weight: 800; color: var(--text, var(--s900)); text-align: left; }
.split-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin-bottom: 14px; background: var(--s100); }
.split-seg.rent { background: #0d9488; } .split-seg.sale { background: #e11d48; }
.split-legend { display: flex; justify-content: space-around; font-size: 13px; font-weight: 700; color: var(--s600); }
.split-legend b { color: var(--text, var(--s900)); margin-right: 4px; }
.split-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 4px; }
.dot.rent { background: #0d9488; } .dot.sale { background: #e11d48; }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.vbar-track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.vbar-fill { width: 100%; min-height: 3px; background: linear-gradient(180deg, #F6921E, #E07D0A); border-radius: 5px 5px 0 0; transition: height .5s ease; }
.vbar-lbl { font-size: 10px; font-weight: 700; color: var(--s400); margin-top: 6px; white-space: nowrap; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.mini-kpis .v { font-size: 19px; font-weight: 900; color: var(--primary); }
.mini-kpis .l { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) { .stats-kpis { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hbar-row { grid-template-columns: 80px 1fr 40px; } .vbar-lbl { font-size: 9px; } }
@keyframes loginCardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ============================================================
   ===== REDESIGN 2026: THEME SYSTEM (LIGHT / DARK) =========
   ============================================================ */
:root{
  --bg: #F4F6FA;
  --card: #ffffff;
  --card-2: #FAFAFA;
  --text: var(--s900);
  --muted: var(--s500);
  --border: rgba(0,0,0,.06);
  --border-2: rgba(0,0,0,.10);
  --input-bg: #ffffff;
  --hover: #FAFAFA;
  --thead: var(--primary-xlt);
}
html[data-theme="dark"]{
  /* أسود محايد (بلا أزرق): مقياس رمادي محايد، سطوح سوداء */
  --s900:#f4f4f5; --s800:#e4e4e7; --s700:#c9c9ce; --s600:#a1a1aa;
  --s500:#909098; --s400:#71717a; --s300:#3f3f46; --s200:#333338;
  --s100:#27272a; --s50:#1c1c1f;
  --bg:#0a0a0b; --card:#161618; --card-2:#1e1e21;
  --text:#f2f2f3; --muted:#a1a1aa; --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.14); --input-bg:#131315; --hover:#242427;
  --thead:#1c1c1f;
  --primary-lt:#3a2a12; --primary-xlt:#1c1c1f;
  --teal-lt:#0c2c2a; --purple-lt:#241f33; --rose-lt:#3a1c1c;
  --green-lt:#0e2a1c; --amber-lt:#3a2c10;
  --skel-1:#1c1c1f; --skel-2:#27272b;
}
body{ background:var(--bg); color:var(--text); transition:background .25s,color .25s; }

/* Re-map existing surfaces to themed variables (overrides earlier #fff) */
.ads-table-wrap, .stat-card, .chart-section, .modal, .m-card, .deal-card,
.confirm-box, .page-btn{ background:var(--card); border-color:var(--border); }
.ads-table thead{ background:var(--thead); }
.ads-table td{ border-bottom-color:var(--border); }
.ads-table tbody tr:hover{ background:var(--hover); }
.search-input, .filter-select, .form-input, .form-select, .form-textarea{
  background:var(--input-bg); color:var(--text); border-color:var(--border-2);
}
.modal-header, .modal-footer{ border-color:var(--border); }
.modal-close{ background:var(--hover); color:var(--muted); }
.form-img-slot{ background:var(--card-2); border-color:var(--border-2); }
.stat-value{ color:var(--text); }
.page-btn{ box-shadow:none; border:1px solid var(--border); }

/* Theme toggle — switch row (sidebar) */
.theme-toggle{
  width:100%; display:flex; align-items:center; gap:11px;
  padding:11px 14px; border:none; border-radius:13px; cursor:pointer; margin-bottom:10px;
  background:var(--hover); color:var(--text);
  font-family:inherit; font-size:13.5px; font-weight:700; transition:background .18s;
}
.theme-toggle:hover{ background:var(--card-2); }
.theme-toggle svg{ width:18px; height:18px; color:var(--s500); flex-shrink:0; }
.theme-toggle .tt-label{ flex:1; text-align:right; }
.theme-toggle .ic-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .ic-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .ic-moon{ display:none; }
.tt-switch{
  width:42px; height:24px; border-radius:20px; background:var(--s300);
  position:relative; flex-shrink:0; transition:background .2s;
}
.tt-knob{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s;
}
html[data-theme="dark"] .tt-switch{ background:var(--primary); }
html[data-theme="dark"] .tt-knob{ left:21px; }

/* ============================================================
   ===== FULL PAGE OVERLAY SYSTEM ============================
   ============================================================ */
#fullPage{
  position:fixed; inset:0; z-index:160; background:var(--bg);
  display:none; flex-direction:column; overflow:hidden;
}
#fullPage.open{ display:flex; animation:fpIn .25s ease; }
@keyframes fpIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.fp-topbar{
  flex-shrink:0; display:flex; align-items:center; gap:14px;
  padding:16px 24px; background:var(--primary); color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  border-bottom-left-radius:20px; border-bottom-right-radius:20px;
}
.fp-back{
  width:42px; height:42px; flex-shrink:0; border:none; border-radius:13px;
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.fp-back:hover{ background:rgba(255,255,255,.3); transform:translateX(3px); }
.fp-back svg{ width:22px; height:22px; }
.fp-title{ font-size:18px; font-weight:900; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-topbar-actions{ display:flex; gap:8px; align-items:center; }
.fp-body{ flex:1; overflow-y:auto; padding:28px 24px 40px; }
.fp-footer{
  flex-shrink:0; display:flex; gap:10px; justify-content:flex-end;
  padding:14px 24px; background:var(--card); border-top:1px solid var(--border);
}
@media (max-width:767px){
  .fp-topbar{ padding:12px 16px; }
  .fp-title{ font-size:15px; }
  .fp-body{ padding:18px 14px 32px; }
}

/* full-page form grid (mirrors the old modal-body 2-col layout) */
.fp-form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  grid-auto-rows:max-content; max-width:960px; margin:0 auto;
}
.fp-form-grid > .form-group:first-child{ grid-column:1 / -1; }
.fp-form-grid > .form-row{ grid-column:1 / -1; }
.fp-form-grid > div[style*="background"]{ grid-column:1 / -1; }
.fp-form-grid > .form-group:has(textarea){ grid-column:1 / -1; }
.fp-form-grid > .form-group:has(.form-images){ grid-column:1 / -1; }
.fp-form-grid > .form-group:has(#fVideo){ grid-column:1 / -1; }
@media (max-width:900px){ .fp-form-grid{ grid-template-columns:1fr; } }
.fp-section-hint{ max-width:960px; margin:0 auto 18px; color:var(--muted); font-size:13px; font-weight:600; }

/* ============================================================
   ===== AD FORM — DESKTOP / LAPTOP 2-COLUMN LAYOUT (≥768px) ==
   Applies ONLY at md and above. Below 768px the form keeps its
   original single-column stacked layout — nothing here touches it.
   ============================================================ */
@media (min-width:768px){
  /* one strict 2-col grid spanning the full width (no centered cap).
     scoped with :has(.fp-sec) so ONLY the ad form is affected — other
     fp-form-grid users (e.g. the customer-edit form) are untouched. */
  .fp-form-grid:has(.fp-sec){
    grid-template-columns:1fr 1fr;
    column-gap:32px;   /* gap-x-8 */
    row-gap:24px;      /* gap-y-6 */
    max-width:none;    /* kill the 960px cap → fill the screen horizontally */
    margin:0;
    align-items:start;
  }
  /* dissolve the section wrappers so EVERY field — Ad Info, Description
     & Media, and any dynamic category details — flows into one grid */
  .fp-form-grid:has(.fp-sec) .fp-sec,
  .fp-form-grid:has(.fp-sec) .fp-sec-grid{ display:contents; }

  /* section headings become full-width dividers above their fields */
  .fp-form-grid:has(.fp-sec) .fp-sec-title{
    grid-column:1 / -1;
    font-size:15px; font-weight:900; color:var(--text);
    margin:6px 0 2px;
  }

  /* full-width spanning items: description textarea, the images row,
     and any inline coloured box (e.g. the auction panel) */
  .fp-form-grid:has(.fp-sec) .form-group:has(.form-textarea),
  .fp-form-grid:has(.fp-sec) .form-group:has(.form-images),
  .fp-form-grid:has(.fp-sec) div[style*="background"]{ grid-column:1 / -1; }

  /* every other input/select/number field flows half-width across the
     two columns (override the legacy fp-full single-col hints) */
  .fp-form-grid:has(.fp-sec) .form-group{ grid-column:auto; }

  /* the two toggles stay side-by-side via flex and never stretch */
  .fp-form-grid:has(.fp-sec) .fp-toggles{
    grid-column:1 / -1;
    display:flex; flex-wrap:wrap; align-items:center; gap:28px;
  }
  .fp-form-grid:has(.fp-sec) .fp-toggles .form-group{
    margin-top:0 !important;
    flex:0 0 auto;     /* w-auto — do not fill the column */
  }
}

/* ============================================================
   ===== SITE-STYLE AD VIEW PAGE =============================
   ============================================================ */
.adv{ max-width:920px; margin:0 auto; }
.adv-gallery{ border-radius:20px; overflow:hidden; background:var(--card); border:1px solid var(--border); margin-bottom:18px; }
.adv-main-img{ width:100%; height:380px; object-fit:cover; display:block; background:var(--card-2); }
@media (max-width:767px){ .adv-main-img{ height:240px; } }
.adv-thumbs{ display:flex; gap:8px; padding:10px; }
.adv-thumbs img{ width:84px; height:64px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:all .2s; }
.adv-thumbs img:hover{ border-color:var(--primary); }
.adv-card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.adv-title{ font-size:24px; font-weight:900; color:var(--text); line-height:1.4; margin-bottom:10px; }
.adv-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.adv-badge{ padding:5px 14px; border-radius:20px; font-size:12px; font-weight:800; }
.adv-price{ font-size:32px; font-weight:900; color:var(--primary); }
.adv-price small{ font-size:15px; font-weight:600; color:var(--muted); }
.adv-old{ font-size:18px; color:var(--muted); text-decoration:line-through; margin-inline-start:10px; font-weight:700; }
.adv-row{ display:flex; align-items:center; gap:8px; color:var(--s600); font-size:15px; font-weight:600; padding:8px 0; }
.adv-row svg{ width:18px; height:18px; flex-shrink:0; color:var(--primary); }
.adv-specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; margin:16px 0; }
.adv-spec{ text-align:center; background:var(--card-2); border:1px solid var(--border); border-radius:14px; padding:14px 8px; }
.adv-spec .v{ font-size:20px; font-weight:900; color:var(--primary); }
.adv-spec .l{ font-size:11px; color:var(--muted); font-weight:700; margin-top:3px; }
.adv-carspecs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:16px 0; }
.adv-carspec{ background:var(--card-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.adv-carspec .l{ font-size:11px; color:var(--muted); font-weight:700; }
.adv-carspec .v{ font-size:15px; font-weight:800; color:var(--text); margin-top:3px; }
.adv-desc{ background:var(--card-2); border:1px solid var(--border); border-radius:16px; padding:18px; font-size:15px; color:var(--s600); line-height:1.9; white-space:pre-wrap; font-weight:500; margin-top:6px; }
.adv-sectitle{ font-size:14px; font-weight:900; color:var(--text); margin:18px 0 8px; }
.adv-video iframe{ width:100%; aspect-ratio:16/9; border:none; border-radius:16px; display:block; }

/* ===== AUCTION VIEW — clean 2×2 grid =====
   TR: ad details · TL: winner profile · BR: auction summary · BL: bidders */
.auc-view{ max-width:none; margin:0; }
.auc-gallery-wrap{ max-width:640px; margin:0 auto 18px; }
.auc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:860px){ .auc-grid{ grid-template-columns:1fr; } }
.auc-grid .adv-card{ margin-bottom:0; }
.auc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.auc-winner-banner{
  background:#16a34a; color:#fff; border-radius:14px; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.auc-winner-banner svg{ width:30px; height:30px; flex-shrink:0; }
.auc-winner-banner .t1{ font-size:12px; opacity:.85; font-weight:700; }
.auc-winner-banner .t2{ font-size:17px; font-weight:900; line-height:1.3; }
.auc-winner-banner .t3{ font-size:13px; font-weight:700; opacity:.92; }
.auc-winner-prof{ text-align:center; margin-bottom:8px; }
.auc-winner-prof .cp-avatar{ width:72px; height:72px; font-size:30px; margin:0 auto 10px; }

/* ===== AD / AUCTION DETAILS — DESKTOP 2-COLUMN LAYOUT (≥768px) =====
   Below 768px the details page keeps its original centered single
   column (.adv max-width:920px; margin:0 auto) — nothing changes. */
@media (min-width:768px){
  .adv{
    max-width:none; margin:0;            /* fill the full width, kill side gaps */
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:24px;                            /* gap-6 */
    align-items:start;
  }
  .adv > *{ min-width:0; }
  /* media gallery occupies the left column, spanning the stacked cards */
  .adv > .adv-gallery{ grid-column:1; grid-row:1 / span 2; margin-bottom:0; align-self:start; }
  /* info card + auction card stack in the right column */
  .adv > .adv-card{ grid-column:2; margin-bottom:0; }
  /* ad without any image/video → fall back to a single full-width column */
  .adv:not(:has(.adv-gallery)){ grid-template-columns:1fr; }
  .adv:not(:has(.adv-gallery)) > .adv-card{ grid-column:1; }
}

/* ===== BIDDERS LIST — conditional scroll (desktop ≥768px only) =====
   .bidders-scroll is added by JS only when there are >5 bidders, so
   ≤5 bidders flow naturally. On mobile there is no height cap at all. */
@media (min-width:768px){
  .bidders-list.bidders-scroll{
    max-height:250px;
    overflow-y:auto;
    padding-inline-end:6px !important;   /* room for the thin scrollbar */
  }
}

/* ============================================================
   ===== CUSTOMERS — EXPLORER STYLE TABLE ====================
   ============================================================ */
.cust-table-wrap{ background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.cust-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cust-table thead{ background:var(--thead); }
.cust-table th{
  text-align:right; padding:13px 18px; font-size:12px; font-weight:800; color:var(--primary);
  white-space:nowrap; cursor:pointer; user-select:none; border-bottom:2px solid var(--border);
}
.cust-table th .sort-ind{ font-size:10px; opacity:.6; margin-inline-start:4px; }
.cust-table th:hover{ background:rgba(246,146,30,.08); }
.cust-table td{ padding:12px 18px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.cust-table tbody tr{ cursor:pointer; transition:background .15s; }
.cust-table tbody tr:hover{ background:var(--hover); }
.cust-table tbody tr:last-child td{ border-bottom:none; }
.cust-name-cell{ display:flex; align-items:center; gap:11px; }
.cust-avatar{ width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
.cust-name-txt{ font-weight:800; color:var(--text); }
.cust-phone{ direction:ltr; display:inline-block; font-weight:600; color:var(--s600); }
.cust-activity{ font-size:13px; color:var(--muted); font-weight:600; }
.cust-chip{ padding:3px 9px; border-radius:8px; font-size:11px; font-weight:800; }
.cust-chip.blocked{ background:var(--rose-lt); color:var(--rose); }
.cust-chip.active{ background:var(--green-lt); color:var(--green-dk); }
@media (max-width:767px){ .cust-table th:nth-child(3), .cust-table td:nth-child(3){ display:none; } }

/* ===== CUSTOMER PROFILE PAGE ===== */
.cp-grid{ display:grid; grid-template-columns:340px 1fr; gap:22px; max-width:1100px; margin:0 auto; align-items:start; }
@media (max-width:900px){ .cp-grid{ grid-template-columns:1fr; } }
.cp-card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; box-shadow:var(--shadow-sm); }
.cp-avatar{ width:96px; height:96px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; margin:0 auto 14px; }
.cp-name{ text-align:center; font-size:21px; font-weight:900; color:var(--text); }
.cp-status{ text-align:center; margin:8px 0 18px; }
.cp-info-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; }
.cp-info-row:last-child{ border-bottom:none; }
.cp-info-row svg{ width:17px; height:17px; color:var(--primary); flex-shrink:0; }
.cp-info-row .lbl{ color:var(--muted); font-weight:700; min-width:74px; }
.cp-info-row .val{ color:var(--text); font-weight:700; flex:1; word-break:break-all; }
.cp-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.cp-btn{ display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 8px; border:none; border-radius:10px; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), filter .18s var(--ease); }
.cp-btn:active{ transform:scale(.96); }
.cp-btn svg{ width:14px; height:14px; }
.cp-btn.msg{ background:var(--grad-primary); color:#fff; box-shadow:var(--glow); }
.cp-btn.msg:hover{ filter:brightness(1.04); transform:translateY(-2px); box-shadow:var(--glow-strong); }
.cp-btn.edit:hover, .cp-btn.block:hover, .cp-btn.unblock:hover{ filter:brightness(.97); }
.cp-btn.del:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.cp-btn.edit{ background:var(--teal-lt); color:var(--teal); }
.cp-btn.block{ background:var(--rose-lt); color:var(--rose); }
.cp-btn.unblock{ background:var(--green-lt); color:var(--green-dk); }
.cp-btn.del{ background:var(--rose); color:#fff; }
.cp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.cp-stat{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.cp-stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.cp-stat .v{ font-size:26px; font-weight:900; color:var(--primary); }
.cp-stat .l{ font-size:12px; color:var(--muted); font-weight:700; margin-top:2px; }
.cp-panel{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.cp-panel-title{ font-size:15px; font-weight:900; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.cp-panel-title svg{ width:18px; height:18px; color:var(--primary); }
.cp-panel-count{ display:none; margin-inline-start:auto; background:var(--primary-lt); color:var(--primary); font-size:12px; font-weight:800; min-width:24px; text-align:center; padding:2px 9px; border-radius:20px; }
.cp-act-list{ display:flex; flex-direction:column; }
.cp-act-item{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.cp-act-item:last-child{ border-bottom:none; }
.cp-act-thumb{ width:46px; height:46px; border-radius:11px; object-fit:cover; background:var(--card-2); flex-shrink:0; }
.cp-act-main{ flex:1; min-width:0; }
.cp-act-title{ font-weight:800; color:var(--text); font-size:14px; }
.cp-act-sub{ font-size:12px; color:var(--muted); font-weight:600; }
.cp-act-meta{ font-size:12px; font-weight:800; color:var(--primary); white-space:nowrap; }
.cp-empty{ color:var(--muted); font-size:13px; font-weight:600; text-align:center; padding:18px; }

/* ===== CUSTOMER PROFILE — laptop refinements (≥1024px only) ===== */
@media (min-width:1024px){
  /* fill the width (kills the centered empty side margins) + keep the
     profile card pinned so the tall right column has no dead space */
  .cp-grid{ max-width:none; grid-template-columns:340px minmax(0,1fr); gap:24px; }
  .cp-card{ position:sticky; top:4px; align-self:start; }
  /* block button sits beside "delete account" (was full-width) */
  .cp-btn.del{ grid-column:auto; }
  /* count chip on each panel header */
  .cp-panel-count{ display:inline-block; }
  /* internal scroll once a list grows past ~5 rows */
  .cp-scroll{ max-height:330px; overflow-y:auto; padding-inline-end:6px; }
  .cp-scroll::-webkit-scrollbar{ width:6px; }
}
/* لابتوب صغير: لا تضغط عمودَي ملف العميل جنباً إلى جنب — كدّسهما عمودياً
   ليأخذ كل عنصر عرضه الكامل (تختفي التداخلات وتظهر الأزرار بحجمها). */
@media (min-width:1024px) and (max-width:1279px){
  .cp-grid{ grid-template-columns:1fr; }
  .cp-card{ position:static; }
}

/* ============================================================
   ===== AUCTIONS MANAGEMENT SECTION =========================
   ============================================================ */
.auc-status{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:800; white-space:nowrap; }
.auc-status.live{ background:var(--green-lt); color:var(--green-dk); }
.auc-status.live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); animation:aucPulse 1.4s infinite; }
.auc-status.ended{ background:var(--s100); color:var(--s500); }
.auc-status.stopped{ background:var(--rose-lt); color:var(--rose); }
@keyframes aucPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.auc-cur{ font-weight:900; color:var(--primary); white-space:nowrap; }
.auc-count-badge{ background:var(--primary-lt); color:var(--primary); padding:3px 10px; border-radius:20px; font-size:12px; font-weight:800; }
.btn-stop{ background:var(--amber-lt); color:var(--amber); }
.btn-stop:hover{ background:var(--amber); color:#fff; }
/* auction mobile cards reuse .m-card */
.auc-mcard-row{ display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:3px 0; }
.auc-mcard-row .k{ color:var(--muted); font-weight:700; }
.auc-mcard-row .v{ color:var(--text); font-weight:800; }
.auc-tools-wrap .mobile-cards{ display:none; }
@media (max-width:900px){
  .auc-tools-wrap .ads-table-wrap{ display:none; }
  .auc-tools-wrap .mobile-cards{ display:flex; flex-direction:column; gap:12px; }
}
/* محاذاة موحّدة بين العناوين والخلايا في جدول المزادات (توسيط عدا عمود المزاد) */
.auc-tools-wrap .ads-table th,
.auc-tools-wrap .ads-table td{ text-align:center; vertical-align:middle; }
.auc-tools-wrap .ads-table th:first-child,
.auc-tools-wrap .ads-table td:first-child{ text-align:right; }
.auc-tools-wrap .ads-table .actions-cell{ justify-content:center; }
.auc-date{ font-size:13px; color:var(--s600); font-weight:600; white-space:nowrap; }

/* ============================================================
   ===== ORDERS SECTION — TABBED CARDS (responsive) ==========
   The tabbed layout now works on all sizes; the old stacked
   layout (.orders-mobile) is no longer used.
   ============================================================ */
.orders-mobile{ display:none; }
.orders-desktop{ display:block; }

/* ----- tabs (clean text, centered, orange underline on active) ----- */
.orders-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:22px; border-bottom:1px solid var(--border); }
@media (max-width:560px){ .orders-tabs{ gap:0; } .orders-tabs .orders-tab{ flex:1; padding:13px 6px; font-size:14px; } }
.orders-tab{
  display:inline-flex; align-items:center; justify-content:center; padding:13px 26px;
  border:none; background:none; font-family:inherit; font-size:15px; font-weight:800;
  color:var(--muted); cursor:pointer; border-bottom:3px solid transparent;
  margin-bottom:-1px; transition:color .2s, border-color .2s;
}
.orders-tab:hover{ color:var(--text); }
.orders-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* ----- panes ----- */
.orders-pane{ display:none; }
.orders-pane.active{ display:block; animation:ordFade .25s ease; }
@keyframes ordFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ----- new orders: two columns (booking right, purchase left) ----- */
.orders-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
@media (max-width:760px){ .orders-cols{ grid-template-columns:1fr; } }
.orders-col{ background:var(--card-2); border:1px solid var(--border); border-radius:18px; padding:16px; display:flex; flex-direction:column; }
.orders-col-head{
  display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:900;
  color:var(--text); margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);
}
.orders-col-head svg{ width:18px; height:18px; padding:8px; border-radius:11px; box-sizing:content-box; }
.orders-col-head.booking svg{ color:var(--primary); background:var(--primary-lt); }
.orders-col-head.purchase svg{ color:var(--purple); background:var(--purple-lt); }
.orders-col-count{
  margin-inline-start:auto; background:var(--card); border:1px solid var(--border);
  color:var(--muted); min-width:24px; text-align:center; padding:2px 9px;
  border-radius:20px; font-size:12px; font-weight:800;
}
/* cards distribute in a grid inside each column (handles many cards) */
.orders-col-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; align-content:start; }
.orders-more{
  display:none; margin:16px auto 2px; background:none; border:none; color:var(--primary);
  font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
  padding:7px 14px; border-radius:9px; transition:background .15s;
}
.orders-more:hover{ background:var(--primary-lt); }
.orders-col-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); font-size:14px; font-weight:700; padding:40px 12px;
}
.oce-icon{
  width:86px; height:86px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.oce-icon svg{ width:36px; height:36px; color:var(--s400); }

/* ----- confirmed: toolbar + responsive grid ----- */
.orders-toolbar{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.orders-toolbar .search-input-wrap{ flex:1; min-width:240px; }
.orders-confirmed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; align-items:start; }

/* ----- order card (matches the reference design) ----- */
.ord-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.ord-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
/* header: image on the (RTL) right, title + ref + price stacked on the left */
.ord-card-head{ display:flex; align-items:center; gap:12px; padding:13px; }
.ord-thumb{ width:96px; height:62px; border-radius:11px; object-fit:cover; background:var(--card-2); flex-shrink:0; }
.ord-thumb-ph{ display:flex; align-items:center; justify-content:center; color:var(--s400); border:1px dashed var(--border); }
.ord-thumb-ph svg{ width:26px; height:26px; }
.ord-head-main{ flex:1; min-width:0; text-align:right; }
.ord-title{ font-weight:800; font-size:14.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ord-ref{ font-size:12px; color:var(--muted); font-weight:600; margin-top:3px; }
.ord-price{ font-weight:900; color:var(--primary); font-size:14.5px; margin-top:5px; }
.ord-card-body{ padding:13px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); }
.ord-row{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--s600); font-weight:600; min-width:0; }
.ord-row svg{ width:16px; height:16px; flex-shrink:0; color:var(--s400); }
.ord-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* outlined action buttons */
.ord-card-actions{ display:flex; gap:10px; padding:0 13px 13px; margin-top:auto; }
.ord-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--border-2); border-radius:10px; padding:9px;
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; color:var(--text);
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.ord-btn:active{ transform:scale(.96); }
.ord-btn.confirm{ color:var(--green-dk); border-color:var(--green); }
.ord-btn.confirm:hover{ background:var(--green); color:#fff; }
.ord-btn.process{ color:#fff; background:var(--primary); border-color:var(--primary); }
.ord-btn.process:hover{ filter:brightness(1.05); }
.ord-btn.wa{ color:#1FA855; border-color:#1FA855; }
.ord-btn.wa:hover{ background:#1FA855; color:#fff; }
/* شارة عدّاد على تبويب «الجارية» */
.orders-tab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:20px; background:var(--primary); color:#fff; font-size:11px; font-weight:800; margin-inline-start:6px; }
.orders-hint{ font-size:13px; color:var(--muted); font-weight:600; background:var(--primary-lt); border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin-bottom:18px; line-height:1.7; }
.orders-hint b{ color:var(--text); }
.ord-btn.reject{ color:var(--rose); border-color:var(--rose); }
.ord-btn.reject:hover{ background:var(--rose); color:#fff; }
.ord-btn.edit{ color:var(--text); border-color:var(--border-2); }
.ord-btn.edit:hover{ background:var(--card-2); }
.ord-btn.del{ color:var(--rose); border-color:var(--rose); }
.ord-btn.del:hover{ background:var(--rose); color:#fff; }

/* ============================================================
   ===== SKELETON LOADERS (shimmer) ==========================
   ============================================================ */
@keyframes skelShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, var(--skel-1) 25%, var(--skel-2) 37%, var(--skel-1) 63%);
  background-size: 200% 100%;
  animation: skelShine 1.3s ease-in-out infinite;
  border-radius: 8px;
}
.skel-line { height: 12px; border-radius: 7px; }
.skel-line.sm { height: 10px; }
.skel-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm);
}
.skel-row td { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.skel-act { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }

/* ===== مرافق (مربّعات تبديل) ===== */
.amen-grid{display:flex;flex-wrap:wrap;gap:9px 12px}
.amen-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#334155;cursor:pointer;background:#f8fafc;border:1px solid #e5e9f0;border-radius:10px;padding:8px 12px}
.amen-chk input{width:16px;height:16px;accent-color:#F6921E;cursor:pointer;margin:0}

/* ===== صور الهيرو ===== */
.hero-thumb{position:relative;width:150px;height:90px;border-radius:12px;overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.hero-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hero-thumb .hero-x{position:absolute;top:5px;left:5px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(220,38,38,.92);color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-thumb .hero-mv{position:absolute;bottom:5px;left:5px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(15,23,42,.7);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hero-add{width:150px;height:90px;border-radius:12px;border:2px dashed var(--border-2);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-weight:800;font-size:12.5px;cursor:pointer;background:var(--card-2);line-height:1.5}
.hero-add:hover{border-color:var(--primary);color:var(--primary)}