/* ==========================================================================
   NFC MAROC — CORPORATE DIGITAL IDENTITY DESIGN SYSTEM
   Single Source of Truth for Visual Primitives, Tokens & Components
   ========================================================================== */

/* --- 1. DESIGN TOKENS & CSS CUSTOM PROPERTIES --- */
:root {
  /* Brand & Accents */
  --nfc-brand: hsl(224, 65%, 28%);
  --nfc-brand-fg: hsl(0, 0%, 100%);
  --nfc-navy: hsl(224, 65%, 28%);
  --nfc-navy-light: hsl(224, 55%, 38%);
  --nfc-navy-dark: hsl(224, 70%, 18%);
  --nfc-royal: hsl(224, 72%, 52%);
  --nfc-royal-hover: hsl(224, 75%, 44%);
  --nfc-royal-tint: hsl(224, 72%, 52%, 0.12);
  
  /* Moroccan Warm Accents */
  --nfc-gold: hsl(38, 85%, 55%);
  --nfc-gold-dark: hsl(38, 70%, 42%);
  --nfc-gold-tint: hsl(38, 85%, 55%, 0.14);
  --nfc-terra: hsl(16, 65%, 52%);
  --nfc-terra-tint: hsl(16, 65%, 52%, 0.13);
  --nfc-ok: hsl(152, 55%, 45%);
  --nfc-ok-tint: hsl(152, 55%, 45%, 0.13);
  --nfc-off: hsl(220, 10%, 60%);
  --nfc-off-tint: hsl(220, 10%, 60%, 0.16);

  /* Light Theme Surfaces */
  --nfc-s-page: hsl(220, 20%, 98%);
  --nfc-s-card: hsl(0, 0%, 100%);
  --nfc-s-elev: hsl(220, 15%, 96%);
  --nfc-s-rec: hsl(220, 12%, 94%);
  --nfc-s-hover: hsl(220, 14%, 92%);

  /* Light Theme Typography */
  --nfc-t1: hsl(224, 40%, 15%);
  --nfc-t2: hsl(220, 15%, 45%);
  --nfc-t3: hsl(220, 10%, 60%);

  /* Borders & Lines */
  --nfc-line: hsl(220, 15%, 89%);
  --nfc-line-soft: hsl(220, 15%, 93%);
  --nfc-line-focus: hsl(224, 72%, 52%);

  /* Shadows */
  --nfc-shadow-sm: 0 1px 2px hsl(224 40% 15% / 0.05);
  --nfc-shadow: 0 1px 3px hsl(224 40% 15% / 0.07), 0 1px 2px hsl(224 40% 15% / 0.04);
  --nfc-shadow-md: 0 4px 14px hsl(224 40% 15% / 0.09);
  --nfc-shadow-lg: 0 12px 32px hsl(224 40% 15% / 0.12);

  /* Zellij Moroccan Geometric Pattern */
  --nfc-zellij: hsl(224 40% 15% / 0.045);
  --nfc-zellij-strong: hsl(224 40% 15% / 0.08);

  /* Dimensions & Spacing */
  --nfc-radius-sm: 6px;
  --nfc-radius-md: 8px;
  --nfc-radius-lg: 12px;
  --nfc-radius-xl: 16px;
  --nfc-radius-pill: 9999px;
  --nfc-sidebar-w: 260px;
  --nfc-header-h: 64px;
}

/* --- 2. DARK THEME OVERRIDES --- */
[data-theme="dark"],
.dark-mode,
body.dark-mode {
  --nfc-brand: hsl(224, 72%, 58%);
  --nfc-brand-fg: hsl(224, 60%, 12%);
  --nfc-navy: hsl(224, 40%, 18%);
  --nfc-navy-light: hsl(224, 45%, 26%);
  --nfc-navy-dark: hsl(224, 30%, 10%);
  --nfc-royal: hsl(224, 78%, 68%);
  --nfc-royal-hover: hsl(224, 82%, 74%);
  --nfc-royal-tint: hsl(224, 78%, 68%, 0.15);

  --nfc-gold: hsl(38, 88%, 62%);
  --nfc-gold-dark: hsl(38, 80%, 55%);
  --nfc-gold-tint: hsl(38, 88%, 62%, 0.16);
  --nfc-terra: hsl(16, 70%, 60%);
  --nfc-terra-tint: hsl(16, 70%, 60%, 0.16);
  --nfc-ok: hsl(152, 50%, 52%);
  --nfc-ok-tint: hsl(152, 50%, 52%, 0.16);
  --nfc-off: hsl(220, 8%, 52%);
  --nfc-off-tint: hsl(220, 8%, 52%, 0.18);

  --nfc-s-page: hsl(224, 26%, 9%);
  --nfc-s-card: hsl(224, 22%, 13%);
  --nfc-s-elev: hsl(224, 20%, 16%);
  --nfc-s-rec: hsl(224, 18%, 19%);
  --nfc-s-hover: hsl(224, 18%, 22%);

  --nfc-t1: hsl(220, 22%, 95%);
  --nfc-t2: hsl(220, 12%, 68%);
  --nfc-t3: hsl(220, 10%, 50%);

  --nfc-line: hsl(224, 16%, 24%);
  --nfc-line-soft: hsl(224, 16%, 20%);
  --nfc-line-focus: hsl(224, 78%, 68%);

  --nfc-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.35);
  --nfc-shadow: 0 1px 3px hsl(0 0% 0% / 0.45);
  --nfc-shadow-md: 0 4px 14px hsl(0 0% 0% / 0.45);
  --nfc-shadow-lg: 0 14px 36px hsl(0 0% 0% / 0.5);

  --nfc-zellij: hsl(220 40% 90% / 0.05);
  --nfc-zellij-strong: hsl(220 40% 90% / 0.09);
}

/* --- 3. BASE RESET & GLOBAL TYPOGRAPHY --- */
html, body {
  background-color: var(--nfc-s-page) !important;
  color: var(--nfc-t1) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.nfc-heading,
.aside-menu-title,
.page-title,
.modal-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--nfc-t1) !important;
  letter-spacing: -0.02em;
  font-weight: 700;
}

code, pre, .nfc-mono, .text-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

a {
  color: var(--nfc-royal);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--nfc-navy);
}

/* Material Symbols Integration */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Subtle Zellij Geometric Patterns */
.nfc-zellij-bg {
  position: relative;
}
.nfc-zellij-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, var(--nfc-zellij) 0 1px, transparent 1px 14px),
                    repeating-linear-gradient(-45deg, var(--nfc-zellij) 0 1px, transparent 1px 14px),
                    repeating-linear-gradient(0deg, var(--nfc-zellij) 0 1px, transparent 1px 28px);
  pointer-events: none;
  border-radius: inherit;
}

/* --- 4. APPLICATION SHELL & LAYOUT ARCHITECTURE --- */
.nfc-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--nfc-s-page);
}

/* Global Sidebar */
.aside-menu-container,
#sidebar.aside-menu-container {
  width: var(--nfc-sidebar-w) !important;
  flex: none;
  background: var(--nfc-s-card) !important;
  border-right: 1px solid var(--nfc-line-soft) !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 1040 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Sidebar Fixed Elements */
.aside-menu-container__aside-logo,
.nfc-sidebar-search,
.nfc-sidebar-footer-plan {
  flex-shrink: 0 !important;
}

/* Sidebar Scrolling Area (Independent internal scroll) */
.sidebar-scrolling {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 12px 24px 12px !important;
}

/* Sidebar Slim / Collapsed (Icon Rail Mode) */
.aside-menu-container.collapsed-menu,
.aside-menu-container.nfc-sidebar-collapsed,
#sidebar.collapsed-menu,
#sidebar.nfc-sidebar-collapsed,
body.nfc-sidebar-collapsed #sidebar,
body.nfc-has-collapsed-sidebar #sidebar {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

/* Logo in Collapsed / Rail Mode */
.aside-menu-container.collapsed-menu .aside-menu-container__aside-logo,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-logo,
#sidebar.collapsed-menu .aside-menu-container__aside-logo,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-logo,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-logo,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-logo {
  padding: 0 8px !important;
  justify-content: center !important;
  align-items: center !important;
  height: 64px !important;
  min-height: 64px !important;
  width: 100% !important;
}

.aside-menu-container.collapsed-menu .nfc-brand-link,
.aside-menu-container.nfc-sidebar-collapsed .nfc-brand-link,
#sidebar.collapsed-menu .nfc-brand-link,
#sidebar.nfc-sidebar-collapsed .nfc-brand-link,
body.nfc-sidebar-collapsed #sidebar .nfc-brand-link,
body.nfc-has-collapsed-sidebar #sidebar .nfc-brand-link {
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}

