/**
 * VERTEX PRO — ثيم عام: خط Cairo ثقيل + أخضر داخل / أحمر خارج
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&display=swap');

:root {
  --vtx-font: 'Cairo', Tahoma, Arial, sans-serif;
  --vtx-green: #22c55e;
  --vtx-green-dark: #16a34a;
  --vtx-red: #ef4444;
  --vtx-red-dark: #dc2626;
  --vtx-blue: #3b82f6;
  --vtx-blue-dark: #2563eb;
  --vtx-ink: #0f172a;
  --vtx-muted: #64748b;
  --vtx-bg: #f8fafc;
  --vtx-border: #e2e8f0;
  --green: var(--vtx-green);
  --red: var(--vtx-red);
  --bg: var(--vtx-bg);
  --text: var(--vtx-ink);
}

html,
body,
button,
input,
select,
textarea,
.app,
.main,
.sidebar,
.vertex-sidebar,
.modal,
.modal-card {
  font-family: var(--vtx-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-weight: 700;
  color: var(--vtx-ink);
}

h1, h2, h3, h4,
.top-page-title,
.table-head h3,
.si-table-head h3,
.pi-table-head h3,
.section-head h1,
.exp-page-title,
.page-headline h2 {
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

table th {
  font-weight: 900 !important;
  color: var(--vtx-ink);
}

table td {
  font-weight: 700;
}

table tbody tr:nth-child(even) td {
  background: #fafbfd;
}

table tbody tr:hover td {
  background: #f0f7ff;
}

/* داخل / خارج */
.vtx-in,
.amount-in,
.cc-effect-in,
.cc-effect-in-amt,
.si-collect-paid,
.text-in,
.col-in {
  color: var(--vtx-green) !important;
  font-weight: 900;
}

.vtx-out,
.amount-out,
.cc-effect-out,
.cc-effect-out-amt,
.si-collect-remain,
.text-out,
.col-out {
  color: var(--vtx-red) !important;
  font-weight: 900;
}

.vtx-comm,
.amount-comm,
.col-commission,
.col-comm,
.vtx-amt-comm {
  color: #2563eb !important;
  font-weight: 900;
}

.badge-in,
.move-in,
.vtx-badge-in,
.kind-badge.badge-in,
.move-badge.move-in,
.pill-in {
  background: var(--vtx-green) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.28);
}

.badge-out,
.move-out,
.vtx-badge-out,
.kind-badge.badge-out,
.move-badge.move-out,
.pill-out {
  background: var(--vtx-red) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.28);
}

