/* =========================================================
   MEGA SAAS DASHBOARD — SINGLE, CLEAN CSS SYSTEM
   Desktop: open/collapsed sidebar + stable topbar
   Mobile : hamburger + slide-in sidebar + clean topbar
   ========================================================= */

:root {
  --sidebar-open: 15rem;
  --sidebar-collapsed: 4.5rem;
  --mobile-sidebar: 14rem;
  --header-height: 4rem;
  --bg: #08080d;
  --panel: #2b2b35;
  --border: #41414f;
  --text: #f3f4f6;
  --muted: #9ca3af;
  --primary: #6366F1;
  --secondary: #EC4899;
  --danger: #dc2626;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif;
}

body {
  overflow-x: hidden;
}

/* =========================
   SHARED ELEMENTS
   ========================= */
.bg-primary {
  background: var(--primary) !important;
}

button,
a,
input {
  font: inherit;
}

/* =========================
   SIDEBAR
   ========================= */
#sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-open) !important;
  max-width: var(--sidebar-open) !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #2b2b35 !important;
  color: #fff !important;
  border-right: 1px solid var(--border) !important;
  transform: translateX(0) !important;
  transition: width .22s ease, transform .22s ease !important;
  z-index: 90 !important;
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed) !important;
  max-width: var(--sidebar-collapsed) !important;
}

#sidebar.open {
  transform: translateX(0) !important;
}

/* Desktop: collapsed sidebar does NOT contain a logo.
   The only small logo is the topbar logo. */
@media (min-width: 768px) {
  #sidebar.collapsed .sidebar-brand-logo {
    display: none !important;
  }
}

/* Mobile sidebar */
@media (max-width: 767px) {
  #sidebar {
    top: var(--header-height) !important;
    width: var(--mobile-sidebar) !important;
    max-width: var(--mobile-sidebar) !important;
    height: calc(100dvh - var(--header-height)) !important;
    max-height: calc(100dvh - var(--header-height)) !important;
    transform: translateX(-100%) !important;
  }

  #sidebar.open {
    transform: translateX(0) !important;
    border-right: 1px solid #2a2a2a !important;
    box-shadow: 2px 0 0 rgba(255,255,255,.025) !important;
  }
}

/* =========================
   SIDEBAR BRAND LOGO
   ========================= */
.sidebar-brand-logo {
  flex: 0 0 4.5rem !important;
  width: 100% !important;
  height: 4.5rem !important;
  min-height: 4.5rem !important;
  padding: .5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  background: #2b2b35 !important;
}

.sidebar-brand-logo img {
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.sidebar-logo-full {
  width: 8rem !important;
  height: 3.2rem !important;
}

.sidebar-logo-small {
  width: 2.8rem !important;
  height: 2.8rem !important;
}

#sidebar .sidebar-logo-full {
  display: block !important;
}

#sidebar .sidebar-logo-small {
  display: none !important;
}

@media (min-width: 768px) {
  #sidebar.collapsed .sidebar-logo-full,
  #sidebar.collapsed .sidebar-logo-small {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Mobile has one logo only: inside the User Panel row. */
  #sidebar .sidebar-brand-logo {
    display: none !important;
  }
}

/* =========================
   SIDEBAR USER / MOBILE LOGO ROW
   ========================= */
#sidebar > .sidebar-identity {
  flex: 0 0 4rem !important;
  min-height: 4rem !important;
  height: 4rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
  background: #2b2b35 !important;
  border-bottom: 1px solid var(--border) !important;
}

.sidebar-identity-badge {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: .55rem;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.sidebar-identity-text {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-sidebar-logo {
  display: none;
  width: 8.5rem;
  height: 3rem;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  #sidebar.collapsed > .sidebar-identity {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    justify-content: center !important;
  }

  #sidebar.collapsed .sidebar-identity-text {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #sidebar > .sidebar-identity {
    flex: 0 0 4.25rem !important;
    min-height: 4.25rem !important;
    height: 4.25rem !important;
    padding: 0 .75rem !important;
    justify-content: center !important;
  }

  #sidebar > .sidebar-identity .sidebar-identity-badge,
  #sidebar > .sidebar-identity .sidebar-identity-text {
    display: none !important;
  }

  #sidebar > .sidebar-identity .mobile-sidebar-logo {
    display: block !important;
  }
}

/* =========================
   NAVIGATION
   ========================= */
.sidebar-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

.nav-item {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  color: #fff !important;
}

.sidebar .nav-item:hover,
.sidebar .submenu a:hover {
  background: #353541 !important;
  color: #fff !important;
}

.sidebar .nav-item.bg-primary,
.sidebar .nav-item[class*="bg-primary"] {
  background: var(--primary) !important;
  color: #fff !important;
}

.sidebar.collapsed .label,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .submenu {
  display: none !important;
}

.sidebar.collapsed .sidebar-nav {
  padding-left: .35rem !important;
  padding-right: .35rem !important;
}

.sidebar.collapsed .sidebar-nav > .nav-item {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.sidebar.collapsed .sidebar-nav > .nav-item > span {
  width: auto !important;
  justify-content: center !important;
}

.sidebar.collapsed .sidebar-nav > .nav-item > span > i {
  margin: 0 !important;
}

/* Hide primary-menu arrows while the sidebar is collapsed.
   Arrows are shown only when the sidebar is expanded. */
.sidebar.collapsed .sidebar-nav > .nav-menu-toggle > .chevron,
.sidebar.collapsed .sidebar-nav > .nav-item.nav-menu-toggle > .chevron {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.sidebar.collapsed .sidebar-nav > .nav-item {
  position: relative !important;
}

.submenu {
  max-height: 0;
  overflow: hidden !important;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
}

.submenu.open {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

.sidebar.collapsed .submenu {
  display: none !important;
}

/* =========================
   LOGOUT
   ========================= */
.sidebar > .sidebar-footer {
  flex: 0 0 auto !important;
  height: 3.25rem !important;
  min-height: 3.25rem !important;
  padding: .45rem .65rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  background: #2b2b35 !important;
  border-top: 1px solid var(--border) !important;
}

.sidebar [data-title="Logout"] {
  background: rgba(127,29,29,.42) !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  border-radius: 7px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 .75rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.sidebar [data-title="Logout"] i,
.sidebar [data-title="Logout"] span {
  color: #fff !important;
}

@media (min-width: 768px) {
  #sidebar > .sidebar-footer {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    padding: .45rem .65rem !important;
  }

  #sidebar > .sidebar-footer .nav-item {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #sidebar.collapsed > .sidebar-footer {
    padding-left: .35rem !important;
    padding-right: .35rem !important;
  }

  #sidebar.collapsed > .sidebar-footer .nav-item {
    justify-content: center !important;
    padding-left: .4rem !important;
    padding-right: .4rem !important;
  }
}

@media (max-width: 767px) {
  #sidebar > .sidebar-footer {
    min-height: 3.75rem !important;
    padding: .55rem .75rem !important;
  }

  #sidebar .sidebar-footer .nav-item {
    min-height: 38px !important;
    height: 38px !important;
  }
}

/* =========================
   DESKTOP COLLAPSE BUTTON
   ========================= */
.sidebar-toggle {
  position: fixed !important;
  top: 1.1rem !important;
  left: var(--sidebar-open) !important;
  transform: translateX(-50%) !important;
  width: 1.9rem !important;
  height: 1.9rem !important;
  min-width: 1.9rem !important;
  min-height: 1.9rem !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .1rem !important;
  box-sizing: border-box !important;
  border: 1px solid #333 !important;
  border-radius: 50% !important;
  background: #2b2b35 !important;
  color: #fff !important;
  cursor: pointer !important;
  z-index: 120 !important;
  transition: left .22s ease, background .2s ease !important;
}

.sidebar-toggle:hover {
  background: #353541 !important;
}

.sidebar-toggle i {
  font-size: .72rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .sidebar-toggle {
    display: flex !important;
  }

  #sidebar.collapsed ~ .sidebar-toggle {
    left: var(--sidebar-collapsed) !important;
  }
}

/* =========================
   MOBILE HAMBURGER / CROSS
   ========================= */
.mobile-toggle {
  position: fixed !important;
  top: .75rem !important;
  left: .75rem !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: .65rem !important;
  background: var(--primary) !important;
  color: #fff !important;
  cursor: pointer !important;
  z-index: 1200 !important;
}

.mobile-toggle.menu-open {
  background: var(--danger) !important;
}

.mobile-toggle i {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

@media (min-width: 768px) {
  .mobile-toggle {
    display: none !important;
  }
}

/* =========================
   OVERLAY
   ========================= */
.overlay {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  background: rgba(0,0,0,.58) !important;
  z-index: 80 !important;
}

.overlay.active {
  display: block !important;
}

@media (min-width: 768px) {
  .overlay {
    display: none !important;
  }
}

/* =========================
   TOPBAR
   ========================= */
.top-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: var(--sidebar-open) !important;
  width: auto !important;
  height: var(--header-height) !important;
  padding: 0 .9rem 0 .75rem !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 25%) minmax(260px, 1fr) 2.75rem auto !important;
  align-items: center !important;
  column-gap: .75rem !important;
  background: #2b2b35 !important;
  border-bottom: 1px solid #151515 !important;
  z-index: 70 !important;
  overflow: visible !important;
}

.topbar-small-logo {
  display: none !important;
}

