/* =========================================================
   dal.unify.css  (ONE FILE TO RULE THEM ALL)
   - Dal Brand Tokens + Full UI system
   - Bootstrap bridge (scoped)
   - Safe defaults for native PHP projects
   - No destructive global overrides (only inside .dal-app)
   ========================================================= */

/* ============ 1) BRAND TOKENS (Dal Identity) ============ */
@font-face{
  font-family: "FF Shamel Family Sans";
  src: url("../fonts/FFShamelFamilySans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* بدل swap */
}
@font-face{
  font-family: "Madani Arabic";
  src: url("../fonts/MadaniArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* بدل swap */
}

html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.55; }

.btn, button, .badge, .pill-soft, .pill-dark, .chip{
  line-height: 1.2;
}
/* 1) enforce brand look safely */
.dal-app {
  font-family: var(--dal-font-ar) !important;
  background: var(--dal-bg) !important;
  color: var(--dal-text) !important;
  direction: rtl !important;
}


:root {
  --dal-primary: #282972;
  --dal-accent: #4abd9b;
  --dal-bg: #f2f2f2;
  --dal-gray: #b4b4b4;

  --dal-primary-rgb: 40, 41, 114;
  --dal-accent-rgb: 74, 189, 155;

  --dal-grad: linear-gradient(90deg, #537694 0%, #65b6a4 100%);

  --dal-text: #0f172a;
  --dal-muted: #475569;

  --dal-radius: 18px;
  --dal-radius-sm: 14px;
  --dal-radius-lg: 22px;

  --dal-border: rgba(15, 23, 42, 0.1);
  --dal-border-2: rgba(15, 23, 42, 0.14);

  --dal-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  --dal-shadow-lg: 0 18px 55px rgba(2, 6, 23, 0.1);
/* 
  --dal-font-ar: "FF Shamel Family Sans", "Cairo", system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif; */
  --dal-font-ar: "Madani Arabic", "Inter", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;

  --dal-space-1: 0.25rem;
  --dal-space-2: 0.5rem;
  --dal-space-3: 0.75rem;
  --dal-space-4: 1rem;
  --dal-space-5: 1.25rem;
  --dal-space-6: 1.5rem;
  --dal-space-7: 2rem;

  --dal-focus: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18);
}

/* ============ 2) BASE SCOPE (NO GLOBAL DAMAGE) ============ */
:where(.dal-app) {
  background: var(--dal-bg);
  color: var(--dal-text);
  font-family: var(--dal-font-ar);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(.dal-app) *,
:where(.dal-app) *::before,
:where(.dal-app) *::after {
  box-sizing: border-box;
}

:where(.dal-app) a {
  color: inherit;
  text-decoration: none;
}
:where(.dal-app) a:hover {
  text-decoration: none;
}
:where(.dal-app) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(.dal-app) ::selection {
  background: rgba(var(--dal-accent-rgb), 0.25);
}

/* Typography utilities */
:where(.dal-app) .dal-h1 {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.2px;
  margin: 0;
}
:where(.dal-app) .dal-h2 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
  margin: 0;
}
:where(.dal-app) .dal-h3 {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0;
}
:where(.dal-app) .dal-muted {
  color: var(--dal-muted);
}
:where(.dal-app) .dal-en {
  font-family: var(--dal-font-en);
  direction: ltr;
  text-align: left;
}

/* Layout container */
:where(.dal-app) .dal-container {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
}

/* ============ 3) BOOTSTRAP BRIDGE (SCOPED) ============ */
:where(.dal-app) {
  --bs-primary: var(--dal-primary);
  --bs-primary-rgb: var(--dal-primary-rgb);

  --bs-success: var(--dal-accent);
  --bs-success-rgb: var(--dal-accent-rgb);

  --bs-body-bg: var(--dal-bg);
  --bs-body-color: var(--dal-text);

  --bs-link-color: var(--dal-primary);
  --bs-link-hover-color: rgba(var(--dal-primary-rgb), 0.85);

  --bs-border-color: rgba(15, 23, 42, 0.12);

  --bs-border-radius: 14px;
  --bs-border-radius-sm: 12px;
  --bs-border-radius-lg: 18px;
}

/* Focus ring */
:where(.dal-app)
  :is(.btn, .form-control, .form-select, .form-check-input, a, button):focus {
  outline: none;
}
:where(.dal-app)
  :is(
    .btn,
    .form-control,
    .form-select,
    .form-check-input,
    a,
    button
  ):focus-visible {
  box-shadow: var(--dal-focus);
}

/* ============ 4) CORE UI COMPONENTS (Dal) ============ */
:where(.dal-app) .dal-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--dal-radius-lg);
  box-shadow: var(--dal-shadow);
}
:where(.dal-app) .dal-card-pad {
  padding: var(--dal-space-6);
}
@media (max-width: 600px) {
  :where(.dal-app) .dal-card-pad {
    padding: var(--dal-space-4);
  }
}

/* Section */
:where(.dal-app) .dal-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  margin: 26px 0 12px;
}

/* Pills / Badges */
:where(.dal-app) .dal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08);
  font-weight: 900;
  font-size: 13px;
}
:where(.dal-app) .dal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(180, 180, 180, 0.22);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Buttons (Dal components) */
:where(.dal-app) .dal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dal-radius-sm);
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
    opacity 0.15s ease;
}
:where(.dal-app) .dal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.14);
}
:where(.dal-app) .dal-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
:where(.dal-app) .dal-btn[disabled],
:where(.dal-app) .dal-btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:where(.dal-app) .dal-btn-primary {
  background: var(--dal-primary);
  color: #fff;
  box-shadow: 0 12px 24px rgba(var(--dal-primary-rgb), 0.18);
}
:where(.dal-app) .dal-btn-primary:hover {
  filter: brightness(1.05);
}

:where(.dal-app) .dal-btn-accent {
  background: var(--dal-accent);
  color: #06261f;
}
:where(.dal-app) .dal-btn-ghost {
  background: rgba(15, 23, 42, 0.06);
  color: var(--dal-text);
  border-color: rgba(15, 23, 42, 0.06);
}
:where(.dal-app) .dal-btn-outline {
  background: #fff;
  color: var(--dal-primary);
  border-color: rgba(var(--dal-primary-rgb), 0.28);
}
:where(.dal-app) .dal-btn-outline:hover {
  background: rgba(var(--dal-primary-rgb), 0.06);
}

/* Inputs */
:where(.dal-app) .dal-input,
:where(.dal-app) .dal-textarea,
:where(.dal-app) .dal-select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--dal-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: var(--dal-text);
  outline: none;
}
:where(.dal-app) .dal-textarea {
  min-height: 110px;
  resize: vertical;
}
:where(.dal-app) .dal-input:focus,
:where(.dal-app) .dal-textarea:focus,
:where(.dal-app) .dal-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55);
  box-shadow: var(--dal-focus);
}

/* ============ 5) BOOTSTRAP COMPONENT SKIN (SAFE) ============ */
:where(.dal-app) .btn {
  font-weight: 900;
  border-radius: var(--dal-radius-sm);
}
:where(.dal-app) .btn-primary {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
}
:where(.dal-app) .btn-primary:hover {
  background-color: rgba(var(--dal-primary-rgb), 0.92);
  border-color: rgba(var(--dal-primary-rgb), 0.92);
}

:where(.dal-app) .btn-success {
  background-color: var(--dal-accent);
  border-color: var(--dal-accent);
  color: #06261f;
}

:where(.dal-app) .btn-outline-primary {
  color: var(--dal-primary);
  border-color: rgba(var(--dal-primary-rgb), 0.35);
}
:where(.dal-app) .btn-outline-primary:hover {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
  color: #fff;
}

:where(.dal-app) .form-label {
  font-weight: 900;
}
:where(.dal-app) .form-text {
  color: #64748b;
  font-weight: 800;
}

:where(.dal-app) .form-control,
:where(.dal-app) .form-select {
  border-radius: var(--dal-radius-sm);
  border-color: rgba(15, 23, 42, 0.12);
}
:where(.dal-app) .form-control:focus,
:where(.dal-app) .form-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55);
  box-shadow: var(--dal-focus);
}

:where(.dal-app) .form-check-input:checked {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
}
:where(.dal-app) .form-check-input:focus {
  box-shadow: var(--dal-focus);
}

/* Dropdown / Modal / Alerts / Tables / Pagination / Accordion / Toast */
:where(.dal-app) .dropdown-menu {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}
:where(.dal-app) .dropdown-item {
  font-weight: 800;
  border-radius: 12px;
}
:where(.dal-app) .dropdown-item:hover {
  background: rgba(var(--dal-primary-rgb), 0.06);
}

:where(.dal-app) .offcanvas,
:where(.dal-app) .modal-content {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}
:where(.dal-app) .offcanvas-header,
:where(.dal-app) .modal-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
:where(.dal-app) .offcanvas-title,
:where(.dal-app) .modal-title {
  font-weight: 900;
}

:where(.dal-app) .alert {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-weight: 800;
}
:where(.dal-app) .alert-primary {
  background: rgba(var(--dal-primary-rgb), 0.08);
  border-color: rgba(var(--dal-primary-rgb), 0.16);
  color: var(--dal-primary);
}
:where(.dal-app) .alert-success {
  background: rgba(var(--dal-accent-rgb), 0.1);
  border-color: rgba(var(--dal-accent-rgb), 0.18);
  color: #0b3d31;
}

:where(.dal-app) .badge.bg-primary {
  background: var(--dal-primary) !important;
}
:where(.dal-app) .badge.bg-success {
  background: var(--dal-accent) !important;
  color: #06261f !important;
}

:where(.dal-app) .table {
  color: var(--dal-text);
}
:where(.dal-app) .table thead th {
  font-weight: 900;
  border-bottom-color: rgba(15, 23, 42, 0.14);
}
:where(.dal-app) .table td,
:where(.dal-app) .table th {
  vertical-align: middle;
}
:where(.dal-app) .table-hover tbody tr:hover {
  background: rgba(var(--dal-primary-rgb), 0.04);
}

:where(.dal-app) .page-link {
  border-radius: 12px;
  font-weight: 900;
  color: var(--dal-primary);
}
:where(.dal-app) .page-item.active .page-link {
  background: var(--dal-primary);
  border-color: var(--dal-primary);
}

:where(.dal-app) .accordion-item {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
:where(.dal-app) .accordion-button {
  font-weight: 900;
}
:where(.dal-app) .accordion-button:focus {
  box-shadow: var(--dal-focus);
}

:where(.dal-app) .toast {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}

/* ============ 6) LEGACY VARIABLE BRIDGE (THE MAGIC) ============ */
:where(.dal-app) {
  --primary: var(--dal-primary);
  --primary-rgb: var(--dal-primary-rgb);

  --accent: var(--dal-accent);
  --accent-rgb: var(--dal-accent-rgb);

  --text: var(--dal-text);
  --muted: var(--dal-muted);

  --border: var(--dal-border);
  --card: rgba(255, 255, 255, 0.92);
  --radius: var(--dal-radius-lg);

  --danger: #dc3545;
}

/* Prevent weird overflow from old layouts */
:where(.dal-app) .container,
:where(.dal-app) .container-fluid {
  overflow-x: clip;
}

/* Responsive button full width helper */
@media (max-width: 600px) {
  :where(.dal-app) .dal-btn,
  :where(.dal-app) .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   DAL FORCE OVERRIDES (MUST BE LAST)
   - fixes legacy hardcoded blues + keeps icons visible
   ========================================================= */



/* 2) ✅ NAVBAR: no rounded edges + full width */
.dal-app nav.navbar {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* keep bootstrap dark navbar correct (DON'T force dark text) */
.dal-app .navbar.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}
.dal-app .navbar.navbar-dark .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.dal-app .navbar.navbar-dark .navbar-nav .nav-link i {
  color: inherit !important; /* ✅ icons visible on dark */
  opacity: 0.95;
}

/* 3) universal primary buttons */
.dal-app .btnMain,
.dal-app .btn-submit,
.dal-app .submit-btn,
.dal-app .btn.btn-primary,
.dal-app .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.dal-app .btnMain:hover,
.dal-app .btn-submit:hover,
.dal-app .submit-btn:hover,
.dal-app .btn.btn-brand:hover,
.dal-app .btn-primary:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 18px 50px rgba(var(--dal-primary-rgb), 0.22) !important;
}
.dal-app .btnMain:active,
.dal-app .btn-submit:active,
.dal-app .submit-btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.dal-app .btn-submit:disabled,
.dal-app .btn-submit.loading,
.dal-app .btnMain:disabled,
.dal-app .submit-btn:disabled {
  background: rgba(var(--dal-primary-rgb), 0.45) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.45) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* 4) links that were hardcoded blue */
.dal-app .login-container a,
.dal-app .links a,
.dal-app a.text-decoration-none {
  color: var(--primary) !important;
}

/* 5) focus rings */
.dal-app .input-group .form-control:focus,
.dal-app .form-control:focus,
.dal-app input:focus,
.dal-app textarea:focus,
.dal-app select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* 6) ✅ ICONS HARD FIX (حتى لو في CSS قديم قاتلها) */
.dal-app
  :where(
    .fa,
    .fas,
    .far,
    .fal,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-light,
    .fa-duotone,
    [class^="fa-"],
    [class*=" fa-"]
  ) {
  font-family: var(
    --fa-style-family,
    "Font Awesome 6 Free",
    "Font Awesome 5 Free",
    "Font Awesome 5 Pro",
    "FontAwesome"
  ) !important;
  font-weight: var(--fa-style, 900) !important;
}
.dal-app :where(.fab, .fa-brands) {
  font-family: var(
    --fa-style-family-brands,
    "Font Awesome 6 Brands",
    "Font Awesome 5 Brands"
  ) !important;
  font-weight: 400 !important;
}
.dal-app :where(.bi, [class^="bi-"], [class*=" bi-"]) {
  font-family: "bootstrap-icons" !important;
  font-weight: 400 !important;
}