.aside-menu-container.collapsed-menu .nfc-app-logo,
.aside-menu-container.nfc-sidebar-collapsed .nfc-app-logo,
#sidebar.collapsed-menu .nfc-app-logo,
#sidebar.nfc-sidebar-collapsed .nfc-app-logo,
body.nfc-sidebar-collapsed #sidebar .nfc-app-logo,
body.nfc-has-collapsed-sidebar #sidebar .nfc-app-logo {
  max-width: 44px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}

.aside-menu-container.collapsed-menu .nfc-brand-monogram,
.aside-menu-container.nfc-sidebar-collapsed .nfc-brand-monogram,
#sidebar.collapsed-menu .nfc-brand-monogram,
#sidebar.nfc-sidebar-collapsed .nfc-brand-monogram,
body.nfc-sidebar-collapsed #sidebar .nfc-brand-monogram,
body.nfc-has-collapsed-sidebar #sidebar .nfc-brand-monogram {
  width: 38px !important;
  height: 38px !important;
  font-size: 14px !important;
  margin: 0 auto !important;
}

.aside-menu-container.collapsed-menu .nfc-brand-name,
.aside-menu-container.nfc-sidebar-collapsed .nfc-brand-name,
#sidebar.collapsed-menu .nfc-brand-name,
#sidebar.nfc-sidebar-collapsed .nfc-brand-name,
body.nfc-sidebar-collapsed #sidebar .nfc-brand-name,
body.nfc-has-collapsed-sidebar #sidebar .nfc-brand-name,
.aside-menu-container.collapsed-menu .nfc-sidebar-search,
.aside-menu-container.nfc-sidebar-collapsed .nfc-sidebar-search,
#sidebar.collapsed-menu .nfc-sidebar-search,
#sidebar.nfc-sidebar-collapsed .nfc-sidebar-search,
body.nfc-sidebar-collapsed #sidebar .nfc-sidebar-search,
body.nfc-has-collapsed-sidebar #sidebar .nfc-sidebar-search,
.aside-menu-container.collapsed-menu .aside-menu-title,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-title,
#sidebar.collapsed-menu .aside-menu-title,
#sidebar.nfc-sidebar-collapsed .aside-menu-title,
body.nfc-sidebar-collapsed #sidebar .aside-menu-title,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-title,
.aside-menu-container.collapsed-menu .nfc-sidebar-footer-plan,
.aside-menu-container.nfc-sidebar-collapsed .nfc-sidebar-footer-plan,
#sidebar.collapsed-menu .nfc-sidebar-footer-plan,
#sidebar.nfc-sidebar-collapsed .nfc-sidebar-footer-plan,
body.nfc-sidebar-collapsed #sidebar .nfc-sidebar-footer-plan,
body.nfc-has-collapsed-sidebar #sidebar .nfc-sidebar-footer-plan,
.aside-menu-container.collapsed-menu .nfc-nav-header,
.aside-menu-container.nfc-sidebar-collapsed .nfc-nav-header,
#sidebar.collapsed-menu .nfc-nav-header,
#sidebar.nfc-sidebar-collapsed .nfc-nav-header,
body.nfc-sidebar-collapsed #sidebar .nfc-nav-header,
body.nfc-has-collapsed-sidebar #sidebar .nfc-nav-header {
  display: none !important;
}

/* Sidebar list & icons in Collapsed / Rail Mode */
.aside-menu-container.collapsed-menu .sidebar-scrolling,
.aside-menu-container.nfc-sidebar-collapsed .sidebar-scrolling,
#sidebar.collapsed-menu .sidebar-scrolling,
#sidebar.nfc-sidebar-collapsed .sidebar-scrolling,
body.nfc-sidebar-collapsed #sidebar .sidebar-scrolling,
body.nfc-has-collapsed-sidebar #sidebar .sidebar-scrolling {
  padding: 10px 0 24px 0 !important;
}

.aside-menu-container.collapsed-menu .aside-menu-container__aside-menu,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu,
#sidebar.collapsed-menu .aside-menu-container__aside-menu,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu {
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
}

.aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item,
#sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 3px 0 !important;
}

.aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item .nav-link,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item .nav-link,
#sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item .nav-link,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item .nav-link,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item .nav-link,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item .nav-link {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  gap: 0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.aside-menu-container.collapsed-menu .aside-menu-icon,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-icon,
#sidebar.collapsed-menu .aside-menu-icon,
#sidebar.nfc-sidebar-collapsed .aside-menu-icon,
body.nfc-sidebar-collapsed #sidebar .aside-menu-icon,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-icon {
  margin: 0 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.aside-menu-container.collapsed-menu .aside-menu-icon .material-symbols-outlined,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-icon .material-symbols-outlined,
#sidebar.collapsed-menu .aside-menu-icon .material-symbols-outlined,
#sidebar.nfc-sidebar-collapsed .aside-menu-icon .material-symbols-outlined,
body.nfc-sidebar-collapsed #sidebar .aside-menu-icon .material-symbols-outlined,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-icon .material-symbols-outlined {
  font-size: 22px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   UNIFIED VERTICAL MENU ACTIVE & HOVER STYLING (EXPANDED & MINIMAL)
   ========================================================================== */

/* Regular State in Collapsed Mode */
.aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
.aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined,
#sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
#sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .aside-menu-icon,
body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link .material-symbols-outlined {
  color: var(--nfc-t3) !important;
}

