/* ==========================================================================
   Admin Appearance — card styles + modal option picker
   Card style: html[data-admin-card-style="classic|glass"]
   ========================================================================== */

/* ---------- Glass tokens (frosted, more solid so cards read as real glass) ---------- */
html[data-admin-card-style="glass"] {
  --admin-glass-bg: rgba(210, 212, 218, 0.62);
  --admin-glass-bg-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.14) 100%
  );
  --admin-glass-border: rgba(255, 255, 255, 0.55);
  --admin-glass-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.12);
  --admin-glass-inset: inset 0 0.5px 0 rgba(255, 255, 255, 0.55);
  --admin-glass-blur: blur(48px) saturate(1.65);
  --admin-glass-divider: rgba(75, 70, 92, 0.1);
  --admin-glass-radius: 0.75rem;
}

html.dark-style[data-admin-card-style="glass"],
[data-bs-theme="dark"][data-admin-card-style="glass"] {
  --admin-glass-bg: rgba(52, 56, 72, 0.72);
  --admin-glass-bg-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  --admin-glass-border: rgba(255, 255, 255, 0.16);
  --admin-glass-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.36);
  --admin-glass-inset: inset 0 0.5px 0 rgba(255, 255, 255, 0.14);
  --admin-glass-divider: rgba(255, 255, 255, 0.1);
}

/* Shared frosted surface — blur on ::before so radius clips cleanly on iOS */
html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card),
html[data-admin-card-style="glass"] .dropdown-menu,
html[data-admin-card-style="glass"] .popover,
html[data-admin-card-style="glass"] .offcanvas,
html[data-admin-card-style="glass"] .swal2-popup,
html[data-admin-card-style="glass"] .flatpickr-calendar {
  position: relative;
  isolation: isolate;
  border-radius: var(--admin-glass-radius) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--admin-glass-border) !important;
  box-shadow: var(--admin-glass-shadow) !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card)::before,
html[data-admin-card-style="glass"] .dropdown-menu::before,
html[data-admin-card-style="glass"] .popover::before,
html[data-admin-card-style="glass"] .offcanvas::before,
html[data-admin-card-style="glass"] .swal2-popup::before,
html[data-admin-card-style="glass"] .flatpickr-calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--admin-glass-bg);
  background-image: var(--admin-glass-bg-image);
  box-shadow: var(--admin-glass-inset);
  backdrop-filter: var(--admin-glass-blur);
  -webkit-backdrop-filter: var(--admin-glass-blur);
  pointer-events: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* ---------- Glass page backdrop (solid behind frosted containers) ---------- */
html[data-admin-card-style="glass"] body,
html[data-admin-card-style="glass"] .layout-wrapper,
html[data-admin-card-style="glass"] .layout-container,
html[data-admin-card-style="glass"] .layout-page,
html[data-admin-card-style="glass"] .content-wrapper {
  background: #ffffff !important;
  background-image: none !important;
}

html.dark-style[data-admin-card-style="glass"] body,
html.dark-style[data-admin-card-style="glass"] .layout-wrapper,
html.dark-style[data-admin-card-style="glass"] .layout-container,
html.dark-style[data-admin-card-style="glass"] .layout-page,
html.dark-style[data-admin-card-style="glass"] .content-wrapper,
[data-bs-theme="dark"][data-admin-card-style="glass"] body,
[data-bs-theme="dark"][data-admin-card-style="glass"] .layout-wrapper,
[data-bs-theme="dark"][data-admin-card-style="glass"] .layout-container,
[data-bs-theme="dark"][data-admin-card-style="glass"] .layout-page,
[data-bs-theme="dark"][data-admin-card-style="glass"] .content-wrapper {
  background: #25293c !important;
  background-image: none !important;
}

/* ---------- Glass cards ---------- */
html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card) {
  --bs-card-bg: var(--admin-glass-bg);
  --bs-card-box-shadow: none;
  box-shadow: none !important;
}

html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card)::before {
  box-shadow: none;
}

html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card)::after {
  box-shadow: none !important;
}

html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card) > .card-header,
html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card) > .card-footer,
html[data-admin-card-style="glass"] .content-wrapper .card:not(.admin-appearance-option__card) > .card-body {
  background-color: transparent !important;
  border-color: var(--admin-glass-divider);
}