/* (optional) consistent icon alignment */
.dal-app i[class^="fa-"],
.dal-app i[class*=" fa-"],
.dal-app i.bi {
  /* line-height: 1; */
  vertical-align: -0.125em;
}


/* 3) universal primary buttons (covers YOUR project classes) */
.dal-app .btnMain,
.dal-app .btn-submit,
.dal-app .submit-btn,
.dal-app .btnPrimarySweet,
.dal-app .btn.btn-primary,
.dal-app .btn-primary {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* hover/active polish */
.dal-app .btnMain:hover,
.dal-app .btn-submit:hover,
.dal-app .submit-btn:hover,
.dal-app .btnPrimarySweet:hover,
.dal-app .btn.btn-brand:hover,
.dal-app .btn-primary:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 18px 50px rgba(var(--dal-primary-rgb), 0.22) !important;
}

.dal-app .btnMain:active,
.dal-app .btn-submit:active,
.dal-app .submit-btn:active,
.dal-app .btnPrimarySweet:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* =========================================================
   DAL BUTTON PACK (FULL COVERAGE)
   - Bootstrap: outline-dark / dark / rounded-4 / py-3 etc
   - Sweet buttons: btnSweet + btnAccentSweet
   ========================================================= */

/* 1) Base buttons (Dal look) - بدون ما نكسر utilities مثل py-3 */
.dal-app .btn,
.dal-app .btnSweet {
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
    background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dal-app .btn:hover,
.dal-app .btnSweet:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.12);
}

.dal-app .btn:active,
.dal-app .btnSweet:active {
  transform: translateY(1px);
  box-shadow: none;
}

.dal-app .btn:disabled,
.dal-app .btn.disabled,
.dal-app .btnSweet[disabled],
.dal-app .btnSweet.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.dal-app .btn {
  border-radius: var(--dal-radius-sm) !important; /* يكسر أي !important قديم */
  padding: 0.6rem 1rem; /* بدون !important حتى py-3 يشتغل */
}

.dal-app .btnSweet {
  border-radius: var(--dal-radius-sm) !important;
  padding: 12px 16px;

  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
  text-decoration: none;
}

/* 3) Allow Bootstrap rounded utilities (rounded-4 وغيره) رغم !important تبعنا */
.dal-app .btn.rounded-0 {
  border-radius: 0 !important;
}
.dal-app .btn.rounded-1 {
  border-radius: var(--bs-border-radius-sm, 0.2rem) !important;
}
.dal-app .btn.rounded-2 {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}
.dal-app .btn.rounded-3 {
  border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}
.dal-app .btn.rounded-4 {
  border-radius: var(--bs-border-radius-xl, 1rem) !important;
}
.dal-app .btn.rounded-5 {
  border-radius: var(--bs-border-radius-2xl, 2rem) !important;
}
.dal-app .btn.rounded-pill {
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
}

/* 4) Bootstrap Primary/Success داخل الهوية */
.dal-app .btn.btn-brand,
.dal-app .btn-primary {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(var(--dal-primary-rgb), 0.22);
}
.dal-app .btn.btn-brand:hover,
.dal-app .btn-primary:hover {
  filter: brightness(1.06) !important;
}

.dal-app .btn-success {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
  box-shadow: 0 12px 26px rgba(var(--dal-accent-rgb), 0.2);
}
.dal-app .btn-success:hover {
  filter: brightness(1.03) !important;
}

/* 5) ✅ المطلوب: btn-outline-dark (Dal-compatible) */
.dal-app .btn-outline-dark {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
.dal-app .btn-outline-dark:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}
.dal-app .btn-outline-dark:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* 6) btn-dark (محترم + متناسق) */
.dal-app .btn-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}
.dal-app .btn-dark:hover {
  filter: brightness(1.06) !important;
}

/* 7) ✅ Sweet buttons mapping (covers: btnSweet btnAccentSweet) */
.dal-app .btnPrimarySweet {
  background: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
  box-shadow: 0 12px 26px rgba(var(--dal-primary-rgb), 0.22);
}
.dal-app .btnPrimarySweet:hover {
  filter: brightness(1.06) !important;
}

.dal-app .btnAccentSweet {
  background: var(--dal-accent) !important;
  color: #06261f !important;
  border: 1px solid var(--dal-accent) !important;
  box-shadow: 0 12px 26px rgba(var(--dal-accent-rgb), 0.18);
}
.dal-app .btnAccentSweet:hover {
  filter: brightness(1.03) !important;
}

/* 8) Icon spacing + keep icons visible */
.dal-app .btn i,
.dal-app .btnSweet i {
  /* line-height: 1; */
  vertical-align: -0.125em;
}

/* (اختياري) إذا بتستخدم w-100 كثير: خلي Sweet مثل Bootstrap */
.dal-app .btnSweet.w-100 {
  width: 100%;
}

/* ===== NAVBAR: Brand + Fixed ===== */
.dal-app.has-fixed-navbar {
  padding-top: 76px;
} /* عدّلها إذا ارتفاع الناف بار اختلف */

.dal-app .dal-navbar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.dal-app .dal-navbar .nav-link {
  font-weight: 900 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  color: var(--dal-text) !important;
}
.dal-app .dal-navbar .nav-link:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  color: var(--dal-primary) !important;
}
.dal-app .dal-navbar .nav-link i {
  color: rgba(15, 23, 42, 0.85) !important;
}
/* ===== ICON SPACING FIX (RTL-safe) ===== */
.dal-app .nav-link,
.dal-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* ✅ هون الإصلاح: يخلي المحتوى بالنص */
  gap: 0.5rem; /* مسافة ثابتة بين الأيقونة والنص */
  text-align: center;
}

.dal-app .nav-link,
.dal-app .dropdown-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* المسافة القياسية بين الأيقونة والنص */
}

/* أيقونة داخل روابط الناف */
.dal-app .nav-link i,
.dal-app .dropdown-item i,
.dal-app .btn i {
  flex: 0 0 auto;
  /* line-height: 1; */
  vertical-align: middle;
}

/* إذا في عناصر ما بدك تتحول flex (نادر) استخدم هذا الكلاس */
.dal-app .no-icon-gap {
  display: inline-block !important;
  gap: 0 !important;
}
/* ===== Floating edit/delete buttons: COLOR ONLY (Scoped) ===== */
.dal-app .btn.btn-edit {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

.dal-app .btn.btn-edit:hover {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

.dal-app .btn.btn-delete {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #dc3545 !important;
}

.dal-app .btn.btn-delete:hover {
  background: rgba(220, 53, 69, 0.14) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #dc3545 !important;
}

/* icons inherit button color */
.dal-app .btn.btn-edit i,
.dal-app .btn.btn-delete i {
  color: inherit !important;
}
/* ===== FIX: buttons text moved to the right (undo flex) ===== */

/* 1) رجّع زرار Bootstrap لطبيعته (inline-block) */

/* 2) خلي flex+gap فقط للروابط بالقوائم (هون مفيد وما بيكسر) */
.dal-app .nav-link,
.dal-app .dropdown-item {
  /* display: inline-flex !important; */
  align-items: center !important;
  gap: 0.5rem !important;
}

/* 3) مسافة الأيقونة داخل الأزرار بدون flex */

.dal-app .btn > i:last-child,
.dal-app .btn > svg:last-child {
  /* margin-inline-start: .5rem; */
  margin-inline-end: 0;
}

/* 4) إذا الزر w-100 أو block خلي النص بالنص مثل قبل */
.dal-app .btn.w-100,
.dal-app .btn.d-block,
.dal-app .btn.btn-block {
  text-align: center !important;
}

/* ===== DAL BRAND PATCH: add_service ONLY ===== */
.dal-app.dal-page-add-service {
  /* remap page local tokens -> DAL tokens */
  --bg: var(--dal-bg);
  --card: rgba(255, 255, 255, 0.92);
  --text: var(--dal-text);
  --muted: var(--dal-muted);

  --border: rgba(15, 23, 42, 0.12);
  --border-soft: rgba(15, 23, 42, 0.08);

  --primary: var(--dal-primary);
  --primary-soft: rgba(var(--dal-primary-rgb), 0.1);

  --success: var(--dal-accent);
  --success-hover: var(--dal-accent);

  --ring: 0 0 0 0.18rem rgba(var(--dal-accent-rgb), 0.2);
}

/* background gradient to brand (COLOR ONLY) */
.dal-app.dal-page-add-service {
  background: radial-gradient(
      900px 500px at 85% -10%,
      rgba(var(--dal-primary-rgb), 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 10% 110%,
      rgba(var(--dal-accent-rgb), 0.1),
      transparent 55%
    ),
    var(--dal-bg) !important;
}

/* Fix hardcoded blue blocks in this page */
.dal-app.dal-page-add-service .page-badge,
.dal-app.dal-page-add-service .service-badge,
.dal-app.dal-page-add-service .dz-shell__icon,
.dal-app.dal-page-add-service .quota-pill:not(.is-danger):not(.is-muted) {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.18) !important;
  color: var(--dal-primary) !important;
}

/* Inputs hover/focus brand (COLOR ONLY) */
.dal-app.dal-page-add-service .form-control:hover,
.dal-app.dal-page-add-service .form-select:hover,
.dal-app.dal-page-add-service .selectize-input:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.35) !important;
}
.dal-app.dal-page-add-service .form-control:focus,
.dal-app.dal-page-add-service .form-select:focus,
.dal-app.dal-page-add-service .selectize-input.focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: var(--dal-focus) !important;
}

/* Selectize active option */
.dal-app.dal-page-add-service .selectize-dropdown .option.active {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
}

/* Switch checked -> primary */
.dal-app.dal-page-add-service .form-check-input:checked {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Floating save button -> accent (COLOR ONLY) */
.dal-app.dal-page-add-service #addService {
  background: linear-gradient(
    135deg,
    var(--dal-accent),
    rgba(var(--dal-accent-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 35px rgba(var(--dal-accent-rgb), 0.26) !important;
}

/* ===== NAVBAR Z-INDEX FIX: add_service ONLY ===== */
.dal-app.dal-page-add-service .dal-navbar {
  position: sticky; /* ما بيكسر الصفحات الأخرى */
  top: 0;
  z-index: 999;
  isolation: isolate; /* مهم حتى الدروبداون يطلع فوق كل شي */
}

.dal-app.dal-page-add-service .dal-navbar .dropdown-menu {
  z-index: 1101;
}

/* =========================
   LEAFLET POPUP (DAL BRAND)
   Scoped: داخل .dal-app فقط
   ========================= */

/* Wrapper */
.dal-app .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(2, 6, 23, 0.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Popup tip (السهم) */
.dal-app .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1) !important;
}

/* Content */
.dal-app .leaflet-popup-content {
  margin: 12px 12px !important;
  color: var(--dal-text, #0f172a) !important;
  font-family: var(--dal-font-ar, "Cairo", sans-serif) !important;
  min-width: 220px; /* ✅ بدل 156px الضيق */
  max-width: 320px;
}

/* Title */
.dal-app .leaflet-popup-content .popup-content h5 {
  margin: 0 0 6px !important;
  font-weight: 950 !important;
  font-size: 1rem !important;
  /* line-height: 1.25 !important; */
  color: var(--dal-text, #0f172a) !important;
}

/* Meta line */
.dal-app .leaflet-popup-content .popup-content .meta {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: rgba(15, 23, 42, 0.65) !important;
  margin-bottom: 10px !important;
}

/* Badges (match brand) */
.dal-app .leaflet-popup-content .badge {
  border-radius: 999px !important;
  padding: 0.45rem 0.6rem !important;
  font-weight: 900 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* services badge = primary */
.dal-app .leaflet-popup-content .badge.bg-primary {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.1) !important;
  color: var(--dal-primary, #282972) !important;
  border-color: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
}

/* requests badge = accent (بدل رمادي ثانوي) */
.dal-app .leaflet-popup-content .badge.bg-secondary {
  background: rgba(var(--dal-accent-rgb, 74, 189, 155), 0.14) !important;
  color: #0b3d31 !important;
  border-color: rgba(var(--dal-accent-rgb, 74, 189, 155), 0.22) !important;
}

/* Actions layout */
.dal-app .leaflet-popup-content .actions {
  margin-top: 10px !important;
}

/* Buttons inside popup (compact + brand) */
.dal-app .leaflet-popup-content .btn {
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 0.45rem 0.65rem !important;
  /* line-height: 1.1 !important; */
}

/* "عرض مقدمي الخدمات" - link button but looks like pill */
.dal-app .leaflet-popup-content .btn-link {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.08) !important;
  color: var(--dal-primary, #282972) !important;
  border: 1px solid rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
  text-decoration: none !important;
}
.dal-app .leaflet-popup-content .btn-link:hover {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.12) !important;
}

/* "عرض الطلبات" - keep danger meaning لكن ناعم */
.dal-app .leaflet-popup-content .btn-outline-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #dc3545 !important;
}
.dal-app .leaflet-popup-content .btn-outline-danger:hover {
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
}

/* Close button polish */
.dal-app .leaflet-popup-close-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: rgba(15, 23, 42, 0.7) !important;
  top: 8px !important;
  right: 8px !important; /* Leaflet uses right even in RTL */
}
.dal-app .leaflet-popup-close-button:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--dal-primary, #282972) !important;
}
.dal-app .leaflet-popup-content {
  width: auto !important;
}

/* ===== Leaflet close button: LEFT + polished (Scoped) ===== */
.dal-app .leaflet-container .leaflet-popup-close-button {
  /* move to LEFT */
  left: 10px !important;
  right: auto !important;

  top: 10px !important;

  /* size + look */
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;

  color: rgba(15, 23, 42, 0.7) !important;
  text-decoration: none !important;

  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08) !important;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease,
    box-shadow 0.12s ease !important;
}

