/* LuxSupport - Global Theme Fixes (RTL)
   - Fix Chrome/Safari Autofill white background
   - Ensure active outline buttons don't become white blocks
   - Normalize form-control/select/input-group
   - Improve card headers alignment (RTL) and spacing
   - Keep focus and contrast consistent across the project
*/

:root{
  /* Ensure Lux tokens exist on all pages (fallbacks) */
  --lux-accent: var(--lux-accent, var(--accent, #7c3aed));
  --lux-accent2: var(--lux-accent2, var(--accent2, #06b6d4));
  --lux-border: var(--lux-border, var(--border-strong, rgba(255,255,255,.10)));
  --lux-card-2: var(--lux-card-2, var(--bg-surface-2, rgba(255,255,255,.06)));
  --lux-text: var(--lux-text, var(--text-primary, #f9fafb));
  --lux-muted: var(--lux-muted, var(--text-muted, #9ca3af));
}

/* 1) Autofill fix (Chrome/Safari) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--lux-text) !important;
  caret-color: var(--lux-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--lux-card-2) inset !important;
  box-shadow: 0 0 0 1000px var(--lux-card-2) inset !important;
  border: 1px solid var(--lux-border) !important;
  transition: background-color 9999s ease-out 0s;
}

/* 2) Active outline buttons should NOT become white blocks */
.btn-outline-light.active,
.btn-outline-light:active,
.btn-outline-light[aria-pressed="true"]{
  background: linear-gradient(90deg, var(--lux-accent), var(--lux-accent2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 3) Normalize form controls (padding/line-height + readable placeholder) */
.form-control,
.form-select,
.input-group-text{
  padding: .65rem .9rem;
  line-height: 1.25;
}

/* Keep legacy .lux-input aligned with the new tokens */
.lux-input{
  background: var(--lux-card-2) !important;
  color: var(--lux-text) !important;
  border: 1px solid var(--lux-border) !important;
}
.lux-input:focus{
  border-color: rgba(124,58,237,.6) !important;
}

@supports (color: color-mix(in oklab, white, black)){
  .lux-input:focus{
    border-color: color-mix(in oklab, var(--lux-accent) 60%, var(--lux-border)) !important;
  }
}
.form-control::placeholder{
  color: rgba(156,163,175,.7) !important;
}

@supports (color: color-mix(in oklab, white, black)){
  .form-control::placeholder{
    color: color-mix(in oklab, var(--lux-muted) 70%, transparent) !important;
  }
}

/* 4) Better focus ring (consistent across inputs/buttons) */
.form-control:focus,
.form-select:focus,
.btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .22rem rgba(124,58,237,.22) !important;
}

@supports (color: color-mix(in oklab, white, black)){
  .form-control:focus,
  .form-select:focus,
  .btn:focus-visible{
    box-shadow: 0 0 0 .22rem color-mix(in oklab, var(--lux-accent) 28%, transparent) !important;
  }
}

/* 5) RTL card headers: avoid "center" alignment that breaks long titles */
.card-header,
.modal-header{
  align-items: flex-start !important;
}

/* 6) Small helpers */
.text-white-50,
.text-white-75{
  color: var(--lux-muted) !important;
}

/* 7) Settings page: keep section cards visually separated */
.settings-page .lux-card + .lux-card{
  margin-top: 18px;
}
@media (max-width: 576px){
  .settings-page .lux-card + .lux-card{ margin-top: 14px; }
  .btn.w-100-sm{ width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────
   Phase 2: Tables / Badges / Dropdowns / Toasts / Alerts / Links
   الهدف: توحيد العرض داخل الجداول/القوائم المنسدلة/التنبيهات…
   بدون كسر ثيمات الصفحات المختلفة.
   ───────────────────────────────────────────────────────────── */

/* Tables (Bootstrap) */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--lux-text);
  --bs-table-border-color: var(--lux-border);
  color: var(--lux-text);
}
.table > :not(caption) > * > *{
  background-color: transparent;
  border-color: var(--lux-border);
}

/* Give tables a readable surface when they are inside a plain container */
.table-responsive,
.table{
  border-radius: 14px;
}

/* Header row */
.table thead th{
  color: rgba(249,250,251,.92);
  font-weight: 700;
  border-bottom: 1px solid var(--lux-border) !important;
}

/* Subtle row hover */
.table-hover > tbody > tr:hover > *{
  background-color: rgba(255,255,255,.04) !important;
}

/* Striped tables in dark mode */
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(255,255,255,.03) !important;
}

/* Links inside tables & cards */
.table a,
.card a,
.modal a{
  color: rgba(168, 143, 255, .95);
  text-decoration: none;
}
.table a:hover,
.card a:hover,
.modal a:hover{
  color: rgba(6, 182, 212, .95);
  text-decoration: underline;
}

/* Dropdowns */
.dropdown-menu,
.dropdown-menu.show{
  background: rgba(17,24,39,.96);
  border: 1px solid var(--lux-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.dropdown-divider{ border-top: 1px solid rgba(255,255,255,.06); }
.dropdown-item{
  color: rgba(249,250,251,.9);
  border-radius: 10px;
  padding: .55rem .85rem;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(255,255,255,.06);
  color: #fff;
}
.dropdown-item.active,
.dropdown-item:active{
  background: linear-gradient(90deg, var(--lux-accent), var(--lux-accent2));
  color: #fff;
}

/* Badges */
.badge,
.btn .badge{
  border-radius: 999px;
  padding: .38em .62em;
  font-weight: 700;
}
/* Keep common contextual badges readable on dark backgrounds */
.bg-primary{ background: linear-gradient(90deg, var(--lux-accent), var(--lux-accent2)) !important; }
.bg-success{ background: rgba(16,185,129,.25) !important; color: #d1fae5 !important; border: 1px solid rgba(16,185,129,.35) !important; }
.bg-warning{ background: rgba(245,158,11,.22) !important; color: #fef3c7 !important; border: 1px solid rgba(245,158,11,.35) !important; }
.bg-danger{  background: rgba(239,68,68,.22) !important; color: #fee2e2 !important; border: 1px solid rgba(239,68,68,.35) !important; }
.bg-info{    background: rgba(6,182,212,.20) !important; color: #cffafe !important; border: 1px solid rgba(6,182,212,.35) !important; }
.bg-secondary{ background: rgba(255,255,255,.10) !important; color: rgba(249,250,251,.92) !important; border: 1px solid rgba(255,255,255,.12) !important; }

/* Alerts */
.alert{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(249,250,251,.92);
}
.alert a{ color: rgba(6,182,212,.95); }
.alert-success{ border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.12); }
.alert-warning{ border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.12); }
.alert-danger{  border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.12); }
.alert-info{    border-color: rgba(6,182,212,.30); background: rgba(6,182,212,.12); }

/* Toasts */
.toast{
  background: rgba(17,24,39,.96) !important;
  color: rgba(249,250,251,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}
.toast-header{
  background: transparent !important;
  color: rgba(249,250,251,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.toast-body{ color: rgba(249,250,251,.88) !important; }

/* Modal body contrast */
.modal-content{
  background: rgba(17,24,39,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
}
.modal-footer{ border-top: 1px solid rgba(255,255,255,.08) !important; }

/* Nav pills (common in dashboards) */
.nav-pills .nav-link{
  color: rgba(249,250,251,.85);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link{
  background: linear-gradient(90deg, var(--lux-accent), var(--lux-accent2));
  color: #fff;
}

/* =========================
   Phase 3 — UI Components
   Pagination / Tabs / Accordions / Offcanvas / Empty States
   ========================= */

/* Pagination */
.pagination { gap: .35rem; }
.page-link{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--lux-border);
  color: var(--lux-text);
  border-radius: .85rem;
  padding: .5rem .75rem;
}
.page-link:focus{
  box-shadow: 0 0 0 .2rem rgba(120, 87, 255, .18);
}
.page-item.disabled .page-link{
  opacity:.45;
  background: rgba(255,255,255,.03);
}
.page-item.active .page-link{
  background: linear-gradient(135deg, rgba(120,87,255,.95), rgba(0,194,255,.75));
  border-color: rgba(120,87,255,.55);
  color: #fff;
}

/* Nav tabs / pills */
.nav-tabs{
  border-bottom: 1px solid var(--lux-border);
  gap: .35rem;
}
.nav-tabs .nav-link{
  border: 1px solid transparent;
  color: var(--lux-muted);
  border-radius: .95rem .95rem 0 0;
  padding: .55rem .9rem;
  background: transparent;
}
.nav-tabs .nav-link:hover{
  color: var(--lux-text);
  background: rgba(255,255,255,.03);
  border-color: var(--lux-border);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color:#fff;
  background: rgba(255,255,255,.04);
  border-color: var(--lux-border) var(--lux-border) transparent;
  position: relative;
}
.nav-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:.65rem; right:.65rem; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, rgba(120,87,255,.95), rgba(0,194,255,.85));
  border-radius: 999px;
}

/* Pills inside settings header / small switches */
.nav-pills .nav-link{
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--lux-border);
  color: var(--lux-muted);
}
.nav-pills .nav-link.active{
  background: linear-gradient(135deg, rgba(120,87,255,.95), rgba(0,194,255,.75));
  border-color: rgba(120,87,255,.55);
  color:#fff;
}

/* Accordion */
.accordion-item{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--lux-border);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: .75rem;
}
.accordion-button{
  background: transparent;
  color: var(--lux-text);
  padding: .95rem 1rem;
}
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.03);
  color:#fff;
  box-shadow: none;
}
.accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(120, 87, 255, .18);
}
.accordion-button::after{
  filter: invert(1) opacity(.8);
}
.accordion-body{
  background: rgba(0,0,0,.12);
  color: var(--lux-text);
}

/* Offcanvas */
.offcanvas{
  background: rgba(10, 12, 16, .96);
  color: var(--lux-text);
  border-left: 1px solid var(--lux-border);
  backdrop-filter: blur(10px);
}
.offcanvas-header{
  border-bottom: 1px solid var(--lux-border);
}
.offcanvas-title{ color:#fff; }
.offcanvas .btn-close{
  filter: invert(1) opacity(.85);
}

/* Modal polish */
.modal-content{
  background: rgba(10, 12, 16, .96);
  border: 1px solid var(--lux-border);
  border-radius: 1.25rem;
  color: var(--lux-text);
}
.modal-header, .modal-footer{
  border-color: var(--lux-border);
}
.modal-title{ color:#fff; }

/* Empty states */
.lux-empty{
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  border-radius: 1.25rem;
  padding: 1.25rem;
  text-align: center;
}
.lux-empty .icon{
  width: 56px; height: 56px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  background: rgba(120,87,255,.12);
  border: 1px solid rgba(120,87,255,.25);
  margin-bottom: .75rem;
}
.lux-empty h5{ color:#fff; margin-bottom:.25rem; }
.lux-empty p{ color: var(--lux-muted); margin:0; }

/* Chart containers (neutral, no hard-coded colors) */
.lux-chart{
  border: 1px solid var(--lux-border);
  background: rgba(255,255,255,.02);
  border-radius: 1.25rem;
  padding: 1rem;
}

/* Better spacing for stacked cards/sections */
.lux-stack > * + *{ margin-top: 1rem; }

/* Responsive fine-tuning */
@media (max-width: 768px){
  .nav-tabs{ overflow-x:auto; flex-wrap:nowrap; }
  .nav-tabs .nav-link{ white-space:nowrap; }
  .pagination{ flex-wrap: wrap; }
}