/* ====== SuperElan app styles (plain CSS, vendor-agnostic) ====== */

/* ---------- Brand palettes (Customize > Color) ---------- */
:root,
html[data-color="emerald"] {
  --brand-50:  236 253 245;
  --brand-100: 209 250 229;
  --brand-200: 167 243 208;
  --brand-300: 110 231 183;
  --brand-400:  52 211 153;
  --brand-500:  16 185 129;
  --brand-600:   5 150 105;
  --brand-700:   4 120  87;
  --brand-800:   6  95  70;
  --brand-900:   6  78  59;
}
html[data-color="blue"] {
  --brand-50:  239 246 255;
  --brand-100: 219 234 254;
  --brand-200: 191 219 254;
  --brand-300: 147 197 253;
  --brand-400:  96 165 250;
  --brand-500:  59 130 246;
  --brand-600:  37  99 235;
  --brand-700:  29  78 216;
  --brand-800:  30  64 175;
  --brand-900:  30  58 138;
}
html[data-color="violet"] {
  --brand-50:  245 243 255;
  --brand-100: 237 233 254;
  --brand-200: 221 214 254;
  --brand-300: 196 181 253;
  --brand-400: 167 139 250;
  --brand-500: 139  92 246;
  --brand-600: 124  58 237;
  --brand-700: 109  40 217;
  --brand-800:  91  33 182;
  --brand-900:  76  29 149;
}
html[data-color="rose"] {
  --brand-50:  255 241 242;
  --brand-100: 255 228 230;
  --brand-200: 254 205 211;
  --brand-300: 253 164 175;
  --brand-400: 251 113 133;
  --brand-500: 244  63  94;
  --brand-600: 225  29  72;
  --brand-700: 190  18  60;
  --brand-800: 159  18  57;
  --brand-900: 136  19  55;
}
html[data-color="orange"] {
  --brand-50:  255 247 237;
  --brand-100: 255 237 213;
  --brand-200: 254 215 170;
  --brand-300: 253 186 116;
  --brand-400: 251 146  60;
  --brand-500: 249 115  22;
  --brand-600: 234  88  12;
  --brand-700: 194  65  12;
  --brand-800: 154  52  18;
  --brand-900: 124  45  18;
}
html[data-color="slate"] {
  --brand-50:  248 250 252;
  --brand-100: 241 245 249;
  --brand-200: 226 232 240;
  --brand-300: 203 213 225;
  --brand-400: 148 163 184;
  --brand-500: 100 116 139;
  --brand-600:  71  85 105;
  --brand-700:  51  65  85;
  --brand-800:  30  41  59;
  --brand-900:  15  23  42;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Tajawal', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Density (Customize > Density) ---------- */
html[data-density="compact"]    { font-size: 13.5px; }
html[data-density="comfortable"]{ font-size: 14.5px; }
html[data-density="spacious"]   { font-size: 15.5px; }
html[data-density="compact"]    .card-pad { padding: 0.75rem; }
html[data-density="spacious"]   .card-pad { padding: 1.5rem 1.75rem; }
html[data-density="compact"]    .nav-link { padding-top: .35rem; padding-bottom: .35rem; }

/* ---------- Container (Customize > Container) ---------- */
html[data-container="boxed"] body { max-width: 1440px; margin: 0 auto; }
html[data-container="boxed"] #main-shell { max-width: 1440px; margin: 0 auto; }

/* ---------- Shell motion ---------- */
#sidebar {
  transition:
    width .32s cubic-bezier(.22, 1, .36, 1),
    transform .32s cubic-bezier(.22, 1, .36, 1),
    box-shadow .24s ease;
  will-change: width, transform;
}
#main-shell {
  transition: margin-inline-start .32s cubic-bezier(.22, 1, .36, 1);
}
#sidebar-backdrop {
  transition: opacity .26s ease;
}
#sidebar.sidebar-mobile-open {
  box-shadow: 0 24px 48px rgba(15, 23, 42, .18);
}
#sidebar .nav-text,
#sidebar [data-brand-text],
#sidebar #sidebar-user .nav-text,
#sidebar .nav-section span,
#sidebar .nav-section [data-chevron],
#sidebar .nav-link .ms-auto,
#sidebar .nav-sub .ms-auto {
  transition:
    opacity .18s ease,
    max-width .28s cubic-bezier(.22, 1, .36, 1),
    transform .28s cubic-bezier(.22, 1, .36, 1),
    margin .28s cubic-bezier(.22, 1, .36, 1);
}
/* ---------- Sidebar collapsed (icon-only) ---------- */
html[data-sidebar-collapsed="1"] #sidebar           { width: 4.5rem; }
html[data-sidebar-collapsed="1"] #sidebar .nav-text,
html[data-sidebar-collapsed="1"] #sidebar .nav-section span,
html[data-sidebar-collapsed="1"] #sidebar .nav-section [data-chevron],
html[data-sidebar-collapsed="1"] #sidebar .nav-link .ms-auto,
html[data-sidebar-collapsed="1"] #sidebar #sidebar-user .nav-text,
html[data-sidebar-collapsed="1"] #sidebar [data-brand-text] {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: scale(.96);
  margin: 0 !important;
  pointer-events: none;
}
html[data-sidebar-collapsed="1"] #sidebar .nav-section {
  min-height: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