/* hover */
.dal-app .leaflet-container .leaflet-popup-close-button:hover {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
  color: var(--dal-primary, #282972) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12) !important;
}

/* active */
.dal-app .leaflet-container .leaflet-popup-close-button:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08) !important;
}

/* focus */
.dal-app .leaflet-container .leaflet-popup-close-button:focus-visible {
  outline: none !important;
  box-shadow: var(
    --dal-focus,
    0 0 0 0.25rem rgba(74, 189, 155, 0.18)
  ) !important;
}

/* MarkerCluster -> DAL brand (Scoped) */
.dal-app .marker-cluster-small {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
}
.dal-app .marker-cluster-small div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.38) !important;
  color: #fff !important;
  font-weight: 900;
}

.dal-app .marker-cluster-medium {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.16) !important;
}
.dal-app .marker-cluster-medium div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.34) !important;
  color: #fff !important;
  font-weight: 900;
}

.dal-app .marker-cluster-large {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.14) !important;
}
.dal-app .marker-cluster-large div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.3) !important;
  color: #fff !important;
  font-weight: 900;
}

/* ===== DAL Brand colors (only colors) ===== */
:root {
  --dal-primary: #282972; /* الأساسي */
  --dal-accent: #4abd9b; /* أكسنت */
  --dal-primary-hover: #23245f; /* أغمق شوي */
  --dal-primary-soft: rgba(40, 41, 114, 0.1);
  --dal-accent-soft: rgba(74, 189, 155, 0.14);
}

/* ===== 1) Card header (colors only) ===== */
.card-header {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    var(--dal-primary-hover)
  ) !important;
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* لو في btn-link داخل الهيدر */
.card-header .btn,
.card-header .btn-link {
  color: #fff !important;
}

/* لو في أيقونات بالهيدر */
.card-header i {
  color: #fff !important;
  opacity: 0.92;
}

/* ===== 2) Update button (colors only) ===== */
#updateService {
  background: linear-gradient(135deg, var(--dal-accent), #3aa989) !important;
  color: #fff !important;
}

/* hover/active (ألوان فقط) */
#updateService:hover {
  background: linear-gradient(135deg, #48c7a4, #2f9f7f) !important;
}
#updateService:active {
  background: linear-gradient(135deg, #3bb797, #2a8f72) !important;
}

/* أيقونة الحفظ */
#updateService i {
  color: #fff !important;
}

/* ===== DAL checkbox colors (scoped) ===== */
.dal-app input[type="checkbox"].day-toggle {
  accent-color: var(--dal-primary) !important; /* أفضل حل حديث */
}

/* Bootstrap checkboxes/switches (in case accent-color ما كفى) */
.dal-app .form-check-input {
  border-color: rgba(40, 41, 114, 0.45) !important;
}

.dal-app .form-check-input:checked {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Focus ring بنفس الهوية */
.dal-app .form-check-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(40, 41, 114, 0.2) !important;
  border-color: rgba(40, 41, 114, 0.7) !important;
}

/* Disabled شكل واضح */
.dal-app .form-check-input:disabled {
  opacity: 0.6;
  border-color: rgba(40, 41, 114, 0.25) !important;
}

/* =========================
   BRAND PATCH (Visual Identity)
   ضع هذا الكود بآخر <style>
   ========================= */

:root {
  --brand-primary: #282972; /* الأساسي */
  --brand-accent: #4abd9b; /* أكسنت */
  --brand-bg: #f2f2f2; /* خلفيات فاتحة */
  --brand-border: #b4b4b4; /* حدود/Muted */
  --brand-white: #ffffff;

  --ring-primary: rgba(40, 41, 114, 0.28); /* #282972 */
  --ring-accent: rgba(74, 189, 155, 0.28); /* #4ABD9B */
}

/* زر السك롤 */
#scrollButton {
  background-color: var(--brand-white) !important;
  color: var(--brand-primary) !important;
  border: 1px solid rgba(180, 180, 180, 0.6) !important;
  box-shadow: 0 10px 24px rgba(40, 41, 114, 0.18) !important;
}
#scrollButton:hover {
  transform: translateY(-2px) !important;
}

/* العناوين */
h2 {
  color: var(--brand-primary) !important;
}

/* أزرار التحديث/الإيقاف */
#updateButton {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
}
#updateButton:hover {
  filter: brightness(0.92);
}

#stopButton {
  background: transparent !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
}
#stopButton:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  filter: none !important;
}

/* DataTable Header */
table.dataTable thead th {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Hover rows */
table.dataTable tbody tr:hover {
  background-color: var(--brand-bg) !important;
}

/* Loader */
#loader {
  border: 16px solid var(--brand-bg) !important;
  border-top: 16px solid var(--brand-primary) !important;
}

/* Filters active state */
.filter-btn.active-filter {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem var(--ring-primary) !important;
}

/* Wrapper card look */
#referralTable_wrapper {
  border: 1px solid rgba(180, 180, 180, 0.35) !important;
  box-shadow: 0 10px 30px rgba(40, 41, 114, 0.1) !important;
}

/* Search input focus */
#referralTable_wrapper .dataTables_filter input {
  border: 1px solid var(--brand-border) !important;
}
#referralTable_wrapper .dataTables_filter input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--ring-primary) !important;
}

/* Export buttons */
#referralTable_wrapper .dt-buttons .btn {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
}
#referralTable_wrapper .dt-buttons .btn:hover {
  filter: brightness(0.92);
}

/* Pagination active */
#referralTable_paginate .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Mobile row background */
#referralTable tbody tr {
  background-color: var(--brand-bg) !important;
}

/* Toastr */
#toast-container .toast-success {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
}
#toast-container .toast-info {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}
#toast-container .toast-warning {
  background-color: var(--brand-bg) !important;
  color: var(--brand-primary) !important;
  border-left: 6px solid var(--brand-accent) !important;
}
#toast-container .toast-error {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border-left: 6px solid var(--brand-accent) !important;
}
/* =========================================================
   DAL PATCH: Legacy hardcoded blues (SCOPED)
   - replace old #007bff look using DAL tokens
   - safe: affects only inside .dal-app
   ========================================================= */

/* Optional: if you want a named white token */
:root {
  --dal-white: #fff;
}

/* Scroll-to-top button */
:where(.dal-app) #scrollButton {
  background-color: var(--dal-white) !important;
  color: var(--dal-primary) !important;
  border: 1px solid rgba(180, 180, 180, 0.6) !important;
  box-shadow: 0 10px 24px rgba(var(--dal-primary-rgb), 0.18) !important;
}
:where(.dal-app) #scrollButton:hover {
  transform: translateY(-2px) !important;
}

/* Headings (بدل ما تكون global) */
:where(.dal-app) h2 {
  color: var(--dal-primary) !important;
}

/* Update/Stop buttons */
:where(.dal-app) #updateButton {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #updateButton:hover {
  filter: brightness(0.95) !important;
}

:where(.dal-app) #stopButton {
  background: transparent !important;
  color: var(--dal-primary) !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #stopButton:hover {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DataTables */
:where(.dal-app) table.dataTable thead th {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) table.dataTable tbody tr:hover {
  background-color: var(--dal-bg) !important;
}

/* Loader */
:where(.dal-app) #loader {
  border: 16px solid var(--dal-bg) !important;
  border-top: 16px solid var(--dal-primary) !important;
}

/* Filters active */
:where(.dal-app) .filter-btn.active-filter {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dal-primary-rgb), 0.28) !important;
}

/* Wrapper look */
:where(.dal-app) #referralTable_wrapper {
  border: 1px solid rgba(180, 180, 180, 0.35) !important;
  box-shadow: 0 10px 30px rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* Search input focus */
:where(.dal-app) #referralTable_wrapper .dataTables_filter input {
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app) #referralTable_wrapper .dataTables_filter input:focus {
  border-color: rgba(var(--dal-primary-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Export buttons */
:where(.dal-app) #referralTable_wrapper .dt-buttons .btn {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #referralTable_wrapper .dt-buttons .btn:hover {
  filter: brightness(0.95) !important;
}

/* Pagination active */
:where(.dal-app) #referralTable_paginate .page-item.active .page-link {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Mobile rows */
:where(.dal-app) #referralTable tbody tr {
  background-color: var(--dal-bg) !important;
}

/* Toastr */
:where(.dal-app) #toast-container .toast-success {
  background-color: var(--dal-accent) !important;
  color: #fff !important;
}
:where(.dal-app) #toast-container .toast-info {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) #toast-container .toast-warning {
  background-color: var(--dal-bg) !important;
  color: var(--dal-primary) !important;
  border-left: 6px solid var(--dal-accent) !important;
}
:where(.dal-app) #toast-container .toast-error {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border-left: 6px solid var(--dal-accent) !important;
}

/* 2) Modal direction (خليه scoped بدل global) */
:where(.dal-app) .modal {
  direction: rtl;
}

/* 3) Mobile table cards: استبدال #007bff + #212529 بألوان الهوية */
@media (max-width: 768px) {
  :where(.dal-app) .table tbody tr {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06) !important;
  }

  :where(.dal-app) .table tbody tr td::before,
  :where(.dal-app) .table tbody tr th::before {
    color: var(--dal-primary) !important; /* بدل #007bff */
    font-weight: 900 !important;
  }

  :where(.dal-app) .table tbody tr th[data-label="#"] {
    color: var(--dal-text) !important; /* بدل #212529 */
    font-weight: 950 !important;
  }
}

/* =========================================================
   DAL PATCH: Action buttons (edit/delete) inside tables/cards
   Scoped to .dal-app
   ========================================================= */

/* EDIT button (was btn-warning) -> DAL primary soft */
:where(.dal-app) .edit-btn.btn-warning,
:where(.dal-app) td[data-label="الإجراءات"] .edit-btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .edit-btn.btn-warning:hover,
:where(.dal-app) td[data-label="الإجراءات"] .edit-btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DELETE button (btn-danger) -> keep danger but DAL-style */
:where(.dal-app) .delete-btn.btn-danger,
:where(.dal-app) td[data-label="الإجراءات"] .delete-btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}

:where(.dal-app) .delete-btn.btn-danger:hover,
:where(.dal-app) td[data-label="الإجراءات"] .delete-btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* optional: make both look consistent size-wise (if needed) */
:where(.dal-app) .edit-btn,
:where(.dal-app) .delete-btn {
  font-weight: 900 !important;
  border-radius: var(--dal-radius-sm) !important;
}

.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* =========================================================
   DAL PATCH: btn-secondary (modal close / neutral buttons)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .btn.btn-secondary,
:where(.dal-app) button.btn.btn-secondary {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

:where(.dal-app) .btn.btn-secondary:hover,
:where(.dal-app) button.btn.btn-secondary:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .btn.btn-secondary:active,
:where(.dal-app) button.btn.btn-secondary:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* Focus ring */
:where(.dal-app) .btn.btn-secondary:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL PATCH: Table action buttons (warning/danger) in cells
   - covers buttons without edit-btn class
   Scoped to .dal-app
   ========================================================= */

/* EDIT (btn-warning) -> DAL primary soft */
:where(.dal-app) td .btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) td .btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DELETE (btn-danger) -> keep danger but DAL-style */
:where(.dal-app) td .btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}

:where(.dal-app) td .btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* keep small buttons consistent */
:where(.dal-app) td .btn.btn-sm {
  font-weight: 900 !important;
  border-radius: 12px !important;
}

/* icon color (if you add icons later) */
:where(.dal-app) td .btn.btn-warning i,
:where(.dal-app) td .btn.btn-danger i {
  color: inherit !important;
}

/* =========================================================
   DAL TABLE SKIN (Opt-in via .dal-table)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .dal-table {
  --bs-table-color: var(--dal-text);
  --bs-table-bg: rgba(255, 255, 255, 0.92);
  --bs-table-border-color: rgba(15, 23, 42, 0.12);
  --bs-table-striped-bg: rgba(var(--dal-primary-rgb), 0.03);
  --bs-table-hover-bg: rgba(var(--dal-primary-rgb), 0.05);

  border-radius: var(--dal-radius-lg);
  overflow: hidden; /* يخلي الرأس والزوايا نظاف */
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
}

/* table head */
:where(.dal-app) .dal-table thead th {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  color: #fff !important;
  font-weight: 950 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* cells */
:where(.dal-app) .dal-table td,
:where(.dal-app) .dal-table th {
  vertical-align: middle;
  text-align: center;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* zebra */
:where(.dal-app) .dal-table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--dal-primary-rgb), 0.03) !important;
}

/* hover */
:where(.dal-app) .dal-table.table-hover tbody tr:hover {
  background-color: rgba(var(--dal-primary-rgb), 0.05) !important;
}

/* bordered polish */
:where(.dal-app) .dal-table.table-bordered {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* =========================================================
   DAL PATCH: action button set (outline-success / warning / danger)
   - works anywhere (not only inside td)
   - scoped to .dal-app
   ========================================================= */

/* 1) btn-outline-success -> DAL Accent outline */
:where(.dal-app) .btn.btn-outline-success {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-accent) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.45) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
:where(.dal-app) .btn.btn-outline-success:hover {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
}
:where(.dal-app) .btn.btn-outline-success:active {
  filter: brightness(0.98) !important;
}

/* 2) btn-warning (Edit) -> DAL primary soft */
:where(.dal-app) .btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* 3) btn-danger (Delete) -> keep danger but DAL-style */
:where(.dal-app) .btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}
:where(.dal-app) .btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* polish for small buttons */
:where(.dal-app) .btn.btn-sm {
  font-weight: 900 !important;
  border-radius: 12px !important;
}

/* icons inherit */
:where(.dal-app) .btn i {
  color: inherit !important;
}

/* =========================================================
   DAL PATCH: Alerts (Bootstrap .alert .alert-*)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .alert {
  border-radius: var(--dal-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08) !important;
  font-weight: 900 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
}

/* Links inside alert */
:where(.dal-app) .alert a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Icon inside alert */
:where(.dal-app) .alert i,
:where(.dal-app) .alert .bi {
  color: inherit !important;
}