.badge-return,
.pill-return {
  background: #f59e0b !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.kind-badge,
.move-badge,
.status-badge,
.num-badge,
.money-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.status-badge.approved,
.si-collect-done,
.approved,
.status-badge.ok,
.pill.ok {
  background: var(--vtx-green) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.status-badge.pending,
.pill.warn {
  background: #f59e0b !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.ref-link,
a.ref-link {
  color: #2563eb !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.ref-link:hover {
  color: #1d4ed8 !important;
}

.hero-card,
.vx-hero-bar,
.customer-card-page .hero-card {
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 168, 232, 0.32);
}

.customer-card-page .hero-card {
  background: linear-gradient(90deg, #1e3a8f 0%, #1557b8 30%, #0ea5e9 68%, #7dd3fc 100%) !important;
  border-radius: 999px !important;
}

html[dir="ltr"] .customer-card-page .hero-card {
  background: linear-gradient(90deg, #7dd3fc 0%, #0ea5e9 32%, #1557b8 70%, #1e3a8f 100%) !important;
}

.statement-table th {
  background: #eef2f7 !important;
  border-bottom: 2px solid #dbe3ef !important;
  font-weight: 900 !important;
}

.statement-table td {
  font-weight: 800 !important;
}

.cc-effect-label,
.cc-effect-amt {
  font-weight: 900;
}

.cc-effect-in,
.cc-effect-in-amt {
  color: var(--vtx-green) !important;
}

.cc-effect-out,
.cc-effect-out-amt {
  color: var(--vtx-red) !important;
}

.btn,
.tool-btn,
.quick-btn,
.menu-btn,
.chip,
.quick {
  font-weight: 800 !important;
}

.money-badge {
  color: var(--vtx-green-dark) !important;
  font-weight: 900 !important;
}

.filter-card label,
.field label,
.stat-card span {
  font-weight: 800;
}

.stat-card strong,
.result-card strong {
  font-weight: 900 !important;
}

.si-money-total,
.pi-money-total {
  font-weight: 900 !important;
}

.si-collect-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900 !important;
  background: var(--vtx-green) !important;
  color: #fff !important;
}

.customer-card-page,
.si-list-page .main,
.pi-list-page .main,
.exp-page .main {
  background: var(--vtx-bg) !important;
}

/* Dark mode */
body.dark .vtx-in,
body.dark .amount-in,
body.dark .cc-effect-in,
body.dark .cc-effect-in-amt,
body.dark .si-collect-paid {
  color: #86efac !important;
}

body.dark .vtx-out,
body.dark .amount-out,
body.dark .cc-effect-out,
body.dark .cc-effect-out-amt,
body.dark .si-collect-remain {
  color: #fca5a5 !important;
}

body.dark table tbody tr:nth-child(even) td {
  background: #1a2740 !important;
}

body.dark table tbody tr:hover td {
  background: #1d2b45 !important;
}

body.dark .hero-card,
body.dark .vx-hero-bar {
  background: #0369a1 !important;
}

body.dark .customer-card-page .hero-card {
  background: linear-gradient(90deg, #0c2340 0%, #0369a1 38%, #0ea5e9 72%, #38bdf8 100%) !important;
}

html[dir="ltr"] body.dark .customer-card-page .hero-card {
  background: linear-gradient(90deg, #38bdf8 0%, #0ea5e9 28%, #0369a1 62%, #0c2340 100%) !important;
}

/* ========== الهيدر + الشريط الجانبي ========== */
.vertex-header-bar {
  background: var(--vtx-bg) !important;
  border-color: var(--vtx-border) !important;
  color: var(--vtx-ink) !important;
  font-weight: 800;
}

.vertex-header-title-text,
.vertex-header-nav-btn,
.vertex-header-chip,
.vh-branch-label,
.vh-branch-select {
  font-weight: 900 !important;
  font-family: var(--vtx-font) !important;
}

.vertex-header-search input[type="search"] {
  font-family: var(--vtx-font) !important;
  font-weight: 800 !important;
}

.vertex-header-search input[type="search"]:focus {
  border-color: var(--vtx-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.15) !important;
}

.vertex-header-icon {
  font-weight: 900 !important;
}

.vertex-header-icon:hover {
  color: var(--vtx-blue) !important;
  background: #e8f7fc !important;
}

.vertex-sidebar-v16,
.vertex-sidebar-v16 .menu-title,
.vertex-sidebar-v16 .menu-items a,
.vertex-sidebar-v16 .user-name-v16,
.vertex-sidebar-v16 .user-role-v16,
.vertex-sidebar-logout-v16 {
  font-family: var(--vtx-font) !important;
}

.vertex-sidebar-menu-v16 .menu-title b,
.vertex-sidebar-menu-v16 .menu-items a em {
  font-weight: 900 !important;
  font-size: 12px !important;
}

.user-role-v16 {
  font-weight: 700 !important;
}

.vertex-sidebar-menu-v16 .menu-items a.active {
  box-shadow: none !important;
}

body:not(.dark) .vertex-sidebar-v16,
body:not(.dark) .sidebar.vertex-sidebar-v16 {
  background: #fff !important;
  color: #334155 !important;
  border-inline-start: 1px solid #e2e8f0 !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-items a {
  color: #475569 !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-items a:hover {
  background: #e8f7fc !important;
  color: #008fbf !important;
  border-color: transparent !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-items a.active {
  background: #00a8e8 !important;
  color: #fff !important;
  border-color: transparent !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-items a.active::before {
  display: none !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-title {
  color: #1e293b !important;
  background: transparent !important;
}

body:not(.dark) .vertex-sidebar-menu-v16 .menu-title .menu-bullet,
body:not(.dark) .vertex-sidebar-menu-v16 .menu-title .menu-caret {
  color: #64748b !important;
}

.vertex-sidebar-separator-v16 {
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent) !important;
}

body.dark .vertex-sidebar-separator-v16 {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent) !important;
}

body.dark .vertex-header-bar {
  background: #111827 !important;
}

body.dark .vertex-sidebar-v16 {
  background: #111827 !important;
}