/* Active Link in Minimal and Maximal */
html body #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body #sidebar .aside-menu-container__aside-menu .nav-item.active .nav-link,
html body #sidebar .aside-menu-container__aside-menu .nav-item .nav-link.active,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active .nav-link,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item .nav-link.active,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link {
  background: var(--bs-primary, #6571ff) !important;
  background-color: var(--bs-primary, #6571ff) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(101, 113, 255, 0.35) !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Active Link Text */
html body #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-title,
html body #sidebar .aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-title,
html body #sidebar .aside-menu-container__aside-menu .nav-item .nav-link.active .aside-menu-title,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-title,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-title,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item .nav-link.active .aside-menu-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Active Link Icons */
html body #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-icon,
html body #sidebar .aside-menu-container__aside-menu .nav-item.active > .nav-link .material-symbols-outlined,
html body #sidebar .aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-icon,
html body #sidebar .aside-menu-container__aside-menu .nav-item.active .nav-link .material-symbols-outlined,
html body #sidebar .aside-menu-container__aside-menu .nav-item .nav-link.active .aside-menu-icon,
html body #sidebar .aside-menu-container__aside-menu .nav-item .nav-link.active .material-symbols-outlined,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-icon,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active > .nav-link .material-symbols-outlined,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-icon,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item.active .nav-link .material-symbols-outlined,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item.active .aside-menu-icon,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item.active .material-symbols-outlined {
  color: #ffffff !important;
}

/* Hover Link in Minimal and Maximal */
html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover {
  background: rgba(101, 113, 255, 0.12) !important;
  background-color: rgba(101, 113, 255, 0.12) !important;
  color: var(--bs-primary, #6571ff) !important;
  border-radius: 8px !important;
}

html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title {
  color: var(--bs-primary, #6571ff) !important;
  font-weight: 600 !important;
}

html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined {
  color: var(--bs-primary, #6571ff) !important;
}

/* Dark mode hover in Minimal and Maximal */
[data-theme="dark"] html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover,
[data-theme="dark"] html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover {
  background: rgba(101, 113, 255, 0.18) !important;
  background-color: rgba(101, 113, 255, 0.18) !important;
  color: #ffffff !important;
}

[data-theme="dark"] html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title,
[data-theme="dark"] html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title {
  color: #ffffff !important;
}

[data-theme="dark"] html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body .aside-menu-container .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body .aside-menu-container.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body .aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body #sidebar.collapsed-menu .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body #sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body.nfc-sidebar-collapsed #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined,
[data-theme="dark"] html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] html body.nfc-has-collapsed-sidebar #sidebar .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined {
  color: var(--nfc-gold) !important;
}

.aside-menu-container.collapsed-menu .aside-menu-container__aside-menubar,
.aside-menu-container.nfc-sidebar-collapsed .aside-menu-container__aside-menubar,
#sidebar.collapsed-menu .aside-menu-container__aside-menubar,
#sidebar.nfc-sidebar-collapsed .aside-menu-container__aside-menubar {
  display: flex !important;
  margin: 0 auto !important;
}

.aside-menu-container.collapsed-menu .nfc-brand-monogram,
.aside-menu-container.nfc-sidebar-collapsed .nfc-brand-monogram {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.aside-menu-container.collapsed-menu .nfc-brand-monogram:hover,
.aside-menu-container.nfc-sidebar-collapsed .nfc-brand-monogram:hover {
  transform: scale(1.08);
}

.bg-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1030;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bg-overlay.open {
  display: block;
  opacity: 1;
}

/* Modal Close Button and Drawer Fix */
.btn-close {
  cursor: pointer !important;
  opacity: 0.7;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* =========================================================
   NFC MAROC ATTACHED CENTER NAV SHELF DOCK
   ========================================================= */
.nfc-header-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
  width: 100% !important;
}

@media (min-width: 992px) {
  .nfc-header-wrapper {
    margin-bottom: 42px !important;
  }
}

@media (max-width: 991px) {
  .nfc-header-wrapper {
    margin-bottom: 0 !important;
  }
}

.nfc-top-header {
  height: 64px !important;
  background: var(--nfc-s-card) !important;
  border-bottom: 1px solid var(--nfc-line-soft) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

.nfc-top-header .dropdown {
  position: relative !important;
  z-index: 1060 !important;
}

.nfc-top-header .dropdown-menu,
.nfc-top-header .dropdown-menu.show,
.nfc-lang-pill + .dropdown-menu,
.nfc-user-profile-btn + .dropdown-menu {
  z-index: 100000 !important;
  box-shadow: var(--nfc-shadow-lg) !important;
}

.nfc-attached-shelf-wrapper {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1020 !important;
  pointer-events: auto;
}

.nfc-attached-shelf {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--nfc-s-card);
  padding: 6px 18px 7px 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border: 1px solid var(--nfc-line-soft);
  border-top: none;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.09), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

/* Inverted curves on left and right connecting cleanly to the navbar */
.nfc-attached-shelf::before {
  content: '';
  position: absolute;
  top: 0;
  left: -14px;
  width: 14px;
  height: 14px;
  background: transparent;
  border-top-right-radius: 14px;
  box-shadow: 5px -5px 0 0 var(--nfc-s-card);
  pointer-events: none;
}

.nfc-attached-shelf::after {
  content: '';
  position: absolute;
  top: 0;
  right: -14px;
  width: 14px;
  height: 14px;
  background: transparent;
  border-top-left-radius: 14px;
  box-shadow: -5px -5px 0 0 var(--nfc-s-card);
  pointer-events: none;
}

.nfc-shelf-nav-list {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nfc-shelf-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nfc-t2);
  text-decoration: none !important;
  border-radius: var(--nfc-radius-md);
  transition: all 0.16s ease;
  white-space: nowrap;
}
.nfc-shelf-nav-link span.material-symbols-outlined {
  font-size: 19px;
  color: var(--nfc-t3);
  transition: color 0.16s ease;
}
.nfc-shelf-nav-link:hover {
  color: var(--nfc-t1);
  background: var(--nfc-s-rec);
}
.nfc-shelf-nav-link:hover span.material-symbols-outlined {
  color: var(--nfc-royal);
}
.nfc-shelf-nav-link.active {
  color: var(--nfc-royal);
  background: hsl(220 84% 54% / 0.10);
  font-weight: 700;
}
.nfc-shelf-nav-link.active span.material-symbols-outlined {
  color: var(--nfc-royal);
}

@media (min-width: 992px) {
  .content,
  .content.d-flex,
  .wrapper > .content,
  .nfc-main-content {
    padding-top: 56px !important;
  }
}

@media (max-width: 991px) {
  .content,
  .content.d-flex,
  .wrapper > .content,
  .nfc-main-content {
    padding-top: 18px !important;
  }
}

/* =========================================================
   VCARD EDIT SUBMENU: DESKTOP & MOBILE DRAWER STYLES
   ========================================================= */
.vcard-sidebar-submenu {
  width: 250px;
  min-width: 250px;
  background: var(--nfc-s-card);
  border-right: 1px solid var(--nfc-line);
  padding: 12px 8px;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s ease;
  overflow-x: hidden;
}

.vcard-sidebar-submenu .nav-link {
  color: var(--nfc-t2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.16s ease;
}
.vcard-sidebar-submenu .nav-link:hover {
  color: var(--nfc-t1);
  background: var(--nfc-s-rec);
}
.vcard-sidebar-submenu .nav-link.active {
  color: var(--nfc-royal) !important;
  background: hsl(220 84% 54% / 0.10) !important;
  font-weight: 700;
}

/* Desktop Collapsed Icon-Rail (Screens >= 992px) */
@media (min-width: 992px) {
  .vcard-sidebar-submenu {
    position: relative !important;
    display: block !important;
    height: 100% !important;
    min-height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .vcard-sidebar-submenu.vcard-sidebar-collapsed {
    width: 68px !important;
    min-width: 68px !important;
    padding: 12px 6px !important;
  }

  .vcard-sidebar-submenu.vcard-sidebar-collapsed .nfc-nav-header,
  .vcard-sidebar-submenu.vcard-sidebar-collapsed .nav-link span:not(.material-symbols-outlined):not(.aside-menu-icon),
  .vcard-sidebar-submenu.vcard-sidebar-collapsed .vcard-submenu-header-title {
    display: none !important;
  }

  .vcard-sidebar-submenu.vcard-sidebar-collapsed .nav-link {
    justify-content: center !important;
    padding: 10px 0 !important;
    border-radius: 10px !important;
    gap: 0 !important;
  }

  .vcard-sidebar-submenu.vcard-sidebar-collapsed .nav-link span.material-symbols-outlined {
    font-size: 22px !important;
    margin: 0 !important;
  }

  .vcard-sidebar-submenu.vcard-sidebar-collapsed .d-flex.align-items-center.justify-content-between {
    justify-content: center !important;
  }
}

/* Mobile Off-Canvas Drawer (Screens < 992px) */
@media (max-width: 991.98px) {
  .vcard-sidebar-submenu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1000000 !important;
    background: var(--nfc-s-card) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s ease, opacity 0.2s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-right: 1px solid var(--nfc-line) !important;
    padding: 0 !important;
    box-shadow: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* When drawer is OPEN on mobile */
  .vcard-sidebar-submenu.open,
  .vcard-sidebar-submenu.vcard-drawer-open {
    width: min(85vw, 290px) !important;
    min-width: 270px !important;
    transform: translateX(0%) !important;
    padding: 16px 12px 30px !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Always show full titles and icons inside the mobile drawer */
  .vcard-sidebar-submenu .nfc-nav-header,
  .vcard-sidebar-submenu .nav-link span,
  .vcard-sidebar-submenu .vcard-submenu-header-title {
    display: inline-block !important;
  }

  .vcard-sidebar-submenu .nav-link {
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  /* Backdrop Overlay for mobile */
  .vcard-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 999999;
    opacity: 0;
    display: none;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .vcard-drawer-backdrop.open,
  .vcard-drawer-backdrop.vcard-drawer-open {
    opacity: 1;
    display: block;
    pointer-events: auto;
  }
}

/* RTL Support */
[dir="rtl"] .vcard-sidebar-submenu {
  border-right: none !important;
  border-left: 1px solid var(--nfc-line) !important;
}

@media (max-width: 991.98px) {
  [dir="rtl"] .vcard-sidebar-submenu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(105%) !important;
    border-left: none !important;
    border-right: 1px solid var(--nfc-line) !important;
  }

  [dir="rtl"] .vcard-sidebar-submenu.open,
  [dir="rtl"] .vcard-sidebar-submenu.vcard-drawer-open {
    transform: translateX(0%) !important;
  }
}

/* =========================================================
   NFC MAROC MOBILE BOTTOM TAB BAR (< 992px)
   ========================================================= */
.nfc-mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: var(--nfc-s-card);
  border-top: 1px solid var(--nfc-line-soft);
  z-index: 1040;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
}

.nfc-bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nfc-t3);
  text-decoration: none !important;
  padding: 6px 4px;
  border-radius: 8px;
  flex: 1;
  text-align: center;
  transition: all 0.15s ease;
}
.nfc-bottom-nav-link span.material-symbols-outlined {
  font-size: 22px;
  color: var(--nfc-t3);
  transition: all 0.15s ease;
}
.nfc-bottom-nav-link:hover {
  color: var(--nfc-t1);
}
.nfc-bottom-nav-link.active {
  color: var(--nfc-royal);
  font-weight: 700;
}
.nfc-bottom-nav-link.active span.material-symbols-outlined {
  color: var(--nfc-royal);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .content.d-flex,
  main.nfc-main-canvas {
    padding-bottom: 80px !important;
  }
}

/* =========================================================
   SUPER ADMIN MOBILE DRAWER (Off-Canvas Sheet)
   ========================================================= */
.nfc-sadmin-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nfc-sadmin-drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.nfc-sadmin-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 340px);
  height: 100vh;
  background: var(--nfc-s-card);
  border-right: 1px solid var(--nfc-line);
  z-index: 1055;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.35);
}

.nfc-sadmin-drawer.show {
  transform: translateX(0);
}

[dir="rtl"] .nfc-sadmin-drawer {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--nfc-line);
  transform: translateX(105%);
}

[dir="rtl"] .nfc-sadmin-drawer.show {
  transform: translateX(0);
}

.nfc-sadmin-drawer-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--nfc-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nfc-s-rec);
}

.nfc-sadmin-drawer-search {
  padding: 12px 16px 8px;
  background: var(--nfc-s-card);
}