/* Close button */
:where(.dal-app) .alert .btn-close {
  filter: none;
  opacity: 0.65;
}
:where(.dal-app) .alert .btn-close:hover {
  opacity: 0.9;
}

/* ---------- Variants ---------- */

/* Primary -> DAL Primary */
:where(.dal-app) .alert-primary {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

/* Secondary -> neutral */
:where(.dal-app) .alert-secondary {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: rgba(15, 23, 42, 0.86) !important;
}

/* Success -> DAL Accent */
:where(.dal-app) .alert-success {
  background: rgba(var(--dal-accent-rgb), 0.14) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.26) !important;
  color: #0b3d31 !important;
}

/* Info -> DAL Primary soft (بدل الأزرق الفاقع) */
:where(.dal-app) .alert-info {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.18) !important;
  color: var(--dal-primary) !important;
}

/* Warning -> DAL Accent soft (متحضر) */
:where(.dal-app) .alert-warning {
  background: rgba(var(--dal-accent-rgb), 0.12) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.24) !important;
  color: #0b3d31 !important;
}

/* Danger -> soft red */
:where(.dal-app) .alert-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #b4232c !important;
}

/* Light -> glass */
:where(.dal-app) .alert-light {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: var(--dal-text) !important;
}

/* Dark -> clean dark */
:where(.dal-app) .alert-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   DAL COLOR PATCH: hero-actions buttons (colors only)
   Scoped to .dal-app
   ========================================================= */

/* 1) وثّق خدماتك الآن (Primary) */
:where(.dal-app) .btn-pro.btn-pro-solid {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* 2) دردشة مع الإدارة (Accent) */
:where(.dal-app) .btn-pro.btn-chat {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
}

/* icons inherit text color */
:where(.dal-app) .btn-pro i {
  color: inherit !important;
}

/* hover (ألوان فقط) */
:where(.dal-app) .btn-pro.btn-pro-solid:hover {
  background: rgba(var(--dal-primary-rgb), 0.92) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.92) !important;
}
:where(.dal-app) .btn-pro.btn-chat:hover {
  background: rgba(var(--dal-accent-rgb), 0.92) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.92) !important;
}

/* focus ring (اختياري) */
:where(.dal-app) .btn-pro:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL COLOR PATCH: .btn-view (colors only)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .btn-view {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .btn-view:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* icons inherit */
:where(.dal-app) .btn-view i {
  color: inherit !important;
}

/* focus ring (اختياري) */
:where(.dal-app) .btn-view:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL COLOR PATCH: Selects (remove blue focus/highlight)
   Scoped to .dal-app
   ========================================================= */

/* 1) Bootstrap select / native select focus */
:where(.dal-app) select.form-select,
:where(.dal-app) .form-select,
:where(.dal-app) select {
  border-color: rgba(15, 23, 42, 0.18) !important;
}

:where(.dal-app) select.form-select:focus,
:where(.dal-app) .form-select:focus,
:where(.dal-app) select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* 2) Bootstrap option highlight (works in some browsers) */
:where(.dal-app) select option:checked {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-text) !important;
}
:where(.dal-app) select option:hover {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-text) !important;
}

/* 3) Dropdown menu items for libraries that use .dropdown-menu (some plugins) */
:where(.dal-app) .dropdown-menu .dropdown-item.active,
:where(.dal-app) .dropdown-menu .dropdown-item:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}

/* 4) Select2 (إذا مستخدم) */
:where(.dal-app) .select2-container--default .select2-selection--single {
  border-color: rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app)
  .select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
}
:where(.dal-app)
  .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app)
  .select2-container--default
  .select2-results__option--selected {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-primary) !important;
}

/* 5) Selectize / TomSelect (إذا مستخدم) */
:where(.dal-app) .selectize-input,
:where(.dal-app) .ts-control {
  border-color: rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app) .selectize-input.focus,
:where(.dal-app) .ts-control:focus-within {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
}
:where(.dal-app) .selectize-dropdown .option.active,
:where(.dal-app) .ts-dropdown .option.active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .selectize-dropdown .option.selected,
:where(.dal-app) .ts-dropdown .option.selected {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-primary) !important;
}

/* ===== DAL BRIDGE for legacy vars used in this page ===== */
:where(.dal-app) {
  --bg: var(--dal-bg);
  --r: var(--dal-radius-lg);
  --shadow: var(--dal-shadow);
  --shadow2: var(--dal-shadow);
  --primary2: rgba(var(--dal-primary-rgb), 0.92);
}

/* =========================================================
   DAL COLOR PATCH: provider profile page (colors only)
   Scope: .dal-app.dal-page-provider-profile
   ========================================================= */

.dal-app.dal-page-provider-profile {
  background: radial-gradient(
      900px 500px at 10% -10%,
      rgba(var(--dal-primary-rgb), 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 90% -10%,
      rgba(var(--dal-accent-rgb), 0.1),
      transparent 60%
    ),
    var(--dal-bg) !important;
}

/* Hero */
.dal-app.dal-page-provider-profile .hero {
  background: linear-gradient(
    135deg,
    rgba(var(--dal-primary-rgb), 0.1),
    rgba(255, 255, 255, 1)
  ) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Buttons btnx */
.dal-app.dal-page-provider-profile .btnx {
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  color: var(--dal-primary) !important;
}

/* Solid */
.dal-app.dal-page-provider-profile .btnx-solid {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 32px rgba(var(--dal-primary-rgb), 0.22) !important;
  color: white !important;
}

/* Avatar */
.dal-app.dal-page-provider-profile .avatar {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.7)
  ) !important;
  box-shadow: 0 14px 28px rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Verified badge + tags */
.dal-app.dal-page-provider-profile .badge-verified,
.dal-app.dal-page-provider-profile .tag {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

/* Card hover border */
.dal-app.dal-page-provider-profile .svc-card:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Button-act hover border */
.dal-app.dal-page-provider-profile .btn-act:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.25) !important;
}

/* btn-act variants */
.dal-app.dal-page-provider-profile .btn-act--primary {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 34px rgba(var(--dal-primary-rgb), 0.24) !important;
}
.dal-app.dal-page-provider-profile .btn-act--primary:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--dal-primary-rgb), 0.92),
    var(--dal-primary)
  ) !important;
}

.dal-app.dal-page-provider-profile .btn-act--soft {
  border-color: rgba(var(--dal-primary-rgb), 0.2) !important;
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  color: var(--dal-primary) !important;
}
.dal-app.dal-page-provider-profile .btn-act--soft:hover {
  background: rgba(var(--dal-primary-rgb), 0.12) !important;
}

/* Recommended pill (كان أخضر inline) */
.dal-app.dal-page-provider-profile .svc-top .pill {
  background: rgba(var(--dal-accent-rgb), 0.12) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.22) !important;
  color: #0b3d31 !important;
}

/* icons inherit */
/* icons inherit ONLY inside buttons/labels (safe) */
.dal-app.dal-page-provider-profile
  :is(.btn, .btnx, .btn-act, .chip, .tag, .badge-verified, .pill)
  i {
  color: inherit !important;
}

/* keep rating stars colored */
.dal-app.dal-page-provider-profile .stars i {
  color: inherit; /* السماح لقواعد النجوم تشتغل */
}
.dal-app.dal-page-provider-profile .stars .fas {
  color: #ffc107 !important;
}
.dal-app.dal-page-provider-profile .stars .far {
  color: #c9c9c9 !important;
}

/* =========================================================
   DAL COLOR PATCH: SweetAlert2 (Swal.fire)
   Scoped to body.dal-app
   ========================================================= */

/* Popup base (colors) */
:where(.dal-app) .swal2-popup {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

:where(.dal-app) .swal2-title {
  color: var(--dal-text) !important;
}
:where(.dal-app) .swal2-html-container,
:where(.dal-app) .swal2-content {
  color: rgba(15, 23, 42, 0.75) !important;
}

/* Backdrop */
:where(.dal-app) .swal2-backdrop-show,
:where(.dal-app) .swal2-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}

/* Buttons (colors only) */
:where(.dal-app) .swal2-styled.swal2-confirm {
  background: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) .swal2-styled.swal2-confirm:hover {
  background: rgba(var(--dal-primary-rgb), 0.92) !important;
}

:where(.dal-app) .swal2-styled.swal2-cancel {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
}
:where(.dal-app) .swal2-styled.swal2-cancel:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .swal2-styled.swal2-deny {
  background: #dc3545 !important;
  color: #fff !important;
}

/* Focus ring (inputs) */
:where(.dal-app) .swal2-input:focus,
:where(.dal-app) .swal2-textarea:focus,
:where(.dal-app) .swal2-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* Icons colors */
:where(.dal-app) .swal2-icon.swal2-success {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  color: var(--dal-accent) !important;
}
:where(.dal-app) .swal2-success-ring {
  border-color: rgba(var(--dal-accent-rgb), 0.25) !important;
}
:where(.dal-app) .swal2-success-line-tip,
:where(.dal-app) .swal2-success-line-long {
  background-color: var(--dal-accent) !important;
}

:where(.dal-app) .swal2-icon.swal2-error {
  border-color: rgba(220, 53, 69, 0.55) !important;
  color: #dc3545 !important;
}
:where(.dal-app) .swal2-x-mark-line {
  background-color: #dc3545 !important;
}

:where(.dal-app) .swal2-icon.swal2-warning {
  border-color: rgba(var(--dal-primary-rgb), 0.45) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .swal2-icon.swal2-info,
:where(.dal-app) .swal2-icon.swal2-question {
  border-color: rgba(var(--dal-primary-rgb), 0.4) !important;
  color: var(--dal-primary) !important;
}

/* Toast (colors) */
:where(.dal-app) .swal2-toast {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

.btn-close {
  position: absolute;
  left: 20px;
}
.iti {
  position: relative;
  display: inline-block;
  width: -webkit-fill-available;
}
/* =========================================================
   dal.unify.css  (ONE FILE TO RULE THEM ALL)
   - Dal Brand Tokens + Full UI system
   - Bootstrap bridge (scoped)
   - Safe defaults for native PHP projects
   - No destructive global overrides (only inside .dal-app)
   ========================================================= */

/* ============ 1) BRAND TOKENS (Dal Identity) ============ */
:root {
  --dal-primary: #282972;
  --dal-accent: #4abd9b;
  --dal-bg: #f2f2f2;
  --dal-gray: #b4b4b4;

  --dal-primary-rgb: 40, 41, 114;
  --dal-accent-rgb: 74, 189, 155;

  --dal-grad: linear-gradient(90deg, #537694 0%, #65b6a4 100%);

  --dal-text: #0f172a;
  --dal-muted: #475569;

  --dal-radius: 18px;
  --dal-radius-sm: 14px;
  --dal-radius-lg: 22px;

  --dal-border: rgba(15, 23, 42, 0.1);
  --dal-border-2: rgba(15, 23, 42, 0.14);

  --dal-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  --dal-shadow-lg: 0 18px 55px rgba(2, 6, 23, 0.1);

  --dal-font-ar: "FF Shamel Family Sans", "Cairo", system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --dal-font-en: "Madani Arabic", "Inter", system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;

  --dal-space-1: 0.25rem;
  --dal-space-2: 0.5rem;
  --dal-space-3: 0.75rem;
  --dal-space-4: 1rem;
  --dal-space-5: 1.25rem;
  --dal-space-6: 1.5rem;
  --dal-space-7: 2rem;

  --dal-focus: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18);
}

/* ============ 2) BASE SCOPE (NO GLOBAL DAMAGE) ============ */
:where(.dal-app) {
  background: var(--dal-bg);
  color: var(--dal-text);
  font-family: var(--dal-font-ar);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(.dal-app) *,
:where(.dal-app) *::before,
:where(.dal-app) *::after {
  box-sizing: border-box;
}

:where(.dal-app) a {
  color: inherit;
  text-decoration: none;
}
:where(.dal-app) a:hover {
  text-decoration: none;
}
:where(.dal-app) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(.dal-app) ::selection {
  background: rgba(var(--dal-accent-rgb), 0.25);
}

/* Typography utilities */
:where(.dal-app) .dal-h1 {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -0.2px;
  margin: 0;
}
:where(.dal-app) .dal-h2 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
  margin: 0;
}
:where(.dal-app) .dal-h3 {
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0;
}
:where(.dal-app) .dal-muted {
  color: var(--dal-muted);
}
:where(.dal-app) .dal-en {
  font-family: var(--dal-font-en);
  direction: ltr;
  text-align: left;
}

/* Layout container */
:where(.dal-app) .dal-container {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
}

/* ============ 3) BOOTSTRAP BRIDGE (SCOPED) ============ */
:where(.dal-app) {
  --bs-primary: var(--dal-primary);
  --bs-primary-rgb: var(--dal-primary-rgb);

  --bs-success: var(--dal-accent);
  --bs-success-rgb: var(--dal-accent-rgb);

  --bs-body-bg: var(--dal-bg);
  --bs-body-color: var(--dal-text);

  --bs-link-color: var(--dal-primary);
  --bs-link-hover-color: rgba(var(--dal-primary-rgb), 0.85);

  --bs-border-color: rgba(15, 23, 42, 0.12);

  --bs-border-radius: 14px;
  --bs-border-radius-sm: 12px;
  --bs-border-radius-lg: 18px;
}

/* Focus ring */
:where(.dal-app)
  :is(.btn, .form-control, .form-select, .form-check-input, a, button):focus {
  outline: none;
}
:where(.dal-app)
  :is(
    .btn,
    .form-control,
    .form-select,
    .form-check-input,
    a,
    button
  ):focus-visible {
  box-shadow: var(--dal-focus);
}

/* ============ 4) CORE UI COMPONENTS (Dal) ============ */
:where(.dal-app) .dal-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--dal-radius-lg);
  box-shadow: var(--dal-shadow);
}
:where(.dal-app) .dal-card-pad {
  padding: var(--dal-space-6);
}
@media (max-width: 600px) {
  :where(.dal-app) .dal-card-pad {
    padding: var(--dal-space-4);
  }
}