.topbar-small-logo img {
  width: 2.7rem !important;
  height: 2.7rem !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

.desktop-greeting {
  grid-column: 1 !important;
  min-width: 0 !important;
  padding-left: .35rem !important;
  overflow: hidden !important;
}

.desktop-greeting-title {
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.desktop-greeting-message {
  margin-top: .2rem !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.search-wrap {
  grid-column: 2 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.top-search {
  display: block !important;
  width: 100% !important;
  height: 2.5rem !important;
  min-width: 0 !important;
  padding: 0 .9rem 0 2.75rem !important;
  box-sizing: border-box !important;
  background: #2b2b35 !important;
  border: 1px solid #333 !important;
  border-radius: .75rem !important;
  color: #fff !important;
  outline: none !important;
}

.top-search::placeholder {
  color: #9ca3af !important;
}

.top-search:focus {
  border-color: var(--primary) !important;
}

.search-wrap > .fa-magnifying-glass {
  position: absolute !important;
  left: .9rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9ca3af !important;
  font-size: 1rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* =========================
   NOTIFICATION
   ========================= */
.header-icon-btn {
  grid-column: 3 !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  border: 1px solid #333 !important;
  border-radius: .7rem !important;
  background: #2b2b35 !important;
  color: #fff !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.header-icon-btn .fa-bell {
  display: block !important;
  line-height: 1 !important;
  transform-origin: 50% 0% !important;
  animation: notificationBellRing 2s ease-in-out infinite;
}

.notification-dot {
  position: absolute !important;
  top: .3rem !important;
  right: .3rem !important;
  width: .4rem !important;
  height: .4rem !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  z-index: 3 !important;
}

@keyframes notificationBellRing {
  0%, 65%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(8deg); }
  71% { transform: rotate(-8deg); }
  74% { transform: rotate(6deg); }
  77% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
  83% { transform: rotate(-3deg); }
  86% { transform: rotate(0deg); }
}

/* =========================
   PROFILE
   ========================= */
.profile-wrap {
  grid-column: 4 !important;
  position: relative !important;
  min-width: max-content !important;
  justify-self: end !important;
  z-index: 100 !important;
}

.profile-btn {
  height: 2.75rem !important;
  min-width: 10.25rem !important;
  padding: 0 .65rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  box-sizing: border-box !important;
  border: 1px solid #222 !important;
  border-radius: .7rem !important;
  background: #2b2b35 !important;
  color: #fff !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.profile-avatar {
  width: 2rem !important;
  height: 2rem !important;
  flex: 0 0 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
}

.profile-name {
  font-size: .875rem !important;
  font-weight: 500 !important;
}

.profile-menu {
  position: absolute !important;
  top: calc(100% + .6rem) !important;
  right: 0 !important;
  width: 11rem !important;
  min-width: 11rem !important;
  display: none !important;
  padding: .35rem !important;
  box-sizing: border-box !important;
  background: #2b2b35 !important;
  border: 1px solid #333 !important;
  border-radius: .7rem !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.75) !important;
  z-index: 1000 !important;
}

.profile-menu.open {
  display: block !important;
}

.profile-menu a {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .6rem .7rem !important;
  color: #fff !important;
  background: transparent !important;
  font-size: .875rem !important;
  border-radius: .45rem !important;
  text-decoration: none !important;
}

.profile-menu a:hover {
  background: #353541 !important;
}

/* =========================
   DESKTOP TOPBAR — COLLAPSED SIDEBAR
   ========================= */
@media (min-width: 768px) {
  .top-header.sidebar-collapsed {
    left: var(--sidebar-collapsed) !important;
    grid-template-columns: 3rem minmax(180px, 24%) minmax(240px, 1fr) 2.75rem auto !important;
    column-gap: .7rem !important;
    padding-left: .55rem !important;
    padding-right: .9rem !important;
  }

  .top-header.sidebar-collapsed .topbar-small-logo {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-header.sidebar-collapsed .desktop-greeting {
    grid-column: 2 !important;
  }

  .top-header.sidebar-collapsed .search-wrap {
    grid-column: 3 !important;
  }

  .top-header.sidebar-collapsed .header-icon-btn {
    grid-column: 4 !important;
  }

  .top-header.sidebar-collapsed .profile-wrap {
    grid-column: 5 !important;
  }
}

/* =========================
   MAIN AREA
   ========================= */
.main-wrapper {
  margin-left: 0 !important;
  min-height: 100vh !important;
  color: #fff !important;
  transition: margin-left .22s ease !important;
}

@media (min-width: 768px) {
  .main-wrapper {
    margin-left: var(--sidebar-open) !important;
  }

  #sidebar.collapsed ~ .main-wrapper {
    margin-left: var(--sidebar-collapsed) !important;
  }
}

.main-wrapper main {
  padding-top: calc(var(--header-height) + 1rem) !important;
}

.main-wrapper .bg-white {
  background: #2b2b35 !important;
  border: 1px solid var(--border) !important;
}

.main-wrapper .text-gray-500,
.main-wrapper .text-gray-600,
.main-wrapper .text-gray-700,
.main-wrapper .text-gray-800 {
  color: #fff !important;
}

.main-wrapper .bg-gray-50,
.main-wrapper .bg-gray-100 {
  background: #353541 !important;
}

/* =========================
   MOBILE TOPBAR
   ========================= */
@media (max-width: 767px) {
  .top-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--header-height) !important;
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    padding: 0 .6rem 0 4.15rem !important;
  }

  .topbar-small-logo,
  .desktop-greeting {
    display: none !important;
  }

  .search-wrap {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .top-search {
    width: 100% !important;
    height: 2.5rem !important;
    padding: 0 .65rem 0 2.45rem !important;
    font-size: .82rem !important;
    border-radius: .65rem !important;
  }

  .search-wrap > .fa-magnifying-glass {
    left: .75rem !important;
  }

  .header-icon-btn {
    order: 2 !important;
    grid-column: auto !important;
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: .65rem !important;
  }

  .header-icon-btn .fa-bell {
    font-size: 1rem !important;
  }

  .profile-wrap {
    order: 3 !important;
    grid-column: auto !important;
    flex: 0 0 auto !important;
    min-width: 2.5rem !important;
  }

  .profile-btn {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .profile-avatar {
    width: 2rem !important;
    height: 2rem !important;
    flex: 0 0 2rem !important;
  }

  .profile-name,
  .profile-btn > .fa-chevron-down {
    display: none !important;
  }

  .profile-menu {
    top: calc(100% + .55rem) !important;
    right: 0 !important;
  }

  .notification-dot {
    top: .25rem !important;
    right: .25rem !important;
    width: .38rem !important;
    height: .38rem !important;
  }

  .main-wrapper main {
    padding-top: calc(var(--header-height) + 1rem) !important;
  }
}

/* =========================
   COLLAPSED SIDEBAR TOOLTIP
   ========================= */
.sidebar.collapsed .nav-item[data-title]::after {
  content: attr(data-title);
  position: fixed;
  left: calc(var(--sidebar-collapsed) + .7rem);
  top: var(--tooltip-y);
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 9px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 7px 20px rgba(0,0,0,.28);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3000;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.sidebar.collapsed .nav-item[data-title]:hover::after,
.sidebar.collapsed .nav-item[data-title]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Standalone authentication pages */
.login-page{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:#000;
    color:#fff;
}
.login-box{
    width:100%;
    max-width:26rem;
    background:#2b2b35;
    border:1px solid #222;
    border-radius:1rem;
    padding:1.5rem;
    box-sizing:border-box;
}
.login-header{
    margin-bottom:1.5rem;
}
.login-header h1{
    margin:0 0 .35rem;
    font-size:1.35rem;
    font-weight:600;
}
.login-header p{
    margin:0;
    color:#9ca3af;
    font-size:.875rem;
}
.login-error{
    margin-bottom:1rem;
    padding:.75rem;
    border:1px solid #7f1d1d;
    border-radius:.5rem;
    color:#fca5a5;
    background:#120505;
    font-size:.875rem;
}
.login-field{
    margin-bottom:1rem;
}
.login-field label{
    display:block;
    margin-bottom:.4rem;
    color:#d1d5db;
    font-size:.875rem;
}
.login-field input{
    width:100%;
    box-sizing:border-box;
    background:#2b2b35;
    color:#fff;
    border:1px solid #374151;
    border-radius:.5rem;
    padding:.65rem .75rem;
    outline:none;
}
.login-field input:focus{
    border-color:var(--primary);
}
.login-button{
    width:100%;
    border:0;
    border-radius:.5rem;
    padding:.7rem 1rem;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    cursor:pointer;
}
.login-button:hover{
    opacity:.92;
}


/* =========================================================
   FORM CONTROLS — PLACEHOLDERS / PASSWORD VISIBILITY / BUTTON ICONS
   ========================================================= */
.login-field input::placeholder,
.top-search::placeholder {
    color:#6b7280;
    opacity:1;
}
/* Password visibility — the eye stays INSIDE the password field. */
.password-input-wrap{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}
.password-input-wrap > input{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-left:1rem !important;
    padding-right:3.25rem !important;
}
.password-input-wrap > .password-toggle{
    position:absolute !important;
    top:50% !important;
    right:.55rem !important;
    left:auto !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:2rem !important;
    height:2rem !important;
    min-width:2rem !important;
    min-height:2rem !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:.4rem !important;
    background:transparent !important;
    color:#9ca3af !important;
    cursor:pointer !important;
    z-index:3 !important;
    line-height:1 !important;
    box-shadow:none !important;
}
.password-input-wrap > .password-toggle i{
    pointer-events:none;
    line-height:1;
}
.password-input-wrap > .password-toggle:hover{
    color:#fff !important;
    background:#41414f !important;
}
.password-input-wrap > .password-toggle:focus-visible{
    outline:2px solid var(--primary) !important;
    outline-offset:1px;
}
.login-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
}
.login-button i{
    font-size:.9rem;
}


/* =========================================================
   SUPERADMIN — CREATE ADMIN FORM
   ========================================================= */
.main-wrapper main.admin-create-page{padding-top:calc(var(--header-height) + 1rem) !important}
.admin-create-page{padding:.75rem 1.25rem 1.25rem;max-width:1100px;margin:0 auto}
.form-card{width:100%;background:#2b2b35;border:1px solid #222;border-radius:1rem;padding:1.5rem;box-sizing:border-box}
.form-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.form-card-header h1{margin:0;color:#fff;font-size:1.35rem;line-height:1.25}
.form-card-header p{margin:.35rem 0 0;color:#9ca3af;font-size:.85rem}
.form-card-icon{width:2.5rem;height:2.5rem;flex:0 0 2.5rem;display:grid;place-items:center;border:1px solid #222;border-radius:.7rem;color:var(--primary);background:#353541}
.form-alert{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border-radius:.6rem;margin-bottom:1rem;font-size:.85rem;line-height:1.5;opacity:1;max-height:20rem;overflow:hidden;transition:opacity .45s ease, max-height .45s ease, margin .45s ease, padding .45s ease}
.form-alert.is-auto-hidden{opacity:0;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}
.form-alert-success{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:#86efac}
.form-alert-error{border:1px solid rgba(220,38,38,.35);background:rgba(220,38,38,.08);color:#fca5a5}
.sa-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.form-field{min-width:0}
.form-field label{display:block;margin-bottom:.45rem;color:#e5e7eb;font-size:.85rem;font-weight:600}
.form-field label span{color:#ef4444}
.form-field > input,.input-with-icon,.form-field .password-input-wrap{width:100%;box-sizing:border-box}
.form-field input{min-height:2.8rem;border:1px solid #2a2a2a;border-radius:.6rem;background:#2b2b35;color:#fff;font-size:.9rem;outline:none;box-sizing:border-box}
.form-field > input{width:100%;padding:.7rem .85rem}
.input-with-icon{position:relative}
.input-with-icon > i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;z-index:1}
.input-with-icon > input{width:100%;padding:.7rem .85rem .7rem 2.55rem}
.form-field input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.form-field input[readonly]{color:#9ca3af;cursor:not-allowed;background:#2b2b35}
.form-field input::placeholder{color:#6b7280;opacity:1}
.form-field small{display:block;margin-top:.35rem;color:#6b7280;font-size:.72rem}
.form-field .password-input-wrap > input{padding-left:1rem !important;padding-right:3.25rem !important}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #1d1d1d}
.primary-action-button,.secondary-action-button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border-radius:.6rem;font-size:.85rem;font-weight:600;text-decoration:none;box-sizing:border-box;cursor:pointer}
.primary-action-button{border:1px solid transparent;background:linear-gradient(var(--primary),var(--primary)) padding-box,linear-gradient(135deg,var(--primary),var(--secondary)) border-box;color:#fff}
.primary-action-button:hover{opacity:.92}
.secondary-action-button{border:1px solid #2a2a2a;background:#353541;color:#d1d5db}
.secondary-action-button:hover{background:#41414f;color:#fff}
@media (max-width:767px){.main-wrapper main.admin-create-page{padding-top:calc(var(--header-height) + 1rem) !important}.admin-create-page{padding:.75rem}.form-card{padding:1rem;border-radius:.8rem}.form-card-header h1{font-size:1.15rem}.sa-form-grid{grid-template-columns:1fr}.form-actions > *{width:100%}}

/* Admin management */
.admin-edit-page{padding:.75rem 1.25rem 1.25rem;max-width:1100px;margin:0 auto}
.form-field-full{grid-column:1/-1}
.admin-table-wrap{width:100%;overflow-x:auto;border:1px solid #222;border-radius:.8rem}
.admin-table{width:100%;border-collapse:collapse;min-width:900px}
.admin-table th,.admin-table td{padding:.8rem .75rem;text-align:left;border-bottom:1px solid #222;color:#fff;font-size:.82rem;vertical-align:middle}
.admin-table thead{background:#353541}.admin-table th{color:#9ca3af;font-weight:600;background:transparent}
.admin-created-at{display:inline-block;white-space:nowrap;color:#d1d5db;font-size:.78rem}
.admin-table tr:last-child td{border-bottom:0}
.admin-status{display:inline-flex;align-items:center;padding:.25rem .55rem;border-radius:999px;font-size:.72rem;border:1px solid #333}
.admin-status-active{color:#22c55e;border-color:rgba(34,197,94,.42)}.admin-status-inactive{color:#f87171;border-color:rgba(239,68,68,.42)}.admin-status-blocked{color:#ef4444;border-color:rgba(239,68,68,.38)}

.admin-status-form{display:inline-flex;margin:0;padding:0}
.admin-status-button{font:inherit;cursor:pointer;background:transparent}
.admin-status-button:hover{filter:brightness(1.15);transform:translateY(-1px)}
.admin-status-button:focus-visible{outline:2px solid rgba(34,197,94,.45);outline-offset:2px}.admin-status-active:hover{color:#4ade80;border-color:rgba(34,197,94,.7);background:rgba(34,197,94,.06)}
.small-action-button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .65rem;border:1px solid #222;border-radius:.55rem;color:#fff;text-decoration:none;background:#353541}
.small-action-button:hover{border-color:var(--primary);color:var(--primary)}
.admin-edit-page select{width:100%;background:transparent;color:#fff;border:0;outline:0;font:inherit;min-width:0}
.admin-edit-page select option{background:#2b2b35;color:#fff}
@media (max-width:767px){.admin-edit-page{padding:.75rem}.form-field-full{grid-column:auto}.admin-table{min-width:900px}}

/* Admin edit form */
.admin-selector-form{margin-bottom:1rem}
.form-field select{width:100%;min-height:2.8rem;border:1px solid #2a2a2a;border-radius:.6rem;background:#2b2b35;color:#fff;font-size:.9rem;outline:none;box-sizing:border-box;appearance:auto}
.input-with-icon > select{padding:.7rem .85rem .7rem 2.55rem}
.form-field select:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.admin-edit-page .form-card-header{margin-bottom:1.25rem}


/* =========================================================
   SUPERADMIN — ADMINS TABLE
   ========================================================= */
.admin-list-page{padding-top:.75rem !important}
.admin-table-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.admin-delete-form{display:inline-flex;margin:0;padding:0}
.small-action-button{font-family:inherit;cursor:pointer}
.small-action-button i{font-size:.78rem}
.small-action-danger:hover{border-color:#dc2626;color:#f87171}
@media (max-width:767px){
    .admin-list-page{padding:.75rem !important}
    .admin-table-actions{flex-wrap:nowrap}
}


/* Admins / Clients table — colored icon actions */
.admin-direct-actions{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.admin-delete-form{display:inline-flex;margin:0;padding:0}
.admin-icon-action{width:2.15rem;height:2.15rem;display:grid;place-items:center;padding:0;border:1px solid #333;border-radius:.55rem;background:#353541;color:#d1d5db;text-decoration:none;cursor:pointer;font:inherit;box-sizing:border-box;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}
.admin-icon-action i{font-size:.9rem;line-height:1}
.admin-edit-action{color:#fbbf24;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.09)}
.admin-edit-action:hover,.admin-edit-action:focus-visible{border-color:#fbbf24;color:#fcd34d;background:rgba(251,191,36,.18);transform:translateY(-1px)}
.admin-delete-action{color:#f87171;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.09)}
.admin-delete-action:hover,.admin-delete-action:focus-visible{border-color:#ef4444;color:#fca5a5;background:rgba(239,68,68,.18);transform:translateY(-1px)}
.admin-icon-action:focus-visible{outline:2px solid rgba(34,197,94,.45);outline-offset:2px}
@media (max-width:767px){.admin-direct-actions{gap:.35rem}.admin-icon-action{width:2rem;height:2rem}}


/* Superadmin profile */
.admin-profile-page{padding-top:.75rem !important;max-width:1100px;margin:0 auto}
.profile-upload-row{display:flex;align-items:center;gap:1rem}
.profile-preview{width:4.25rem;height:4.25rem;border:1px solid #222;border-radius:50%;overflow:hidden;background:#353541;display:grid;place-items:center;flex:0 0 auto}
.profile-preview img{width:100%;height:100%;object-fit:cover;display:block}
.profile-upload-input{flex:1;min-width:0}
.profile-upload-input .input-with-icon input[type=file]{padding:.58rem .7rem}
.profile-upload-input small{display:block;margin-top:.4rem}
.profile-avatar{width:2rem;height:2rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#41414f;flex:0 0 auto}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.admin-profile-page{padding:.75rem !important}.profile-upload-row{align-items:flex-start;flex-direction:column}.profile-upload-input{width:100%}}

/* Profile image preview: fixed small box regardless of source dimensions. */
.profile-preview{width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;max-width:72px!important;max-height:72px!important;overflow:hidden!important;border-radius:50%!important;flex:0 0 72px!important}
.profile-preview img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center!important}
.profile-avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;overflow:hidden!important;border-radius:50%!important}
.profile-avatar img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;object-fit:cover!important;object-position:center!important}


/* FINAL profile upload preview hard-size fix */
.profile-upload-row .profile-preview-box {
  width:72px !important; height:72px !important;
  min-width:72px !important; min-height:72px !important;
  max-width:72px !important; max-height:72px !important;
  flex:0 0 72px !important; overflow:hidden !important;
  border-radius:50% !important; box-sizing:border-box !important;
}
.profile-upload-row .profile-preview-box img {
  display:block !important; width:72px !important; height:72px !important;
  min-width:72px !important; min-height:72px !important;
  max-width:72px !important; max-height:72px !important;
  object-fit:cover !important; object-position:center !important;
  border-radius:50% !important;
}

/* FINAL PROFILE DROPDOWN AVATAR FIT */
.profile-btn .profile-avatar {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-width: 2.15rem !important;
  min-height: 2.15rem !important;
  max-width: 2.15rem !important;
  max-height: 2.15rem !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  display: block !important;
  position: relative !important;
  flex: 0 0 2.15rem !important;
  background: #41414f !important;
  line-height: 0 !important;
}
.profile-btn .profile-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.55) !important;
  transform-origin: center center !important;
}

@media (max-width: 767px) {
  .profile-btn .profile-avatar {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    min-height: 2.15rem !important;
    flex-basis: 2.15rem !important;
  }
}

/* TOPBAR PROFILE AVATAR — FULL CIRCLE COVER */
.top-header .profile-btn .profile-avatar {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  flex: 0 0 2.25rem !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #353541 !important;
  line-height: 0 !important;
  isolation: isolate !important;
}

.top-header .profile-btn .profile-avatar img {
  position: absolute !important;
  inset: -1px !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;
  min-width: calc(100% + 2px) !important;
  min-height: calc(100% + 2px) !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.85) !important;
  transform-origin: center center !important;
}

.top-header .profile-btn .profile-avatar .profile-initial {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
}


/* =========================================================
   ADMINS PAGE — SEARCH + FILTER
   ========================================================= */
.admin-toolbar{
    display:flex;
    align-items:center;
    gap:.75rem;
    width:100%;
    margin:0 0 1rem;
}
.admin-toolbar .admin-search-wrap{margin:0;flex:1;min-width:0}
.admin-filter-wrap{
    position:relative;
    width:10.5rem;
    flex:0 0 10.5rem;
}
.admin-filter-wrap > .fa-filter{
    position:absolute;
    left:.85rem;
    top:50%;
    transform:translateY(-50%);
    color:#9ca3af;
    font-size:.82rem;
    pointer-events:none;
    z-index:1;
}
.admin-filter-select{
    width:100%;
    height:2.7rem;
    padding:.65rem .8rem .65rem 2.25rem;
    box-sizing:border-box;
    border:1px solid #2a2a2a;
    border-radius:.65rem;
    background:#2b2b35;
    color:#fff;
    font:inherit;
    font-size:.85rem;
    outline:none;
    cursor:pointer;
}
.admin-filter-select:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 2px rgba(59,130,246,.12);
}
/* =========================================================
   ADMINS PAGE — TABLE SEARCH
   ========================================================= */
.admin-search-wrap{
    position:relative;
    width:100%;
    margin:0 0 1rem;
}
.admin-search-wrap > .fa-magnifying-glass{
    position:absolute;
    left:.9rem;
    top:50%;
    transform:translateY(-50%);
    color:#9ca3af;
    font-size:.9rem;
    pointer-events:none;
    z-index:1;
}
.admin-search-input{
    width:100%;
    height:2.7rem;
    padding:.65rem .9rem .65rem 2.55rem;
    box-sizing:border-box;
    border:1px solid #2a2a2a;
    border-radius:.65rem;
    background:#2b2b35;
    color:#fff;
    font:inherit;
    font-size:.85rem;
    outline:none;
}
.admin-search-input::placeholder{color:#6b7280;opacity:1}
.admin-search-input:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 2px rgba(59,130,246,.12);
}
.admin-table tbody tr.admin-search-hidden{display:none}
.admin-search-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    min-height:4rem;
    padding:1rem;
    color:#9ca3af;
    font-size:.82rem;
    text-align:center;
    border:1px solid #222;
    border-top:0;
    border-radius:0 0 .8rem .8rem;
    background:#2b2b35;
}
.admin-search-empty[hidden]{display:none}
@media (max-width:767px){
    .admin-toolbar{align-items:stretch;flex-direction:column;gap:.6rem;margin-bottom:.75rem}
    .admin-search-wrap{margin-bottom:0}
    .admin-search-input,.admin-filter-select{height:2.6rem}
    .admin-filter-wrap{width:100%;flex-basis:auto}
}


/* =========================================================
   CUSTOM DELETE CONFIRMATION MODAL
   ========================================================= */
.confirm-modal[hidden]{display:none !important}
.confirm-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1rem}
.confirm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.confirm-modal-dialog{position:relative;z-index:1;width:min(100%,30rem);overflow:hidden;border:1px solid #2a2a2a;border-radius:1rem;background:#2b2b35;box-shadow:0 24px 80px rgba(0,0,0,.65);animation:confirmModalIn .18s ease-out}
.confirm-modal-header{padding:1.35rem 1.35rem .55rem;text-align:center}
.confirm-modal-header h2{margin:0;color:#fff;font-size:1.45rem;font-weight:700}
.confirm-modal-body{padding:.35rem 1.35rem 1.35rem;text-align:center}
.confirm-modal-body p{margin:0;color:#aeb6c5;font-size:.95rem;line-height:1.55}
.confirm-modal-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #252525}
.confirm-modal-button{min-height:3.15rem;border:0;border-right:1px solid #252525;background:#2b2b35;color:#fff;font:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .15s ease,color .15s ease}
.confirm-modal-button:last-child{border-right:0}
.confirm-modal-cancel:hover,.confirm-modal-cancel:focus-visible{background:#41414f;color:#d1d5db}
.confirm-modal-delete{color:#f87171}
.confirm-modal-delete:hover,.confirm-modal-delete:focus-visible{background:rgba(220,38,38,.12);color:#fca5a5}
.confirm-modal-button:focus-visible{outline:2px solid rgba(34,197,94,.45);outline-offset:-3px}
@keyframes confirmModalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:767px){.confirm-modal{padding:.75rem}.confirm-modal-dialog{border-radius:.85rem}.confirm-modal-header{padding-top:1.1rem}.confirm-modal-actions{grid-template-columns:1fr 1fr}}

/* =========================================================
   CREATE CARD FORM
   ========================================================= */
.create-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.create-card-full{grid-column:1 / -1}
.create-card-section-title{display:flex;align-items:center;gap:.55rem;margin:.5rem 0 -.1rem;padding-top:.55rem;border-top:1px solid #222;color:#fff;font-size:.95rem;font-weight:700}
.create-card-section-title i{color:var(--primary)}
.create-card-page input,.create-card-page textarea{width:100%;box-sizing:border-box}
.create-card-page textarea{resize:vertical;min-height:7rem}
.create-card-page label i{margin-right:.2rem;color:#9ca3af}
@media (max-width:767px){.create-card-grid{grid-template-columns:1fr}.create-card-full{grid-column:auto}}

/* =========================================================
   CREATE CARD FORM — CONSISTENT DARK CONTROLS
   ========================================================= */
.create-card-outer {
  width: 100%;
  box-sizing: border-box;
}
.create-card-page {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.create-card-page .form-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.create-card-page .form-card-header h1 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.25;
}
.create-card-page .form-card-header p {
  margin: .35rem 0 0;
  color: #9ca3af;
  font-size: .85rem;
}
.create-card-page .form-field > textarea,
.create-card-page textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  padding: .75rem .85rem;
  border: 1px solid #2a2a2a;
  border-radius: .6rem;
  background: #2b2b35;
  color: #fff;
  font: inherit;
  font-size: .9rem;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
}
.create-card-page textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}
.create-card-page textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.12);
}
.create-card-page .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #1d1d1d;
}
.create-card-page .primary-action-button,
.create-card-page .secondary-action-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border-radius: .6rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
.create-card-page .primary-action-button {
  border: 1px solid transparent;
  background: linear-gradient(var(--primary),var(--primary)) padding-box, linear-gradient(135deg,var(--primary),var(--secondary)) border-box;
  color: #041006;
}
.create-card-page .secondary-action-button {
  border: 1px solid #2a2a2a;
  background: #353541;
  color: #d1d5db;
}
.create-card-page .secondary-action-button:hover {
  background: #41414f;
  color: #fff;
}
@media (max-width: 767px) {
  .create-card-page .form-card { padding: 1rem; border-radius: .8rem; }
  .create-card-page .form-card-header h1 { font-size: 1.15rem; }
  .create-card-page .form-actions > * { width: 100%; }
}

/* =========================================================
   CREATE CARD — UNLIMITED YOUTUBE REVIEW / VIDEO LINKS
   ========================================================= */
.youtube-links-field{display:flex;flex-direction:column;gap:.7rem}
.youtube-links-list{display:flex;flex-direction:column;gap:.65rem;width:100%}
.youtube-link-row{display:flex;align-items:center;gap:.65rem;width:100%}
.youtube-link-row input{flex:1 1 auto;min-width:0}
.youtube-link-remove{width:2.8rem;min-width:2.8rem;height:2.8rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid #2a2a2a;border-radius:.6rem;background:#2b2b35;color:#9ca3af;cursor:pointer}
.youtube-link-remove:hover{border-color:#dc2626;color:#f87171;background:#140606}
.add-youtube-link{width:max-content;min-height:2.7rem;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border:1px solid var(--primary);border-radius:.6rem;background:#0b160e;color:var(--primary);font-size:.85rem;font-weight:600;cursor:pointer}
.add-youtube-link:hover{background:#102417}
.add-youtube-link i{font-size:.78rem}
@media(max-width:767px){.youtube-link-row{gap:.5rem}.youtube-link-remove{width:2.65rem;min-width:2.65rem;height:2.65rem}.add-youtube-link{width:100%;justify-content:center}}

/* =========================================================
   CREATE CARD — FINAL FORM CONTROL ALIGNMENT
   ========================================================= */
.create-card-page .form-field > input,
.create-card-page .form-field > textarea,
.create-card-page .youtube-link-row > input {
  padding: .75rem 1rem !important;
  text-indent: 0 !important;
  line-height: 1.5 !important;
  background: #2b2b35 !important;
  color: #fff !important;
  box-sizing: border-box !important;
}
.create-card-page .form-field > input::placeholder,
.create-card-page .form-field > textarea::placeholder,
.create-card-page .youtube-link-row > input::placeholder {
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  color: #6b7280 !important;
  opacity: 1 !important;
}
.create-card-page .create-card-section-title i {
  width: 1.15rem;
  min-width: 1.15rem;
  text-align: center;
  display: inline-block;
}
.create-card-page .form-field label > i {
  display: inline-block;
  width: 1rem;
  min-width: 1rem;
  text-align: center;
}


/* =========================================================
   CREATE CARD — LOGO / COVER IMAGE UPLOADS
   ========================================================= */
.card-image-upload-box{display:flex;align-items:center;gap:.9rem;width:100%;box-sizing:border-box}
.card-image-upload-box input[type=file]{flex:1;min-width:0;padding:.65rem .85rem!important;box-sizing:border-box}
.card-logo-preview{width:72px;height:72px;min-width:72px;border:1px solid #2a2a2a;border-radius:.65rem;background:#2b2b35;display:grid;place-items:center;overflow:hidden;color:#6b7280}
.card-logo-preview img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.card-cover-preview{width:150px;height:75px;min-width:150px;border:1px solid #2a2a2a;border-radius:.65rem;background:#2b2b35;display:grid;place-items:center;overflow:hidden;color:#6b7280}
.card-cover-preview img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.card-image-upload-field .field-help{display:block;margin-top:.45rem}
@media(max-width:767px){
  .card-image-upload-box{align-items:stretch;flex-direction:column}
  .card-logo-preview{width:72px;height:72px}
  .card-cover-preview{width:150px;height:75px}
  .card-image-upload-box input[type=file]{width:100%}
}

/* =========================================================
   SUPERADMIN — CARDS TABLE + VIEW MODALS
   ========================================================= */
.cards-list-page{padding-top:.75rem !important}
.cards-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.cards-search-wrap{position:relative;width:min(100%,28rem)}
.cards-search-wrap>i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none}
.cards-search-input{width:100%;min-height:2.8rem;box-sizing:border-box;padding:.7rem .85rem .7rem 2.6rem;border:1px solid #2a2a2a;border-radius:.6rem;background:#2b2b35;color:#fff;outline:none;font-size:.9rem}
.cards-search-input::placeholder{color:#6b7280;opacity:1}
.cards-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.cards-table-wrap{width:100%;overflow-x:auto;border:1px solid #222;border-radius:.8rem}
.cards-table{width:100%;border-collapse:collapse;min-width:1050px}
.cards-table th,.cards-table td{padding:.8rem .75rem;text-align:left;border-bottom:1px solid #222;color:#fff;font-size:.82rem;vertical-align:middle}
.cards-table thead{background:#353541}.cards-table th{color:#9ca3af;font-weight:600;background:transparent;white-space:nowrap}
.cards-table tr:last-child td{border-bottom:0}
.card-table-logo-button{width:2.8rem;height:2.8rem;padding:0;border:1px solid #2a2a2a;border-radius:.65rem;background:#2b2b35;color:#6b7280;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.card-table-logo-button img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.card-table-logo-button:hover{border-color:var(--primary);color:var(--primary)}
.card-table-actions{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.card-share-action:hover{border-color:var(--primary);color:var(--primary);background:#08130b}
.card-info-action:hover{border-color:#3b82f6;color:#60a5fa;background:#0b111a}
.card-youtube-action:hover{border-color:#dc2626;color:#f87171;background:rgba(220,38,38,.08)}
.cards-no-results{padding:1rem;text-align:center;color:#9ca3af;font-size:.85rem}

.card-view-modal[hidden]{display:none !important}
.card-view-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:1rem}
.card-view-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card-view-dialog{position:relative;z-index:1;width:min(100%,48rem);max-height:min(88vh,48rem);overflow:hidden;border:1px solid #2a2a2a;border-radius:1rem;background:#2b2b35;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:cardViewModalIn .18s ease-out}
.card-view-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.35rem;border-bottom:1px solid #222}
.card-view-header h2{margin:0;color:#fff;font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:.55rem}
.card-view-header h2 i{color:var(--primary)}
.card-view-header p{margin:.3rem 0 0;color:#9ca3af;font-size:.8rem}
.card-modal-close{width:2.35rem;height:2.35rem;flex:0 0 2.35rem;display:grid;place-items:center;border:1px solid #2a2a2a;border-radius:.55rem;background:#353541;color:#d1d5db;cursor:pointer}
.card-modal-close:hover{border-color:#dc2626;color:#f87171}
.card-details-body,.card-youtube-modal-body,.card-images-modal-body{padding:1.2rem 1.35rem;overflow:auto;max-height:calc(88vh - 5.2rem)}
.card-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.card-detail-item{min-width:0;padding:.85rem;border:1px solid #222;border-radius:.65rem;background:#2b2b35}
.card-detail-item-full{grid-column:1/-1}
.card-detail-label{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem;color:#9ca3af;font-size:.72rem;font-weight:600}
.card-detail-label i{color:var(--primary)}
.card-detail-value{color:#fff;font-size:.85rem;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.card-detail-value a{color:#86efac;text-decoration:none;word-break:break-all}
.card-detail-value a:hover{text-decoration:underline}
.card-image-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card-image-modal-item{padding:.8rem;border:1px solid #222;border-radius:.7rem;background:#2b2b35}
.card-image-modal-item h3{margin:0 0 .65rem;color:#fff;font-size:.85rem}
.card-image-modal-item img{display:block;width:100%;height:15rem;object-fit:contain;object-position:center;border-radius:.5rem;background:#2b2b35}
.card-image-modal-item.logo-modal-image img{height:15rem;object-fit:contain}
.card-youtube-list{display:flex;flex-direction:column;gap:.65rem}
.card-youtube-link{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem;border:1px solid #222;border-radius:.65rem;background:#2b2b35;color:#d1d5db;text-decoration:none;font-size:.83rem;line-height:1.45;word-break:break-all}
.card-youtube-link i{color:#ef4444;flex:0 0 auto;margin-top:.15rem}
.card-youtube-link:hover{border-color:#dc2626;color:#fff}
.card-modal-empty{padding:1.1rem;border:1px dashed #2a2a2a;border-radius:.65rem;color:#9ca3af;text-align:center;font-size:.85rem}
body.card-view-modal-open{overflow:hidden}
@keyframes cardViewModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:767px){
 .cards-list-page{padding:.75rem !important}
 .cards-search-wrap{width:100%}
 .card-view-modal{padding:.65rem}
 .card-view-dialog{border-radius:.85rem;max-height:92vh}
 .card-view-header{padding:1rem}
 .card-details-body,.card-youtube-modal-body,.card-images-modal-body{padding:1rem;max-height:calc(92vh - 5rem)}
 .card-detail-grid,.card-image-modal-grid{grid-template-columns:1fr}
 .card-detail-item-full{grid-column:auto}
 .card-image-modal-item img,.card-image-modal-item.logo-modal-image img{height:13rem}
}

.company-name-status{display:block;min-height:1.05rem;margin-top:.45rem;font-size:.76rem;line-height:1.35;font-weight:600}
.company-name-status-available{color:var(--primary) !important}
.company-name-status-error{color:#ef4444 !important}
.company-name-status-checking{color:#9ca3af !important}
.company-name-status i{margin-right:.25rem}


/* Product showcase */
.product-showcase-field{display:block}
.product-list{display:flex;flex-direction:column;gap:1rem}
.product-row{position:relative;padding:1rem;border:1px solid #222;border-radius:.9rem;background:#2b2b35}
.product-row-grid{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:1rem;align-items:start}
.product-image-control{display:flex;flex-direction:column;gap:.45rem}
.product-image-control>label{font-weight:700;font-size:.86rem}
.product-image-control>label span,.product-details-grid label span{color:#ef4444}
.product-image-preview{width:100%;height:150px;border:1px dashed #333;border-radius:.7rem;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#2b2b35;color:#777;font-size:1.4rem}
.product-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.product-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;padding-top:1rem;padding-right:3.25rem;align-self:start}
.product-sale-toggle{display:inline-flex;align-items:center;justify-content:flex-start;gap:.7rem;min-height:2.8rem;margin:0;padding:0;font-size:.86rem;font-weight:600;line-height:1.2;vertical-align:middle;white-space:nowrap;color:#60a5fa !important;cursor:pointer}
.product-sale-toggle input{appearance:none;-webkit-appearance:none;width:1.1rem !important;min-width:1.1rem;height:1.1rem !important;min-height:1.1rem;flex:0 0 1.1rem;margin:0 !important;padding:0 !important;border:1px solid #4b5563;border-radius:.28rem;background:#2b2b35;box-sizing:border-box;display:inline-block;vertical-align:middle;cursor:pointer;position:relative}.product-sale-toggle input:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.3 12 13 4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.78rem .78rem}.product-sale-toggle span{color:#60a5fa !important;margin-left:.05rem}
.product-remove{position:absolute;right:.75rem;top:.75rem;width:2.5rem;height:2.5rem;border:1px solid #3a1515;border-radius:.65rem;background:#120707;color:#ef4444;cursor:pointer}
.product-remove:hover{background:#1d0808}
.add-product-button{margin-top:.85rem}
@media(max-width:767px){.product-row{padding:.8rem}.product-row-grid{grid-template-columns:1fr}.product-image-preview{height:180px}.product-details-grid{grid-template-columns:1fr;padding-top:0;padding-right:0}.product-remove{position:static;width:100%;margin-top:.75rem}}

/* v70: product sale checkbox/text final alignment */
.create-card-page .product-sale-toggle{display:inline-flex !important;align-items:center !important;gap:.7rem !important;color:#60a5fa !important;line-height:1.2 !important;white-space:nowrap !important}
.create-card-page .product-sale-toggle > input[type="checkbox"]{width:1.1rem !important;min-width:1.1rem !important;height:1.1rem !important;min-height:1.1rem !important;margin:0 !important;padding:0 !important;flex:0 0 1.1rem !important}
.create-card-page .product-sale-toggle > span{color:#60a5fa !important;margin:0 !important;padding:0 !important;line-height:1.2 !important}

/* v71: final product availability alignment/color override */
.create-card-page .product-sale-toggle,
.create-card-page .product-sale-toggle > span,
.create-card-page .product-sale-toggle > input[type="checkbox"] + span{
  color:#60a5fa !important;
}
.create-card-page .product-sale-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:.9rem !important;
}
.create-card-page .product-sale-toggle > input[type="checkbox"]{
  flex:0 0 1.1rem !important;
  width:1.1rem !important;
  min-width:1.1rem !important;
  height:1.1rem !important;
  min-height:1.1rem !important;
  margin:0 !important;
}


/* v130: all devices — reliable horizontal table touch/trackpad scrolling */
.admin-table-wrap,
.cards-table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  cursor: grab;
}

.admin-table-wrap:active,
.cards-table-wrap:active {
  cursor: grabbing;
}

.admin-table-wrap > table,
.cards-table-wrap > table {
  display: table !important;
  width: max-content !important;
  min-width: 900px !important;
  max-width: none !important;
}

/* Admins table: fill the available desktop width so the header/background
   continues completely through the Action column. Keep the 900px minimum
   for horizontal scrolling on smaller screens. */
@media (min-width: 768px) {
  .admin-table-wrap > .admin-table {
    width: 100% !important;
  }
}

.admin-table-wrap::-webkit-scrollbar,
.cards-table-wrap::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 767px) {
  .admin-table-wrap,
  .cards-table-wrap {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .admin-table-wrap::-webkit-scrollbar,
  .cards-table-wrap::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
}


/* Cards table: keep action icons away from the right edge */
.cards-table td:last-child,
.cards-table th:last-child {
  padding-right: 1.35rem !important;
}

.cards-table .card-table-actions {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-right: .15rem;
}


/* v89: cards table touch swipe, scrollbar visually hidden */
.cards-list-page .cards-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
    overscroll-behavior-x:contain !important;
}
.cards-list-page .cards-table-wrap::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
    background:transparent !important;
}


.card-status-action.is-active{color:var(--primary)}
.card-status-action.is-active:hover{border-color:var(--primary);color:var(--primary);background:#08130b}
.card-status-action.is-inactive{color:#ef4444}
.card-status-action.is-inactive:hover{border-color:#ef4444;color:#f87171;background:rgba(239,68,68,.08)}
.card-status-form{display:inline-flex;align-items:center;margin:0;padding:0}


/* Cards status filter */
.cards-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.cards-filter-wrap{display:flex;align-items:center;gap:.55rem;min-width:220px}
.cards-filter-label{color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap}
.cards-status-filter{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:170px;
  height:38px;
  min-height:38px;
  padding:.45rem 2.15rem .45rem .75rem;
  border:1px solid #2a2a2a;
  border-radius:.55rem;
  background-color:#2b2b35;
  background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%);
  background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:#fff;
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  line-height:1.2;
  outline:none;
  cursor:pointer;
  box-sizing:border-box;
  color-scheme:dark;
}
.cards-status-filter:hover{border-color:#3a3a3a;background-color:#353541}
.cards-status-filter:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.cards-status-filter option{background:#2b2b35;color:#fff;font-weight:500}
.cards-date-filter-wrap{display:flex;align-items:center;gap:.55rem;min-width:255px}
.cards-date-filter{
  appearance:none;
  -webkit-appearance:none;
  width:155px;
  height:38px;
  min-height:38px;
  padding:.45rem .65rem;
  border:1px solid #2a2a2a;
  border-radius:.55rem;
  background:#2b2b35;
  color:#fff;
  font-family:inherit;
  font-size:.82rem;
  font-weight:500;
  line-height:1.2;
  outline:none;
  cursor:pointer;
  box-sizing:border-box;
  color-scheme:dark;
}
.cards-date-filter:hover{border-color:#3a3a3a;background:#353541}
.cards-date-filter:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.cards-date-filter::-webkit-calendar-picker-indicator{filter:brightness(0) saturate(100%) invert(76%) sepia(44%) saturate(1070%) hue-rotate(121deg) brightness(90%) contrast(88%);opacity:1;cursor:pointer}
.cards-date-clear{
  width:34px;
  height:34px;
  min-width:34px;
  border:1px solid #2a2a2a;
  border-radius:.5rem;
  background:#2b2b35;
  color:#9ca3af;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .18s ease;
}
.cards-date-clear:hover{border-color:#dc2626;color:#f87171;background:rgba(220,38,38,.08)}
.cards-date-summary{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:.75rem 0;
  padding:.7rem .85rem;
  border:1px solid #222;
  border-radius:.65rem;
  background:#2b2b35;
}
.cards-date-summary-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border:1px solid #2a2a2a;
  border-radius:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  background:#2b2b35;
}
.cards-date-summary-content{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;width:100%;min-width:0}
.cards-date-summary-content span{color:#9ca3af;font-size:.78rem}
.cards-date-summary-content strong{color:#fff;font-size:.85rem;white-space:nowrap}
@media(max-width:900px){
  .cards-date-filter-wrap{width:100%;min-width:0}
  .cards-date-filter{flex:1;width:auto}
}
@media(max-width:600px){
  .cards-filter-wrap{width:100%;min-width:0}
  .cards-status-filter{width:100%;flex:1}
  .cards-date-summary-content{align-items:flex-start;flex-direction:column;gap:.15rem}
}


/* v111: action buttons use a clean white border on hover/focus/click */
.card-public-page .actions a:not(.primary):hover,
.card-public-page .actions a:not(.primary):focus-visible,
.card-public-page .actions a:not(.primary):active {
  border-color: #fff !important;
}
.card-public-page .actions a:not(.primary):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #fff inset;
}

/* Payment Details • Create/Edit Card */
.payment-qr-preview{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.payment-qr-preview img{width:92px;height:92px;object-fit:contain;padding:5px;background:#fff;border:1px solid #d4d4d8;border-radius:10px}
.payment-qr-preview span{font-size:12px;color:#71717a}
.payment-bank-title{margin-top:4px}
@media(max-width:600px){
  .payment-qr-preview img{width:78px;height:78px}
}


/* v72: Product image and product fields top alignment */
.product-row-grid > .product-details-grid{padding-top:1rem !important;align-self:start !important}
@media(max-width:767px){.product-row-grid > .product-details-grid{padding-top:0 !important}}


/* Services Showcase • Create/Edit Card */
.service-row{position:relative;padding:1rem;border:1px solid #222;border-radius:.9rem;background:#2b2b35}
.service-row-grid{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:1rem;align-items:start}
.service-image-control{display:flex;flex-direction:column;gap:.45rem}
.service-image-control>label{font-weight:700;font-size:.86rem}
.service-image-control>label span,.service-details-grid label span{color:#ef4444}
.service-image-preview{width:100%;height:150px;border:1px dashed #333;border-radius:.7rem;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#2b2b35;color:#777;font-size:1.4rem}
.service-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.service-details-grid{display:grid;grid-template-columns:1fr;gap:.85rem;padding-top:1rem;padding-right:3.25rem;align-self:start}
.service-remove{position:static;width:100%;height:2.5rem;margin-top:.75rem;border:1px solid #3a1515;border-radius:.65rem;background:#120707;color:#ef4444;cursor:pointer}
.service-remove:hover{background:#1d0808}
.add-service-button{margin-top:.85rem}
@media(max-width:767px){
  .service-row{padding:.8rem}
  .service-row-grid{grid-template-columns:1fr}
  .service-image-preview{height:180px}
  .service-details-grid{grid-template-columns:1fr;padding-top:0;padding-right:0}
}


/* v125 FINAL — Product image and product fields exact top alignment */
.product-row-grid > .product-details-grid {
  padding-top: 1.5rem !important;
  margin-top: 0 !important;
  align-self: start !important;
}
@media (max-width: 767px) {
  .product-row-grid > .product-details-grid {
    padding-top: 0 !important;
  }
}

/* v190 • Products & Services tabs — clear active/inactive states */
.commerce-mode-tabs{display:flex;gap:8px;margin:0 0 14px;padding:5px;background:#eef2f7;border:1px solid #d7dee8;border-radius:12px;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.commerce-mode-tab{position:relative;flex:1;min-height:40px;border:1px solid #cbd5e1;border-radius:9px;background:rgba(255,255,255,.72)!important;color:#64748b!important;font-weight:800;font-size:13px;letter-spacing:.1px;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);opacity:1}
/* Inactive tabs stay neutral so the selected tab is immediately obvious. */
.commerce-mode-tab:nth-child(1),
.commerce-mode-tab:nth-child(2),
.commerce-mode-tab:nth-child(3){background:rgba(255,255,255,.72)!important;color:#64748b!important}
.commerce-mode-tab:hover{background:#f8fafc!important;color:#334155!important;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 4px 10px rgba(15,23,42,.10)}
.commerce-mode-tab.is-active{opacity:1;transform:translateY(-1px);color:#fff!important;border-color:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(15,23,42,.20),0 0 0 2px rgba(255,255,255,.78),inset 0 1px 0 rgba(255,255,255,.30);filter:saturate(1.08)}
.commerce-mode-tab:nth-child(1).is-active{background:linear-gradient(135deg,#2563eb,#3b82f6)!important}
.commerce-mode-tab:nth-child(2).is-active{background:linear-gradient(135deg,#7c3aed,#a855f7)!important}
.commerce-mode-tab:nth-child(3).is-active{background:linear-gradient(135deg,#059669,#10b981)!important}
.commerce-mode-tab.is-active::after{content:'✓';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:11px;font-weight:900}
.commerce-mode-panel{display:block;grid-column:1 / -1;width:100%;min-width:0}
.commerce-mode-panel.is-hidden{display:none!important}
@media(max-width:600px){
  .commerce-mode-tabs{gap:5px;padding:3px;margin-bottom:12px}
  .commerce-mode-tab{min-height:36px;font-size:12px}
  .commerce-mode-tab.is-active::after{right:7px;width:16px;height:16px;font-size:10px}
}

/* v137 • Profile phone: fixed India prefix +91 with 10-digit local number */
.phone-input-wrap{display:flex;align-items:center;width:100%;min-height:46px;border:1px solid #3f3f46;border-radius:10px;background:#2b2b35;overflow:hidden}
.phone-input-wrap:focus-within{border-color:#2753eb;box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.phone-prefix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 12px;border-right:1px solid #3f3f46;color:#a1a1aa;font-weight:700;font-size:14px;white-space:nowrap;user-select:none}
.phone-input-wrap input{flex:1;min-width:0;width:100%;height:44px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;padding:0 12px!important}
@media(max-width:600px){.phone-prefix{padding:0 10px;font-size:13px}.phone-input-wrap input{padding:0 10px!important}}

/* Orders • responsive table + touch swipe */
.orders-page .orders-card{overflow:hidden}
.orders-page .orders-card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.orders-page .page-card-header h1{margin:0 0 5px;font-size:22px}
.orders-page .page-card-header p{margin:0;color:#a1a1aa;font-size:13px}
.table-search-box{display:flex;align-items:center;gap:8px;min-width:min(320px,100%);border:1px solid #27272a;background:#2b2b35;border-radius:10px;padding:0 11px}
.table-search-box i{color:#71717a}
.table-search-box input{width:100%;border:0;outline:0;background:transparent;color:#fff;padding:10px 0}
.orders-table-wrap{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.orders-table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.orders-table-wrap.is-dragging{cursor:grabbing;user-select:none}
.orders-table{width:max-content;min-width:1250px;border-collapse:separate;border-spacing:0;color:#e4e4e7}
.orders-table th,.orders-table td{padding:12px 13px;border-bottom:1px solid #27272a;vertical-align:top;text-align:left;font-size:13px}
.orders-table th{position:sticky;top:0;background:#3a3a46;color:#f3f4f6;font-size:12px;white-space:nowrap;z-index:1}
.orders-table tbody tr:hover td{background:#353541}
.orders-table .table-empty{text-align:center;padding:32px;color:#71717a}
.order-address{max-width:230px;white-space:normal;line-height:1.45}
.order-items-cell{min-width:250px}
.order-item-line{display:grid;grid-template-columns:max-content minmax(110px,1fr) max-content;gap:7px;align-items:center;margin-bottom:6px}
.order-item-line:last-child{margin-bottom:0}
.order-item-line small{color:#a1a1aa;white-space:nowrap}
.order-item-type{font-size:10px;font-weight:800;padding:3px 6px;border-radius:999px}
.order-item-type.product{background:#172554;color:#93c5fd}
.order-item-type.service{background:#3b0764;color:#d8b4fe}
.order-phone-link{color:#93c5fd;text-decoration:none;white-space:nowrap}
.order-status-form{margin:0}
.order-status-select{border:1px solid #3f3f46;border-radius:8px;background:#2b2b35;color:#fff;padding:7px 28px 7px 9px;font:inherit;min-width:118px}
.order-status-select.status-pending{border-color:#a16207;color:#facc15}
.order-status-select.status-confirmed{border-color:#0369a1;color:#7dd3fc}
.order-status-select.status-completed{border-color:#15803d;color:#86efac}
.order-status-select.status-cancelled{border-color:#991b1b;color:#fca5a5}
.creator-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.creator-admin{background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.28)}
.creator-superadmin{background:rgba(250,204,21,.12);color:#fde047;border:1px solid rgba(250,204,21,.28)}
.table-swipe-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;color:#71717a;font-size:11px}
@media(max-width:700px){
  .orders-page .orders-card-header{align-items:stretch}
  .table-search-box{min-width:100%}
  .orders-table-wrap{margin-left:-1px;width:calc(100% + 2px)}
}


/* v143: hide order table horizontal scrollbar while preserving touch swipe */
.orders-table-wrap{scrollbar-width:none!important;-ms-overflow-style:none!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-x pan-y!important}
.orders-table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}


/* v146: Orders status + calendar date filter + empty result */
.orders-date-filter{display:flex;align-items:center;gap:7px}
.orders-date-filter label{font-size:12px;color:#a1a1aa;white-space:nowrap}
.orders-date-filter input{height:40px;min-width:150px;padding:0 10px;border:1px solid #27272a;border-radius:9px;background:#2b2b35;color:#f3f4f6;font-size:13px;outline:none;color-scheme:dark}
.orders-date-filter input:focus{border-color:#38bdf8}
@media(max-width:600px){
  .orders-date-filter{flex:0 0 auto}
  .orders-date-filter input{height:38px;min-width:138px}
}

/* v144: Orders status filter */
.orders-toolbar{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.orders-status-filter{display:flex;align-items:center;gap:7px}
.orders-status-filter label{font-size:12px;color:#a1a1aa;white-space:nowrap}
.orders-status-filter select{height:40px;min-width:128px;padding:0 32px 0 12px;border:1px solid #27272a;border-radius:9px;background:#2b2b35;color:#f3f4f6;font-size:13px;outline:none}
.orders-status-filter select:focus{border-color:#38bdf8}
@media(max-width:600px){
  .orders-toolbar{width:100%;justify-content:stretch;align-items:stretch}
  .orders-status-filter{flex:0 0 auto}
  .orders-status-filter select{height:38px;min-width:112px}
  .orders-toolbar .table-search-box{flex:1;min-width:0}
}


/* v148: Orders toolbar aligned like Cards — search left, status/date right on one desktop line */
.orders-page .orders-card-header{display:block;margin-bottom:16px}
.orders-page .orders-card-header>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:16px}
.orders-page .orders-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;width:100%;margin-top:14px}
.orders-page .orders-toolbar .table-search-box{flex:1 1 auto;width:min(100%,28rem);min-width:0}
.orders-page .orders-filter-group{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 auto}
.orders-page .orders-status-filter,.orders-page .orders-date-filter{flex:0 0 auto}
@media(max-width:767px){
  .orders-page .orders-card-header>div:first-child{align-items:flex-start}
  .orders-page .orders-toolbar{flex-wrap:wrap;align-items:stretch}
  .orders-page .orders-toolbar .table-search-box{flex:1 1 100%;width:100%;min-width:100%}
  .orders-page .orders-filter-group{width:100%;justify-content:stretch;flex:1 1 100%}
  .orders-page .orders-status-filter,.orders-page .orders-date-filter{flex:1 1 0;min-width:0}
  .orders-page .orders-status-filter select,.orders-page .orders-date-filter input{width:100%;min-width:0}
}


/* v154: keep the original page width; add only a little extra table-cell breathing room when the desktop sidebar is collapsed. */
@media (min-width: 768px) {
  #sidebar.collapsed ~ .main-wrapper .cards-table th,
  #sidebar.collapsed ~ .main-wrapper .cards-table td {
    padding-left: .95rem !important;
    padding-right: .95rem !important;
  }

  #sidebar.collapsed ~ .main-wrapper .admin-table th,
  #sidebar.collapsed ~ .main-wrapper .admin-table td {
    padding-left: .95rem !important;
    padding-right: .95rem !important;
  }
}

/* v154: keep table header background continuous across the visible table viewport. */
.admin-table-wrap,
.cards-table-wrap{
  position:relative !important;
}
.admin-table-wrap::before,
.cards-table-wrap::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:47px;
  background:#353541;
  border-bottom:1px solid #222;
  border-radius:.8rem .8rem 0 0;
  pointer-events:none;
  z-index:0;
}
.admin-table-wrap > table,
.cards-table-wrap > table{
  position:relative;
  z-index:1;
}
.admin-table thead,
.cards-table thead{
  background:transparent !important;
}
.admin-table th,
.cards-table th{
  background:transparent !important;
}

/* v155: Superadmin Admins page expands with the available desktop width when sidebar is collapsed. */
@media (min-width: 768px) {
  #sidebar.collapsed ~ .main-wrapper .admin-list-page {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #sidebar.collapsed ~ .main-wrapper .admin-list-page .form-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* v156: keep every authenticated page aligned with the sidebar state.
   When the desktop sidebar is collapsed, every page content area uses the
   newly available width. When expanded, each page returns to its original
   max-width/layout automatically. */
@media (min-width: 768px) {
  #sidebar.collapsed ~ .main-wrapper .page-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #sidebar.collapsed ~ .main-wrapper .page-content > .form-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================
   ACTIVE / HOVER NAVIGATION
   ========================= */
.sidebar .nav-item:hover,
.sidebar .submenu a:hover {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
}

.sidebar .nav-item.is-active,
.sidebar .submenu a.is-active {
  background: var(--primary) !important;
  color: #fff !important;
}

.sidebar .submenu a.nav-subitem {
  color: #fff !important;
}

.sidebar .submenu a.nav-subitem.is-active {
  background: var(--primary) !important;
  color: #fff !important;
}

.sidebar.collapsed .nav-item.is-active {
  background: var(--primary) !important;
}


/* v158 • Orders page matches Cards container / toolbar / table layout */
.orders-page.cards-list-page{padding-top:.75rem !important}
.orders-page .orders-card{overflow:hidden}
.orders-page .form-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.orders-page .orders-toolbar{
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1rem;
}
.orders-page .orders-search-wrap{
  flex:1 1 28rem;
  width:auto;
  max-width:28rem;
}
.orders-page .cards-order-filters{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.orders-page .orders-date-filter{min-width:255px}
.orders-page .orders-table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid #222;
  border-radius:.8rem;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.orders-page .orders-table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.orders-page .orders-table{
  width:100%;
  min-width:1250px;
  border-collapse:collapse;
  color:#e4e4e7;
}
.orders-page .orders-table th,
.orders-page .orders-table td{
  padding:.8rem .75rem;
  text-align:left;
  border-bottom:1px solid #222;
  color:#fff;
  font-size:.82rem;
  vertical-align:middle;
}
.orders-page .orders-table thead{background:#353541}
.orders-page .orders-table th{
  color:#9ca3af;
  font-weight:600;
  background:transparent;
  white-space:nowrap;
}
.orders-page .orders-table tr:last-child td{border-bottom:0}
.orders-page .orders-table tbody tr:hover td{background:#353541}
.orders-page .orders-table .table-empty{text-align:center;padding:1.25rem;color:#71717a}
.orders-page .orders-table .order-address{max-width:230px;white-space:normal;line-height:1.45}
.orders-page .orders-table .order-items-cell{min-width:250px}
.orders-page .orders-table .order-status-select{font-size:.82rem}
.orders-page .table-swipe-hint{margin-top:9px}
@media(max-width:900px){
  .orders-page .orders-toolbar{flex-wrap:wrap}
  .orders-page .orders-search-wrap{max-width:none;flex:1 1 100%}
  .orders-page .cards-order-filters{width:100%;margin-left:0}
  .orders-page .orders-status-filter,
  .orders-page .orders-date-filter{flex:1;min-width:0}
}
@media(max-width:600px){
  .orders-page .form-card-header{align-items:flex-start}
  .orders-page .cards-order-filters{flex-wrap:wrap}
  .orders-page .orders-status-filter,
  .orders-page .orders-date-filter{width:100%}
  .orders-page .orders-date-filter{min-width:0}
}

/* v160: Orders page matches Cards page toolbar, summary and container spacing exactly. */
.orders-page .orders-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;width:100%;flex-wrap:nowrap}
.orders-page .orders-search-wrap{width:min(100%,28rem);flex:1 1 auto;min-width:0}
.orders-page .orders-toolbar .cards-filter-wrap{flex:0 0 auto}
.orders-page .orders-toolbar .cards-date-filter-wrap{flex:0 0 auto}
.orders-page .orders-date-summary{margin:.75rem 0}
@media(max-width:900px){
  .orders-page .orders-toolbar{flex-wrap:wrap}
  .orders-page .orders-search-wrap{width:100%;flex:1 1 100%}
  .orders-page .orders-toolbar .cards-filter-wrap,
  .orders-page .orders-toolbar .cards-date-filter-wrap{width:100%;min-width:0}
}
@media(min-width:901px){
  .orders-page .orders-toolbar .cards-filter-wrap{min-width:220px}
  .orders-page .orders-toolbar .cards-date-filter-wrap{min-width:255px}
}


/* v160: Orders container structure matches Cards exactly. */
.orders-page .form-card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.orders-page .orders-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;width:100%;margin-bottom:16px}
.orders-page .orders-search-wrap{flex:1 1 auto;width:auto;max-width:none;min-width:0}
.orders-page .orders-toolbar .cards-filter-wrap{flex:0 0 auto}
.orders-page .orders-toolbar .cards-date-filter-wrap{flex:0 0 auto}
.orders-page .orders-date-summary{width:100%;margin-bottom:16px}
.orders-page .orders-table-wrap{width:100%;margin:0}
@media(max-width:767px){
  .orders-page .orders-toolbar{flex-wrap:wrap;align-items:stretch}
  .orders-page .orders-search-wrap{flex:1 1 100%;width:100%;min-width:100%}
  .orders-page .orders-toolbar .cards-filter-wrap,.orders-page .orders-toolbar .cards-date-filter-wrap{flex:1 1 0;min-width:0}
}

/* Website Settings */
.settings-page{padding-top:0 !important;max-width:1200px;margin:0 auto}.settings-page > .form-card{margin-top:calc(var(--header-height) + 1.5rem) !important}
.settings-logo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.settings-logo-card{min-width:0;background:#2b2b35;border:1px solid #222;border-radius:.8rem;padding:1rem}
.settings-logo-card-title{font-size:.92rem;font-weight:700;color:#fff;margin-bottom:.25rem}
.settings-logo-preview{height:130px;margin:.75rem 0;border:1px dashed #333;border-radius:.7rem;background:#2b2b35;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#71717a}
.settings-logo-preview img{display:block;max-width:90%;max-height:100px;width:auto;height:auto;object-fit:contain}
.settings-file-label{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.48rem .7rem;border:1px solid #2a2a2a;border-radius:.55rem;color:#e5e7eb;background:#353541;cursor:pointer;font-size:.8rem;margin-bottom:.45rem}
.settings-logo-card input[type=file]{display:block;width:100%;font-size:.78rem;color:#d1d5db}
.settings-logo-card small{display:block;margin-top:.45rem;color:#8b8b8b;font-size:.72rem;line-height:1.45}
@media(max-width:900px){.settings-logo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.settings-page{padding-top:0 !important;padding-left:.75rem !important;padding-right:.75rem !important;padding-bottom:.75rem !important}.settings-page > .form-card{margin-top:calc(var(--header-height) + 1rem) !important}.settings-logo-grid{grid-template-columns:1fr}.settings-logo-preview{height:120px}}

/* Global flash/notice alignment • v167 */
.form-alert,.flash-message{display:grid;grid-template-columns:1.25rem minmax(0,1fr);align-items:center;column-gap:.65rem;line-height:1.4;}
.form-alert > i,.flash-message > i{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;line-height:1;align-self:center;margin:0;}
.form-alert > span,.form-alert > div,.flash-message > span,.flash-message > div{min-width:0;line-height:1.4;margin:0;}
.form-alert > div > div{line-height:1.4;}

/* v189 — Products and Services each use a separate full-width section */
.create-card-page .commerce-mode-panel {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}
/* v190 — catalog mode must control visibility; keep each visible panel full width */
.create-card-page .commerce-mode-panel.is-hidden {
  display: none !important;
}
.create-card-page .commerce-mode-panel .product-showcase-field,
.create-card-page .commerce-mode-panel .service-showcase-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.create-card-page .product-list,
.create-card-page .service-list,
.create-card-page .product-row,
.create-card-page .service-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* v192 — definitive catalog tab visibility */
.commerce-mode-panel[hidden],
.commerce-mode-panel.is-hidden { display:none !important; }
.commerce-mode-panel:not(.is-hidden):not([hidden]) { grid-column:1 / -1; width:100%; max-width:100%; min-width:0; }


/* FINAL: Services delete button full width */
.service-row > .service-remove {
  display:block !important;
  position:static !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:2.5rem !important;
  margin:0.75rem 0 0 !important;
  box-sizing:border-box !important;
  grid-column:1 / -1 !important;
}

/* Client profile picture upload */
.client-profile-upload{display:flex;align-items:center;gap:18px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fafafa}
.client-profile-preview{width:76px;height:76px;min-width:76px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,0,0,.08);background:#fff}
.client-profile-preview img{width:100%;height:100%;display:block;object-fit:cover}
.client-profile-upload-control{flex:1}
.client-profile-upload-control input[type=file]{width:100%}
.client-profile-upload-control small{display:block;margin-top:7px}
@media(max-width:600px){.client-profile-upload{align-items:flex-start;flex-direction:column}.client-profile-upload-control{width:100%}}

/* Card -> Client assignment */
.card-assign-action:hover{border-color:#a855f7;color:#c084fc;background:rgba(168,85,247,.08)}
.card-assign-dialog{width:min(100%,34rem)}
.card-assign-body{padding:1.2rem 1.35rem}
.card-assign-list{display:flex;flex-direction:column;gap:.55rem;max-height:min(55vh,28rem);overflow:auto;padding:.1rem}
.card-assign-option{display:flex;align-items:center;gap:.75rem;padding:.8rem .85rem;border:1px solid #242424;border-radius:.7rem;background:#2b2b35;cursor:pointer;transition:border-color .15s,background .15s}
.card-assign-option:hover{border-color:#3b82f6;background:#0d1118}
.card-assign-option input{width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:var(--primary)}
.card-assign-option-content{min-width:0;display:flex;flex-direction:column;gap:.18rem}
.card-assign-option-name{color:#fff;font-size:.86rem;font-weight:700}
.card-assign-option-meta{color:#9ca3af;font-size:.74rem;word-break:break-word}
.card-assign-option.is-selected{border-color:var(--primary);background:rgba(34,197,94,.07)}
.card-assign-empty{padding:1rem;border:1px dashed #2a2a2a;border-radius:.7rem;color:#9ca3af;text-align:center;font-size:.84rem}
.card-assign-status{margin-bottom:.8rem;padding:.7rem .8rem;border-radius:.6rem;font-size:.8rem}
.card-assign-status.error{border:1px solid #7f1d1d;background:#1a0707;color:#fca5a5}
.card-assign-actions{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #222}
@media(max-width:767px){.card-assign-body{padding:1rem}.card-assign-actions{flex-direction:column-reverse}.card-assign-actions button{width:100%;justify-content:center}}

.card-assigned-badge{width:2rem;height:2rem;display:inline-grid;place-items:center;border:1px solid #1d4ed8;border-radius:.55rem;background:#071225;color:#60a5fa;font-size:.78rem}

/* v259: full-width continuous cards/admin table header background */
.admin-table,
.cards-table {
  background: transparent !important;
}
.admin-table thead,
.admin-table thead tr,
.admin-table thead th,
.cards-table thead,
.cards-table thead tr,
.cards-table thead th {
  background: #353541 !important;
}
.admin-table thead th,
.cards-table thead th {
  color: #9ca3af !important;
  border-bottom: 1px solid #222 !important;
}
/* Remove the old viewport-only overlay; the actual table header now paints its full width. */
.admin-table-wrap::before,
.cards-table-wrap::before {
  display: none !important;
  content: none !important;
}


/* Default template wallpaper restore */
.restore-wallpaper-button{margin-top:10px;display:inline-flex;align-items:center;gap:7px;}
@media (max-width:600px){.restore-wallpaper-button{width:100%;justify-content:center;}}

/* Template wallpaper manager */

/* =========================================================
   SUPERADMIN — TEMPLATE WALLPAPERS
   Clean profile-style layout
   ========================================================= */
.template-wallpaper-page{
  width:100%;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:calc(var(--header-height) + .75rem) 12px 1.25rem !important;
  box-sizing:border-box;
}
.template-wallpaper-manager{
  width:100%;
  max-width:none !important;
  margin:0 !important;
  padding:1.5rem !important;
  background:#2b2b35;
  border:1px solid #242424;
  border-radius:1rem;
  box-sizing:border-box;
  box-shadow:0 16px 40px rgba(0,0,0,.20);
}
.template-wallpaper-hero{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.5rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid #1f1f1f;
}
.template-wallpaper-hero-icon{
  width:2.5rem;height:2.5rem;flex:0 0 2.5rem;
  display:grid;place-items:center;
  border:1px solid #242424;border-radius:.7rem;
  background:#353541;color:var(--primary);
}
.template-wallpaper-kicker{
  margin:0 0 .25rem;
  color:#6b7280;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.template-wallpaper-hero h1{margin:0;color:#fff;font-size:1.35rem;line-height:1.25}
.template-wallpaper-hero p{margin:.35rem 0 0;color:#9ca3af;font-size:.85rem;line-height:1.5}
.template-wallpaper-form{display:grid;gap:1rem}
.template-wallpaper-selector,
.template-wallpaper-upload-card,
.template-wallpaper-preview-card{
  min-width:0;
  padding:1rem;
  background:#2b2b35;
  border:1px solid #222;
  border-radius:.8rem;
  box-sizing:border-box;
}
.template-wallpaper-section-heading{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:.75rem;
}
.template-wallpaper-section-heading h2{
  margin:0;color:#f3f4f6;font-size:.9rem;line-height:1.35;font-weight:700;
}
.template-wallpaper-section-heading h2 i{margin-right:.4rem;color:var(--primary);font-size:.82rem}
.template-wallpaper-section-heading p{margin:.3rem 0 0;color:#6b7280;font-size:.73rem;line-height:1.45}
.template-wallpaper-required{
  flex:0 0 auto;padding:.25rem .5rem;border:1px solid #3f2020;border-radius:999px;
  background:#160b0b;color:#fca5a5;font-size:.65rem;font-weight:700;
}
.template-wallpaper-selector select{
  display:block;width:100%;min-height:2.8rem;padding:.65rem .8rem;
  border:1px solid #2a2a2a;border-radius:.6rem;background:#2b2b35;color:#fff;
  font:inherit;font-size:.88rem;outline:none;box-sizing:border-box;
}
.template-wallpaper-selector select:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.template-wallpaper-selector .field-help{display:block;margin-top:.4rem;color:#6b7280;font-size:.7rem;line-height:1.4}
.template-wallpaper-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
}
.template-wallpaper-upload-card,.template-wallpaper-preview-card{display:flex;flex-direction:column}
.template-wallpaper-dropzone{
  min-height:240px;padding:1.25rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;box-sizing:border-box;
  border:1px dashed #353535;border-radius:.75rem;background:#2b2b35;
  transition:border-color .18s ease,background .18s ease;
}
.template-wallpaper-dropzone:hover,.template-wallpaper-dropzone.is-selected{
  border-color:var(--primary);background:rgba(34,197,94,.035)
}
.template-wallpaper-upload-icon{
  width:3rem;height:3rem;display:grid;place-items:center;
  margin-bottom:.8rem;border:1px solid #292929;border-radius:.8rem;
  background:#121212;color:var(--primary);font-size:1rem;
}
.template-wallpaper-dropzone strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f3f4f6;font-size:.88rem}
.template-wallpaper-dropzone span,.template-wallpaper-dropzone em{margin-top:.35rem;color:#737b88;font-size:.7rem;font-style:normal;line-height:1.4}
.template-wallpaper-browse{
  margin-top:.9rem;padding:.55rem .8rem;border:1px solid #2a2a2a;border-radius:.55rem;
  background:#41414f;color:#e5e7eb;font:inherit;font-size:.75rem;font-weight:600;pointer-events:none;
}
.template-wallpaper-note{display:flex;gap:.45rem;margin-top:.7rem;color:#687180;font-size:.69rem;line-height:1.45}
.template-wallpaper-note i{margin-top:2px;color:#3b82f6;flex:0 0 auto}
.template-wallpaper-file-input{position:absolute !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important}
.template-wallpaper-preview{width:100%;height:240px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2b2b35;border:1px solid #242424;border-radius:.7rem}
.template-wallpaper-preview img{display:block;width:100%;height:100%;object-fit:cover}
.template-wallpaper-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#555d68;font-size:.75rem}
.template-wallpaper-empty i{font-size:1.5rem;color:#343a43}
.template-wallpaper-live-dot{display:inline-flex;align-items:center;gap:.35rem;color:#86efac;font-size:.65rem;font-weight:700;white-space:nowrap}
.template-wallpaper-live-dot i{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.template-wallpaper-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.6rem;color:#687180;font-size:.68rem;line-height:1.4}
.template-wallpaper-preview-footer span:last-child{color:#aeb5bf;font-weight:600}
.template-wallpaper-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.25rem;padding-top:1rem;border-top:1px solid #1d1d1d}
.template-wallpaper-actions .primary-action-button,.template-wallpaper-actions .secondary-action-button{min-width:150px}
@media(max-width:800px){
  .template-wallpaper-workspace{grid-template-columns:1fr}
}
@media(max-width:767px){
  .template-wallpaper-page{max-width:none !important;padding:calc(var(--header-height) + .75rem) .75rem .75rem !important}
  .template-wallpaper-manager{padding:1rem !important;border-radius:.8rem}
  .template-wallpaper-hero{gap:.75rem;margin-bottom:1rem;padding-bottom:1rem}
  .template-wallpaper-hero-icon{width:2.25rem;height:2.25rem;flex-basis:2.25rem}
  .template-wallpaper-hero h1{font-size:1.15rem}
  .template-wallpaper-workspace{gap:.75rem}
  .template-wallpaper-preview{height:220px}
  .template-wallpaper-dropzone{min-height:215px}
  .template-wallpaper-actions{flex-direction:column-reverse}
  .template-wallpaper-actions>*{width:100%;min-width:0 !important}
}


/* ========================= COLLAPSED SIDEBAR TOOLTIP ========================= */
.sidebar-hover-tooltip {
  position: fixed !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  max-width: 220px !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid rgba(59,130,246,.95) !important;
  border-radius: 7px !important;
  background: rgba(10,18,32,.96) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.38), 0 0 0 1px rgba(59,130,246,.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-50%) translateX(-4px) !important;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease !important;
}
.sidebar-hover-tooltip.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}
.sidebar-tooltip-text { color: #fff !important; }
@media (max-width: 767px) {
  .sidebar-hover-tooltip { display: none !important; }
}
/* v287: Definitive desktop collapsed-sidebar rule for submenu chevrons. */
@media (min-width: 768px) {
  #sidebar.collapsed .sidebar-nav .nav-menu-toggle > .chevron {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* v303: Orders table header must cover the complete visible table container.
   The table can be wider than the viewport for horizontal scrolling, so the
   wrapper paints the remaining header area as well. */
.orders-page .orders-table-wrap{
  position:relative !important;
  background:transparent !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}
.orders-page .orders-table-wrap::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:48px !important;
  background:#353541 !important;
  border-bottom:1px solid #222 !important;
  z-index:0 !important;
  pointer-events:none !important;
}
.orders-page .orders-table{
  position:relative !important;
  z-index:1 !important;
  width:max-content !important;
  min-width:1250px !important;
  background:transparent !important;
}
.orders-page .orders-table thead,
.orders-page .orders-table thead tr,
.orders-page .orders-table thead th{
  background:#353541 !important;
}
.orders-page .orders-table thead th{
  border-bottom:1px solid #222 !important;
}

/* ==========================================================
   Clean empty states
   Transparent / soft neutral style. No white card background.
   ========================================================== */
.clean-empty-state {
    width: 100%;
    min-height: 190px;
    margin: 10px 0 4px;
    padding: 30px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, .10);
    border-radius: 18px;
    background: rgba(148, 163, 184, .035);
    box-shadow: none;
    color: #cbd5e1;
}

.clean-empty-state .clean-empty-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(148, 163, 184, .07);
    border: 1px solid rgba(148, 163, 184, .12);
    color: #94a3b8;
    font-size: 23px;
}

.clean-empty-state strong {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #cbd5e1;
}

.clean-empty-state > span {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.55;
    color: #94a3b8;
}

.clean-empty-state-compact {
    min-height: 150px;
    margin-top: 12px;
    padding: 22px 18px;
    border-radius: 16px;
}

.clean-empty-state-compact .clean-empty-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 18px;
}

.clean-empty-row > td {
    padding: 0 !important;
    border-bottom: 0 !important;
}

.clean-empty-state-table {
    margin: 0;
    min-height: 190px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Override legacy alert styling without introducing a white background. */
.clean-empty-state.form-alert,
.form-alert.clean-empty-state {
    border: 1px solid rgba(148, 163, 184, .10) !important;
    background: rgba(148, 163, 184, .035) !important;
    color: #cbd5e1 !important;
}

@media (max-width: 640px) {
    .clean-empty-state {
        min-height: 165px;
        padding: 24px 16px;
        border-radius: 15px;
    }

    .clean-empty-state .clean-empty-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 21px;
    }

    .clean-empty-state strong {
        font-size: 14px;
    }

    .clean-empty-state > span {
        font-size: 12px;
    }
}


/* =========================================================
   CENTRAL DUAL-COLOR THEME
   Values are injected by includes/header.php from cache/theme.json.
   ========================================================= */
.sidebar .nav-item.is-active,
.sidebar .submenu a.is-active,
.sidebar .nav-item.bg-primary,
.sidebar .nav-item[class*="bg-primary"],
.sidebar.collapsed .nav-item.is-active {
  background: var(--primary-gradient) !important;
  color: #fff !important;
}
.sidebar .nav-item:hover,
.sidebar .submenu a:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, #111) 0%, color-mix(in srgb, var(--secondary) 18%, #111) 100%) !important;
  color: #fff !important;
}
.primary-action-button,
.bg-primary,
.btn-primary { background: var(--primary-gradient) !important; }
.primary-action-button:hover,
.btn-primary:hover { filter: brightness(1.06); }

/* Theme-controlled button/navigation borders */
.primary-action-button,
.btn-primary,
.sidebar .nav-item,
.sidebar .submenu a {
  border-color: var(--primary) !important;
}

.sidebar .nav-item.is-active,
.sidebar .submenu a.is-active,
.sidebar .nav-item.bg-primary,
.sidebar .nav-item[class*="bg-primary"] {
  border-color: transparent !important;
  background: linear-gradient(135deg,var(--primary),var(--secondary)) !important;
}

/* Theme page: full-width container, compact action button */
.theme-settings-page .form-actions { width: 100%; }
.theme-settings-page .form-actions > .primary-action-button { width: auto !important; max-width: none !important; }
@media (max-width:767px){ .theme-settings-page .form-actions > .primary-action-button { width: auto !important; } }

.theme-settings-page{max-width:none!important;width:100%!important}.theme-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.theme-color-field{background:#2b2b35;border:1px solid #222;border-radius:.85rem;padding:1rem}.theme-color-field label{display:block;color:#fff;font-weight:700;margin-bottom:.55rem}.theme-color-input-row{display:flex;gap:.65rem;align-items:center}.theme-color-input-row input[type=color]{width:3.1rem;height:3.1rem;padding:.2rem;border:1px solid #333;border-radius:.65rem;background:#2b2b35;cursor:pointer}.theme-color-input-row input[type=text]{flex:1;min-width:0;height:3.1rem;box-sizing:border-box;background:#2b2b35;color:#fff;border:1px solid #333;border-radius:.65rem;padding:0 .8rem;font-weight:700;letter-spacing:.04em}.theme-color-field small{display:block;color:#9ca3af;margin-top:.55rem}.theme-live-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1.25rem;padding:.85rem;border-radius:.9rem;background:linear-gradient(135deg,var(--primary),var(--secondary));}.theme-live-preview>div{display:flex; border:1px solid color-mix(in srgb,var(--primary) 55%,var(--secondary) 45%);align-items:center;justify-content:center;gap:.45rem;min-height:2.7rem;padding:.55rem .65rem;border-radius:.65rem;color:#fff;background:rgba(0,0,0,.18);font-size:.82rem;font-weight:600}.theme-live-preview .theme-preview-active{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}@media(max-width:767px){.theme-color-grid{grid-template-columns:1fr}.theme-live-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* FINAL THEME ACTION BUTTON TEXT/ICON COLOR */
.primary-action-button,
.primary-action-button i,
.primary-action-button svg,
.btn-primary,
.btn-primary i,
.btn-primary svg {
  color: #fff !important;
}

/* =========================================================
   CREATE / EDIT CARD — SOFT BLUE ADD CONTROLS + GREEN AVAILABILITY
   ========================================================= */
.create-card-page .add-youtube-link,
.create-card-page .add-product-button,
.create-card-page .add-service-button,
.admin-edit-page .add-youtube-link,
.admin-edit-page .add-product-button,
.admin-edit-page .add-service-button {
  border: 1px solid #3b82f6 !important;
  background: rgba(59,130,246,.10) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.04) inset !important;
}

.create-card-page .add-youtube-link i,
.create-card-page .add-youtube-link span,
.create-card-page .add-product-button i,
.create-card-page .add-product-button span,
.create-card-page .add-service-button i,
.create-card-page .add-service-button span,
.admin-edit-page .add-youtube-link i,
.admin-edit-page .add-youtube-link span,
.admin-edit-page .add-product-button i,
.admin-edit-page .add-product-button span,
.admin-edit-page .add-service-button i,
.admin-edit-page .add-service-button span {
  color: #fff !important;
}

.create-card-page .add-youtube-link:hover,
.create-card-page .add-product-button:hover,
.create-card-page .add-service-button:hover,
.admin-edit-page .add-youtube-link:hover,
.admin-edit-page .add-product-button:hover,
.admin-edit-page .add-service-button:hover {
  background: rgba(59,130,246,.16) !important;
  border-color: #60a5fa !important;
  color: #fff !important;
}

.create-card-page .product-sale-toggle,
.create-card-page .product-sale-toggle > span,
.create-card-page .product-sale-toggle > input[type="checkbox"] + span,
.admin-edit-page .product-sale-toggle,
.admin-edit-page .product-sale-toggle > span,
.admin-edit-page .product-sale-toggle > input[type="checkbox"] + span {
  color: #22c55e !important;
}

.create-card-page .product-sale-toggle > input[type="checkbox"],
.admin-edit-page .product-sale-toggle > input[type="checkbox"] {
  border-color: #22c55e !important;
}

.create-card-page .product-sale-toggle > input[type="checkbox"]:checked,
.admin-edit-page .product-sale-toggle > input[type="checkbox"]:checked {
  border-color: #22c55e !important;
  background-color: #22c55e !important;
}

.company-name-status-available {
  color: #22c55e !important;
}


/* Superadmin cards table action button colors */
.cards-list-page .card-status-action.is-active{
    color:#22c55e;
    border-color:rgba(34,197,94,.45);
    background:rgba(34,197,94,.10);
}
.cards-list-page .card-status-action.is-active:hover,
.cards-list-page .card-status-action.is-active:focus-visible{
    color:#4ade80;
    border-color:#22c55e;
    background:rgba(34,197,94,.18);
}
.cards-list-page .card-status-action.is-inactive{
    color:#ef4444;
    border-color:rgba(239,68,68,.45);
    background:rgba(239,68,68,.10);
}
.cards-list-page .card-status-action.is-inactive:hover,
.cards-list-page .card-status-action.is-inactive:focus-visible{
    color:#f87171;
    border-color:#ef4444;
    background:rgba(239,68,68,.18);
}
.cards-list-page .admin-edit-action{
    color:#fbbf24;
    border-color:rgba(251,191,36,.45);
    background:rgba(251,191,36,.10);
}
.cards-list-page .admin-edit-action:hover,
.cards-list-page .admin-edit-action:focus-visible{
    color:#fcd34d;
    border-color:#fbbf24;
    background:rgba(251,191,36,.18);
}
.cards-list-page .card-share-action{
    color:#38bdf8;
    border-color:rgba(56,189,248,.45);
    background:rgba(56,189,248,.10);
}
.cards-list-page .card-share-action:hover,
.cards-list-page .card-share-action:focus-visible{
    color:#7dd3fc;
    border-color:#38bdf8;
    background:rgba(56,189,248,.18);
}


/* Superadmin cards table: hover colors for additional action buttons */
.cards-list-page .card-assign-action {
    color: #c084fc;
    border-color: rgba(168, 85, 247, .42);
    background: rgba(168, 85, 247, .09);
}
.cards-list-page .card-assign-action:hover,
.cards-list-page .card-assign-action:focus-visible {
    color: #e9d5ff !important;
    border-color: #a855f7 !important;
    background: rgba(168, 85, 247, .22) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .10);
}

.cards-list-page .card-info-action {
    color: #34d399;
    border-color: rgba(16, 185, 129, .42);
    background: rgba(16, 185, 129, .09);
}
.cards-list-page .card-info-action:hover,
.cards-list-page .card-info-action:focus-visible {
    color: #a7f3d0 !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, .22) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, .10);
}

.cards-list-page .card-youtube-action {
    color: #f87171;
    border-color: rgba(239, 68, 68, .42);
    background: rgba(239, 68, 68, .09);
}
.cards-list-page .card-youtube-action:hover,
.cards-list-page .card-youtube-action:focus-visible {
    color: #fecaca !important;
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, .22) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .10);
}


/* Card action palette shared by admin, superadmin and client pages */


/* Consistent card action colors across Superadmin, Admin and Client card tables */
.cards-list-page .card-status-action.is-active,
.cards-list-page .card-status-action.is-active:focus-visible {
    color: #4ade80 !important;
    border-color: rgba(34,197,94,.48) !important;
    background: rgba(34,197,94,.10) !important;
}
.cards-list-page .card-status-action.is-active:hover {
    color: #bbf7d0 !important;
    border-color: #22c55e !important;
    background: rgba(34,197,94,.22) !important;
}
.cards-list-page .card-status-action.is-inactive,
.cards-list-page .card-status-action.is-inactive:focus-visible {
    color: #f87171 !important;
    border-color: rgba(239,68,68,.48) !important;
    background: rgba(239,68,68,.10) !important;
}
.cards-list-page .card-status-action.is-inactive:hover {
    color: #fecaca !important;
    border-color: #ef4444 !important;
    background: rgba(239,68,68,.22) !important;
}
.cards-list-page .admin-edit-action {
    color: #fbbf24 !important;
    border-color: rgba(251,191,36,.45) !important;
    background: rgba(251,191,36,.10) !important;
}
.cards-list-page .admin-edit-action:hover,
.cards-list-page .admin-edit-action:focus-visible {
    color: #fcd34d !important;
    border-color: #fbbf24 !important;
    background: rgba(251,191,36,.20) !important;
}
.cards-list-page .card-share-action {
    color: #38bdf8 !important;
    border-color: rgba(56,189,248,.45) !important;
    background: rgba(56,189,248,.10) !important;
}
.cards-list-page .card-share-action:hover,
.cards-list-page .card-share-action:focus-visible {
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
    background: rgba(56,189,248,.20) !important;
}
.cards-list-page .card-assign-action {
    color: #c084fc !important;
    border-color: rgba(168,85,247,.45) !important;
    background: rgba(168,85,247,.10) !important;
}
.cards-list-page .card-assign-action:hover,
.cards-list-page .card-assign-action:focus-visible {
    color: #e9d5ff !important;
    border-color: #a855f7 !important;
    background: rgba(168,85,247,.22) !important;
}
.cards-list-page .card-info-action {
    color: #34d399 !important;
    border-color: rgba(16,185,129,.45) !important;
    background: rgba(16,185,129,.10) !important;
}
.cards-list-page .card-info-action:hover,
.cards-list-page .card-info-action:focus-visible {
    color: #a7f3d0 !important;
    border-color: #10b981 !important;
    background: rgba(16,185,129,.22) !important;
}
.cards-list-page .card-youtube-action {
    color: #f87171 !important;
    border-color: rgba(239,68,68,.45) !important;
    background: rgba(239,68,68,.10) !important;
}
.cards-list-page .card-youtube-action:hover,
.cards-list-page .card-youtube-action:focus-visible {
    color: #fecaca !important;
    border-color: #ef4444 !important;
    background: rgba(239,68,68,.22) !important;
}


/* Card gallery upload field */
.gallery-upload-field { grid-column: 1 / -1; }
.gallery-selected-count { margin-top: 8px; color: var(--text-muted, #64748b); font-size: .875rem; }
.gallery-existing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.gallery-existing-item { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--border-color, #d1d5db); border-radius: 10px; background: var(--card-bg, #fff); font-size: .75rem; transition: border-color .18s ease, opacity .18s ease, background .18s ease; }
.gallery-existing-item img { display: block; width: 100%; height: 96px; object-fit: cover; border-radius: 6px; }
.gallery-delete-checkbox { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.gallery-remove-toggle { position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; background: #dc2626; box-shadow: 0 2px 7px rgba(0,0,0,.25); cursor: pointer; z-index: 2; transition: transform .16s ease, background .16s ease; }
.gallery-remove-toggle i { font-size: 13px; line-height: 1; }
.gallery-remove-toggle:hover, .gallery-remove-toggle:focus-visible { background: #b91c1c; transform: scale(1.07); outline: 2px solid rgba(220,38,38,.25); outline-offset: 2px; }
.gallery-remove-caption { display: block; overflow: hidden; color: var(--text-muted, #64748b); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.gallery-existing-item.is-marked-remove { border-color: #dc2626; background: rgba(220,38,38,.06); }
.gallery-existing-item.is-marked-remove img { opacity: .48; }
.gallery-existing-item.is-marked-remove .gallery-remove-toggle { background: #15803d; border-color: rgba(255,255,255,.9); }
.gallery-existing-item.is-marked-remove .gallery-remove-caption { color: #dc2626; font-weight: 600; }
@media (max-width: 480px) { .gallery-existing-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; } .gallery-existing-item { padding: 5px; } .gallery-existing-item img { height: 82px; } .gallery-remove-toggle { top: 7px; right: 7px; width: 25px; height: 25px; } }

.gallery-add-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; cursor: pointer; }
.gallery-add-more i { font-size: .9em; }
.gallery-upload-field [data-gallery-input] { display: block; max-width: 100%; }


/* v20261010: full-width layout for all authenticated pages */
/* Match the available content area on every page, not only Cards. */
.main-wrapper main.page-content {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Remove per-page max-width caps while preserving each page's own padding. */
.main-wrapper main.page-content.admin-create-page,
.main-wrapper main.page-content.admin-list-page,
.main-wrapper main.page-content.admin-edit-page,
.main-wrapper main.page-content.admin-profile-page,
.main-wrapper main.page-content.template-wallpaper-page,
.main-wrapper main.page-content.settings-page,
.main-wrapper main.page-content.theme-settings-page,
.main-wrapper main.page-content.cards-list-page,
.main-wrapper main.page-content.orders-page {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Main panels/tables should use the full width of their page content. */
.main-wrapper main.page-content > .form-card,
.main-wrapper main.page-content > section.form-card,
.main-wrapper main.page-content > .orders-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep small-screen gutters comfortable while retaining full-width layout. */
@media (max-width: 767px) {
  .main-wrapper main.page-content.admin-create-page,
  .main-wrapper main.page-content.admin-list-page,
  .main-wrapper main.page-content.admin-edit-page,
  .main-wrapper main.page-content.admin-profile-page,
  .main-wrapper main.page-content.template-wallpaper-page,
  .main-wrapper main.page-content.settings-page,
  .main-wrapper main.page-content.theme-settings-page,
  .main-wrapper main.page-content.cards-list-page,
  .main-wrapper main.page-content.orders-page {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}
/* end v20261010 full-width layout */


/* =========================================================
   v415 BUTTON MOTION — theme colors are read from theme.php vars
   Primary actions swap the configured colors on hover.
   Secondary Reset/Back controls keep a soft single-color shine.
   Table action controls are intentionally excluded.
   ========================================================= */
.primary-action-button:not(.table-action):not(.admin-icon-action):not(.card-status-action),
.btn-primary:not(.table-action):not(.admin-icon-action):not(.card-status-action) {
  background-image: linear-gradient(110deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50% !important;
  transition: background-position .55s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, transform .3s ease, filter .3s ease !important;
  box-shadow: 0 2px 5px rgba(15,23,42,.10);
  position: relative;
  overflow: hidden;
}
.primary-action-button:not(.table-action):not(.admin-icon-action):not(.card-status-action):hover,
.btn-primary:not(.table-action):not(.admin-icon-action):not(.card-status-action):hover {
  background-position: 100% 50% !important;
  filter: none !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--secondary) 28%, transparent);
}
.primary-action-button:not(.table-action):not(.admin-icon-action):not(.card-status-action):hover i,
.btn-primary:not(.table-action):not(.admin-icon-action):not(.card-status-action):hover i {
  animation: appButtonIconFloat .42s ease both;
}
@keyframes appButtonIconFloat { 0%{transform:translateY(0)} 45%{transform:translateY(-2px)} 100%{transform:translateY(0)} }

/* Soft monochrome shine for secondary controls such as Reset and Back to Dashboard. */
.secondary-action-button,
button[type="reset"],
a.back-to-dashboard,
.back-to-dashboard-button {
  background-color: #17191d !important;
  background-image: linear-gradient(110deg, #17191d 0%, #17191d 38%, #343840 50%, #17191d 62%, #17191d 100%) !important;
  background-size: 240% 100% !important;
  background-position: 100% 50% !important;
  color: #e5e7eb !important;
  border: 1px solid #343840 !important;
  transition: background-position .7s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.secondary-action-button:hover,
button[type="reset"]:hover,
a.back-to-dashboard:hover,
.back-to-dashboard-button:hover {
  background-position: 0% 50% !important;
  border-color: #555b65 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.20);
  transform: translateY(-1px);
}
/* Do not animate table action buttons, status toggles, or compact icon controls. */
.admin-table .primary-action-button, .data-table .primary-action-button,
.table-actions .primary-action-button, .admin-icon-action, .card-status-action {
  background-image: none !important; background-size: auto !important; background-position: initial !important; animation: none !important; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .primary-action-button, .btn-primary, .secondary-action-button, button[type="reset"], a.back-to-dashboard, .back-to-dashboard-button { transition: none !important; animation: none !important; }
}


/* =========================================================
   RESTORED BUTTON HOVER SHINE
   Subtle diagonal light sweep on hover, without changing the
   existing charcoal/grey button palette or button dimensions.
   ========================================================= */
button:not(.admin-icon-action):not(.card-status-action):not(.table-action),
input[type="submit"], input[type="button"], input[type="reset"],
.btn, .btn-primary, .primary-action-button,
.secondary-action-button, a.back-to-dashboard, .back-to-dashboard-button {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
}

button:not(.admin-icon-action):not(.card-status-action):not(.table-action)::after,
input[type="submit"]::after, input[type="button"]::after, input[type="reset"]::after,
.btn::after, .btn-primary::after, .primary-action-button::after,
.secondary-action-button::after, a.back-to-dashboard::after, .back-to-dashboard-button::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -75%;
  width: 42%;
  height: 220%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 20%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.06) 80%, transparent 100%);
  transition: left .65s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
  z-index: 2;
}

button:not(.admin-icon-action):not(.card-status-action):not(.table-action):hover::after,
input[type="submit"]:hover::after, input[type="button"]:hover::after, input[type="reset"]:hover::after,
.btn:hover::after, .btn-primary:hover::after, .primary-action-button:hover::after,
.secondary-action-button:hover::after, a.back-to-dashboard:hover::after, .back-to-dashboard-button:hover::after {
  left: 135%;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  button::after, input[type="submit"]::after, input[type="button"]::after, input[type="reset"]::after,
  .btn::after, .btn-primary::after, .primary-action-button::after,
  .secondary-action-button::after, a.back-to-dashboard::after, .back-to-dashboard-button::after {
    transition: none !important;
  }
}


/* Final alignment fix: password visibility controls stay centered inside their fields. */
.password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  line-height: normal !important;
  isolation: isolate;
}
.password-input-wrap > input,
.password-input-wrap > input[type="password"],
.password-input-wrap > input[type="text"] {
  display: block !important;
  width: 100% !important;
  min-height: 3rem;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-right: 3.25rem !important;
}
.password-input-wrap > .password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: .65rem !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 5 !important;
}
.password-input-wrap > .password-toggle i {
  display: block !important;
  line-height: 1 !important;
  margin: 0 !important;
}
/* Profile upload: remove decorative image glyph beside the native file picker. */
.profile-upload-input .input-with-icon > i { display: none !important; }
.profile-upload-input .input-with-icon > input[type="file"] {
  padding-left: .7rem !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
}


/* Global password-eye alignment: keep every visibility toggle inside the input, at the right edge. */
html body .password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html body .password-input-wrap > input,
html body .password-input-wrap > input[type="password"],
html body .password-input-wrap > input[type="text"] {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-right: 3.5rem !important;
}
html body .password-input-wrap > button.password-toggle,
html body .password-input-wrap > .password-toggle {
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-block-end: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: .65rem !important;
  top: 50% !important;
  right: .65rem !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 20 !important;
}
html body .password-input-wrap > button.password-toggle > i,
html body .password-input-wrap > .password-toggle > i {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Clean page title/description headers across Admin, Superadmin and Client pages */
.form-card-header,
.page-card-header,
.orders-page .form-card-header,
.orders-page .orders-card-header,
.admin-create-page .form-card-header,
.admin-edit-page .form-card-header,
.cards-list-page .form-card-header,
.settings-page .form-card-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.form-card-header > div:first-child,
.page-card-header > div:first-child,
.orders-page .form-card-header > div:first-child {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.form-card-header h1,
.page-card-header h1 { letter-spacing: -.02em; }
.form-card-header p,
.page-card-header p { max-width: 70ch; line-height: 1.55; }


/* FINAL PASSWORD FIELD LAYOUT SAFETY NET — toggle must remain inside the input. */
html body .password-input-wrap { position:relative!important; display:block!important; width:100%!important; min-width:0!important; height:auto!important; padding:0!important; margin:0!important; box-sizing:border-box!important; }
html body .password-input-wrap > input[type="password"],
html body .password-input-wrap > input[type="text"] { display:block!important; position:relative!important; width:100%!important; max-width:100%!important; margin:0!important; box-sizing:border-box!important; padding-right:3.5rem!important; }
html body .password-input-wrap > button.password-toggle { position:absolute!important; top:50%!important; right:.65rem!important; bottom:auto!important; left:auto!important; transform:translateY(-50%)!important; float:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:2.25rem!important; height:2.25rem!important; min-width:2.25rem!important; min-height:2.25rem!important; margin:0!important; padding:0!important; line-height:1!important; z-index:20!important; }
html body .password-input-wrap > button.password-toggle > i { display:block!important; position:static!important; margin:0!important; line-height:1!important; transform:none!important; pointer-events:none!important; }


/* Company-name live validation — compact, polished SaaS status chips. */
.company-name-status:not(:empty) {
  display: inline-flex !important;
  align-items: center !important;
  gap: .42rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: .5rem 0 0 !important;
  padding: .42rem .68rem !important;
  border: 1px solid transparent !important;
  border-radius: .6rem !important;
  box-sizing: border-box !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  vertical-align: top !important;
}
.company-name-status:not(:empty) i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.company-name-status-available {
  color: #17663a !important;
  background: #eaf7ef !important;
  background-color: #eaf7ef !important;
  border-color: #bfe4cc !important;
}
.company-name-status-error {
  color: #a12e3a !important;
  background: #fff0f1 !important;
  background-color: #fff0f1 !important;
  border-color: #f1c6cc !important;
}
.company-name-status-checking {
  color: #475569 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-color: #dbe3ed !important;
}

/* v309: Hide decorative submenu arrows whenever the sidebar is compact. */
html body #sidebar.collapsed .sidebar-nav .nav-menu-toggle > .chevron,
html body #sidebar.collapsed .sidebar-nav .nav-item.nav-menu-toggle > .chevron {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* Template Wallpapers: keep the page icon aligned on the right of the title/description. */
html body .template-wallpaper-page .template-wallpaper-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  width: 100%;
}
html body .template-wallpaper-page .template-wallpaper-hero-copy {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
html body .template-wallpaper-page .template-wallpaper-hero-icon {
  order: 2;
  margin-left: auto !important;
  flex: 0 0 2.5rem !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
}
html body .template-wallpaper-page .template-wallpaper-hero-icon i {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  html body .template-wallpaper-page .template-wallpaper-hero-icon {
    flex-basis: 2.25rem !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}

/* Cards toolbar — match the clean Clients page filter layout. */
.cards-list-page .cards-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
}
.cards-list-page .cards-toolbar .cards-search-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.cards-list-page .cards-toolbar .cards-search-input {
  width: 100% !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  box-sizing: border-box !important;
}
.cards-list-page .cards-toolbar .cards-filter-wrap {
  position: relative !important;
  display: block !important;
  flex: 0 0 11.5rem !important;
  width: 11.5rem !important;
  min-width: 0 !important;
}
.cards-list-page .cards-toolbar .cards-filter-wrap > .fa-filter {
  position: absolute !important;
  left: .85rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  font-size: .82rem !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.cards-list-page .cards-toolbar .cards-status-filter {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 100% !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  padding: .65rem 2rem .65rem 2.25rem !important;
  box-sizing: border-box !important;
  background-image: none !important;
  border-radius: .65rem !important;
  font: inherit !important;
  font-size: .85rem !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}
.cards-list-page .cards-toolbar .cards-date-filter-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  gap: .55rem !important;
  margin: 0 !important;
}
.cards-list-page .cards-toolbar .cards-date-filter {
  flex: 0 0 155px !important;
  width: 155px !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  box-sizing: border-box !important;
}
.cards-list-page .cards-toolbar .cards-date-clear {
  flex: 0 0 2.7rem !important;
  width: 2.7rem !important;
  height: 2.7rem !important;
  min-width: 2.7rem !important;
  border-radius: .65rem !important;
}
@media (max-width: 900px) {
  .cards-list-page .cards-toolbar {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .cards-list-page .cards-toolbar .cards-search-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  .cards-list-page .cards-toolbar .cards-filter-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .cards-list-page .cards-toolbar .cards-date-filter-wrap {
    flex: 1 1 0 !important;
    min-width: 255px !important;
  }
  .cards-list-page .cards-toolbar .cards-date-filter {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .cards-list-page .cards-toolbar {
    gap: .6rem !important;
  }
  .cards-list-page .cards-toolbar .cards-filter-wrap,
  .cards-list-page .cards-toolbar .cards-date-filter-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .cards-list-page .cards-toolbar .cards-status-filter {
    width: 100% !important;
  }
  .cards-list-page .cards-toolbar .cards-date-filter {
    flex: 1 1 auto !important;
    width: auto !important;
  }
}



/* Cards filter icons: place status and creator symbols inside their select fields. */
.cards-list-page .cards-toolbar .cards-filter-wrap {
  position: relative !important;
  display: block !important;
  flex: 0 0 11.5rem !important;
  width: 11.5rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}
.cards-list-page .cards-toolbar .cards-filter-wrap > .fa-filter,
.cards-list-page .cards-toolbar .cards-filter-wrap > .fa-user-tag {
  position: absolute !important;
  left: .85rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}
.cards-list-page .cards-toolbar .cards-filter-wrap > .cards-status-filter {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 2.25rem !important;
  padding-right: 2rem !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .cards-list-page .cards-toolbar .cards-filter-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .cards-list-page .cards-toolbar .cards-filter-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Creator filter: reserve enough room for the full selected label (e.g. All creators (28)). */
.cards-list-page .cards-toolbar .cards-creator-filter-wrap {
  flex: 0 0 13.5rem !important;
  width: 13.5rem !important;
  min-width: 13.5rem !important;
}
.cards-list-page .cards-toolbar .cards-creator-filter-wrap > .cards-status-filter {
  padding-left: 2.25rem !important;
  padding-right: 2.15rem !important;
  font-size: .82rem !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
@media (max-width: 900px) {
  .cards-list-page .cards-toolbar .cards-creator-filter-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}
@media (max-width: 767px) {
  .cards-list-page .cards-toolbar .cards-creator-filter-wrap {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}