.nfc-sadmin-drawer-search .nfc-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--nfc-s-rec);
  border: 1px solid var(--nfc-line-soft);
  border-radius: 10px;
  padding: 8px 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.nfc-sadmin-drawer-search .nfc-search-box:focus-within {
  border-color: var(--nfc-royal);
  background: var(--nfc-s-card);
}

.nfc-sadmin-drawer-search input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: var(--nfc-t1);
}

.nfc-sadmin-drawer-body {
  padding: 12px 14px 80px;
  overflow-y: auto;
  flex: 1;
}

.nfc-sadmin-drawer-category {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nfc-t3);
  padding: 14px 10px 6px;
}

.nfc-sadmin-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--nfc-t2);
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.16s ease;
  margin-bottom: 2px;
}

.nfc-sadmin-drawer-link:hover {
  background: var(--nfc-s-rec);
  color: var(--nfc-t1);
}

.nfc-sadmin-drawer-link.active {
  background: var(--nfc-royal-tint) !important;
  color: var(--nfc-royal) !important;
  font-weight: 700;
}

.nfc-sadmin-drawer-link .icon-pill {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--nfc-s-rec);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.16s ease;
}

.nfc-sadmin-drawer-link.active .icon-pill {
  background: hsl(224 72% 52% / 0.18);
  color: var(--nfc-royal);
}

.nfc-sadmin-drawer-link .icon-pill .material-symbols-outlined {
  font-size: 19px;
}

.aside-menu-container__aside-logo {
  height: var(--nfc-header-h) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid var(--nfc-line-soft) !important;
}

.nfc-brand-monogram {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--nfc-brand);
  color: var(--nfc-brand-fg);
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.5px;
  box-shadow: var(--nfc-shadow-sm);
}

.nfc-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--nfc-t1);
  letter-spacing: -0.3px;
}

/* Sidebar Search Shortcut */
.nfc-sidebar-search {
  padding: 14px 14px 6px;
}
.nfc-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--nfc-s-rec);
  border-radius: var(--nfc-radius-md);
  color: var(--nfc-t3);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.nfc-search-pill:hover {
  border-color: var(--nfc-line);
  color: var(--nfc-t2);
}
.nfc-kbd-shortcut {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--nfc-s-card);
  color: var(--nfc-t3);
  border: 1px solid var(--nfc-line-soft);
}

/* Sidebar Navigation Items */
.sidebar-scrolling {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px !important;
}
.aside-menu-container__aside-menu {
  gap: 3px !important;
}
.aside-menu-container__aside-menu .nav-item {
  width: 100% !important;
  margin: 2px 0 !important;
}

.aside-menu-container__aside-menu .nav-item .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border-radius: var(--nfc-radius-md) !important;
  background: transparent !important;
  color: var(--nfc-t2) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  text-decoration: none !important;
}

/* Regular State Icon & Text */
.aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-icon,
.aside-menu-container__aside-menu .nav-item .nav-link .material-symbols-outlined {
  color: var(--nfc-t3) !important;
  font-size: 20px !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.aside-menu-container__aside-menu .nav-item .nav-link .aside-menu-title {
  color: var(--nfc-t2) !important;
  transition: color 0.2s ease !important;
}

/* Hover State */
.aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover {
  background: var(--nfc-s-subtle) !important;
}

.aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title {
  color: var(--nfc-royal) !important;
  font-weight: 600 !important;
}

.aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
.aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined {
  color: var(--nfc-royal) !important;
  transform: translateX(2px);
}

/* Active State */
.aside-menu-container__aside-menu .nav-item.active > .nav-link,
.aside-menu-container__aside-menu .nav-item.active .nav-link,
.aside-menu-container__aside-menu .nav-item .nav-link.active {
  background: var(--nfc-royal) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px hsl(222 84% 35% / 0.35) !important;
}

.aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-title,
.aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-title,
.aside-menu-container__aside-menu .nav-item .nav-link.active .aside-menu-title {
  color: #ffffff !important;
}

.aside-menu-container__aside-menu .nav-item.active > .nav-link .aside-menu-icon,
.aside-menu-container__aside-menu .nav-item.active > .nav-link .material-symbols-outlined,
.aside-menu-container__aside-menu .nav-item.active .nav-link .aside-menu-icon,
.aside-menu-container__aside-menu .nav-item.active .nav-link .material-symbols-outlined,
.aside-menu-container__aside-menu .nav-item .nav-link.active .aside-menu-icon,
.aside-menu-container__aside-menu .nav-item .nav-link.active .material-symbols-outlined {
  color: #ffffff !important;
}

/* Dark Mode Overrides */
[data-theme="dark"] .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover {
  background: hsl(222 25% 18%) !important;
}

[data-theme="dark"] .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-title {
  color: #ffffff !important;
}

[data-theme="dark"] .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .aside-menu-icon,
[data-theme="dark"] .aside-menu-container__aside-menu .nav-item:not(.active) .nav-link:hover .material-symbols-outlined {
  color: var(--nfc-gold) !important;
}

.aside-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 18px;
  color: inherit;
}

/* Sidebar Footer Plan Widget */
.nfc-sidebar-footer-plan {
  flex: none;
  height: 110px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--nfc-line-soft);
  background: var(--nfc-s-card);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.nfc-sidebar-footer-plan::before {
  content: '';
  position: absolute;
  inset: -10px;
  background-image: repeating-linear-gradient(45deg, var(--nfc-zellij) 0 1px, transparent 1px 14px),
                    repeating-linear-gradient(-45deg, var(--nfc-zellij) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.nfc-plan-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nfc-t1);
  position: relative;
}
.nfc-plan-usage {
  font-size: 11px;
  color: var(--nfc-t3);
  font-family: 'JetBrains Mono', monospace;
  position: relative;
}

/* Global Top Bar Header */
header.header,
.header.d-flex {
  height: var(--nfc-header-h) !important;
  background: var(--nfc-s-card) !important;
  border-bottom: 1px solid var(--nfc-line-soft) !important;
  padding: 0 32px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  box-shadow: none !important;
}

.nfc-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.nfc-breadcrumb-root {
  color: var(--nfc-t3);
  font-weight: 500;
}
.nfc-breadcrumb-sep {
  color: var(--nfc-t3);
  font-size: 11px;
}
.nfc-breadcrumb-current {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--nfc-t1);
}

/* Language Selector Pill */
.nfc-lang-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--nfc-radius-pill);
  background: var(--nfc-s-rec);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nfc-t1);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.nfc-lang-pill::after,
.nfc-lang-pill.dropdown-toggle::after {
  display: none !important;
}
.nfc-lang-pill:hover {
  background: var(--nfc-s-elev);
  border-color: var(--nfc-line);
}
.nfc-lang-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--nfc-royal);
}

/* Theme Toggle Button */
.nfc-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--nfc-radius-pill);
  background: var(--nfc-s-rec);
  color: var(--nfc-t2);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nfc-theme-toggle:hover {
  background: var(--nfc-s-elev);
  color: var(--nfc-royal);
}

/* User Avatar Dropdown Header */
.nfc-user-profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--nfc-radius-pill);
  transition: background 0.15s ease;
}
.nfc-user-profile-btn:hover {
  background: var(--nfc-s-rec);
}
.nfc-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nfc-s-rec);
  border: 1px solid var(--nfc-line);
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--nfc-t2);
}

/* Main Content Workspace Container */
.content.d-flex,
main.nfc-main-canvas {
  padding: 24px 28px 48px !important;
  background: var(--nfc-s-page) !important;
  min-height: calc(100vh - var(--nfc-header-h)) !important;
  width: 100% !important;
}
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- 5. CARDS & ELEVATED SURFACES --- */
.card,
.nfc-card {
  background: var(--nfc-s-card) !important;
  border-radius: var(--nfc-radius-lg) !important;
  border: 1px solid var(--nfc-line-soft) !important;
  box-shadow: var(--nfc-shadow) !important;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
.card:hover,
.nfc-card-interactive:hover {
  box-shadow: var(--nfc-shadow-md) !important;
}

.card-header,
.nfc-card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nfc-line-soft) !important;
  padding: 18px 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.card-title,
.nfc-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--nfc-t1) !important;
  margin: 0 !important;
}
.card-body,
.nfc-card-body {
  padding: 24px !important;
}

/* --- 6. BUTTONS & ACTIONS --- */
.btn,
.nfc-btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: var(--nfc-radius-md) !important;
  padding: 9px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  border: 1px solid transparent !important;
}

/* Primary Button */
.btn-primary,
.nfc-btn-primary {
  background: var(--nfc-brand) !important;
  color: var(--nfc-brand-fg) !important;
  border-color: var(--nfc-brand) !important;
  box-shadow: var(--nfc-shadow-sm) !important;
}
.btn-primary:hover,
.nfc-btn-primary:hover {
  background: var(--nfc-navy-light) !important;
  border-color: var(--nfc-navy-light) !important;
  transform: translateY(-1px);
  box-shadow: var(--nfc-shadow);
}