/* Section */
:where(.dal-app) .dal-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  margin: 26px 0 12px;
}

/* Pills / Badges */
:where(.dal-app) .dal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08);
  font-weight: 900;
  font-size: 13px;
}
:where(.dal-app) .dal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(180, 180, 180, 0.22);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Buttons (Dal components) */
:where(.dal-app) .dal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dal-radius-sm);
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
    opacity 0.15s ease;
}
:where(.dal-app) .dal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.14);
}
:where(.dal-app) .dal-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}
:where(.dal-app) .dal-btn[disabled],
:where(.dal-app) .dal-btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:where(.dal-app) .dal-btn-primary {
  background: var(--dal-primary);
  color: #fff;
  box-shadow: 0 12px 24px rgba(var(--dal-primary-rgb), 0.18);
}
:where(.dal-app) .dal-btn-primary:hover {
  filter: brightness(1.05);
}

:where(.dal-app) .dal-btn-accent {
  background: var(--dal-accent);
  color: #06261f;
}
:where(.dal-app) .dal-btn-ghost {
  background: rgba(15, 23, 42, 0.06);
  color: var(--dal-text);
  border-color: rgba(15, 23, 42, 0.06);
}
:where(.dal-app) .dal-btn-outline {
  background: #fff;
  color: var(--dal-primary);
  border-color: rgba(var(--dal-primary-rgb), 0.28);
}
:where(.dal-app) .dal-btn-outline:hover {
  background: rgba(var(--dal-primary-rgb), 0.06);
}

/* Inputs */
:where(.dal-app) .dal-input,
:where(.dal-app) .dal-textarea,
:where(.dal-app) .dal-select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--dal-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: var(--dal-text);
  outline: none;
}
:where(.dal-app) .dal-textarea {
  min-height: 110px;
  resize: vertical;
}
:where(.dal-app) .dal-input:focus,
:where(.dal-app) .dal-textarea:focus,
:where(.dal-app) .dal-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55);
  box-shadow: var(--dal-focus);
}

/* ============ 5) BOOTSTRAP COMPONENT SKIN (SAFE) ============ */
:where(.dal-app) .btn {
  font-weight: 900;
  border-radius: var(--dal-radius-sm);
}
:where(.dal-app) .btn-primary {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
}
:where(.dal-app) .btn-primary:hover {
  background-color: rgba(var(--dal-primary-rgb), 0.92);
  border-color: rgba(var(--dal-primary-rgb), 0.92);
}

:where(.dal-app) .btn-success {
  background-color: var(--dal-accent);
  border-color: var(--dal-accent);
  color: #06261f;
}

:where(.dal-app) .btn-outline-primary {
  color: var(--dal-primary);
  border-color: rgba(var(--dal-primary-rgb), 0.35);
}
:where(.dal-app) .btn-outline-primary:hover {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
  color: #fff;
}

:where(.dal-app) .form-label {
  font-weight: 900;
}
:where(.dal-app) .form-text {
  color: #64748b;
  font-weight: 800;
}

:where(.dal-app) .form-control,
:where(.dal-app) .form-select {
  border-radius: var(--dal-radius-sm);
  border-color: rgba(15, 23, 42, 0.12);
}
:where(.dal-app) .form-control:focus,
:where(.dal-app) .form-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55);
  box-shadow: var(--dal-focus);
}

:where(.dal-app) .form-check-input:checked {
  background-color: var(--dal-primary);
  border-color: var(--dal-primary);
}
:where(.dal-app) .form-check-input:focus {
  box-shadow: var(--dal-focus);
}

/* Dropdown / Modal / Alerts / Tables / Pagination / Accordion / Toast */
:where(.dal-app) .dropdown-menu {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}
:where(.dal-app) .dropdown-item {
  font-weight: 800;
  border-radius: 12px;
}
:where(.dal-app) .dropdown-item:hover {
  background: rgba(var(--dal-primary-rgb), 0.06);
}

:where(.dal-app) .offcanvas,
:where(.dal-app) .modal-content {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}
:where(.dal-app) .offcanvas-header,
:where(.dal-app) .modal-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
:where(.dal-app) .offcanvas-title,
:where(.dal-app) .modal-title {
  font-weight: 900;
}

:where(.dal-app) .alert {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-weight: 800;
}
:where(.dal-app) .alert-primary {
  background: rgba(var(--dal-primary-rgb), 0.08);
  border-color: rgba(var(--dal-primary-rgb), 0.16);
  color: var(--dal-primary);
}
:where(.dal-app) .alert-success {
  background: rgba(var(--dal-accent-rgb), 0.1);
  border-color: rgba(var(--dal-accent-rgb), 0.18);
  color: #0b3d31;
}

:where(.dal-app) .badge.bg-primary {
  background: var(--dal-primary) !important;
}
:where(.dal-app) .badge.bg-success {
  background: var(--dal-accent) !important;
  color: #06261f !important;
}

:where(.dal-app) .table {
  color: var(--dal-text);
}
:where(.dal-app) .table thead th {
  font-weight: 900;
  border-bottom-color: rgba(15, 23, 42, 0.14);
}
:where(.dal-app) .table td,
:where(.dal-app) .table th {
  vertical-align: middle;
}
:where(.dal-app) .table-hover tbody tr:hover {
  background: rgba(var(--dal-primary-rgb), 0.04);
}

:where(.dal-app) .page-link {
  border-radius: 12px;
  font-weight: 900;
  color: var(--dal-primary);
}
:where(.dal-app) .page-item.active .page-link {
  background: var(--dal-primary);
  border-color: var(--dal-primary);
}

:where(.dal-app) .accordion-item {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
:where(.dal-app) .accordion-button {
  font-weight: 900;
}
:where(.dal-app) .accordion-button:focus {
  box-shadow: var(--dal-focus);
}

:where(.dal-app) .toast {
  border-radius: var(--dal-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--dal-shadow-lg);
}

/* ============ 6) LEGACY VARIABLE BRIDGE (THE MAGIC) ============ */
:where(.dal-app) {
  --primary: var(--dal-primary);
  --primary-rgb: var(--dal-primary-rgb);

  --accent: var(--dal-accent);
  --accent-rgb: var(--dal-accent-rgb);

  --text: var(--dal-text);
  --muted: var(--dal-muted);

  --border: var(--dal-border);
  --card: rgba(255, 255, 255, 0.92);
  --radius: var(--dal-radius-lg);

  --danger: #dc3545;
}

/* Prevent weird overflow from old layouts */
:where(.dal-app) .container,
:where(.dal-app) .container-fluid {
  overflow-x: clip;
}

/* Responsive button full width helper */
@media (max-width: 600px) {
  :where(.dal-app) .dal-btn,
  :where(.dal-app) .btn {
    width: 100%;
    justify-content: center;
  }
}



/* 2) ✅ NAVBAR: no rounded edges + full width */
.dal-app nav.navbar {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* keep bootstrap dark navbar correct (DON'T force dark text) */
.dal-app .navbar.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}
.dal-app .navbar.navbar-dark .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.dal-app .navbar.navbar-dark .navbar-nav .nav-link i {
  color: inherit !important; /* ✅ icons visible on dark */
  opacity: 0.95;
}

/* 3) universal primary buttons */
.dal-app .btnMain,
.dal-app .btn-submit,
.dal-app .submit-btn,
.dal-app .btn.btn-primary,
.dal-app .btn.btn-brand,
.dal-app .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.dal-app .btnMain:hover,
.dal-app .btn-submit:hover,
.dal-app .submit-btn:hover,
.dal-app .btn-primary:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 18px 50px rgba(var(--dal-primary-rgb), 0.22) !important;
}
.dal-app .btnMain:active,
.dal-app .btn-submit:active,
.dal-app .submit-btn:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.dal-app .btn-submit:disabled,
.dal-app .btn-submit.loading,
.dal-app .btnMain:disabled,
.dal-app .submit-btn:disabled {
  background: rgba(var(--dal-primary-rgb), 0.45) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.45) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* 4) links that were hardcoded blue */
.dal-app .login-container a,
.dal-app .links a,
.dal-app a.text-decoration-none {
  color: var(--primary) !important;
}

/* 5) focus rings */
.dal-app .input-group .form-control:focus,
.dal-app .form-control:focus,
.dal-app input:focus,
.dal-app textarea:focus,
.dal-app select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* 6) ✅ ICONS HARD FIX (حتى لو في CSS قديم قاتلها) */
.dal-app
  :where(
    .fa,
    .fas,
    .far,
    .fal,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-light,
    .fa-duotone,
    [class^="fa-"],
    [class*=" fa-"]
  ) {
  font-family: var(
    --fa-style-family,
    "Font Awesome 6 Free",
    "Font Awesome 5 Free",
    "Font Awesome 5 Pro",
    "FontAwesome"
  ) !important;
  font-weight: var(--fa-style, 900) !important;
}
.dal-app :where(.fab, .fa-brands) {
  font-family: var(
    --fa-style-family-brands,
    "Font Awesome 6 Brands",
    "Font Awesome 5 Brands"
  ) !important;
  font-weight: 400 !important;
}
.dal-app :where(.bi, [class^="bi-"], [class*=" bi-"]) {
  font-family: "bootstrap-icons" !important;
  font-weight: 400 !important;
}

/* (optional) consistent icon alignment */
.dal-app i[class^="fa-"],
.dal-app i[class*=" fa-"],
.dal-app i.bi {
  /* line-height: 1; */
  vertical-align: -0.125em;
}

/* 3) universal primary buttons (covers YOUR project classes) */
.dal-app .btnMain,
.dal-app .btn-submit,
.dal-app .submit-btn,
.dal-app .btnPrimarySweet,
.dal-app .btn.btn-primary,
.dal-app .btn.btn-brand,
.dal-app .btn-primary {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* hover/active polish */
.dal-app .btnMain:hover,
.dal-app .btn-submit:hover,
.dal-app .submit-btn:hover,
.dal-app .btnPrimarySweet:hover,
.dal-app .btn-primary:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 18px 50px rgba(var(--dal-primary-rgb), 0.22) !important;
}

.dal-app .btnMain:active,
.dal-app .btn-submit:active,
.dal-app .submit-btn:active,
.dal-app .btnPrimarySweet:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* =========================================================
   DAL BUTTON PACK (FULL COVERAGE)
   - Bootstrap: outline-dark / dark / rounded-4 / py-3 etc
   - Sweet buttons: btnSweet + btnAccentSweet
   ========================================================= */

/* 1) Base buttons (Dal look) - بدون ما نكسر utilities مثل py-3 */
.dal-app .btn,
.dal-app .btnSweet {
  font-weight: 900 !important;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
    background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dal-app .btn:hover,
.dal-app .btnSweet:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.12);
}

.dal-app .btn:active,
.dal-app .btnSweet:active {
  transform: translateY(1px);
  box-shadow: none;
}

.dal-app .btn:disabled,
.dal-app .btn.disabled,
.dal-app .btnSweet[disabled],
.dal-app .btnSweet.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.dal-app .btn {
  border-radius: var(--dal-radius-sm) !important; /* يكسر أي !important قديم */
  padding: 0.6rem 1rem; /* بدون !important حتى py-3 يشتغل */
}

.dal-app .btnSweet {
  border-radius: var(--dal-radius-sm) !important;
  padding: 12px 16px;

  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
  text-decoration: none;
}

/* 3) Allow Bootstrap rounded utilities (rounded-4 وغيره) رغم !important تبعنا */
.dal-app .btn.rounded-0 {
  border-radius: 0 !important;
}
.dal-app .btn.rounded-1 {
  border-radius: var(--bs-border-radius-sm, 0.2rem) !important;
}
.dal-app .btn.rounded-2 {
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}
.dal-app .btn.rounded-3 {
  border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
}
.dal-app .btn.rounded-4 {
  border-radius: var(--bs-border-radius-xl, 1rem) !important;
}
.dal-app .btn.rounded-5 {
  border-radius: var(--bs-border-radius-2xl, 2rem) !important;
}
.dal-app .btn.rounded-pill {
  border-radius: var(--bs-border-radius-pill, 50rem) !important;
}

/* 4) Bootstrap Primary/Success داخل الهوية */
.dal-app .btn-primary {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(var(--dal-primary-rgb), 0.22);
}
.dal-app .btn-primary:hover {
  filter: brightness(1.06) !important;
}

.dal-app .btn-success {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
  box-shadow: 0 12px 26px rgba(var(--dal-accent-rgb), 0.2);
}
.dal-app .btn-success:hover {
  filter: brightness(1.03) !important;
}

/* 5) ✅ المطلوب: btn-outline-dark (Dal-compatible) */
.dal-app .btn-outline-dark {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
.dal-app .btn-outline-dark:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}
.dal-app .btn-outline-dark:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* 6) btn-dark (محترم + متناسق) */
.dal-app .btn-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}
.dal-app .btn-dark:hover {
  filter: brightness(1.06) !important;
}

/* 7) ✅ Sweet buttons mapping (covers: btnSweet btnAccentSweet) */
.dal-app .btnPrimarySweet {
  background: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
  box-shadow: 0 12px 26px rgba(var(--dal-primary-rgb), 0.22);
}
.dal-app .btnPrimarySweet:hover {
  filter: brightness(1.06) !important;
}

.dal-app .btnAccentSweet {
  background: var(--dal-accent) !important;
  color: #06261f !important;
  border: 1px solid var(--dal-accent) !important;
  box-shadow: 0 12px 26px rgba(var(--dal-accent-rgb), 0.18);
}
.dal-app .btnAccentSweet:hover {
  filter: brightness(1.03) !important;
}

/* 8) Icon spacing + keep icons visible */
.dal-app .btn i,
.dal-app .btnSweet i {
  /* line-height: 1; */
  vertical-align: -0.125em;
}

