/* astro7panel theme — restyled to match the TrendyAdmin template's palette
   (violet #7c3aed -> magenta #c026d3 gradient, near-black purple sidebar)
   per the admin's explicit request, dropping ASTRO7's original red/violet
   brand pair from astro7.org for this separate front-end only. */
:root {
  --cui-primary: #7c3aed;
  --cui-primary-rgb: 124, 58, 237;
  --cui-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cui-body-font-family: var(--cui-font-sans-serif);
}
body { font-family: var(--cui-font-sans-serif); }

.sidebar-dark {
  --cui-sidebar-bg: linear-gradient(175deg, #1a0b2e 0%, #150a26 55%, #0d0618 100%);
  --cui-sidebar-nav-link-active-bg: transparent;
  --cui-sidebar-nav-link-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Rounded pill-shaped active nav highlight (TrendyAdmin-style) instead of a
   left border — the gradient fill sits on the <li>'s .nav-link, inset so it
   reads as a floating pill rather than a full-bleed bar. */
.sidebar-nav .nav-link.active {
  margin: 0 10px;
  width: calc(100% - 20px);
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 24px -2px rgba(192, 38, 211, .85), 0 16px 36px -4px rgba(124, 58, 237, .75);
}

/* Parent group toggle ("Reseller", "Shop"...) gets a flat violet highlight
   while its own section is open (the "show" class we already add to
   whichever group contains the current page) — distinct from the bright
   gradient pill above, which stays reserved for stand-alone active items. */
.sidebar-nav .nav-group.show > .nav-link.nav-group-toggle {
  margin: 0 10px;
  width: calc(100% - 20px);
  border-radius: 12px;
  background: rgba(124, 58, 237, .32) !important;
  color: #fff;
  font-weight: 700;
}
.sidebar-nav .nav-group.show > .nav-link.nav-group-toggle .nav-icon {
  background: rgba(255, 255, 255, .18);
}

/* The actual active sub-item inside an expanded group ("Gérer", "Buy IPTV
   Code"...) gets a flatter, darker violet fill instead of the bright
   gradient glow — the glow is reserved for stand-alone top-level items. */
.sidebar-nav .nav-group-items .nav-link.active {
  background: rgba(91, 33, 182, .45) !important;
  box-shadow: none;
  color: #fff;
  font-weight: 600;
}
.sidebar-nav .nav-group-items .nav-link.active .nav-icon-bullet {
  background: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, .25);
}

/* Keep the sidebar rail a fixed, comfortable pixel width regardless of the
   87.5% root font-size scale-down above (that rem-based shrink made the
   16rem default sidebar too narrow/cramped). */
.sidebar { --cui-sidebar-width: 248px !important; }
#sidebar, .sidebar, #sidebar:focus, .sidebar:focus { outline: none !important; box-shadow: none !important; }
@media (min-width: 992px) {
  .sidebar:not(.hide) ~ * { --cui-sidebar-occupy-start: 248px !important; }
}

/* Narrow (icon-only) sidebar mode — toggled by hand from the header button
   (js/astro7-auth.js), remembered across pages via localStorage. This is
   deliberately NOT CoreUI's own .sidebar-narrow-unfoldable (that expands on
   :hover and once overlaid the page content in a severe layout bug) — this
   mode only ever changes on an explicit click, never on hover.
   CoreUI's vendor CSS already does almost everything for plain
   .sidebar-narrow (collapses .nav-group-items, swaps .sidebar-brand-full
   for .sidebar-brand-narrow, hides .nav-title, resizes .nav-icon, pushes
   the page content via --cui-sidebar-occupy-start) — we only need to:
   (a) pick our own fixed narrow width instead of its rem-based default,
       since our 87.5% root font-size shrink would otherwise make it too
       cramped, and keep the content-push value in sync with it; and
   (b) hide our own custom .a7-sidebar-profile footer's text/icons, since
       that component doesn't exist in vendor CSS at all. */
.sidebar-narrow { --cui-sidebar-narrow-width: 76px; }
@media (min-width: 992px) {
  .sidebar-narrow:not(.hide) ~ * { --cui-sidebar-occupy-start: 76px !important; }
}
.sidebar-narrow .nav-icon {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
}
.sidebar-narrow .nav-group-toggle::after { display: none !important; }
/* 76px is just wide enough to fit the icon box + a sliver of whatever
   label sits next to it, and vendor CSS never actually hides that label
   text itself (only the .nav-title section headers and the group's own
   sub-menu) — overflow:hidden alone doesn't help because the link isn't
   narrower than its container. font-size:0 collapses the label to zero
   width regardless of whether it's wrapped in a <span> or sitting as a
   bare text node right in the <a> (every nav-group-toggle, e.g.
   "BEINSPORT", does the latter) — the icon SVGs use absolute pixel
   width/height/stroke-width attributes, so they're unaffected. */
.sidebar-narrow .sidebar-nav .nav-link { font-size: 0 !important; }
.sidebar-narrow .sidebar-brand-narrow {
  height: 46px !important;
  max-width: 46px !important;
}
.sidebar-narrow .a7-sidebar-profile-text,
.sidebar-narrow .a7-sidebar-profile-icon {
  display: none !important;
}
.sidebar-narrow .a7-sidebar-profile { justify-content: center; padding-inline: 0; }

.sidebar-nav {
  --cui-sidebar-nav-link-padding-y: 0.5rem;
  --cui-sidebar-nav-gap: 3px;
}

/* Icon-in-a-box treatment for every sidebar nav-link (TrendyAdmin-style)
   instead of a plain bullet dot — purely visual, no markup change needed. */
.sidebar-nav .nav-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center;
  margin-inline-end: 9px;
}
.sidebar-nav .nav-icon-bullet {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.sidebar-nav .nav-link.active .nav-icon {
  background: rgba(255, 255, 255, .22);
}
.sidebar-nav .nav-link.active .nav-icon-bullet {
  background: #fff;
}
.sidebar-nav .nav-group-items .nav-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  margin-inline-end: 8px;
}

