:root {
  /* --- Lightera Brand Colors ------------------------------------------------ */
  --color-lightera-primary:   #6f00d3;   /* Purple n.1  — CTA, links, primary actions */
  --color-lightera-secondary: #9e0fce;   /* Purple n.2  — secondary actions, accents   */
  --color-lightera-tertiary:  #b063ff;   /* Purple n.3  — lighter highlights, hovers   */
  --color-lightera-highlight: #cdf564;   /* Green        — accent chips, success states */
  --color-lightera-offwhite:  #f2f0ee;   /* Off-white    — page backgrounds             */
  --color-lightera-gray:      #31312f;   /* Gray         — body text                    */
  --color-lightera-black:     #000000;   /* Black        — headings, high-contrast      */

  /* Semantic purple scale (used for interactive states) */
  --color-purple-50:  #f5f0ff;
  --color-purple-100: #ede0ff;
  --color-purple-200: #d9c0ff;
  --color-purple-300: #b063ff;
  --color-purple-400: #9040f5;
  --color-purple-500: #7c20e8;
  --color-purple-600: #6f00d3;
  --color-purple-700: #5a00ab;
  --color-purple-800: #460083;
  --color-purple-900: #31005c;

  --font-sans:    'Segoe UI', Arial, Helvetica, sans-serif;
  --font-heading: 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-body:    'Segoe UI', Arial, Helvetica, sans-serif;

  --radius-card: 16px;
  --radius-btn:  4px;
  --radius-pill: 9999px;

  --layout-px: clamp(1.25rem, 4vw, 2.5rem); /* scales 20px→40px with viewport width */

  --shadow-lightera: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-card:     0 2px 16px rgba(111, 0, 211, 0.08), 6px 6px 9px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 8px 32px rgba(111, 0, 211, 0.18), 8px 8px 16px rgba(0, 0, 0, 0.18);
  --shadow-btn:      0 2px 8px rgba(111, 0, 211, 0.25);

  --ease-lightera: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-base:   all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-shadow: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                       transform   200ms cubic-bezier(0.4, 0, 0.2, 1);

  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
  --spacing-88: 22rem;
  --spacing-sidebar: 260px;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    color: #31312f;
    background-color: #f2f0ee;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    color: #31312f;
    background-color: #f2f0ee;
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    color: #31312f;
    line-height: 1.25;
  }

  h1 { font-size: 2.25rem;  } /* 36px */
  h2 { font-size: 1.875rem; } /* 30px */
  h3 { font-size: 1.5rem;   } /* 24px */
  h4 { font-size: 1.25rem;  } /* 20px */
  h5 { font-size: 1.125rem; } /* 18px */
  h6 { font-size: 1rem;     } /* 16px */

  a {
    color: #6f00d3;
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  a:hover {
    color: #9e0fce;
    text-decoration: underline;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #6f00d3;
    outline-offset: 2px;
    border-radius: 2px;
  }

  h1:focus-visible,
  h2:focus-visible,
  h3:focus-visible,
  h4:focus-visible,
  h5:focus-visible,
  h6:focus-visible,
  p:focus-visible,
  span:focus-visible,
  div:focus-visible {
    outline: none;
  }

  .valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
  }

  .invalid {
    outline: 1px solid #dc2626;
  }

  .validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  .blazor-error-boundary {
    background-color: #b32121;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.8rem;
  }

  .blazor-error-boundary::after {
    content: "An error has occurred.";
  }

  #blazor-error-ui {
    color-scheme: light only;
    background: #fef9c3;
    border-top: 2px solid #6f00d3;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.9rem;
    color: #31312f;
  }

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: #6f00d3;
    background: none;
    border: none;
    line-height: 1;
  }

  ::-webkit-scrollbar        { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track  { background: #f2f0ee; }
  ::-webkit-scrollbar-thumb  { background: #b063ff; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #6f00d3; }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--color-lightera-primary);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    box-shadow: var(--shadow-btn);
    letter-spacing: 0.01em;
  }

  .btn-primary:hover {
    background-color: #b063ff;
    border-color: #b063ff;
    box-shadow: 0 4px 14px rgba(176, 99, 255, 0.4);
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
  }

  .btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-btn);
  }

  .btn-primary:disabled,
  .btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    color: var(--color-lightera-primary);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-lightera-primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    letter-spacing: 0.01em;
  }

  .btn-outline:hover {
    background-color: var(--color-lightera-primary);
    color: white;
    box-shadow: var(--shadow-btn);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .btn-outline:active {
    transform: translateY(0);
  }

  .btn-outline:disabled,
  .btn-outline[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--color-purple-100);
    color: var(--color-lightera-primary);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    border: 2px solid var(--color-purple-200);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    letter-spacing: 0.01em;
  }

  .btn-secondary:hover {
    background-color: var(--color-purple-200);
    color: var(--color-lightera-primary);
    border-color: var(--color-lightera-tertiary);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: #dc2626;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  }

  .btn-danger:hover {
    background-color: #b91c1c;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
  }

  .btn-danger:active {
    transform: translateY(0);
  }

  .btn-danger:disabled,
  .btn-danger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background-color: #16a34a;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
  }

  .btn-success:hover {
    background-color: #15803d;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    transform: translateY(-1px);
    color: white;
    text-decoration: none;
  }

  .btn-success:active {
    transform: translateY(0);
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--color-lightera-gray);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-base);
  }

  .btn-ghost:hover {
    background-color: var(--color-purple-50);
    color: var(--color-lightera-primary);
    text-decoration: none;
  }

  .btn-sm {
    padding: 0.3125rem 0.875rem;
    font-size: 0.8125rem;
  }

  .btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1.0625rem;
  }

  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: transparent;
    color: var(--color-lightera-gray);
    border-radius: var(--radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-base);
  }

  .btn-icon:hover {
    background-color: var(--color-purple-50);
    color: var(--color-lightera-primary);
  }

  .card {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    transition: var(--transition-shadow);
    border: 1px solid rgba(111, 0, 211, 0.06);
    position: relative;
    overflow: hidden;
  }

  .card-hover {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    transition: var(--transition-shadow);
    border: 1px solid rgba(111, 0, 211, 0.06);
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .card-hover:hover {
    box-shadow: var(--shadow-card-hover);
    transform: scale(1.04) translateY(-2px);
    border-color: rgba(111, 0, 211, 0.15);
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(111, 0, 211, 0.08);
  }

  .card-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-lightera-gray);
    margin: 0;
  }

  .card-subtitle {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.125rem;
    margin-bottom: 0;
  }

  .card-body {
    padding: 0;
  }

  .card-footer {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(111, 0, 211, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .card-accent {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    border: 1px solid rgba(111, 0, 211, 0.06);
    border-top: 4px solid var(--color-lightera-primary);
    transition: var(--transition-shadow);
  }

  .card-featured {
    background: linear-gradient(135deg, #6f00d3 0%, #9e0fce 100%);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 32px rgba(111, 0, 211, 0.35);
    padding: 1.5rem;
    color: white;
    transition: var(--transition-shadow);
  }

  .card-featured .card-title {
    color: white;
  }

  .card-stat {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(111, 0, 211, 0.06);
    transition: var(--transition-shadow);
  }

  .card-stat-value {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-lightera-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
  }

  .card-stat-label {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .card-stat-delta {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.375rem;
  }

  .card-stat-delta.positive { color: #16a34a; }
  .card-stat-delta.negative { color: #dc2626; }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
  }

  .badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .badge-shipped {
    background-color: #dbeafe;
    color: #1d4ed8;
  }

  .badge-available {
    background-color: #dcfce7;
    color: #15803d;
  }

  .badge-processing {
    background-color: #fef3c7;
    color: #b45309;
  }

  /* Invoiced — gray */
  .badge-invoiced {
    background-color: #f3f4f6;
    color: #4b5563;
  }

  /* GiveAway — green */
  .badge-giveaway {
    background-color: #cdf564;
    color: #31312f;
  }

  .badge-cancelled {
    background-color: #fee2e2;
    color: #b91c1c;
  }

  .badge-onhold {
    background-color: #ffedd5;
    color: #c2410c;
  }

  .badge-draft {
    background-color: var(--color-purple-100);
    color: var(--color-lightera-primary);
  }

  .badge-primary {
    background-color: var(--color-lightera-primary);
    color: white;
  }

  .badge-primary::before {
    background-color: var(--color-lightera-highlight);
  }

  .badge-highlight {
    background-color: var(--color-lightera-highlight);
    color: var(--color-lightera-gray);
  }

  .input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-lightera-gray);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
  }

  .input-label.required::after {
    content: ' *';
    color: #dc2626;
  }

  .input-field {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--color-lightera-gray);
    font-family: Arial, Helvetica, sans-serif;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow   150ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.5;
  }

  .input-field::placeholder {
    color: #9ca3af;
  }

  .input-field:hover {
    border-color: var(--color-lightera-tertiary);
  }

  .input-field:focus {
    outline: none;
    border-color: var(--color-lightera-primary);
    box-shadow: 0 0 0 3px rgba(111, 0, 211, 0.12);
  }

  .input-field:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
  }

  .input-field.input-error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  }

  .input-field.input-success {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
  }

  .select-field {
    display: block;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236f00d3'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.25rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--color-lightera-gray);
    font-family: Arial, Helvetica, sans-serif;
    appearance: none;
    cursor: pointer;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow   150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .select-field:focus {
    outline: none;
    border-color: var(--color-lightera-primary);
    box-shadow: 0 0 0 3px rgba(111, 0, 211, 0.12);
  }

  .textarea-field {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: white;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--color-lightera-gray);
    font-family: Arial, Helvetica, sans-serif;
    resize: vertical;
    min-height: 6rem;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow   150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .textarea-field:focus {
    outline: none;
    border-color: var(--color-lightera-primary);
    box-shadow: 0 0 0 3px rgba(111, 0, 211, 0.12);
  }

  .checkbox-field,
  .radio-field {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-lightera-primary);
    cursor: pointer;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .form-error {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .form-hint {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.125rem;
  }

  .input-search {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.625rem center;
    background-size: 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9375rem;
    color: var(--color-lightera-gray);
    font-family: Arial, Helvetica, sans-serif;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow   150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .input-search:focus {
    outline: none;
    border-color: var(--color-lightera-primary);
    box-shadow: 0 0 0 3px rgba(111, 0, 211, 0.12);
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition-base);
    border: 2px solid transparent;
    position: relative;
  }

  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
    text-decoration: none;
  }

  .nav-link.active,
  .nav-link-active {
    background-color: rgba(255, 255, 255, 0.18);
    color: white;
    border-left: 3px solid var(--color-lightera-highlight);
    padding-left: calc(0.875rem - 1px);
  }

  .nav-link-top {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-lightera-gray);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: var(--transition-base);
  }

  .nav-link-top:hover {
    color: var(--color-lightera-primary);
    text-decoration: none;
  }

  .nav-link-top.active {
    color: var(--color-lightera-primary);
    border-bottom-color: var(--color-lightera-primary);
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #6b7280;
  }

  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    text-decoration: none;
    transition: color 150ms ease;
  }

  .breadcrumb-item:hover {
    color: var(--color-lightera-primary);
    text-decoration: none;
  }

  .breadcrumb-item.active {
    color: var(--color-lightera-gray);
    font-weight: 500;
  }

  .breadcrumb-separator {
    color: #d1d5db;
    user-select: none;
  }

  .page-container {
    max-width: 95rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
  }

  .section-heading {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-lightera-gray);
    margin-bottom: 0.25rem;
  }

  .section-subheading {
    font-size: 0.9375rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
  }

  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .page-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-lightera-gray);
    margin: 0;
    line-height: 1.2;
    border: none;
    outline: none;
  }

  .page-subtitle {
    font-size: 0.9375rem;
    color: #6b7280;
    margin-top: 0.25rem;
  }

  .divider {
    border: none;
    border-top: 1px solid rgba(111, 0, 211, 0.1);
    margin: 1.5rem 0;
  }

  .divider-strong {
    border: none;
    border-top: 2px solid rgba(111, 0, 211, 0.15);
    margin: 1.5rem 0;
  }

  .table-lightera {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: white;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .table-lightera thead tr {
    background: linear-gradient(90deg, var(--color-lightera-primary) 0%, var(--color-lightera-secondary) 100%);
  }

  .table-lightera thead th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .table-lightera tbody tr {
    border-bottom: 1px solid rgba(111, 0, 211, 0.06);
    transition: background-color 150ms ease;
  }

  .table-lightera tbody tr:last-child {
    border-bottom: none;
  }

  .table-lightera tbody tr:nth-child(even) {
    background-color: #faf8ff;
  }

  .table-lightera tbody tr:hover {
    background-color: var(--color-purple-50);
  }

  .table-lightera tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-lightera-gray);
    vertical-align: middle;
  }

  .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border-left: 4px solid;
    margin-bottom: 1rem;
  }

  .alert-info {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
  }

  .alert-success {
    background-color: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
  }

  .alert-warning {
    background-color: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
  }

  .alert-error {
    background-color: #fef2f2;
    border-color: #dc2626;
    color: #b91c1c;
  }

  .alert-brand {
    background-color: var(--color-purple-50);
    border-color: var(--color-lightera-primary);
    color: var(--color-lightera-primary);
  }


  .spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(111, 0, 211, 0.2);
    border-top-color: var(--color-lightera-primary);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
  }

  .spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .skeleton {
    background: linear-gradient(90deg, #f0ebfa 25%, #e8dff7 50%, #f0ebfa 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
  }

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

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .modal {
    background-color: white;
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 32rem;
    width: 100%;
    overflow: hidden;
    animation: modal-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(90deg, var(--color-lightera-primary) 0%, var(--color-lightera-secondary) 100%);
    color: white;
  }

  .modal-header .modal-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin: 0;
  }

  .modal-body {
    padding: 1.5rem;
  }

  .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(111, 0, 211, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .tooltip-wrapper {
    position: relative;
    display: inline-flex;
  }

  .tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #31312f;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3125rem 0.625rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 50;
  }

  .tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  .tabs {
    display: flex;
    border-bottom: 2px solid rgba(111, 0, 211, 0.12);
    gap: 0;
    overflow-x: auto;
  }

  .tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
    text-decoration: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  .tab-item:hover {
    color: var(--color-lightera-primary);
    border-bottom-color: var(--color-lightera-tertiary);
    text-decoration: none;
  }

  .tab-item.active {
    color: var(--color-lightera-primary);
    border-bottom-color: var(--color-lightera-primary);
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
  }

  .empty-state-icon {
    width: 4rem;
    height: 4rem;
    background-color: var(--color-purple-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-lightera-primary);
  }

  .empty-state-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-lightera-gray);
    margin-bottom: 0.375rem;
  }

  .empty-state-description {
    font-size: 0.9375rem;
    color: #6b7280;
    max-width: 28rem;
    margin-bottom: 1.5rem;
  }

  .sidebar {
    background: linear-gradient(180deg, #1a0033 0%, #3d0070 45%, #6f00d3 100%);
    width: var(--spacing-sidebar);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .sidebar-brand {
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
  }

  .sidebar-brand-text {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.1875rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
  }

  .sidebar-brand-text span {
    color: var(--color-lightera-highlight);
  }

  .sidebar-section-label {
    padding: 1rem 1rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .sidebar-nav {
    padding: 0.5rem 0.75rem;
    flex: 1;
  }

  .app-topbar {
    background-color: white;
    border-bottom: 1px solid rgba(111, 0, 211, 0.1);
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(111, 0, 211, 0.08);
  }

  .hero-gradient {
    background: linear-gradient(135deg, #1a0033 0%, #3d0070 40%, #6f00d3 75%, #9e0fce 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
  }

  .hero-gradient::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(205, 245, 100, 0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-gradient .hero-highlight {
    color: var(--color-lightera-highlight);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-purple-100);
    color: var(--color-lightera-primary);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--color-purple-200);
    cursor: default;
    transition: var(--transition-base);
  }

  .chip:hover {
    background-color: var(--color-purple-200);
  }

  .chip-active {
    background-color: var(--color-lightera-primary);
    color: white;
    border-color: var(--color-lightera-primary);
  }

  .chip-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: rgba(111, 0, 211, 0.15);
    cursor: pointer;
    font-size: 0.625rem;
    line-height: 1;
    transition: background-color 150ms ease;
  }

  .chip-close:hover {
    background-color: rgba(111, 0, 211, 0.3);
  }

  .progress-bar-wrapper {
    background-color: var(--color-purple-100);
    border-radius: var(--radius-pill);
    height: 0.5rem;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-lightera-primary) 0%, var(--color-lightera-tertiary) 100%);
    border-radius: var(--radius-pill);
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.8125rem;
    background: linear-gradient(135deg, var(--color-lightera-primary), var(--color-lightera-secondary));
    color: white;
    flex-shrink: 0;
  }

  .avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
  .avatar-md { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
  .avatar-lg { width: 3rem;    height: 3rem;    font-size: 1.125rem; }
  .avatar-xl { width: 4rem;    height: 4rem;    font-size: 1.375rem; }

  .filter-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
    background-color: white;
    border-radius: 8px;
    border: 1px solid rgba(111, 0, 211, 0.08);
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(111, 0, 211, 0.06);
  }

  .text-gradient {
    background: linear-gradient(135deg, var(--color-lightera-primary), var(--color-lightera-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .stack-sm { gap: 0.5rem; }
  .stack-lg { gap: 1.5rem; }
  .stack-xl { gap: 2rem;   }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .cluster-sm { gap: 0.25rem; }
  .cluster-lg { gap: 0.75rem; }

  .grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
  }

  .grid-auto-fill-lg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
  }

  .surface-0   { background-color: var(--color-lightera-offwhite); }
  .surface-1   { background-color: white; }
  .surface-brand { background: linear-gradient(135deg, var(--color-lightera-primary) 0%, var(--color-lightera-secondary) 100%); }

  .accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--color-lightera-primary) 0%, var(--color-lightera-highlight) 100%);
    border-radius: var(--radius-pill);
  }

  .page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
  }

  @keyframes spin-once {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .spin-icon {
    animation: spin-once 800ms linear infinite;
  }

  .btn-spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-once 600ms linear infinite;
    flex-shrink: 0;
  }

  .workflow-stepper {
    background: white;
    border: 1px solid rgba(111, 0, 211, 0.1);
    border-radius: var(--radius-card);
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 6px rgba(111, 0, 211, 0.06);
  }

  .stepper-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1rem;
  }

  .stepper-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 150ms ease;
    text-decoration: none;
    cursor: default;
  }

  .stepper-step-active {
    background-color: var(--color-lightera-primary);
    color: white;
  }

  .stepper-step-inactive {
    background-color: #f3f4f6;
    color: #9ca3af;
  }

  .stepper-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(255,255,255,0.2);
  }

  .stepper-step-active .stepper-step-number {
    background-color: rgba(255,255,255,0.25);
    color: white;
  }

  .stepper-step-inactive .stepper-step-number {
    background-color: #e5e7eb;
    color: #6b7280;
  }

  a.stepper-step:hover {
    cursor: pointer;
  }

  a.stepper-step-inactive:hover {
    background-color: #e9eaeb;
    color: #6b7280;
  }

  .stepper-connector {
    flex: 1;
    padding: 0 0.5rem;
  }

  .stepper-connector-line {
    height: 2px;
    background-color: #e5e7eb;
    border-radius: 1px;
    transition: background-color 300ms ease;
  }

  .stepper-connector-active {
    background-color: var(--color-lightera-primary);
  }

  /* Status legend row */
  .stepper-status-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(111, 0, 211, 0.07);
  }

  .stepper-status-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 150ms ease;
  }

  .stepper-status-active {
    background-color: #f5f0ff;
    border: 1.5px solid rgba(111, 0, 211, 0.2);
    color: var(--color-lightera-primary);
  }

  .stepper-status-inactive {
    background-color: #f9fafb;
    border: 1.5px solid #e5e7eb;
    color: #9ca3af;
  }

  .stepper-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .dot-shipped    { background-color: #3b82f6; }
  .dot-available  { background-color: #22c55e; }
  .dot-processing { background-color: #f59e0b; }
  .dot-invoiced   { background-color: #9ca3af; }

  .stepper-status-indicator {
    display: inline-flex;
    align-items: center;
    color: var(--color-lightera-primary);
  }

  .inv-grid-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
  }

  .inv-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 10rem;
    max-width: 18rem;
  }

  .inv-filter-input {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
  }

  .inv-filter-clear {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
  }

  /* Selection summary bar */
  .inv-selection-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background-color: #f0e9ff;
    border: 1.5px solid rgba(111, 0, 211, 0.2);
    border-radius: 8px;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    color: var(--color-lightera-primary);
    font-weight: 500;
  }

  .inv-selection-bar svg {
    flex-shrink: 0;
  }

  .col-checkbox {
    width: 2.5rem;
    text-align: center;
  }

  .inv-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--color-lightera-primary);
    border-radius: 3px;
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeInBackdrop 200ms ease forwards;
  }

  @keyframes fadeInBackdrop {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .modal-card {
    background: white;
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(111, 0, 211, 0.15);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUpModal 250ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes slideUpModal {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .confirm-dialog-card {
    max-width: 560px;
  }

  .modal-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(111, 0, 211, 0.08);
    position: relative;
  }

  .modal-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-lightera-primary), var(--color-lightera-secondary));
    color: white;
    flex-shrink: 0;
  }

  .modal-header-icon.icon-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
  }

  .modal-header-icon.icon-danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
  }

  .modal-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-lightera-gray);
    margin: 0;
    line-height: 1.3;
  }

  .modal-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.2rem;
  }

  .modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, background-color 150ms ease;
  }

  .modal-close-btn:hover {
    color: var(--color-lightera-gray);
    background-color: #f3f4f6;
  }

  .modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(111, 0, 211, 0.08);
    background-color: #fafafa;
  }

  .modal-processing {
    padding: 1rem 0;
  }

  .modal-items-table-wrap,
  .modal-results-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(111, 0, 211, 0.08);
  }

  .modal-items-table,
  .modal-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
  }

  .modal-items-table thead tr,
  .modal-results-table thead tr {
    background: linear-gradient(90deg, var(--color-lightera-primary) 0%, var(--color-lightera-secondary) 100%);
  }

  .modal-items-table thead th,
  .modal-results-table thead th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .modal-items-table tbody tr,
  .modal-results-table tbody tr {
    border-bottom: 1px solid rgba(111, 0, 211, 0.06);
    transition: background-color 100ms ease;
  }

  .modal-items-table tbody tr:last-child,
  .modal-results-table tbody tr:last-child {
    border-bottom: none;
  }

  .modal-items-table tbody tr:nth-child(even),
  .modal-results-table tbody tr:nth-child(even) {
    background-color: #faf8ff;
  }

  .modal-items-table tbody td,
  .modal-results-table tbody td {
    padding: 0.625rem 0.875rem;
    color: var(--color-lightera-gray);
    vertical-align: middle;
  }

  .modal-row-num {
    color: #9ca3af;
    font-size: 0.8125rem;
    width: 2rem;
    text-align: center;
  }

  .modal-container-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--color-lightera-primary);
    font-weight: 500;
  }

  .result-row-success { background-color: #f0fdf4 !important; }
  .result-row-error   { background-color: #fef2f2 !important; }

  .result-container-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .result-status {
    width: 6rem;
    white-space: nowrap;
  }

  .result-icon-success {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #16a34a;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .result-icon-error {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #dc2626;
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .result-message {
    font-size: 0.8125rem;
    color: #6b7280;
  }

  .error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 0.75rem;
  }

  .error-state svg {
    color: #f87171;
  }

  .error-state-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-lightera-gray);
  }

  .error-state-message {
    font-size: 0.875rem;
    color: #6b7280;
    max-width: 36rem;
  }

  .info-panel {
    border: 1px solid rgba(111, 0, 211, 0.1);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: white;
  }

  .info-panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-lightera-primary);
    text-align: left;
    transition: background-color 150ms ease;
  }

  .info-panel-toggle:hover {
    background-color: #faf8ff;
  }

  .info-panel-chevron {
    margin-left: auto;
    transition: transform 200ms ease;
  }

  .info-panel-chevron.rotate-180 {
    transform: rotate(180deg);
  }

  .info-panel-body {
    padding: 1.25rem;
    border-top: 1px solid rgba(111, 0, 211, 0.08);
    background-color: #faf8ff;
    animation: slideDown 200ms ease forwards;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .info-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.5rem;
  }

  .info-panel-section-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-lightera-primary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .info-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .info-status-item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    align-items: start;
    gap: 0.5rem;
    font-size: 0.8625rem;
    line-height: 1.5;
    color: #4b5563;
  }

  .info-status-item dt {
    font-weight: 500;
  }

  .info-steps-list {
    list-style: decimal;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
  }

  .info-contact,
  .info-note {
    font-size: 0.8375rem;
    color: #6b7280;
  }

  .info-link {
    color: var(--color-lightera-primary);
    text-decoration: underline;
    font-weight: 500;
    transition: color 150ms ease;
  }

  .info-link:hover {
    color: var(--color-lightera-secondary);
  }

  .page-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(111, 0, 211, 0.07);
  }

  .page-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-lightera-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    transition: background-color 150ms ease, color 150ms ease;
    border: 1px solid rgba(111, 0, 211, 0.15);
  }

  .page-nav-link:hover {
    background-color: #f0e9ff;
    border-color: rgba(111, 0, 211, 0.3);
  }

  .tabs-container {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(111, 0, 211, 0.1);
    margin-bottom: 1.5rem;
    overflow-x: auto;
  }

  .tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    transition: color 150ms ease, border-color 150ms ease;
  }

  .tab-button:hover {
    color: var(--color-lightera-primary);
    background-color: #faf8ff;
  }

  .tab-button-active {
    color: var(--color-lightera-primary);
    border-bottom-color: var(--color-lightera-primary);
    background-color: #faf8ff;
  }

  .admin-form-card {
    padding: 1.5rem;
  }

  .admin-form-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(111, 0, 211, 0.08);
  }

  .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .form-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .form-field-group.col-span-2 {
    grid-column: 1 / -1;
  }

  .field-error {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.2rem;
  }

  .field-hint {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.2rem;
  }

  .admin-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(111, 0, 211, 0.08);
  }

  .input-password-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
  }

  .input-password-wrap .input-field {
    padding-right: 2.5rem;
    flex: 1;
  }

  .input-password-toggle {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease;
  }

  .input-password-toggle:hover {
    color: var(--color-lightera-primary);
  }

  .input-success {
    border-color: #22c55e;
  }

  .input-success:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
  }

  .admin-search-card {
    padding: 1.5rem;
  }

  .admin-search-header {
    margin-bottom: 1.25rem;
  }

  .admin-search-bar,
  .admin-lookup-bar {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .admin-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 14rem;
  }

  .admin-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    pointer-events: none;
  }

  .admin-search-field {
    padding-left: 2.25rem;
    width: 100%;
  }

  .search-result-count {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
  }

  .col-actions {
    width: 7rem;
    text-align: center;
  }

  .empty-state,
  .search-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: #9ca3af;
  }

  .empty-state svg,
  .search-prompt svg {
    color: #d1d5db;
  }

  .empty-state p,
  .search-prompt p {
    font-size: 0.9375rem;
    max-width: 32rem;
  }

  .activate-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .activate-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    border: 1.5px solid rgba(111, 0, 211, 0.08);
    background: white;
    transition: box-shadow 150ms ease, border-color 150ms ease;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .activate-user-row:hover {
    box-shadow: 0 2px 8px rgba(111, 0, 211, 0.08);
    border-color: rgba(111, 0, 211, 0.15);
  }

  .user-inactive {
    background-color: #fafafa;
    border-color: #e5e7eb;
    opacity: 0.8;
  }

  .activate-user-info {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
  }

  .activate-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-lightera-primary), var(--color-lightera-secondary));
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
    font-family: 'Poppins', Arial, sans-serif;
  }

  .activate-user-details {
    min-width: 0;
  }

  .activate-user-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-lightera-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .activate-user-meta {
    font-size: 0.8125rem;
    color: #6b7280;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.1rem;
  }

  .activate-meta-sep {
    color: #d1d5db;
  }

  .activate-user-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .mr-3 { margin-right: 0.75rem; }

  .admin-activate-card {
    padding: 1.5rem;
  }

  @media (max-width: 640px) {
    .page-header {
      flex-direction: column;
    }

    .page-header-actions {
      width: 100%;
      justify-content: flex-start;
    }

    .inv-grid-filters {
      flex-direction: column;
    }

    .inv-filter-group {
      max-width: 100%;
    }

    .admin-form-grid {
      grid-template-columns: 1fr;
    }

    .form-field-group.col-span-2 {
      grid-column: auto;
    }

    .modal-card {
      max-height: 95vh;
    }

    .tabs-container {
      gap: 0;
    }

    .tab-button {
      padding: 0.625rem 0.875rem;
      font-size: 0.8125rem;
    }

    .activate-user-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .activate-user-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }

  .font-heading { font-family: 'Poppins', Arial, sans-serif; }
  .font-body    { font-family: 'Roboto', Arial, sans-serif; }
  .font-sans    { font-family: Arial, Helvetica, sans-serif; }

  .text-lightera-primary   { color: var(--color-lightera-primary);   }
  .text-lightera-secondary { color: var(--color-lightera-secondary); }
  .text-lightera-tertiary  { color: var(--color-lightera-tertiary);  }
  .text-lightera-highlight { color: var(--color-lightera-highlight); }
  .text-lightera-gray      { color: var(--color-lightera-gray);      }
  .text-lightera-offwhite  { color: var(--color-lightera-offwhite);  }

  .bg-lightera-primary   { background-color: var(--color-lightera-primary);   }
  .bg-lightera-secondary { background-color: var(--color-lightera-secondary); }
  .bg-lightera-tertiary  { background-color: var(--color-lightera-tertiary);  }
  .bg-lightera-highlight { background-color: var(--color-lightera-highlight); }
  .bg-lightera-offwhite  { background-color: var(--color-lightera-offwhite);  }
  .bg-lightera-gray      { background-color: var(--color-lightera-gray);      }

  .bg-brand-gradient {
    background: linear-gradient(135deg, var(--color-lightera-primary) 0%, var(--color-lightera-secondary) 100%);
  }

  .bg-sidebar-gradient {
    background: linear-gradient(180deg, #1a0033 0%, #3d0070 45%, #6f00d3 100%);
  }

  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shadow-lightera  { box-shadow: var(--shadow-lightera); }
  .shadow-card      { box-shadow: var(--shadow-card); }
  .shadow-card-hover { box-shadow: var(--shadow-card-hover); }
  .shadow-btn       { box-shadow: var(--shadow-btn); }

  .rounded-card { border-radius: var(--radius-card); }
  .rounded-btn  { border-radius: var(--radius-btn); }

  .cols-1  { grid-template-columns: repeat(1, 1fr); }
  .cols-2  { grid-template-columns: repeat(2, 1fr); }
  .cols-3  { grid-template-columns: repeat(3, 1fr); }
  .cols-4  { grid-template-columns: repeat(4, 1fr); }

  .transition-base   { transition: var(--transition-base); }
  .transition-shadow { transition: var(--transition-shadow); }

  @media print {
    header, footer, nav, .no-print, .topbar, .topbar-mobile-nav,
    .sidebar, .app-topbar, .toast-container, #blazor-error-ui,
    .kanban-actions, .page-header-actions { display: none !important; }

    .layout-main, .page-container { max-width: 100% !important; padding: 0 !important; }

    .card {
      box-shadow: none !important;
      border: 1px solid #ddd !important;
    }

    .quickgrid, table { font-size: 9pt; }

    .badge-shipped, .badge-available, .badge-processing, .badge-invoiced,
    .badge-draft, .badge-primary, .badge-success, .badge-warning, .badge-error {
      border: 1px solid currentColor !important;
      background: transparent !important;
    }

    .kanban-board-wrapper { page-break-after: always; }

    a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
    a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  }

/* Tailwind utility shims — retain class names used in Razor files */
.w-4  { width:  1rem; }
.h-4  { height: 1rem; }
.w-6  { width:  1.5rem; }
.h-6  { height: 1.5rem; }
.py-8  { padding-top: 2rem;  padding-bottom: 2rem; }
.py-16 { padding-top: 4rem;  padding-bottom: 4rem; }

/* Override Bootstrap breadcrumb pseudo-element separator —
   Lightera uses an explicit <span class="breadcrumb-separator"> element instead */
.breadcrumb-item + .breadcrumb-item::before { content: none; }

/* Override Bootstrap focus ring color to match Lightera brand */
:root { --bs-focus-ring-color: rgba(111, 0, 211, 0.25); }