/* (اختياري) إذا بتستخدم w-100 كثير: خلي Sweet مثل Bootstrap */
.dal-app .btnSweet.w-100 {
  width: 100%;
}

/* ===== NAVBAR: Brand + Fixed ===== */
.dal-app.has-fixed-navbar {
  padding-top: 76px;
} /* عدّلها إذا ارتفاع الناف بار اختلف */

.dal-app .dal-navbar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.dal-app .dal-navbar .nav-link {
  font-weight: 900 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  color: var(--dal-text) !important;
}
.dal-app .dal-navbar .nav-link:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  color: var(--dal-primary) !important;
}
.dal-app .dal-navbar .nav-link i {
  color: rgba(15, 23, 42, 0.85) !important;
}
/* ===== ICON SPACING FIX (RTL-safe) ===== */
.dal-app .nav-link,
.dal-app .dropdown-item,
.dal-app .btn {
  /* display: inline-flex; */
  align-items: center;
  gap: 0.5rem; /* المسافة القياسية بين الأيقونة والنص */
}

/* أيقونة داخل روابط الناف */
.dal-app .nav-link i,
.dal-app .dropdown-item i,
.dal-app .btn i {
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: middle;
}

/* إذا في عناصر ما بدك تتحول flex (نادر) استخدم هذا الكلاس */
.dal-app .no-icon-gap {
  display: inline-block !important;
  gap: 0 !important;
}
/* ===== Floating edit/delete buttons: COLOR ONLY (Scoped) ===== */
.dal-app .btn.btn-edit {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

.dal-app .btn.btn-edit:hover {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

.dal-app .btn.btn-delete {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #dc3545 !important;
}

.dal-app .btn.btn-delete:hover {
  background: rgba(220, 53, 69, 0.14) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #dc3545 !important;
}

/* icons inherit button color */
.dal-app .btn.btn-edit i,
.dal-app .btn.btn-delete i {
  color: inherit !important;
}
/* ===== FIX: buttons text moved to the right (undo flex) ===== */

/* 1) رجّع زرار Bootstrap لطبيعته (inline-block) */

/* 2) خلي flex+gap فقط للروابط بالقوائم (هون مفيد وما بيكسر) */
.dal-app .nav-link,
.dal-app .dropdown-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* 3) مسافة الأيقونة داخل الأزرار بدون flex */

.dal-app .btn > i:last-child,
.dal-app .btn > svg:last-child {
  /* margin-inline-start: .5rem; */
  margin-inline-end: 0;
}

/* 4) إذا الزر w-100 أو block خلي النص بالنص مثل قبل */
.dal-app .btn.w-100,
.dal-app .btn.d-block,
.dal-app .btn.btn-block {
  text-align: center !important;
}

/* ===== DAL BRAND PATCH: add_service ONLY ===== */
.dal-app.dal-page-add-service {
  /* remap page local tokens -> DAL tokens */
  --bg: var(--dal-bg);
  --card: rgba(255, 255, 255, 0.92);
  --text: var(--dal-text);
  --muted: var(--dal-muted);

  --border: rgba(15, 23, 42, 0.12);
  --border-soft: rgba(15, 23, 42, 0.08);

  --primary: var(--dal-primary);
  --primary-soft: rgba(var(--dal-primary-rgb), 0.1);

  --success: var(--dal-accent);
  --success-hover: var(--dal-accent);

  --ring: 0 0 0 0.18rem rgba(var(--dal-accent-rgb), 0.2);
}

/* background gradient to brand (COLOR ONLY) */
.dal-app.dal-page-add-service {
  background: radial-gradient(
      900px 500px at 85% -10%,
      rgba(var(--dal-primary-rgb), 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 10% 110%,
      rgba(var(--dal-accent-rgb), 0.1),
      transparent 55%
    ),
    var(--dal-bg) !important;
}

/* Fix hardcoded blue blocks in this page */
.dal-app.dal-page-add-service .page-badge,
.dal-app.dal-page-add-service .service-badge,
.dal-app.dal-page-add-service .dz-shell__icon,
.dal-app.dal-page-add-service .quota-pill:not(.is-danger):not(.is-muted) {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.18) !important;
  color: var(--dal-primary) !important;
}

/* Inputs hover/focus brand (COLOR ONLY) */
.dal-app.dal-page-add-service .form-control:hover,
.dal-app.dal-page-add-service .form-select:hover,
.dal-app.dal-page-add-service .selectize-input:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.35) !important;
}
.dal-app.dal-page-add-service .form-control:focus,
.dal-app.dal-page-add-service .form-select:focus,
.dal-app.dal-page-add-service .selectize-input.focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: var(--dal-focus) !important;
}

/* Selectize active option */
.dal-app.dal-page-add-service .selectize-dropdown .option.active {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
}

/* Switch checked -> primary */
.dal-app.dal-page-add-service .form-check-input:checked {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Floating save button -> accent (COLOR ONLY) */
.dal-app.dal-page-add-service #addService {
  background: linear-gradient(
    135deg,
    var(--dal-accent),
    rgba(var(--dal-accent-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 35px rgba(var(--dal-accent-rgb), 0.26) !important;
}

/* ===== NAVBAR Z-INDEX FIX: add_service ONLY ===== */
.dal-app.dal-page-add-service .dal-navbar {
  position: sticky; /* ما بيكسر الصفحات الأخرى */
  top: 0;
  z-index: 999;
  isolation: isolate; /* مهم حتى الدروبداون يطلع فوق كل شي */
}

.dal-app.dal-page-add-service .dal-navbar .dropdown-menu {
  z-index: 1101;
}

/* =========================
   LEAFLET POPUP (DAL BRAND)
   Scoped: داخل .dal-app فقط
   ========================= */

/* Wrapper */
.dal-app .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(2, 6, 23, 0.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Popup tip (السهم) */
.dal-app .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 18px 55px rgba(2, 6, 23, 0.1) !important;
}

/* Content */
.dal-app .leaflet-popup-content {
  margin: 12px 12px !important;
  color: var(--dal-text, #0f172a) !important;
  font-family: var(--dal-font-ar, "Cairo", sans-serif) !important;
  min-width: 220px; /* ✅ بدل 156px الضيق */
  max-width: 320px;
}

/* Title */
.dal-app .leaflet-popup-content .popup-content h5 {
  margin: 0 0 6px !important;
  font-weight: 950 !important;
  font-size: 1rem !important;
  /* line-height: 1.25 !important; */
  color: var(--dal-text, #0f172a) !important;
}

/* Meta line */
.dal-app .leaflet-popup-content .popup-content .meta {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: rgba(15, 23, 42, 0.65) !important;
  margin-bottom: 10px !important;
}

/* Badges (match brand) */
.dal-app .leaflet-popup-content .badge {
  border-radius: 999px !important;
  padding: 0.45rem 0.6rem !important;
  font-weight: 900 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* services badge = primary */
.dal-app .leaflet-popup-content .badge.bg-primary {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.1) !important;
  color: var(--dal-primary, #282972) !important;
  border-color: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
}

/* requests badge = accent (بدل رمادي ثانوي) */
.dal-app .leaflet-popup-content .badge.bg-secondary {
  background: rgba(var(--dal-accent-rgb, 74, 189, 155), 0.14) !important;
  color: #0b3d31 !important;
  border-color: rgba(var(--dal-accent-rgb, 74, 189, 155), 0.22) !important;
}

/* Actions layout */
.dal-app .leaflet-popup-content .actions {
  margin-top: 10px !important;
}

/* Buttons inside popup (compact + brand) */
.dal-app .leaflet-popup-content .btn {
  border-radius: 14px !important;
  font-weight: 900 !important;
  padding: 0.45rem 0.65rem !important;
  /* line-height: 1.1 !important; */
}

/* "عرض مقدمي الخدمات" - link button but looks like pill */
.dal-app .leaflet-popup-content .btn-link {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.08) !important;
  color: var(--dal-primary, #282972) !important;
  border: 1px solid rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
  text-decoration: none !important;
}
.dal-app .leaflet-popup-content .btn-link:hover {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.12) !important;
}

/* "عرض الطلبات" - keep danger meaning لكن ناعم */
.dal-app .leaflet-popup-content .btn-outline-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #dc3545 !important;
}
.dal-app .leaflet-popup-content .btn-outline-danger:hover {
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
}

/* Close button polish */
.dal-app .leaflet-popup-close-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  color: rgba(15, 23, 42, 0.7) !important;
  top: 8px !important;
  right: 8px !important; /* Leaflet uses right even in RTL */
}
.dal-app .leaflet-popup-close-button:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--dal-primary, #282972) !important;
}
.dal-app .leaflet-popup-content {
  width: auto !important;
}

/* ===== Leaflet close button: LEFT + polished (Scoped) ===== */
.dal-app .leaflet-container .leaflet-popup-close-button {
  /* move to LEFT */
  left: 10px !important;
  right: auto !important;

  top: 10px !important;

  /* size + look */
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;

  color: rgba(15, 23, 42, 0.7) !important;
  text-decoration: none !important;

  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08) !important;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease,
    box-shadow 0.12s ease !important;
}

/* hover */
.dal-app .leaflet-container .leaflet-popup-close-button:hover {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
  color: var(--dal-primary, #282972) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12) !important;
}

/* active */
.dal-app .leaflet-container .leaflet-popup-close-button:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08) !important;
}

/* focus */
.dal-app .leaflet-container .leaflet-popup-close-button:focus-visible {
  outline: none !important;
  box-shadow: var(
    --dal-focus,
    0 0 0 0.25rem rgba(74, 189, 155, 0.18)
  ) !important;
}

/* MarkerCluster -> DAL brand (Scoped) */
.dal-app .marker-cluster-small {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.18) !important;
}
.dal-app .marker-cluster-small div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.38) !important;
  color: #fff !important;
  font-weight: 900;
}

.dal-app .marker-cluster-medium {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.16) !important;
}
.dal-app .marker-cluster-medium div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.34) !important;
  color: #fff !important;
  font-weight: 900;
}

.dal-app .marker-cluster-large {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.14) !important;
}
.dal-app .marker-cluster-large div {
  background: rgba(var(--dal-primary-rgb, 40, 41, 114), 0.3) !important;
  color: #fff !important;
  font-weight: 900;
}

/* ===== DAL Brand colors (only colors) ===== */
:root {
  --dal-primary: #282972; /* الأساسي */
  --dal-accent: #4abd9b; /* أكسنت */
  --dal-primary-hover: #23245f; /* أغمق شوي */
  --dal-primary-soft: rgba(40, 41, 114, 0.1);
  --dal-accent-soft: rgba(74, 189, 155, 0.14);
}

/* ===== 1) Card header (colors only) ===== */
.card-header {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    var(--dal-primary-hover)
  ) !important;
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* لو في btn-link داخل الهيدر */
.card-header .btn,
.card-header .btn-link {
  color: #fff !important;
}

/* لو في أيقونات بالهيدر */
.card-header i {
  color: #fff !important;
  opacity: 0.92;
}

/* ===== 2) Update button (colors only) ===== */
#updateService {
  background: linear-gradient(135deg, var(--dal-accent), #3aa989) !important;
  color: #fff !important;
}

/* hover/active (ألوان فقط) */
#updateService:hover {
  background: linear-gradient(135deg, #48c7a4, #2f9f7f) !important;
}
#updateService:active {
  background: linear-gradient(135deg, #3bb797, #2a8f72) !important;
}

/* أيقونة الحفظ */
#updateService i {
  color: #fff !important;
}

/* ===== DAL checkbox colors (scoped) ===== */
.dal-app input[type="checkbox"].day-toggle {
  accent-color: var(--dal-primary) !important; /* أفضل حل حديث */
}

/* Bootstrap checkboxes/switches (in case accent-color ما كفى) */
.dal-app .form-check-input {
  border-color: rgba(40, 41, 114, 0.45) !important;
}

.dal-app .form-check-input:checked {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Focus ring بنفس الهوية */
.dal-app .form-check-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(40, 41, 114, 0.2) !important;
  border-color: rgba(40, 41, 114, 0.7) !important;
}

/* Disabled شكل واضح */
.dal-app .form-check-input:disabled {
  opacity: 0.6;
  border-color: rgba(40, 41, 114, 0.25) !important;
}

/* =========================
   BRAND PATCH (Visual Identity)
   ضع هذا الكود بآخر <style>
   ========================= */

:root {
  --brand-primary: #282972; /* الأساسي */
  --brand-accent: #4abd9b; /* أكسنت */
  --brand-bg: #f2f2f2; /* خلفيات فاتحة */
  --brand-border: #b4b4b4; /* حدود/Muted */
  --brand-white: #ffffff;

  --ring-primary: rgba(40, 41, 114, 0.28); /* #282972 */
  --ring-accent: rgba(74, 189, 155, 0.28); /* #4ABD9B */
}

/* زر السك롤 */
#scrollButton {
  background-color: var(--brand-white) !important;
  color: var(--brand-primary) !important;
  border: 1px solid rgba(180, 180, 180, 0.6) !important;
  box-shadow: 0 10px 24px rgba(40, 41, 114, 0.18) !important;
}
#scrollButton:hover {
  transform: translateY(-2px) !important;
}

/* العناوين */
h2 {
  color: var(--brand-primary) !important;
}

/* أزرار التحديث/الإيقاف */
#updateButton {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
}
#updateButton:hover {
  filter: brightness(0.92);
}

#stopButton {
  background: transparent !important;
  color: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
}
#stopButton:hover {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  filter: none !important;
}

/* DataTable Header */
table.dataTable thead th {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Hover rows */
table.dataTable tbody tr:hover {
  background-color: var(--brand-bg) !important;
}

/* Loader */
#loader {
  border: 16px solid var(--brand-bg) !important;
  border-top: 16px solid var(--brand-primary) !important;
}