/* Section labels ("Services IPTV", "Gérer les utilisateurs") get a thin
   trailing rule, matching TrendyAdmin's "OVERVIEW ————" look. */
.sidebar-nav .nav-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-nav .nav-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .1);
}

/* Bottom mini profile card in the sidebar footer. */
.a7-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}
.a7-sidebar-profile-text { flex: 1; min-width: 0; }
.a7-sidebar-profile-name {
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a7-sidebar-profile-role {
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.a7-sidebar-profile-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.a7-sidebar-profile-icon:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Collapsed (narrow-unfoldable, not hovered) sidebar: keep the bottom
   profile card from overflowing a 4rem-wide rail — just the avatar, centered. */
.sidebar-narrow-unfoldable:not(:hover) .a7-sidebar-profile {
  justify-content: center;
  padding: 10px 0;
}
.sidebar-narrow-unfoldable:not(:hover) .a7-sidebar-profile-text,
.sidebar-narrow-unfoldable:not(:hover) .a7-sidebar-profile-icon {
  display: none;
}

/* Bigger stat cards with a growth badge + decorative bar row, matching the
   TrendyAdmin dashboard tiles. The badge is only rendered when a real
   period-over-period number exists (see the dashboard script) — never a
   made-up percentage. The bar row is purely ornamental (no per-bar meaning),
   same as the template's own use of it. */
.a7-stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--a7-shadow, 0 2px 4px rgba(17, 19, 42, .05), 0 12px 32px rgba(17, 19, 42, .09));
  height: 100%;
}
.a7-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.a7-stat-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.a7-stat-badge {
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.a7-stat-badge.up { background: rgba(22, 163, 116, .12); color: #16a374; }
.a7-stat-badge.down { background: rgba(220, 38, 38, .12); color: #dc2626; }
.a7-stat-value { font-size: 23px; font-weight: 800; color: #1a0b2e; font-variant-numeric: tabular-nums; }
.a7-stat-label { font-size: 12px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); margin-bottom: 14px; }
.a7-stat-bars { display: flex; align-items: flex-end; gap: 6px; height: 22px; }
.a7-stat-bars span {
  flex: 1;
  height: 60%;
  border-radius: 999px;
  background: currentColor;
  opacity: .25;
}
.a7-stat-bars span:last-child { height: 100%; opacity: 1; }

.btn-primary,
.badge.bg-danger,
.bg-primary {
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  border-color: transparent !important;
}

.sidebar-brand img {
  height: 64px !important;
  max-width: 100%;
}
.sidebar-header {
  min-height: calc(4.5rem + 1px) !important;
}
@media (min-width: 992px) {
  .sidebar-header { justify-content: center !important; }
}

/* Real astro7.org Shop markup/CSS, copied as-is (same variables, same
   classes) so the Shop page here looks identical to the live panel. */
:root {
  --a7-blue: #c026d3;
  --a7-violet: #7c3aed;
  --a7-jade: #16a374;
  --a7-surface: #ffffff;
  --a7-surface-2: #eef0f9;
  --a7-border: rgba(17, 19, 42, 0.08);
  --a7-text-dim: rgba(17, 19, 42, 0.62);
  --a7-shadow: 0 2px 4px rgba(17, 19, 42, 0.05), 0 12px 32px rgba(17, 19, 42, 0.09);
}
/* CoreUI's theme switcher sets data-coreui-theme on <html> (not data-theme,
   and not just prefers-color-scheme) — matching that attribute here is what
   makes our own overrides actually respond to the Light/Dark/Auto menu. */
[data-coreui-theme="dark"] {
  --a7-surface: #1b1033;
  --a7-surface-2: #241645;
  --a7-border: rgba(238, 240, 251, 0.09);
  --a7-text-dim: rgba(238, 240, 251, 0.66);
  --a7-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.page-head { margin-bottom: 20px; }
.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7c3aed;
}
.page-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: .01em;
  margin: 6px 0 0;
}
.section-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--a7-text-dim);
  font-weight: 700;
}