html[data-sidebar-collapsed="1"] #sidebar [data-collapsible-group] { display: block !important; }
html[data-sidebar-collapsed="1"] #sidebar .nav-link,
html[data-sidebar-collapsed="1"] #sidebar .nav-sub {
  justify-content: center;
  margin-inline: .5rem;
  padding-inline: .75rem;
}
html[data-sidebar-collapsed="1"] #sidebar .nav-sub {
  margin-inline-start: .5rem;
}
html[data-sidebar-collapsed="1"] #main-shell        { margin-inline-start: 4.5rem; }

@media (min-width: 1024px) {
  html[data-sidebar-collapsed="1"] #main-shell { margin-inline-start: 4.5rem !important; }
}
/* ---------- Sidebar theme override (independent of global theme) ---------- */
html[data-sidebar-theme="dark"] #sidebar {
  background-color: #0a0b0f;
  color: #cbd5e1;
  border-color: rgba(255,255,255,.08);
}
html[data-sidebar-theme="dark"] #sidebar a,
html[data-sidebar-theme="dark"] #sidebar .nav-link,
html[data-sidebar-theme="dark"] #sidebar [data-collapse-toggle] { color: #cbd5e1; }
html[data-sidebar-theme="dark"] #sidebar .nav-link:hover { background: rgba(255,255,255,.04); color: #fff; }
html[data-sidebar-theme="dark"] #sidebar .nav-link.active {
  background: rgba(var(--brand-500) / .12);
  color: rgb(var(--brand-400));
}
html[data-sidebar-theme="dark"] #sidebar .nav-section span { color: #64748b; }
html[data-sidebar-theme="dark"] #sidebar .nav-section { border-color: rgba(255,255,255,.06); }

/* ---------- Deep dark mode tweaks (match Apex template) ---------- */
.dark body                { background-color: #0a0b0f; color: #cbd5e1; }
.dark .card               { background-color: #11131a; border-color: rgba(255,255,255,.06); }
.dark .card-pad,
.dark .input              { background-color: transparent; }
.dark .input              { background-color: #11131a; border-color: rgba(255,255,255,.08); }
.dark header              { background-color: rgba(10,11,15,.78) !important; border-color: rgba(255,255,255,.06); }
.dark #sidebar            { background-color: #0a0b0f; border-color: rgba(255,255,255,.06); }

/* ---------- Misc ---------- */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

.toastify { font-family: inherit !important; border-radius: 12px !important; }

.dataTables_wrapper .dt-search input,
.dataTables_wrapper .dt-length select {
  border-radius: 0.5rem !important;
  border-color: #e2e8f0 !important;
  font-size: 0.875rem !important;
}

/* Chart.js safety: keep canvases inside containers and prevent infinite resize. */
canvas.kpi-spark { display: block; width: 100% !important; height: 60px !important; }
.chart-box { position: relative; width: 100%; }
.chart-box > canvas { position: absolute; inset: 0; }

/* Sidebar collapse pill: floating arrow between sidebar and content */
/* Sidebar collapse pill: floating arrow between sidebar and content */
#sidebar-collapse-pill {
  position: fixed;
  top: 70px;
  inset-inline-start: calc(18rem - 14px); /* sidebar width 72 = 18rem */
  z-index: 45;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  transition:
    inset-inline-start .32s cubic-bezier(.22, 1, .36, 1),
    transform .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}
@media (min-width: 1024px) { #sidebar-collapse-pill { display: flex; } }
.dark #sidebar-collapse-pill { background: #11131a; border-color: rgba(255,255,255,.1); color: #cbd5e1; }
html[data-sidebar-collapsed="1"] #sidebar-collapse-pill { inset-inline-start: calc(4.5rem - 14px); }

/* ---------- Global modal scroll behavior ---------- */
/* Any modal opened via [data-open-modal] gets .is-open. Make the overlay
   scrollable on small viewports so long forms don't get clipped. The inner
   .relative card sits at the top and grows naturally; the overlay scrolls. */
[id$="-modal"].is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}
[id$="-modal"].is-open > .relative {
  margin-top: 0 !important;
  width: 100%;
}