/* Filters active state */
.filter-btn.active-filter {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem var(--ring-primary) !important;
}

/* Wrapper card look */
#referralTable_wrapper {
  border: 1px solid rgba(180, 180, 180, 0.35) !important;
  box-shadow: 0 10px 30px rgba(40, 41, 114, 0.1) !important;
}

/* Search input focus */
#referralTable_wrapper .dataTables_filter input {
  border: 1px solid var(--brand-border) !important;
}
#referralTable_wrapper .dataTables_filter input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--ring-primary) !important;
}

/* Export buttons */
#referralTable_wrapper .dt-buttons .btn {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
}
#referralTable_wrapper .dt-buttons .btn:hover {
  filter: brightness(0.92);
}

/* Pagination active */
#referralTable_paginate .page-item.active .page-link {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Mobile row background */
#referralTable tbody tr {
  background-color: var(--brand-bg) !important;
}

/* Toastr */
#toast-container .toast-success {
  background-color: var(--brand-accent) !important;
  color: #fff !important;
}
#toast-container .toast-info {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}
#toast-container .toast-warning {
  background-color: var(--brand-bg) !important;
  color: var(--brand-primary) !important;
  border-left: 6px solid var(--brand-accent) !important;
}
#toast-container .toast-error {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
  border-left: 6px solid var(--brand-accent) !important;
}
/* =========================================================
   DAL PATCH: Legacy hardcoded blues (SCOPED)
   - replace old #007bff look using DAL tokens
   - safe: affects only inside .dal-app
   ========================================================= */

/* Optional: if you want a named white token */
:root {
  --dal-white: #fff;
}

/* Scroll-to-top button */
:where(.dal-app) #scrollButton {
  background-color: var(--dal-white) !important;
  color: var(--dal-primary) !important;
  border: 1px solid rgba(180, 180, 180, 0.6) !important;
  box-shadow: 0 10px 24px rgba(var(--dal-primary-rgb), 0.18) !important;
}
:where(.dal-app) #scrollButton:hover {
  transform: translateY(-2px) !important;
}

/* Headings (بدل ما تكون global) */
:where(.dal-app) h2 {
  color: var(--dal-primary) !important;
}

/* Update/Stop buttons */
:where(.dal-app) #updateButton {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #updateButton:hover {
  filter: brightness(0.95) !important;
}

:where(.dal-app) #stopButton {
  background: transparent !important;
  color: var(--dal-primary) !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #stopButton:hover {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DataTables */
:where(.dal-app) table.dataTable thead th {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) table.dataTable tbody tr:hover {
  background-color: var(--dal-bg) !important;
}

/* Loader */
:where(.dal-app) #loader {
  border: 16px solid var(--dal-bg) !important;
  border-top: 16px solid var(--dal-primary) !important;
}

/* Filters active */
:where(.dal-app) .filter-btn.active-filter {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dal-primary-rgb), 0.28) !important;
}

/* Wrapper look */
:where(.dal-app) #referralTable_wrapper {
  border: 1px solid rgba(180, 180, 180, 0.35) !important;
  box-shadow: 0 10px 30px rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* Search input focus */
:where(.dal-app) #referralTable_wrapper .dataTables_filter input {
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app) #referralTable_wrapper .dataTables_filter input:focus {
  border-color: rgba(var(--dal-primary-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Export buttons */
:where(.dal-app) #referralTable_wrapper .dt-buttons .btn {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border: 1px solid var(--dal-primary) !important;
}
:where(.dal-app) #referralTable_wrapper .dt-buttons .btn:hover {
  filter: brightness(0.95) !important;
}

/* Pagination active */
:where(.dal-app) #referralTable_paginate .page-item.active .page-link {
  background-color: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
}

/* Mobile rows */
:where(.dal-app) #referralTable tbody tr {
  background-color: var(--dal-bg) !important;
}

/* Toastr */
:where(.dal-app) #toast-container .toast-success {
  background-color: var(--dal-accent) !important;
  color: #fff !important;
}
:where(.dal-app) #toast-container .toast-info {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) #toast-container .toast-warning {
  background-color: var(--dal-bg) !important;
  color: var(--dal-primary) !important;
  border-left: 6px solid var(--dal-accent) !important;
}
:where(.dal-app) #toast-container .toast-error {
  background-color: var(--dal-primary) !important;
  color: #fff !important;
  border-left: 6px solid var(--dal-accent) !important;
}

/* 2) Modal direction (خليه scoped بدل global) */
:where(.dal-app) .modal {
  direction: rtl;
}

/* 3) Mobile table cards: استبدال #007bff + #212529 بألوان الهوية */
@media (max-width: 768px) {
  :where(.dal-app) .table tbody tr {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06) !important;
  }

  :where(.dal-app) .table tbody tr td::before,
  :where(.dal-app) .table tbody tr th::before {
    color: var(--dal-primary) !important; /* بدل #007bff */
    font-weight: 900 !important;
  }

  :where(.dal-app) .table tbody tr th[data-label="#"] {
    color: var(--dal-text) !important; /* بدل #212529 */
    font-weight: 950 !important;
  }
}

/* =========================================================
   DAL PATCH: Action buttons (edit/delete) inside tables/cards
   Scoped to .dal-app
   ========================================================= */

/* EDIT button (was btn-warning) -> DAL primary soft */
:where(.dal-app) .edit-btn.btn-warning,
:where(.dal-app) td[data-label="الإجراءات"] .edit-btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .edit-btn.btn-warning:hover,
:where(.dal-app) td[data-label="الإجراءات"] .edit-btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DELETE button (btn-danger) -> keep danger but DAL-style */
:where(.dal-app) .delete-btn.btn-danger,
:where(.dal-app) td[data-label="الإجراءات"] .delete-btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}

:where(.dal-app) .delete-btn.btn-danger:hover,
:where(.dal-app) td[data-label="الإجراءات"] .delete-btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* optional: make both look consistent size-wise (if needed) */
:where(.dal-app) .edit-btn,
:where(.dal-app) .delete-btn {
  font-weight: 900 !important;
  border-radius: var(--dal-radius-sm) !important;
}

.input-group
  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
    .valid-feedback
  ):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* =========================================================
   DAL PATCH: btn-secondary (modal close / neutral buttons)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .btn.btn-secondary,
:where(.dal-app) button.btn.btn-secondary {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}

:where(.dal-app) .btn.btn-secondary:hover,
:where(.dal-app) button.btn.btn-secondary:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .btn.btn-secondary:active,
:where(.dal-app) button.btn.btn-secondary:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
}

/* Focus ring */
:where(.dal-app) .btn.btn-secondary:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL PATCH: Table action buttons (warning/danger) in cells
   - covers buttons without edit-btn class
   Scoped to .dal-app
   ========================================================= */

/* EDIT (btn-warning) -> DAL primary soft */
:where(.dal-app) td .btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border: 1px solid rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) td .btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* DELETE (btn-danger) -> keep danger but DAL-style */
:where(.dal-app) td .btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}

:where(.dal-app) td .btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* keep small buttons consistent */
:where(.dal-app) td .btn.btn-sm {
  font-weight: 900 !important;
  border-radius: 12px !important;
}

/* icon color (if you add icons later) */
:where(.dal-app) td .btn.btn-warning i,
:where(.dal-app) td .btn.btn-danger i {
  color: inherit !important;
}

/* =========================================================
   DAL TABLE SKIN (Opt-in via .dal-table)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .dal-table {
  --bs-table-color: var(--dal-text);
  --bs-table-bg: rgba(255, 255, 255, 0.92);
  --bs-table-border-color: rgba(15, 23, 42, 0.12);
  --bs-table-striped-bg: rgba(var(--dal-primary-rgb), 0.03);
  --bs-table-hover-bg: rgba(var(--dal-primary-rgb), 0.05);

  border-radius: var(--dal-radius-lg);
  overflow: hidden; /* يخلي الرأس والزوايا نظاف */
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.06);
}

/* table head */
:where(.dal-app) .dal-table thead th {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  color: #fff !important;
  font-weight: 950 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* cells */
:where(.dal-app) .dal-table td,
:where(.dal-app) .dal-table th {
  vertical-align: middle;
  text-align: center;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* zebra */
:where(.dal-app) .dal-table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--dal-primary-rgb), 0.03) !important;
}

/* hover */
:where(.dal-app) .dal-table.table-hover tbody tr:hover {
  background-color: rgba(var(--dal-primary-rgb), 0.05) !important;
}

/* bordered polish */
:where(.dal-app) .dal-table.table-bordered {
  border-color: rgba(15, 23, 42, 0.12) !important;
}

/* =========================================================
   DAL PATCH: action button set (outline-success / warning / danger)
   - works anywhere (not only inside td)
   - scoped to .dal-app
   ========================================================= */

/* 1) btn-outline-success -> DAL Accent outline */
:where(.dal-app) .btn.btn-outline-success {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-accent) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.45) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.06);
}
:where(.dal-app) .btn.btn-outline-success:hover {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
}
:where(.dal-app) .btn.btn-outline-success:active {
  filter: brightness(0.98) !important;
}

/* 2) btn-warning (Edit) -> DAL primary soft */
:where(.dal-app) .btn.btn-warning {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.26) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .btn.btn-warning:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* 3) btn-danger (Delete) -> keep danger but DAL-style */
:where(.dal-app) .btn.btn-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.26) !important;
  color: #dc3545 !important;
}
:where(.dal-app) .btn.btn-danger:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* polish for small buttons */
:where(.dal-app) .btn.btn-sm {
  font-weight: 900 !important;
  border-radius: 12px !important;
}

/* icons inherit */
:where(.dal-app) .btn i {
  color: inherit !important;
}

/* =========================================================
   DAL PATCH: Alerts (Bootstrap .alert .alert-*)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .alert {
  border-radius: var(--dal-radius-lg) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08) !important;
  font-weight: 900 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
}

/* Links inside alert */
:where(.dal-app) .alert a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Icon inside alert */
:where(.dal-app) .alert i,
:where(.dal-app) .alert .bi {
  color: inherit !important;
}

/* Close button */
:where(.dal-app) .alert .btn-close {
  filter: none;
  opacity: 0.65;
}
:where(.dal-app) .alert .btn-close:hover {
  opacity: 0.9;
}

/* ---------- Variants ---------- */

/* Primary -> DAL Primary */
:where(.dal-app) .alert-primary {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

/* Secondary -> neutral */
:where(.dal-app) .alert-secondary {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: rgba(15, 23, 42, 0.86) !important;
}

/* Success -> DAL Accent */
:where(.dal-app) .alert-success {
  background: rgba(var(--dal-accent-rgb), 0.14) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.26) !important;
  color: #0b3d31 !important;
}

/* Info -> DAL Primary soft (بدل الأزرق الفاقع) */
:where(.dal-app) .alert-info {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.18) !important;
  color: var(--dal-primary) !important;
}

/* Warning -> DAL Accent soft (متحضر) */
:where(.dal-app) .alert-warning {
  background: rgba(var(--dal-accent-rgb), 0.12) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.24) !important;
  color: #0b3d31 !important;
}

/* Danger -> soft red */
:where(.dal-app) .alert-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.22) !important;
  color: #b4232c !important;
}

/* Light -> glass */
:where(.dal-app) .alert-light {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  color: var(--dal-text) !important;
}

/* Dark -> clean dark */
:where(.dal-app) .alert-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   DAL COLOR PATCH: hero-actions buttons (colors only)
   Scoped to .dal-app
   ========================================================= */

/* 1) وثّق خدماتك الآن (Primary) */
:where(.dal-app) .btn-pro.btn-pro-solid {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* 2) دردشة مع الإدارة (Accent) */
:where(.dal-app) .btn-pro.btn-chat {
  background: var(--dal-accent) !important;
  border-color: var(--dal-accent) !important;
  color: #06261f !important;
}

/* icons inherit text color */
:where(.dal-app) .btn-pro i {
  color: inherit !important;
}

/* hover (ألوان فقط) */
:where(.dal-app) .btn-pro.btn-pro-solid:hover {
  background: rgba(var(--dal-primary-rgb), 0.92) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.92) !important;
}
:where(.dal-app) .btn-pro.btn-chat:hover {
  background: rgba(var(--dal-accent-rgb), 0.92) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.92) !important;
}

/* focus ring (اختياري) */
:where(.dal-app) .btn-pro:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL COLOR PATCH: .btn-view (colors only)
   Scoped to .dal-app
   ========================================================= */

:where(.dal-app) .btn-view {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .btn-view:hover {
  background: var(--dal-primary) !important;
  border-color: var(--dal-primary) !important;
  color: #fff !important;
}

/* icons inherit */
:where(.dal-app) .btn-view i {
  color: inherit !important;
}

/* focus ring (اختياري) */
:where(.dal-app) .btn-view:focus-visible {
  box-shadow: var(--dal-focus) !important;
}

/* =========================================================
   DAL COLOR PATCH: Selects (remove blue focus/highlight)
   Scoped to .dal-app
   ========================================================= */

/* 1) Bootstrap select / native select focus */
:where(.dal-app) select.form-select,
:where(.dal-app) .form-select,
:where(.dal-app) select {
  border-color: rgba(15, 23, 42, 0.18) !important;
}

:where(.dal-app) select.form-select:focus,
:where(.dal-app) .form-select:focus,
:where(.dal-app) select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* 2) Bootstrap option highlight (works in some browsers) */
:where(.dal-app) select option:checked {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-text) !important;
}
:where(.dal-app) select option:hover {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-text) !important;
}

/* 3) Dropdown menu items for libraries that use .dropdown-menu (some plugins) */
:where(.dal-app) .dropdown-menu .dropdown-item.active,
:where(.dal-app) .dropdown-menu .dropdown-item:active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}

/* 4) Select2 (إذا مستخدم) */
:where(.dal-app) .select2-container--default .select2-selection--single {
  border-color: rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app)
  .select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
}
:where(.dal-app)
  .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app)
  .select2-container--default
  .select2-results__option--selected {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-primary) !important;
}