.duration-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 22px;
}
.duration-toggle-btn {
  border: 1px solid var(--a7-border);
  background: var(--a7-surface);
  color: var(--a7-text-dim);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.duration-toggle-btn:hover:not(.active) { border-color: var(--a7-violet); color: var(--a7-violet); }
.duration-toggle-btn.active {
  background: var(--cui-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(92, 63, 239, .32);
}

.shop-paused-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(92, 63, 239, .1);
  border: 1px solid var(--cui-primary);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 6px 0 22px;
  color: var(--cui-primary);
}
.shop-paused-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.shop-paused-message { font-size: 13.5px; color: var(--a7-text-dim); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.product-card {
  position: relative;
  background: var(--a7-surface);
  border: 1px solid var(--a7-border);
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: var(--a7-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-3px); border-color: rgba(59, 111, 246, .35); box-shadow: 0 16px 32px -10px rgba(92, 63, 239, .22); }
.product-mark {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.product-logo-circle {
  width: 148px; height: 148px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 3px solid var(--cui-primary);
}
.product-logo-circle img { width: 100%; height: 100%; object-fit: cover; }
.product-name { font-weight: 800; font-size: 14.5px; }
.duration-pill {
  font-family: 'Space Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .04em;
  background: var(--a7-surface-2);
  color: var(--a7-text-dim);
  padding: 3px 10px;
  border-radius: 999px;
}
.stock-out-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.price {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--a7-jade);
  font-variant-numeric: tabular-nums;
}
.order-btn {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  border-radius: 10px;
  border: none;
  background: var(--cui-primary);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(92, 63, 239, .45);
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
.order-btn:hover { filter: brightness(1.07); box-shadow: 0 4px 12px -3px rgba(92, 63, 239, .55); }
.order-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px -2px rgba(92, 63, 239, .45); }
.order-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }

/* Dashboard quick-access promo cards (IBOSol / HotPlayer / MangoBox / Beinsport) */
.a7-promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  background: #fff;
  color: #1a0b2e;
  height: 100%;
  box-shadow: var(--a7-shadow, 0 2px 4px rgba(17, 19, 42, .05), 0 12px 32px rgba(17, 19, 42, .09));
  transition: transform .15s ease, box-shadow .15s ease;
}
.a7-promo-card:hover { color: #1a0b2e; transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(124, 58, 237, .22); }
.a7-promo-logo {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--a7-border, rgba(17, 19, 42, .08));
}
.a7-promo-logo img { width: 100%; height: 100%; object-fit: cover; }
.a7-promo-fallback { font-weight: 800; color: #7c3aed; font-size: 12px; }
.a7-promo-title { font-weight: 700; font-size: 13.5px; }
.a7-promo-sub { font-size: 12.5px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); margin-bottom: 10px; }
.a7-promo-link { font-weight: 700; font-size: 13px; color: #7c3aed; }
[data-coreui-theme="dark"] .a7-promo-card { background: #1b1033; color: #fff; }
[data-coreui-theme="dark"] .a7-promo-card:hover { color: #fff; }

/* Dashboard hero banner + KPI cards — restyled to match the TrendyAdmin
   look the admin chose (purple gradient welcome card, white stat cards with
   an icon box and a big tabular number, no invented growth percentages
   since we don't track real period-over-period deltas here). */
.a7-hero {
  border-radius: 18px;
  padding: 26px 30px;
  background: linear-gradient(135deg, #7c3aed 0%, #a21caf 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px -14px rgba(124, 58, 237, .55);
}
.a7-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .26), transparent 70%);
  pointer-events: none;
}
.a7-hero::before {
  content: "";
  position: absolute;
  inset: auto auto -50% 60%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 70%);
  pointer-events: none;
}
.a7-hero-pattern {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.a7-hero-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 78% 15%, rgba(255, 255, 255, .22), transparent 32%),
    radial-gradient(circle at 92% 78%, rgba(255, 255, 255, .16), transparent 28%),
    radial-gradient(circle at 60% 110%, rgba(255, 255, 255, .14), transparent 40%);
}
.a7-hero-ring {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 45%, transparent 70%);
  filter: blur(1px);
}
.a7-hero-ring.a7-ring-1 {
  width: 150px; height: 130px;
  inset: auto -30px -50px auto;
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
}
.a7-hero-ring.a7-ring-2 {
  width: 64px; height: 56px;
  inset: 22px auto auto 44%;
  border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
  opacity: .85;
}
.a7-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .18);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.a7-hero-title { font-size: 22px; font-weight: 800; margin-bottom: 5px; }
.a7-hero-sub { font-size: 13px; color: rgba(255, 255, 255, .85); margin-bottom: 15px; }
.a7-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #7c3aed;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
}
.a7-hero-btn:hover { color: #6d28d9; }
.a7-hero-pill {
  background: rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 11px 16px;
  min-width: 104px;
  position: relative;
}
.a7-hero-pill-value { font-size: 19px; font-weight: 800; }
.a7-hero-pill-label { font-size: 12px; color: rgba(255, 255, 255, .8); margin-bottom: 6px; }
.a7-hero-pill-badge {
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
}

.a7-kpi-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--a7-shadow, 0 2px 4px rgba(17, 19, 42, .05), 0 12px 32px rgba(17, 19, 42, .09));
  height: 100%;
}
.a7-kpi-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 11px;
}
.a7-kpi-value {
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #1a0b2e;
}
.a7-kpi-label { font-size: 11.5px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); }
.a7-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
}
.a7-kpi-badge.up { background: rgba(22, 163, 116, .12); color: #16a374; }
.a7-kpi-badge.down { background: rgba(220, 38, 38, .12); color: #dc2626; }

/* Floating pill header (TrendyAdmin-style) — CSS-only skin over CoreUI's
   existing header markup/JS (sidebar toggle, search modal, theme dropdown,
   account dropdown all keep working exactly as before). Every hardcoded
   light-mode color below has a [data-coreui-theme="dark"] override further
   down, since CoreUI sets that attribute (not data-theme) on <html>. */
html { overflow-x: hidden; font-size: 87.5%; }
body { background: #f3f1fb; }
.header.header-sticky {
  margin: 14px 16px 22px;
  border-radius: 999px;
  border: none !important;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(124, 58, 237, .18);
}
.header.header-sticky > .container-fluid.border-bottom {
  border-bottom: none !important;
  border-radius: 999px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.header .search-button {
  background: #f3f1fb;
  border-radius: 999px;
  border: none;
}
.header-nav > .nav-item > .nav-link,
.header-nav > .nav-item > a.nav-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #f3f1fb;
  margin: 0 3px;
}
.header-nav > .nav-item > .nav-link:hover {
  background: #ece7fb;
}
.header .avatar-md { width: 32px; height: 32px; }
.a7-header-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 15px;
  border-radius: 999px;
  border: none;
}
.a7-header-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
}
.a7-header-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.a7-header-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
}

