:root {
  --ui-font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-border: rgba(18, 23, 39, 0.10);
  --ui-muted: rgba(18, 23, 39, 0.62);
  --ui-text: #0f172a;

  --ui-primary: #2563eb;
  --ui-primary-600: #1d4ed8;
  --ui-success: #16a34a;
  --ui-danger: #dc2626;
  --ui-warning: #f59e0b;

  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ui-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
}

html[dir="rtl"] body { font-family: var(--ui-font-ar); }
html[dir="ltr"] body { font-family: var(--ui-font-en); }

body.bg-body-tertiary {
  background: var(--ui-bg) !important;
  color: var(--ui-text);
}

/* Header */
.app-header.navbar {
  border-bottom: 1px solid var(--ui-border);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85) !important;
}
.app-header .nav-link {
  border-radius: 10px;
}
.app-header .nav-link:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* Sidebar */
.app-sidebar {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.app-sidebar.bg-body-secondary {
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) !important;
}
.sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .brand-link {
  padding: 14px 16px;
}
.sidebar-brand .brand-text {
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.sidebar-menu .nav-link {
  margin: 2px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
}
.sidebar-menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.sidebar-menu .nav-link.active {
  background: rgba(37, 99, 235, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.28);
}
.sidebar-menu .nav-link p {
  font-weight: 600;
}

/* Main content container polish */
.container-fluid {
  padding-left: 18px;
  padding-right: 18px;
}

/* Cards */
.card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
}
.card-header {
  border-bottom: 1px solid var(--ui-border);
}
.card-header.d-flex.justify-content-between.align-items-center {
  gap: 12px;
  flex-wrap: wrap;
  /* More reliable than space-between across varying header markup */
  justify-content: flex-start !important;
}
.card-header.d-flex.justify-content-between.align-items-center .card-title {
  margin: 0;
  text-align: start; /* RTL: right, LTR: left */
}
/* Push actions group to the far edge (LTR: right, RTL: left) */
.card-header.d-flex.justify-content-between.align-items-center > :last-child:not(.card-title) {
  margin-inline-start: auto;
}
/* Make header actions look consistent across pages (buttons stay grouped) */
.card-header.d-flex.justify-content-between.align-items-center > :last-child,
.card-header .card-tools,
.card-header .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* On small screens, stack title then actions */
@media (max-width: 575.98px) {
  .card-header.d-flex.justify-content-between.align-items-center {
    align-items: flex-start !important;
  }
}

.card-header.bg-primary {
  background: linear-gradient(135deg, var(--ui-primary) 0%, #60a5fa 100%) !important;
  border-bottom: 0;
}
.card-title {
  font-weight: 800;
  letter-spacing: .15px;
}

/* Buttons */
.btn {
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: .15px;
}
.btn-primary {
  background: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
}
.btn-primary:hover { background: var(--ui-primary-600) !important; }
.btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; }
.btn-success { background: var(--ui-success) !important; border-color: var(--ui-success) !important; }

/* Forms */
.form-control, .form-select {
  border-radius: 12px !important;
  border: 1px solid var(--ui-border) !important;
  padding: 10px 12px;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}
label.form-label {
  font-weight: 700;
  color: rgba(15, 23, 42, 0.88);
}

/* Tables / DataTables */
.table {
  border-color: var(--ui-border) !important;
}
.table thead th {
  white-space: nowrap;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.82);
  border-bottom: 1px solid var(--ui-border) !important;
}

/* RTL: table headers always right-aligned (including DataTables) */
html[dir="rtl"] .table thead th,
html[dir="rtl"] table.dataTable thead th,
html[dir="rtl"] table.dataTable thead td {
  text-align: right !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: rgba(15, 23, 42, 0.02);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 12px;
  border: 1px solid var(--ui-border);
}

/* Badges */
.badge {
  border-radius: 999px;
  padding: 0.45em 0.75em;
  font-weight: 800;
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--ui-border);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
}