/* ---------- Solid modals (readable forms; avoid glass tint / stuck overlays) ---------- */
html[data-admin-card-style="glass"] .modal-content {
  background-color: var(--bs-body-bg, #fff) !important;
  background-image: none !important;
  border: 1px solid rgba(75, 70, 92, 0.12) !important;
  box-shadow: 0 0.5rem 1.5rem rgba(34, 41, 47, 0.18) !important;
}

html[data-admin-card-style="glass"] .modal-content::before {
  content: none !important;
  display: none !important;
}

html.dark-style[data-admin-card-style="glass"] .modal-content,
[data-bs-theme="dark"][data-admin-card-style="glass"] .modal-content {
  background-color: #2f3349 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-admin-card-style="glass"] .modal-header,
html[data-admin-card-style="glass"] .modal-footer {
  background-color: transparent !important;
}

/* ---------- Glass dropdowns ---------- */
html[data-admin-card-style="glass"] .dropdown-menu {
  --bs-dropdown-bg: var(--admin-glass-bg);
  --bs-dropdown-border-color: var(--admin-glass-border);
}

html[data-admin-card-style="glass"] .dropdown-menu .dropdown-menu-header,
html[data-admin-card-style="glass"] .dropdown-menu .dropdown-menu-footer,
html[data-admin-card-style="glass"] .dropdown-divider {
  background-color: transparent !important;
  border-color: var(--admin-glass-divider) !important;
}

html[data-admin-card-style="glass"] .dropdown-item:hover,
html[data-admin-card-style="glass"] .dropdown-item:focus,
html[data-admin-card-style="glass"] .dropdown-item.active,
html[data-admin-card-style="glass"] .dropdown-item:active {
  background-color: rgba(115, 103, 240, 0.1) !important;
}

/* Sidebar navbar menus: solid panels (readable over glass; no page text bleed-through) */
html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-menu,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-menu,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-menu {
  --bs-dropdown-bg: rgba(255, 255, 255, 0.96);
  --bs-dropdown-border-color: rgba(75, 70, 92, 0.1);
  --bs-dropdown-link-color: #5d596c;
  background-color: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  border: 1px solid rgba(75, 70, 92, 0.1) !important;
  box-shadow: 0 12px 28px rgba(34, 41, 47, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-menu::before,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-menu::before,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-menu::before {
  content: none !important;
  display: none !important;
}

html.dark-style[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-menu,
html.dark-style[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-menu,
html.dark-style[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-menu,
[data-bs-theme="dark"][data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-menu,
[data-bs-theme="dark"][data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-menu,
[data-bs-theme="dark"][data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-menu {
  --bs-dropdown-bg: rgba(47, 51, 73, 0.96);
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.08);
  --bs-dropdown-link-color: #cfd3ec;
  background-color: rgba(47, 51, 73, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-item,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-item,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-item {
  color: var(--bs-dropdown-link-color, #5d596c) !important;
}

html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-item:hover,
html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-item:focus,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-item:hover,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-item:focus,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-item:hover,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-item:focus {
  color: var(--admin-primary, #7367f0) !important;
  background-color: color-mix(in srgb, var(--admin-primary, #7367f0) 12%, transparent) !important;
}

html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-item.active,
html[data-admin-nav-layout="sidebar"] .dropdown-locale .dropdown-item:active,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-item.active,
html[data-admin-nav-layout="sidebar"] .dropdown-style-switcher .dropdown-item:active,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-item.active,
html[data-admin-nav-layout="sidebar"] .dropdown-user .dropdown-item:active {
  color: #fff !important;
  background-color: var(--admin-primary, #7367f0) !important;
  background-image: var(--admin-primary-gradient, none) !important;
  background-size: 100% 100% !important;
}

/* ---------- Glass popovers / offcanvas / toasts ---------- */
html[data-admin-card-style="glass"] .popover {
  --bs-popover-bg: var(--admin-glass-bg);
  --bs-popover-border-color: var(--admin-glass-border);
}

html[data-admin-card-style="glass"] .popover .popover-header,
html[data-admin-card-style="glass"] .popover .popover-body {
  background-color: transparent !important;
  border-color: var(--admin-glass-divider);
}

html[data-admin-card-style="glass"] .offcanvas {
  --bs-offcanvas-bg: var(--admin-glass-bg);
  --bs-offcanvas-border-color: var(--admin-glass-border);
}

html[data-admin-card-style="glass"] .offcanvas-header,
html[data-admin-card-style="glass"] .offcanvas-body {
  background-color: transparent !important;
  border-color: var(--admin-glass-divider);
}

html[data-admin-card-style="glass"] .toast:not(.toast-success):not(.toast-error):not(.toast-info):not(.toast-warning) {
  --bs-toast-bg: var(--admin-glass-bg);
  --bs-toast-border-color: var(--admin-glass-border);
}

html[data-admin-card-style="glass"] .toast:not(.toast-success):not(.toast-error):not(.toast-info):not(.toast-warning) .toast-header {
  background-color: transparent !important;
  border-color: var(--admin-glass-divider);
}

/* ---------- Glass SweetAlert ---------- */
html[data-admin-card-style="glass"] .swal2-popup {
  color: inherit;
}

html[data-admin-card-style="glass"] .swal2-popup .swal2-title,
html[data-admin-card-style="glass"] .swal2-popup .swal2-html-container {
  color: inherit;
}

/* ---------- Appearance modal layout ---------- */
#adminAppearanceModal .admin-appearance-dock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#adminAppearanceModal .admin-appearance-dock-row__text {
  flex: 1 1 auto;
  min-width: 0;
}

#adminAppearanceModal .admin-appearance-dock-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 2.5rem;
  min-width: 2.5rem;
}

#adminAppearanceModal .admin-appearance-dock-toggle .switch {
  position: relative;
  display: block;
  width: 2.5rem;
  min-width: 2.5rem;
  min-height: 1.35rem;
  margin: 0 !important;
}

#adminAppearanceModal .admin-appearance-dock-toggle .switch-toggle-slider {
  left: 0;
  right: auto;
}

[dir="rtl"] #adminAppearanceModal .admin-appearance-dock-toggle .switch-toggle-slider {
  left: auto;
  right: 0;
}

#adminAppearanceModal .admin-appearance-style-row {
  align-items: stretch;
}

#adminAppearanceModal .admin-appearance-style-row > [class*="col-"] {
  display: flex;
}

#adminAppearanceModal .admin-appearance-option {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

/* Keep appearance modal above Vuexy mobile sidebar (z-index ~1080–1095).
   Do NOT raise all modal backdrops — that puts the dimmer above Create/Edit dialogs and freezes the UI. */
#adminAppearanceModal {
  z-index: 1200 !important;
}

body.modal-open:has(#adminAppearanceModal.show) .modal-backdrop.show,
.modal-backdrop.admin-appearance-backdrop {
  z-index: 1190 !important;
}

/* ---------- Appearance modal option cards ---------- */
.admin-appearance-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-appearance-option__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  padding: 0.9rem;
  border: 2px solid rgba(75, 70, 92, 0.12);
  border-radius: 0.9rem;
  background: var(--bs-body-bg, #fff);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-appearance-option__input:checked + .admin-appearance-option__card,
.admin-appearance-option__card:hover {
  border-color: color-mix(in srgb, var(--admin-primary, #7367f0) 55%, transparent);
  box-shadow: 0 8px 22px rgba(115, 103, 240, 0.12);
}

.admin-appearance-option__input:checked + .admin-appearance-option__card {
  transform: translateY(-1px);
}

.admin-appearance-option__title {
  font-weight: 600;
  color: inherit;
}

.admin-appearance-option__desc {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6d6b77);
}

.admin-appearance-option__preview {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.45rem;
  height: 5.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.admin-appearance-option__preview--classic {
  background: #fff;
  border: 1px solid rgba(75, 70, 92, 0.14);
  box-shadow: 0 4px 14px rgba(34, 41, 47, 0.08);
}

.admin-appearance-option__preview--glass {
  border-radius: 0.75rem;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.14) 100%
    ),
    rgba(210, 212, 218, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(48px) saturate(1.65);
  -webkit-backdrop-filter: blur(48px) saturate(1.65);
}

.admin-appearance-option__preview-bar,
.admin-appearance-option__preview-line {
  display: block;
  border-radius: 999px;
  background: rgba(115, 103, 240, 0.18);
}

.admin-appearance-option__preview-bar {
  width: 42%;
  height: 0.55rem;
}

.admin-appearance-option__preview-line {
  width: 78%;
  height: 0.4rem;
}

.admin-appearance-option__preview-line--short {
  width: 56%;
}

html.dark-style .admin-appearance-option__preview--classic,
[data-bs-theme="dark"] .admin-appearance-option__preview--classic {
  background: #2f3349;
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-style .admin-appearance-option__preview--glass,
[data-bs-theme="dark"] .admin-appearance-option__preview--glass {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    rgba(52, 56, 72, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Glass sidebar + top navbar (sidebar nav layout) ---------- */
/* Keep an opaque-enough base under the frost so page/brand colors do not bleed through.
   Do not set background-color: transparent after the shorthand — that wiped the base layer. */
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu.layout-menu,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar.layout-navbar {
  background-color: rgba(210, 212, 218, 0.72) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.14) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.12),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(48px) saturate(1.65);
  -webkit-backdrop-filter: blur(48px) saturate(1.65);
  isolation: isolate;
}

html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu.layout-menu,
html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar.layout-navbar,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu.layout-menu,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar.layout-navbar {
  background-color: rgba(52, 56, 72, 0.78) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 12px 32px rgba(0, 0, 0, 0.36),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Theme utility classes force opaque fills; clear them so our glass base shows */
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .bg-menu-theme,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .bg-navbar-theme {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu .app-brand,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu .menu-inner,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu .menu-sub,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar .navbar-nav-right,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar .search-input-wrapper,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar .search-input {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-menu .menu-inner-shadow {
  display: none;
}

/* Detached top bar: keep rounded glass shell */
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] #layout-navbar.navbar-detached {
  border-radius: var(--admin-glass-radius) !important;
}

/* Page canvas behind floating sidebar — flat + symmetric (no side-biased wash).
   RTL sidebar sits on the right; the old 90% radial looked like a tinted strip there. */
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] body,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-wrapper,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-container,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-page,
html[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .content-wrapper {
  background: #f3f4f7 !important;
  background-image: none !important;
}

html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] body,
html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-wrapper,
html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-container,
html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-page,
html.dark-style[data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .content-wrapper,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] body,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-wrapper,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-container,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .layout-page,
[data-bs-theme="dark"][data-admin-card-style="glass"][data-admin-nav-layout="sidebar"] .content-wrapper {
  background: #25293c !important;
  background-image: none !important;
}