/* Outline / Secondary Button */
.btn-outline-primary,
.btn-secondary,
.nfc-btn-outline {
  background: transparent !important;
  color: var(--nfc-t1) !important;
  border-color: var(--nfc-line) !important;
}
.btn-outline-primary:hover,
.btn-secondary:hover,
.nfc-btn-outline:hover {
  background: var(--nfc-s-elev) !important;
  border-color: var(--nfc-royal) !important;
  color: var(--nfc-royal) !important;
}

/* Danger / Discard Button */
.btn-danger,
.nfc-btn-danger {
  background: var(--nfc-terra-tint) !important;
  color: var(--nfc-terra) !important;
  border-color: transparent !important;
}
.btn-danger:hover,
.nfc-btn-danger:hover {
  background: var(--nfc-terra) !important;
  color: #ffffff !important;
}

/* Pill Action Button */
.btn-pill,
.nfc-btn-pill {
  border-radius: var(--nfc-radius-pill) !important;
}

/* Icon Buttons */
.nfc-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: var(--nfc-radius-md) !important;
  background: transparent;
  color: var(--nfc-t3);
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.nfc-icon-btn:hover {
  background: var(--nfc-s-rec);
  color: var(--nfc-royal);
  border-color: var(--nfc-line);
}
.nfc-icon-btn.danger:hover {
  background: var(--nfc-terra-tint);
  color: var(--nfc-terra);
}

/* View Switcher / Segmented Toggle (Table & Grid) */
.nfc-view-switcher {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--nfc-s-rec, hsl(220, 12%, 94%)) !important;
  border: 1px solid var(--nfc-line, hsl(220, 15%, 89%)) !important;
  border-radius: var(--nfc-radius-md, 8px) !important;
  padding: 3px !important;
  gap: 3px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  height: 40px !important;
}

.nfc-view-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--nfc-radius-sm, 6px) !important;
  background: transparent !important;
  color: var(--nfc-t2, hsl(220, 15%, 45%)) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

.nfc-view-btn .material-symbols-outlined {
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
}

.nfc-view-btn:hover:not(.active) {
  background: var(--nfc-s-hover, rgba(0, 0, 0, 0.05)) !important;
  color: var(--nfc-t1, hsl(224, 40%, 15%)) !important;
}

