/* =========================================================
   AI Beauty Admin — Clear Forms + Sidebar + Select
   Dark/Light + Site Colors (Unfold + Django Admin)
========================================================= */

/* -------------------------
   1) TOKENS (DARK default)
-------------------------- */
:root{
  --bg: #070A12;
  --bg2:#0B1020;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);

  --text: #E9EEFF;
  --muted: rgba(233,238,255,.72);
  --muted2: rgba(233,238,255,.55);

  --border: rgba(255,255,255,.12);
  --border2: rgba(255,255,255,.18);

  --primary: #ff2d55;
  --primary2:#ff6b93;

  --field-bg: rgba(255,255,255,.07);
  --field-bg-hover: rgba(255,255,255,.10);
  --field-bg-disabled: rgba(255,255,255,.05);

  --field-border: rgba(255,255,255,.14);
  --field-border-hover: rgba(255,255,255,.22);

  --field-text: var(--text);
  --field-placeholder: rgba(233,238,255,.46);

  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 26%, transparent);
  --focus-border: color-mix(in srgb, var(--primary) 55%, var(--field-border));

  --danger: #ef4444;

  --shadow: 0 18px 50px rgba(0,0,0,.30);
  --shadow2: 0 12px 30px rgba(0,0,0,.22);

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
}

/* -------------------------
   2) LIGHT (when html:not(.dark))
-------------------------- */
html:not(.dark){
  --bg: #ffffff;
  --bg2:#f6f7fb;

  --card: rgba(2,6,23,.04);
  --card2: rgba(2,6,23,.07);

  --text: #0b1220;
  --muted: rgba(11,18,32,.70);
  --muted2: rgba(11,18,32,.52);

  --border: rgba(2,6,23,.10);
  --border2: rgba(2,6,23,.16);

  --primary: #e11d48;
  --primary2:#fb7185;

  --field-bg: rgba(2,6,23,.03);
  --field-bg-hover: rgba(2,6,23,.05);
  --field-bg-disabled: rgba(2,6,23,.02);

  --field-border: rgba(2,6,23,.14);
  --field-border-hover: rgba(2,6,23,.22);

  --field-text: var(--text);
  --field-placeholder: rgba(11,18,32,.44);

  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
  --focus-border: color-mix(in srgb, var(--primary) 55%, var(--field-border));

  --shadow: 0 18px 50px rgba(2,6,23,.10);
  --shadow2: 0 12px 30px rgba(2,6,23,.08);
}

/* -------------------------
   3) BASE
-------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  background:
    radial-gradient(900px 520px at 18% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(900px 520px at 88% 28%, color-mix(in srgb, var(--primary2) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
}

h1,h2,h3,h4,h5,h6, label, th, td, p, span, a{
  letter-spacing: -0.12px;
}

/* -------------------------
   4) TOPBAR + BREADCRUMBS
-------------------------- */
header, .breadcrumbs, [class*="topbar"], [class*="navbar"]{
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
}
.breadcrumbs{
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important;
}

/* -------------------------
   5) CARDS / MODULES
-------------------------- */
.module, .inline-group, .grp-module,
[class*="card"], .fieldset, .aligned, .form-row,
#content-main .object-tools, #content-main .submit-row,
#changelist-form .results{
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow2) !important;
}

.module, .inline-group, .grp-module{ padding: 14px !important; }

.module:hover, .inline-group:hover, .grp-module:hover, [class*="card"]:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
}

/* -------------------------
   6) BUTTONS
-------------------------- */
button, .button, a.button, input[type="submit"], input[type="button"], .btn{
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

button:hover, .button:hover, a.button:hover, input[type="submit"]:hover, .btn:hover{
  background: var(--card2) !important;
  transform: translateY(-1px);
}

button:focus, .button:focus, a.button:focus, input[type="submit"]:focus{
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--focus-border) !important;
}

input[type="submit"].default, .submit-row input.default, .btn-primary,
.object-tools a.addlink, .object-tools a{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow2) !important;
}