/* Dark mode: swap every hardcoded light surface above (and the KPI/stat
   cards further up) for a dark-purple equivalent instead of staying white. */
[data-coreui-theme="dark"] body { background: #0d0618; }
[data-coreui-theme="dark"] .header.header-sticky {
  background: #150a26;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}
[data-coreui-theme="dark"] .header .search-button,
[data-coreui-theme="dark"] .header-nav > .nav-item > .nav-link,
[data-coreui-theme="dark"] .header-nav > .nav-item > a.nav-link {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
[data-coreui-theme="dark"] .header-nav > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, .12);
}
[data-coreui-theme="dark"] .a7-kpi-card,
[data-coreui-theme="dark"] .a7-stat-card {
  background: #1b1033;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
[data-coreui-theme="dark"] .a7-kpi-value,
[data-coreui-theme="dark"] .a7-stat-value {
  color: #fff;
}

/* Account dropdown — avatar header + icon-box menu items + a tinted
   Sign Out row, matching the TrendyAdmin account menu. */
.a7-account-menu { width: 260px; padding: 16px 12px 8px; border-radius: 16px; }
.a7-account-header { text-align: center; padding: 4px 10px 14px; }
.a7-account-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  margin: 0 auto 10px;
  padding: 3px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
}
.a7-account-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.a7-account-email { font-size: 12.5px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); margin-bottom: 10px; }
.a7-avatar-edit-btn {
  position: absolute;
  bottom: 6px; right: calc(50% - 44px);
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #7c3aed;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.a7-avatar-edit-btn:hover { background: #6d28d9; }
[data-coreui-theme="dark"] .a7-avatar-edit-btn { border-color: #1b1033; }

/* Profile page header card — dark gradient hero-style card holding the
   avatar/name/meta row plus a real stat row, always-dark regardless of the
   light/dark toggle (same treatment as .a7-hero). */
.a7-profile-card {
  border-radius: 20px;
  padding: 30px 32px 0;
  background: linear-gradient(160deg, #1b0f33 0%, #2b1458 55%, #1b0f33 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px -14px rgba(124, 58, 237, .4);
}
.a7-profile-card-glow {
  position: absolute;
  inset: -30% -10% auto auto;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .35), transparent 70%);
  pointer-events: none;
}
.a7-profile-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 26px;
}
.a7-profile-avatar-ring {
  position: relative;
  width: 104px; height: 104px;
  min-width: 104px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  flex-shrink: 0;
}
.a7-profile-avatar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #1b0f33; }
.a7-profile-avatar-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #1b0f33;
  background: #7c3aed;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.a7-profile-avatar-edit:hover { background: #6d28d9; }