.nfc-view-btn.active {
  background: var(--nfc-s-card, #ffffff) !important;
  color: var(--nfc-royal, hsl(224, 72%, 52%)) !important;
  border-color: var(--nfc-line-soft, hsl(220, 15%, 93%)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.nfc-view-btn:active {
  transform: scale(0.94) !important;
}

/* Dark Mode View Switcher */
[data-theme="dark"] .nfc-view-switcher,
.dark-mode .nfc-view-switcher,
body.dark-mode .nfc-view-switcher {
  background: var(--nfc-s-rec, hsl(224, 18%, 19%)) !important;
  border-color: var(--nfc-line, hsl(224, 16%, 24%)) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .nfc-view-btn,
.dark-mode .nfc-view-btn,
body.dark-mode .nfc-view-btn {
  color: var(--nfc-t2, hsl(220, 12%, 68%)) !important;
}

[data-theme="dark"] .nfc-view-btn:hover:not(.active),
.dark-mode .nfc-view-btn:hover:not(.active),
body.dark-mode .nfc-view-btn:hover:not(.active) {
  background: var(--nfc-s-hover, hsl(224, 18%, 22%)) !important;
  color: var(--nfc-t1, hsl(220, 22%, 95%)) !important;
}

[data-theme="dark"] .nfc-view-btn.active,
.dark-mode .nfc-view-btn.active,
body.dark-mode .nfc-view-btn.active {
  background: var(--nfc-navy-light, hsl(224, 45%, 26%)) !important;
  color: var(--nfc-royal, hsl(224, 78%, 68%)) !important;
  border-color: var(--nfc-royal, hsl(224, 78%, 68%, 0.3)) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* --- 7. FORM INPUTS & CONTROLS --- */
.form-control,
.form-select,
.nfc-input,
.nfc-select {
  height: 44px;
  padding: 0 14px !important;
  border: 1px solid var(--nfc-line) !important;
  border-radius: var(--nfc-radius-md) !important;
  background: var(--nfc-s-card) !important;
  color: var(--nfc-t1) !important;
  font-size: 13.5px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus,
.form-select:focus,
.nfc-input:focus {
  border-color: var(--nfc-royal) !important;
  box-shadow: 0 0 0 3px var(--nfc-royal-tint) !important;
  background: var(--nfc-s-card) !important;
}
textarea.form-control,
.nfc-textarea {
  height: auto !important;
  padding: 12px 14px !important;
}

/* International Telephone Input (iti) Fixes */
.iti {
  width: 100% !important;
  display: block !important;
  position: relative !important;
}
.iti input,
.iti input[type="tel"],
.iti input[type="text"],
.iti .form-control {
  padding-left: 58px !important;
  width: 100% !important;
  height: 44px !important;
}
.iti--separate-dial-code input,
.iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="text"],
.iti--separate-dial-code .form-control,
.iti.iti--separate-dial-code input,
.iti.iti--separate-dial-code .form-control {
  padding-left: 108px !important;
}
.iti__flag-container {
  z-index: 5 !important;
}
.iti__selected-flag {
  border-radius: var(--nfc-radius-md) 0 0 var(--nfc-radius-md) !important;
  padding: 0 10px 0 12px !important;
  background: var(--nfc-s-rec) !important;
  border-right: 1px solid var(--nfc-line-soft) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.iti--separate-dial-code .iti__selected-dial-code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nfc-t1) !important;
  margin-left: 6px !important;
  margin-right: 4px !important;
}
.iti__country-list {
  background: var(--nfc-s-card) !important;
  color: var(--nfc-t1) !important;
  border: 1px solid var(--nfc-line) !important;
  border-radius: var(--nfc-radius-md) !important;
  box-shadow: var(--nfc-shadow-lg) !important;
  z-index: 10000 !important;
  max-height: 220px !important;
}
.iti__country {
  color: var(--nfc-t1) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.iti__country:hover,
.iti__country.iti__highlight {
  background: var(--nfc-s-elev) !important;
}
.iti__country-name,
.iti__flag-box {
  margin-right: 8px !important;
}
.iti__dial-code {
  color: var(--nfc-t3) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

html[lang="ar"] .iti input,
[dir="rtl"] .iti input,
html[lang="ar"] .iti .form-control,
[dir="rtl"] .iti .form-control {
  padding-left: 14px !important;
  padding-right: 58px !important;
  direction: ltr !important;
  text-align: right !important;
}
html[lang="ar"] .iti--separate-dial-code input,
[dir="rtl"] .iti--separate-dial-code input,
html[lang="ar"] .iti--separate-dial-code .form-control,
[dir="rtl"] .iti--separate-dial-code .form-control,
html[lang="ar"] .iti.iti--separate-dial-code input,
[dir="rtl"] .iti.iti--separate-dial-code input,
html[lang="ar"] .iti.iti--separate-dial-code .form-control,
[dir="rtl"] .iti.iti--separate-dial-code .form-control {
  padding-left: 14px !important;
  padding-right: 108px !important;
}
html[lang="ar"] .iti__selected-flag,
[dir="rtl"] .iti__selected-flag {
  border-radius: 0 var(--nfc-radius-md) var(--nfc-radius-md) 0 !important;
  padding: 0 12px 0 10px !important;
  border-right: none !important;
  border-left: 1px solid var(--nfc-line-soft) !important;
}

.form-label,
.nfc-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--nfc-t2) !important;
  margin-bottom: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Modern Checkboxes */
.form-check-input[type="checkbox"]:not(.form-switch *),
.form-check:not(.form-switch) .form-check-input,
.nfc-checkbox {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background-color: var(--nfc-s-card) !important;
  border: 1.5px solid var(--nfc-line) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 11px 11px !important;
  margin-top: 2px !important;
  box-shadow: none !important;
}
.form-check-input[type="checkbox"]:not(.form-switch *):hover,
.form-check:not(.form-switch) .form-check-input:hover,
.nfc-checkbox:hover {
  border-color: var(--nfc-royal) !important;
}
.form-check-input[type="checkbox"]:not(.form-switch *):checked,
.form-check:not(.form-switch) .form-check-input:checked,
.nfc-checkbox:checked {
  background-color: var(--nfc-royal) !important;
  border-color: var(--nfc-royal) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* Custom Styled Toggle Switches */
.form-switch .form-check-input,
.form-check.form-switch input,
.nfc-toggle-input {
  width: 44px !important;
  height: 24px !important;
  border-radius: 20px !important;
  background-color: var(--nfc-off) !important;
  border: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  transition: background-color 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 0.25s ease !important;
  cursor: pointer !important;
}
.form-switch .form-check-input:checked,
.form-check.form-switch input:checked,
.nfc-toggle-input:checked {
  background-color: var(--nfc-royal) !important;
}

/* --- 8. STATUS BADGES & PILLS --- */
.nfc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--nfc-radius-pill);
  line-height: 1.2;
}
.nfc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.nfc-badge-active,
.badge-active {
  background: var(--nfc-ok-tint) !important;
  color: var(--nfc-ok) !important;
}
.nfc-badge-pending,
.badge-pending {
  background: var(--nfc-gold-tint) !important;
  color: var(--nfc-gold-dark) !important;
}
.nfc-badge-cancel,
.badge-cancel {
  background: var(--nfc-terra-tint) !important;
  color: var(--nfc-terra) !important;
}
.nfc-badge-inactive,
.badge-inactive {
  background: var(--nfc-off-tint) !important;
  color: var(--nfc-off) !important;
}
.nfc-badge-royal {
  background: var(--nfc-royal-tint) !important;
  color: var(--nfc-royal) !important;
}

/* --- 9. DATA TABLES & ADMIN CARD WRAPPERS --- */
/* Single Outer Card Container Shell for all Admin Table & Grid List pages */
.container-fluid > .d-flex.flex-column.table-striped,
.container-fluid > .table-striped,
div[wire\:key$="-wrapper"] {
  background: var(--nfc-s-card) !important;
  border-radius: var(--nfc-radius-lg) !important;
  border: 1px solid var(--nfc-line-soft) !important;
  box-shadow: var(--nfc-shadow) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Prevent double nested card styling inside the outer container */
.container-fluid > .d-flex.flex-column.table-striped div[wire\:key$="-wrapper"],
.d-flex.flex-column.table-striped div[wire\:key$="-wrapper"],
div[wire\:key$="-wrapper"] div[wire\:key$="-wrapper"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep individual grid item cards inside .vcard-grid-content styled as cards */
.vcard-grid-content .card.nfc-card {
  background: var(--nfc-s-card) !important;
  border: 1px solid var(--nfc-line-soft) !important;
  border-radius: var(--nfc-radius-lg) !important;
  box-shadow: var(--nfc-shadow-sm) !important;
}

.table,
.livewire-table {
  color: var(--nfc-t1) !important;
  background: var(--nfc-s-card) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Responsive Table Shell Inside Card */
.table-responsive {
  border-radius: var(--nfc-radius-md) !important;
  border: 1px solid var(--nfc-line-soft) !important;
  overflow: hidden !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.table thead th,
.livewire-table thead th {
  background: var(--nfc-s-rec) !important;
  color: var(--nfc-t2) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--nfc-line) !important;
  border-top: none !important;
}

.table tbody td,
.livewire-table tbody td {
  padding: 14px 20px !important;
  border-top: 1px solid var(--nfc-line-soft) !important;
  border-bottom: none !important;
  background: transparent !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
}

.table tbody tr:hover td,
.livewire-table tbody tr:hover td {
  background: var(--nfc-s-elev) !important;
}

/* Header tools inside Livewire Table Card */
.custom-domain-header,
.livewire-tables-tools {
  margin-bottom: 16px !important;
}

/* --- SEARCH INPUT & SEARCH BOX STYLING --- */
.nfc-search-box-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nfc-search-input,
.search-box.dashboard-search-box,
input[type="search"].form-control {
  height: 42px !important;
  background-color: var(--nfc-s-elev) !important;
  color: var(--nfc-t1) !important;
  border: 1px solid var(--nfc-line) !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding-left: 40px !important;
  padding-right: 14px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Dark Mode Search Input Surface */
body.dark-mode .nfc-search-input,
body.dark-mode .search-box.dashboard-search-box,
body.dark-mode input[type="search"].form-control,
[data-theme="dark"] .nfc-search-input,
[data-theme="dark"] .search-box.dashboard-search-box,
[data-theme="dark"] input[type="search"].form-control {
  background-color: var(--nfc-s-rec) !important;
  border-color: var(--nfc-line) !important;
  color: var(--nfc-t1) !important;
}

/* Hover & Focus States */
.nfc-search-input:hover,
.search-box.dashboard-search-box:hover,
input[type="search"].form-control:hover {
  border-color: var(--nfc-line-focus) !important;
  background-color: var(--nfc-s-card) !important;
}

.nfc-search-input:focus,
.search-box.dashboard-search-box:focus,
input[type="search"].form-control:focus {
  background-color: var(--nfc-s-card) !important;
  border-color: var(--nfc-royal) !important;
  box-shadow: 0 0 0 3px var(--nfc-royal-tint) !important;
  outline: none !important;
  color: var(--nfc-t1) !important;
}

/* Placeholder Styling */
.nfc-search-input::placeholder,
.search-box.dashboard-search-box::placeholder,
input[type="search"].form-control::placeholder {
  color: var(--nfc-t3) !important;
  opacity: 0.8;
  font-weight: 400;
}

/* Search Icon Styling */
.nfc-search-icon,
.nfc-search-box-wrapper .material-symbols-outlined,
.nfc-search-box-wrapper i {
  color: var(--nfc-t3) !important;
  transition: color 0.2s ease;
  pointer-events: none;
}

.nfc-search-box-wrapper:focus-within .nfc-search-icon,
.nfc-search-box-wrapper:focus-within .material-symbols-outlined,
.nfc-search-box-wrapper:focus-within i {
  color: var(--nfc-royal) !important;
}

/* RTL Support for Search Input and Icon */
html[lang="ar"] .nfc-search-input,
html[lang="ar"] .search-box.dashboard-search-box,
html[lang="ar"] input[type="search"].form-control,
[dir="rtl"] .nfc-search-input,
[dir="rtl"] .search-box.dashboard-search-box,
[dir="rtl"] input[type="search"].form-control {
  padding-left: 14px !important;
  padding-right: 40px !important;
}

html[lang="ar"] .nfc-search-box-wrapper .position-absolute.start-0,
[dir="rtl"] .nfc-search-box-wrapper .position-absolute.start-0 {
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

/* Hide native webkit search clear cross */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Pagination */
.pagination {
  margin-bottom: 0 !important;
  gap: 4px;
}
.page-item .page-link {
  border-radius: var(--nfc-radius-md) !important;
  background: transparent !important;
  border: 1px solid var(--nfc-line) !important;
  color: var(--nfc-t2) !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.page-item.active .page-link {
  background: var(--nfc-brand) !important;
  color: var(--nfc-brand-fg) !important;
  border-color: var(--nfc-brand) !important;
}

/* --- 10. DASHBOARD WELCOME HERO & METRICS --- */
.nfc-welcome-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--nfc-radius-xl);
  padding: 28px 32px;
  background: linear-gradient(105deg, hsl(224, 65%, 26%), hsl(224, 72%, 46%));
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--nfc-shadow-md);
  margin-bottom: 24px;
}
.nfc-welcome-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, hsl(0 0% 100% / 0.05) 0 1px, transparent 1px 18px),
                    repeating-linear-gradient(-45deg, hsl(0 0% 100% / 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.nfc-welcome-title,
.nfc-welcome-title * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #ffffff !important;
  letter-spacing: -0.4px !important;
  margin: 0 !important;
}
.nfc-welcome-sub,
.nfc-welcome-sub * {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-top: 4px !important;
  max-width: 58ch !important;
}

/* =========================================================
   VCARD CONTEXTUAL NAVIGATION LAYER (WORKSPACE RAIL)
   ========================================================= */
.nfc-vcard-workspace-header {
  border-radius: var(--nfc-radius-lg);
  border: 1px solid var(--nfc-line-soft);
  background: var(--nfc-s-card);
}

.nfc-vcard-context-nav {
  overflow-x: auto;
  scrollbar-width: none;
}
.nfc-vcard-context-nav::-webkit-scrollbar {
  display: none;
}

.nfc-context-nav-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.nfc-context-nav-item {
  flex-shrink: 0;
}

.nfc-context-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nfc-t2);
  text-decoration: none !important;
  border-radius: var(--nfc-radius-md);
  transition: all 0.16s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
}
.nfc-context-nav-link span.material-symbols-outlined {
  font-size: 21px;
  color: var(--nfc-t3);
  transition: color 0.16s ease;
}
.nfc-context-nav-link:hover {
  color: var(--nfc-t1);
  background: var(--nfc-s-rec);
  border-color: var(--nfc-line-soft);
}
.nfc-context-nav-link:hover span.material-symbols-outlined {
  color: var(--nfc-royal);
}
.nfc-context-nav-link.active {
  color: var(--nfc-royal);
  background: hsl(220 84% 54% / 0.09);
  border-color: hsl(220 84% 54% / 0.22);
  font-weight: 700;
}
.nfc-context-nav-link.active span.material-symbols-outlined {
  color: var(--nfc-royal);
}

.nfc-context-dropdown-menu {
  border-radius: var(--nfc-radius-md);
  background: var(--nfc-s-card);
  border: 1px solid var(--nfc-line);
  box-shadow: var(--nfc-shadow-lg);
  padding: 8px;
  min-width: 235px;
  z-index: 1050;
}
.nfc-context-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nfc-t2);
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.nfc-context-dropdown-item:hover {
  background: var(--nfc-s-rec);
  color: var(--nfc-t1);
}
.nfc-context-dropdown-item.active {
  background: hsl(220 84% 54% / 0.10);
  color: var(--nfc-royal);
  font-weight: 700;
}
.nfc-context-dropdown-item span.material-symbols-outlined {
  font-size: 20px;
  color: var(--nfc-t3);
}
.nfc-context-dropdown-item.active span.material-symbols-outlined {
  color: var(--nfc-royal);
}
.nfc-welcome-cta {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--nfc-radius-md);
  background: #ffffff;
  color: hsl(224, 65%, 24%);
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 4px 14px hsl(224 60% 12% / 0.25);
  border: none;
  transition: transform 0.2s ease;
}
.nfc-welcome-cta:hover {
  transform: translateY(-1px);
  color: hsl(224, 72%, 46%);
}

/* Metric Cards */
.nfc-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.nfc-metric-card {
  background: var(--nfc-s-card);
  border-radius: var(--nfc-radius-lg);
  border: 1px solid var(--nfc-line-soft);
  box-shadow: var(--nfc-shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
.nfc-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nfc-shadow-lg);
}
.nfc-metric-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.nfc-metric-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--nfc-t1);
  letter-spacing: -1px;
}
.nfc-metric-lbl {
  font-size: 12.5px;
  color: var(--nfc-t2);
  margin-top: 6px;
  font-weight: 500;
}

/* --- 11. VCARD STUDIO / EDITOR LAYOUT --- */
.nfc-studio-container {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.nfc-studio-subnav {
  width: 250px;
  flex: none;
  position: sticky;
  top: 84px;
  background: var(--nfc-s-card);
  border-radius: var(--nfc-radius-lg);
  border: 1px solid var(--nfc-line-soft);
  box-shadow: var(--nfc-shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.nfc-studio-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--nfc-t3);
  padding: 8px 10px 4px;
}
.nfc-studio-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--nfc-radius-md);
  background: transparent;
  color: var(--nfc-t2);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nfc-studio-nav-item:hover {
  background: var(--nfc-s-elev);
  color: var(--nfc-t1);
}
.nfc-studio-nav-item.active {
  background: var(--nfc-brand);
  color: var(--nfc-brand-fg);
  font-weight: 600;
  box-shadow: var(--nfc-shadow-sm);
}

.nfc-studio-canvas {
  flex: 1;
  min-width: 0;
}

/* Studio Tabs */
.nfc-studio-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--nfc-line);
  margin-bottom: 24px;
}
.nfc-studio-tab-btn {
  padding: 0 4px 13px;
  margin: 0 16px 0 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--nfc-t2);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.nfc-studio-tab-btn.active {
  color: var(--nfc-t1);
  border-bottom-color: var(--nfc-royal);
}

