/* LuxSupport Creator UI Polish (RTL) - Phase 4
   هدفه: توحيد تجربة صفحات /creator و /creator/settings و /creator/payouts
   بدون لمس المنطق البرمجي — فقط تحسين عرض/تباين/مسافات
*/

/* ---------- Global creator layout ---------- */
.creators-dark .creator-wrap{max-width:1240px}
.creators-dark .creator-wrap .row{--bs-gutter-x:1.1rem; --bs-gutter-y:1.1rem}

/* Sticky sidebar only on large screens */
@media (min-width: 992px){
  .creators-dark .creator-side{top:18px}
}

/* Sidebar active state: gradient instead of pale block */
.creators-dark .creator-side .nav-link.active{
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  border-color: transparent !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
}
.creators-dark .creator-side .nav-link.active i{color:#fff !important}

/* Sidebar links: better tap targets on mobile */
@media (max-width: 991px){
  .creators-dark .creator-side .nav-link{
    padding: .95rem 1rem !important;
    border-radius: 18px !important;
  }
}

/* ---------- Page headers (cards at top) ---------- */
/* Many pages start with .lux-card having a header row inside.
   Normalize spacing + titles + subtext readability */
.creators-dark .lux-card .text-white-50{color: rgba(255,255,255,.72) !important}
.creators-dark .lux-card .text-white-75{color: rgba(255,255,255,.82) !important}

/* Keep primary title color strong */
.creators-dark .lux-card .fw-bold.fs-4,
.creators-dark .lux-card .fw-bold.fs-5{
  color: var(--text-primary) !important;
}

/* Buttons: avoid outline-light turning to low-contrast */
.creators-dark .btn-outline-light{
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.03) !important;
}
.creators-dark .btn-outline-light:hover{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ---------- Forms (creator area) ---------- */
.creators-dark .form-label{color: rgba(255,255,255,.78) !important; font-weight:600}
.creators-dark .form-text, .creators-dark .small.lux-muted{color: rgba(255,255,255,.65) !important}

/* Ensure ALL inputs are dark even with autofill */
.creators-dark .form-control,
.creators-dark .form-select,
.creators-dark textarea.form-control{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text-primary) !important;
}
.creators-dark .form-control:focus,
.creators-dark .form-select:focus,
.creators-dark textarea.form-control:focus{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
.creators-dark .form-control::placeholder{color: rgba(255,255,255,.55) !important}

/* Autofill (Chrome/Safari) global override, but scoped for safety */
.creators-dark input:-webkit-autofill,
.creators-dark input:-webkit-autofill:hover,
.creators-dark input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.04) inset !important;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.04) inset !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  transition: background-color 9999s ease-out 0s;
}

/* Input groups: prevent weird borders in RTL */
.creators-dark .input-group .input-group-text{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
}

/* ---------- Settings page: cards spacing + subcards ---------- */
.creators-dark .settings-card{box-shadow: 0 12px 40px rgba(0,0,0,.18)}
.creators-dark .settings-card + .settings-card{margin-top:16px !important}
.creators-dark .settings-card .sc-head{gap:14px !important}
.creators-dark .settings-card .sc-title h2{color: var(--text-primary) !important}
.creators-dark .settings-card .sc-title p{color: rgba(255,255,255,.70) !important}
.creators-dark .settings-page .subcard{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}
.creators-dark .settings-page .subcard + .subcard{margin-top:12px}

/* Fix section anchor offset if header is sticky */
.creators-dark [id^="sec-"]{scroll-margin-top: 90px}

/* ---------- Payouts page: tables and empty state ---------- */
.creators-dark .table{color: rgba(255,255,255,.86) !important}
.creators-dark .table thead th{color: rgba(255,255,255,.92) !important}
.creators-dark .table td, .creators-dark .table th{border-color: rgba(255,255,255,.08) !important}
.creators-dark .table-hover tbody tr:hover{background: rgba(255,255,255,.04) !important}

/* ---------- Small fixes ---------- */
.creators-dark .alert{border-radius: 14px}
.creators-dark .badge{border-radius: 999px}

/* RTL pages often display URLs reversed; force LTR for URL fields */
.creators-dark .lux-ltr{
  direction:ltr !important;
  text-align:left !important;
}

/* CSS Variables (support box) should not dominate the layout */
.creators-dark .lux-codebox{
  max-height: 220px;
  overflow:auto;
  border-radius: 14px;
}
.creators-dark .lux-codebox textarea{
  min-height: 170px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/* ---------- Subcards (Settings Sections) ---------- */
.lux-subcard{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
}

/* ---------- Upload Preview ---------- */
.lux-upload-preview{
  width:100%;
  aspect-ratio: 16/9;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lux-upload-preview .lux-preview-empty{
  color:rgba(255,255,255,.55);
  font-size:.9rem;
}
.lux-preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Avatar Editor ---------- */
.lux-avatar-editor .lux-avatar-preview{
  width:140px;
  height:140px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lux-avatar-editor .lux-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center center;
}
@media (max-width: 576px){
  .lux-avatar-editor .lux-avatar-preview{ width:120px; height:120px; border-radius:22px; }
}