.deletelink, a.deletelink, input[type="submit"].deletelink{
  background: color-mix(in srgb, var(--danger) 18%, var(--card)) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border)) !important;
}

/* -------------------------
   7) LINKS / MUTED
-------------------------- */
a{
  color: color-mix(in srgb, var(--primary) 76%, white) !important;
  text-decoration: none !important;
}
a:hover{ text-decoration: underline !important; }

.help, .quiet, .description, .inline-related h3, .small, .form-row p, .helptext{
  color: var(--muted) !important;
}

/* -------------------------
   8) FORMS (Inputs + Select)
-------------------------- */
label{
  color: var(--text) !important;
  font-weight: 900 !important;
}

.required label::after,
label.required::after{
  content: " *";
  color: color-mix(in srgb, var(--primary) 80%, white);
  font-weight: 950;
}

/* Base fields */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="search"], input[type="tel"], input[type="date"], input[type="datetime-local"],
textarea, select{
  width: 100%;
  max-width: 100%;
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--field-text) !important;
  padding: 10px 12px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

textarea{ min-height: 120px; resize: vertical; }

input:hover, textarea:hover, select:hover{
  background: var(--field-bg-hover) !important;
  border-color: var(--field-border-hover) !important;
}

input:focus, textarea:focus, select:focus{
  outline: none !important;
  border-color: var(--focus-border) !important;
  box-shadow: var(--focus-ring) !important;
}

input::placeholder, textarea::placeholder{
  color: var(--field-placeholder) !important;
  font-weight: 700;
}

input:disabled, textarea:disabled, select:disabled{
  opacity: .85;
  background: var(--field-bg-disabled) !important;
  cursor: not-allowed !important;
}

/* ✅ Select: شكل واضح + سهم */
select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--text) 70%, transparent) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--text) 70%, transparent) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

html[dir="rtl"] select{
  padding-right: 12px !important;
  padding-left: 42px !important;
  background-position:
    18px 50%,
    12px 50%,
    0 0 !important;
}

/* ✅ خيارات dropdown نفسها */
select option{
  background: color-mix(in srgb, var(--bg) 92%, black) !important;
  color: var(--text) !important;
}

/* Errors */
.errors, .errorlist{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--card));
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  font-weight: 900;
}

/* -------------------------
   9) CHECKBOX / RADIO
-------------------------- */
input[type="checkbox"], input[type="radio"]{
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* -------------------------
   10) CHANGE LIST TABLE
-------------------------- */
#changelist table{
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--card) 92%, transparent) !important;
}
#changelist table thead th{
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
#changelist table tbody tr:hover{
  background: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
}
#changelist table td, #changelist table th{
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent) !important;
}

/* -------------------------
   11) SIDEBAR — Fix (Unfold selectors)
   هنا السبب الحقيقي غالباً: Unfold ما يستخدم aside مباشرة
-------------------------- */

/* حط خلفية على كل حاويات السايدبار المحتملة */
.unfold-sidebar,
.unfold-sidebar__container,
.unfold-sidebar__inner,
.unfold-layout__sidebar,
aside,
aside#nav-sidebar,
#nav-sidebar,
[data-sidebar],
[class*="sidebar"],
[class*="Sidebar"]{
  background: color-mix(in srgb, var(--bg) 78%, transparent) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
}

/* روابط داخل السايدبار */
.unfold-sidebar a,
#nav-sidebar a,
aside a,
[class*="sidebar"] a{
  border-radius: 14px !important;
}

/* Hover على الروابط */
.unfold-sidebar a:hover,
#nav-sidebar a:hover,
aside a:hover,
[class*="sidebar"] a:hover{
  background: color-mix(in srgb, var(--primary) 10%, var(--card)) !important;
}

/* -------------------------
   12) RTL
-------------------------- */
html[dir="rtl"] body{ direction: rtl; }
html[dir="rtl"] .breadcrumbs, html[dir="rtl"] #content{ direction: rtl; }

/* -------------------------
   13) Reduced motion
-------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}