/* --- 12. SLIDE-IN DETAIL DRAWERS --- */
.nfc-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: hsl(224 40% 15% / 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
  animation: nfcFadeIn 0.2s ease;
}
.nfc-drawer {
  position: relative;
  width: 440px;
  max-width: 92vw;
  height: 100%;
  background: var(--nfc-s-card);
  box-shadow: var(--nfc-shadow-lg);
  display: flex;
  flex-direction: column;
  animation: nfcSlideIn 0.25s cubic-bezier(0, 0, 0.2, 1);
}
.nfc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--nfc-line-soft);
}
.nfc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nfc-drawer-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--nfc-line-soft);
  display: flex;
  gap: 12px;
}

/* Modal and Drawer Primitives */
.modal.nfc-modal .modal-content {
  background: var(--nfc-s-card);
  border: 1px solid var(--nfc-line);
  box-shadow: var(--nfc-shadow-lg);
  border-radius: var(--nfc-radius-xl);
}
.modal.nfc-modal .modal-header {
  border-bottom: 1px solid var(--nfc-line-soft);
  padding: 18px 24px;
}
.modal.nfc-modal .modal-footer {
  border-top: 1px solid var(--nfc-line-soft);
  padding: 16px 24px;
}

/* Slide-in Modal Drawer from Right Edge */
.modal.nfc-modal-drawer .modal-dialog {
  position: fixed;
  margin: 0;
  width: 460px;
  max-width: 92vw;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}
.modal.nfc-modal-drawer.show .modal-dialog {
  transform: translateX(0);
}
.modal.nfc-modal-drawer .modal-content {
  height: 100%;
  border-radius: 0 !important;
  border: 0;
  border-left: 1px solid var(--nfc-line) !important;
  display: flex;
  flex-direction: column;
}
html[lang="ar"] .modal.nfc-modal-drawer .modal-dialog,
[dir="rtl"] .modal.nfc-modal-drawer .modal-dialog {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
html[lang="ar"] .modal.nfc-modal-drawer.show .modal-dialog,
[dir="rtl"] .modal.nfc-modal-drawer.show .modal-dialog {
  transform: translateX(0);
}
html[lang="ar"] .modal.nfc-modal-drawer .modal-content,
[dir="rtl"] .modal.nfc-modal-drawer .modal-content {
  border-left: 0 !important;
  border-right: 1px solid var(--nfc-line) !important;
}

@keyframes nfcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nfcSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes nfcSlideInRTL {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* --- 13. SEMANTIC PRIMITIVES & UTILITY CLASSES --- */
.nfc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.nfc-page-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--nfc-t1);
  margin-bottom: 2px;
}
.nfc-page-desc {
  font-size: 13px;
  color: var(--nfc-t3);
  line-height: 1.4;
}
.nfc-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--nfc-t2);
  margin-bottom: 6px;
}
.nfc-stat-mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}
.nfc-tab-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--nfc-s-rec);
  border-radius: var(--nfc-radius-md);
  border: 1px solid var(--nfc-line-soft);
}
.nfc-tab-btn {
  padding: 7px 14px;
  border-radius: var(--nfc-radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nfc-t2);
  text-decoration: none;
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nfc-tab-btn:hover {
  color: var(--nfc-t1);
  background: var(--nfc-s-elev);
}
.nfc-tab-btn.active {
  background: var(--nfc-s-card);
  color: var(--nfc-royal);
  font-weight: 600;
  box-shadow: var(--nfc-shadow-sm);
}

/* Studio Phone Mockup */
/* Studio Phone Simulator (Real iFrame) */
.nfc-phone-wrapper {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.nfc-phone-device {
  width: 320px;
  height: 640px;
  padding: 10px;
  border-radius: 42px;
  background: hsl(224 40% 10%);
  box-shadow: 0 16px 48px hsl(0 0% 0% / 0.4), 0 0 0 1px hsl(224 25% 24%);
  position: relative;
  box-sizing: border-box;
}
.nfc-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #ffffff;
  display: block;
}
.nfc-phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  border-radius: 12px;
  background: #000000;
  z-index: 20;
  pointer-events: none;
}
.nfc-phone-home-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 4px;
  background: hsl(0 0% 0% / 0.4);
  z-index: 20;
  pointer-events: none;
}
.nfc-phone-iframe {
  width: 375px;
  height: 775px;
  transform: scale(0.80);
  transform-origin: top left;
  border: 0;
  background: #ffffff;
}

#phonePreviewPane {
  transition: width 0.25s ease, opacity 0.2s ease;
}
#phonePreviewPane.nfc-preview-hidden {
  display: none !important;
}

/* Schedule Business Hours Row */
.nfc-schedule-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: var(--nfc-radius-md);
  background: var(--nfc-s-card);
  border: 1px solid var(--nfc-line-soft);
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.nfc-schedule-row:hover {
  border-color: var(--nfc-line);
}
.nfc-schedule-day {
  width: 90px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--nfc-t1);
}

/* Social Link Row Item */
.nfc-social-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.nfc-social-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--nfc-radius-md);
  display: grid;
  place-items: center;
  background: var(--nfc-s-rec);
  color: var(--nfc-royal);
}

