/* /Components/CCard/CCard.razor.rz.scp.css */
/* ===== CCARD COMPONENT - WORLD CLASS UI/UX ===== */
/* Note: Design tokens and animations should be included globally in the main app CSS */

/* ===== BASE CARD STYLES ===== */
.ccard[b-s4qjr1mlxc] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gray-50);
    border: 1px solid #e2e8f0; /* Use a light but visible grey */

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
    isolation: isolate;
    cursor: pointer;
    outline: none;
    transform: translateZ(0); /* GPU acceleration hint */
}
.ccard-container[b-s4qjr1mlxc] {
    background-color: var(--gray-50);
    border-color: #e2e8f0;
    border-width: thin;
    position: relative;
    z-index: 2;
}
/* Remove cursor when not interactive */
.ccard:not([role="button"])[b-s4qjr1mlxc] {
  cursor: default;
}

/* ===== 12-STATE INTERACTION MODEL ===== */

/* 1. Default State */
.ccard.ccard--default[b-s4qjr1mlxc] {
    background: var(--surface-color);
    border-color: #e2e8f0;
    box-shadow: var(--shadow-2);
    transform: translateY(0) scale(1);
}

/* 2. Hover State */
.ccard.ccard--hoverable:hover:not(.ccard--disabled):not(.ccard--loading)[b-s4qjr1mlxc],
.ccard[data-state="hover"]:not(.ccard--disabled):not(.ccard--loading)[b-s4qjr1mlxc] {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-4);
  transform: translateY(-2px) scale(1.005);
}

/* 3. Active State */
.ccard:active:not(.ccard--disabled):not(.ccard--loading)[b-s4qjr1mlxc],
.ccard[data-state="active"]:not(.ccard--disabled):not(.ccard--loading)[b-s4qjr1mlxc] {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--shadow-3);
}

/* 4. Focus State */
.ccard:focus-visible:not(.ccard--disabled)[b-s4qjr1mlxc],
.ccard[data-state="focus"]:not(.ccard--disabled)[b-s4qjr1mlxc] {
  outline: 3px solid var(--primary-400);
  outline-offset: 2px;
}

/* 5. Selected State */
.ccard.ccard--selected[b-s4qjr1mlxc],
.ccard[data-state="selected"][b-s4qjr1mlxc] {
  background: var(--primary-50);
  border-color: var(--primary-500);
  box-shadow: var(--shadow-primary);
  transform: translateY(-1px) scale(1.002);
}

/* 6. Disabled State */
.ccard.ccard--disabled[b-s4qjr1mlxc],
.ccard[data-state="disabled"][b-s4qjr1mlxc] {
  background: var(--neutral-100);
  color: var(--text-color-muted);
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-1);
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* 7. Loading State */
.ccard.ccard--loading[b-s4qjr1mlxc],
.ccard[data-state="loading"][b-s4qjr1mlxc] {
  pointer-events: none;
  position: relative;
}

/* 8. Success State */
.ccard.ccard--success[b-s4qjr1mlxc],
.ccard[data-state="success"][b-s4qjr1mlxc] {
  background: var(--success-50);
  border-color: var(--success-400);
  box-shadow: var(--shadow-success);
}

/* 9. Warning State */
.ccard.ccard--warning[b-s4qjr1mlxc],
.ccard[data-state="warning"][b-s4qjr1mlxc] {
  background: var(--warning-50);
  border-color: var(--warning-400);
  box-shadow: var(--shadow-warning);
}

/* 10. Danger/Error State */
.ccard.ccard--danger[b-s4qjr1mlxc],
.ccard[data-state="danger"][b-s4qjr1mlxc] {
  background: var(--danger-50);
  border-color: var(--danger-400);
  box-shadow: var(--shadow-danger);
}

/* 11. Collapsed State */
.ccard.ccard--collapsed[b-s4qjr1mlxc],
.ccard[data-state="collapsed"][b-s4qjr1mlxc] {
  box-shadow: var(--shadow-1);
}

/* 12. Premium State */
.ccard.ccard--premium[b-s4qjr1mlxc],
.ccard[data-state="premium"][b-s4qjr1mlxc] {
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
    box-shadow: var(--shadow-5);
    position: relative;
}

/* ===== CARD VARIANT STYLES ===== */

/* Primary Variant */
.ccard.ccard--primary[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  color: var(--primary-900);
}

.ccard.ccard--primary:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
  box-shadow: var(--shadow-primary);
}

/* Secondary Variant */
.ccard.ccard--secondary[b-s4qjr1mlxc] {
    background: linear-gradient(135deg, var(--secondary-50) 0%, var(--secondary-100) 100%);
    border-bottom: 1.5px solid #e2e8f0; /* Use a light but visible grey */
    color: var(--secondary-900);
}

    .ccard.ccard--secondary:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
        background: linear-gradient(135deg, var(--secondary-100) 0%, var(--secondary-200) 100%);
        border-bottom: 1.5px solid #e2e8f0; /* Use a light but visible grey */
    }

/* Success Variant */
.ccard.ccard--success[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--success-50) 0%, var(--success-100) 100%);
  border-color: var(--success-300);
  color: var(--success-900);
}

/* Danger Variant */
.ccard.ccard--danger[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--danger-50) 0%, var(--danger-100) 100%);
  border-color: var(--danger-300);
  color: var(--danger-900);
}

/* Warning Variant */
.ccard.ccard--warning[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--warning-50) 0%, var(--warning-100) 100%);
  border-color: var(--warning-300);
  color: var(--warning-900);
}

/* Info Variant */
.ccard.ccard--info[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, hsl(195, 100%, 97%) 0%, hsl(195, 85%, 92%) 100%);
  border-color: hsl(195, 65%, 73%);
  color: hsl(195, 100%, 15%);
}

/* Light Variant */
.ccard.ccard--light[b-s4qjr1mlxc] {
  background: var(--neutral-50);
  box-shadow: var(--shadow-1);
}

/* Dark Variant */
.ccard.ccard--dark[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-900) 100%);
  color: var(--neutral-100);
  box-shadow: var(--shadow-4);
}

/* Gradient Variant - Premium Rainbow Effect */
.ccard.ccard--gradient[b-s4qjr1mlxc] {
  background: linear-gradient(135deg, 
    var(--primary-500) 0%, 
    var(--secondary-500) 25%, 
    var(--success-500) 50%, 
    var(--warning-500) 75%, 
    var(--danger-500) 100%);
  background-size: 400% 400%;
  animation: gradient-shift-b-s4qjr1mlxc 6s ease-in-out infinite;
  color: white;
  border: none;
  box-shadow: var(--shadow-6);
}

@keyframes gradient-shift-b-s4qjr1mlxc {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== ELEVATION STYLES ===== */

.ccard.ccard--elevation-flat[b-s4qjr1mlxc] {
    box-shadow: none;
    border: 1px solid #e2e8f0;
}

.ccard.ccard--elevation-low[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-2);
}

.ccard.ccard--elevation-raised[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-3);
  transform: translateY(-1px);
}

.ccard.ccard--elevation-elevated[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-4);
  transform: translateY(-2px);
}

.ccard.ccard--elevation-floating[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-6);
  transform: translateY(-4px);
}

/* ===== SHADOW DEPTH STYLES ===== */

.ccard.ccard--shadow-none[b-s4qjr1mlxc] {
  box-shadow: none !important;
}

.ccard.ccard--shadow-subtle[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-1);
}

.ccard.ccard--shadow-low[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-2);
}

.ccard.ccard--shadow-medium[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-3);
}

.ccard.ccard--shadow-high[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-4);
}

.ccard.ccard--shadow-veryhigh[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-5);
}

.ccard.ccard--shadow-extreme[b-s4qjr1mlxc] {
  box-shadow: var(--shadow-6);
}

/* ===== HOVER STYLE VARIANTS ===== */

/* Subtle Hover */
.ccard.ccard--hover-subtle:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-3);
  transform: translateY(-1px) scale(1.002);
}

/* Standard Hover */
.ccard.ccard--hover-standard:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  border-color: var(--primary-300);
  box-shadow: var(--shadow-4);
  transform: translateY(-2px) scale(1.005);
}

/* Pronounced Hover */
.ccard.ccard--hover-pronounced:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-5);
  transform: translateY(-4px) scale(1.01);
}

/* Dramatic Hover */
.ccard.ccard--hover-dramatic:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-6);
  transform: translateY(-6px) scale(1.02) rotate(1deg);
}

/* Magnetic Hover - Advanced Effect */
.ccard.ccard--hover-magnetic[b-s4qjr1mlxc] {
  transition: all var(--duration-normal) var(--ease-out);
}

.ccard.ccard--hover-magnetic:hover:not(.ccard--disabled)[b-s4qjr1mlxc] {
  border-color: var(--primary-400);
  box-shadow: var(--shadow-5);
  transform: translateY(-3px) scale(1.008);
  cursor: none; /* Hide default cursor for magnetic effect */
}

/* ===== CARD STRUCTURE ===== */

.ccard-container[b-s4qjr1mlxc] {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* ===== HEADER STYLES ===== */

.ccard-header[b-s4qjr1mlxc] {
    display: flex;
    align-items: center;
    /* Other styles remain */
    border-bottom: 1px solid #e2e8f0; /* Use a light but visible grey */
    padding-bottom: 1rem; /* Ensure adequate spacing */
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, transparent 100%);
}