.a7-profile-name { font-size: 23px; font-weight: 800; margin-bottom: 3px; color: #fff; }
.a7-profile-role-line { font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.a7-profile-role-line #profile-role-badge { font-weight: 700; color: #fff; }
.a7-profile-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.a7-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.a7-profile-btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.a7-profile-btn-secondary:hover { background: rgba(255, 255, 255, .18); }
.a7-profile-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(192, 38, 211, .55);
}
.a7-profile-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.a7-profile-stats {
  position: relative;
  z-index: 1;
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.a7-profile-stat {
  flex: 1;
  text-align: center;
  padding: 20px 10px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.a7-profile-stat:last-child { border-right: none; }
.a7-profile-stat-value { font-size: 23px; font-weight: 800; color: #fff; }
.a7-profile-stat-label { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
@media (max-width: 575.98px) {
  .a7-profile-stats { flex-wrap: wrap; }
  .a7-profile-stat { flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .1); }
}
.a7-account-role {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(124, 58, 237, .12);
  color: #7c3aed;
  padding: 5px 14px;
  border-radius: 999px;
}
.a7-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13.5px;
}
.a7-account-item-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, .08);
  color: #7c3aed;
  flex-shrink: 0;
}
.a7-account-signout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(220, 38, 38, .1);
  color: #dc2626;
  font-weight: 700;
}
.a7-account-signout:hover { background: rgba(220, 38, 38, .18); color: #dc2626; }
[data-coreui-theme="dark"] .a7-account-item-icon { background: rgba(255, 255, 255, .08); color: #c4b5fd; }

/* Shared list-row style for the "Transactions / Top Products / Tickets /
   Notifications" dashboard widgets — real data only, see dashboard script. */
.a7-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--a7-border, rgba(17, 19, 42, .08));
}
.a7-list-row:last-child { border-bottom: none; }
.a7-list-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: rgba(124, 58, 237, .1);
}
.a7-list-icon img { width: 100%; height: 100%; object-fit: cover; }
.a7-list-title { font-weight: 700; font-size: 13.5px; }
.a7-list-sub { font-size: 12px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); }
.a7-list-value { font-weight: 800; font-size: 13.5px; margin-left: auto; white-space: nowrap; }
.a7-cat-row { margin-bottom: 14px; }
.a7-cat-row:last-child { margin-bottom: 0; }
.a7-cat-track {
  height: 7px;
  border-radius: 999px;
  background: var(--a7-surface-2, #eef0f9);
  overflow: hidden;
  margin-top: 6px;
}
.a7-cat-fill { height: 100%; border-radius: 999px; }
.a7-status-pill {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.a7-status-pill.open { background: rgba(245, 158, 11, .14); color: #d97706; }
.a7-status-pill.closed { background: rgba(22, 163, 116, .12); color: #16a374; }
.a7-status-pill.active { background: rgba(22, 163, 116, .12); color: #16a374; }
.a7-status-pill.pending { background: rgba(245, 158, 11, .14); color: #d97706; }
.a7-status-pill.blocked { background: rgba(220, 38, 38, .12); color: #dc2626; }

/* Filter tabs (All/Actifs/Bloqués style pills with counts) — used on the
   Reseller list and reusable anywhere a filtered table needs them. */
.a7-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.a7-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a7-text-dim, rgba(17, 19, 42, .62));
  background: var(--a7-surface-2, #eef0f9);
  border: none;
  cursor: pointer;
}
.a7-filter-tab .count {
  font-size: 11.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(17, 19, 42, .08);
}
.a7-filter-tab.active { background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; }
.a7-filter-tab.active .count { background: rgba(255, 255, 255, .22); color: #fff; }
[data-coreui-theme="dark"] .a7-filter-tab { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }
[data-coreui-theme="dark"] .a7-filter-tab .count { background: rgba(255, 255, 255, .12); }

/* Round gradient initials avatar used in table rows (Reseller list, etc.) */
.a7-table-avatar {
  width: 36px; height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  flex-shrink: 0;
}

/* Small circular action-icon buttons (view/edit/delete) for table rows,
   matching the TrendyAdmin Users-table actions column. */
.a7-action-icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--a7-surface-2, #eef0f9);
  color: var(--a7-text-dim, rgba(17, 19, 42, .62));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.a7-action-icon-btn:hover { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.a7-action-icon-btn.danger:hover { background: rgba(220, 38, 38, .12); color: #dc2626; }
[data-coreui-theme="dark"] .a7-action-icon-btn { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .65); }

/* Header "Quick Access" app-grid dropdown — real pages only, reusing the
   sidebar's own icons/colors so it stays consistent with real navigation. */
.a7-quickaccess-menu { width: 320px; padding: 16px; }
.a7-quickaccess-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.a7-quickaccess-item:hover { background: var(--a7-surface-2, #eef0f9); color: inherit; }
[data-coreui-theme="dark"] .a7-quickaccess-item:hover { background: rgba(255, 255, 255, .06); }
.a7-quickaccess-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.a7-quickaccess-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; }

/* Settings page — left nav list (Account/Notifications/Activity/Roles) */
.a7-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: none;
  background: transparent;
  border-radius: 12px;
  margin-bottom: 4px;
  cursor: pointer;
}
.a7-settings-nav-item:hover { background: var(--a7-surface-2, #eef0f9); }
.a7-settings-nav-item.active { background: rgba(124, 58, 237, .1); }
.a7-settings-nav-icon {
  width: 38px; height: 38px;
  min-width: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a7-surface-2, #eef0f9);
  color: var(--a7-text-dim, rgba(17, 19, 42, .62));
}
.a7-settings-nav-item.active .a7-settings-nav-icon { background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; }
.a7-settings-nav-title { display: block; font-weight: 700; font-size: 13.5px; color: #1a0b2e; }
.a7-settings-nav-item.active .a7-settings-nav-title { color: #7c3aed; }
.a7-settings-nav-sub { display: block; font-size: 11.5px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); }
[data-coreui-theme="dark"] .a7-settings-nav-title { color: #fff; }
[data-coreui-theme="dark"] .a7-settings-nav-item:hover { background: rgba(255, 255, 255, .06); }

/* Language toggle (FR/EN) — same visual language as the filter tabs */
.a7-lang-toggle { display: inline-flex; background: var(--a7-surface-2, #eef0f9); border-radius: 999px; padding: 3px; }
.a7-lang-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--a7-text-dim, rgba(17, 19, 42, .62));
  cursor: pointer;
}
.a7-lang-btn.active { background: linear-gradient(135deg, #7c3aed, #c026d3); color: #fff; }
[data-coreui-theme="dark"] .a7-lang-toggle { background: rgba(255, 255, 255, .08); }

/* Floating pill footer — mirrors the floating header above. */
.a7-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px 16px 16px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(124, 58, 237, .18);
  flex-wrap: wrap;
  position: relative;
}
.a7-footer-logo img { height: 26px; width: auto; }
.a7-footer-text { font-size: 13px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); }
.a7-footer-links { display: flex; gap: 16px; margin-left: auto; }
.a7-footer-links a { font-size: 13px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); text-decoration: none; }
.a7-footer-links a:hover { color: #7c3aed; }
.a7-footer-powered { font-size: 13px; color: var(--a7-text-dim, rgba(17, 19, 42, .62)); }
.a7-footer-top {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(124, 58, 237, .55);
  flex-shrink: 0;
}
[data-coreui-theme="dark"] .a7-footer {
  background: #150a26;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
}