/* --- 14. DARK MODE THIRD-PARTY PLUGIN OVERRIDES --- */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-theme="dark"] .select2-dropdown {
  background-color: var(--nfc-s-card) !important;
  border-color: var(--nfc-line) !important;
  color: var(--nfc-t1) !important;
  box-shadow: var(--nfc-shadow-lg) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--nfc-s-elev) !important;
  color: var(--nfc-royal) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--nfc-s-card) !important;
  border-color: var(--nfc-line) !important;
  color: var(--nfc-t1) !important;
}
[data-theme="dark"] .daterangepicker {
  background-color: var(--nfc-s-card) !important;
  border-color: var(--nfc-line) !important;
  color: var(--nfc-t1) !important;
  box-shadow: var(--nfc-shadow-lg) !important;
}
[data-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--nfc-s-card) !important;
  border-color: var(--nfc-line) !important;
}
[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
  background-color: var(--nfc-s-hover) !important;
}
[data-theme="dark"] .flatpickr-calendar {
  background: var(--nfc-s-card) !important;
  border-color: var(--nfc-line) !important;
  box-shadow: var(--nfc-shadow-lg) !important;
}
[data-theme="dark"] .flatpickr-day {
  color: var(--nfc-t1) !important;
}
[data-theme="dark"] .flatpickr-day.today {
  border-color: var(--nfc-royal) !important;
}
[data-theme="dark"] .swal2-popup {
  background: var(--nfc-s-card) !important;
  color: var(--nfc-t1) !important;
  border: 1px solid var(--nfc-line) !important;
}

/* --- 15. RTL / ARABIC (FULL BIDIRECTIONAL SUPPORT) --- */
html[lang="ar"],
[dir="rtl"],
body.rtl {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .aside-menu-container,
[dir="rtl"] .aside-menu-container {
  border-right: 0 !important;
  border-left: 1px solid var(--nfc-line) !important;
}

html[lang="ar"] .wrapper,
[dir="rtl"] .wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[lang="ar"] .nfc-drawer,
[dir="rtl"] .nfc-drawer {
  animation: nfcSlideInRTL 0.25s cubic-bezier(0, 0, 0.2, 1) !important;
}

html[lang="ar"] .nfc-drawer-backdrop,
[dir="rtl"] .nfc-drawer-backdrop {
  justify-content: flex-start !important;
}

html[lang="ar"] .material-symbols-outlined.nfc-rtl-flip,
[dir="rtl"] .material-symbols-outlined.nfc-rtl-flip {
  transform: scaleX(-1);
}

html[lang="ar"] .form-check-input,
[dir="rtl"] .form-check-input {
  float: right !important;
  margin-left: 0.5em !important;
  margin-right: -1.5em !important;
}

html[lang="ar"] input[type="tel"],
html[lang="ar"] .nfc-stat-mono,
[dir="rtl"] input[type="tel"],
[dir="rtl"] .nfc-stat-mono {
  direction: ltr !important;
  text-align: left !important;
}

/* --- 16. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1200px) {
  .nfc-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  :root {
    --nfc-sidebar-w: 0px;
  }
  .aside-menu-container {
    transform: translateX(-100%);
    position: fixed !important;
    width: 260px !important;
    z-index: 1040;
  }
  html[lang="ar"] .aside-menu-container,
  [dir="rtl"] .aside-menu-container {
    transform: translateX(100%);
  }
  .aside-menu-container.open {
    transform: translateX(0) !important;
  }
  .wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .content.d-flex,
  main.nfc-main-canvas {
    padding: 16px 12px 32px !important;
  }
  .nfc-phone-wrapper {
    display: none;
  }
}
@media (max-width: 575px) {
  .nfc-metrics-grid {
    grid-template-columns: 1fr;
  }
  .nfc-welcome-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
  }
}

/* --- 15. SKELETON & LAZY LOADING PLACEHOLDERS --- */
.listing-skeleton {
  width: 100%;
}

.listing-skeleton .card {
  background: var(--nfc-s-card) !important;
  border-radius: var(--nfc-radius-lg) !important;
  border: 1px solid var(--nfc-line-soft) !important;
  box-shadow: var(--nfc-shadow) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  height: auto !important;
  min-height: 400px;
}

.listing-skeleton .card-content {
  background: transparent !important;
  padding: 0 !important;
}

.listing-skeleton .pulsate,
.pulsate {
  background: linear-gradient(90deg, var(--nfc-s-rec) 0%, var(--nfc-s-hover) 50%, var(--nfc-s-rec) 100%) !important;
  background-size: 200% 100% !important;
  animation: nfcShimmer 1.6s ease-in-out infinite !important;
  border-radius: var(--nfc-radius-md) !important;
}

@keyframes nfcShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.listing-skeleton .search-box,
.listing-skeleton .date-box,
.listing-skeleton .add-button-box,
.listing-skeleton .add-button-box-filter {
  height: 42px !important;
  border-radius: 10px !important;
  margin: 0 !important;
}

.listing-skeleton .search-box {
  width: 260px !important;
}

.listing-skeleton .add-button-box {
  width: 150px !important;
}

.listing-skeleton .add-button-box-filter {
  width: 42px !important;
}

.listing-skeleton .table {
  height: 44px !important;
  border-radius: var(--nfc-radius-md) !important;
  margin: 20px 0 16px !important;
}

.listing-skeleton .column-box {
  height: 38px !important;
  border-radius: var(--nfc-radius-md) !important;
  margin: 0 !important;
}

/* ==========================================================================
   Section 16: Menu Layout Modes (Vertical vs Horizontal)
   ========================================================================== */
/* --- HORIZONTAL LAYOUT MODE --- */
body.nfc-layout-horizontal #sidebar,
body.nfc-layout-horizontal .aside-menu-container,
body.nfc-layout-horizontal #sidebar.aside-menu-container {
  display: none !important;
}

@media (max-width: 991px) {
  body.nfc-layout-horizontal #sidebar.open,
  body.nfc-layout-horizontal .aside-menu-container.open,
  body.nfc-layout-horizontal #sidebar.aside-menu-container.open {
    display: flex !important;
    position: fixed !important;
    z-index: 99999 !important;
  }
}

body.nfc-layout-horizontal .nfc-attached-shelf-wrapper {
  display: block !important;
}

body.nfc-layout-horizontal .wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.nfc-layout-horizontal .nfc-header-wrapper {
  margin-bottom: 42px !important;
}

/* --- VERTICAL LAYOUT MODE --- */
body.nfc-layout-vertical .nfc-attached-shelf-wrapper {
  display: none !important;
}

body.nfc-layout-vertical .nfc-header-wrapper {
  margin-bottom: 0 !important;
}

body.nfc-layout-vertical .content {
  padding-top: 24px !important;
}

body.nfc-layout-vertical #sidebar,
body.nfc-layout-vertical .aside-menu-container,
body.nfc-layout-vertical #sidebar.aside-menu-container {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1040 !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.nfc-layout-vertical #sidebar.nfc-sidebar-collapsed,
body.nfc-layout-vertical #sidebar.collapsed-menu,
body.nfc-layout-vertical.nfc-sidebar-collapsed #sidebar,
body.nfc-layout-vertical.nfc-sidebar-collapsed .aside-menu-container,
body.nfc-layout-vertical.nfc-has-collapsed-sidebar #sidebar,
body.nfc-layout-vertical.nfc-has-collapsed-sidebar .aside-menu-container {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

@media (min-width: 992px) {
  body.nfc-layout-vertical .wrapper,
  body.nfc-layout-vertical .nfc-app-shell .wrapper {
    padding-left: 260px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    transition: padding-left 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding-right 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  body.nfc-layout-vertical.nfc-sidebar-collapsed .wrapper,
  body.nfc-layout-vertical.nfc-has-collapsed-sidebar .wrapper,
  body.nfc-layout-vertical .nfc-sidebar-collapsed ~ .wrapper,
  body.nfc-layout-vertical .nfc-sidebar-collapsed + .wrapper,
  body.nfc-layout-vertical #sidebar.nfc-sidebar-collapsed ~ .wrapper,
  body.nfc-layout-vertical.nfc-sidebar-collapsed .nfc-app-shell .wrapper,
  body.nfc-layout-vertical.nfc-has-collapsed-sidebar .nfc-app-shell .wrapper {
    padding-left: 72px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[dir="rtl"] body.nfc-layout-vertical .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical .nfc-app-shell .wrapper {
    padding-left: 0 !important;
    padding-right: 260px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[dir="rtl"] body.nfc-layout-vertical.nfc-sidebar-collapsed .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical.nfc-has-collapsed-sidebar .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical .nfc-sidebar-collapsed ~ .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical .nfc-sidebar-collapsed + .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical #sidebar.nfc-sidebar-collapsed ~ .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical.nfc-sidebar-collapsed .nfc-app-shell .wrapper,
  html[dir="rtl"] body.nfc-layout-vertical.nfc-has-collapsed-sidebar .nfc-app-shell .wrapper {
    padding-left: 0 !important;
    padding-right: 72px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[dir="rtl"] body.nfc-layout-vertical #sidebar {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid var(--nfc-line-soft) !important;
  }
}

@media (max-width: 991px) {
  body.nfc-layout-vertical #sidebar,
  body.nfc-layout-vertical .aside-menu-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  body.nfc-layout-vertical #sidebar.open,
  body.nfc-layout-vertical .aside-menu-container.open {
    transform: translateX(0);
  }

  body.nfc-layout-vertical .wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}