/* Reduced bottom padding for headers containing tabs */
.ccard-header:has(.nav-tabs)[b-s4qjr1mlxc],
.ccard-header:has(ul[role="tablist"])[b-s4qjr1mlxc] {
    padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.ccard-header-content[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
}

.ccard-title-section[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.ccard-icon[b-s4qjr1mlxc] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.ccard-title[b-s4qjr1mlxc] {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-color);
  margin: 0;
  line-height: var(--leading-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccard-custom-header[b-s4qjr1mlxc] {
  flex: 1;
  min-width: 0;
}

.ccard-header-actions[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.ccard-actions[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Collapse Toggle Button */
.ccard-collapse-toggle[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.ccard-collapse-toggle:hover[b-s4qjr1mlxc] {
  background: var(--surface-color-secondary);
  border-color: var(--primary-300);
  color: var(--primary-600);
}

.ccard-collapse-toggle:disabled[b-s4qjr1mlxc] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ccard-collapse-icon[b-s4qjr1mlxc] {
  transition: transform var(--duration-normal) var(--ease-out);
}

.ccard-collapse-icon--collapsed[b-s4qjr1mlxc] {
  transform: rotate(-90deg);
}

/* ===== BODY STYLES ===== */

.ccard-body-container[b-s4qjr1mlxc] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Smooth transition for content changes */
  transition: opacity 0.35s ease-out;
}

.ccard-body[b-s4qjr1mlxc] {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;

  /* Fade-in animation when loading completes */
  animation: ccard-fade-in-b-s4qjr1mlxc 0.35s ease-out;
}

/* Edge-to-edge mode for grids and tables */
.ccard-body--edge-to-edge[b-s4qjr1mlxc] {
  padding: 0 !important;
}

/* Empty State */
.ccard-empty-state[b-s4qjr1mlxc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-color-muted);
}

.empty-state-icon[b-s4qjr1mlxc] {
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.empty-state-text[b-s4qjr1mlxc] {
  font-size: var(--text-sm);
  margin: 0;
}

/* ===== LOADING STATES ===== */

.ccard-loading[b-s4qjr1mlxc] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* Overlay Loading */
.ccard-loading--overlay .ccard-loading-overlay[b-s4qjr1mlxc] {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  z-index: 10;
  border-radius: inherit;
}

/* Loading overlay base - hidden by default */
.ccard-loading-overlay-absolute[b-s4qjr1mlxc] {
  visibility: hidden;
  opacity: 0;
  will-change: opacity, visibility;
}

/* Visible state - data attribute only changes when value actually changes */
.ccard-loading-overlay-absolute[data-loading-state="visible"][b-s4qjr1mlxc] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0s, visibility 0s 0s;
}

/* Hidden state - fade out faster to allow body content to fade in smoothly */
.ccard-loading-overlay-absolute[data-loading-state="hidden"][b-s4qjr1mlxc] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-in-out 0s, visibility 0s 0.25s;
}

.loading-spinner[b-s4qjr1mlxc] {
  width: 32px;
  height: 32px;
  border: 3px solid #e0e7ff;
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  animation: spin-only-b-s4qjr1mlxc 0.8s linear infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes spin-only-b-s4qjr1mlxc {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade-in animation for content when loading completes */
@keyframes ccard-fade-in-b-s4qjr1mlxc {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-text[b-s4qjr1mlxc] {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
  font-weight: var(--font-medium);
}

/* Inline Loading */
.ccard-loading--inline .ccard-loading-inline[b-s4qjr1mlxc] {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  justify-content: center;
}

.loading-spinner-small[b-s4qjr1mlxc] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary-200);
  border-top: 2px solid var(--primary-500);
  border-radius: var(--radius-full);
  animation: spin-only-b-s4qjr1mlxc var(--duration-fast) linear infinite;
  transform-origin: center;
  will-change: transform;
}

.loading-text-small[b-s4qjr1mlxc] {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

/* Skeleton Loading */
.ccard-loading--skeleton .ccard-loading-skeleton[b-s4qjr1mlxc] {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton-header[b-s4qjr1mlxc] {
  height: 24px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
  width: 60%;
}

.skeleton-content[b-s4qjr1mlxc] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-line[b-s4qjr1mlxc] {
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.skeleton-line--75[b-s4qjr1mlxc] { width: 75%; }
.skeleton-line--50[b-s4qjr1mlxc] { width: 50%; }
.skeleton-line--90[b-s4qjr1mlxc] { width: 90%; }

.skeleton-footer[b-s4qjr1mlxc] {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.skeleton-button[b-s4qjr1mlxc] {
  height: 32px;
  width: 80px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.skeleton-button--secondary[b-s4qjr1mlxc] {
  width: 60px;
}

/* Shimmer Loading */
.ccard-loading--shimmer .ccard-loading-shimmer[b-s4qjr1mlxc] {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shimmer-block[b-s4qjr1mlxc] {
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-lg);
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.shimmer-block--header[b-s4qjr1mlxc] {
  height: 32px;
  width: 70%;
}

.shimmer-content[b-s4qjr1mlxc] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.shimmer-line[b-s4qjr1mlxc] {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.shimmer-line--short[b-s4qjr1mlxc] { width: 60%; }
.shimmer-line--medium[b-s4qjr1mlxc] { width: 80%; }

/* Progress Loading */
.ccard-loading--progress .ccard-loading-progress[b-s4qjr1mlxc] {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.progress-container[b-s4qjr1mlxc] {
  width: 100%;
  max-width: 200px;
}

.progress-bar[b-s4qjr1mlxc] {
  width: 100%;
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-indicator[b-s4qjr1mlxc] {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400), var(--primary-500));
  background-size: 200% 100%;
  border-radius: var(--radius-full);
  animation: progress-indeterminate-b-s4qjr1mlxc 2s var(--ease-in-out) infinite;
}

@keyframes progress-indeterminate-b-s4qjr1mlxc {
  0% { 
    width: 0%; 
    transform: translateX(-100%);
  }
  50% { 
    width: 100%; 
    transform: translateX(0%);
  }
  100% { 
    width: 100%; 
    transform: translateX(100%);
  }
}

.progress-text[b-s4qjr1mlxc] {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
  text-align: center;
}

/* Pulse Loading */
.ccard-loading--pulse .ccard-loading-pulse[b-s4qjr1mlxc] {
  padding: var(--space-lg);
}

.pulse-content[b-s4qjr1mlxc] {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pulse-block[b-s4qjr1mlxc] {
  background: var(--primary-100);
  border-radius: var(--radius-lg);
  animation: pulse var(--duration-slower) var(--ease-in-out) infinite;
}

.pulse-block--large[b-s4qjr1mlxc] {
  height: 40px;
}

.pulse-block--medium[b-s4qjr1mlxc] {
  height: 20px;
  width: 80%;
}

.pulse-block--small[b-s4qjr1mlxc] {
  height: 16px;
  width: 60%;
}

/* ===== FOOTER STYLES ===== */

.ccard-footer[b-s4qjr1mlxc] {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(0deg, hsla(0, 0%, 100%, 0.5) 0%, transparent 100%);
}

.ccard-footer-content[b-s4qjr1mlxc] {
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* ===== GLASSMORPHISM EFFECTS ===== */

.ccard.ccard--glassmorphism[b-s4qjr1mlxc] {
  background: var(--glass-bg-medium);
  backdrop-filter: var(--glass-blur-medium);
  -webkit-backdrop-filter: var(--glass-blur-medium);
      border: 1.5px solid #e2e8f0; /* Use a light but visible grey */

  box-shadow: var(--glass-shadow);
}

.ccard-glassmorphism-overlay[b-s4qjr1mlxc] {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    hsla(0, 0%, 100%, 0.1) 0%,
    hsla(0, 0%, 100%, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== PARTICLE EFFECTS ===== */

.ccard-particles[b-s4qjr1mlxc] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Floating Dots */
.ccard--particles-floatingdots .particle-dot[b-s4qjr1mlxc] {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary-400);
  border-radius: var(--radius-full);
  opacity: 0.6;
}

.particle-dot-1[b-s4qjr1mlxc] {
  top: 20%;
  left: 10%;
  animation: float-particle-1-b-s4qjr1mlxc 8s var(--ease-in-out) infinite;
}

.particle-dot-2[b-s4qjr1mlxc] {
  top: 60%;
  right: 15%;
  animation: float-particle-2-b-s4qjr1mlxc 10s var(--ease-in-out) infinite;
}

.particle-dot-3[b-s4qjr1mlxc] {
  bottom: 30%;
  left: 20%;
  animation: float-particle-3-b-s4qjr1mlxc 12s var(--ease-in-out) infinite;
}

@keyframes float-particle-1-b-s4qjr1mlxc {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -15px); }
  50% { transform: translate(-5px, -10px); }
  75% { transform: translate(15px, 5px); }
}

@keyframes float-particle-2-b-s4qjr1mlxc {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-12px, 10px); }
  50% { transform: translate(8px, -20px); }
  75% { transform: translate(-8px, -5px); }
}

@keyframes float-particle-3-b-s4qjr1mlxc {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(15px, -8px); }
  50% { transform: translate(-10px, 12px); }
  75% { transform: translate(5px, -15px); }
}

/* Sparkles */
.ccard--particles-sparkles .particle-sparkle[b-s4qjr1mlxc] {
  position: absolute;
  font-size: 12px;
  opacity: 0;
  animation: sparkle-twinkle-b-s4qjr1mlxc 3s var(--ease-in-out) infinite;
}

.particle-sparkle-1[b-s4qjr1mlxc] {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
}

.particle-sparkle-2[b-s4qjr1mlxc] {
  top: 70%;
  right: 25%;
  animation-delay: 0.5s;
}

.particle-sparkle-3[b-s4qjr1mlxc] {
  bottom: 20%;
  left: 70%;
  animation-delay: 1s;
}

.particle-sparkle-4[b-s4qjr1mlxc] {
  top: 40%;
  right: 10%;
  animation-delay: 1.5s;
}

@keyframes sparkle-twinkle-b-s4qjr1mlxc {
  0%, 20%, 100% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  10% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}

/* Geometric Shapes */
.ccard--particles-geometric .particle-geometric[b-s4qjr1mlxc] {
  position: absolute;
  opacity: 0.3;
}

.particle-triangle[b-s4qjr1mlxc] {
  top: 20%;
  right: 20%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--secondary-400);
  animation: geometric-rotate-b-s4qjr1mlxc 6s linear infinite;
}

.particle-circle[b-s4qjr1mlxc] {
  bottom: 30%;
  left: 30%;
  width: 12px;
  height: 12px;
  background: var(--success-400);
  border-radius: var(--radius-full);
  animation: geometric-pulse-b-s4qjr1mlxc 4s var(--ease-in-out) infinite;
}

.particle-square[b-s4qjr1mlxc] {
  top: 60%;
  right: 30%;
  width: 8px;
  height: 8px;
  background: var(--warning-400);
  transform-origin: center;
  animation: geometric-rotate-b-s4qjr1mlxc 8s linear infinite reverse;
}

@keyframes geometric-rotate-b-s4qjr1mlxc {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes geometric-pulse-b-s4qjr1mlxc {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* Organic Blobs */
.ccard--particles-organic .particle-organic[b-s4qjr1mlxc] {
  position: absolute;
  border-radius: 50% 40% 60% 30%;
  opacity: 0.2;
  animation: organic-morph-b-s4qjr1mlxc 10s var(--ease-in-out) infinite;
}

.particle-blob-1[b-s4qjr1mlxc] {
  top: 10%;
  right: 10%;
  width: 20px;
  height: 20px;
  background: var(--primary-300);
  animation-delay: 0s;
}

.particle-blob-2[b-s4qjr1mlxc] {
  bottom: 15%;
  left: 15%;
  width: 15px;
  height: 15px;
  background: var(--secondary-300);
  animation-delay: 2s;
}

@keyframes organic-morph-b-s4qjr1mlxc {
  0%, 100% { 
    border-radius: 50% 40% 60% 30%;
    transform: rotate(0deg) scale(1);
  }
  25% { 
    border-radius: 30% 60% 40% 50%;
    transform: rotate(90deg) scale(1.1);
  }
  50% { 
    border-radius: 60% 30% 50% 40%;
    transform: rotate(180deg) scale(0.9);
  }
  75% { 
    border-radius: 40% 50% 30% 60%;
    transform: rotate(270deg) scale(1.2);
  }
}

/* Interactive Particles */
.ccard--particles-interactive .particle-interactive[b-s4qjr1mlxc] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--primary-200) 0%, transparent 70%);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

/* Interactive particles are controlled by JavaScript on mouse movement */

/* ===== GRADIENT BORDER ANIMATION ===== */

.ccard-gradient-border[b-s4qjr1mlxc] {
  position: absolute;
  inset: -2px;
  background: conic-gradient(
    from 0deg,
    var(--primary-500) 0deg,
    var(--secondary-500) 90deg,
    var(--success-500) 180deg,
    var(--warning-500) 270deg,
    var(--primary-500) 360deg
  );
  border-radius: calc(var(--radius-lg) + 2px);
  animation: gradient-border-spin-b-s4qjr1mlxc 4s linear infinite;
  z-index: 1;
  opacity: 0.7;
}

.ccard.ccard--gradient-border .ccard-gradient-border[b-s4qjr1mlxc] {
  opacity: 1;
}

@keyframes gradient-border-spin-b-s4qjr1mlxc {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RAINBOW BORDER EFFECTS ===== */

/* Rainbow gradient definition */
:root[b-s4qjr1mlxc] {
  --rainbow-gradient: linear-gradient(
    90deg,
    #ff0000 0%,     /* Red */
    #ff7f00 12.5%,  /* Orange */
    #ffff00 25%,    /* Yellow */
    #7fff00 37.5%,  /* Yellow-Green */
    #00ff00 50%,    /* Green */
    #00ff7f 62.5%,  /* Spring Green */
    #00ffff 75%,    /* Cyan */
    #0080ff 87.5%,  /* Azure */
    #0000ff 100%,   /* Blue */
    #7f00ff 112.5%, /* Blue-Violet */
    #ff00ff 125%,   /* Magenta */
    #ff007f 137.5%, /* Rose */
    #ff0000 150%    /* Back to Red for seamless loop */
  );
}

/* Base rainbow border container - Preserve grey border and add rainbow */
.ccard.ccard--rainbow-border[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
}

.ccard.ccard--rainbow-border[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: var(--rainbow-gradient);
  background-size: 400% 100%;
  border-radius: inherit;
  z-index: 1;
  animation: rainbow-flow-b-s4qjr1mlxc 12s linear infinite;
}

/* Rainbow border animation */
@keyframes rainbow-shift-b-s4qjr1mlxc {
  0% { background-position: auto, 0% 50%; }
  100% { background-position: auto, 400% 50%; }
}

/* Top border position - Animated rainbow gradient using pseudo-element */
.ccard.ccard--rainbow-top[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
  overflow: visible; /* Allow pseudo-element to show */
}

.ccard.ccard--rainbow-top[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  top: -1px; /* Cover the top grey border */
  left: -1px;
  right: -1px;
  height: var(--rainbow-thickness, 3px);
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7f00 14.3%,
    #ffff00 28.6%,
    #00ff00 42.9%,
    #0000ff 52%,
    #4b0082 61.4%,
    #9400d3 75.7%,
    #ff0000 90%,
    #ff7f00 100%
  );
  background-size: 300% 100%;
  z-index: 10;
  border-radius: inherit;
  animation: rainbow-flow-b-s4qjr1mlxc 12s linear infinite;
  transition: animation-duration 0.5s ease !important;
}

/* Hover effect - Keep same speed as normal animation for ALL rainbow border positions */
.ccard.ccard--rainbow-top:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-bottom:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-left:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-right:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-all:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-border:hover[b-s4qjr1mlxc]::before {
  animation-duration: 12s !important; /* Same speed as normal animation */
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-name: rainbow-flow-b-s4qjr1mlxc !important;
}

/* Smooth flowing rainbow animation */
@keyframes rainbow-flow-b-s4qjr1mlxc {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

/* ===== RAINBOW ANIMATION CONTROL ===== */

/* Disable animation for all rainbow border positions when EnableRainbowAnimation=false */
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-top[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-bottom[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-left[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-right[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-all[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-border[b-s4qjr1mlxc]::before {
  animation: none !important; /* Disable animation completely */
}

/* Also disable hover animation effects when animation is disabled */
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-top:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-bottom:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-left:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-right:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-all:hover[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-animation-disabled.ccard--rainbow-border:hover[b-s4qjr1mlxc]::before {
  animation: none !important; /* No hover animation when disabled */
}

/* Ensure the rainbow border animates smoothly */
@keyframes rainbow-shift-b-s4qjr1mlxc {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Bottom border position - Preserve grey border and add rainbow bottom */
.ccard.ccard--rainbow-bottom[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
}

.ccard.ccard--rainbow-bottom[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: var(--rainbow-thickness, 3px);
  background: var(--rainbow-gradient);
  background-size: 400% 100%;
  border-radius: inherit;
  z-index: 1;
  animation: rainbow-flow-b-s4qjr1mlxc 12s linear infinite;
}

/* Left border position - Preserve grey border and add rainbow left */
.ccard.ccard--rainbow-left[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
}

.ccard.ccard--rainbow-left[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  width: var(--rainbow-thickness, 3px);
  background: linear-gradient(
    180deg,
    #ff0000 0%,     /* Red */
    #ff7f00 14.3%,  /* Orange */
    #ffff00 28.6%,  /* Yellow */
    #00ff00 42.9%,  /* Green */
    #0000ff 57.2%,  /* Blue */
    #4b0082 71.5%,  /* Indigo */
    #9400d3 85.8%,  /* Violet */
    #ff0000 100%    /* Back to Red */
  );
  background-size: 100% 300%;
  border-radius: inherit;
  z-index: 1;
  animation: rainbow-shift-vertical-b-s4qjr1mlxc 3s linear infinite;
}

/* Right border position - Preserve grey border and add rainbow right */
.ccard.ccard--rainbow-right[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
}

.ccard.ccard--rainbow-right[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: var(--rainbow-thickness, 3px);
  background: linear-gradient(
    180deg,
    #ff0000 0%,     /* Red */
    #ff7f00 14.3%,  /* Orange */
    #ffff00 28.6%,  /* Yellow */
    #00ff00 42.9%,  /* Green */
    #0000ff 57.2%,  /* Blue */
    #4b0082 71.5%,  /* Indigo */
    #9400d3 85.8%,  /* Violet */
    #ff0000 100%    /* Back to Red */
  );
  background-size: 100% 300%;
  border-radius: inherit;
  z-index: 1;
  animation: rainbow-shift-vertical-b-s4qjr1mlxc 3s linear infinite;
}

/* All borders position - Preserve grey border and add rainbow all around */
.ccard.ccard--rainbow-all[b-s4qjr1mlxc] {
  position: relative;
  border: 1px solid #e2e8f0 !important; /* Keep grey border */
}

.ccard.ccard--rainbow-all[b-s4qjr1mlxc]::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: conic-gradient(
    from 0deg,
    #ff0000 0deg,     /* Red */
    #ff7f00 51.4deg,  /* Orange */
    #ffff00 102.8deg, /* Yellow */
    #00ff00 154.2deg, /* Green */
    #0000ff 205.6deg, /* Blue */
    #4b0082 257deg,   /* Indigo */
    #9400d3 308.4deg, /* Violet */
    #ff0000 360deg    /* Back to Red */
  );
  border-radius: inherit;
  z-index: 1;
  animation: rainbow-rotate-b-s4qjr1mlxc 4s linear infinite;
}

/* Vertical rainbow animation */
@keyframes rainbow-shift-vertical-b-s4qjr1mlxc {
  0% { background-position: auto, 50% 0%; }
  100% { background-position: auto, 50% 400%; }
}

/* Rotating rainbow animation for all borders */
@keyframes rainbow-rotate-b-s4qjr1mlxc {
  0% { background-position: auto, center; transform: rotate(0deg); }
  100% { background-position: auto, center; transform: rotate(360deg); }
}

/* Rainbow border thickness variations */
.ccard.ccard--rainbow-thickness-1[b-s4qjr1mlxc] { --rainbow-thickness: 1px; }
.ccard.ccard--rainbow-thickness-2[b-s4qjr1mlxc] { --rainbow-thickness: 2px; }
.ccard.ccard--rainbow-thickness-3[b-s4qjr1mlxc] { --rainbow-thickness: 3px; }
.ccard.ccard--rainbow-thickness-4[b-s4qjr1mlxc] { --rainbow-thickness: 4px; }
.ccard.ccard--rainbow-thickness-5[b-s4qjr1mlxc] { --rainbow-thickness: 5px; }
.ccard.ccard--rainbow-thickness-6[b-s4qjr1mlxc] { --rainbow-thickness: 6px; }
.ccard.ccard--rainbow-thickness-7[b-s4qjr1mlxc] { --rainbow-thickness: 7px; }
.ccard.ccard--rainbow-thickness-8[b-s4qjr1mlxc] { --rainbow-thickness: 8px; }

/* Enhanced hover effects for rainbow bordered cards - Keep same speed as normal animation */
.ccard.ccard--rainbow-border:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before {
  animation-duration: 12s !important; /* Same speed as normal animation */
}

.ccard.ccard--rainbow-top:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-bottom:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-left:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-right:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before,
.ccard.ccard--rainbow-all:hover:not(.ccard--disabled)[b-s4qjr1mlxc]::before {
  animation-duration: 12s !important; /* Same speed as normal animation */
}

/* Rainbow border interaction with card variants */
.ccard.ccard--primary.ccard--rainbow-border[b-s4qjr1mlxc]::before,
.ccard.ccard--primary.ccard--rainbow-top[b-s4qjr1mlxc]::before,
.ccard.ccard--primary.ccard--rainbow-bottom[b-s4qjr1mlxc]::before,
.ccard.ccard--primary.ccard--rainbow-left[b-s4qjr1mlxc]::before,
.ccard.ccard--primary.ccard--rainbow-right[b-s4qjr1mlxc]::before,
.ccard.ccard--primary.ccard--rainbow-all[b-s4qjr1mlxc]::before {
  /* Primary variant interaction - more vibrant */
  filter: saturate(1.2) !important;
}

.ccard.ccard--dark.ccard--rainbow-border[b-s4qjr1mlxc]::before,
.ccard.ccard--dark.ccard--rainbow-top[b-s4qjr1mlxc]::before,
.ccard.ccard--dark.ccard--rainbow-bottom[b-s4qjr1mlxc]::before,
.ccard.ccard--dark.ccard--rainbow-left[b-s4qjr1mlxc]::before,
.ccard.ccard--dark.ccard--rainbow-right[b-s4qjr1mlxc]::before,
.ccard.ccard--dark.ccard--rainbow-all[b-s4qjr1mlxc]::before {
  /* Enhanced visibility for dark backgrounds */
  filter: brightness(1.3) saturate(1.1) !important;
}

/* ===== COLLAPSE ANIMATIONS ===== */

/* Smooth Collapse */
.ccard-collapse--smooth .ccard-body-container[b-s4qjr1mlxc] {
  transition: max-height var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out),
              padding var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

/* Accordion Collapse */
.ccard-collapse--accordion .ccard-body-container[b-s4qjr1mlxc] {
  transition: max-height var(--duration-slow) var(--ease-bounce),
              opacity var(--duration-normal) var(--ease-out);
  overflow: hidden;
}

/* Slide Collapse */
.ccard-collapse--slide .ccard-body-container[b-s4qjr1mlxc] {
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
  transform-origin: top;
}

/* Scale Collapse */
.ccard-collapse--scale .ccard-body-container[b-s4qjr1mlxc] {
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
  transform-origin: top center;
}

/* Fade Collapse */
.ccard-collapse--fade .ccard-body-container[b-s4qjr1mlxc] {
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* ===== STATE INDICATORS ===== */

.ccard-state-indicators[b-s4qjr1mlxc] {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  pointer-events: none;
  z-index: 3;
}

.state-indicator[b-s4qjr1mlxc] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  opacity: 0.8;
}

.state-indicator--selected[b-s4qjr1mlxc] {
  background: var(--primary-500);
  box-shadow: 0 0 8px var(--primary-300);
}

.state-indicator--loading[b-s4qjr1mlxc] {
  background: var(--warning-500);
  animation: pulse var(--duration-slow) var(--ease-in-out) infinite;
}

.state-indicator--hover[b-s4qjr1mlxc] {
  background: var(--success-500);
  animation: bounce var(--duration-fast) var(--ease-out);
}

/* ===== FOCUS INDICATOR ===== */

.ccard-focus-indicator[b-s4qjr1mlxc] {
  position: absolute;
  inset: -3px;
  border: 3px solid transparent;
  border-radius: calc(var(--radius-lg) + 3px);
  pointer-events: none;
  opacity: 0;
  transition: all var(--duration-fast) var(--ease-out);
  z-index: 4;
}

.ccard:focus-visible .ccard-focus-indicator[b-s4qjr1mlxc] {
  border-color: var(--primary-400);
  opacity: 1;
}

/* ===== ANIMATION SPEED VARIANTS ===== */

.ccard.ccard--animation-instant[b-s4qjr1mlxc],
.ccard.ccard--animation-instant *[b-s4qjr1mlxc] {
  transition-duration: var(--duration-instant) !important;
  animation-duration: var(--duration-instant) !important;
}

.ccard.ccard--animation-fast[b-s4qjr1mlxc],
.ccard.ccard--animation-fast *[b-s4qjr1mlxc] {
  transition-duration: var(--duration-fast) !important;
  animation-duration: var(--duration-fast) !important;
}

.ccard.ccard--animation-slow[b-s4qjr1mlxc],
.ccard.ccard--animation-slow *[b-s4qjr1mlxc] {
  transition-duration: var(--duration-slow) !important;
}

.ccard.ccard--animation-slower[b-s4qjr1mlxc],
.ccard.ccard--animation-slower *[b-s4qjr1mlxc] {
  transition-duration: var(--duration-slower) !important;
}

.ccard.ccard--animation-slowest[b-s4qjr1mlxc],
.ccard.ccard--animation-slowest *[b-s4qjr1mlxc] {
  transition-duration: var(--duration-slowest) !important;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .ccard[b-s4qjr1mlxc] {
    border-radius: var(--radius-md);
  }
  
  .ccard-header[b-s4qjr1mlxc],
  .ccard-body[b-s4qjr1mlxc],
  .ccard-footer[b-s4qjr1mlxc] {
    padding: var(--space-md);
  }
  
  .ccard-header-content[b-s4qjr1mlxc] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  
  .ccard-title[b-s4qjr1mlxc] {
    font-size: var(--text-base);
  }
  
  /* Simplify hover effects on mobile */
  .ccard.ccard--hoverable:hover[b-s4qjr1mlxc] {
    transform: none;
  }
  
  /* Disable particle effects on mobile for performance */
  .ccard-particles[b-s4qjr1mlxc] {
    display: none;
  }
}

@media (max-width: 480px) {
  .ccard-header[b-s4qjr1mlxc],
  .ccard-body[b-s4qjr1mlxc],
  .ccard-footer[b-s4qjr1mlxc] {
    padding: var(--space-sm);
  }
  
  .loading-spinner[b-s4qjr1mlxc] {
    width: 24px;
    height: 24px;
  }
  
  .skeleton-header[b-s4qjr1mlxc] {
    height: 20px;
  }
  
  .skeleton-line[b-s4qjr1mlxc] {
    height: 14px;
  }
}

/* ===== DARK THEME OVERRIDES ===== */

@media (prefers-color-scheme: dark) {
  .ccard.ccard--glassmorphism[b-s4qjr1mlxc] {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
  }
  
  .skeleton-header[b-s4qjr1mlxc],
  .skeleton-line[b-s4qjr1mlxc],
  .skeleton-button[b-s4qjr1mlxc],
  .shimmer-block[b-s4qjr1mlxc],
  .shimmer-line[b-s4qjr1mlxc] {
    background: linear-gradient(
      90deg,
      var(--neutral-700) 0%,
      var(--neutral-600) 50%,
      var(--neutral-700) 100%
    );
  }
  
  .ccard-loading-overlay[b-s4qjr1mlxc] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
  .ccard[b-s4qjr1mlxc] {
    border: 2px solid var(--neutral-900);
    box-shadow: none;
  }
  
  .ccard:focus-visible[b-s4qjr1mlxc] {
    outline: 4px solid var(--primary-500);
  }
  
  .ccard-particles[b-s4qjr1mlxc],
  .ccard-glassmorphism-overlay[b-s4qjr1mlxc],
  .ccard-gradient-border[b-s4qjr1mlxc],
  .ccard.ccard--rainbow-border[b-s4qjr1mlxc]::before {
    display: none;
  }
  
  .state-indicator[b-s4qjr1mlxc] {
    border: 1px solid var(--neutral-900);
  }
  
  /* Show a high contrast border instead of rainbow */
  .ccard.ccard--rainbow-border[b-s4qjr1mlxc] {
    border: 3px solid var(--primary-500) !important;
  }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
  .ccard[b-s4qjr1mlxc],
  .ccard *[b-s4qjr1mlxc],
  .ccard[b-s4qjr1mlxc]::before,
  .ccard[b-s4qjr1mlxc]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .ccard-particles[b-s4qjr1mlxc],
  .ccard-gradient-border[b-s4qjr1mlxc] {
    display: none !important;
  }
  
  /* Make rainbow borders static for reduced motion */
  .ccard.ccard--rainbow-border[b-s4qjr1mlxc],
  .ccard.ccard--rainbow-top[b-s4qjr1mlxc],
  .ccard.ccard--rainbow-bottom[b-s4qjr1mlxc] {
    animation: none !important;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
                linear-gradient(90deg, 
                  #ff0000 0%, #ff7f00 14%, #ffff00 29%, #00ff00 43%, 
                  #0000ff 57%, #4b0082 71%, #9400d3 86%, #ff0000 100%) border-box;
  }
  
  .ccard.ccard--rainbow-left[b-s4qjr1mlxc],
  .ccard.ccard--rainbow-right[b-s4qjr1mlxc] {
    animation: none !important;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
                linear-gradient(180deg, 
                  #ff0000 0%, #ff7f00 14%, #ffff00 29%, #00ff00 43%, 
                  #0000ff 57%, #4b0082 71%, #9400d3 86%, #ff0000 100%) border-box;
  }
  
  .ccard.ccard--rainbow-all[b-s4qjr1mlxc] {
    animation: none !important;
    background: linear-gradient(var(--surface-color), var(--surface-color)) padding-box,
                conic-gradient(from 0deg,
                  #ff0000 0deg, #ff7f00 51deg, #ffff00 103deg, #00ff00 154deg,
                  #0000ff 206deg, #4b0082 257deg, #9400d3 308deg, #ff0000 360deg) border-box;
  }
  
  .ccard:hover[b-s4qjr1mlxc] {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .ccard[b-s4qjr1mlxc] {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  
  .ccard-particles[b-s4qjr1mlxc],
  .ccard-glassmorphism-overlay[b-s4qjr1mlxc],
  .ccard-gradient-border[b-s4qjr1mlxc],
  .ccard-state-indicators[b-s4qjr1mlxc],
  .ccard-focus-indicator[b-s4qjr1mlxc],
  .ccard-loading[b-s4qjr1mlxc],
  .ccard.ccard--rainbow-border[b-s4qjr1mlxc]::before {
    display: none !important;
  }
  
  /* Show simple border for rainbow cards in print */
  .ccard.ccard--rainbow-border[b-s4qjr1mlxc] {
    border: 2px solid black !important;
  }
  
  .ccard-collapse-toggle[b-s4qjr1mlxc] {
    display: none !important;
  }
  
  .ccard-body-container[style*="display: none"][b-s4qjr1mlxc] {
    display: block !important;
  }
}
/* /Components/Common/Grids/AdvancedSortableGrid.razor.rz.scp.css */
/* ===== WORLD-CLASS ADVANCED SORTABLE GRID STYLING ===== */

/* CSS Custom Properties for Dynamic Theming */
.sortable-grid-container[b-kikw7forrp] {
    --grid-primary: #3b82f6;
    --grid-primary-light: #dbeafe;
    --grid-primary-dark: #1e40af;
    --grid-secondary: #64748b;
    --grid-secondary-light: #f1f5f9;
    --grid-success: #10b981;
    --grid-warning: #f59e0b;
    --grid-danger: #ef4444;
    --grid-info: #06b6d4;
    
    /* Surface Colors */
    --grid-surface: #ffffff;
    --grid-surface-hover: #f8fafc;
    --grid-surface-selected: #eff6ff;
    --grid-surface-active: #e0e7ff;
    
    /* Border Colors */
    --grid-border: #e2e8f0;
    --grid-border-light: #f1f5f9;
    --grid-border-focus: var(--grid-primary);
    
    /* Text Colors */
    --grid-text-primary: #1e293b;
    --grid-text-secondary: #64748b;
    --grid-text-muted: #94a3b8;
    --grid-text-inverted: #ffffff;
    
    /* Shadow System */
    --grid-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --grid-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --grid-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --grid-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Animation System */
    --grid-transition-fast: 0.15s ease;
    --grid-transition-base: 0.2s ease;
    --grid-transition-slow: 0.3s ease;
    
    /* Spacing System */
    --grid-space-xs: 0.25rem;
    --grid-space-sm: 0.5rem;
    --grid-space-base: 1rem;
    --grid-space-lg: 1.5rem;
    --grid-space-xl: 2rem;
    
    /* Typography Scale */
    --grid-text-xs: 0.75rem;
    --grid-text-sm: 0.875rem;
    --grid-text-base: 1rem;
    --grid-text-lg: 1.125rem;
    
    /* Component Sizing */
    --grid-header-height: 3rem;
    --grid-row-height: 40px; /* User-requested row height */
    --grid-group-header-height: 46px; /* Proportionally adjusted group header height */
    --grid-control-height: 2.25rem;

    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--grid-surface);
    border-radius: 0.75rem;
    box-shadow: var(--grid-shadow);
    border: 1px solid var(--grid-border);
    overflow: hidden;
}

/* Dark Mode Support */
.sortable-grid-container[data-theme="dark"][b-kikw7forrp] {
    --grid-surface: #1e293b;
    --grid-surface-hover: #334155;
    --grid-surface-selected: #1e40af;
    --grid-surface-active: #3730a3;
    --grid-border: #334155;
    --grid-border-light: #475569;
    --grid-text-primary: #f1f5f9;
    --grid-text-secondary: #cbd5e1;
    --grid-text-muted: #94a3b8;
}

/* Enhanced Grid Controls */
.sortable-grid-container .d-flex.justify-content-between.align-items-center.mb-3[b-kikw7forrp] {
    padding: var(--grid-space-lg) var(--grid-space-lg) var(--grid-space-base);
    background: linear-gradient(135deg, var(--grid-surface) 0%, var(--grid-surface-hover) 100%);
    border-bottom: 1px solid var(--grid-border-light);
    gap: var(--grid-space-base);
}

/* Grid Controls Bar - Add padding all around */
.sortable-grid-container .grid-controls-bar[b-kikw7forrp] {
    padding: 1.5rem !important;
    background: linear-gradient(135deg, var(--grid-surface) 0%, var(--grid-surface-hover) 100%);
    border-bottom: 1px solid var(--grid-border-light);
    gap: var(--grid-space-base);
}

/* Unified Grid Controls - Add padding all around */
.sortable-grid-container .unified-grid-controls[b-kikw7forrp] {
    padding: 1.5rem !important;
    background: linear-gradient(135deg, var(--grid-surface) 0%, var(--grid-surface-hover) 100%);
    border-bottom: 1px solid var(--grid-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-space-base);
}

/* Item Count and Sort Info Styling */
.sortable-grid-container .text-muted[b-kikw7forrp] {
    color: var(--grid-text-secondary) !important;
    font-size: var(--grid-text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--grid-space-xs);
}

.sortable-grid-container .text-muted i[b-kikw7forrp] {
    color: var(--grid-primary);
    opacity: 0.8;
}

/* Enhanced Pagination Controls */
.sortable-grid-container .form-select[b-kikw7forrp] {
    border: 1px solid var(--grid-border);
    border-radius: 0.5rem;
    background: var(--grid-surface);
    color: var(--grid-text-primary);
    font-size: var(--grid-text-sm);
    font-weight: 500;
    height: var(--grid-control-height);
    transition: all var(--grid-transition-base);
    box-shadow: var(--grid-shadow-sm);
}

.sortable-grid-container .form-select:focus[b-kikw7forrp] {
    border-color: var(--grid-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.sortable-grid-container .btn-group .btn[b-kikw7forrp] {
    border: 1px solid var(--grid-border);
    background: var(--grid-surface);
    color: var(--grid-text-primary);
    font-size: var(--grid-text-sm);
    font-weight: 500;
    height: var(--grid-control-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--grid-transition-base);
    position: relative;
    min-width: 2.5rem;
}

.sortable-grid-container .btn-group .btn:hover:not(:disabled)[b-kikw7forrp] {
    background: var(--grid-primary);
    color: var(--grid-text-inverted);
    border-color: var(--grid-primary);
    transform: translateY(-1px);
    box-shadow: var(--grid-shadow-md);
}

.sortable-grid-container .btn-group .btn:disabled[b-kikw7forrp] {
    background: var(--grid-border-light);
    color: var(--grid-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.sortable-grid-container .btn-group .btn.disabled[b-kikw7forrp] {
    background: var(--grid-surface-hover);
    color: var(--grid-text-secondary);
    border-color: var(--grid-border);
}

/* Enhanced Table Styling with Horizontal Overflow Management */
.sortable-grid-container .table-responsive[b-kikw7forrp] {
    border-radius: 0 0 0.75rem 0.75rem;
    overflow-x: auto; /* Enable horizontal scrolling for wide tables */
    overflow-y: visible;
    position: relative;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--grid-primary) var(--grid-border-light);
    /* Prevent hover animations from triggering scrollbars */
    contain: layout;
    /* Prevent table from expanding to fill container height */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Custom scrollbar for WebKit browsers */
.sortable-grid-container .table-responsive[b-kikw7forrp]::-webkit-scrollbar {
    height: 8px;
}

.sortable-grid-container .table-responsive[b-kikw7forrp]::-webkit-scrollbar-track {
    background: var(--grid-border-light);
    border-radius: 4px;
}

.sortable-grid-container .table-responsive[b-kikw7forrp]::-webkit-scrollbar-thumb {
    background: var(--grid-primary);
    border-radius: 4px;
    border: 1px solid var(--grid-border);
}

.sortable-grid-container .table-responsive[b-kikw7forrp]::-webkit-scrollbar-thumb:hover {
    background: var(--grid-primary-dark);
}

.sortable-grid-container .table[b-kikw7forrp] {
    margin: 0;
    background: var(--grid-surface);
    color: var(--grid-text-primary);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed; /* Fixed layout ensures column widths are respected */
    /* Prevent content overflow during hover animations */
    max-width: 100%;
    overflow: hidden;
    font-size: var(--grid-text-sm);
    min-width: 600px; /* Reduced minimum width for better mobile support */
    /* Ensure table doesn't expand beyond content needs */
    height: auto !important;
    min-height: auto !important;
}

/* Column Width Management */
.sortable-grid-container .table th[b-kikw7forrp],
.sortable-grid-container .table td[b-kikw7forrp] {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Support for MinWidth/MaxWidth column properties */
.sortable-grid-container .table th[style*="min-width"][b-kikw7forrp],
.sortable-grid-container .table td[style*="min-width"][b-kikw7forrp] {
    white-space: nowrap;
}

/* Responsive column behavior */
@media (max-width: 768px) {
    .sortable-grid-container .table[b-kikw7forrp] {
        min-width: 100%;
        table-layout: auto; /* Allow flexible layout on mobile */
    }
    
    .sortable-grid-container .table th[b-kikw7forrp],
    .sortable-grid-container .table td[b-kikw7forrp] {
        white-space: normal; /* Allow text wrapping on small screens */
        overflow: visible;
        text-overflow: unset;
    }
}

/* Prevent horizontal scrollbar during hover transitions */
.sortable-grid-container .table-responsive[b-kikw7forrp] {
    overflow-x: auto;
    overflow-y: hidden; /* Prevent vertical scrollbar flicker */
}

.sortable-grid-container .table-responsive[b-kikw7forrp]::-webkit-scrollbar {
    height: 8px;
}

.sortable-grid-container .table tbody tr:hover[b-kikw7forrp] {
    transform: none !important; /* Prevent any transforms that might cause layout shifts */
    width: auto !important; /* Prevent width changes */
}

/* Ensure checkbox column maintains consistent width and prevents ellipsis */
.sortable-grid-container .table.has-multiselect th:nth-child(2)[b-kikw7forrp],
.sortable-grid-container .table.has-multiselect td:nth-child(2)[b-kikw7forrp],
.sortable-grid-container .table.has-multiselect th:first-child[b-kikw7forrp],
.sortable-grid-container .table.has-multiselect td:first-child[b-kikw7forrp] {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.sortable-grid-container .table.has-multiselect th:first-child[b-kikw7forrp],
.sortable-grid-container .table.has-multiselect td:first-child[b-kikw7forrp] {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Style the checkboxes within the checkbox column */
.sortable-grid-container .table.has-multiselect th:first-child .form-check-input[b-kikw7forrp],
.sortable-grid-container .table.has-multiselect td:first-child .form-check-input[b-kikw7forrp] {
    margin: 0 !important;
    width: 16px;
    height: 16px;
}

/* World-Class Header Styling */
.sortable-grid-container .table thead th[b-kikw7forrp] {
    height: var(--grid-header-height);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: none;
    border-bottom: 2px solid var(--grid-border);
    color: var(--grid-text-primary);
    font-weight: 600;
    font-size: var(--grid-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0 var(--grid-space-base) 0 2px !important;
    vertical-align: middle;
    position: relative;
}

/* Header content layout with right-aligned sort indicators */
.sortable-grid-container .table thead th .d-flex[b-kikw7forrp] {
    width: 100%;
    min-width: 0; /* Allow shrinking */
}

.sortable-grid-container .table thead th .column-title.flex-grow-1[b-kikw7forrp] {
    flex: 1 1 auto;
    min-width: 0; /* Allow text to shrink with ellipsis */
    margin-right: 0.5rem; /* Space between title and sort indicator */
}

.sortable-grid-container .table thead th[b-kikw7forrp]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--grid-border);
    opacity: 0.5;
}

.sortable-grid-container .table thead th:last-child[b-kikw7forrp]::after {
    display: none;
}

/* Enhanced Sortable Headers */
.sortable-header[b-kikw7forrp] {
    transition: background-color 0.2s ease, color 0.2s ease;
    vertical-align: middle;
    position: relative;
    border-bottom: 2px solid transparent;
}

.sortable-header.sortable[b-kikw7forrp] {
    cursor: pointer;
}

.sortable-header.sortable:hover[b-kikw7forrp] {
    background-color: rgba(59, 130, 246, 0.08) !important;
    color: var(--grid-primary-dark);
    border-bottom-color: rgba(59, 130, 246, 0.3);
}

.sortable-header.sorted[b-kikw7forrp] {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: var(--grid-primary-dark);
    border-bottom: 2px solid var(--grid-primary);
    font-weight: 600;
}

/* Enhanced Sort Indicators with FontAwesome 7.0.0 */
.sort-indicator[b-kikw7forrp] {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: all var(--grid-transition-base);
    position: relative;
    backdrop-filter: blur(4px);
    flex-shrink: 0; /* Prevent shrinking */
}

.sort-indicator i[b-kikw7forrp] {
    font-size: 14px;
    font-weight: 600;
    transition: all var(--grid-transition-base);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.sort-inactive[b-kikw7forrp] {
    opacity: 0.4;
    transition: all var(--grid-transition-base);
    color: #6c757d !important;
    transform: scale(0.9);
}

.sortable-header:hover .sort-inactive[b-kikw7forrp] {
    opacity: 0.7;
    color: var(--grid-primary);
}

.sort-active[b-kikw7forrp] {
    opacity: 1;
    color: var(--grid-primary);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(239, 246, 255, 0.9));
    border: 1px solid rgba(59, 130, 246, 0.3);
    animation: sortActivePulse-b-kikw7forrp 1.5s ease infinite;
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25);
    transform: scale(1.1);
}

.sort-active[b-kikw7forrp]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--grid-primary), #60a5fa, var(--grid-primary));
    border-radius: 0.5rem;
    z-index: -1;
    opacity: 0.3;
    animation: sortGlow-b-kikw7forrp 2s ease infinite alternate;
}

/* Enhanced Data Rows */
.sortable-grid-container .table tbody td[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    padding: var(--grid-space-sm) var(--grid-space-base);
    vertical-align: middle !important;
    border-top: 1px solid var(--grid-border-light);
    transition: background-color var(--grid-transition-base), color var(--grid-transition-base);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left; /* Default left alignment for all data cells */
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Data cell content wrapper for margin support */
.sortable-grid-container .table tbody td .data-cell-content[b-kikw7forrp] {
    margin-left: var(--data-cell-margin-left, 5px); /* Configurable left margin for data cell content */
    display: inline-block;
    width: calc(100% - var(--data-cell-margin-left, 5px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure all table rows have consistent height regardless of styling classes */
.sortable-grid-container .table tbody tr[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
}

/* Force consistent height for all row variants including Bootstrap table classes */
.sortable-grid-container .table tbody tr.table-info:not(.group-header)[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-warning[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-success[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-danger[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-primary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-secondary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-light[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-dark[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
}

/* Force consistent cell height for all row variants including Bootstrap table classes */
.sortable-grid-container .table tbody tr.table-info:not(.group-header) td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-warning td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-success td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-danger td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-secondary td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-light td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-dark td[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Ensure rows without status classes have proper left alignment AND consistent height */
.sortable-grid-container .table tbody tr:not([class*="table-"])[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
}

.sortable-grid-container .table tbody tr:not([class*="table-"]) td[b-kikw7forrp] {
    text-align: left !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Specific alignment overrides for certain columns */
.sortable-grid-container .table tbody td.text-center[b-kikw7forrp] {
    text-align: center !important;
}

.sortable-grid-container .table tbody td.text-right[b-kikw7forrp] {
    text-align: right !important;
}

/* Ensure all nested content respects row height and alignment */
.sortable-grid-container .table tbody tr td > *[b-kikw7forrp] {
    max-height: calc(var(--grid-row-height) - 4px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Force consistent alignment for all direct cell content */
.sortable-grid-container .table tbody tr td > div[b-kikw7forrp],
.sortable-grid-container .table tbody tr td > span[b-kikw7forrp],
.sortable-grid-container .table tbody tr td > small[b-kikw7forrp],
.sortable-grid-container .table tbody tr td > p[b-kikw7forrp] {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Normalize any text elements that might cause height variations */
.sortable-grid-container .table tbody tr td div div[b-kikw7forrp],
.sortable-grid-container .table tbody tr td div span[b-kikw7forrp],
.sortable-grid-container .table tbody tr td div small[b-kikw7forrp] {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.1 !important;
}

/* Multi-line content within cells (like pricing with VAT and customer info) */
.sortable-grid-container .table tbody tr td div[b-kikw7forrp] {
    max-height: calc(var(--grid-row-height) - 4px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Specific customer info div styling */
.sortable-grid-container .table tbody tr td .customer-info[b-kikw7forrp] {
    max-height: calc(var(--grid-row-height) - 8px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.1 !important;
}

/* Customer company name styling */
.sortable-grid-container .table tbody tr td .customer-company[b-kikw7forrp] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* Customer department small text styling */
.sortable-grid-container .table tbody tr td .customer-department[b-kikw7forrp] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0.65rem !important;
    color: var(--grid-text-muted) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    margin-top: 1px !important;
}

/* Small text within cells should be compact */
.sortable-grid-container .table tbody tr td small[b-kikw7forrp] {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Toolbar badge alignment fixes */
.sortable-grid-container .badge[b-kikw7forrp] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Prevent selection state from affecting row positioning */
.sortable-grid-container .table tbody tr[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-primary[b-kikw7forrp] {
    padding: 0 !important;
    margin: 0 !important;
    border-left-width: 0 !important; /* Reset any Bootstrap border-left that might affect alignment */
}

/* Ensure consistent cell positioning regardless of selection state */
.sortable-grid-container .table tbody tr td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp] {
    position: relative !important;
    padding-left: var(--grid-space-base) !important;
    padding-right: var(--grid-space-base) !important;
}

/* Teal group headers with enhanced styling - matches logo branding */
.sortable-grid-container .table tbody tr.table-info.group-header[b-kikw7forrp] {
    background-color: #4890A6 !important; /* Teal background - matches logo */
    color: white !important; /* White text for contrast */
    border-color: #3a7489 !important; /* Darker teal border */
    height: var(--grid-group-header-height) !important; /* Configurable group header height */
    max-height: var(--grid-group-header-height) !important;
    min-height: var(--grid-group-header-height) !important;
}

.sortable-grid-container .table tbody tr.table-info.group-header td[b-kikw7forrp] {
    background-color: #4890A6 !important;
    color: white !important;
    border-color: #3a7489 !important;
    padding-left: 1rem !important; /* Add left padding to group header content */
    height: var(--grid-group-header-height) !important; /* Match group header height */
}

.sortable-grid-container .table tbody tr.table-info.group-header:hover[b-kikw7forrp] {
    background-color: #3a7489 !important; /* Darker teal on hover */
}

.sortable-grid-container .table tbody tr.table-info.group-header:hover td[b-kikw7forrp] {
    background-color: #3a7489 !important;
}

/* Remove any ::before pseudo-elements (like mail icons) from group headers */
.sortable-grid-container .table tbody tr.table-info.group-header[b-kikw7forrp]::before,
.sortable-grid-container .table tbody tr.table-info.group-header td[b-kikw7forrp]::before,
.sortable-grid-container .table tbody tr.table-info.group-header *[b-kikw7forrp]::before {
    display: none !important;
    content: none !important;
}

/* Style group headers as table headers */
.sortable-grid-container .table tbody tr.table-info.group-header td[b-kikw7forrp] {
    font-weight: 600 !important; /* Semi-bold like table headers */
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    font-size: 0.875rem !important;
}

/* Ensure icons in group headers display properly */
.sortable-grid-container .table tbody tr.table-info.group-header i[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-info.group-header .fa-solid[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-info.group-header .fas[b-kikw7forrp] {
    color: white !important; /* Ensure icon color matches text */
    background: transparent !important; /* Remove any background */
    border: none !important; /* Remove any borders */
    border-radius: 0 !important; /* Remove any border-radius that might create circles */
    width: auto !important; /* Reset width */
    height: auto !important; /* Reset height */
    font-family: "Font Awesome 6 Free" !important; /* Ensure correct font family */
    font-weight: 900 !important; /* Solid icons need font-weight 900 */
    display: inline !important; /* Ensure inline display */
    vertical-align: baseline !important; /* Proper alignment */
}

/* Note: Status indicator padding is now handled by the ultra-specific rules above */

/* Reset first header cell padding */
.sortable-grid-container .table thead th:first-child[b-kikw7forrp] {
    padding-left: 2px !important;
}

/* Fix select column issues */
.sortable-grid-container .table thead th:first-child:hover[b-kikw7forrp] {
    transform: none !important; /* Disable hover transform that causes flashing */
    box-shadow: none !important; /* Remove hover shadow */
    background: var(--grid-surface-hover) !important; /* Simple background change only */
}

/* Ensure checkbox in select header is easily clickable */
.sortable-grid-container .table thead th:first-child .form-check-input[b-kikw7forrp] {
    z-index: 10 !important; /* Ensure checkbox is above other elements */
    position: relative !important;
    pointer-events: auto !important; /* Ensure checkbox is clickable */
    cursor: pointer !important;
}

/* Prevent hover effects from affecting neighboring columns */
.sortable-grid-container .table thead th:first-child:hover + th[b-kikw7forrp] {
    transition: none !important; /* Disable transitions on next column */
}

/* Fix data row select column issues */
.sortable-grid-container .table tbody tr td:first-child[b-kikw7forrp] {
    position: relative !important; /* Ensure proper positioning */
}

.sortable-grid-container .table tbody tr td:first-child:hover[b-kikw7forrp] {
    transform: none !important; /* Disable hover transform */
    box-shadow: none !important; /* Remove hover shadow */
}

/* Ensure data row checkboxes are easily clickable */
.sortable-grid-container .table tbody tr td:first-child .form-check-input[b-kikw7forrp] {
    z-index: 10 !important; /* Ensure checkbox is above other elements */
    position: relative !important;
    pointer-events: auto !important; /* Ensure checkbox is clickable */
    cursor: pointer !important;
}

/* Prevent hover flashing between select column and next column */
.sortable-grid-container .table tbody tr td:first-child:hover + td[b-kikw7forrp] {
    transition: none !important; /* Disable transitions on next column */
}

.sortable-grid-container .table tbody tr[b-kikw7forrp] {
    transition: background-color var(--grid-transition-base), color var(--grid-transition-base), box-shadow var(--grid-transition-base);
    position: relative;
}

.sortable-grid-container .table tbody tr[b-kikw7forrp]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--grid-border-light);
    transition: all var(--grid-transition-base);
}

.sortable-grid-container .table tbody tr:hover[b-kikw7forrp] {
    background: linear-gradient(135deg, var(--grid-surface-hover) 0%, rgba(248, 250, 252, 0.8) 100%);
    transform: none !important;
    box-shadow: var(--grid-shadow-sm);
}

/* Prevent table cells from expanding during hover */
.sortable-grid-container .table tbody tr:hover td[b-kikw7forrp] {
    max-width: inherit !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.sortable-grid-container .table tbody tr:hover[b-kikw7forrp]::after {
    background: var(--grid-primary);
    height: 2px;
}

/* Enhanced Selection Styling with Sheen Animation */
.sortable-grid-container .table tbody tr.adv-row.table-primary[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp] {
    background: linear-gradient(135deg, var(--grid-surface-selected) 0%, rgba(219, 234, 254, 0.6) 100%) !important;
    border-left: 3px solid var(--grid-primary);
    animation: selectPulse-b-kikw7forrp 0.4s ease, initialSheen-b-kikw7forrp 0.8s ease 0.2s;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Selected row must have position: relative for pseudo-element positioning */
.sortable-grid-container .table tbody tr.adv-row.table-primary[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp] {
    position: relative !important;
    overflow: hidden !important;
}

/* Metallic sheen animation overlay for selected rows - ultra specific and more visible */
.sortable-grid-container .table tbody tr.adv-row.table-primary[b-kikw7forrp]::after,
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary[b-kikw7forrp]::after,
.sortable-grid-container .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp]::after,
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary.cursor-pointer[b-kikw7forrp]::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 150% !important;
    height: 100% !important;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.4) 35%,
        rgba(255, 255, 255, 0.9) 45%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.9) 55%,
        rgba(255, 255, 255, 0.4) 65%,
        transparent 80%,
        transparent 100%
    ) !important;
    /* Run animation twice for visual effect, then stop to save performance */
    animation: metalSheen-b-kikw7forrp 3s ease-in-out 2 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transform: skewX(-20deg) !important;
    border-radius: inherit !important;
    display: block !important;
    opacity: 1 !important;
}

/* Ensure cell content stays above the sheen but still clickable */
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-primary td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-primary td[b-kikw7forrp] {
    position: relative !important;
    z-index: 5 !important;
}

/* Ensure selected row cells also maintain height */
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Prevent button clicks from bubbling to row clicks and ensure proper sizing */
.sortable-grid-container .table tbody tr td button[b-kikw7forrp],
.sortable-grid-container .table tbody tr td .btn[b-kikw7forrp],
.sortable-grid-container .table tbody tr td a.btn[b-kikw7forrp] {
    position: relative;
    z-index: 10;
    max-height: calc(var(--grid-row-height) - 8px) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button groups within grid cells */
.sortable-grid-container .table tbody tr td .btn-group[b-kikw7forrp] {
    max-height: calc(var(--grid-row-height) - 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Small buttons within grid cells */
.sortable-grid-container .table tbody tr td .btn-sm[b-kikw7forrp] {
    max-height: calc(var(--grid-row-height) - 12px) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
}

/* Enhanced Checkboxes */
.sortable-grid-container .form-check-input[b-kikw7forrp] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--grid-border);
    border-radius: 0.25rem;
    transition: all var(--grid-transition-base);
    cursor: pointer;
    position: relative;
}

.sortable-grid-container .form-check-input:checked[b-kikw7forrp] {
    background-color: var(--grid-primary);
    border-color: var(--grid-primary);
    animation: checkPop-b-kikw7forrp 0.3s ease;
}

.sortable-grid-container .form-check-input:focus[b-kikw7forrp] {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    outline: none;
}

/* Enhanced Badge Styling */
.sortable-grid-container .badge[b-kikw7forrp] {
    font-size: var(--grid-text-xs);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    transition: all var(--grid-transition-base);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    max-height: calc(var(--grid-row-height) - 8px) !important;
    box-sizing: border-box !important;
}

.sortable-grid-container .badge.bg-primary[b-kikw7forrp] {
    background: linear-gradient(135deg, var(--grid-primary) 0%, var(--grid-primary-dark) 100%) !important;
    border-color: var(--grid-primary-dark);
    box-shadow: var(--grid-shadow-sm);
}

/* Reset Button Enhancement */
.sortable-grid-container .btn-outline-secondary[b-kikw7forrp] {
    border-color: var(--grid-border);
    color: var(--grid-text-secondary);
    background: var(--grid-surface);
    font-weight: 500;
    transition: all var(--grid-transition-base);
}

.sortable-grid-container .btn-outline-secondary:hover[b-kikw7forrp] {
    background: var(--grid-danger);
    border-color: var(--grid-danger);
    color: var(--grid-text-inverted);
    transform: translateY(-1px);
    box-shadow: var(--grid-shadow-md);
}

/* === WORLD-CLASS ENHANCED ANIMATIONS & STYLING === */

@keyframes sortBounce-b-kikw7forrp {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2) rotate(5deg); }
    50% { transform: scale(1.3) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(2deg); }
}

@keyframes sortActivePulse-b-kikw7forrp {
    0%, 100% { 
        transform: scale(1.1);
        box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25);
    }
    50% { 
        transform: scale(1.15);
        box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    }
}

@keyframes sortGlow-b-kikw7forrp {
    0% { 
        opacity: 0.2;
        background: linear-gradient(45deg, var(--grid-primary), #60a5fa, var(--grid-primary));
    }
    100% { 
        opacity: 0.4;
        background: linear-gradient(45deg, #60a5fa, var(--grid-primary), #60a5fa);
    }
}

@keyframes selectPulse-b-kikw7forrp {
    0% { 
        transform: scale(1); 
        height: var(--grid-row-height); 
    }
    50% { 
        transform: scale(1.02); 
        background-color: rgba(59, 130, 246, 0.2); 
        height: var(--grid-row-height); 
    }
    100% { 
        transform: scale(1); 
        height: var(--grid-row-height); 
    }
}

@keyframes checkPop-b-kikw7forrp {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes metalSheen-b-kikw7forrp {
    0% { 
        left: -150%;
        opacity: 0;
        transform: skewX(-20deg) scaleX(0.8);
    }
    15% {
        opacity: 0.7;
        transform: skewX(-20deg) scaleX(1);
    }
    85% {
        opacity: 0.7;
        transform: skewX(-20deg) scaleX(1);
    }
    100% { 
        left: 150%;
        opacity: 0;
        transform: skewX(-20deg) scaleX(0.8);
    }
}

@keyframes initialSheen-b-kikw7forrp {
    0% {
        left: -150%;
        opacity: 0;
        transform: skewX(-20deg) scaleX(0.8);
    }
    30% {
        opacity: 0.9;
        transform: skewX(-20deg) scaleX(1);
    }
    70% {
        opacity: 0.9;
        transform: skewX(-20deg) scaleX(1);
    }
    100% {
        left: 150%;
        opacity: 0;
        transform: skewX(-20deg) scaleX(0.8);
    }
}

@keyframes liquidFillRow-b-kikw7forrp {
    from {
        width: 0%;
        opacity: 0.8;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

@keyframes spinner-grow-b-kikw7forrp {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

@keyframes fadeInOut-b-kikw7forrp {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes emptyStatePulse-b-kikw7forrp {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

.non-sortable[b-kikw7forrp] {
    cursor: default !important;
}

.cursor-pointer[b-kikw7forrp] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cursor-pointer:hover[b-kikw7forrp] {
    background: linear-gradient(135deg, #f8fafc 0%, rgba(248, 250, 252, 0.8) 100%);
    transform: scale(1.01);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Enhanced Group Headers */
.group-header[b-kikw7forrp] {
    font-weight: 600;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-left: 4px solid #06b6d4;
    color: #1e293b;
    position: relative;
    overflow: hidden;
}

.group-header[b-kikw7forrp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #06b6d4 0%, #3b82f6 100%);
}

.collapsible-group-header[b-kikw7forrp] {
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
}

.collapsible-group-header:hover[b-kikw7forrp] {
    background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%) !important;
    transform: translateX(2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.collapsible-group-header i[b-kikw7forrp] {
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    margin-right: 0.5rem;
}

.collapsible-group-header:hover i[b-kikw7forrp] {
    background: #3b82f6;
    color: #ffffff;
    transform: scale(1.1);
}

/* Enhanced Loading Overlay with Fade Animations */
.grid-loading-overlay[b-kikw7forrp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 0.75rem;

    /* Fade-in animation */
    animation: gridLoaderFadeIn-b-kikw7forrp 0.3s ease-in-out forwards;
    opacity: 0;
}

/* Fade-out animation class (applied via JavaScript) - ensures element is hidden after animation */
.grid-loading-overlay.fade-out[b-kikw7forrp] {
    animation: gridLoaderFadeOut-b-kikw7forrp 0.3s ease-in-out forwards;
    animation-fill-mode: forwards;
    /* Pause all child animations during fade-out for performance */
    pointer-events: none;
}

/* Pause child animations when parent is fading out */
.grid-loading-overlay.fade-out .spinner-border[b-kikw7forrp],
.grid-loading-overlay.fade-out .mt-2[b-kikw7forrp] {
    animation-play-state: paused !important;
}

/* Completely hide loading overlay after fade-out animation completes */
@keyframes gridLoaderFadeOut-b-kikw7forrp {
    0% {
        opacity: 1;
        transform: scale(1);
        display: flex;
    }
    99% {
        opacity: 0;
        transform: scale(0.95);
        display: flex;
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
        display: none; /* Remove from layout to stop animations */
    }
}

/* Keyframes for loader animations */
@keyframes gridLoaderFadeIn-b-kikw7forrp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* gridLoaderFadeOut defined above with display: none to stop animations */

.grid-loading-overlay .spinner-border[b-kikw7forrp] {
    width: 3rem;
    height: 3rem;
    border-width: 0.25rem;
    color: #3b82f6;
    animation: spinner-grow-b-kikw7forrp 1.5s ease infinite;
}

.grid-loading-overlay .mt-2[b-kikw7forrp] {
    color: #64748b;
    font-weight: 500;
    font-size: 0.875rem;
    animation: fadeInOut-b-kikw7forrp 2s ease infinite;
}

/* Enhanced Empty State */
.empty-state-cell[b-kikw7forrp] {
    padding: 3rem 2rem !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: none !important;
    height: 300px;
    vertical-align: middle;
    width: 100% !important;
    /* Ensure cell fills entire table width */
    display: table-cell !important;
}

/* Empty Space Filler - appears below data rows when grid isn't full */
.grid-empty-space-filler[b-kikw7forrp] {
    background: linear-gradient(135deg, #fafbfc 0%, #f6f8fa 100%);
    border-top: 1px solid var(--grid-border-light);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grid-text-muted);
    font-size: var(--grid-text-sm);
    border-radius: 0 0 0.75rem 0.75rem;
}

.grid-empty-space-filler[b-kikw7forrp]::after {
    content: '';
    opacity: 0.3;
}

.empty-state[b-kikw7forrp] {
    padding: 1rem;
    text-align: center;
    color: #64748b;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.empty-state i[b-kikw7forrp] {
    color: #94a3b8 !important;
    opacity: 0.8;
    animation: emptyStatePulse-b-kikw7forrp 3s ease infinite;
    font-size: 3rem !important;
    margin-bottom: 0.5rem;
}

.empty-state h5[b-kikw7forrp] {
    color: #1e293b !important;
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
}

.empty-state p[b-kikw7forrp] {
    color: #64748b !important;
    margin: 0;
    font-size: 1rem;
    opacity: 0.8;
}

/* Prevent hover effects on empty state row to avoid flickering */
.sortable-grid-container .table tbody tr:has(.empty-state-cell)[b-kikw7forrp] {
    pointer-events: none !important;
}

.sortable-grid-container .table tbody tr:has(.empty-state-cell):hover[b-kikw7forrp] {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.sortable-grid-container .table tbody tr:has(.empty-state-cell)[b-kikw7forrp]::after {
    display: none !important;
}

/* Ensure table stretches to fill container when empty */
.sortable-grid-container .table-responsive[b-kikw7forrp] {
    width: 100%;
}

.sortable-grid-container .table[b-kikw7forrp] {
    width: 100% !important;
}

/* Left Alignment Control */
.sortable-grid-container.left-aligned .table th[b-kikw7forrp],
.sortable-grid-container.left-aligned .table td[b-kikw7forrp] {
    text-align: left !important;
}

.sortable-grid-container.left-aligned .unified-grid-controls .control-section-center[b-kikw7forrp] {
    justify-content: flex-start !important;
}

.sortable-grid-container.left-aligned .pagination[b-kikw7forrp] {
    justify-content: flex-start !important;
}

/* Enhanced Sticky Header */
.sticky-top[b-kikw7forrp] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.table-light th[b-kikw7forrp] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-color: #e2e8f0;
    color: #1e293b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    position: relative;
}

.table-light th[b-kikw7forrp]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: #e2e8f0;
    opacity: 0.5;
}

.table-light th:last-child[b-kikw7forrp]::after {
    display: none;
}

/* Enhanced Column Titles */
.column-title[b-kikw7forrp] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    min-width: 0; /* Allow text to shrink */
    margin-left: var(--column-title-margin-left, 5px); /* Configurable left margin for column titles */
}

.column-title i[b-kikw7forrp] {
    color: #3b82f6;
    opacity: 0.8;
}

/* Enhanced Responsive Design with Column Priority System */

/* Priority-based column hiding for responsive design */
.sortable-grid-container th[data-column-priority="low"][b-kikw7forrp],
.sortable-grid-container td[data-column-priority="low"][b-kikw7forrp] {
    display: none;
}

@media (min-width: 768px) {
    .sortable-grid-container th[data-column-priority="low"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="low"][b-kikw7forrp] {
        display: table-cell;
    }
}

@media (min-width: 992px) {
    .sortable-grid-container th[data-column-priority="medium"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="medium"][b-kikw7forrp] {
        display: table-cell;
    }
}

@media (max-width: 767px) {
    .sortable-grid-container th[data-column-priority="medium"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="medium"][b-kikw7forrp] {
        display: none;
    }
}

@media (max-width: 640px) {
    .sortable-grid-container[b-kikw7forrp] {
        border-radius: 0.5rem;
        font-size: 0.75rem;
    }
    
    .sortable-grid-container .table thead th[b-kikw7forrp] {
        padding: 0.5rem;
        height: 2.5rem;
        font-size: 0.75rem;
    }
    
    .sortable-grid-container .table tbody td[b-kikw7forrp] {
        padding: 0.25rem 0.5rem;
        height: auto; /* Allow cells to expand based on content */
        /* Allow natural text wrapping on mobile */
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
    }
    
    .sort-indicator[b-kikw7forrp] {
        min-width: 20px;
        height: 20px;
    }
    
    .column-title[b-kikw7forrp] {
        font-size: 0.75rem;
    }
    
    .sortable-grid-container .d-flex.justify-content-between[b-kikw7forrp] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch !important;
    }
    
    .sortable-grid-container .btn-group[b-kikw7forrp] {
        justify-content: center;
    }
    
    /* Hide less important columns on mobile */
    .sortable-grid-container th[data-column-priority="medium"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="medium"][b-kikw7forrp],
    .sortable-grid-container th[data-column-priority="low"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="low"][b-kikw7forrp] {
        display: none !important;
    }
    
    /* Always show essential columns on mobile */
    .sortable-grid-container th[data-column-priority="high"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="high"][b-kikw7forrp],
    .sortable-grid-container th[data-column-priority="essential"][b-kikw7forrp],
    .sortable-grid-container td[data-column-priority="essential"][b-kikw7forrp] {
        display: table-cell !important;
    }
}

@media (max-width: 768px) {
    .sortable-grid-container .table-responsive[b-kikw7forrp] {
        font-size: 0.875rem;
        border-radius: 0.5rem;
    }
    
    .sortable-grid-container .d-flex.gap-3[b-kikw7forrp] {
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
    
    .sort-indicator[b-kikw7forrp] {
        min-width: 12px;
    }
    
    .column-title[b-kikw7forrp] {
        font-size: 0.8rem;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .sortable-grid-container[b-kikw7forrp] {
        border: 2px solid #000000;
    }
    
    .sortable-header.sortable:hover[b-kikw7forrp] {
        background: #000000 !important;
        color: #ffffff;
    }
    
    .table-light th[b-kikw7forrp] {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .sortable-grid-container *[b-kikw7forrp],
    .sortable-grid-container *[b-kikw7forrp]::before,
    .sortable-grid-container *[b-kikw7forrp]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Visible Enhancement */
.sortable-grid-container *:focus-visible[b-kikw7forrp] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Print Styles */
@media print {
    .sortable-grid-container[b-kikw7forrp] {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .sortable-grid-container .grid-loading-overlay[b-kikw7forrp],
    .sortable-grid-container .btn[b-kikw7forrp],
    .sortable-grid-container .form-select[b-kikw7forrp] {
        display: none !important;
    }
    
    .sortable-grid-container .table[b-kikw7forrp] {
        color: #000 !important;
    }
    
    .sortable-grid-container .table thead th[b-kikw7forrp] {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
}

/* Ensure consistent checkbox column width */
.has-multiselect thead th:first-child[b-kikw7forrp],
.has-multiselect tbody td:first-child[b-kikw7forrp] {
    min-width: 60px !important;
    width: 60px !important;
    max-width: 60px !important;
}

/* Align checkbox content properly */
.has-multiselect thead th:first-child .d-flex[b-kikw7forrp],
.has-multiselect tbody td:first-child[b-kikw7forrp] {
    justify-content: center;
    align-items: center;
}

/* Icon-only column styling - fixed width and height */
.sortable-grid-container th.icon-only-column[b-kikw7forrp],
.sortable-grid-container td.icon-only-column[b-kikw7forrp] {
    max-width: 25px !important;
    min-width: 25px !important;
    width: 25px !important;
    text-align: center !important;
    padding: 2px !important;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle !important;
    height: var(--grid-row-height) !important;
}

.sortable-grid-container th.icon-only-column .column-title[b-kikw7forrp] {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    height: 100%;
    min-height: var(--grid-row-height);
    padding: 0;
    margin: 0;
    width: 25px;
}

/* Badge content within icon-only columns - normal badge behavior */
.sortable-grid-container td.icon-only-column .badge[b-kikw7forrp] {
    display: inline-block !important;
    padding: 0.25em 0.4em !important;
    font-size: 0.75em !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 0.375rem !important;
    margin: 0 !important;
    min-height: auto !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    box-sizing: border-box !important;
}

.sortable-grid-container th.icon-only-column .column-title .me-1[b-kikw7forrp] {
    margin-right: 0 !important;
}

/* Row Indicator Column Styling */
.indicator-column[b-kikw7forrp] {
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: relative;
    box-sizing: border-box !important;
}

/* Status Indicator Cell Styling */
.status-indicator-cell[b-kikw7forrp] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    border-right: 1px solid var(--grid-border-light) !important;
    background: var(--grid-surface) !important;
    position: relative;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Ensure table layout consistency */
.sortable-grid-container .table[b-kikw7forrp] {
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Force consistent column alignment */
.sortable-grid-container .table th[b-kikw7forrp],
.sortable-grid-container .table td[b-kikw7forrp] {
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.row-indicator[b-kikw7forrp] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px !important;
    border-radius: 0 2px 2px 0;
    transition: all 0.2s ease;
}

/* Hover effect for indicator */
tr:hover .row-indicator[b-kikw7forrp] {
    width: 6px !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Prevent button clicks from bubbling to row clicks */
.sortable-grid-container tbody tr button[b-kikw7forrp],
.sortable-grid-container tbody tr .btn[b-kikw7forrp],
.sortable-grid-container tbody tr a.btn[b-kikw7forrp],
.sortable-grid-container tbody tr [role="button"][b-kikw7forrp] {
    position: relative;
    z-index: 10;
}

.sortable-grid-container tbody tr button *[b-kikw7forrp],
.sortable-grid-container tbody tr .btn *[b-kikw7forrp],
.sortable-grid-container tbody tr a.btn *[b-kikw7forrp],
.sortable-grid-container tbody tr [role="button"] *[b-kikw7forrp] {
    pointer-events: none;
}

/* Filter Section Styling - Simplified */
.grid-filters-section[b-kikw7forrp] {
    max-width: 100%;
}

.grid-filters-section .card[b-kikw7forrp] {
    border: 1px solid var(--grid-border);
    border-radius: 0.375rem;
    background: var(--grid-surface);
}

.grid-filters-section .card-header[b-kikw7forrp] {
    background-color: var(--grid-surface-hover);
    border-bottom: 1px solid var(--grid-border);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.grid-filters-section .card-header:hover[b-kikw7forrp] {
    background-color: var(--grid-surface-active);
}

.grid-filters-section .card-body[b-kikw7forrp] {
    background-color: var(--grid-surface);
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
/* ================================================== */
/*              UNIFIED GRID CONTROLS                */
/* ================================================== */

/* Unified Grid Controls Layout */
.unified-grid-controls[b-kikw7forrp] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--grid-surface);
    border: 1px solid var(--grid-border);
    border-radius: var(--grid-radius-sm);
    box-shadow: var(--grid-shadow);
    transition: var(--grid-transition-fast);
}

.unified-grid-controls:hover[b-kikw7forrp] {
    box-shadow: var(--grid-shadow-lg);
    border-color: var(--grid-border-hover);
}

/* Control Sections */
.control-section[b-kikw7forrp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-section-left[b-kikw7forrp] {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.control-section-center[b-kikw7forrp] {
    justify-content: center;
}

.control-section-right[b-kikw7forrp] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Info Items */
.info-item[b-kikw7forrp] {
    display: flex;
    align-items: center;
    color: var(--grid-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.info-item:not(:last-child)[b-kikw7forrp] {
    margin-bottom: 0.25rem;
}

/* ================================================== */
/*                SELECTION PANELS                   */
/* ================================================== */

/* Selection Panels */
.selection-panel[b-kikw7forrp] {
    background: linear-gradient(135deg, var(--grid-primary-light) 0%, rgba(59, 130, 246, 0.1) 100%);
    border: 1px solid var(--grid-primary);
    border-radius: var(--grid-radius-sm);
    overflow: hidden;
    animation: slideDown-b-kikw7forrp 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.selection-panel-top[b-kikw7forrp] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
}

.selection-panel-bottom[b-kikw7forrp] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0 !important;
    animation: slideUp-b-kikw7forrp 0.3s ease-out;
}

.selection-panel-content[b-kikw7forrp] {
    padding: 0.875rem 1.25rem;
}

/* Selection Panel Animations */
@keyframes slideDown-b-kikw7forrp {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

@keyframes slideUp-b-kikw7forrp {
    from {
        opacity: 0;
        transform: translateY(10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
}

/* Selection Panel Badge */
.selection-panel .badge[b-kikw7forrp] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: var(--grid-radius-sm);
    background: var(--grid-primary) !important;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* ================================================== */
/*            RESPONSIVE UNIFIED LAYOUT              */
/* ================================================== */

/* Responsive Design for Unified Controls */
@media (max-width: 1200px) {
    .unified-grid-controls[b-kikw7forrp] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        text-align: center;
    }
    
    .control-section[b-kikw7forrp] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .control-section-left[b-kikw7forrp],
    .control-section-right[b-kikw7forrp] {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .unified-grid-controls[b-kikw7forrp] {
        padding: 0.5rem 0.75rem;
    }
    
    .info-item[b-kikw7forrp] {
        font-size: 0.8rem;
    }
    
    .control-section[b-kikw7forrp] {
        gap: 0.5rem;
    }
    
    .selection-panel-content[b-kikw7forrp] {
        padding: 0.625rem 0.875rem;
    }
    
    .selection-panel .btn[b-kikw7forrp] {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 576px) {
    .unified-grid-controls[b-kikw7forrp] {
        padding: 0.375rem 0.5rem;
    }
    
    .info-item[b-kikw7forrp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .control-section[b-kikw7forrp] {
        flex-direction: column;
        gap: 0.375rem;
    }
}

/* ================================================== */
/*           INTEGRATION WITH EXISTING GRID         */
/* ================================================== */

/* Integration with existing grid styling */
.unified-grid-controls + .table-responsive[b-kikw7forrp] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.selection-panel + .unified-grid-controls[b-kikw7forrp] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    margin-top: 0;
}

.unified-grid-controls + .table-responsive .table[b-kikw7forrp] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ================================================== */
/*            ABSOLUTE ROW HEIGHT ENFORCEMENT        */
/* ================================================== */

/* NUCLEAR OPTION: Override Bootstrap and any external table styles */
.sortable-grid-container .table > tbody > tr > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr > th[b-kikw7forrp] {
    padding: var(--grid-space-sm) var(--grid-space-base) !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Override Bootstrap table variant styles completely */
.sortable-grid-container .table tbody tr.table-success td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-danger td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-warning td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-info:not(.group-header) td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-secondary td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-light td[b-kikw7forrp], 
.sortable-grid-container .table tbody tr.table-dark td[b-kikw7forrp] {
    padding: var(--grid-space-sm) var(--grid-space-base) !important;
    margin: 0 !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Ultra-specific rule to override ANY conflicting height styles - ALL ROWS INCLUDING NO CLASS */
.sortable-grid-container.sortable-grid-container .table.table tbody tr[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-info[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-warning[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-success[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-danger[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-primary[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-secondary[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr:not([class*="table-"]):not(.group-header)[b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr[class=""][b-kikw7forrp],
.sortable-grid-container.sortable-grid-container .table.table tbody tr:not([class])[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* ULTIMATE specificity - match the exact .table > tbody > tr > td pattern but with adv-row */
.sortable-grid-container .table > tbody > tr.adv-row > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-info > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-success > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-warning > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-danger > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-primary > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-secondary > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-light > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-dark > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-light > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-light.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-info.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container .table > tbody > tr.adv-row.table-success.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-info > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-success > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-light > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-light.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-info.cursor-pointer > td[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table > tbody > tr.adv-row.table-success.cursor-pointer > td[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    padding: 0.5rem 0.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Also ensure the rows themselves have consistent height - ALL combinations including show-row-status-indicators */
.sortable-grid-container .table tbody tr.adv-row[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-info[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-success[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-warning[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-danger[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-primary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-secondary[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-light[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.table-dark[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-info[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-success[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-light[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-light.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-info.cursor-pointer[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.adv-row.table-success.cursor-pointer[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Exception for group headers */
.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-info.group-header[b-kikw7forrp] {
    height: var(--grid-group-header-height) !important;
    max-height: var(--grid-group-header-height) !important;
    min-height: var(--grid-group-header-height) !important;
}

.sortable-grid-container.sortable-grid-container .table.table tbody tr.table-info.group-header td[b-kikw7forrp] {
    height: var(--grid-group-header-height) !important;
    max-height: var(--grid-group-header-height) !important;
    min-height: var(--grid-group-header-height) !important;
    padding-top: calc((var(--grid-group-header-height) - 1.2em) / 2) !important;
    padding-bottom: calc((var(--grid-group-header-height) - 1.2em) / 2) !important;
}

/* ================================================== */
/*                 PRINT OVERRIDES                   */
/* ================================================== */

/* Print styles override */
@media print {
    .selection-panel[b-kikw7forrp] {
        display: none !important;
    }
    
    .unified-grid-controls[b-kikw7forrp] {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
        padding: 0.25rem !important;
    }
    
    .control-section[b-kikw7forrp] {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* ===== ACTIONS COLUMN STANDARDIZATION ===== */

/* Actions Column Header - Always Center Aligned */
.sortable-grid-container th[data-column-type="actions"][b-kikw7forrp],
.sortable-grid-container th.grid-actions-header[b-kikw7forrp] {
    text-align: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Actions Column Cells - Always Center Aligned */
.sortable-grid-container td[data-column-type="actions"][b-kikw7forrp],
.sortable-grid-container td.grid-actions-cell[b-kikw7forrp] {
    text-align: center !important;
    vertical-align: middle !important;
    padding: var(--grid-space-xs) !important;
}

/* Actions Column Content Container */
.sortable-grid-container .grid-actions-cell > div[b-kikw7forrp],
.sortable-grid-container .grid-actions-cell .d-flex[b-kikw7forrp] {
    justify-content: center !important;
    align-items: center !important;
    gap: 0.25rem !important;
    height: 100% !important;
}

/* Action Buttons Standardization */
.sortable-grid-container .grid-actions-cell .btn[b-kikw7forrp] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0.25rem 0.4rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.25rem !important;
    transition: all var(--grid-transition-base) !important;
}

/* Action Button Hover Effects */
.sortable-grid-container .grid-actions-cell .btn:hover[b-kikw7forrp] {
    transform: translateY(-1px) !important;
    box-shadow: var(--grid-shadow-sm) !important;
}

/* Action Button Icon Sizing */
.sortable-grid-container .grid-actions-cell .btn i[b-kikw7forrp] {
    font-size: 0.75rem !important;
    line-height: 1 !important;
}

/* Ensure Actions header has proper title centering for any "Actions" column */
.sortable-grid-container th:last-child[b-kikw7forrp],
.sortable-grid-container th[data-sortable="false"][b-kikw7forrp] {
    text-align: center !important;
}

/* Target any column with "Actions" in the title */
.sortable-grid-container th:has(.column-title):contains("Actions")[b-kikw7forrp] {
    text-align: center !important;
}

/* Fallback for actions columns by position (last column is typically actions) */
.sortable-grid-container tbody tr td:last-child[b-kikw7forrp] {
    text-align: center !important;
}

.sortable-grid-container thead tr th:last-child[b-kikw7forrp] {
    text-align: center !important;
}

/* ===== CONFIGURABLE ROW HIGHLIGHTING MODES ===== */

/* Background Highlight Mode with liquid fill animation */
.sortable-grid-container .table tbody tr.row-highlight-bg[b-kikw7forrp] {
    /* Custom background will be applied by the custom class */
    /* This class ensures table-light doesn't override */
    position: relative;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Liquid fill effect using ::before pseudo-element */
.sortable-grid-container .table tbody tr.row-highlight-bg[b-kikw7forrp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    background: inherit; /* Use the custom highlight color */
    z-index: 0; /* Behind text content */
    animation: liquidFillRow-b-kikw7forrp 0.5s ease-out forwards; /* Smooth fill animation */
    pointer-events: none; /* Don't block clicks */
    overflow: hidden; /* Prevent any overflow */
}

/* Ensure cell content stays above the fill animation - match exact base grid cell styling */
.sortable-grid-container .table tbody tr.row-highlight-bg td[b-kikw7forrp] {
    position: relative;
    z-index: 1; /* Above the ::before pseudo-element */
    /* Match exact properties from base .sortable-grid-container .table tbody td */
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    padding: var(--grid-space-sm) var(--grid-space-base);
    vertical-align: middle !important;
    border-top: 1px solid var(--grid-border-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Ensure liquid fill animation works with modal's selected-modal-row class - complete rule required for pseudo-element */
.modal .sortable-grid-container tbody tr.selected-modal-row.row-highlight-bg[b-kikw7forrp]::before {
    content: '' !important; /* Required for pseudo-element to exist */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 0 !important;
    background-color: #0d1b6e !important; /* Match modal's blue */
    z-index: 0 !important; /* Behind text content */
    animation: liquidFillRow-b-kikw7forrp 0.5s ease-out forwards !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Border Highlight Mode - use outline instead of border to avoid layout shifts */
.sortable-grid-container .table tbody tr.row-highlight-border[b-kikw7forrp] {
    outline: 3px solid var(--grid-primary) !important;
    outline-offset: -3px !important; /* Inset the outline */
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Combined Mode (Both) */
.sortable-grid-container .table tbody tr.row-highlight-bg.row-highlight-border[b-kikw7forrp] {
    outline: 3px solid var(--grid-primary) !important;
    outline-offset: -3px !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Ensure custom classes aren't overridden by Bootstrap table-light */
.sortable-grid-container .table tbody tr.row-highlight-bg:not(.table-primary):not(.table-success):not(.table-warning):not(.table-danger):not(.table-info):not(.table-secondary):not(.table-dark)[b-kikw7forrp] {
    background-color: inherit !important; /* Preserve custom background */
}

/* Border highlight hover effect - use outline for no layout shift */
.sortable-grid-container .table tbody tr.row-highlight-border:hover[b-kikw7forrp] {
    outline: 4px solid var(--grid-primary) !important;
    outline-offset: -4px !important;
}

/* Ensure highlight remains visible with selected row styling */
.sortable-grid-container .table tbody tr.row-highlight-bg.adv-row[b-kikw7forrp],
.sortable-grid-container.show-row-status-indicators .table tbody tr.row-highlight-bg.adv-row[b-kikw7forrp] {
    /* Preserve custom background color */
    background: inherit !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
}

/* Border highlight with table-primary (multi-select) */
.sortable-grid-container .table tbody tr.row-highlight-border.table-primary[b-kikw7forrp] {
    outline-color: var(--grid-primary-dark) !important;
}

/* ===== FIX: Override site.css Bootstrap table class padding for consistent row heights ===== */
/* CRITICAL: Ensure ALL rows including selected rows have same padding to maintain height consistency */
.sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-success td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-danger td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-warning td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-info:not(.group-header) td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-secondary td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-light td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.table-dark td[b-kikw7forrp] {
    padding: var(--grid-space-sm) var(--grid-space-base) !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Ensure modal grids also get the correct padding override */
.modal .sortable-grid-container .table tbody tr.table-primary td[b-kikw7forrp],
.modal .sortable-grid-container .table tbody tr.selected-modal-row td[b-kikw7forrp] {
    padding: var(--grid-space-sm) var(--grid-space-base) !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* ===== FIX: Enforce consistent height for selected-modal-row ===== */
/* CRITICAL: selected-modal-row needs ultra-specific rules to match other row types */
.sortable-grid-container .table tbody tr.adv-row.selected-modal-row[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.selected-modal-row.row-highlight-bg[b-kikw7forrp] {
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Ensure cells in selected-modal-row match other rows exactly */
.sortable-grid-container .table tbody tr.adv-row.selected-modal-row td[b-kikw7forrp],
.sortable-grid-container .table tbody tr.adv-row.selected-modal-row.row-highlight-bg td[b-kikw7forrp],
.modal .sortable-grid-container .table tbody tr.adv-row.selected-modal-row td[b-kikw7forrp] {
    padding: var(--grid-space-sm) var(--grid-space-base) !important;
    height: var(--grid-row-height) !important;
    max-height: var(--grid-row-height) !important;
    min-height: var(--grid-row-height) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* /Components/Common/Grids/GridContextMenu.razor.rz.scp.css */
/* ===== WORLD-CLASS CONTEXT MENU WITH RIM LIGHTING ===== */

.grid-context-menu[b-rd0y5cdnse] {
    position: fixed;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92) translateY(-8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px;
    filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
}

.grid-context-menu.show[b-rd0y5cdnse] {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Premium Menu Container with Rim Lighting */
.context-menu-container[b-rd0y5cdnse] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    min-width: 170px;
    max-width: 220px;
    padding: 6px 3px;
    overflow: visible;
    position: relative;
}

/* Premium Rim Lighting Effect */
.context-menu-container[b-rd0y5cdnse]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: conic-gradient(from 0deg, 
        rgba(59, 130, 246, 0.3) 0deg,
        rgba(147, 51, 234, 0.3) 90deg,
        rgba(236, 72, 153, 0.3) 180deg,
        rgba(245, 101, 101, 0.3) 270deg,
        rgba(59, 130, 246, 0.3) 360deg
    );
    z-index: -1;
    animation: rim-rotate 8s linear infinite;
    opacity: 0.6;
}

@@keyframes rim-rotate {
    0%[b-rd0y5cdnse] { transform: rotate(0deg); }
    100%[b-rd0y5cdnse] { transform: rotate(360deg); }
}

/* Menu Content */
.context-menu-content[b-rd0y5cdnse] {
    background: transparent;
    padding: 0;
    border-radius: 8px;
    position: relative;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Section Management */
.context-menu-section[b-rd0y5cdnse] {
    margin-bottom: 0;
}

.context-menu-section:not(:last-child)[b-rd0y5cdnse]::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
    margin: 6px 8px;
}

/* Menu Separators */
.menu-separator[b-rd0y5cdnse] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
    margin: 6px 8px;
}

/* Premium Context Menu Items */
.context-menu-item[b-rd0y5cdnse], .submenu-item[b-rd0y5cdnse] {
    display: flex;
    align-items: center;
    padding: 6px 24px 6px 8px;
    margin: 1px 3px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    border: 1px solid transparent;
    overflow: hidden;
}

.context-menu-item:hover:not(.disabled)[b-rd0y5cdnse], 
.submenu-item:hover:not(.disabled)[b-rd0y5cdnse] {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 
        0 0 0 1px rgba(59, 130, 246, 0.2),
        0 4px 16px rgba(59, 130, 246, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.context-menu-item:active:not(.disabled)[b-rd0y5cdnse], 
.submenu-item:active:not(.disabled)[b-rd0y5cdnse] {
    transform: translateY(0);
    box-shadow: 
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 2px 8px rgba(59, 130, 246, 0.2),
        inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Premium Blue Line Animation */
.hover-line[b-rd0y5cdnse] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.context-menu-item:hover .hover-line[b-rd0y5cdnse],
.submenu-item:hover .hover-line[b-rd0y5cdnse] {
    width: 100%;
}

/* Premium Icon Styling */
.item-icon[b-rd0y5cdnse] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.context-menu-item:hover:not(.disabled) .item-icon[b-rd0y5cdnse],
.submenu-item:hover:not(.disabled) .item-icon[b-rd0y5cdnse] {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.item-icon i[b-rd0y5cdnse] {
    font-size: 12px;
    transition: all 0.2s ease;
}

/* Item Content */
.item-content[b-rd0y5cdnse] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.item-title[b-rd0y5cdnse] {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-description[b-rd0y5cdnse] {
    font-size: 11px;
    color: rgba(107, 114, 128, 0.8);
    margin-top: 1px;
    line-height: 1.2;
    display: none; /* Hide descriptions for compact view */
}

.context-menu-item:hover:not(.disabled) .item-description[b-rd0y5cdnse],
.submenu-item:hover:not(.disabled) .item-description[b-rd0y5cdnse] {
    color: rgba(255, 255, 255, 0.8);
}

/* Premium Submenu Arrow */
.submenu-arrow[b-rd0y5cdnse] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.submenu-arrow[b-rd0y5cdnse]::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 3px solid #6b7280;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    transition: all 0.2s ease;
}

.context-menu-item:hover:not(.disabled) .submenu-arrow[b-rd0y5cdnse],
.submenu-item:hover:not(.disabled) .submenu-arrow[b-rd0y5cdnse] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.05);
}

.context-menu-item:hover:not(.disabled) .submenu-arrow[b-rd0y5cdnse]::after,
.submenu-item:hover:not(.disabled) .submenu-arrow[b-rd0y5cdnse]::after {
    border-left-color: #ffffff;
}

.submenu-arrow i[b-rd0y5cdnse] {
    display: none;
}

/* Disabled Items */
.context-menu-item.disabled[b-rd0y5cdnse], .submenu-item.disabled[b-rd0y5cdnse] {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.5;
}

.context-menu-item.disabled:hover[b-rd0y5cdnse], 
.submenu-item.disabled:hover[b-rd0y5cdnse] {
    background: transparent;
    color: #9ca3af;
    transform: none;
    box-shadow: none;
}

/* ===== PREMIUM SUBMENU PANELS ===== */

.submenu-panel[b-rd0y5cdnse] {
    position: fixed;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    min-width: 160px;
    max-width: 200px;
    padding: 6px 3px;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateX(-20px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    overflow: visible;
}

.submenu-panel.show[b-rd0y5cdnse] {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(0);
    pointer-events: auto;
}

.submenu-panel.nested[b-rd0y5cdnse] {
    z-index: 10002;
}

/* Submenu Rim Lighting */
.submenu-panel[b-rd0y5cdnse]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 13px;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.2) 0%,
        rgba(59, 130, 246, 0.2) 50%,
        rgba(147, 51, 234, 0.2) 100%
    );
    z-index: -1;
    opacity: 0.4;
}

.submenu-container[b-rd0y5cdnse] {
    background: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}

.submenu-content[b-rd0y5cdnse] {
    background: transparent;
    padding: 0;
    border-radius: 8px;
}

/* Submenu Items */
.submenu-item[b-rd0y5cdnse] {
    padding: 6px 24px 6px 8px;
    margin: 1px 3px;
}

.submenu-item .item-icon[b-rd0y5cdnse] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.submenu-item .item-title[b-rd0y5cdnse] {
    font-size: 13px;
}

/* Premium Backdrop */
.context-menu-backdrop[b-rd0y5cdnse] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(1px);
    transition: all 0.2s ease;
}

/* Focus States for Accessibility */
.context-menu-item:focus[b-rd0y5cdnse],
.submenu-item:focus[b-rd0y5cdnse] {
    outline: none;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 
        0 0 0 2px rgba(59, 130, 246, 0.3),
        0 4px 16px rgba(59, 130, 246, 0.25);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .context-menu-container[b-rd0y5cdnse],
    .submenu-panel[b-rd0y5cdnse] {
        background: #ffffff;
        border: 2px solid #000000;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
    
    .context-menu-item:hover:not(.disabled)[b-rd0y5cdnse],
    .submenu-item:hover:not(.disabled)[b-rd0y5cdnse] {
        background: #000000;
        color: #ffffff;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .grid-context-menu[b-rd0y5cdnse],
    .context-menu-item[b-rd0y5cdnse],
    .submenu-item[b-rd0y5cdnse],
    .submenu-panel[b-rd0y5cdnse],
    .hover-line[b-rd0y5cdnse],
    .item-icon[b-rd0y5cdnse],
    .submenu-arrow[b-rd0y5cdnse] {
        animation: none !important;
        transition: none !important;
    }
    
    .context-menu-container[b-rd0y5cdnse]::before,
    .submenu-panel[b-rd0y5cdnse]::before {
        animation: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .context-menu-container[b-rd0y5cdnse],
    .submenu-panel[b-rd0y5cdnse] {
        min-width: 180px;
        font-size: 16px;
        border-radius: 16px;
    }
    
    .context-menu-item[b-rd0y5cdnse],
    .submenu-item[b-rd0y5cdnse] {
        padding: 12px 36px 12px 16px;
        font-size: 16px;
        border-radius: 12px;
    }
    
    .item-icon[b-rd0y5cdnse] {
        width: 20px;
        height: 20px;
        margin-right: 16px;
    }
    
    .submenu-arrow[b-rd0y5cdnse] {
        right: 16px;
        width: 20px;
        height: 20px;
    }
}

/* Print Styles */
@media print {
    .grid-context-menu[b-rd0y5cdnse],
    .context-menu-backdrop[b-rd0y5cdnse],
    .submenu-panel[b-rd0y5cdnse] {
        display: none !important;
    }
}
/* /Components/Common/Grids/GridControlTabs.razor.rz.scp.css */
/* Grid Control Tabs Styling */
.grid-control-tabs-container[b-86ne2it935] {
    margin: 1.5rem 0 0 0; /* Add spacing above grid controls */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.grid-control-tabs-nav[b-86ne2it935] {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0;
    margin: 0;
    position: relative;
}

.grid-control-tab[b-86ne2it935] {
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    position: relative;
}

.grid-control-tab:hover[b-86ne2it935] {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border-bottom-color: rgba(13, 110, 253, 0.3);
}

.grid-control-tab.active[b-86ne2it935] {
    background: #ffffff;
    color: #0d6efd;
    border-bottom-color: #0d6efd;
    box-shadow: 0 -2px 0 #0d6efd;
}

.grid-control-tab-close[b-86ne2it935] {
    background: transparent;
    border: none;
    padding: 0.75rem;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
    border-radius: 0;
}

.grid-control-tab-close:hover[b-86ne2it935] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.grid-control-tabs-content[b-86ne2it935] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    background: #ffffff;
    border-radius: 0 0 0.375rem 0.375rem;
}

.grid-control-tabs-content.show[b-86ne2it935] {
    max-height: 600px; /* Adjust based on content needs */
}

.grid-control-tab-panel[b-86ne2it935] {
    padding: 0;
}

.tab-panel-header[b-86ne2it935] {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: 1rem 1rem 0.5rem 1rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.tab-panel-content[b-86ne2it935] {
    padding: 1rem;
}

/* Badge Styling */
.grid-control-tab .badge[b-86ne2it935] {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
}

/* Animation for smooth slide */
@keyframes slideDown-b-86ne2it935 {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 600px;
        opacity: 1;
    }
}

@keyframes slideUp-b-86ne2it935 {
    from {
        max-height: 600px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

.grid-control-tabs-content.show[b-86ne2it935] {
    animation: slideDown-b-86ne2it935 0.3s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .grid-control-tabs-nav[b-86ne2it935] {
        flex-wrap: wrap;
    }
    
    .grid-control-tab[b-86ne2it935] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
    
    .tab-panel-header[b-86ne2it935] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
}
/* /Components/Common/Grids/GridGroupingControls.razor.rz.scp.css */
/* ===============================================
   GridGroupingControls.razor.css
   World-Class Sliding Panel Interface for Grouping
   =============================================== */

/* Flush Grouping Controls - Match Filters Layout */
.grouping-controls-container[b-z9bi7l82xp] {
    --grouping-primary: #3b82f6;
    --grouping-primary-hover: #2563eb;
    --grouping-primary-light: #eff6ff;
    --grouping-surface: #ffffff;
    --grouping-surface-hover: #f8fafc;
    --grouping-border: #e2e8f0;
    --grouping-border-hover: #cbd5e1;
    --grouping-text: #1e293b;
    --grouping-text-muted: #64748b;
    --grouping-text-light: #94a3b8;
    --grouping-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --grouping-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --grouping-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --grouping-radius: 0.75rem;
    --grouping-radius-sm: 0.5rem;
    --grouping-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --grouping-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --grouping-panel-width: 280px;
    
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Hide overflow to prevent panel from showing outside bounds */
    overflow: hidden;
    height: 150px; /* Fixed height for consistent spacing */
    /* Add padding around controls */
    padding: 0.75rem;
    background: transparent;
}

/* Force light theme to match grid - no automatic dark mode */

/* Action buttons styling - match filters layout */
.grouping-actions[b-z9bi7l82xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grouping-add-btn[b-z9bi7l82xp] {
    background: var(--grouping-primary);
    border: none;
    color: white;
    font-weight: 500;
    border-radius: var(--grouping-radius-sm);
    transition: var(--grouping-transition-fast);
    position: relative;
    overflow: hidden;
}

.grouping-add-btn[b-z9bi7l82xp]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.grouping-add-btn:hover[b-z9bi7l82xp] {
    background: var(--grouping-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.grouping-add-btn:hover[b-z9bi7l82xp]::before {
    left: 100%;
}

.grouping-add-btn:active[b-z9bi7l82xp] {
    transform: translateY(0);
}

/* Current Active Groupings - flush like filters */
.current-groupings[b-z9bi7l82xp] {
    margin: 0;
    padding: 0;
}

.current-groupings-label[b-z9bi7l82xp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.current-groupings-container[b-z9bi7l82xp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0;
}

.current-grouping-tag[b-z9bi7l82xp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #e2e8f0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.current-grouping-tag:hover[b-z9bi7l82xp] {
    background: #dbeafe;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

.current-grouping-tag.locked[b-z9bi7l82xp] {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
}

.current-grouping-tag.locked:hover[b-z9bi7l82xp] {
    background: #e2e8f0;
    transform: none;
    box-shadow: none;
}

.grouping-tag-text[b-z9bi7l82xp] {
    font-weight: 500;
}

.grouping-tag-remove[b-z9bi7l82xp] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    color: #64748b;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 0;
    margin-left: 0.25rem;
    z-index: 10;
    position: relative;
}

.grouping-tag-remove:hover[b-z9bi7l82xp] {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
    transform: scale(1.15);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.grouping-tag-remove:active[b-z9bi7l82xp] {
    transform: scale(1.05);
}

.grouping-tag-lock[b-z9bi7l82xp] {
    color: #64748b;
    font-size: 0.625rem;
    margin-left: 0.125rem;
}

/* Empty State - flush like filters */
.grouping-empty-state[b-z9bi7l82xp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    color: #64748b;
}

.empty-state-icon[b-z9bi7l82xp] {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    opacity: 0.6;
    display: inline;
}

.empty-state-text[b-z9bi7l82xp] {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    color: #64748b;
    display: inline;
}

.empty-state-subtext[b-z9bi7l82xp] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0.25rem 0 0 0;
}

/* Hierarchy Styles - flush layout */
.grouping-hierarchy[b-z9bi7l82xp] {
    animation: fadeInUp-b-z9bi7l82xp 0.5s ease-out;
    margin: 0;
    padding: 0;
}

@keyframes fadeInUp-b-z9bi7l82xp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hierarchy-label[b-z9bi7l82xp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hierarchy-items[b-z9bi7l82xp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hierarchy-item[b-z9bi7l82xp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideInLeft-b-z9bi7l82xp 0.3s ease-out forwards;
    opacity: 0;
}

.hierarchy-item:nth-child(1)[b-z9bi7l82xp] { animation-delay: 0.1s; }
.hierarchy-item:nth-child(2)[b-z9bi7l82xp] { animation-delay: 0.2s; }
.hierarchy-item:nth-child(3)[b-z9bi7l82xp] { animation-delay: 0.3s; }
.hierarchy-item:nth-child(4)[b-z9bi7l82xp] { animation-delay: 0.4s; }
.hierarchy-item:nth-child(5)[b-z9bi7l82xp] { animation-delay: 0.5s; }

@keyframes slideInLeft-b-z9bi7l82xp {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hierarchy-badge[b-z9bi7l82xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--grouping-primary-light);
    color: var(--grouping-primary);
    border: 1px solid var(--grouping-border);
    padding: 0.5rem 0.75rem;
    border-radius: var(--grouping-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--grouping-shadow);
    transition: var(--grouping-transition-fast);
    position: relative;
    overflow: hidden;
}

.hierarchy-badge:hover[b-z9bi7l82xp] {
    box-shadow: var(--grouping-shadow-lg);
    transform: translateY(-1px);
}

.hierarchy-badge.locked[b-z9bi7l82xp] {
    background: var(--grouping-text-muted);
}

.hierarchy-level[b-z9bi7l82xp] {
    background: var(--grouping-primary);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.5rem;
    text-align: center;
}

.hierarchy-name[b-z9bi7l82xp] {
    font-weight: 500;
}

.hierarchy-remove[b-z9bi7l82xp] {
    background: var(--grouping-surface-hover);
    border: 1px solid var(--grouping-border);
    color: var(--grouping-text-muted);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: var(--grouping-transition-fast);
    cursor: pointer;
}

.hierarchy-remove:hover[b-z9bi7l82xp] {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
    transform: scale(1.1);
}

.hierarchy-lock[b-z9bi7l82xp] {
    color: var(--grouping-text-muted);
    font-size: 0.75rem;
}

.hierarchy-arrow[b-z9bi7l82xp] {
    color: var(--grouping-text-light);
    font-size: 0.875rem;
    transition: var(--grouping-transition-fast);
}

/* Panel Overlay - positioned relative to container */
.grouping-panel-overlay[b-z9bi7l82xp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--grouping-radius-sm);
}

.grouping-panel-overlay.active[b-z9bi7l82xp] {
    opacity: 1;
    visibility: visible;
}

/* Sliding Panel - modern tag cloud design */
.grouping-panel[b-z9bi7l82xp] {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px; /* Fixed width as specified */
    height: 150px; /* Match container height */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: none;
}

.grouping-panel.open[b-z9bi7l82xp] {
    transform: translateX(0);
}

/* Modern Tag Cloud Header */
.tag-cloud-header[b-z9bi7l82xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tag-cloud-title[b-z9bi7l82xp] {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.tag-cloud-count[b-z9bi7l82xp] {
    background: #f0f0f0;
    color: #666;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 8px;
}

.panel-close[b-z9bi7l82xp] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.panel-close:hover[b-z9bi7l82xp] {
    background: #cbd5e1;
    border-color: #3b82f6;
    color: #3b82f6;
    transform: scale(1.05);
}

/* Panel Content - tag cloud styling */
.panel-content[b-z9bi7l82xp] {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.panel-section[b-z9bi7l82xp] {
    margin-bottom: 0.5rem;
}

.section-title[b-z9bi7l82xp] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.section-subtitle[b-z9bi7l82xp] {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

/* Modern Tag Cloud Container */
.tag-cloud-container[b-z9bi7l82xp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Individual Tag Styling */
.tag-cloud-item[b-z9bi7l82xp] {
    background: #f7f7f7;
    border: 1px solid transparent;
    color: #555;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    user-select: none;
}

/* Hover State for Tags */
.tag-cloud-item:hover[b-z9bi7l82xp] {
    background: #28a745;
    color: white;
    transform: scale(1.05);
}

/* Plus Indicator (appears on hover only) */
.tag-cloud-item[b-z9bi7l82xp]::after {
    content: '+';
    position: absolute;
    right: -6px;
    top: -6px;
    width: 16px;
    height: 16px;
    background: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tag-cloud-item:hover[b-z9bi7l82xp]::after {
    opacity: 1;
}

/* Panel Empty State */
.panel-empty-state[b-z9bi7l82xp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--grouping-text-muted);
}

.empty-icon[b-z9bi7l82xp] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-text[b-z9bi7l82xp] {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--grouping-text);
}

.empty-subtext[b-z9bi7l82xp] {
    font-size: 0.875rem;
    color: var(--grouping-text-muted);
    line-height: 1.4;
}

/* Panel Footer */
.panel-footer[b-z9bi7l82xp] {
    padding: 1rem 1.25rem;
    background: var(--grouping-surface-hover);
    border-top: 1px solid var(--grouping-border);
}

.locked-notice[b-z9bi7l82xp] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--grouping-text-muted);
    gap: 0.25rem;
}

/* Body class to prevent scroll when panel is open */
:global(body.grouping-panel-open)[b-z9bi7l82xp] {
    overflow: hidden;
}

/* Responsive Design */
@media (max-width: 768px) {
    .grouping-panel[b-z9bi7l82xp] {
        width: 100%;
        max-width: 100%;
        right: 0;
        left: 0;
    }
    
    .grouping-controls-container[b-z9bi7l82xp] {
        --grouping-panel-width: 100%;
    }
    
    .panel-header[b-z9bi7l82xp] {
        padding: 1rem;
    }
    
    .panel-content[b-z9bi7l82xp] {
        padding: 1rem;
    }
    
    .option-content[b-z9bi7l82xp] {
        padding: 0.75rem;
    }
    
    .grouping-header[b-z9bi7l82xp] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .grouping-actions[b-z9bi7l82xp] {
        justify-content: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .grouping-controls-container[b-z9bi7l82xp] {
        --grouping-border: #000000;
        --grouping-text: #000000;
        --grouping-surface: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .grouping-controls-container *[b-z9bi7l82xp] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .grouping-panel[b-z9bi7l82xp],
    .grouping-panel-overlay[b-z9bi7l82xp] {
        display: none !important;
    }
    
    .grouping-add-btn[b-z9bi7l82xp] {
        display: none !important;
    }
}

/* Focus management for accessibility */
.grouping-option:focus[b-z9bi7l82xp],
.grouping-add-btn:focus[b-z9bi7l82xp],
.panel-close:focus[b-z9bi7l82xp],
.hierarchy-remove:focus[b-z9bi7l82xp] {
    outline: 2px solid var(--grouping-primary);
    outline-offset: 2px;
}

/* Loading states */
.grouping-option.loading[b-z9bi7l82xp] {
    pointer-events: none;
    opacity: 0.6;
}

.grouping-option.loading[b-z9bi7l82xp]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid var(--grouping-border);
    border-top-color: var(--grouping-primary);
    border-radius: 50%;
    animation: spin-b-z9bi7l82xp 1s linear infinite;
}

@keyframes spin-b-z9bi7l82xp {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Common/Inputs/CopyFromEntitySelector.razor.rz.scp.css */
/* Ensure button in input-group matches input height */
.btn[b-7xifkrp0i8] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
}

/* Smooth dropdown animations */
[b-7xifkrp0i8] .dropdown-menu {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    pointer-events: none;
}

[b-7xifkrp0i8] .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Smooth fade-in for dropdown items */
[b-7xifkrp0i8] .dropdown-item {
    transition: background-color 0.15s ease-in-out, padding-left 0.1s ease-in-out;
}

[b-7xifkrp0i8] .dropdown-item:hover {
    padding-left: 1.75rem;
}

/* Loading spinner animation */
[b-7xifkrp0i8] .fa-spin {
    animation: fa-spin-b-7xifkrp0i8 1s infinite linear;
}

@keyframes fa-spin-b-7xifkrp0i8 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Smooth header transitions */
[b-7xifkrp0i8] .dropdown-header {
    transition: opacity 0.2s ease-in-out;
}

/* Divider transitions */
[b-7xifkrp0i8] .dropdown-divider {
    transition: opacity 0.15s ease-in-out;
    margin: 0.5rem 0;
}
/* /Components/Common/Modals/ModalDialog.razor.rz.scp.css */
/* Modern Modal Styling - World Class UI/UX - Bootstrap Compatible */

/* Enhanced Modal Backdrop with Blur Effect */
.modal-backdrop.modern-modal-backdrop[b-bbq2014lgh] {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    z-index: 99998 !important; /* Just below modal at 99999 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.modal-backdrop.modern-modal-backdrop.fade[b-bbq2014lgh] {
    opacity: 0;
}

.modal-backdrop.modern-modal-backdrop.show[b-bbq2014lgh] {
    opacity: 1;
}

/* Enhanced Modal Container */
.modal.modern-modal[b-bbq2014lgh] {
    display: flex !important;
    align-items: flex-start; /* Align to top, then use padding to move down slightly */
    justify-content: center; /* Center horizontally on full viewport */
    padding-top: 5vh; /* Move down 5% from top for better positioning */
    padding-bottom: 1rem; /* Bottom padding for scrolling space */
    z-index: 99999 !important; /* Extremely high z-index to appear above all content */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important; /* Prevent container scrolling - only modal body scrolls */
    pointer-events: auto; /* Allow interaction with modal */
}

/* Enhanced Modal Dialog Sizing */
.modal.modern-modal .modal-dialog[b-bbq2014lgh] {
    position: relative;
    width: auto;
    margin: 0 auto; /* No vertical margin, container padding handles spacing */
    pointer-events: auto; /* Allow interaction with modal content */
    animation: modalSlideIn-b-bbq2014lgh 0.3s ease;
    z-index: 1060; /* Ensure dialog content is interactive */
    max-height: calc(100vh - 5vh - 2rem); /* Account for container padding (5vh top + 1rem bottom + 1rem buffer) */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Don't clip - let content handle overflow */
}

/* Sidebar offset utility class - use when modal is on a page with sidebar */
.modal.modern-modal .modal-dialog.with-sidebar-offset[b-bbq2014lgh] {
    left: -140px; /* Shift left to account for sidebar */
}

/* ========================================
   MODAL SIZE TEMPLATES
   ======================================== */

/* Auto Size - Content determines width (default) */
.modal.modern-modal .modal-dialog.modal-auto[b-bbq2014lgh] {
    max-width: none;
    width: auto;
    min-width: 320px; /* Minimum mobile-friendly width */
}

/* Small Modal - 400px - Simple confirmations, alerts */
.modal.modern-modal .modal-dialog.modal-sm[b-bbq2014lgh] {
    max-width: 400px;
}

/* Medium Modal - 600px - Simple forms, basic data entry */
.modal.modern-modal .modal-dialog.modal-md[b-bbq2014lgh] {
    max-width: 600px;
}

/* Large Modal - 800px - Complex forms, detailed views */
.modal.modern-modal .modal-dialog.modal-lg[b-bbq2014lgh] {
    max-width: 800px;
}

/* Extra Large Modal - 1000px - Data grids, multi-column layouts */
.modal.modern-modal .modal-dialog.modal-xl[b-bbq2014lgh] {
    max-width: 1000px;
}

/* Wide Modal - 1400px - Complex forms with previews, dashboards */
.modal.modern-modal .modal-dialog.modal-wide[b-bbq2014lgh] {
    max-width: 1400px;
}

/* Full Width Modal - 95% viewport - Large data tables, comprehensive views */
.modal.modern-modal .modal-dialog.modal-fullwidth[b-bbq2014lgh] {
    max-width: 95vw;
    width: 95vw;
}

/* Enhanced Modal Content */
.modal-content.modern-modal-content[b-bbq2014lgh] {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
                0 8px 25px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    animation: modalScaleIn-b-bbq2014lgh 0.3s ease forwards;
    display: flex;
    flex-direction: column;
    height: auto; /* Auto height to fit content */
    max-height: 100%; /* Constrain to dialog height */
}

/* Enhanced Modal Header */
.modal-header.modern-modal-header[b-bbq2014lgh] {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.modal-header-content[b-bbq2014lgh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-icon[b-bbq2014lgh] {
    width: 40px;
    height: 40px;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.modal-title.modern-modal-title[b-bbq2014lgh] {
    margin: 0;
    font-weight: 600;
    color: #1e293b;
    font-size: 1.25rem;
    line-height: 1.4;
}

.btn-close.modern-btn-close[b-bbq2014lgh] {
    background: none;
    border: none;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close.modern-btn-close:hover[b-bbq2014lgh] {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
    transform: scale(1.1);
}

.btn-close.modern-btn-close:focus[b-bbq2014lgh] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Enhanced Modal Body */
.modal-body.modern-modal-body[b-bbq2014lgh] {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto; /* Enable scrolling for modal body content */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    min-height: 0; /* Allow flex item to shrink below content size */
    max-height: calc(100vh - 5vh - 2rem - 80px); /* Viewport minus padding minus approx header height */
}

/* Custom Scrollbar for Enhanced Modal Body */
.modal-body.modern-modal-body[b-bbq2014lgh]::-webkit-scrollbar {
    width: 6px;
}

.modal-body.modern-modal-body[b-bbq2014lgh]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.modal-body.modern-modal-body[b-bbq2014lgh]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.modal-body.modern-modal-body[b-bbq2014lgh]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animations */
@keyframes modalSlideIn-b-bbq2014lgh {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalScaleIn-b-bbq2014lgh {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   RESPONSIVE DESIGN FOR ALL SIZES
   ======================================== */

/* Tablet and below - all modals become more mobile-friendly */
@media (max-width: 768px) {
    .modal.modern-modal[b-bbq2014lgh] {
        padding-top: 2vh; /* Smaller top padding on mobile */
        padding-bottom: 0.5rem;
    }

    .modal.modern-modal .modal-dialog[b-bbq2014lgh] {
        margin: 0 auto; /* No vertical margin */
        max-height: calc(100vh - 2vh - 1rem); /* Account for padding */
    }

    /* Remove sidebar offset on mobile - full width */
    .modal.modern-modal .modal-dialog.with-sidebar-offset[b-bbq2014lgh] {
        left: 0;
    }
    
    /* Auto size stays flexible */
    .modal.modern-modal .modal-dialog.modal-auto[b-bbq2014lgh] {
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
    }
    
    /* All other sizes become responsive */
    .modal.modern-modal .modal-dialog.modal-sm[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-md[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-lg[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-xl[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-wide[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-fullwidth[b-bbq2014lgh] {
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
    }
    
    .modal-content.modern-modal-content[b-bbq2014lgh] {
        border-radius: 12px;
        margin: 0.5rem;
    }
    
    .modal-header.modern-modal-header[b-bbq2014lgh] {
        padding: 1rem 1.5rem 0.75rem;
    }
    
    .modal-body.modern-modal-body[b-bbq2014lgh] {
        padding: 1rem 1.5rem 1.5rem;
        /* max-height removed - let flex handle it */
    }
    
    .modal-title.modern-modal-title[b-bbq2014lgh] {
        font-size: 1.125rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .modal.modern-modal[b-bbq2014lgh] {
        padding-top: 1vh; /* Minimal top padding on small screens */
        padding-bottom: 0.25rem;
    }

    .modal.modern-modal .modal-dialog[b-bbq2014lgh] {
        margin: 0 auto; /* No vertical margin */
        max-height: calc(100vh - 1vh - 0.5rem); /* Account for padding */
    }

    /* Remove sidebar offset on small mobile - full width */
    .modal.modern-modal .modal-dialog.with-sidebar-offset[b-bbq2014lgh] {
        left: 0;
    }
    
    /* All modal sizes become near full-width on small screens */
    .modal.modern-modal .modal-dialog.modal-auto[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-sm[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-md[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-lg[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-xl[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-wide[b-bbq2014lgh],
    .modal.modern-modal .modal-dialog.modal-fullwidth[b-bbq2014lgh] {
        max-width: calc(100vw - 0.5rem);
        width: calc(100vw - 0.5rem);
    }
}

@media (max-width: 480px) {
    .modal-header.modern-modal-header[b-bbq2014lgh] {
        padding: 1rem;
    }
    
    .modal-body.modern-modal-body[b-bbq2014lgh] {
        padding: 1rem;
    }
    
    .modal-header-content[b-bbq2014lgh] {
        gap: 0.5rem;
    }
    
    .modal-icon[b-bbq2014lgh] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .modal-status-banner[b-bbq2014lgh] {
        margin: 0.5rem;
        padding: 0.75rem;
    }
    
    .status-content[b-bbq2014lgh] {
        flex-direction: column;
        text-align: center;
    }
    
    .status-text-wrapper[b-bbq2014lgh] {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* ========================================
   WORLD-CLASS STATUS BANNER SYSTEM
   ======================================== */

/* Status Banner Container */
.modal-status-banner[b-bbq2014lgh] {
    position: relative;
    margin: 1rem 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transform: translateY(-10px);
    opacity: 0;
    animation: statusSlideIn-b-bbq2014lgh 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 10; /* Ensure status banner appears above modal content */
}

/* Status Content Layout */
.status-content[b-bbq2014lgh] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    position: relative;
    z-index: 2;
}

.status-icon-wrapper[b-bbq2014lgh] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.status-icon[b-bbq2014lgh] {
    font-size: 14px;
    animation: statusIconPulse-b-bbq2014lgh 0.6s ease-out;
}

.status-text-wrapper[b-bbq2014lgh] {
    flex: 1;
    min-width: 0;
}

.status-message[b-bbq2014lgh] {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.25rem 0;
    color: inherit;
}

.status-detail[b-bbq2014lgh] {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.85;
    margin: 0;
    color: inherit;
}

/* Dismiss Button */
.status-dismiss-btn[b-bbq2014lgh] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    color: currentColor;
    opacity: 0.7;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.status-dismiss-btn:hover[b-bbq2014lgh] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

/* Success Progress Bar */
.success-progress-bar[b-bbq2014lgh] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}

.progress-fill[b-bbq2014lgh] {
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.6) 100%);
    width: 0%;
    animation: progressFill-b-bbq2014lgh 5s linear forwards;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* ========================================
   STATUS TYPE VARIANTS
   ======================================== */

/* Success Status */
.status-success[b-bbq2014lgh] {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.95) 0%, 
        rgba(21, 128, 61, 0.95) 100%);
    border-color: rgba(34, 197, 94, 0.3);
    color: white;
}

.status-success[b-bbq2014lgh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* Error Status */
.status-error[b-bbq2014lgh] {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.95) 0%, 
        rgba(185, 28, 28, 0.95) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: white;
}

.status-error[b-bbq2014lgh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* Warning Status */
.status-warning[b-bbq2014lgh] {
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.95) 0%, 
        rgba(217, 119, 6, 0.95) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: white;
}

.status-warning[b-bbq2014lgh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* Info Status */
.status-info[b-bbq2014lgh] {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95) 0%, 
        rgba(29, 78, 216, 0.95) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: white;
}

.status-info[b-bbq2014lgh]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
}

/* ========================================
   WORLD-CLASS ANIMATIONS
   ======================================== */

@keyframes statusSlideIn-b-bbq2014lgh {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-5px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes statusIconPulse-b-bbq2014lgh {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes progressFill-b-bbq2014lgh {
    from {
        width: 0%;
        opacity: 1;
    }
    80% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0.7;
    }
}

/* Subtle floating particles for success */
.status-success[b-bbq2014lgh]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: successGlow-b-bbq2014lgh 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes successGlow-b-bbq2014lgh {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Enhanced Header Icon Animation */
.modal-header .modal-icon i[b-bbq2014lgh] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Accessibility and High Contrast Support */
@media (prefers-reduced-motion: reduce) {
    .modal-status-banner[b-bbq2014lgh],
    .status-icon[b-bbq2014lgh],
    .progress-fill[b-bbq2014lgh],
    .status-dismiss-btn[b-bbq2014lgh] {
        animation: none;
        transition: none;
    }
    
    .modal-status-banner[b-bbq2014lgh] {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-contrast: high) {
    .modal-status-banner[b-bbq2014lgh] {
        border-width: 2px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    .status-dismiss-btn[b-bbq2014lgh] {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid currentColor;
    }
}
/* /Components/Common/Panels/CSidePanel.razor.rz.scp.css */
/* ============================================
   CSidePanel Component Styles
   High-Quality UI/UX with Smooth Animations
   ============================================ */

/* Wrapper - Full viewport overlay */
.c-side-panel-wrapper[b-3sgcn9eiec] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Wrapper when panel is open */
.c-side-panel-wrapper.open[b-3sgcn9eiec] {
    pointer-events: auto;
    opacity: 1;
}

/* Backdrop Styles */
.c-side-panel-wrapper[b-3sgcn9eiec]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.c-side-panel-wrapper.open[b-3sgcn9eiec]::before {
    opacity: 1;
}

/* Backdrop Style Variations */
.c-side-panel-wrapper.backdrop-light[b-3sgcn9eiec]::before {
    background: rgba(255, 255, 255, 0.8);
}

.c-side-panel-wrapper.backdrop-blur[b-3sgcn9eiec]::before {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.c-side-panel-wrapper.backdrop-none[b-3sgcn9eiec]::before {
    display: none;
}

/* ============================================
   Panel Container - Base Styles
   ============================================ */
.c-side-panel[b-3sgcn9eiec] {
    position: absolute;
    background: #ffffff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease-in-out;
    will-change: transform;
}

/* ============================================
   Panel Positioning - Right Side (Default)
   ============================================ */
.c-side-panel.position-right[b-3sgcn9eiec] {
    top: 0;
    right: 0;
    height: 100%;
    transform: translateX(100%);
}

.c-side-panel.position-right.open[b-3sgcn9eiec] {
    transform: translateX(0);
}

/* ============================================
   Panel Positioning - Left Side
   ============================================ */
.c-side-panel.position-left[b-3sgcn9eiec] {
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
}

.c-side-panel.position-left.open[b-3sgcn9eiec] {
    transform: translateX(0);
}

/* ============================================
   Panel Positioning - Bottom
   ============================================ */
.c-side-panel.position-bottom[b-3sgcn9eiec] {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform: translateY(100%);
}

.c-side-panel.position-bottom.open[b-3sgcn9eiec] {
    transform: translateY(0);
}

/* ============================================
   Panel Size Variations
   ============================================ */
.c-side-panel.size-small:not(.position-bottom)[b-3sgcn9eiec] {
    width: 400px;
}

.c-side-panel.size-medium:not(.position-bottom)[b-3sgcn9eiec] {
    width: 600px;
}

.c-side-panel.size-large:not(.position-bottom)[b-3sgcn9eiec] {
    width: 900px;
}

.c-side-panel.size-extralarge:not(.position-bottom)[b-3sgcn9eiec] {
    width: 1200px;
}

.c-side-panel.size-fullwidth:not(.position-bottom)[b-3sgcn9eiec] {
    width: 100%;
}

.c-side-panel.size-custom:not(.position-bottom)[b-3sgcn9eiec] {
    width: var(--panel-custom-width, 600px);
}

/* Bottom panel height variations */
.c-side-panel.position-bottom.size-small[b-3sgcn9eiec] {
    height: 30%;
}

.c-side-panel.position-bottom.size-medium[b-3sgcn9eiec] {
    height: 50%;
}

.c-side-panel.position-bottom.size-large[b-3sgcn9eiec] {
    height: 70%;
}

.c-side-panel.position-bottom.size-extralarge[b-3sgcn9eiec],
.c-side-panel.position-bottom.size-fullwidth[b-3sgcn9eiec] {
    height: 90%;
}

/* ============================================
   Panel Header
   ============================================ */
.c-side-panel-header[b-3sgcn9eiec] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
}

.c-side-panel-header-content[b-3sgcn9eiec] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.5rem;
}

.c-side-panel-title[b-3sgcn9eiec] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

.c-side-panel-header-actions[b-3sgcn9eiec] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.c-side-panel-close-btn[b-3sgcn9eiec] {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease, background-color 0.2s ease;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-side-panel-close-btn:hover[b-3sgcn9eiec] {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.05);
}

.c-side-panel-close-btn:focus[b-3sgcn9eiec] {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ============================================
   Panel Body (Scrollable Content)
   ============================================ */
.c-side-panel-body[b-3sgcn9eiec] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}

/* Smooth scrolling */
.c-side-panel-body[b-3sgcn9eiec] {
    scroll-behavior: smooth;
}

/* Custom scrollbar styling */
.c-side-panel-body[b-3sgcn9eiec]::-webkit-scrollbar {
    width: 8px;
}

.c-side-panel-body[b-3sgcn9eiec]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.c-side-panel-body[b-3sgcn9eiec]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.c-side-panel-body[b-3sgcn9eiec]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Loading state for body */
.c-side-panel-body.loading[b-3sgcn9eiec] {
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================
   Panel Footer
   ============================================ */
.c-side-panel-footer[b-3sgcn9eiec] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ============================================
   Loading Overlay
   ============================================ */
.c-side-panel-loading-overlay[b-3sgcn9eiec] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeIn-b-3sgcn9eiec 0.2s ease-in-out;
}

@keyframes fadeIn-b-3sgcn9eiec {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   Theme Variations
   ============================================ */
.c-side-panel[data-theme="dark"][b-3sgcn9eiec] {
    background: #212529;
    color: #f8f9fa;
}

.c-side-panel[data-theme="dark"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="dark"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #343a40;
    border-color: #495057;
}

.c-side-panel[data-theme="dark"] .c-side-panel-title[b-3sgcn9eiec] {
    color: #f8f9fa;
}

.c-side-panel[data-theme="dark"] .c-side-panel-close-btn[b-3sgcn9eiec] {
    color: #adb5bd;
}

.c-side-panel[data-theme="dark"] .c-side-panel-close-btn:hover[b-3sgcn9eiec] {
    color: #f8f9fa;
    background-color: rgba(255, 255, 255, 0.1);
}

.c-side-panel[data-theme="primary"][b-3sgcn9eiec] {
    background: #0d6efd;
    color: #ffffff;
}

.c-side-panel[data-theme="primary"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="primary"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #0b5ed7;
    border-color: #0a58ca;
}

.c-side-panel[data-theme="primary"] .c-side-panel-title[b-3sgcn9eiec] {
    color: #ffffff;
}

.c-side-panel[data-theme="secondary"][b-3sgcn9eiec] {
    background: #6c757d;
    color: #ffffff;
}

.c-side-panel[data-theme="secondary"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="secondary"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #5c636a;
    border-color: #565e64;
}

.c-side-panel[data-theme="success"][b-3sgcn9eiec] {
    background: #198754;
    color: #ffffff;
}

.c-side-panel[data-theme="success"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="success"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #157347;
    border-color: #146c43;
}

.c-side-panel[data-theme="warning"][b-3sgcn9eiec] {
    background: #ffc107;
    color: #000000;
}

.c-side-panel[data-theme="warning"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="warning"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #ffcd39;
    border-color: #ffca2c;
}

.c-side-panel[data-theme="danger"][b-3sgcn9eiec] {
    background: #dc3545;
    color: #ffffff;
}

.c-side-panel[data-theme="danger"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="danger"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #bb2d3b;
    border-color: #b02a37;
}

.c-side-panel[data-theme="info"][b-3sgcn9eiec] {
    background: #0dcaf0;
    color: #000000;
}

.c-side-panel[data-theme="info"] .c-side-panel-header[b-3sgcn9eiec],
.c-side-panel[data-theme="info"] .c-side-panel-footer[b-3sgcn9eiec] {
    background: #31d2f2;
    border-color: #25cff2;
}

/* ============================================
   Responsive Design - Mobile Optimization
   ============================================ */
@media (max-width: 768px) {
    /* Full width on mobile for side panels */
    .c-side-panel.position-right[b-3sgcn9eiec],
    .c-side-panel.position-left[b-3sgcn9eiec] {
        width: 100% !important;
    }

    /* Adjust padding for smaller screens */
    .c-side-panel-header[b-3sgcn9eiec],
    .c-side-panel-body[b-3sgcn9eiec],
    .c-side-panel-footer[b-3sgcn9eiec] {
        padding: 1rem;
    }

    /* Smaller title on mobile */
    .c-side-panel-title[b-3sgcn9eiec] {
        font-size: 1.1rem;
    }

    /* Bottom panels take more height on mobile */
    .c-side-panel.position-bottom[b-3sgcn9eiec] {
        height: 80%;
    }
}

@media (max-width: 576px) {
    /* Even more compact on very small screens */
    .c-side-panel-header[b-3sgcn9eiec],
    .c-side-panel-body[b-3sgcn9eiec],
    .c-side-panel-footer[b-3sgcn9eiec] {
        padding: 0.75rem;
    }

    .c-side-panel-title[b-3sgcn9eiec] {
        font-size: 1rem;
    }
}

/* ============================================
   Accessibility Enhancements
   ============================================ */
/* Focus indicators for keyboard navigation */
.c-side-panel-wrapper:focus-within .c-side-panel[b-3sgcn9eiec] {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .c-side-panel-wrapper[b-3sgcn9eiec],
    .c-side-panel[b-3sgcn9eiec],
    .c-side-panel-wrapper[b-3sgcn9eiec]::before {
        transition: none;
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .c-side-panel[b-3sgcn9eiec] {
        border: 2px solid currentColor;
    }

    .c-side-panel-header[b-3sgcn9eiec],
    .c-side-panel-footer[b-3sgcn9eiec] {
        border-width: 2px;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .c-side-panel-wrapper[b-3sgcn9eiec] {
        display: none;
    }
}
/* /Components/Common/SystemResourceMetrics.razor.rz.scp.css */
.loading-bar-badge[b-dwndmsb1ff] {
    position: relative;
    min-width: 140px;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c0c0c0;
}

.loading-bar-fill[b-dwndmsb1ff] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--fill-percent, 0%);
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.3) 0%, rgba(255, 0, 0, 0.6) 50%, rgba(255, 0, 0, 0.8) 100%);
    border-radius: 12px;
    transition: width 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    animation: pulse-b-dwndmsb1ff 2s ease-in-out infinite;
}

.loading-bar-text[b-dwndmsb1ff] {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0 8px;
    color: #000000;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    animation: fadeIn-b-dwndmsb1ff 0.5s ease-in;
}

/* Smooth pulse animation for the fill */
@keyframes pulse-b-dwndmsb1ff {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Fade in animation for text */
@keyframes fadeIn-b-dwndmsb1ff {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Shimmer effect that moves across the fill */
.loading-bar-fill[b-dwndmsb1ff]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer-b-dwndmsb1ff 3s infinite;
}

@keyframes shimmer-b-dwndmsb1ff {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Smooth entry animation when component loads */
.loading-bar-badge[b-dwndmsb1ff] {
    animation: slideIn-b-dwndmsb1ff 0.5s ease-out;
}

@keyframes slideIn-b-dwndmsb1ff {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Color intensity variations based on fill percentage */
.loading-bar-fill[style*="--fill-percent: 0%"][b-dwndmsb1ff],
.loading-bar-fill[style*="--fill-percent: 1%"][b-dwndmsb1ff],
.loading-bar-fill[style*="--fill-percent: 2%"][b-dwndmsb1ff],
.loading-bar-fill[style*="--fill-percent: 3%"][b-dwndmsb1ff],
.loading-bar-fill[style*="--fill-percent: 4%"][b-dwndmsb1ff],
.loading-bar-fill[style*="--fill-percent: 5%"][b-dwndmsb1ff] {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.3) 0%, rgba(76, 175, 80, 0.6) 50%, rgba(76, 175, 80, 0.8) 100%);
}

/* Hover effect for interactivity */
.loading-bar-badge:hover .loading-bar-fill[b-dwndmsb1ff] {
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

.loading-bar-badge:hover[b-dwndmsb1ff] {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}
/* /Components/Common/Toast/ToastContainer.razor.rz.scp.css */
/* Toast Container Styling */
.toast-container[b-bwr84xo4x4] {
    z-index: 11000 !important;
    max-width: 350px;
}

.toast[b-bwr84xo4x4] {
    min-width: 300px;
    margin-bottom: 0.5rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.toast.show[b-bwr84xo4x4] {
    display: block;
    animation: toastSlideIn-b-bwr84xo4x4 0.3s ease-out forwards;
}

.toast-header[b-bwr84xo4x4] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.toast-body[b-bwr84xo4x4] {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

/* Type-specific styling */
.toast.text-bg-success .toast-header[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%);
    color: white;
}

.toast.text-bg-success .toast-body[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.98) 0%, rgba(21, 128, 61, 0.98) 100%);
    color: white;
}

.toast.text-bg-danger .toast-header[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(185, 28, 28, 0.95) 100%);
    color: white;
}

.toast.text-bg-danger .toast-body[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.98) 0%, rgba(185, 28, 28, 0.98) 100%);
    color: white;
}

.toast.text-bg-warning .toast-header[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%);
    color: white;
}

.toast.text-bg-warning .toast-body[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.98) 0%, rgba(217, 119, 6, 0.98) 100%);
    color: white;
}

.toast.text-bg-info .toast-header[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(29, 78, 216, 0.95) 100%);
    color: white;
}

.toast.text-bg-info .toast-body[b-bwr84xo4x4] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.98) 0%, rgba(29, 78, 216, 0.98) 100%);
    color: white;
}

/* Button styling for colored backgrounds */
.toast.text-bg-success .btn-close[b-bwr84xo4x4],
.toast.text-bg-danger .btn-close[b-bwr84xo4x4],
.toast.text-bg-warning .btn-close[b-bwr84xo4x4],
.toast.text-bg-info .btn-close[b-bwr84xo4x4] {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.toast.text-bg-success .btn-close:hover[b-bwr84xo4x4],
.toast.text-bg-danger .btn-close:hover[b-bwr84xo4x4],
.toast.text-bg-warning .btn-close:hover[b-bwr84xo4x4],
.toast.text-bg-info .btn-close:hover[b-bwr84xo4x4] {
    opacity: 1;
}

/* Animation */
@keyframes toastSlideIn-b-bwr84xo4x4 {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .toast-container[b-bwr84xo4x4] {
        left: 1rem !important;
        right: 1rem !important;
        max-width: none;
    }
    
    .toast[b-bwr84xo4x4] {
        min-width: auto;
    }
}
/* /Components/Core/Core.razor.rz.scp.css */
/* ===== CORE COMPONENT - WORLD CLASS STYLING ===== */
/* Note: Design tokens and animations should be included globally in the main app CSS */

/* ===== CORE CONTAINER ===== */
.core-component[b-7p1s91fg5q] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-white);
    color: var(--text-color);
    font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
    line-height: var(--leading-normal);
    position: relative;
    overflow-x: hidden;
    border: 1px solid #e2e8f0; /* Light grey border matching CCard */
    border-radius: var(--radius-lg);
}

/* Layout Mode Variants */
.core-component.core--layout-fluid[b-7p1s91fg5q] {
  width: 100%;
}

.core-component.core--layout-constrained[b-7p1s91fg5q] {
    width: 100%;
    max-width: 1280px;
}

.core-component.core--layout-centered[b-7p1s91fg5q] {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.core-component.core--layout-fullwidth[b-7p1s91fg5q] {
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ===== HEADER SECTION ===== */
.core-header[b-7p1s91fg5q] {
    background: linear-gradient(135deg, var(--surface-color) 0%, var(--surface-color-secondary) 100%);
    /* Other styles remain */
    border-bottom: 2px solid #e2e8f0; /* Use a light but visible grey */
    box-shadow: var(--shadow-1);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    backdrop-filter: blur(var(--glass-blur-subtle));
    -webkit-backdrop-filter: blur(var(--glass-blur-subtle));
}

.core-header-content[b-7p1s91fg5q] {
  padding: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 80px;
  width: 100%;
}

/* Header Animations */
.core-component.core--transitions-enabled .core-header[b-7p1s91fg5q] {
  transition: all var(--duration-normal) var(--ease-out);
}

.core-component.core--loading .core-header[b-7p1s91fg5q] {
  opacity: 0.9;
}

/* ===== BREADCRUMB SECTION ===== */
.core-breadcrumb-container[b-7p1s91fg5q] {
  background: var(--surface-color-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

/* Breadcrumb Style Variants */
.core-breadcrumb-container[data-breadcrumb-style="standard"] .breadcrumb-separator[b-7p1s91fg5q]::after {
  content: '/';
  margin: 0 var(--space-xs);
  color: var(--text-color-muted);
}

.core-breadcrumb-container[data-breadcrumb-style="modern"] .breadcrumb-separator[b-7p1s91fg5q]::after {
  content: '❯';
  margin: 0 var(--space-xs);
  color: var(--primary-500);
  font-size: var(--text-xs);
}

.core-breadcrumb-container[data-breadcrumb-style="minimal"] .breadcrumb-separator[b-7p1s91fg5q]::after {
  content: '•';
  margin: 0 var(--space-xs);
  color: var(--text-color-muted);
}

.core-breadcrumb-container[data-breadcrumb-style="pill"] .breadcrumb[b-7p1s91fg5q] {
  display: flex;
  gap: var(--space-xs);
}

.core-breadcrumb-container[data-breadcrumb-style="pill"] .breadcrumb-item[b-7p1s91fg5q] {
  background: var(--primary-100);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* ===== TOOLBAR SECTION ===== */
.core-toolbar[b-7p1s91fg5q] {
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-md);
  box-shadow: var(--shadow-1);
}

.core-toolbar-content[b-7p1s91fg5q] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Toolbar Responsive Design */
@media (max-width: 768px) {
  .core-toolbar-content[b-7p1s91fg5q] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
}

/* ===== MAIN CONTENT AREA ===== */
.core-body[b-7p1s91fg5q] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  position: relative;
  isolation: isolate;
}

.core-body-content[b-7p1s91fg5q] {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all var(--duration-normal) var(--ease-out);
}

/* Content Spacing */
.core-body-content > * + *[b-7p1s91fg5q] {
  margin-top: var(--space-md);
}

/* ===== FOOTER SECTION ===== */
.core-footer[b-7p1s91fg5q] {
  background: var(--surface-color-secondary);
  border-top: 1px solid var(--border-color);
  padding: var(--space-md);
  margin-top: auto;
  box-shadow: var(--shadow-1);
}

.core-footer-content[b-7p1s91fg5q] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-color-secondary);
}

@media (max-width: 768px) {
  .core-footer-content[b-7p1s91fg5q] {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
}

/* ===== LOADING OVERLAY ===== */
.core-loading-overlay[b-7p1s91fg5q] {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  /* Default hidden state */
  visibility: hidden;
  opacity: 0;
  will-change: opacity, visibility;
}

/* Visible state - data attribute only changes when value actually changes */
.core-loading-overlay[data-loading-state="visible"][b-7p1s91fg5q] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0s, visibility 0s 0s;
}

/* Hidden state - data attribute only changes when value actually changes */
.core-loading-overlay[data-loading-state="hidden"][b-7p1s91fg5q] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0s, visibility 0s 0.3s;
}

.core-loading-content[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  padding: var(--space-2xl);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 400px;
  width: 90vw;
}

/* ===== DEFAULT LOADING STYLES ===== */
.core-default-loading[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* Spinner Loading */
.loading-spinner[b-7p1s91fg5q] {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e7ff;
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  animation: spin-only-b-7p1s91fg5q 0.8s linear infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes spin-only-b-7p1s91fg5q {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulse Loading */
.loading-pulse[b-7p1s91fg5q] {
  width: 48px;
  height: 48px;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  animation: pulse var(--duration-slower) var(--ease-in-out) infinite;
}

/* Dots Loading */
.loading-dots[b-7p1s91fg5q] {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.loading-dots span[b-7p1s91fg5q] {
  width: 12px;
  height: 12px;
  background: var(--primary-500);
  border-radius: var(--radius-full);
  animation: bounce-dots 1.4s var(--ease-in-out) infinite both;
}

.loading-dots span:nth-child(1)[b-7p1s91fg5q] { animation-delay: -0.32s; }
.loading-dots span:nth-child(2)[b-7p1s91fg5q] { animation-delay: -0.16s; }
.loading-dots span:nth-child(3)[b-7p1s91fg5q] { animation-delay: 0s; }

/* Skeleton Loading */
.loading-skeleton[b-7p1s91fg5q] {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton-header[b-7p1s91fg5q] {
  height: 32px;
  background: var(--neutral-200);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.skeleton-content[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton-line[b-7p1s91fg5q] {
  height: 16px;
  background: var(--neutral-200);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton-line--short[b-7p1s91fg5q] {
  width: 75%;
}

.skeleton-header[b-7p1s91fg5q],
.skeleton-line[b-7p1s91fg5q] {
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

/* Progress Loading */
.loading-progress[b-7p1s91fg5q] {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.progress-bar[b-7p1s91fg5q] {
  width: 100%;
  height: 8px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.progress-indicator[b-7p1s91fg5q] {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400), var(--primary-500));
  border-radius: var(--radius-full);
  animation: progress-indeterminate-b-7p1s91fg5q 2s var(--ease-in-out) infinite;
}

@keyframes progress-indeterminate-b-7p1s91fg5q {
  0% {
    width: 0%;
    transform: translateX(-100%);
  }
  50% {
    width: 100%;
    transform: translateX(0%);
  }
  100% {
    width: 100%;
    transform: translateX(100%);
  }
}

/* Shimmer Loading */
.loading-shimmer[b-7p1s91fg5q] {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shimmer-content[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.shimmer-header[b-7p1s91fg5q] {
  height: 24px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  border-radius: var(--radius-md);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.shimmer-body[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.shimmer-line[b-7p1s91fg5q] {
  height: 16px;
  background: linear-gradient(
    90deg,
    var(--neutral-200) 0%,
    var(--neutral-100) 50%,
    var(--neutral-200) 100%
  );
  border-radius: var(--radius-sm);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slower) var(--ease-in-out) infinite;
}

.shimmer-line--short[b-7p1s91fg5q] {
  width: 60%;
}

/* Loading Text */
.loading-text[b-7p1s91fg5q] {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-color-secondary);
  margin-top: var(--space-sm);
}

/* ===== INLINE LOADING ===== */
.core-inline-loading[b-7p1s91fg5q] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  margin-bottom: var(--space-lg);
  background: var(--surface-color-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  animation: fade-in var(--duration-normal) var(--ease-out);
}

.inline-loading-indicator[b-7p1s91fg5q] {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-base);
  color: var(--text-color-secondary);
}

.loading-spinner-small[b-7p1s91fg5q] {
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary-200);
  border-top: 2px solid var(--primary-500);
  border-radius: var(--radius-full);
  animation: spin var(--duration-fast) linear infinite;
}

/* ===== ERROR STATES ===== */
.core-error-container[b-7p1s91fg5q] {
  position: relative;
  z-index: var(--z-modal);
}

/* Error Display Styles */
.core-error-container[data-error-style="inline"][b-7p1s91fg5q] {
  margin: var(--space-lg);
  padding: var(--space-lg);
  background: var(--danger-50);
  border: 1px solid var(--danger-200);
  border-radius: var(--radius-lg);
  animation: slide-in-top var(--duration-normal) var(--ease-out);
}

.core-error-container[data-error-style="modal"][b-7p1s91fg5q] {
  position: fixed;
  inset: 0;
  background: hsla(0, 0%, 0%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(var(--glass-blur-subtle));
  animation: fade-in var(--duration-normal) var(--ease-out);
}

.core-error-container[data-error-style="banner"][b-7p1s91fg5q] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--danger-500);
  color: white;
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-2);
  animation: slide-in-top var(--duration-normal) var(--ease-out);
}

.core-error-container[data-error-style="toast"][b-7p1s91fg5q] {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  max-width: 400px;
  background: white;
  border: 1px solid var(--danger-200);
  border-left: 4px solid var(--danger-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  padding: var(--space-lg);
  animation: slide-in-right var(--duration-normal) var(--ease-out);
  z-index: var(--z-toast);
}

/* Default Error Content */
.core-default-error[b-7p1s91fg5q] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  padding: var(--space-2xl);
}

.error-icon[b-7p1s91fg5q] {
  width: 64px;
  height: 64px;
  color: var(--danger-500);
  opacity: 0.8;
}

.error-title[b-7p1s91fg5q] {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--danger-700);
  margin: 0;
}

.error-message[b-7p1s91fg5q] {
  font-size: var(--text-base);
  color: var(--text-color-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.error-actions[b-7p1s91fg5q] {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* ===== ACCESSIBILITY ===== */
.core-skip-link[b-7p1s91fg5q] {
  position: absolute;
  top: -40px;
  left: var(--space-md);
  background: var(--primary-500);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--font-medium);
  z-index: var(--z-maximum);
  transition: top var(--duration-fast) var(--ease-out);
}

.core-skip-link:focus[b-7p1s91fg5q] {
  top: var(--space-md);
}

.sr-only[b-7p1s91fg5q] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus[b-7p1s91fg5q] {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== STATE CLASSES ===== */
.core-component.core--loading[b-7p1s91fg5q] {
  pointer-events: none;
}

.core-component.core--loading .core-body-content[b-7p1s91fg5q] {
  opacity: 0.7;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.core-component.core--error[b-7p1s91fg5q] {
  background: var(--danger-50);
}

.core-component.core--transitions-enabled *[b-7p1s91fg5q] {
  transition-property: opacity, transform, background-color, border-color, color, box-shadow;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-out);
}

/* ===== ANIMATION SPEED VARIANTS ===== */
.core-component.core--animation-instant *[b-7p1s91fg5q] {
  transition-duration: var(--duration-instant) !important;
  animation-duration: var(--duration-instant) !important;
}

.core-component.core--animation-fast *[b-7p1s91fg5q] {
  transition-duration: var(--duration-fast) !important;
  animation-duration: var(--duration-fast) !important;
}

.core-component.core--animation-slow *[b-7p1s91fg5q] {
  transition-duration: var(--duration-slow) !important;
  animation-duration: var(--duration-slow) !important;
}

.core-component.core--animation-slower *[b-7p1s91fg5q] {
  transition-duration: var(--duration-slower) !important;
  animation-duration: var(--duration-slower) !important;
}

.core-component.core--animation-slowest *[b-7p1s91fg5q] {
  transition-duration: var(--duration-slowest) !important;
  animation-duration: var(--duration-slowest) !important;
}

/* ===== REDUCED MOTION SUPPORT ===== */
.core-component.core--reduced-motion *[b-7p1s91fg5q],
.core-component.core--reduced-motion *[b-7p1s91fg5q]::before,
.core-component.core--reduced-motion *[b-7p1s91fg5q]::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ===== DARK THEME OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
  .core-loading-overlay[b-7p1s91fg5q] {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
  }
  
  .core-loading-content[b-7p1s91fg5q] {
    background: rgba(30, 41, 59, 0.25);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .core-default-error[b-7p1s91fg5q] {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
  }
  
  .loading-skeleton .skeleton-header[b-7p1s91fg5q],
  .loading-skeleton .skeleton-line[b-7p1s91fg5q] {
    background: var(--neutral-700);
  }
  
  .shimmer-header[b-7p1s91fg5q],
  .shimmer-line[b-7p1s91fg5q] {
    background: linear-gradient(
      90deg,
      var(--neutral-700) 0%,
      var(--neutral-600) 50%,
      var(--neutral-700) 100%
    );
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  .core-header[b-7p1s91fg5q],
  .core-toolbar[b-7p1s91fg5q],
  .core-footer[b-7p1s91fg5q] {
    border-color: var(--neutral-900);
    box-shadow: none;
  }
  
  .loading-spinner[b-7p1s91fg5q] {
    border-color: #171717;
    border-top-color: #6366f1;
  }
  
  .core-loading-overlay[b-7p1s91fg5q] {
    background: white;
    backdrop-filter: none;
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
  .core-header-content[b-7p1s91fg5q],
  .core-toolbar-content[b-7p1s91fg5q],
  .core-footer-content[b-7p1s91fg5q] {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  
  .core-body[b-7p1s91fg5q] {
    padding: var(--space-sm);
  }
  
  .core-loading-content[b-7p1s91fg5q] {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
  }
  
  .loading-text[b-7p1s91fg5q] {
    font-size: var(--text-base);
  }
}

@media (max-width: 480px) {
  .core-component.core--layout-centered[b-7p1s91fg5q] {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  
  .core-header-content[b-7p1s91fg5q] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    min-height: auto;
    padding: var(--space-md) var(--space-sm);
  }
  
  .core-loading-content[b-7p1s91fg5q] {
    width: 95vw;
    margin: var(--space-sm);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .core-loading-overlay[b-7p1s91fg5q],
  .core-toolbar[b-7p1s91fg5q],
  .core-skip-link[b-7p1s91fg5q],
  .sr-only[b-7p1s91fg5q] {
    display: none !important;
  }
  
  .core-component[b-7p1s91fg5q] {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .core-header[b-7p1s91fg5q],
  .core-footer[b-7p1s91fg5q] {
    box-shadow: none !important;
    border-color: black !important;
  }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5ig4gdbu51] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-5ig4gdbu51] {
    flex: 1;
}

.sidebar[b-5ig4gdbu51] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-5ig4gdbu51] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-5ig4gdbu51]  a, .top-row[b-5ig4gdbu51]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-5ig4gdbu51]  a:hover, .top-row[b-5ig4gdbu51]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-5ig4gdbu51]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-5ig4gdbu51] {
        justify-content: space-between;
    }

    .top-row[b-5ig4gdbu51]  a, .top-row[b-5ig4gdbu51]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-5ig4gdbu51] {
        flex-direction: row;
    }

    .sidebar[b-5ig4gdbu51] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5ig4gdbu51] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-5ig4gdbu51]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-5ig4gdbu51], article[b-5ig4gdbu51] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-5ig4gdbu51] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

    #blazor-error-ui .dismiss[b-5ig4gdbu51] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-5wmg6v6zot] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-5wmg6v6zot] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-5wmg6v6zot] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-5wmg6v6zot] {
    font-size: 1.1rem;
}

.bi[b-5wmg6v6zot] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-5wmg6v6zot] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-5wmg6v6zot] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-5wmg6v6zot] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-5wmg6v6zot] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-5wmg6v6zot] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-5wmg6v6zot] {
        padding-bottom: 1rem;
    }

    .nav-item[b-5wmg6v6zot]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-5wmg6v6zot]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-5wmg6v6zot]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-5wmg6v6zot] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-5wmg6v6zot] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-5wmg6v6zot] {
        display: none;
    }

    .nav-scrollable[b-5wmg6v6zot] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Custom styling for Admin section */
.nav-item a[href="#adminmenu"][b-5wmg6v6zot] {
    color: #d7d7d7;
    display: flex;
    align-items: center;
}

.nav-item a[href="#adminmenu"] i[b-5wmg6v6zot] {
    margin-right: 10px;
}

.nav-item a[href="#adminmenu"] p[b-5wmg6v6zot] {
    margin-bottom: 0;
}

.nav-item a[href="#adminmenu"]:hover[b-5wmg6v6zot] {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Note: nav-section and text-section styles are provided by kaiadmin.css template */

/* Active menu items */
.nav-item.active > a[b-5wmg6v6zot] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    font-weight: 600;
}

.nav-item.submenu > a[b-5wmg6v6zot] {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Active sub-items */
.nav-collapse li a.active[b-5wmg6v6zot] {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-left: 3px solid #1572e8;
    padding-left: 17px;
}

.nav-collapse li a.active .sub-item[b-5wmg6v6zot] {
    color: #ffffff !important;
}

/* Smooth transition for menu collapse */
.collapse[b-5wmg6v6zot] {
    transition: height 0.3s ease;
}

.collapse.show[b-5wmg6v6zot] {
    display: block;
}
/* /Components/Pages/Bookings/BookingsPage.razor.rz.scp.css */
/* World-Class Booking Details Modal Styling */

.booking-details-container[b-05bxvay0ri] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
    line-height: 1.5;
}

/* Status Header */
.booking-status-header[b-05bxvay0ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.status-badges[b-05bxvay0ri] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-badge[b-05bxvay0ri] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 1px solid;
}

.status-badge.active[b-05bxvay0ri] {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}

.status-badge.on-hold[b-05bxvay0ri] {
    background: #fef3c7;
    color: #d97706;
    border-color: #fde68a;
}

.status-badge.cancelled[b-05bxvay0ri] {
    background: #fecaca;
    color: #dc2626;
    border-color: #fca5a5;
}

.booking-id[b-05bxvay0ri] {
    text-align: right;
}

.id-label[b-05bxvay0ri] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.id-value[b-05bxvay0ri] {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

/* Detail Cards */
.detail-card[b-05bxvay0ri] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    height: 100%;
}

.detail-card:hover[b-05bxvay0ri] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.detail-card .card-header[b-05bxvay0ri] {
    background: #f8fafc;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
}

.detail-card .card-title[b-05bxvay0ri] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.detail-card .card-body[b-05bxvay0ri] {
    padding: 1.25rem;
}

/* Detail Rows */
.detail-row[b-05bxvay0ri] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.detail-row:last-child[b-05bxvay0ri] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label[b-05bxvay0ri] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    flex: 0 0 40%;
    margin-right: 1rem;
}

.detail-value[b-05bxvay0ri] {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 400;
    flex: 1;
    text-align: right;
    word-break: break-word;
}

.detail-value.company-name[b-05bxvay0ri] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.department-name[b-05bxvay0ri] {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

.no-data[b-05bxvay0ri] {
    padding: 2rem;
    text-align: center;
    color: #64748b;
    font-style: italic;
}

/* Financial Card Specific Styling */
.financial-card[b-05bxvay0ri] {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

.financial-card .card-header[b-05bxvay0ri] {
    background: #f59e0b;
    color: white;
    border-color: #d97706;
}

.financial-card .card-title[b-05bxvay0ri] {
    color: white;
}

.financial-item[b-05bxvay0ri] {
    background: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: all 0.2s ease;
}

.financial-item:hover[b-05bxvay0ri] {
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.financial-item.final-value[b-05bxvay0ri] {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    border-color: #2563eb;
}

.financial-item.final-value .financial-label[b-05bxvay0ri],
.financial-item.final-value .financial-value[b-05bxvay0ri] {
    color: white;
}

.financial-label[b-05bxvay0ri] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.financial-value[b-05bxvay0ri] {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.financial-value.discount[b-05bxvay0ri] {
    color: #dc2626;
}

.financial-footer[b-05bxvay0ri] {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.currency-info[b-05bxvay0ri] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* Action Footer */
.modal-footer-actions[b-05bxvay0ri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 0;
    border-top: 1px solid #e2e8f0;
}

.modal-footer-actions .btn[b-05bxvay0ri] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-footer-actions .btn:hover[b-05bxvay0ri] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 768px) {
    .booking-status-header[b-05bxvay0ri] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        text-align: center;
    }
    
    .status-badges[b-05bxvay0ri] {
        justify-content: center;
    }
    
    .booking-id[b-05bxvay0ri] {
        text-align: center;
    }
    
    .detail-row[b-05bxvay0ri] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .detail-label[b-05bxvay0ri] {
        flex: none;
        margin-right: 0;
    }
    
    .detail-value[b-05bxvay0ri] {
        text-align: left;
    }
    
    .detail-value.company-name[b-05bxvay0ri] {
        align-items: flex-start;
    }
    
    .modal-footer-actions[b-05bxvay0ri] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-footer-actions .btn[b-05bxvay0ri] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .booking-details-container[b-05bxvay0ri] {
        font-size: 0.875rem;
    }
    
    .detail-card .card-body[b-05bxvay0ri] {
        padding: 1rem;
    }
    
    .detail-card .card-header[b-05bxvay0ri] {
        padding: 0.75rem 1rem;
    }
    
    .financial-item[b-05bxvay0ri] {
        padding: 0.75rem;
    }
    
    .financial-value[b-05bxvay0ri] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Contacts/Contacts/ContactPage.razor.rz.scp.css */
/* ===== CONTACT PAGE MODAL ANIMATIONS ===== */

/* Modal Form Container */
.modal-form-container[b-ha13fkgyu3] {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

/* Main Content Area */
.main-content[b-ha13fkgyu3] {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding-right: 0;
}

/* Main content with sidebar visible */
.main-content.with-sidebar[b-ha13fkgyu3] {
    margin-right: 300px;
}

/* Reminder Sidebar */
.reminder-sidebar[b-ha13fkgyu3] {
    position: absolute;
    top: 0;
    right: -300px; /* Hidden off-screen initially */
    width: 280px;
    height: 100%;
    background-color: #f8f9fa;
    border-left: 1px solid #dee2e6;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    border-radius: 0 0.375rem 0.375rem 0;
}

/* Sidebar visible state */
.reminder-sidebar.show[b-ha13fkgyu3] {
    right: 0; /* Slide in from right */
}

/* Sidebar Content */
.sidebar-content[b-ha13fkgyu3] {
    padding: 1.5rem;
    height: 100%;
}

/* Sidebar Title */
.sidebar-title[b-ha13fkgyu3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Sidebar Form Controls */
.reminder-sidebar .form-label[b-ha13fkgyu3] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.4rem;
}

.reminder-sidebar .form-control-sm[b-ha13fkgyu3],
.reminder-sidebar .form-select[b-ha13fkgyu3] {
    font-size: 0.85rem;
    border-radius: 0.25rem;
    border-color: #ced4da;
}

.reminder-sidebar .form-control-sm:focus[b-ha13fkgyu3],
.reminder-sidebar .form-select:focus[b-ha13fkgyu3] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Validation Message in Sidebar */
.reminder-sidebar .text-danger[b-ha13fkgyu3] {
    font-size: 0.75rem;
}

/* Enhanced Modal Dialog Size */
.modal-dialog.modal-wide[b-ha13fkgyu3] {
    max-width: 950px !important;
    width: 95%;
}

/* Checkbox Styling Enhancement */
.form-check[b-ha13fkgyu3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input[b-ha13fkgyu3] {
    flex-shrink: 0;
    margin-top: 0;
}

.form-check-label[b-ha13fkgyu3] {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    user-select: none;
}

/* Message Textarea Enhancement */
.main-content textarea.form-control[b-ha13fkgyu3] {
    resize: vertical;
    min-height: 120px;
}

/* Button Enhancements */
.btn[b-ha13fkgyu3] {
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn:hover[b-ha13fkgyu3] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-dialog.modal-wide[b-ha13fkgyu3] {
        max-width: 100% !important;
        margin: 0.5rem;
    }
    
    .main-content.with-sidebar[b-ha13fkgyu3] {
        margin-right: 0;
    }
    
    .reminder-sidebar[b-ha13fkgyu3] {
        position: static;
        width: 100%;
        right: auto;
        margin-top: 1rem;
        border-left: none;
        border-top: 1px solid #dee2e6;
        border-radius: 0.375rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .reminder-sidebar.show[b-ha13fkgyu3] {
        right: auto;
    }
    
    .d-flex.gap-4[b-ha13fkgyu3] {
        flex-direction: column;
        gap: 1rem !important;
    }
}

/* Animation Enhancements */
@keyframes slideInFromRight-b-ha13fkgyu3 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight-b-ha13fkgyu3 {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Additional Animation Classes for Enhanced Experience */
.reminder-sidebar.show .sidebar-content[b-ha13fkgyu3] {
    animation: slideInFromRight-b-ha13fkgyu3 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered Animation for Form Elements */
.reminder-sidebar.show .form-control:first-of-type[b-ha13fkgyu3],
.reminder-sidebar.show .form-select:first-of-type[b-ha13fkgyu3] {
    animation-delay: 0.1s;
}

.reminder-sidebar.show .mb-3:nth-child(2)[b-ha13fkgyu3] {
    animation-delay: 0.15s;
}

.reminder-sidebar.show .mb-3:nth-child(3)[b-ha13fkgyu3] {
    animation-delay: 0.2s;
}

/* Subtle Hover Effects */
.reminder-sidebar:hover[b-ha13fkgyu3] {
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
}

.main-content.with-sidebar[b-ha13fkgyu3] {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}
/* /Components/Pages/FlatPlan/FlatPlan.razor.rz.scp.css */
/* Styles for the FlatPlan component */
.magazine-spread-container[b-2ctbl0q0yb] {
    padding-top: 20px; /* Add padding for zoom origin */
}

.page-outline[b-2ctbl0q0yb] {
     border: 1px dashed #dee2e6; /* Added border */
}

.color-indicator[b-2ctbl0q0yb] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
}

.status-dot[b-2ctbl0q0yb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.btn-icon[b-2ctbl0q0yb] {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #dee2e6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #6c757d;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

    .btn-icon:hover[b-2ctbl0q0yb] {
        color: #0d6efd;
        background-color: white;
    }

.ad-item .btn-icon[b-2ctbl0q0yb] {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.1s, opacity 0.1s linear;
}

.ad-item:hover .btn-icon[b-2ctbl0q0yb] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Color/Utility classes */
.bg-primary-100[b-2ctbl0q0yb] { background-color: #cfe2ff; }
.text-primary-800[b-2ctbl0q0yb] { color: #0a58ca; }
.bg-danger-100[b-2ctbl0q0yb] { background-color: #f8d7da; }
.text-danger-800[b-2ctbl0q0yb] { color: #842029; }
.bg-success-100[b-2ctbl0q0yb] { background-color: #d1e7dd; }
.text-success-800[b-2ctbl0q0yb] { color: #0f5132; }
.bg-warning-100[b-2ctbl0q0yb] { background-color: #fff3cd; }
.text-warning-800[b-2ctbl0q0yb] { color: #7c4a03; }
.bg-light[b-2ctbl0q0yb] { background-color: #f8f9fa !important; }
.bg-gray-100[b-2ctbl0q0yb] { background-color: #f8f9fa; }
.border-gray-300[b-2ctbl0q0yb] { border-color: #dee2e6 !important; }
.border-light[b-2ctbl0q0yb] { border-color: #f8f9fa !important; }
.bg-gray-200[b-2ctbl0q0yb] { background-color: #e9ecef; }
.border-gray-200[b-2ctbl0q0yb] { border-color: #e9ecef !important; }
.inset-0[b-2ctbl0q0yb] { top: 0; right: 0; bottom: 0; left: 0; }
.cursor-move[b-2ctbl0q0yb] { cursor: move; }
.x-small[b-2ctbl0q0yb] { font-size: 0.75rem; }
.text-sm[b-2ctbl0q0yb] { font-size: 0.875rem; }
.form-control-sm[b-2ctbl0q0yb] { padding-top: 0.25rem; padding-bottom: 0.25rem; } 
/* /Components/Shared/Loaders/TetrisLoader.razor.rz.scp.css */
/* CSS Variables */
:root[b-194esaowbt] {
    --tetris-bg-color: #2c3e50;
    --tetris-grid-color: rgba(236, 240, 241, 0.05);
    --tetris-p-color: #e74c3c;
    --tetris-s-color: #3498db;
    --tetris-c-color: #f1c40f;
    --tetris-top1-color: #3498db;
    --tetris-top2-color: #f1c40f;
    --tetris-top3-color: #e74c3c;
    --tetris-text-color: #ecf0f1;
    --tetris-glow-color: #ffffff;
    --tetris-block-size: 60px;
    --tetris-padding: 2px;
}

/* Overlay */
.tetris-loader-overlay[b-194esaowbt] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--tetris-bg-color);
    background-image:
        linear-gradient(var(--tetris-grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--tetris-grid-color) 1px, transparent 1px);
    background-size: calc(var(--tetris-block-size) + var(--tetris-padding)) calc(var(--tetris-block-size) + var(--tetris-padding));
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.tetris-loader-overlay.fade-in[b-194esaowbt] {
    opacity: 1;
    pointer-events: all;
}

.tetris-loader-overlay.fade-out[b-194esaowbt] {
    opacity: 0;
    pointer-events: none;
}

/* Main Container */
.tetris-container[b-194esaowbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    perspective: 1000px;
}

/* Wrapper for parallax effect */
.parallax-wrapper[b-194esaowbt] {
    width: 100%;
    height: 100%;
    transition: transform 0.1s linear;
    transform-style: preserve-3d;
}

.logo-container[b-194esaowbt] {
    position: relative;
    width: calc(var(--tetris-block-size) * 4 + var(--tetris-padding) * 3);
    height: calc(var(--tetris-block-size) * 2 + var(--tetris-padding));
    transform-style: preserve-3d;
}

/* Tetris Pieces */
.tetris-piece[b-194esaowbt], .ghost-piece[b-194esaowbt] {
    position: absolute;
    border-radius: 8px;
    box-sizing: border-box;
    opacity: 0;
}

.tetris-piece[b-194esaowbt] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--tetris-block-size) * 0.08);
    font-weight: 700;
    font-size: calc(var(--tetris-block-size) * 0.6);
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.2),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.4s ease;
    overflow: hidden;
}

.ghost-piece[b-194esaowbt] {
    border: 2px dashed;
    background: rgba(255,255,255,0.05);
}

/* Piece Positioning */
.piece-p[b-194esaowbt], .ghost-p[b-194esaowbt] { 
    width: var(--tetris-block-size); 
    height: var(--tetris-block-size); 
    top: calc(var(--tetris-block-size) + var(--tetris-padding)); 
    left: 0; 
}

.piece-s[b-194esaowbt], .ghost-s[b-194esaowbt] { 
    width: var(--tetris-block-size); 
    height: calc(var(--tetris-block-size) * 2 + var(--tetris-padding)); 
    top: 0; 
    left: calc(var(--tetris-block-size) + var(--tetris-padding));
}

.piece-c[b-194esaowbt], .ghost-c[b-194esaowbt] { 
    width: calc(var(--tetris-block-size) * 2 + var(--tetris-padding)); 
    height: var(--tetris-block-size); 
    top: calc(var(--tetris-block-size) + var(--tetris-padding)); 
    left: calc(var(--tetris-block-size) * 2 + var(--tetris-padding) * 2);
    padding-right: var(--tetris-block-size);
}

.piece-top1[b-194esaowbt], .ghost-top1[b-194esaowbt] { 
    width: var(--tetris-block-size); 
    height: var(--tetris-block-size); 
    top: 0; 
    left: 0; 
}

.piece-top2[b-194esaowbt], .ghost-top2[b-194esaowbt] { 
    width: var(--tetris-block-size); 
    height: var(--tetris-block-size); 
    top: 0; 
    left: calc(var(--tetris-block-size) * 2 + var(--tetris-padding) * 2); 
}

.piece-top3[b-194esaowbt], .ghost-top3[b-194esaowbt] { 
    width: var(--tetris-block-size); 
    height: var(--tetris-block-size); 
    top: 0; 
    left: calc(var(--tetris-block-size) * 3 + var(--tetris-padding) * 3); 
}

/* Colors */
.piece-p[b-194esaowbt] { background: var(--tetris-p-color); }
.piece-s[b-194esaowbt] { background: var(--tetris-s-color); }
.piece-c[b-194esaowbt] { background: var(--tetris-c-color); }
.piece-top1[b-194esaowbt] { background: var(--tetris-top1-color); }
.piece-top2[b-194esaowbt] { background: var(--tetris-top2-color); }
.piece-top3[b-194esaowbt] { background: var(--tetris-top3-color); }

.ghost-p[b-194esaowbt] { border-color: var(--tetris-p-color); }
.ghost-s[b-194esaowbt] { border-color: var(--tetris-s-color); }
.ghost-c[b-194esaowbt] { border-color: var(--tetris-c-color); }
.ghost-top1[b-194esaowbt] { border-color: var(--tetris-top1-color); }
.ghost-top2[b-194esaowbt] { border-color: var(--tetris-top2-color); }
.ghost-top3[b-194esaowbt] { border-color: var(--tetris-top3-color); }

/* Animation Phase 1: Animate In */
.animate-in .ghost-piece[b-194esaowbt] { 
    animation: ghost-fall-b-194esaowbt 0.5s cubic-bezier(0.5, 0, 1, 1) forwards; 
}

.animate-in .tetris-piece[b-194esaowbt] { 
    animation: piece-fall-b-194esaowbt 0.5s cubic-bezier(0.5, 0, 1, 1) forwards; 
}

.animate-in .ghost-p[b-194esaowbt], .animate-in .piece-p[b-194esaowbt] { animation-delay: 0.2s; }
.animate-in .ghost-s[b-194esaowbt], .animate-in .piece-s[b-194esaowbt] { animation-delay: 0.8s; }
.animate-in .ghost-c[b-194esaowbt], .animate-in .piece-c[b-194esaowbt] { animation-delay: 1.4s; }
.animate-in .ghost-top1[b-194esaowbt], .animate-in .piece-top1[b-194esaowbt] { animation-delay: 0.5s; }
.animate-in .ghost-top2[b-194esaowbt], .animate-in .piece-top2[b-194esaowbt] { animation-delay: 1.7s; }
.animate-in .ghost-top3[b-194esaowbt], .animate-in .piece-top3[b-194esaowbt] { animation-delay: 2.0s; }

@keyframes ghost-fall-b-194esaowbt {
    0% { opacity: 0; transform: translateY(-200px); }
    50% { opacity: 0.5; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes piece-fall-b-194esaowbt {
    0% { opacity: 1; transform: translateY(-200px); }
    70% { transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Line Clear Effect */
.line-clear[b-194esaowbt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--tetris-glow-color);
    opacity: 0;
    filter: blur(25px);
    border-radius: 10px;
}

.animate-in .line-clear[b-194esaowbt] { 
    animation: line-clear-anim-b-194esaowbt 0.5s ease-out 2.8s forwards; 
}

@keyframes line-clear-anim-b-194esaowbt {
    0% { opacity: 0; transform: translateX(-100%); }
    30% { opacity: 0.6; }
    70% { opacity: 0.6; }
    100% { opacity: 0; transform: translateX(150%); }
}

/* Glitch Effect */
.animate-in .logo-container[b-194esaowbt] { 
    animation: glitch-b-194esaowbt 0.1s linear 2.9s 2; 
}

@keyframes glitch-b-194esaowbt {
    0%, 100% { transform: translate(0, 0); } 
    25% { transform: translate(4px, -2px); }
    50% { transform: translate(-2px, 2px); } 
    75% { transform: translate(2px, -4px); }
}

.animate-in .tetris-piece[b-194esaowbt] { 
    animation-fill-mode: forwards; 
}

.animate-complete .tetris-piece[b-194esaowbt] {
    opacity: 1;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.2), 
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 0 25px var(--tetris-glow-color), 
        0 5px 15px rgba(0,0,0,0.3);
}

/* Interactive Hover Effect */
.animate-complete .tetris-piece:hover[b-194esaowbt] {
    transform: translateY(-8px) scale(1.05);
    z-index: 10;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.3), 
        inset 0 -1px 1px rgba(0, 0, 0, 0.3),
        0 0 35px var(--tetris-glow-color), 
        0 8px 20px rgba(0,0,0,0.4);
}

/* Metallic Shine Effect */
.tetris-piece[b-194esaowbt]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 60%
    );
    transform: translateX(-125%) translateY(-125%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s;
}

@keyframes metallic-shine-b-194esaowbt {
    0% { transform: translateX(-125%) translateY(-125%) rotate(45deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(125%) translateY(125%) rotate(45deg); opacity: 0; }
}

.animate-complete .tetris-piece[b-194esaowbt]::after { 
    animation: metallic-shine-b-194esaowbt 0.8s ease-in-out forwards; 
}

.animate-complete .piece-top1[b-194esaowbt]::after { animation-delay: 0.2s; }
.animate-complete .piece-p[b-194esaowbt]::after { animation-delay: 0.25s; }
.animate-complete .piece-s[b-194esaowbt]::after { animation-delay: 0.3s; }
.animate-complete .piece-top2[b-194esaowbt]::after { animation-delay: 0.35s; }
.animate-complete .piece-c[b-194esaowbt]::after { animation-delay: 0.4s; }
.animate-complete .piece-top3[b-194esaowbt]::after { animation-delay: 0.45s; }

/* Animation Phase 2: Animate Out */
.animate-out .tetris-piece[b-194esaowbt] {
    animation: piece-out-b-194esaowbt 1s ease-in forwards;
    box-shadow: 
        inset 0 2px 2px rgba(255, 255, 255, 0.2),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(0,0,0,0.2);
}

@keyframes piece-out-b-194esaowbt {
    from { 
        opacity: 1; 
        transform: translateY(0) rotate(0) scale(1); 
    }
    to {
        opacity: 0;
        transform: 
            translateY(var(--y-out)) 
            translateX(var(--x-out)) 
            rotate(var(--r-out)) 
            scale(0.5);
    }
}

.animate-out .piece-p[b-194esaowbt] { 
    --x-out: -150px; 
    --y-out: 50px; 
    --r-out: -90deg; 
    animation-delay: 0s; 
}

.animate-out .piece-top1[b-194esaowbt] { 
    --x-out: -150px; 
    --y-out: -50px; 
    --r-out: 90deg; 
    animation-delay: 0.1s; 
}

.animate-out .piece-s[b-194esaowbt] { 
    --x-out: 0px; 
    --y-out: 150px; 
    --r-out: -45deg; 
    animation-delay: 0.2s; 
}

.animate-out .piece-c[b-194esaowbt] { 
    --x-out: 150px; 
    --y-out: 50px; 
    --r-out: 90deg; 
    animation-delay: 0.3s; 
}

.animate-out .piece-top2[b-194esaowbt] { 
    --x-out: 150px; 
    --y-out: -50px; 
    --r-out: -90deg; 
    animation-delay: 0.4s; 
}

.animate-out .piece-top3[b-194esaowbt] { 
    --x-out: 200px; 
    --y-out: -50px; 
    --r-out: 45deg; 
    animation-delay: 0.5s; 
}

/* Text Styling */
.text-container[b-194esaowbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: calc(var(--tetris-block-size) * 4 + var(--tetris-padding) * 3);
}

.loading-text[b-194esaowbt], .subtitle-text[b-194esaowbt] {
    color: var(--tetris-text-color);
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
}

.loading-text[b-194esaowbt] {
    font-size: 1rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    width: 100%;
}

.subtitle-text[b-194esaowbt] {
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    line-height: 0.85;
}

.subtitle-text span[b-194esaowbt] {
    display: inline-block;
    white-space: nowrap;
    transform-origin: center center;
}

.line-1[b-194esaowbt] { 
    font-size: 2.1rem; 
    transform: scaleX(0.85); 
}

.line-2[b-194esaowbt] { 
    font-size: 2.5rem; 
    transform: scaleX(0.68); 
}

.line-3[b-194esaowbt] { 
    font-size: 2.3rem; 
    transform: scaleX(0.75); 
}

.animate-complete .loading-text[b-194esaowbt],
.animate-complete .subtitle-text[b-194esaowbt] {
    opacity: 1;
}

.animate-out .loading-text[b-194esaowbt],
.animate-out .subtitle-text[b-194esaowbt] {
    opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
    :root[b-194esaowbt] { 
        --tetris-block-size: 40px; 
    }
    
    .loading-text[b-194esaowbt] { 
        font-size: 0.8rem; 
    }
    
    .line-1[b-194esaowbt] { 
        font-size: 1.4rem; 
    }
    
    .line-2[b-194esaowbt] { 
        font-size: 1.6rem; 
    }
    
    .line-3[b-194esaowbt] { 
        font-size: 1.5rem; 
    }
}
/* /Components/Shared/Reconnection/BlazorReconnectUI.razor.rz.scp.css */
/* ===== COMPACT CENTERED BLAZOR RECONNECTION UI ===== */

/* Critical: Hide modal by default - always hidden unless explicitly shown */
#components-reconnect-modal[b-h502r8qvjf] {
    display: none !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

/* CRITICAL: Only show when JavaScript explicitly adds show-modal class */
/* This prevents the modal from showing on page load or when hide class is missing */
#components-reconnect-modal.show-modal[b-h502r8qvjf] {
    display: flex !important;
    animation: fadeIn 0.3s ease-out;
}

/* Light backdrop */
.reconnect-backdrop[b-h502r8qvjf] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Compact centered toast card */
.reconnect-toast-card[b-h502r8qvjf] {
    position: relative;
    width: 400px;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid #e0e0e0;
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Status sections - hide by default, show based on parent class */
.reconnect-status-section[b-h502r8qvjf] {
    display: none;
    padding: 1.5rem;
}

/* Show attempting state by default when modal is visible */
#components-reconnect-modal:not(.components-reconnect-hide):not(.show-failed):not(.show-rejected) .reconnect-status-section[data-reconnect-display="attempting"][b-h502r8qvjf] {
    display: block;
}

/* Show specific states when JavaScript adds classes */
#components-reconnect-modal.show-attempting .reconnect-status-section[data-reconnect-display="attempting"][b-h502r8qvjf] {
    display: block;
}

#components-reconnect-modal.show-failed .reconnect-status-section[data-reconnect-display="failed"][b-h502r8qvjf] {
    display: block;
}

#components-reconnect-modal.show-rejected .reconnect-status-section[data-reconnect-display="rejected"][b-h502r8qvjf] {
    display: block;
}

/* Hide all other sections when specific state is shown */
#components-reconnect-modal.show-failed .reconnect-status-section[data-reconnect-display="attempting"][b-h502r8qvjf],
#components-reconnect-modal.show-rejected .reconnect-status-section[data-reconnect-display="attempting"][b-h502r8qvjf],
#components-reconnect-modal.show-rejected .reconnect-status-section[data-reconnect-display="failed"][b-h502r8qvjf] {
    display: none !important;
}

/* Color-coded left border for each state */
.reconnect-status-section[data-reconnect-display="attempting"][b-h502r8qvjf] {
    border-left: 4px solid #0d6efd; /* Blue */
}

.reconnect-status-section[data-reconnect-display="failed"][b-h502r8qvjf] {
    border-left: 4px solid #fd7e14; /* Orange */
}

.reconnect-status-section[data-reconnect-display="rejected"][b-h502r8qvjf] {
    border-left: 4px solid #dc3545; /* Red */
}

/* Header layout - horizontal */
.reconnect-header[b-h502r8qvjf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Compact tetris loader inline */
.inline-tetris-wrapper.size-compact[b-h502r8qvjf] {
    --tetris-block-size: 28px;
    --tetris-padding: 2px;
    display: inline-block;
    position: relative;
    z-index: 1;
    --tetris-glow-color: #ffffff;
}

/* Status spinner icon */
.status-spinner[b-h502r8qvjf] {
    font-size: 18px;
    color: #0d6efd;
}

.reconnect-status-section[data-reconnect-display="failed"] .status-spinner[b-h502r8qvjf] {
    color: #fd7e14;
}

.reconnect-status-section[data-reconnect-display="rejected"] .status-spinner[b-h502r8qvjf] {
    color: #dc3545;
}

/* Compact typography */
.reconnect-title[b-h502r8qvjf] {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.reconnect-message[b-h502r8qvjf] {
    font-size: 13px;
    color: #6c757d;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Footer layout */
.reconnect-footer[b-h502r8qvjf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.reconnect-counter[b-h502r8qvjf] {
    font-size: 12px;
    color: #6c757d;
}

.attempt-number[b-h502r8qvjf] {
    font-weight: 600;
    color: #fd7e14;
}

/* Compact button styling */
.btn-sm[b-h502r8qvjf] {
    font-size: 13px;
    padding: 0.375rem 0.75rem;
}

/* ===== COMPACT TETRIS LOADER STYLES ===== */

.inline-tetris-loader[b-h502r8qvjf] {
    display: inline-block;
    position: relative;
    width: calc(var(--tetris-block-size, 28px) * 4 + var(--tetris-padding, 2px) * 3);
    height: calc(var(--tetris-block-size, 28px) * 2 + var(--tetris-padding, 2px));
}

.parallax-wrapper[b-h502r8qvjf] {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.logo-container[b-h502r8qvjf] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Tetris Pieces - Start hidden above container */
.tetris-piece[b-h502r8qvjf], .ghost-piece[b-h502r8qvjf] {
    position: absolute;
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 2;
    opacity: 0;
    transform: translateY(-200px);
}

/* FALLBACK: Auto-start CSS animations if JavaScript doesn't add classes */
/* This ensures the logo is always visible and animating */
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .tetris-piece[b-h502r8qvjf] {
    animation: auto-piece-fall 3.2s ease-out forwards, auto-piece-glow 2s ease-in-out 3.2s infinite alternate;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-piece[b-h502r8qvjf] {
    animation: auto-ghost-fall 0.5s cubic-bezier(0.5, 0, 1, 1) forwards;
}

/* Auto-animation delays for staggered effect */
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-p[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-p[b-h502r8qvjf] {
    animation-delay: 0.2s;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-s[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-s[b-h502r8qvjf] {
    animation-delay: 0.8s;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-c[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-c[b-h502r8qvjf] {
    animation-delay: 1.4s;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-top1[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-top1[b-h502r8qvjf] {
    animation-delay: 0.5s;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-top2[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-top2[b-h502r8qvjf] {
    animation-delay: 1.7s;
}

.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .ghost-top3[b-h502r8qvjf],
.inline-tetris-loader:not(.animate-in):not(.animate-complete):not(.animate-out) .piece-top3[b-h502r8qvjf] {
    animation-delay: 2.0s;
}

.tetris-piece[b-h502r8qvjf] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--tetris-block-size, 28px) * 0.08);
    font-weight: 700;
    font-size: calc(var(--tetris-block-size, 28px) * 0.6);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.4s ease;
}

.ghost-piece[b-h502r8qvjf] {
    border: 2px dashed;
    background: rgba(255,255,255,0.05);
}

/* Piece Positioning */
.piece-p[b-h502r8qvjf], .ghost-p[b-h502r8qvjf] {
    width: var(--tetris-block-size, 28px);
    height: var(--tetris-block-size, 28px);
    top: calc(var(--tetris-block-size, 28px) + var(--tetris-padding, 2px));
    left: 0;
}

.piece-s[b-h502r8qvjf], .ghost-s[b-h502r8qvjf] {
    width: var(--tetris-block-size, 28px);
    height: calc(var(--tetris-block-size, 28px) * 2 + var(--tetris-padding, 2px));
    top: 0;
    left: calc(var(--tetris-block-size, 28px) + var(--tetris-padding, 2px));
}

.piece-c[b-h502r8qvjf], .ghost-c[b-h502r8qvjf] {
    width: calc(var(--tetris-block-size, 28px) * 2 + var(--tetris-padding, 2px));
    height: var(--tetris-block-size, 28px);
    top: calc(var(--tetris-block-size, 28px) + var(--tetris-padding, 2px));
    left: calc(var(--tetris-block-size, 28px) * 2 + var(--tetris-padding, 2px) * 2);
    padding-right: var(--tetris-block-size, 28px);
}

.piece-top1[b-h502r8qvjf], .ghost-top1[b-h502r8qvjf] {
    width: var(--tetris-block-size, 28px);
    height: var(--tetris-block-size, 28px);
    top: 0;
    left: 0;
}

.piece-top2[b-h502r8qvjf], .ghost-top2[b-h502r8qvjf] {
    width: var(--tetris-block-size, 28px);
    height: var(--tetris-block-size, 28px);
    top: 0;
    left: calc(var(--tetris-block-size, 28px) * 2 + var(--tetris-padding, 2px) * 2);
}

.piece-top3[b-h502r8qvjf], .ghost-top3[b-h502r8qvjf] {
    width: var(--tetris-block-size, 28px);
    height: var(--tetris-block-size, 28px);
    top: 0;
    left: calc(var(--tetris-block-size, 28px) * 3 + var(--tetris-padding, 2px) * 3);
}

/* Colors */
.piece-p[b-h502r8qvjf] { background: #e74c3c; }
.piece-s[b-h502r8qvjf] { background: #3498db; }
.piece-c[b-h502r8qvjf] { background: #f1c40f; }
.piece-top1[b-h502r8qvjf] { background: #3498db; }
.piece-top2[b-h502r8qvjf] { background: #f1c40f; }
.piece-top3[b-h502r8qvjf] { background: #e74c3c; }

.ghost-p[b-h502r8qvjf] { border-color: #e74c3c; }
.ghost-s[b-h502r8qvjf] { border-color: #3498db; }
.ghost-c[b-h502r8qvjf] { border-color: #f1c40f; }
.ghost-top1[b-h502r8qvjf] { border-color: #3498db; }
.ghost-top2[b-h502r8qvjf] { border-color: #f1c40f; }
.ghost-top3[b-h502r8qvjf] { border-color: #e74c3c; }

/* ===== JAVASCRIPT-CONTROLLED ANIMATIONS ===== */
/* NOTE: Keyframes are defined in /wwwroot/css/site.css (global) */
/* Blazor's CSS scoper breaks @keyframes by adding scope attributes to percentage selectors */

/* Animation Phase 1: Animate In (Pieces Fall Down) */
.animate-in .ghost-piece[b-h502r8qvjf] {
    animation: ghost-fall 0.5s cubic-bezier(0.5, 0, 1, 1) forwards;
}

.animate-in .tetris-piece[b-h502r8qvjf] {
    animation: piece-fall 0.5s cubic-bezier(0.5, 0, 1, 1) forwards;
}

.animate-in .ghost-p[b-h502r8qvjf], .animate-in .piece-p[b-h502r8qvjf] { animation-delay: 0.2s; }
.animate-in .ghost-s[b-h502r8qvjf], .animate-in .piece-s[b-h502r8qvjf] { animation-delay: 0.8s; }
.animate-in .ghost-c[b-h502r8qvjf], .animate-in .piece-c[b-h502r8qvjf] { animation-delay: 1.4s; }
.animate-in .ghost-top1[b-h502r8qvjf], .animate-in .piece-top1[b-h502r8qvjf] { animation-delay: 0.5s; }
.animate-in .ghost-top2[b-h502r8qvjf], .animate-in .piece-top2[b-h502r8qvjf] { animation-delay: 1.7s; }
.animate-in .ghost-top3[b-h502r8qvjf], .animate-in .piece-top3[b-h502r8qvjf] { animation-delay: 2.0s; }

.animate-in .tetris-piece[b-h502r8qvjf] {
    animation-fill-mode: forwards;
}

/* Animation Phase 2: Complete (Pieces Glow) */
.animate-complete .tetris-piece[b-h502r8qvjf] {
    opacity: 1;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 0 25px var(--tetris-glow-color),
        0 5px 15px rgba(0,0,0,0.3);
}

/* Animation Phase 3: Animate Out (Pieces Spin Away) */
.animate-out .tetris-piece[b-h502r8qvjf] {
    animation: piece-out 1s ease-in forwards;
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.2),
        inset 0 -2px 2px rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(0,0,0,0.2);
}

.animate-out .piece-p[b-h502r8qvjf] {
    --x-out: -150px;
    --y-out: 50px;
    --r-out: -90deg;
    animation-delay: 0s;
}

.animate-out .piece-top1[b-h502r8qvjf] {
    --x-out: -150px;
    --y-out: -50px;
    --r-out: 90deg;
    animation-delay: 0.1s;
}

.animate-out .piece-s[b-h502r8qvjf] {
    --x-out: 0px;
    --y-out: 150px;
    --r-out: -45deg;
    animation-delay: 0.2s;
}

.animate-out .piece-c[b-h502r8qvjf] {
    --x-out: 150px;
    --y-out: 50px;
    --r-out: 90deg;
    animation-delay: 0.3s;
}

.animate-out .piece-top2[b-h502r8qvjf] {
    --x-out: 150px;
    --y-out: -50px;
    --r-out: -90deg;
    animation-delay: 0.4s;
}

.animate-out .piece-top3[b-h502r8qvjf] {
    --x-out: 200px;
    --y-out: -50px;
    --r-out: 45deg;
    animation-delay: 0.5s;
}

/* Line Clear Effect */
.line-clear[b-h502r8qvjf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--tetris-glow-color);
    opacity: 0;
    filter: blur(25px);
    border-radius: 10px;
    pointer-events: none;
}

.animate-in .line-clear[b-h502r8qvjf] {
    animation: line-clear-anim 0.5s ease-out 2.8s forwards;
}

/* All keyframes moved to /wwwroot/css/site.css to prevent Blazor CSS scoping corruption */

/* ===== RESPONSIVE DESIGN ===== */

@@media (max-width: 768px) {
    .reconnect-toast-card[b-h502r8qvjf] {
        width: 350px;
    }

    .reconnect-title[b-h502r8qvjf] {
        font-size: 15px;
    }

    .reconnect-message[b-h502r8qvjf] {
        font-size: 12px;
    }

    .inline-tetris-wrapper.size-compact[b-h502r8qvjf] {
        --tetris-block-size: 24px;
    }
}

@@media (max-width: 480px) {
    .reconnect-toast-card[b-h502r8qvjf] {
        width: 95vw;
        padding: 1rem;
    }

    .reconnect-status-section[b-h502r8qvjf] {
        padding: 1rem;
    }

    .reconnect-header[b-h502r8qvjf] {
        gap: 0.5rem;
    }

    .reconnect-footer[b-h502r8qvjf] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .reconnect-footer button[b-h502r8qvjf] {
        width: 100%;
    }

    .reconnect-counter[b-h502r8qvjf] {
        text-align: center;
    }

    .inline-tetris-wrapper.size-compact[b-h502r8qvjf] {
        --tetris-block-size: 22px;
    }
}