/* 5) Selectize / TomSelect (إذا مستخدم) */
:where(.dal-app) .selectize-input,
:where(.dal-app) .ts-control {
  border-color: rgba(15, 23, 42, 0.18) !important;
}
:where(.dal-app) .selectize-input.focus,
:where(.dal-app) .ts-control:focus-within {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
}
:where(.dal-app) .selectize-dropdown .option.active,
:where(.dal-app) .ts-dropdown .option.active {
  background: rgba(var(--dal-primary-rgb), 0.1) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .selectize-dropdown .option.selected,
:where(.dal-app) .ts-dropdown .option.selected {
  background: rgba(var(--dal-primary-rgb), 0.14) !important;
  color: var(--dal-primary) !important;
}

/* ===== DAL BRIDGE for legacy vars used in this page ===== */
:where(.dal-app) {
  --bg: var(--dal-bg);
  --r: var(--dal-radius-lg);
  --shadow: var(--dal-shadow);
  --shadow2: var(--dal-shadow);
  --primary2: rgba(var(--dal-primary-rgb), 0.92);
}

/* =========================================================
   DAL COLOR PATCH: provider profile page (colors only)
   Scope: .dal-app.dal-page-provider-profile
   ========================================================= */

.dal-app.dal-page-provider-profile {
  background: radial-gradient(
      900px 500px at 10% -10%,
      rgba(var(--dal-primary-rgb), 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 90% -10%,
      rgba(var(--dal-accent-rgb), 0.1),
      transparent 60%
    ),
    var(--dal-bg) !important;
}

/* Hero */
.dal-app.dal-page-provider-profile .hero {
  background: linear-gradient(
    135deg,
    rgba(var(--dal-primary-rgb), 0.1),
    rgba(255, 255, 255, 1)
  ) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Buttons btnx */
.dal-app.dal-page-provider-profile .btnx {
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  color: var(--dal-primary) !important;
}

/* Solid */
.dal-app.dal-page-provider-profile .btnx-solid {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 32px rgba(var(--dal-primary-rgb), 0.22) !important;
  color: white !important;
}

/* Avatar */
.dal-app.dal-page-provider-profile .avatar {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.7)
  ) !important;
  box-shadow: 0 14px 28px rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Verified badge + tags */
.dal-app.dal-page-provider-profile .badge-verified,
.dal-app.dal-page-provider-profile .tag {
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
  color: var(--dal-primary) !important;
}

/* Card hover border */
.dal-app.dal-page-provider-profile .svc-card:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.22) !important;
}

/* Button-act hover border */
.dal-app.dal-page-provider-profile .btn-act:hover {
  border-color: rgba(var(--dal-primary-rgb), 0.25) !important;
}

/* btn-act variants */
.dal-app.dal-page-provider-profile .btn-act--primary {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.92)
  ) !important;
  box-shadow: 0 16px 34px rgba(var(--dal-primary-rgb), 0.24) !important;
}
.dal-app.dal-page-provider-profile .btn-act--primary:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--dal-primary-rgb), 0.92),
    var(--dal-primary)
  ) !important;
}

.dal-app.dal-page-provider-profile .btn-act--soft {
  border-color: rgba(var(--dal-primary-rgb), 0.2) !important;
  background: rgba(var(--dal-primary-rgb), 0.08) !important;
  color: var(--dal-primary) !important;
}
.dal-app.dal-page-provider-profile .btn-act--soft:hover {
  background: rgba(var(--dal-primary-rgb), 0.12) !important;
}

/* Recommended pill (كان أخضر inline) */
.dal-app.dal-page-provider-profile .svc-top .pill {
  background: rgba(var(--dal-accent-rgb), 0.12) !important;
  border-color: rgba(var(--dal-accent-rgb), 0.22) !important;
  color: #0b3d31 !important;
}

/* icons inherit */
/* icons inherit ONLY inside buttons/labels (safe) */
.dal-app.dal-page-provider-profile
  :is(.btn, .btnx, .btn-act, .chip, .tag, .badge-verified, .pill)
  i {
  color: inherit !important;
}

/* keep rating stars colored */
.dal-app.dal-page-provider-profile .stars i {
  color: inherit; /* السماح لقواعد النجوم تشتغل */
}
.dal-app.dal-page-provider-profile .stars .fas {
  color: #ffc107 !important;
}
.dal-app.dal-page-provider-profile .stars .far {
  color: #c9c9c9 !important;
}

/* =========================================================
   DAL COLOR PATCH: SweetAlert2 (Swal.fire)
   Scoped to body.dal-app
   ========================================================= */

/* Popup base (colors) */
:where(.dal-app) .swal2-popup {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

:where(.dal-app) .swal2-title {
  color: var(--dal-text) !important;
}
:where(.dal-app) .swal2-html-container,
:where(.dal-app) .swal2-content {
  color: rgba(15, 23, 42, 0.75) !important;
}

/* Backdrop */
:where(.dal-app) .swal2-backdrop-show,
:where(.dal-app) .swal2-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}

/* Buttons (colors only) */
:where(.dal-app) .swal2-styled.swal2-confirm {
  background: var(--dal-primary) !important;
  color: #fff !important;
}
:where(.dal-app) .swal2-styled.swal2-confirm:hover {
  background: rgba(var(--dal-primary-rgb), 0.92) !important;
}

:where(.dal-app) .swal2-styled.swal2-cancel {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.22) !important;
}
:where(.dal-app) .swal2-styled.swal2-cancel:hover {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.3) !important;
  color: var(--dal-primary) !important;
}

:where(.dal-app) .swal2-styled.swal2-deny {
  background: #dc3545 !important;
  color: #fff !important;
}

/* Focus ring (inputs) */
:where(.dal-app) .swal2-input:focus,
:where(.dal-app) .swal2-textarea:focus,
:where(.dal-app) .swal2-select:focus {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--dal-accent-rgb), 0.18) !important;
  outline: none !important;
}

/* Icons colors */
:where(.dal-app) .swal2-icon.swal2-success {
  border-color: rgba(var(--dal-accent-rgb), 0.55) !important;
  color: var(--dal-accent) !important;
}
:where(.dal-app) .swal2-success-ring {
  border-color: rgba(var(--dal-accent-rgb), 0.25) !important;
}
:where(.dal-app) .swal2-success-line-tip,
:where(.dal-app) .swal2-success-line-long {
  background-color: var(--dal-accent) !important;
}

:where(.dal-app) .swal2-icon.swal2-error {
  border-color: rgba(220, 53, 69, 0.55) !important;
  color: #dc3545 !important;
}
:where(.dal-app) .swal2-x-mark-line {
  background-color: #dc3545 !important;
}

:where(.dal-app) .swal2-icon.swal2-warning {
  border-color: rgba(var(--dal-primary-rgb), 0.45) !important;
  color: var(--dal-primary) !important;
}
:where(.dal-app) .swal2-icon.swal2-info,
:where(.dal-app) .swal2-icon.swal2-question {
  border-color: rgba(var(--dal-primary-rgb), 0.4) !important;
  color: var(--dal-primary) !important;
}

/* Toast (colors) */
:where(.dal-app) .swal2-toast {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--dal-text) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

.btn-close {
  position: absolute;
  left: 20px;
}
.iti {
  position: relative;
  display: inline-block;
  width: -webkit-fill-available;
}
/* ===== 1) Card header (DAL) - SAFE (no colored cards) ===== */
:where(.dal-app) .card:not([class*="bg-"]) > .card-header {
  background: radial-gradient(
      800px 260px at 85% -20%,
      rgba(74, 189, 155, 0.2),
      transparent 55%
    ),
    radial-gradient(
      700px 240px at 10% 0%,
      rgba(40, 41, 114, 0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      rgba(242, 242, 242, 0.95),
      rgba(255, 255, 255, 0.92)
    ) !important;
  border-bottom: 1px solid rgba(40, 41, 114, 0.12) !important;
  padding: 16px 18px !important;
  color: #282972 !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
:where(.dal-app) .card:not([class*="bg-"]) > .card-header .btn, 
:where(.dal-app) .card:not([class*="bg-"]) > .card-header .btn-link {
  color: #282972 !important;
}
:where(.dal-app) .card:not([class*="bg-"]) > .card-header i {
  color: #282972 !important;
  opacity: 0.92;
}

/* =========================================================
   DAL PAGE PATCH: Telegram Dashboard (colors + spacing)
   Scope: body.dal-app.dal-page-telegram-dashboard
   ========================================================= */

:where(.dal-app.dal-page-telegram-dashboard) {
  background: radial-gradient(
      900px 500px at 12% -10%,
      rgba(var(--dal-primary-rgb), 0.1),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 88% -10%,
      rgba(var(--dal-accent-rgb), 0.1),
      transparent 60%
    ),
    var(--dal-bg) !important;
}

/* page paddings */
:where(.dal-app.dal-page-telegram-dashboard) .page {
  padding: var(--dal-space-6) !important;
}
:where(.dal-app.dal-page-telegram-dashboard) h1 {
  color: var(--dal-text) !important;
  font-weight: 950 !important;
}

/* ===== Stats cards: clean DAL look ===== */
:where(.dal-app.dal-page-telegram-dashboard) .row > [class*="col-"] > .card {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: var(--dal-radius-lg) !important;
  box-shadow: var(--dal-shadow) !important;
  overflow: hidden !important;
  padding: 0 !important; /* يلغي padding:15px بالصفحة */
}

:where(.dal-app.dal-page-telegram-dashboard)
  .row
  > [class*="col-"]
  > .card
  .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-weight: 950 !important;
}

:where(.dal-app.dal-page-telegram-dashboard)
  .row
  > [class*="col-"]
  > .card
  .card-body {
  padding: 14px 16px !important;
  text-align: start !important;
}

:where(.dal-app.dal-page-telegram-dashboard)
  .row
  > [class*="col-"]
  > .card
  .card-title {
  margin: 0 !important;
  font-size: 2.15rem !important;
  font-weight: 950 !important;
}

/* FIX typo: #fffff -> white readable */
:where(.dal-app.dal-page-telegram-dashboard)
  .row
  > [class*="col-"]
  > .card
  .card-text {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: 0.35rem !important;
}

/* Map your custom backgrounds to DAL */
:where(.dal-app.dal-page-telegram-dashboard) .bg-primary-custom {
  background: linear-gradient(
    135deg,
    var(--dal-primary),
    rgba(var(--dal-primary-rgb), 0.86)
  ) !important;
  color: #fff !important;
}

:where(.dal-app.dal-page-telegram-dashboard) .bg-success-custom {
  background: linear-gradient(
    135deg,
    var(--dal-accent),
    rgba(var(--dal-accent-rgb), 0.86)
  ) !important;
  color: #06261f !important;
}
:where(.dal-app.dal-page-telegram-dashboard)
  .bg-success-custom
  :is(.card-header, .card-title, .card-text) {
  color: #06261f !important;
  border-bottom-color: rgba(6, 38, 31, 0.14) !important;
}

:where(.dal-app.dal-page-telegram-dashboard) .bg-warning-custom {
  /* Warning لكن من نفس روح الهوية (مزج primary+accent) */
  background: linear-gradient(
    135deg,
    rgba(var(--dal-primary-rgb), 0.92),
    rgba(var(--dal-accent-rgb), 0.84)
  ) !important;
  color: #fff !important;
}

:where(.dal-app.dal-page-telegram-dashboard) .bg-danger-custom {
  background: linear-gradient(
    135deg,
    #dc3545,
    rgba(220, 53, 69, 0.84)
  ) !important;
  color: #fff !important;
}

/* Panels -> DAL cards */
:where(.dal-app.dal-page-telegram-dashboard) .suggestions-panel-wrapper,
:where(.dal-app.dal-page-telegram-dashboard) .activity-chart-panel {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: var(--dal-radius-lg) !important;
  box-shadow: var(--dal-shadow) !important;
}

:where(.dal-app.dal-page-telegram-dashboard) .suggestions-header,
:where(.dal-app.dal-page-telegram-dashboard) .panel-header {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  border-bottom-color: rgba(15, 23, 42, 0.1) !important;
}

:where(.dal-app.dal-page-telegram-dashboard) .list-header {
  background: rgba(var(--dal-primary-rgb), 0.06) !important;
  color: rgba(15, 23, 42, 0.7) !important;
  border-bottom-color: rgba(var(--dal-primary-rgb), 0.18) !important;
}

/* suggestion cards hover */
:where(.dal-app.dal-page-telegram-dashboard) .suggestion-item {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: var(--dal-radius) !important;
}
:where(.dal-app.dal-page-telegram-dashboard) .suggestion-item:hover {
  background: rgba(var(--dal-primary-rgb), 0.03) !important;
  border-color: rgba(var(--dal-primary-rgb), 0.18) !important;
}

/* status badges from getArabicStatus */
:where(.dal-app.dal-page-telegram-dashboard) .badge.bg-warning {
  background: rgba(var(--dal-accent-rgb), 0.14) !important;
  border: 1px solid rgba(var(--dal-accent-rgb), 0.26) !important;
  color: #0b3d31 !important;
}
:where(.dal-app.dal-page-telegram-dashboard) .badge.bg-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border: 1px solid rgba(220, 53, 69, 0.22) !important;
  color: #b4232c !important;
}

/* Tabs active color */
:where(.dal-app.dal-page-telegram-dashboard) .panel-tabs .nav-link.active {
  color: var(--dal-primary) !important;
  border-bottom-color: var(--dal-primary) !important;
  background: transparent !important;
}

/* Table head if any #007bff leaks */
:where(.dal-app.dal-page-telegram-dashboard) .table thead th {
  background: var(--dal-primary) !important;
  color: #fff !important;
}

.iti__country-list {
  position: absolute;
  z-index: 2;
  left: 0 !important;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #CCC;
  white-space: nowrap !important;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}