/* Generated from button.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --button-disabled-opacity: 0.5;
  --button-focus-outlineOffset: 0.125rem;
  --button-focus-outlineWidth: 0.125rem;
  --button-icon-height: 1.25rem;
  --button-icon-width: 1.25rem;
  --button-outline-background: #FFFFFF;
  --button-outline-border: #0077C8;
  --button-outline-hoverBackground: #0077C8;
  --button-outline-hoverBorder: #FFFFFF;
  --button-outline-hoverText: #FFFFFF;
  --button-outline-text: #0077C8;
  --button-primary-background: #FFFFFF;
  --button-primary-border: #0077C8;
  --button-primary-hoverBackground: #0077C8;
  --button-primary-hoverBorder: #FFFFFF;
  --button-primary-hoverText: #FFFFFF;
  --button-primary-text: #0077C8;
  --button-squareIcon-padding: 0.3125rem;
  --button-universal-borderRadius: 0.3125rem;
  --button-universal-borderStyle: solid;
  --button-universal-borderWidth: 0.0625rem;
  --button-universal-fontFamily: 'Raleway', sans-serif;
  --button-universal-fontSize: 1rem;
  --button-universal-fontStyle: uppercase;
  --button-universal-fontWeight: 400;
  --button-universal-gap: 0.5rem;
  --button-universal-padding: 0.625rem 0.9375rem;
  --button-universal-transition: all 0.2s ease;
}

[data-theme="dark"] {
  --button-disabled-opacity: 0.5;
  --button-focus-outlineOffset: 0.125rem;
  --button-focus-outlineWidth: 0.125rem;
  --button-icon-height: 1.25rem;
  --button-icon-width: 1.25rem;
  --button-outline-background: #0077C8;
  --button-outline-border: #FFFFFF;
  --button-outline-hoverBackground: #FFFFFF;
  --button-outline-hoverBorder: #0077C8;
  --button-outline-hoverText: #0077C8;
  --button-outline-text: #FFFFFF;
  --button-primary-background: #0077C8;
  --button-primary-border: #FFFFFF;
  --button-primary-hoverBackground: #FFFFFF;
  --button-primary-hoverBorder: #0077C8;
  --button-primary-hoverText: #0077C8;
  --button-primary-text: #FFFFFF;
  --button-squareIcon-padding: 0.3125rem;
  --button-universal-borderRadius: 0.3125rem;
  --button-universal-borderStyle: solid;
  --button-universal-borderWidth: 0.0625rem;
  --button-universal-fontFamily: 'Raleway', sans-serif;
  --button-universal-fontSize: 1rem;
  --button-universal-fontStyle: uppercase;
  --button-universal-fontWeight: 400;
  --button-universal-gap: 0.5rem;
  --button-universal-padding: 0.625rem 0.9375rem;
  --button-universal-transition: all 0.2s ease;
}/**
 * ThemedButton Styles
 * 
 * Uses bundle slots: var(--button-*)
 * No hardcoded values. No direct token references.
 * Mode (light/dark) handled by CSS generator at build time.
 */

/* ═══════════════════════════════════════════════════════════════
   BASE BUTTON STYLES
   ═══════════════════════════════════════════════════════════════ */

.themed-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-universal-gap);
  outline: none;
  line-height: 1;
  cursor: pointer;
  transition: var(--button-universal-transition);

  /* Universal properties from bundle */
  padding: var(--button-universal-padding);
  border-radius: var(--button-universal-borderRadius);
  border-width: var(--button-universal-borderWidth);
  border-style: var(--button-universal-borderStyle);
  font-size: var(--button-universal-fontSize);
  font-family: var(--button-universal-fontFamily);
  font-weight: var(--button-universal-fontWeight);
  text-transform: var(--button-universal-fontStyle);
}

.themed-button:focus-visible {
  outline: var(--button-focus-outlineWidth) solid currentColor;
  outline-offset: var(--button-focus-outlineOffset);
}

.themed-button:disabled {
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
}

/* ═══════════════════════════════════════════════════════════════
   PRIMARY VARIANT
   ═══════════════════════════════════════════════════════════════ */

.themed-button-primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
}

.themed-button-primary:hover:not(:disabled) {
  background-color: var(--button-primary-hoverBackground);
  color: var(--button-primary-hoverText);
  border-color: var(--button-primary-hoverBorder);
}

/* ═══════════════════════════════════════════════════════════════
   SECONDARY VARIANT (same as primary for now)
   ═══════════════════════════════════════════════════════════════ */

.themed-button-secondary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
}

.themed-button-secondary:hover:not(:disabled) {
  background-color: var(--button-primary-hoverBackground);
  color: var(--button-primary-hoverText);
  border-color: var(--button-primary-hoverBorder);
}

/* ═══════════════════════════════════════════════════════════════
   OUTLINE VARIANT
   ═══════════════════════════════════════════════════════════════ */

.themed-button-outline {
  background-color: var(--button-outline-background);
  color: var(--button-outline-text);
  border-color: var(--button-outline-border);
}

.themed-button-outline:hover:not(:disabled) {
  background-color: var(--button-outline-hoverBackground);
  color: var(--button-outline-hoverText);
  border-color: var(--button-outline-hoverBorder);
}

/* ═══════════════════════════════════════════════════════════════
   ICON STYLES
   ═══════════════════════════════════════════════════════════════ */

.themed-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-icon-width);
  height: var(--button-icon-height);
}

.themed-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* ═══════════════════════════════════════════════════════════════
   SIZE VARIANTS
   Icon-only buttons (square sizes)
   ═══════════════════════════════════════════════════════════════ */

.themed-button-square-small,
.themed-button-square-icon {
  aspect-ratio: 1;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATE
   Used for async operations (e.g., refresh button)
   ═══════════════════════════════════════════════════════════════ */

.themed-button-loading {
  cursor: wait;
}

.themed-button-loading .themed-button-icon {
  animation: themed-button-spin 600ms linear infinite;
}

@keyframes themed-button-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Generated from authgate.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --authgate-bar-actionsGap: 0.3125rem;
  --authgate-bar-background: #FFFFFF;
  --authgate-bar-border: #0077C8;
  --authgate-bar-borderStyle: solid;
  --authgate-bar-borderWidth: 0.0625rem;
  --authgate-bar-fontFamily: 'Raleway', sans-serif;
  --authgate-bar-fontSize: 0.875rem;
  --authgate-bar-fontStyle: uppercase;
  --authgate-bar-fontWeight: 400;
  --authgate-bar-padding: 0.3125rem 0.625rem;
  --authgate-bar-text: #0077C8;
  --authgate-error-box-background: #0077C8;
  --authgate-error-box-border: #FFFFFF;
  --authgate-error-box-borderRadius: 0.3125rem;
  --authgate-error-box-borderStyle: solid;
  --authgate-error-box-borderWidth: 0.0625rem;
  --authgate-error-box-fontFamily: 'Raleway', sans-serif;
  --authgate-error-box-fontSize: 1.625rem;
  --authgate-error-box-fontStyle: uppercase;
  --authgate-error-box-fontWeight: 400;
  --authgate-error-box-maxWidth: 30rem;
  --authgate-error-box-padding: 1.5625rem 1.25rem;
  --authgate-error-box-paragraph-marginBottom: 1rem;
  --authgate-error-box-text: #FFFFFF;
  --authgate-error-page-background: #FFFFFF;
  --authgate-loading-background: #FFFFFF;
  --authgate-loading-fontFamily: 'Raleway', sans-serif;
  --authgate-loading-fontSize: 1.625rem;
  --authgate-loading-fontStyle: uppercase;
  --authgate-loading-fontWeight: 400;
  --authgate-loading-padding: 0.625rem;
  --authgate-loading-text: #0077C8;
  --authgate-unauth-box-background: #0077C8;
  --authgate-unauth-box-border: #FFFFFF;
  --authgate-unauth-box-borderRadius: 0.3125rem;
  --authgate-unauth-box-borderStyle: solid;
  --authgate-unauth-box-borderWidth: 0.0625rem;
  --authgate-unauth-box-fontFamily: 'Raleway', sans-serif;
  --authgate-unauth-box-fontSize: 1.625rem;
  --authgate-unauth-box-fontStyle: uppercase;
  --authgate-unauth-box-fontWeight: 400;
  --authgate-unauth-box-maxWidth: 30rem;
  --authgate-unauth-box-padding: 1.5625rem 1.25rem;
  --authgate-unauth-box-paragraph-marginBottom: 1rem;
  --authgate-unauth-box-text: #FFFFFF;
  --authgate-unauth-page-background: #FFFFFF;
}

[data-theme="dark"] {
  --authgate-bar-actionsGap: 0.3125rem;
  --authgate-bar-background: #0077C8;
  --authgate-bar-border: #FFFFFF;
  --authgate-bar-borderStyle: solid;
  --authgate-bar-borderWidth: 0.0625rem;
  --authgate-bar-fontFamily: 'Raleway', sans-serif;
  --authgate-bar-fontSize: 0.875rem;
  --authgate-bar-fontStyle: uppercase;
  --authgate-bar-fontWeight: 400;
  --authgate-bar-padding: 0.3125rem 0.625rem;
  --authgate-bar-text: #FFFFFF;
  --authgate-error-box-background: #FFFFFF;
  --authgate-error-box-border: #0077C8;
  --authgate-error-box-borderRadius: 0.3125rem;
  --authgate-error-box-borderStyle: solid;
  --authgate-error-box-borderWidth: 0.0625rem;
  --authgate-error-box-fontFamily: 'Raleway', sans-serif;
  --authgate-error-box-fontSize: 1.625rem;
  --authgate-error-box-fontStyle: uppercase;
  --authgate-error-box-fontWeight: 400;
  --authgate-error-box-maxWidth: 30rem;
  --authgate-error-box-padding: 1.5625rem 1.25rem;
  --authgate-error-box-paragraph-marginBottom: 1rem;
  --authgate-error-box-text: #0077C8;
  --authgate-error-page-background: #0077C8;
  --authgate-loading-background: #0077C8;
  --authgate-loading-fontFamily: 'Raleway', sans-serif;
  --authgate-loading-fontSize: 1.625rem;
  --authgate-loading-fontStyle: uppercase;
  --authgate-loading-fontWeight: 400;
  --authgate-loading-padding: 0.625rem;
  --authgate-loading-text: #FFFFFF;
  --authgate-unauth-box-background: #FFFFFF;
  --authgate-unauth-box-border: #0077C8;
  --authgate-unauth-box-borderRadius: 0.3125rem;
  --authgate-unauth-box-borderStyle: solid;
  --authgate-unauth-box-borderWidth: 0.0625rem;
  --authgate-unauth-box-fontFamily: 'Raleway', sans-serif;
  --authgate-unauth-box-fontSize: 1.625rem;
  --authgate-unauth-box-fontStyle: uppercase;
  --authgate-unauth-box-fontWeight: 400;
  --authgate-unauth-box-maxWidth: 30rem;
  --authgate-unauth-box-padding: 1.5625rem 1.25rem;
  --authgate-unauth-box-paragraph-marginBottom: 1rem;
  --authgate-unauth-box-text: #0077C8;
  --authgate-unauth-page-background: #0077C8;
}/**
 * AuthGate Styles
 * 
 * Uses bundle slots: var(--authgate-*)
 * No hardcoded values. No direct token references.
 * Mode (light/dark) handled by CSS generator at build time.
 */

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */

.authgate-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--authgate-loading-background);
  color: var(--authgate-loading-text);
  padding: var(--authgate-loading-padding);
  font-size: var(--authgate-loading-fontSize);
  font-family: var(--authgate-loading-fontFamily);
  font-weight: var(--authgate-loading-fontWeight);
  text-transform: var(--authgate-loading-fontStyle);
}

/* ═══════════════════════════════════════════════════════════════
   ERROR SCREEN
   ═══════════════════════════════════════════════════════════════ */

.authgate-error-page {
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--authgate-error-page-background);
  margin: 0;
  padding: 0;
}

.authgate-error-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--authgate-error-box-padding);
  border-radius: var(--authgate-error-box-borderRadius);
  border-width: var(--authgate-error-box-borderWidth);
  border-style: var(--authgate-error-box-borderStyle);
  border-color: var(--authgate-error-box-border);
  background: var(--authgate-error-box-background);
  color: var(--authgate-error-box-text);
  max-width: var(--authgate-error-box-maxWidth);
  font-size: var(--authgate-error-box-fontSize);
  font-family: var(--authgate-error-box-fontFamily);
  font-weight: var(--authgate-error-box-fontWeight);
  text-transform: var(--authgate-error-box-fontStyle);
}

.authgate-error-box p {
  margin-bottom: var(--authgate-error-box-paragraph-marginBottom);
  white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════════════
   UNAUTHENTICATED SCREEN
   ═══════════════════════════════════════════════════════════════ */

.authgate-unauth-page {
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--authgate-unauth-page-background);
  margin: 0;
  padding: 0;
}

.authgate-unauth-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--authgate-unauth-box-padding);
  border-radius: var(--authgate-unauth-box-borderRadius);
  border-width: var(--authgate-unauth-box-borderWidth);
  border-style: var(--authgate-unauth-box-borderStyle);
  border-color: var(--authgate-unauth-box-border);
  background: var(--authgate-unauth-box-background);
  color: var(--authgate-unauth-box-text);
  max-width: var(--authgate-unauth-box-maxWidth);
  width: 100%;
  font-size: var(--authgate-unauth-box-fontSize);
  font-family: var(--authgate-unauth-box-fontFamily);
  font-weight: var(--authgate-unauth-box-fontWeight);
  text-transform: var(--authgate-unauth-box-fontStyle);
}

.authgate-unauth-box p {
  margin-bottom: var(--authgate-unauth-box-paragraph-marginBottom);
  white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH BAR (authenticated state)
   ═══════════════════════════════════════════════════════════════ */

.authgate-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

.authgate-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--authgate-bar-padding);
  background: var(--authgate-bar-background);
  color: var(--authgate-bar-text);
  border-bottom-width: var(--authgate-bar-borderWidth);
  border-bottom-style: var(--authgate-bar-borderStyle);
  border-bottom-color: var(--authgate-bar-border);
  font-size: var(--authgate-bar-fontSize);
  font-family: var(--authgate-bar-fontFamily);
  font-weight: var(--authgate-bar-fontWeight);
  text-transform: var(--authgate-bar-fontStyle);
}

.authgate-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--authgate-bar-actionsGap);
}

.authgate-content {
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */

@media print {
  .authgate-bar {
    display: none !important;
  }

  .authgate-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }

  .authgate-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
  }
}
.content-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-background {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--component-adminPortal-contentArea-borderRadius);
  overflow: auto;
  padding: var(--component-adminPortal-contentArea-padding-top) var(--component-adminPortal-contentArea-padding-right) var(--component-adminPortal-contentArea-padding-bottom) var(--component-adminPortal-contentArea-padding-left);
}

/* Content area background by mode */
[data-theme="light"] .content-background {
  background: var(--component-adminPortal-page-background-light);
}

[data-theme="dark"] .content-background {
  background: var(--component-adminPortal-page-background-dark);
}

/* Print styles - hide content area (popup overlay takes over) */
@media print {
  .content-area {
    display: none !important;
  }
}
/* FilterBar - Layout container for filter buttons */
/* Generated from filterbar.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
:root {
  --filterbar-gap: 0.625rem;
  --filterbar-padding-top: 0.9375rem;
  --filterbar-padding-right: 0;
  --filterbar-padding-bottom: 0.9375rem;
  --filterbar-padding-left: 0;
  --filterbar-margin-bottom: 0.9375rem;
}
/* FilterButton - Text-style filter buttons with underline states */
/* Used inside FilterBar for category filtering */
/* Generated from filterbutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #0077C8;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #0077C8;
  --filterbutton-textTransform: uppercase;
}
[data-theme="dark"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #FFFFFF;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #FFFFFF;
  --filterbutton-textTransform: uppercase;
}
.filter-button {
  padding: var(--filterbutton-padding-top) var(--filterbutton-padding-right) var(--filterbutton-padding-bottom) var(--filterbutton-padding-left);
  border: none;
  background: var(--filterbutton-background);
  color: var(--filterbutton-text);
  cursor: pointer;
  font-family: var(--filterbutton-fontFamily);
  font-weight: var(--filterbutton-fontWeight);
  font-size: var(--filterbutton-fontSize);
  text-transform: var(--filterbutton-textTransform);
  margin-left: var(--filterbutton-margin-left);
  text-decoration: none;
  transition: all 0.2s ease;
}
.filter-button:hover {
  background: var(--filterbutton-hover-background);
  color: var(--filterbutton-hover-text);
  text-decoration: var(--filterbutton-hover-textdecoration);
}
.filter-button.active {
  background: var(--filterbutton-hover-background);
  color: var(--filterbutton-hover-text);
  text-decoration: var(--filterbutton-active-textdecoration);
}
.filter-bar {
  display: flex;
  gap: var(--filterbar-gap);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--filterbar-padding-top) var(--filterbar-padding-right) var(--filterbar-padding-bottom) var(--filterbar-padding-left);
  margin-bottom: var(--filterbar-margin-bottom);
}
/* Filter bar items (buttons, dropdowns, etc.) */
.filter-bar > * {
  flex-shrink: 0;
}
@media (max-width: 48rem) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-bar > * {
    width: 100%;
  }
}
.search-bar {
  position: relative;
  width: 100%;
  margin-bottom: var(--component-adminPortal-searchBar-marginBottom);
}

.search-bar-input {
  width: 100%;
  padding: var(--component-adminPortal-searchBar-padding-vertical) var(--component-adminPortal-searchBar-padding-horizontal);
  padding-right: var(--component-adminPortal-searchBar-padding-right);
  border-radius: var(--component-adminPortal-searchBar-borderRadius);
  border-width: var(--component-adminPortal-searchBar-borderWidth);
  border-style: var(--component-adminPortal-searchBar-borderStyle);
  font-size: var(--component-adminPortal-searchBar-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  transition: all var(--component-adminPortal-transition-duration-default) ease;
}

[data-theme="light"] .search-bar-input {
  background: var(--component-adminPortal-searchBar-color-background-light);
  color: var(--component-adminPortal-searchBar-color-text-light);
  border-color: var(--component-adminPortal-searchBar-color-border-light);
}

[data-theme="dark"] .search-bar-input {
  background: var(--component-adminPortal-searchBar-color-background-dark);
  color: var(--component-adminPortal-searchBar-color-text-dark);
  border-color: var(--component-adminPortal-searchBar-color-border-dark);
}

.search-bar-input:focus {
  outline: none;
  border-width: var(--component-adminPortal-searchBar-borderWidth-focus);
}

[data-theme="light"] .search-bar-input:focus {
  border-color: var(--component-adminPortal-searchBar-color-focus-border-light);
}

[data-theme="dark"] .search-bar-input:focus {
  border-color: var(--component-adminPortal-searchBar-color-focus-border-dark);
}

[data-theme="light"] .search-bar-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-placeholder-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

[data-theme="dark"] .search-bar-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-placeholder-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

.search-bar-clear {
  position: absolute;
  right: var(--component-adminPortal-searchBar-clearButton-right);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-transparent);
  border: none;
  cursor: pointer;
  padding: var(--component-adminPortal-searchBar-clearButton-padding);
  border-radius: var(--component-adminPortal-searchBar-clearButton-borderRadius);
  font-size: var(--component-adminPortal-searchBar-clearButton-fontSize);
  line-height: 1;
  transition: all var(--component-adminPortal-transition-duration-default) ease;
}

[data-theme="light"] .search-bar-clear {
  color: var(--component-adminPortal-page-text-light);
}

[data-theme="dark"] .search-bar-clear {
  color: var(--component-adminPortal-page-text-dark);
}

[data-theme="light"] .search-bar-clear:hover {
  background: var(--component-adminPortal-page-background-light);
}

[data-theme="dark"] .search-bar-clear:hover {
  background: var(--component-adminPortal-page-background-dark);
}

@media (max-width: 48rem) {
  .search-bar-input {
    font-size: var(--component-adminPortal-searchBar-fontSize-mobile);
  }
}
/* Generated from card.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --card-body-fontSize: 1rem;
  --card-heading-fontSize: 1.25rem;
  --card-heading-fontWeight: 400;
  --card-heading-marginBottom: 0.625rem;
  --card-label-fontSize: 1.25rem;
  --card-label-fontWeight: 400;
  --card-universal-background: #FFFFFF;
  --card-universal-border: #0077C8;
  --card-universal-borderRadius: 0.3125rem;
  --card-universal-borderStyle: solid;
  --card-universal-borderWidth: 0.0625rem;
  --card-universal-fontFamily: 'Raleway', sans-serif;
  --card-universal-fontStyle: uppercase;
  --card-universal-fontWeight: 400;
  --card-universal-padding: 1.25rem;
  --card-universal-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --card-universal-text: #0077C8;
}

[data-theme="dark"] {
  --card-body-fontSize: 1rem;
  --card-heading-fontSize: 1.25rem;
  --card-heading-fontWeight: 400;
  --card-heading-marginBottom: 0.625rem;
  --card-label-fontSize: 1.25rem;
  --card-label-fontWeight: 400;
  --card-universal-background: #0077C8;
  --card-universal-border: #FFFFFF;
  --card-universal-borderRadius: 0.3125rem;
  --card-universal-borderStyle: solid;
  --card-universal-borderWidth: 0.0625rem;
  --card-universal-fontFamily: 'Raleway', sans-serif;
  --card-universal-fontStyle: uppercase;
  --card-universal-fontWeight: 400;
  --card-universal-padding: 1.25rem;
  --card-universal-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --card-universal-text: #FFFFFF;
}/**
 * Card Styles
 * 
 * Uses bundle slots: var(--card-*)
 * No hardcoded values. No direct token references.
 * Mode (light/dark) handled by CSS generator at build time.
 */

.card {
  padding: var(--card-universal-padding);
  border-radius: var(--card-universal-borderRadius);
  border-width: var(--card-universal-borderWidth);
  border-style: var(--card-universal-borderStyle);
  border-color: var(--card-universal-border);
  box-shadow: var(--card-universal-shadow);
  background: var(--card-universal-background);
  color: var(--card-universal-text);
  font-family: var(--card-universal-fontFamily);
  font-weight: var(--card-universal-fontWeight);
  text-transform: var(--card-universal-fontStyle);
  
  /* Ensure content wraps and card expands to fit */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  overflow: visible;
  box-sizing: border-box;
  height: auto;
  min-height: fit-content;
}

/* Card typography - headings */
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  font-family: inherit;
  font-size: var(--card-heading-fontSize);
  font-weight: var(--card-heading-fontWeight);
  text-transform: inherit;
  margin: 0 0 var(--card-heading-marginBottom) 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Card typography - body text */
.card p,
.card small,
.card span,
.card div {
  font-size: var(--card-body-fontSize);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Card typography - labels */
.card strong {
  font-size: var(--card-label-fontSize);
  font-weight: var(--card-label-fontWeight);
}

/* Ensure all child elements respect boundaries */
.card * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Print styles - ensure cards print cleanly */
@media print {
  .card {
    page-break-inside: avoid;
    break-inside: avoid;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    box-shadow: none !important;
    margin-bottom: 1rem !important;
  }
}
/* DetailPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* DetailPopup overlay */
.detail-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .detail-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .detail-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* DetailPopup container */
.detail-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-width: var(--component-adminPortal-modal-detailPopup-minWidth);
  max-width: var(--component-adminPortal-modal-detailPopup-maxWidth);
  min-height: var(--component-adminPortal-modal-detailPopup-minHeight);
  max-height: var(--component-adminPortal-modal-detailPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
}
[data-theme="light"] .detail-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .detail-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.detail-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
}
[data-theme="light"] .detail-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .detail-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.detail-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
.detail-popup-header-actions {
  position: absolute;
  top: 50%;
  right: var(--component-adminPortal-modal-header-padding-right);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-modal-headerActions-gap);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.detail-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--component-adminPortal-modal-body-padding-top) var(--component-adminPortal-modal-body-padding-right) var(--component-adminPortal-modal-body-padding-bottom) var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
/* Scrollbar inset from top/bottom edges */
.detail-popup-body::-webkit-scrollbar-track {
  margin-top: var(--component-adminPortal-modal-body-scrollbar-margin-top);
  margin-bottom: var(--component-adminPortal-modal-body-scrollbar-margin-bottom);
}
/* Field rows - label and value pairs */
.detail-popup-field {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--component-adminPortal-modal-body-gap);
  margin-bottom: var(--component-adminPortal-modal-body-gap);
  flex-wrap: wrap;
}
.detail-popup-field-label {
  min-width: var(--component-adminPortal-users-userCard-row-label-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  /* Color inherits from parent .detail-popup */
}
.detail-popup-field-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
/* Responsive */
@media (max-width: 48rem) {
  .detail-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }
  
  .detail-popup-header-actions {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 1;
    align-self: flex-end;
  }
  
  .detail-popup-header h2 {
    order: 2;
    margin-top: var(--component-adminPortal-modal-header-titleMarginTopResponsive);
  }

  /* Responsive - stack labels and values vertically on mobile */
  .detail-popup-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .detail-popup-field-label {
    min-width: auto;
  }
}
/* Print styles - show full content, hide UI chrome */
@media print {
  .detail-popup-overlay {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: auto !important;
  }

  .detail-popup {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 0 !important;
    animation: none !important;
    transform: none !important;
  }

  .detail-popup-body {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    flex: none !important;
  }

  .detail-popup-header {
    background: #ffffff !important;
    page-break-after: avoid;
  }

  .detail-popup-header h2 {
    color: #000000 !important;
  }

  .detail-popup-header-actions {
    display: none !important;
  }

  .detail-popup-close-button {
    display: none !important;
  }
}
/* InlineEdit - Federated inline editing component */
/* UtilityButton - Shared CSS for small icon-only utility buttons */
/* Used by: InlineEdit, DeleteUserButton, CloseButton patterns */
/* Generated from utilitybutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --utilitybutton-active-scale: 0.95;
  --utilitybutton-background-default: transparent;
  --utilitybutton-disabled-opacity: 0.5;
  --utilitybutton-hover-background: #0077C8;
  --utilitybutton-hover-text: #FFFFFF;
  --utilitybutton-icon-normal: 1rem;
  --utilitybutton-icon-small: 0.875rem;
  --utilitybutton-universal-borderRadius: 0.3125rem;
  --utilitybutton-universal-padding: 0.125rem;
  --utilitybutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --utilitybutton-active-scale: 0.95;
  --utilitybutton-background-default: transparent;
  --utilitybutton-disabled-opacity: 0.5;
  --utilitybutton-hover-background: #FFFFFF;
  --utilitybutton-hover-text: #0077C8;
  --utilitybutton-icon-normal: 1rem;
  --utilitybutton-icon-small: 0.875rem;
  --utilitybutton-universal-borderRadius: 0.3125rem;
  --utilitybutton-universal-padding: 0.125rem;
  --utilitybutton-universal-transition: all 0.2s ease;
}
.utility-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--utilitybutton-universal-padding);
  background: var(--utilitybutton-background-default);
  border: none;
  border-radius: var(--utilitybutton-universal-borderRadius);
  cursor: pointer;
  transition: var(--utilitybutton-universal-transition);
  color: inherit;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.utility-button:hover:not(:disabled) {
  background: var(--utilitybutton-hover-background);
  color: var(--utilitybutton-hover-text);
}
.utility-button:active:not(:disabled) {
  transform: scale(var(--utilitybutton-active-scale));
}
.utility-button:disabled {
  opacity: var(--utilitybutton-disabled-opacity);
  cursor: not-allowed;
}
/* Icon container - use small size by default */
.utility-button-icon {
  width: var(--utilitybutton-icon-small);
  height: var(--utilitybutton-icon-small);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Normal size variant for larger icons */
.utility-button-icon--normal {
  width: var(--utilitybutton-icon-normal);
  height: var(--utilitybutton-icon-normal);
}
.utility-button-icon svg {
  width: 100%;
  height: 100%;
}
.inline-edit {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
/* Display mode (non-editing) */
.inline-edit-display {
  display: inline-flex;
  align-items: center;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  padding-top: var(--component-adminPortal-inlineEdit-padding-top);
  padding-right: var(--component-adminPortal-inlineEdit-padding-right);
  padding-bottom: var(--component-adminPortal-inlineEdit-padding-bottom);
  padding-left: var(--component-adminPortal-inlineEdit-padding-left);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  border: none;
  background: var(--utilitybutton-background-default);
  cursor: pointer;
  transition: background var(--component-adminPortal-transition-duration-default) ease;
  min-width: var(--component-adminPortal-inlineEdit-minWidth);
}
[data-theme="light"] .inline-edit-display {
  color: var(--component-adminPortal-inlineEdit-color-text-light);
}
[data-theme="dark"] .inline-edit-display {
  color: var(--component-adminPortal-inlineEdit-color-text-dark);
}
/* Display area has no hover - the utility button handles hover */
.inline-edit-display.disabled {
  cursor: default;
  /* No opacity change - read-only fields should look like normal fields */
}
.inline-edit-text {
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-inlineEdit-typography-fontFamily);
  white-space: nowrap;
}
/* Multiline mode */
.inline-edit-multiline {
  display: flex;
  width: 100%;
}
.inline-edit-multiline .inline-edit-display {
  width: 100%;
  align-items: flex-start;
}
.inline-edit-multiline .inline-edit-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  flex: 1;
}
.inline-edit-multiline .inline-edit-editing {
  width: 100%;
  align-items: flex-start;
}
.inline-edit-textarea {
  flex: 1;
  min-height: var(--component-adminPortal-inlineEdit-textarea-minHeight);
  resize: vertical;
  font-family: inherit;
}
/* Edit button only mode - just shows the edit button, no text */
.inline-edit-display.edit-button-only {
  padding: 0;
  min-width: auto;
}
/* Empty state - show muted dash */
.inline-edit-text.inline-edit-empty {
  opacity: 0.5;
}
/* Editing mode */
.inline-edit-editing {
  display: inline-flex;
  align-items: center;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}
.inline-edit-input {
  min-width: var(--component-adminPortal-inlineEdit-minWidth);
  padding-top: var(--component-adminPortal-inlineEdit-padding-top);
  padding-right: var(--component-adminPortal-inlineEdit-padding-right);
  padding-bottom: var(--component-adminPortal-inlineEdit-padding-bottom);
  padding-left: var(--component-adminPortal-inlineEdit-padding-left);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-inlineEdit-typography-fontFamily);
  outline: none;
}
[data-theme="light"] .inline-edit-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}
[data-theme="dark"] .inline-edit-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}
.inline-edit-input:focus {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
/* Buttons use shared utility-button class from UtilityButton.css */
/* Generated from toggleswitch.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --toggleswitch-container-gap: 0.625rem;
  --toggleswitch-disabled-opacity: 0.5;
  --toggleswitch-focus-outlineColor: #0077C8;
  --toggleswitch-focus-outlineOffset: 0.125rem;
  --toggleswitch-focus-outlineWidth: 0.125rem;
  --toggleswitch-handle-activeBackground: #FFFFFF;
  --toggleswitch-handle-borderRadius: 3.125rem;
  --toggleswitch-handle-inactiveBackground: #0077C8;
  --toggleswitch-handle-offset: 0.125rem;
  --toggleswitch-label-color: #0077C8;
  --toggleswitch-label-fontFamily: 'Raleway', sans-serif;
  --toggleswitch-label-fontWeight: 400;
  --toggleswitch-track-activeBackground: #10B981;
  --toggleswitch-track-activeBorder: transparent;
  --toggleswitch-track-borderRadius: 0.75rem;
  --toggleswitch-track-borderWidth: 0.125rem;
  --toggleswitch-track-height: 1.5rem;
  --toggleswitch-track-inactiveBackground: #FFFFFF;
  --toggleswitch-track-inactiveBorder: #0077C8;
  --toggleswitch-track-width: 3rem;
  --toggleswitch-transition-duration: 200ms;
}

[data-theme="dark"] {
  --toggleswitch-container-gap: 0.625rem;
  --toggleswitch-disabled-opacity: 0.5;
  --toggleswitch-focus-outlineColor: #0077C8;
  --toggleswitch-focus-outlineOffset: 0.125rem;
  --toggleswitch-focus-outlineWidth: 0.125rem;
  --toggleswitch-handle-activeBackground: #FFFFFF;
  --toggleswitch-handle-borderRadius: 3.125rem;
  --toggleswitch-handle-inactiveBackground: #0077C8;
  --toggleswitch-handle-offset: 0.125rem;
  --toggleswitch-label-color: #FFFFFF;
  --toggleswitch-label-fontFamily: 'Raleway', sans-serif;
  --toggleswitch-label-fontWeight: 400;
  --toggleswitch-track-activeBackground: #10B981;
  --toggleswitch-track-activeBorder: transparent;
  --toggleswitch-track-borderRadius: 0.75rem;
  --toggleswitch-track-borderWidth: 0.125rem;
  --toggleswitch-track-height: 1.5rem;
  --toggleswitch-track-inactiveBackground: #FFFFFF;
  --toggleswitch-track-inactiveBorder: #0077C8;
  --toggleswitch-track-width: 3rem;
  --toggleswitch-transition-duration: 200ms;
}/* ToggleSwitch - Universal appearance (same in dark/light modes) */

/* Container */
.toggle-switch-container {
  display: inline-flex;
  align-items: center;
  gap: var(--toggleswitch-container-gap);
}

/* Label */
.toggle-switch-label {
  font-family: var(--toggleswitch-label-fontFamily);
  font-weight: var(--toggleswitch-label-fontWeight);
  color: var(--toggleswitch-label-color);
  cursor: pointer;
  user-select: none;
}

/* Track (pill-shaped button) */
.toggle-switch {
  position: relative;
  width: var(--toggleswitch-track-width);
  height: var(--toggleswitch-track-height);
  border-width: var(--toggleswitch-track-borderWidth);
  border-style: solid;
  border-radius: var(--toggleswitch-track-borderRadius);
  cursor: pointer;
  transition: background-color var(--toggleswitch-transition-duration) ease,
              border-color var(--toggleswitch-transition-duration) ease;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Active State (ON) - green background, no border */
.toggle-switch-active {
  background: var(--toggleswitch-track-activeBackground);
  border-color: var(--toggleswitch-track-activeBorder);
}

/* Inactive State (OFF) - white background, blue border */
.toggle-switch-inactive {
  background: var(--toggleswitch-track-inactiveBackground);
  border-color: var(--toggleswitch-track-inactiveBorder);
}

/* Handle (circle that slides) */
.toggle-switch-handle {
  position: absolute;
  /* Center vertically using calc - account for border */
  top: 50%;
  transform: translateY(-50%);
  left: var(--toggleswitch-handle-offset);
  /* Size: track height minus offset on each side, minus border on each side */
  width: calc(var(--toggleswitch-track-height) - var(--toggleswitch-handle-offset) * 2 - var(--toggleswitch-track-borderWidth) * 2);
  height: calc(var(--toggleswitch-track-height) - var(--toggleswitch-handle-offset) * 2 - var(--toggleswitch-track-borderWidth) * 2);
  border-radius: var(--toggleswitch-handle-borderRadius);
  transition: transform var(--toggleswitch-transition-duration) ease,
              left var(--toggleswitch-transition-duration) ease,
              background-color var(--toggleswitch-transition-duration) ease;
  display: block;
}

/* Handle colors */
.toggle-switch-active .toggle-switch-handle {
  background: var(--toggleswitch-handle-activeBackground);
}

.toggle-switch-inactive .toggle-switch-handle {
  background: var(--toggleswitch-handle-inactiveBackground);
}

/* Handle position when active - slide to right */
.toggle-switch-active .toggle-switch-handle {
  /* Move to right side: track width - handle width - offset - border on each side */
  left: calc(var(--toggleswitch-track-width) - var(--toggleswitch-track-height) + var(--toggleswitch-handle-offset));
}

/* Focus styles */
.toggle-switch:focus {
  outline: var(--toggleswitch-focus-outlineWidth) solid var(--toggleswitch-focus-outlineColor);
  outline-offset: var(--toggleswitch-focus-outlineOffset);
}

.toggle-switch:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state */
.toggle-switch:disabled {
  opacity: var(--toggleswitch-disabled-opacity);
  cursor: not-allowed;
}
/* DeleteUserButton - Uses shared utility-button class */
/* UtilityButton - Shared CSS for small icon-only utility buttons */
/* Used by: InlineEdit, DeleteUserButton, CloseButton patterns */
/* Generated from utilitybutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --utilitybutton-active-scale: 0.95;
  --utilitybutton-background-default: transparent;
  --utilitybutton-disabled-opacity: 0.5;
  --utilitybutton-hover-background: #0077C8;
  --utilitybutton-hover-text: #FFFFFF;
  --utilitybutton-icon-normal: 1rem;
  --utilitybutton-icon-small: 0.875rem;
  --utilitybutton-universal-borderRadius: 0.3125rem;
  --utilitybutton-universal-padding: 0.125rem;
  --utilitybutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --utilitybutton-active-scale: 0.95;
  --utilitybutton-background-default: transparent;
  --utilitybutton-disabled-opacity: 0.5;
  --utilitybutton-hover-background: #FFFFFF;
  --utilitybutton-hover-text: #0077C8;
  --utilitybutton-icon-normal: 1rem;
  --utilitybutton-icon-small: 0.875rem;
  --utilitybutton-universal-borderRadius: 0.3125rem;
  --utilitybutton-universal-padding: 0.125rem;
  --utilitybutton-universal-transition: all 0.2s ease;
}
.utility-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--utilitybutton-universal-padding);
  background: var(--utilitybutton-background-default);
  border: none;
  border-radius: var(--utilitybutton-universal-borderRadius);
  cursor: pointer;
  transition: var(--utilitybutton-universal-transition);
  color: inherit;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.utility-button:hover:not(:disabled) {
  background: var(--utilitybutton-hover-background);
  color: var(--utilitybutton-hover-text);
}
.utility-button:active:not(:disabled) {
  transform: scale(var(--utilitybutton-active-scale));
}
.utility-button:disabled {
  opacity: var(--utilitybutton-disabled-opacity);
  cursor: not-allowed;
}
/* Icon container - use small size by default */
.utility-button-icon {
  width: var(--utilitybutton-icon-small);
  height: var(--utilitybutton-icon-small);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Normal size variant for larger icons */
.utility-button-icon--normal {
  width: var(--utilitybutton-icon-normal);
  height: var(--utilitybutton-icon-normal);
}
.utility-button-icon svg {
  width: 100%;
  height: 100%;
}
/* No component-specific styles needed - uses utility-button class */
/* UserPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* UserPopup overlay */
.user-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .user-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .user-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* UserPopup container */
.user-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-height: var(--component-adminPortal-modal-userPopup-minHeight);
  max-width: var(--component-adminPortal-modal-userPopup-maxWidth);
  max-height: var(--component-adminPortal-modal-userPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}
[data-theme="light"] .user-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .user-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.user-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}
[data-theme="light"] .user-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .user-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.user-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
[data-theme="light"] .user-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .user-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.user-popup-header-actions {
  position: absolute;
  top: 50%;
  right: var(--component-adminPortal-modal-header-padding-right);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-modal-headerActions-gap);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.user-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
/* Users Grid */
.user-popup-users-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-grid-gap);
  margin-top: var(--component-adminPortal-users-grid-margin-top);
}
/* User Card Styling */
.user-popup-users-grid .user-card {
  margin: 0;
  overflow: hidden;
}
.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--component-adminPortal-modal-body-gap);
  overflow: hidden;
}
.user-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-userCard-info-gap);
  min-width: 0;
  overflow: hidden;
}
.user-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
}
.user-card-row strong {
  min-width: var(--component-adminPortal-users-userCard-row-label-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}
.user-card-row > *:not(strong) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Responsive */
@media (max-width: 48rem) {
  .user-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }
  
  .user-popup-header-actions {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 1;
    align-self: flex-end;
  }
  
  .user-popup-header h2 {
    order: 2;
    margin-top: var(--component-adminPortal-modal-header-titleMarginTopResponsive);
  }

  /* Responsive - stack labels and values vertically */
  .user-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .user-card-row strong {
    min-width: auto;
  }
}
/* TestCountPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* TestCountPopup overlay */
.test-count-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .test-count-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .test-count-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* TestCountPopup container */
.test-count-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-height: var(--component-adminPortal-modal-testCountPopup-minHeight);
  max-width: var(--component-adminPortal-modal-testCountPopup-maxWidth);
  max-height: var(--component-adminPortal-modal-testCountPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}
[data-theme="light"] .test-count-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .test-count-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.test-count-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}
[data-theme="light"] .test-count-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .test-count-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.test-count-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
[data-theme="light"] .test-count-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .test-count-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.test-count-popup-header-actions {
  position: absolute;
  top: 50%;
  right: var(--component-adminPortal-modal-header-padding-right);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-modal-headerActions-gap);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.test-count-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
/* Responsive */
@media (max-width: 48rem) {
  .test-count-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }
  
  .test-count-popup-header-actions {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 1;
    align-self: flex-end;
  }
  
  .test-count-popup-header h2 {
    order: 2;
    margin-top: var(--component-adminPortal-modal-header-titleMarginTopResponsive);
  }
}
/* SettingsPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* SettingsPopup overlay */
.settings-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .settings-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .settings-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* SettingsPopup container */
.settings-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-height: var(--component-adminPortal-modal-settingsPopup-minHeight);
  max-width: var(--component-adminPortal-modal-settingsPopup-maxWidth);
  max-height: var(--component-adminPortal-modal-settingsPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}
[data-theme="light"] .settings-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .settings-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.settings-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}
[data-theme="light"] .settings-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .settings-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.settings-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
[data-theme="light"] .settings-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .settings-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.settings-popup-header-actions {
  position: absolute;
  top: 50%;
  right: var(--component-adminPortal-modal-header-padding-right);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-modal-headerActions-gap);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.settings-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
.settings-popup-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--component-adminPortal-modal-settingsPopup-field-gap);
}
.settings-popup-field label {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  white-space: nowrap;
}
[data-theme="light"] .settings-popup-field label {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .settings-popup-field label {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.settings-popup-field .toggle-switch-container {
  align-self: flex-start;
}
/* Responsive */
@media (max-width: 48rem) {
  .settings-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }
  
  .settings-popup-header-actions {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 1;
    align-self: flex-end;
  }
  
  .settings-popup-header h2 {
    order: 2;
    margin-top: var(--component-adminPortal-modal-header-titleMarginTopResponsive);
  }

  .settings-popup-field {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* AddUserPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* AddUserPopup overlay */
.add-user-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .add-user-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .add-user-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* AddUserPopup container */
.add-user-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-width: var(--component-adminPortal-modal-addUserPopup-minWidth);
  max-width: var(--component-adminPortal-modal-addUserPopup-maxWidth);
  min-height: var(--component-adminPortal-modal-addUserPopup-minHeight);
  max-height: var(--component-adminPortal-modal-addUserPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}
[data-theme="light"] .add-user-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .add-user-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.add-user-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}
[data-theme="light"] .add-user-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .add-user-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.add-user-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
[data-theme="light"] .add-user-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .add-user-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-dark);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.add-user-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
.add-user-popup-body form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--component-adminPortal-modal-body-gap);
}
/* Form fields */
.add-user-popup-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--component-adminPortal-modal-addUserPopup-field-gap);
}
.add-user-popup-field label {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  white-space: nowrap;
}
[data-theme="light"] .add-user-popup-field label {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .add-user-popup-field label {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.add-user-popup-input {
  flex: 1;
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-modal-input-border-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  transition: all var(--component-adminPortal-transition-duration-default) ease;
  box-sizing: border-box;
}
[data-theme="light"] .add-user-popup-input {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .add-user-popup-input {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
.add-user-popup-input:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}
[data-theme="light"] .add-user-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}
[data-theme="dark"] .add-user-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}
/* ToggleSwitch container in form */
.add-user-popup-field .toggle-switch-container {
  align-self: flex-start;
}
/* Form actions */
.add-user-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--component-adminPortal-modal-headerActions-gap);
  margin-top: auto;
  padding-top: var(--component-adminPortal-modal-addUserPopup-actions-margin-top);
}
.add-user-popup-cancel,
.add-user-popup-submit {
  padding: var(--component-adminPortal-modal-button-padding-top) var(--component-adminPortal-modal-button-padding-right) var(--component-adminPortal-modal-button-padding-bottom) var(--component-adminPortal-modal-button-padding-left);
  border-radius: var(--component-adminPortal-modal-button-border-borderRadius);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  cursor: pointer;
  transition: all var(--component-adminPortal-transition-duration-default) ease;
  white-space: nowrap;
}
[data-theme="light"] .add-user-popup-actions .add-user-popup-cancel {
  background-color: var(--component-adminPortal-modal-button-background-light);
  border-color: var(--component-adminPortal-modal-button-border-light);
  color: var(--component-adminPortal-modal-button-text-light);
}
[data-theme="dark"] .add-user-popup-actions .add-user-popup-cancel {
  background-color: var(--component-adminPortal-modal-button-background-dark);
  border-color: var(--component-adminPortal-modal-button-border-dark);
  color: var(--component-adminPortal-modal-button-text-dark);
}
[data-theme="light"] .add-user-popup-actions .add-user-popup-cancel:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-light);
}
[data-theme="dark"] .add-user-popup-actions .add-user-popup-cancel:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-dark);
}
[data-theme="light"] .add-user-popup-actions .add-user-popup-submit {
  background-color: var(--component-adminPortal-modal-button-background-light);
  border-color: var(--component-adminPortal-modal-button-border-light);
  color: var(--component-adminPortal-modal-button-text-light);
}
[data-theme="dark"] .add-user-popup-actions .add-user-popup-submit {
  background-color: var(--component-adminPortal-modal-button-background-dark);
  border-color: var(--component-adminPortal-modal-button-border-dark);
  color: var(--component-adminPortal-modal-button-text-dark);
}
[data-theme="light"] .add-user-popup-actions .add-user-popup-submit:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-light);
}
[data-theme="dark"] .add-user-popup-actions .add-user-popup-submit:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-dark);
}
/* Error message */
[data-theme="light"] .add-user-popup-error {
  color: var(--component-adminPortal-form-error-text-color-light);
}
[data-theme="dark"] .add-user-popup-error {
  color: var(--component-adminPortal-form-error-text-color-dark);
}
/* Responsive */
@media (max-width: 48rem) {
  .add-user-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }

  .add-user-popup-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .add-user-popup-input {
    width: 100%;
  }

  .add-user-popup-actions {
    flex-direction: column;
  }

  .add-user-popup-cancel,
  .add-user-popup-submit {
    width: 100%;
  }
}
/* Accounts page styles */

.accounts-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
}

.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}
/* Generated from modal.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --modal-alert-fontSize: 1.125rem;
  --modal-animation-scaleFinal: 1;
  --modal-animation-scaleInitial: 0.95;
  --modal-footer-gap: 0.625rem;
  --modal-header-actionsGap: 0.625rem;
  --modal-header-padding: 0.1875rem;
  --modal-iconButton-borderRadius: 0.1875rem;
  --modal-iconButton-fontSize: 1.25rem;
  --modal-iconButton-padding: 0.3125rem;
  --modal-overlay-backdrop: rgba(0, 0, 0, 0.6);
  --modal-overlay-backdropOpacity: 0.6;
  --modal-overlay-padding: 1.25rem;
  --modal-overlay-zIndex: 1000;
  --modal-size-large: 70vw;
  --modal-size-medium: 60vw;
  --modal-size-small: 40vw;
  --modal-title-fontSize: 1.5rem;
  --modal-title-fontWeight: 400;
  --modal-universal-background: #FFFFFF;
  --modal-universal-border: #0077C8;
  --modal-universal-borderRadius: 0.3125rem;
  --modal-universal-borderStyle: solid;
  --modal-universal-borderWidth: 0.0625rem;
  --modal-universal-fontFamily: 'Raleway', sans-serif;
  --modal-universal-fontStyle: uppercase;
  --modal-universal-hoverBackground: #0077C8;
  --modal-universal-maxHeight: 90vh;
  --modal-universal-padding: 1.25rem;
  --modal-universal-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --modal-universal-text: #0077C8;
}

[data-theme="dark"] {
  --modal-alert-fontSize: 1.125rem;
  --modal-animation-scaleFinal: 1;
  --modal-animation-scaleInitial: 0.95;
  --modal-footer-gap: 0.625rem;
  --modal-header-actionsGap: 0.625rem;
  --modal-header-padding: 0.1875rem;
  --modal-iconButton-borderRadius: 0.1875rem;
  --modal-iconButton-fontSize: 1.25rem;
  --modal-iconButton-padding: 0.3125rem;
  --modal-overlay-backdrop: rgba(0, 0, 0, 0.6);
  --modal-overlay-backdropOpacity: 0.6;
  --modal-overlay-padding: 1.25rem;
  --modal-overlay-zIndex: 1000;
  --modal-size-large: 70vw;
  --modal-size-medium: 60vw;
  --modal-size-small: 40vw;
  --modal-title-fontSize: 1.5rem;
  --modal-title-fontWeight: 400;
  --modal-universal-background: #0077C8;
  --modal-universal-border: #FFFFFF;
  --modal-universal-borderRadius: 0.3125rem;
  --modal-universal-borderStyle: solid;
  --modal-universal-borderWidth: 0.0625rem;
  --modal-universal-fontFamily: 'Raleway', sans-serif;
  --modal-universal-fontStyle: uppercase;
  --modal-universal-hoverBackground: #FFFFFF;
  --modal-universal-maxHeight: 90vh;
  --modal-universal-padding: 1.25rem;
  --modal-universal-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --modal-universal-text: #FFFFFF;
}/**
 * Modal Styles
 * 
 * Uses bundle slots: var(--modal-*)
 * No hardcoded values. No direct token references.
 * Mode (light/dark) handled by CSS generator at build time.
 */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--modal-overlay-zIndex);
  padding: var(--modal-overlay-padding);
  background: var(--modal-overlay-backdrop);
}
.modal {
  border-radius: var(--modal-universal-borderRadius);
  border-width: var(--modal-universal-borderWidth);
  border-style: var(--modal-universal-borderStyle);
  border-color: var(--modal-universal-border);
  box-shadow: var(--modal-universal-shadow);
  max-height: var(--modal-universal-maxHeight);
  background: var(--modal-universal-background);
  color: var(--modal-universal-text);
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 200ms ease;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(var(--modal-animation-scaleInitial));
  }
  to {
    opacity: 1;
    transform: scale(var(--modal-animation-scaleFinal));
  }
}
/* Modal sizes */
.modal-small {
  width: var(--modal-size-small);
}
.modal-medium {
  width: var(--modal-size-medium);
}
.modal-large {
  width: var(--modal-size-large);
}
/* Header */
.modal-header {
  padding: var(--modal-header-padding);
  border-bottom: var(--modal-universal-borderWidth) solid var(--modal-universal-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-title {
  margin: 0;
  font-size: var(--modal-title-fontSize);
  font-weight: var(--modal-title-fontWeight);
  font-family: var(--modal-universal-fontFamily);
  text-transform: var(--modal-universal-fontStyle);
}
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--modal-header-actionsGap);
}
/* Close button uses Mac-style from CloseButton.css */
/* Print button keeps icon button style */
.modal-print-button {
  background: var(--color-transparent);
  border: none;
  cursor: pointer;
  padding: var(--modal-iconButton-padding);
  border-radius: var(--modal-iconButton-borderRadius);
  transition: background 200ms ease;
  font-size: var(--modal-iconButton-fontSize);
  line-height: 1;
  color: var(--modal-universal-text);
}
.modal-print-button:hover {
  background: var(--modal-universal-hoverBackground);
  color: var(--modal-universal-background);
}
/* Content */
.modal-content {
  padding: var(--modal-universal-padding);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Footer */
.modal-footer {
  padding: var(--modal-universal-padding);
  border-top: var(--modal-universal-borderWidth) solid var(--modal-universal-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
  flex-shrink: 0;
}
/* Alert variant specific styles */
.modal-alert .modal-content {
  text-align: center;
  font-size: var(--modal-alert-fontSize);
}
/* Print styles */
@media print {
  .modal-overlay {
    position: static;
    background: none;
    padding: 0;
  }
  
  .modal {
    box-shadow: none;
    border: none;
    max-height: none;
    width: 100% !important;
  }
  
  .modal-header-actions {
    display: none;
  }
}
/* Dashboard page styles */

.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--component-adminPortal-dashboardPage-grid-minColumnWidth), 1fr));
  gap: var(--component-adminPortal-dashboardPage-grid-gap);
}

/* Responsive grid */
@media (max-width: 48rem) {
  .dashboard-cards-grid {
    grid-template-columns: 1fr;
  }
}
/* LogoSection Component Styles
 * Uses PortalNav bundle variables (loaded by parent component)
 */

.logo-section-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--component-adminPortal-portalNav-logoSection-padding-top);
  padding-right: var(--component-adminPortal-portalNav-logoSection-padding-right);
  padding-bottom: var(--component-adminPortal-portalNav-logoSection-padding-bottom);
  padding-left: var(--component-adminPortal-portalNav-logoSection-padding-left);
  gap: var(--portalnav-navItem-gap);
}

.logo-section-header.collapsed {
  justify-content: center;
  padding: var(--portalnav-sidebar-padding);
}

.logo-section-badge {
  width: var(--component-adminPortal-portalNav-logoSection-appBadge-size);
  height: var(--component-adminPortal-portalNav-logoSection-appBadge-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-section-badge svg,
.logo-section-badge svg[width],
.logo-section-badge svg[height] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Badge margins handled by parent gap property */

.logo-section-name {
  /* Typography set via inline styles in LogoSection.tsx (inherits from theme) */
  opacity: 1;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Generated from portalnav.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */

[data-theme="light"] {
  --portalnav-collapseButton-hoverScale: 1.1;
  --portalnav-collapseButton-padding: 0.1875rem;
  --portalnav-collapseButton-size: 3.125rem;
  --portalnav-content-background: #FFFFFF;
  --portalnav-content-borderRadius: 0;
  --portalnav-content-padding: 1.25rem;
  --portalnav-content-text: #0077C8;
  --portalnav-navItem-borderRadius: 0.3125rem;
  --portalnav-navItem-fontSize: 1.125rem;
  --portalnav-navItem-gap: 0.625rem;
  --portalnav-navItem-hoverBackground: #0077C8;
  --portalnav-navItem-hoverBorder: #FFFFFF;
  --portalnav-navItem-hoverBorderRadius: 0.3125rem;
  --portalnav-navItem-hoverText: #FFFFFF;
  --portalnav-navItem-marginTop: 1.5625rem;
  --portalnav-navItem-padding: 0.625rem;
  --portalnav-navItem-paddingCollapsed: 0.3125rem;
  --portalnav-navItem-shortIconSize: 1.25rem;
  --portalnav-navItem-text: #0077C8;
  --portalnav-navItem-transition: 150ms;
  --portalnav-scrollbar-borderRadius: 0.1875rem;
  --portalnav-scrollbar-width: 0.375rem;
  --portalnav-sidebar-background: #FFFFFF;
  --portalnav-sidebar-border: #0077C8;
  --portalnav-sidebar-borderWidth: 0.0625rem;
  --portalnav-sidebar-padding: 0.625rem;
  --portalnav-sidebar-text: #0077C8;
  --portalnav-sidebar-transition: 300ms;
  --portalnav-sidebar-widthCollapsed: 4rem;
  --portalnav-sidebar-widthExpanded: 16rem;
  --portalnav-topbar-background: #FFFFFF;
  --portalnav-topbar-border: #0077C8;
  --portalnav-topbar-borderWidth: 0.0625rem;
  --portalnav-topbar-fontSize: 1.125rem;
  --portalnav-topbar-paddingHorizontal: 1.25rem;
  --portalnav-topbar-paddingVertical: 0.9375rem;
  --portalnav-topbar-text: #0077C8;
  --portalnav-topbar-titlePaddingLeft: 0.625rem;
  --portalnav-typography-fontFamily: 'Raleway', sans-serif;
  --portalnav-typography-fontStyle: uppercase;
  --portalnav-typography-fontWeight: 400;
}

[data-theme="dark"] {
  --portalnav-collapseButton-hoverScale: 1.1;
  --portalnav-collapseButton-padding: 0.1875rem;
  --portalnav-collapseButton-size: 3.125rem;
  --portalnav-content-background: #0077C8;
  --portalnav-content-borderRadius: 0;
  --portalnav-content-padding: 1.25rem;
  --portalnav-content-text: #FFFFFF;
  --portalnav-navItem-borderRadius: 0.3125rem;
  --portalnav-navItem-fontSize: 1.125rem;
  --portalnav-navItem-gap: 0.625rem;
  --portalnav-navItem-hoverBackground: #FFFFFF;
  --portalnav-navItem-hoverBorder: #0077C8;
  --portalnav-navItem-hoverBorderRadius: 0.3125rem;
  --portalnav-navItem-hoverText: #0077C8;
  --portalnav-navItem-marginTop: 1.5625rem;
  --portalnav-navItem-padding: 0.625rem;
  --portalnav-navItem-paddingCollapsed: 0.3125rem;
  --portalnav-navItem-shortIconSize: 1.25rem;
  --portalnav-navItem-text: #FFFFFF;
  --portalnav-navItem-transition: 150ms;
  --portalnav-scrollbar-borderRadius: 0.1875rem;
  --portalnav-scrollbar-width: 0.375rem;
  --portalnav-sidebar-background: #0077C8;
  --portalnav-sidebar-border: #FFFFFF;
  --portalnav-sidebar-borderWidth: 0.0625rem;
  --portalnav-sidebar-padding: 0.625rem;
  --portalnav-sidebar-text: #FFFFFF;
  --portalnav-sidebar-transition: 300ms;
  --portalnav-sidebar-widthCollapsed: 4rem;
  --portalnav-sidebar-widthExpanded: 16rem;
  --portalnav-topbar-background: #0077C8;
  --portalnav-topbar-border: #FFFFFF;
  --portalnav-topbar-borderWidth: 0.0625rem;
  --portalnav-topbar-fontSize: 1.125rem;
  --portalnav-topbar-paddingHorizontal: 1.25rem;
  --portalnav-topbar-paddingVertical: 0.9375rem;
  --portalnav-topbar-text: #FFFFFF;
  --portalnav-topbar-titlePaddingLeft: 0.625rem;
  --portalnav-typography-fontFamily: 'Raleway', sans-serif;
  --portalnav-typography-fontStyle: uppercase;
  --portalnav-typography-fontWeight: 400;
}/* PortalNav Component Styles
 * Uses bundle-generated variables from PortalNav.vars.css
 * Mode handling (light/dark) is in the vars file, not here
 */

/* =================================================================
 * ROOT LAYOUT
 * ================================================================= */
.portal-root {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* =================================================================
 * SIDEBAR (Page Navigation)
 * ================================================================= */
.portal-page-nav {
  width: var(--portalnav-sidebar-widthExpanded);
  padding: var(--portalnav-sidebar-padding);
  display: flex;
  flex-direction: column;
  transition: width var(--portalnav-sidebar-transition) ease;
  flex-shrink: 0;
  position: relative;
  background: var(--portalnav-sidebar-background);
  color: var(--portalnav-sidebar-text);
  border-right: var(--portalnav-sidebar-borderWidth) solid var(--portalnav-sidebar-border);
}

.portal-page-nav-collapsed {
  width: var(--portalnav-sidebar-widthCollapsed);
}

/* =================================================================
 * NAVIGATION ITEMS
 * ================================================================= */
.portal-nav {
  display: flex;
  flex-direction: column;
  gap: var(--portalnav-navItem-gap);
  margin-top: var(--portalnav-navItem-marginTop);
  flex: 1;
}

.portal-nav-item {
  border: none;
  background: var(--color-transparent);
  text-align: left;
  padding: var(--portalnav-navItem-padding);
  border-radius: var(--portalnav-navItem-borderRadius);
  font-size: var(--portalnav-navItem-fontSize);
  font-weight: var(--portalnav-typography-fontWeight);
  font-family: var(--portalnav-typography-fontFamily);
  color: var(--portalnav-navItem-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--portalnav-navItem-transition) ease;
  text-transform: var(--portalnav-typography-fontStyle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.portal-sidebar-collapsed .portal-nav-item {
  justify-content: center;
  padding: var(--portalnav-navItem-paddingCollapsed);
}

/* Nav item hover state */
.portal-nav-item:hover {
  background: var(--portalnav-navItem-hoverBackground);
  color: var(--portalnav-navItem-hoverText);
  border-radius: var(--portalnav-navItem-hoverBorderRadius);
}

/* Nav item active state (uses same styling as hover) */
.portal-nav-item-active {
  background: var(--portalnav-navItem-hoverBackground);
  color: var(--portalnav-navItem-hoverText);
}

/* Short/collapsed nav item display */
.portal-nav-item-short {
  font-size: var(--portalnav-navItem-fontSize);
  justify-content: center;
  display: flex;
  width: 100%;
}

.portal-nav-item-icon {
  width: var(--portalnav-navItem-shortIconSize);
  height: var(--portalnav-navItem-shortIconSize);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-nav-item-icon svg {
  width: 100%;
  height: 100%;
}

/* =================================================================
 * COLLAPSE/EXPAND BUTTON
 * ================================================================= */
.portal-collapse-expand-button {
  position: absolute;
  top: 50%;
  right: var(--portalnav-sidebar-padding);
  transform: translateY(-50%);
  background: var(--color-transparent);
  border: none;
  cursor: pointer;
  padding: var(--portalnav-collapseButton-padding);
  border-radius: var(--portalnav-navItem-borderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--portalnav-navItem-transition) ease;
}

.portal-collapse-expand-button:hover {
  transform: translateY(-50%) scale(var(--portalnav-collapseButton-hoverScale));
}

.portal-collapse-expand-icon {
  width: var(--portalnav-collapseButton-size);
  height: var(--portalnav-collapseButton-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--portalnav-sidebar-text);
}

.portal-collapse-expand-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

/* =================================================================
 * MAIN AREA
 * ================================================================= */
.portal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =================================================================
 * TOPBAR
 * ================================================================= */
.portal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: var(--portalnav-topbar-paddingVertical) var(--portalnav-topbar-paddingHorizontal);
  background: var(--portalnav-topbar-background);
  color: var(--portalnav-topbar-text);
  border-bottom: var(--portalnav-topbar-borderWidth) solid var(--portalnav-topbar-border);
}

.portal-topbar-left {
  flex: 1;
  min-width: 0;
}

.portal-topbar-title-section {
  display: flex;
  flex-direction: column;
}

.portal-topbar-title {
  margin: 0;
  padding-left: var(--portalnav-topbar-titlePaddingLeft);
  font-size: var(--portalnav-topbar-fontSize);
  font-weight: var(--portalnav-typography-fontWeight);
  text-transform: var(--portalnav-typography-fontStyle);
  font-family: var(--portalnav-typography-fontFamily);
  color: var(--portalnav-topbar-text);
}

.portal-topbar-subtitle {
  display: block;
  font-size: var(--portalnav-topbar-fontSize);
  color: var(--portalnav-topbar-text);
}

.portal-topbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* =================================================================
 * CONTENT AREA
 * ================================================================= */
.portal-content {
  flex: 1;
  overflow: auto;
  padding: var(--portalnav-content-padding);
  border-radius: var(--portalnav-content-borderRadius);
  background: var(--portalnav-content-background);
  color: var(--portalnav-content-text);
}

/* Scrollbar styling */
.portal-content {
  scrollbar-width: thin;
  scrollbar-color: var(--portalnav-sidebar-border) var(--portalnav-sidebar-background);
}

.portal-content::-webkit-scrollbar {
  width: var(--portalnav-scrollbar-width);
}

.portal-content::-webkit-scrollbar-track {
  background: var(--portalnav-sidebar-background);
}

.portal-content::-webkit-scrollbar-thumb {
  background: var(--portalnav-sidebar-border);
  border-radius: var(--portalnav-scrollbar-borderRadius);
}

.portal-content::-webkit-scrollbar-thumb:hover {
  background: var(--portalnav-navItem-hoverBackground);
}

/* =================================================================
 * PRINT STYLES
 * ================================================================= */
@media print {
  .portal-page-nav {
    display: none !important;
  }

  .portal-topbar {
    display: none !important;
  }

  .portal-root {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  .portal-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  .portal-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    padding: 0 !important;
  }
}
/* AddGroupsPopup - imports shared CloseButton styles */
/* CloseButton - Mac-style circular close button */
/* Used by: Modal, DetailPopup, UserPopup, TestCountPopup, SettingsPopup, AddUserPopup, AddGroupsPopup */
/* Generated from closebutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
[data-theme="dark"] {
  --closebutton-active-scale: 0.95;
  --closebutton-hover-background: #D93C3C;
  --closebutton-hover-scale: 1.1;
  --closebutton-icon-color: #FFFFFF;
  --closebutton-icon-fontSize: 0.75rem;
  --closebutton-universal-background: #EF4444;
  --closebutton-universal-borderRadius: 3.125rem;
  --closebutton-universal-size: 1rem;
  --closebutton-universal-transition: all 0.2s ease;
}
.close-button {
  position: relative;
  width: var(--closebutton-universal-size);
  height: var(--closebutton-universal-size);
  border: none;
  border-radius: var(--closebutton-universal-borderRadius);
  background: var(--closebutton-universal-background);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: var(--closebutton-universal-transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button:hover {
  background: var(--closebutton-hover-background);
  transform: scale(var(--closebutton-hover-scale));
}
.close-button:active {
  transform: scale(var(--closebutton-active-scale));
}
/* X icon - hidden by default, shows on hover */
.close-button-icon {
  font-size: var(--closebutton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  color: var(--closebutton-icon-color);
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}
.close-button:hover .close-button-icon {
  opacity: 1;
}
.close-button-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
/* AddGroupsPopup overlay */
.add-groups-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms ease;
}
[data-theme="light"] .add-groups-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-light);
}
[data-theme="dark"] .add-groups-popup-overlay {
  background: var(--component-adminPortal-modal-color-overlay-dark);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* AddGroupsPopup container */
.add-groups-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-width: var(--component-adminPortal-modal-addGroupsPopup-minWidth);
  max-width: var(--component-adminPortal-modal-addGroupsPopup-maxWidth);
  min-height: var(--component-adminPortal-modal-addGroupsPopup-minHeight);
  max-height: var(--component-adminPortal-modal-addGroupsPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: slideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}
[data-theme="light"] .add-groups-popup {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .add-groups-popup {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
@keyframes slideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Header */
.add-groups-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}
[data-theme="light"] .add-groups-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-light);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-light);
}
[data-theme="dark"] .add-groups-popup-header {
  background: var(--component-adminPortal-modal-color-header-background-dark);
  border-bottom-color: var(--component-adminPortal-modal-color-header-border-dark);
}
.add-groups-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  line-height: 1.2;
}
[data-theme="light"] .add-groups-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .add-groups-popup-header h2 {
  color: var(--component-adminPortal-modal-color-text-dark);
}
/* Close button uses shared .close-button class from CloseButton.css */
/* Body */
.add-groups-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}
.add-groups-popup-body form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--component-adminPortal-modal-body-gap);
}
/* Form fields */
.add-groups-popup-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--component-adminPortal-modal-addGroupsPopup-field-gap);
}
.add-groups-popup-field label {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  white-space: nowrap;
}
[data-theme="light"] .add-groups-popup-field label {
  color: var(--component-adminPortal-modal-color-text-light);
}
[data-theme="dark"] .add-groups-popup-field label {
  color: var(--component-adminPortal-modal-color-text-dark);
}
.add-groups-popup-input {
  flex: 1;
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-modal-input-border-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  transition: all var(--component-adminPortal-transition-duration-default) ease;
  box-sizing: border-box;
}
[data-theme="light"] .add-groups-popup-input {
  background: var(--component-adminPortal-modal-color-background-light);
  color: var(--component-adminPortal-modal-color-text-light);
  border-color: var(--component-adminPortal-modal-color-border-light);
}
[data-theme="dark"] .add-groups-popup-input {
  background: var(--component-adminPortal-modal-color-background-dark);
  color: var(--component-adminPortal-modal-color-text-dark);
  border-color: var(--component-adminPortal-modal-color-border-dark);
}
.add-groups-popup-input:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}
[data-theme="light"] .add-groups-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}
[data-theme="dark"] .add-groups-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}
/* Form actions */
.add-groups-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--component-adminPortal-modal-headerActions-gap);
  margin-top: auto;
  padding-top: var(--component-adminPortal-modal-addGroupsPopup-actions-margin-top);
}
.add-groups-popup-cancel,
.add-groups-popup-submit {
  padding: var(--component-adminPortal-modal-button-padding-top) var(--component-adminPortal-modal-button-padding-right) var(--component-adminPortal-modal-button-padding-bottom) var(--component-adminPortal-modal-button-padding-left);
  border-radius: var(--component-adminPortal-modal-button-border-borderRadius);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  text-transform: var(--component-adminPortal-modal-typography-fontStyle);
  cursor: pointer;
  transition: all var(--component-adminPortal-transition-duration-default) ease;
  white-space: nowrap;
}
[data-theme="light"] .add-groups-popup-actions .add-groups-popup-cancel {
  background-color: var(--component-adminPortal-modal-button-background-light);
  border-color: var(--component-adminPortal-modal-button-border-light);
  color: var(--component-adminPortal-modal-button-text-light);
}
[data-theme="dark"] .add-groups-popup-actions .add-groups-popup-cancel {
  background-color: var(--component-adminPortal-modal-button-background-dark);
  border-color: var(--component-adminPortal-modal-button-border-dark);
  color: var(--component-adminPortal-modal-button-text-dark);
}
[data-theme="light"] .add-groups-popup-actions .add-groups-popup-cancel:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-light);
}
[data-theme="dark"] .add-groups-popup-actions .add-groups-popup-cancel:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-dark);
}
[data-theme="light"] .add-groups-popup-actions .add-groups-popup-submit {
  background-color: var(--component-adminPortal-modal-button-background-light);
  border-color: var(--component-adminPortal-modal-button-border-light);
  color: var(--component-adminPortal-modal-button-text-light);
}
[data-theme="dark"] .add-groups-popup-actions .add-groups-popup-submit {
  background-color: var(--component-adminPortal-modal-button-background-dark);
  border-color: var(--component-adminPortal-modal-button-border-dark);
  color: var(--component-adminPortal-modal-button-text-dark);
}
[data-theme="light"] .add-groups-popup-actions .add-groups-popup-submit:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-light);
}
[data-theme="dark"] .add-groups-popup-actions .add-groups-popup-submit:hover {
  background-color: var(--component-adminPortal-modal-button-hover-background-dark);
}
/* Responsive */
@media (max-width: 48rem) {
  .add-groups-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }

  .add-groups-popup-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .add-groups-popup-input {
    width: 100%;
  }

  .add-groups-popup-actions {
    flex-direction: column;
  }

  .add-groups-popup-cancel,
  .add-groups-popup-submit {
    width: 100%;
  }
}
/* Accounts page styles */

.accounts-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
}

/* Field row - replacement for <p> tags to allow block-level children */
.field-row {
  margin: 0 0 var(--component-adminPortal-accountsPage-userCard-row-gap) 0;
}

.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}

/* User card row styling (reuses accountsPage tokens) */
.detail-popup-field {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-accountsPage-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
}

.detail-popup-field-label {
  min-width: var(--component-adminPortal-accountsPage-fieldLabel-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.detail-popup-field-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

/* Responsive - stack labels and values vertically */
@media (max-width: 768px) {
  .detail-popup-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-accountsPage-userCard-row-gap-mobile);
  }

  .detail-popup-field-label {
    min-width: auto;
  }
}

/* Demo badge */
.demo-badge {
  font-size: var(--component-adminPortal-accountsPage-demoBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-demoBadge-fontWeight);
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
  padding: var(--component-adminPortal-accountsPage-demoBadge-padding-top) var(--component-adminPortal-accountsPage-demoBadge-padding-right) var(--component-adminPortal-accountsPage-demoBadge-padding-bottom) var(--component-adminPortal-accountsPage-demoBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-demoBadge-borderRadius);
  display: inline-block;
}

/* Status badge */
.status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
}

.status-badge.active {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.status-badge.inactive {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}

/* Field hint (read-only indicator) */
.field-hint {
  font-size: var(--component-adminPortal-accountsPage-fieldHint-fontSize);
  color: var(--component-adminPortal-accountsPage-fieldHint-color);
  margin-left: var(--component-adminPortal-accountsPage-fieldHint-marginLeft);
}

/* Save status indicator */
.save-status {
  padding: var(--component-adminPortal-accountsPage-saveStatus-padding-top) var(--component-adminPortal-accountsPage-saveStatus-padding-right) var(--component-adminPortal-accountsPage-saveStatus-padding-bottom) var(--component-adminPortal-accountsPage-saveStatus-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-saveStatus-borderRadius);
  margin-bottom: var(--component-adminPortal-accountsPage-saveStatus-marginBottom);
  font-size: var(--component-adminPortal-accountsPage-saveStatus-fontSize);
  text-align: center;
}

.save-status-saving {
  background-color: var(--component-adminPortal-accountsPage-saveStatus-saving-backgroundColor);
  color: var(--component-adminPortal-accountsPage-saveStatus-saving-color);
}

.save-status-success {
  background-color: var(--component-adminPortal-accountsPage-saveStatus-success-backgroundColor);
  color: var(--component-adminPortal-accountsPage-saveStatus-success-color);
}

.save-status-error {
  background-color: var(--component-adminPortal-accountsPage-saveStatus-error-backgroundColor);
  color: var(--component-adminPortal-accountsPage-saveStatus-error-color);
}

/* Subscription items */
.subscription-items {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-subscriptionItems-gap);
}

.subscription-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--component-adminPortal-accountsPage-subscriptionItem-gap);
}

.subscription-item-feature {
  flex: 1;
}

.subscription-item-quantity {
  color: var(--component-adminPortal-accountsPage-subscriptionItem-quantity-color);
}

.subscription-item-amount {
  font-weight: var(--component-adminPortal-accountsPage-subscriptionItem-amount-fontWeight);
}

.subscription-total {
  margin-top: var(--component-adminPortal-accountsPage-subscriptionTotal-marginTop);
  padding-top: var(--component-adminPortal-accountsPage-subscriptionTotal-paddingTop);
  border-top-width: var(--component-adminPortal-accountsPage-subscriptionTotal-borderTopWidth);
  border-top-style: var(--component-adminPortal-accountsPage-subscriptionTotal-borderTopStyle);
  border-top-color: var(--component-adminPortal-accountsPage-subscriptionTotal-borderTopColor);
  text-align: right;
  font-weight: var(--component-adminPortal-accountsPage-subscriptionTotal-fontWeight);
}

/* Settings section */
.settings-section h4 {
  margin-bottom: var(--component-adminPortal-accountsPage-settingsSection-title-marginBottom);
  font-size: var(--component-adminPortal-accountsPage-settingsSection-title-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-settingsSection-title-fontWeight);
}

/* Test counts report - simple list layout */
.test-counts-report {
  display: flex;
  flex-direction: column;
  padding: var(--component-adminPortal-modal-testCountPopup-report-padding-horizontal);
}

.test-counts-report-date {
  font-size: var(--component-adminPortal-modal-testCountPopup-label-fontSize);
  color: var(--component-adminPortal-page-text-muted);
  margin-bottom: var(--component-adminPortal-modal-testCountPopup-breakdown-marginTop);
  text-align: right;
}

.test-counts-line-item {
  display: flex;
  justify-content: space-between;
  padding: var(--component-adminPortal-modal-testCountPopup-label-marginTop) 0;
  border-bottom: var(--component-adminPortal-modal-testCountPopup-borderWidth) solid var(--component-adminPortal-page-border-default);
}

.test-counts-label {
  color: var(--component-adminPortal-page-text-primary);
}

.test-counts-value {
  font-weight: var(--component-adminPortal-page-typography-fontWeight-semibold);
  color: var(--component-adminPortal-page-text-primary);
}

.test-counts-section-divider {
  font-weight: var(--component-adminPortal-page-typography-fontWeight-semibold);
  color: var(--component-adminPortal-page-text-primary);
  margin-top: var(--component-adminPortal-modal-testCountPopup-breakdown-marginTop);
  margin-bottom: var(--component-adminPortal-modal-testCountPopup-label-marginTop);
  padding-bottom: var(--component-adminPortal-modal-testCountPopup-label-marginTop);
  border-bottom: var(--component-adminPortal-modal-testCountPopup-borderWidth) solid var(--component-adminPortal-page-border-default);
}

.test-counts-empty {
  text-align: center;
  color: var(--component-adminPortal-page-text-muted);
  font-style: italic;
  padding: var(--component-adminPortal-modal-testCountPopup-empty-padding);
}

/* Print styles */
@media print {
  .test-counts-report {
    padding: var(--component-adminPortal-modal-testCountPopup-report-padding-print);
  }
}

/* Notes section */
.notes-list {
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
}

.note-item {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

.note-item .inline-edit {
  flex: 1;
}

[data-theme="light"] .note-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .note-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

.notes-add-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.notes-input {
  width: 100%;
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  resize: vertical;
  min-height: 60px;
}

[data-theme="light"] .notes-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .notes-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.notes-input:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="light"] .notes-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

[data-theme="dark"] .notes-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

/* Sales Rep Section */

/* Inline display for card list view */
.sales-reps-inline {
  display: inline;
}

.sales-rep-chip {
  display: inline;
}

.sales-rep-separator {
  color: var(--component-adminPortal-page-text-muted);
}

/* Empty state */
.sales-reps-empty {
  font-style: italic;
}

.sales-reps-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
}

/* Total summary for multiple reps */
.sales-reps-total {
  margin-top: var(--component-adminPortal-inlineEdit-iconGap);
  padding-top: var(--component-adminPortal-inlineEdit-iconGap);
  border-top: 1px solid var(--component-adminPortal-page-border-default);
}

.sales-reps-total-value {
  font-weight: var(--component-adminPortal-button-typography-fontWeight-bold, 600);
}

.sales-reps-total-valid {
  color: var(--component-adminPortal-page-status-success);
}

.sales-reps-total-warning {
  color: var(--component-adminPortal-page-status-warning);
}

.sales-reps-total-error {
  color: var(--component-adminPortal-page-status-error);
}

.sales-reps-total-hint {
  font-size: 0.85em;
  font-style: italic;
  color: var(--component-adminPortal-page-text-muted);
}

/* Validation errors */
.sales-reps-validation-errors {
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  background-color: var(--component-adminPortal-page-status-error-background);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

.sales-reps-validation-error {
  color: var(--component-adminPortal-page-status-error);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
}

[data-theme="dark"] .sales-reps-validation-errors {
  background-color: rgba(220, 38, 38, 0.1);
}

.sales-rep-item {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  position: relative;
}

[data-theme="light"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

.sales-rep-item .delete-user-button {
  position: absolute;
  top: var(--component-adminPortal-inlineEdit-padding-top);
  right: var(--component-adminPortal-inlineEdit-padding-right);
}

.sales-rep-add-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.sales-rep-add-row {
  display: flex;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  width: 100%;
  flex-wrap: wrap;
}

.sales-rep-add-row .sales-rep-select {
  flex: 2;
  min-width: 150px;
}

.sales-rep-add-row .sales-rep-input-commission {
  flex: 0 0 80px;
  width: 80px;
  text-align: center;
}

.sales-rep-add-row .sales-rep-select-role {
  flex: 1;
  min-width: 100px;
}

.sales-rep-add-form .sales-rep-input,
.sales-rep-add-form .sales-rep-select {
  width: 100%;
}

/* Responsive: stack add form vertically on small screens */
@media (max-width: 480px) {
  .sales-rep-add-row {
    flex-direction: column;
  }
  
  .sales-rep-add-row .sales-rep-select,
  .sales-rep-add-row .sales-rep-input-commission,
  .sales-rep-add-row .sales-rep-select-role {
    flex: none;
    width: 100%;
  }
}

.sales-rep-select {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  cursor: pointer;
}

[data-theme="light"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.sales-rep-select:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

.sales-rep-select-inline {
  width: auto;
  min-width: var(--component-adminPortal-accountsPage-select-minWidth, 12rem);
}

/* Inline select editing mode */
.inline-select-editing {
  display: inline-flex;
  align-items: center;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.sales-rep-input {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="light"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.sales-rep-input:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="light"] .sales-rep-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

[data-theme="dark"] .sales-rep-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

/* Calculated Values */
.calculated-value {
  font-weight: var(--component-adminPortal-button-typography-fontWeight-bold);
}

.calculated-label {
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-style: italic;
}

/* Client Subscriptions/Payments List */
.client-subscriptions-list,
.client-payments-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
}

/* Last calculated timestamp */
.field-timestamp {
  margin-top: 1rem;
  padding-top: 0.75rem;
  font-size: 0.85rem;
}

[data-theme="light"] .field-timestamp {
  border-top: 1px solid var(--component-adminPortal-page-border-default);
  color: var(--component-adminPortal-page-text-muted);
}

[data-theme="dark"] .field-timestamp {
  border-top: 1px solid var(--component-adminPortal-page-border-default);
  color: var(--component-adminPortal-page-text-muted);
}

.timestamp-label {
  font-weight: 500;
}

.timestamp-value {
  font-style: italic;
}
/* Users page styles */

.users-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
  gap: var(--component-adminPortal-users-pageHeader-gap);
}

.users-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-grid-gap);
  margin-top: var(--component-adminPortal-usersPage-grid-margin-top);
  margin-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}

/* User Card Styling */
.user-card {
  margin: 0 !important;
  overflow: hidden;
}

.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--component-adminPortal-modal-body-gap);
  overflow: hidden;
}

.user-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-userCard-info-gap);
  min-width: 0;
  overflow: hidden;
}

.user-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
}

.user-card-row strong {
  min-width: 100px;
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.user-card-row > *:not(strong) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Responsive - stack labels and values vertically */
@media (max-width: 768px) {
  .user-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .user-card-row strong {
    min-width: auto;
  }
}
/* Settings page styles */

.settings-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--component-adminPortal-settingsPage-header-margin-bottom);
}

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-grid-gap);
  margin-top: var(--component-adminPortal-settingsPage-grid-margin-top);
}

/* Section Title - uses existing modal title tokens */
.settings-section-title {
  margin: 0;
  margin-top: var(--component-adminPortal-settingsPage-grid-margin-top);
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  text-transform: var(--component-adminPortal-page-typography-fontStyle);
}

[data-theme="light"] .settings-section-title {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .settings-section-title {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

/* Actions Section - uses existing card tokens */
.settings-actions-section {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-grid-gap);
  margin-top: var(--component-adminPortal-settingsPage-grid-margin-top);
}

.settings-action-card {
  margin: 0 !important;
  width: 100%;
}

.settings-action-header {
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
}

.settings-action-title {
  margin: 0;
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  font-size: var(--component-adminPortal-card-typography-heading-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
}

[data-theme="light"] .settings-action-title {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .settings-action-title {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.settings-action-description {
  margin: 0;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .settings-action-description {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .settings-action-description {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.settings-action-controls {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  flex-wrap: wrap;
}

/* Status Messages - uses existing semantic colors */
.test-dates-success {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .test-dates-success {
  color: var(--component-adminPortal-page-success-light);
}

[data-theme="dark"] .test-dates-success {
  color: var(--component-adminPortal-page-success-dark);
}

.test-dates-error {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .test-dates-error {
  color: var(--component-adminPortal-page-danger-light);
}

[data-theme="dark"] .test-dates-error {
  color: var(--component-adminPortal-page-danger-dark);
}

/* Group Card Styling */
.group-card {
  margin: 0 !important;
  overflow: hidden;
  width: 100%;
}

.group-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
}

.group-name {
  margin: 0;
  font-size: var(--component-adminPortal-card-typography-heading-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
}

[data-theme="light"] .group-name {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .group-name {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

/* Delete Group Button - uses existing close button tokens */
.delete-group-button {
  width: var(--component-adminPortal-button-closeButton-size);
  height: var(--component-adminPortal-button-closeButton-size);
  border-radius: var(--component-adminPortal-button-closeButton-borderRadius);
  border-style: var(--component-adminPortal-button-closeButton-borderStyle);
  border-width: var(--component-adminPortal-button-closeButton-borderWidth);
  font-size: var(--component-adminPortal-modal-closeButton-typography-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: transform 0.1s ease;
}

[data-theme="light"] .delete-group-button {
  background-color: var(--component-adminPortal-page-danger-light);
  color: var(--component-adminPortal-modal-closeButton-icon-color-light);
  border-color: var(--component-adminPortal-page-danger-light);
}

[data-theme="dark"] .delete-group-button {
  background-color: var(--component-adminPortal-page-danger-dark);
  color: var(--component-adminPortal-modal-closeButton-icon-color-dark);
  border-color: var(--component-adminPortal-page-danger-dark);
}

.delete-group-button:hover {
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

.delete-group-button:active {
  transform: scale(var(--component-adminPortal-modal-closeButton-active-transform-scale));
}

.group-card-info {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  min-width: 0;
  overflow: hidden;
}

.group-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  min-width: 0;
  overflow: hidden;
}

.group-card-row strong {
  min-width: var(--component-adminPortal-card-padding-left);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.group-card-row > *:not(strong) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ============================================
   Admin Settings Section
   ============================================ */

.admin-settings-category-card {
  overflow: visible;
}

.admin-settings-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.admin-settings-category-info {
  flex: 1;
}

.admin-settings-category-meta {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.admin-settings-category-count {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .admin-settings-category-count {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
  opacity: 0.7;
}

[data-theme="dark"] .admin-settings-category-count {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
  opacity: 0.7;
}

.admin-settings-category-chevron {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  transition: transform 0.2s ease;
}

[data-theme="light"] .admin-settings-category-chevron {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .admin-settings-category-chevron {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.admin-settings-category-chevron.expanded {
  transform: rotate(180deg);
}

.admin-settings-category-content {
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  padding-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  border-top-width: var(--component-adminPortal-modal-button-border-borderWidth);
  border-top-style: solid;
}

[data-theme="light"] .admin-settings-category-content {
  border-top-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .admin-settings-category-content {
  border-top-color: var(--component-adminPortal-page-button-border-dark);
}

/* Column headers */
.admin-settings-column-headers {
  display: flex;
  align-items: center;
  padding: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  padding-bottom: 0;
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  text-transform: uppercase;
  opacity: 0.7;
}

[data-theme="light"] .admin-settings-column-headers {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .admin-settings-column-headers {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.admin-settings-column-name {
  flex: 1;
  min-width: 0;
}

.admin-settings-column-toggle {
  width: 60px;
  text-align: center;
  flex-shrink: 0;
}

.admin-settings-column-delete {
  width: 40px;
  flex-shrink: 0;
}

.admin-settings-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.admin-settings-item {
  padding: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  border-radius: var(--component-adminPortal-card-borderRadius);
  transition: background-color 0.15s ease;
}

[data-theme="light"] .admin-settings-item {
  background-color: var(--component-adminPortal-page-contentArea-background-light);
}

[data-theme="dark"] .admin-settings-item {
  background-color: var(--component-adminPortal-page-contentArea-background-dark);
}

/* Inline item layout */
.admin-settings-inline-item {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.admin-settings-inline-name {
  flex: 1;
  min-width: 0;
}

.admin-settings-inline-toggle {
  width: 60px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* Vertical layout for EHR items */
.admin-settings-inline-item--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.admin-settings-field-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.admin-settings-field-label {
  min-width: var(--component-adminPortal-accountsPage-fieldLabel-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

[data-theme="light"] .admin-settings-field-label {
  color: var(--component-adminPortal-settingsPage-fieldLabel-textColor-light);
}

[data-theme="dark"] .admin-settings-field-label {
  color: var(--component-adminPortal-settingsPage-fieldLabel-textColor-dark);
}

/* Responsive - stack labels and values vertically */
@media (max-width: 768px) {
  .admin-settings-inline-item--vertical .admin-settings-field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-accountsPage-userCard-row-gap-mobile);
  }

  .admin-settings-inline-item--vertical .admin-settings-field-label {
    min-width: auto;
  }
}


.admin-settings-item.editing {
  flex-direction: column;
  align-items: stretch;
  gap: var(--component-adminPortal-settingsPage-groupCard-info-gap);
}

.admin-settings-item.new-item {
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  border-style: dashed;
}

[data-theme="light"] .admin-settings-item.new-item {
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .admin-settings-item.new-item {
  border-color: var(--component-adminPortal-page-button-border-dark);
}

.admin-settings-item-details {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.admin-settings-item-name {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .admin-settings-item-name {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .admin-settings-item-name {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.admin-settings-item-meta {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  opacity: 0.7;
}

[data-theme="light"] .admin-settings-item-meta {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .admin-settings-item-meta {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.admin-settings-item-status {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  padding: 2px 8px;
  border-radius: var(--component-adminPortal-card-borderRadius);
}

[data-theme="light"] .admin-settings-item-status.active {
  background-color: var(--component-adminPortal-page-success-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .admin-settings-item-status.active {
  background-color: var(--component-adminPortal-page-success-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .admin-settings-item-status.inactive {
  background-color: var(--component-adminPortal-page-danger-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .admin-settings-item-status.inactive {
  background-color: var(--component-adminPortal-page-danger-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

.admin-settings-item-actions {
  display: flex;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  flex-shrink: 0;
}

.admin-settings-item.editing .admin-settings-item-actions {
  justify-content: flex-end;
}

/* Edit Form */
.admin-settings-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  width: 100%;
}

.admin-settings-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.admin-settings-form-label {
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
}

[data-theme="light"] .admin-settings-form-label {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .admin-settings-form-label {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.admin-settings-form-row-checkbox {
  flex-direction: row;
  align-items: center;
}

.admin-settings-form-row-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  cursor: pointer;
}

.admin-settings-form-row-checkbox input[type="checkbox"] {
  width: var(--component-adminPortal-form-checkbox-size);
  height: var(--component-adminPortal-form-checkbox-size);
  cursor: pointer;
}

.admin-settings-input {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--component-adminPortal-modal-input-padding-top);
  padding-right: var(--component-adminPortal-modal-input-padding-right);
  padding-bottom: var(--component-adminPortal-modal-input-padding-bottom);
  padding-left: var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="light"] .admin-settings-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .admin-settings-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.admin-settings-input:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="light"] .admin-settings-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="dark"] .admin-settings-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="light"] .admin-settings-textarea::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="dark"] .admin-settings-textarea::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

/* Small inputs inherit width: 100% from .admin-settings-input */

.admin-settings-textarea {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--component-adminPortal-inlineEdit-padding-top);
  padding-right: var(--component-adminPortal-inlineEdit-padding-right);
  padding-bottom: var(--component-adminPortal-inlineEdit-padding-bottom);
  padding-left: var(--component-adminPortal-inlineEdit-padding-left);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  resize: vertical;
  min-height: var(--component-adminPortal-card-padding-left);
}

[data-theme="light"] .admin-settings-textarea {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .admin-settings-textarea {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.admin-settings-textarea:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

/* Buttons */
.admin-settings-edit-button,
.admin-settings-save-button,
.admin-settings-cancel-button,
.admin-settings-delete-button,
.admin-settings-add-button {
  padding-top: var(--component-adminPortal-modal-button-padding-top);
  padding-bottom: var(--component-adminPortal-modal-button-padding-bottom);
  padding-left: var(--component-adminPortal-modal-button-padding-left);
  padding-right: var(--component-adminPortal-modal-button-padding-right);
  border-radius: var(--component-adminPortal-card-borderRadius);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.1s ease;
}

/* Hover states - Edit Button (neutral) */
[data-theme="light"] .admin-settings-edit-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

[data-theme="dark"] .admin-settings-edit-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

/* Hover states - Save Button (success - use brightness) */
[data-theme="light"] .admin-settings-save-button:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

[data-theme="dark"] .admin-settings-save-button:hover:not(:disabled) {
  filter: brightness(1.2);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

/* Hover states - Cancel Button (secondary - add background) */
[data-theme="light"] .admin-settings-cancel-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

[data-theme="dark"] .admin-settings-cancel-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

/* Hover states - Delete Button (danger - use brightness) */
[data-theme="light"] .admin-settings-delete-button:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

[data-theme="dark"] .admin-settings-delete-button:hover:not(:disabled) {
  filter: brightness(1.2);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

/* Hover states - Add Button (neutral) */
[data-theme="light"] .admin-settings-add-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

[data-theme="dark"] .admin-settings-add-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

.admin-settings-edit-button:active:not(:disabled),
.admin-settings-save-button:active:not(:disabled),
.admin-settings-cancel-button:active:not(:disabled),
.admin-settings-delete-button:active:not(:disabled),
.admin-settings-add-button:active:not(:disabled) {
  transform: scale(var(--component-adminPortal-button-active-transform-scale));
}

.admin-settings-edit-button:disabled,
.admin-settings-save-button:disabled,
.admin-settings-cancel-button:disabled,
.admin-settings-delete-button:disabled,
.admin-settings-add-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Edit Button - neutral */
[data-theme="light"] .admin-settings-edit-button {
  background-color: var(--component-adminPortal-page-button-background-light);
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .admin-settings-edit-button {
  background-color: var(--component-adminPortal-page-button-background-dark);
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}

/* Save Button - success */
[data-theme="light"] .admin-settings-save-button {
  background-color: var(--component-adminPortal-page-success-light);
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-success-light);
}

[data-theme="dark"] .admin-settings-save-button {
  background-color: var(--component-adminPortal-page-success-dark);
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-success-dark);
}

/* Cancel Button - neutral/secondary */
[data-theme="light"] .admin-settings-cancel-button {
  background-color: transparent;
  color: var(--component-adminPortal-page-contentArea-card-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .admin-settings-cancel-button {
  background-color: transparent;
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}

/* Delete Button - danger */
[data-theme="light"] .admin-settings-delete-button {
  background-color: var(--component-adminPortal-page-danger-light);
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-danger-light);
}

[data-theme="dark"] .admin-settings-delete-button {
  background-color: var(--component-adminPortal-page-danger-dark);
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-danger-dark);
}

/* Add Button Container */
.admin-settings-add-controls {
  display: flex;
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
}

/* Add Button - primary */
.admin-settings-add-button {
  /* No width: 100% - let it size to content */
}

[data-theme="light"] .admin-settings-add-button {
  background-color: var(--component-adminPortal-page-button-background-light);
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .admin-settings-add-button {
  background-color: var(--component-adminPortal-page-button-background-dark);
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}

/* Error message */
.admin-settings-error {
  padding: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  border-radius: var(--component-adminPortal-card-borderRadius);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .admin-settings-error {
  background-color: var(--component-adminPortal-page-danger-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .admin-settings-error {
  background-color: var(--component-adminPortal-page-danger-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

/* Responsive - stack labels and values vertically */
@media (max-width: 768px) {
  .group-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-settingsPage-groupCard-row-gap-mobile);
  }

  .group-card-row strong {
    min-width: auto;
  }

  .settings-action-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-settings-category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  }

  .admin-settings-category-meta {
    width: 100%;
    justify-content: space-between;
  }

  .admin-settings-item:not(.editing) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  }

  .admin-settings-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================
   Unmapped Records Modal Styles
   ============================================ */

.admin-settings-loading,
.admin-settings-empty {
  padding: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  text-align: center;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .admin-settings-loading,
[data-theme="light"] .admin-settings-empty {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
  opacity: 0.7;
}

[data-theme="dark"] .admin-settings-loading,
[data-theme="dark"] .admin-settings-empty {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
  opacity: 0.7;
}

/* Modal Overlay */
.unmapped-records-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

[data-theme="light"] .unmapped-records-modal-overlay {
  background: rgba(0, 0, 0, var(--component-adminPortal-modal-backdrop-opacity-light));
}

[data-theme="dark"] .unmapped-records-modal-overlay {
  background: rgba(0, 0, 0, var(--component-adminPortal-modal-backdrop-opacity-dark));
}

/* Modal */
.unmapped-records-modal {
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-card-borderRadius);
  box-shadow: var(--component-adminPortal-modal-shadow);
}

[data-theme="light"] .unmapped-records-modal {
  background-color: var(--component-adminPortal-page-contentArea-card-background-light);
}

[data-theme="dark"] .unmapped-records-modal {
  background-color: var(--component-adminPortal-page-contentArea-card-background-dark);
}

.unmapped-records-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--component-adminPortal-card-padding-top) var(--component-adminPortal-card-padding-right);
  border-bottom-width: var(--component-adminPortal-modal-button-border-borderWidth);
  border-bottom-style: solid;
}

[data-theme="light"] .unmapped-records-modal-header {
  border-bottom-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .unmapped-records-modal-header {
  border-bottom-color: var(--component-adminPortal-page-button-border-dark);
}

.unmapped-records-modal-title {
  margin: 0;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
}

[data-theme="light"] .unmapped-records-modal-title {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .unmapped-records-modal-title {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.unmapped-records-modal-close {
  width: var(--component-adminPortal-button-closeButton-size);
  height: var(--component-adminPortal-button-closeButton-size);
  border-radius: var(--component-adminPortal-button-closeButton-borderRadius);
  border-style: var(--component-adminPortal-button-closeButton-borderStyle);
  border-width: var(--component-adminPortal-button-closeButton-borderWidth);
  font-size: var(--component-adminPortal-modal-closeButton-typography-fontSize);
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: transform 0.1s ease;
}

[data-theme="light"] .unmapped-records-modal-close {
  background-color: transparent;
  color: var(--component-adminPortal-page-contentArea-card-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .unmapped-records-modal-close {
  background-color: transparent;
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}

.unmapped-records-modal-close:hover {
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

.unmapped-records-modal-body {
  padding: var(--component-adminPortal-card-padding-top) var(--component-adminPortal-card-padding-right) var(--component-adminPortal-card-padding-bottom) var(--component-adminPortal-card-padding-left);
  overflow-y: auto;
  flex: 1;
}

.unmapped-records-modal-label {
  display: block;
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .unmapped-records-modal-label {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .unmapped-records-modal-label {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.unmapped-records-modal-input,
.unmapped-records-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--component-adminPortal-modal-input-padding-top);
  padding-right: var(--component-adminPortal-modal-input-padding-right);
  padding-bottom: var(--component-adminPortal-modal-input-padding-bottom);
  padding-left: var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
}

[data-theme="light"] .unmapped-records-modal-input,
[data-theme="light"] .unmapped-records-modal-textarea {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .unmapped-records-modal-input,
[data-theme="dark"] .unmapped-records-modal-textarea {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.unmapped-records-modal-input:focus,
.unmapped-records-modal-textarea:focus {
  outline: none;
}

[data-theme="light"] .unmapped-records-modal-input::placeholder,
[data-theme="light"] .unmapped-records-modal-textarea::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

[data-theme="dark"] .unmapped-records-modal-input::placeholder,
[data-theme="dark"] .unmapped-records-modal-textarea::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

.unmapped-records-modal-textarea {
  resize: vertical;
  min-height: 60px;
}

.unmapped-records-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
}

/* Client List in Modal */
.unmapped-records-client-list {
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.unmapped-records-client-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  padding: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  border-radius: var(--component-adminPortal-card-borderRadius);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.1s ease;
}

[data-theme="light"] .unmapped-records-client-item {
  background-color: var(--component-adminPortal-page-contentArea-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}

[data-theme="dark"] .unmapped-records-client-item {
  background-color: var(--component-adminPortal-page-contentArea-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}

.unmapped-records-client-item:hover:not(:disabled) {
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}

.unmapped-records-client-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.unmapped-records-client-name {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .unmapped-records-client-name {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .unmapped-records-client-name {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

.unmapped-records-client-meta {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  opacity: 0.7;
}

[data-theme="light"] .unmapped-records-client-meta {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}

[data-theme="dark"] .unmapped-records-client-meta {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}

/* Responsive Modal */
@media (max-width: 768px) {
  .unmapped-records-modal {
    width: 95%;
    max-height: 90vh;
  }
}
/* Audit page styles - uses token system */
/* Generated from filterbutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #0077C8;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #0077C8;
  --filterbutton-textTransform: uppercase;
}
[data-theme="dark"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #FFFFFF;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #FFFFFF;
  --filterbutton-textTransform: uppercase;
}
/* Override FilterBar responsive centering - keep left-aligned */
.filter-bar .filter-button {
  text-align: left;
}
@media (max-width: 48rem) {
  .filter-bar {
    align-items: flex-start !important;
  }
  
  .filter-bar .filter-button {
    width: auto !important;
  }
}
/* Pagination */
.audit-pagination {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}
.audit-pagination-button {
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--component-adminPortal-card-borderRadius);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  cursor: pointer;
  transition: transform 0.1s ease;
}
[data-theme="light"] .audit-pagination-button {
  background-color: transparent;
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}
[data-theme="dark"] .audit-pagination-button {
  background-color: transparent;
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}
.audit-pagination-button.active {
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
}
[data-theme="light"] .audit-pagination-button.active {
  background-color: var(--component-adminPortal-page-button-background-light);
  color: var(--component-adminPortal-page-button-text-light);
}
[data-theme="dark"] .audit-pagination-button.active {
  background-color: var(--component-adminPortal-page-button-background-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}
.audit-pagination-button:hover:not(:disabled):not(.active) {
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}
.audit-pagination-button:active:not(:disabled) {
  transform: scale(var(--component-adminPortal-button-active-transform-scale));
}
.audit-pagination-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.audit-search-row {
  display: flex;
  gap: var(--component-adminPortal-users-pageHeader-gap);
  align-items: stretch;
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}
.audit-search-row > *:first-child {
  flex: 1;
}
.audit-search-button {
  padding-top: var(--component-adminPortal-modal-button-padding-top);
  padding-bottom: var(--component-adminPortal-modal-button-padding-bottom);
  padding-left: var(--component-adminPortal-modal-button-padding-left);
  padding-right: var(--component-adminPortal-modal-button-padding-right);
  border-radius: var(--component-adminPortal-card-borderRadius);
  border-style: var(--component-adminPortal-modal-button-border-borderStyle);
  border-width: var(--component-adminPortal-modal-button-border-borderWidth);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.1s ease;
  white-space: nowrap;
}
[data-theme="light"] .audit-search-button {
  background-color: var(--component-adminPortal-page-button-background-light);
  color: var(--component-adminPortal-page-button-text-light);
  border-color: var(--component-adminPortal-page-button-border-light);
}
[data-theme="dark"] .audit-search-button {
  background-color: var(--component-adminPortal-page-button-background-dark);
  color: var(--component-adminPortal-page-button-text-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
}
.audit-search-button:hover:not(:disabled) {
  transform: scale(var(--component-adminPortal-button-activeAlt-transform-scale));
}
.audit-search-button:active:not(:disabled) {
  transform: scale(var(--component-adminPortal-button-active-transform-scale));
}
.audit-search-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.audit-results-summary {
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  font-size: var(--filterbutton-fontSize);
  font-family: var(--filterbutton-fontFamily);
  font-weight: var(--filterbutton-fontWeight);
  text-transform: var(--filterbutton-textTransform);
  color: var(--filterbutton-text);
}
.audit-error {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}
[data-theme="light"] .audit-error {
  color: var(--component-adminPortal-page-danger-light);
}
[data-theme="dark"] .audit-error {
  color: var(--component-adminPortal-page-danger-dark);
}
.audit-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-grid-gap);
  margin-top: var(--component-adminPortal-usersPage-grid-margin-top);
  padding-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}
/* Audit Card Styling */
.audit-card {
  margin: 0 !important;
  overflow: hidden;
  cursor: pointer;
}
.audit-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--component-adminPortal-modal-body-gap);
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  flex-wrap: wrap;
}
.audit-card-main {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}
.audit-field {
  font-weight: var(--component-adminPortal-card-typography-heading-fontWeight);
  font-size: var(--component-adminPortal-card-typography-heading-fontSize);
}
[data-theme="light"] .audit-field {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-field {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
.audit-timestamp {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  white-space: nowrap;
}
[data-theme="light"] .audit-timestamp {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
  opacity: 0.7;
}
[data-theme="dark"] .audit-timestamp {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
  opacity: 0.7;
}
/* Action Badge - styled like labels */
.audit-action-badge {
  display: inline-block;
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  text-transform: uppercase;
  white-space: nowrap;
}
[data-theme="light"] .audit-action-badge {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-action-badge {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
.audit-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
}
.audit-card-row strong {
  min-width: 80px;
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}
[data-theme="light"] .audit-card-row strong {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-card-row strong {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
.audit-card-row > *:not(strong) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}
[data-theme="light"] .audit-card-row > *:not(strong) {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-card-row > *:not(strong) {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
.audit-card-row-vertical {
  flex-direction: column;
  align-items: flex-start;
}
.audit-card-row-vertical strong {
  min-width: auto;
  margin-bottom: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}
.audit-card-details {
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  padding-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  border-top-style: solid;
  border-top-width: var(--component-adminPortal-modal-input-border-borderWidth);
}
[data-theme="light"] .audit-card-details {
  border-top-color: var(--component-adminPortal-page-contentArea-card-border-light);
}
[data-theme="dark"] .audit-card-details {
  border-top-color: var(--component-adminPortal-page-contentArea-card-border-dark);
}
.audit-mono {
  font-family: monospace;
}
.audit-value {
  margin: 0;
  padding: var(--component-adminPortal-modal-input-padding-top);
  border-radius: var(--component-adminPortal-card-borderRadius);
  font-family: monospace;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}
[data-theme="light"] .audit-value {
  background-color: var(--component-adminPortal-page-contentArea-background-light);
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-value {
  background-color: var(--component-adminPortal-page-contentArea-background-dark);
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
.audit-card-expand-hint {
  margin-top: var(--component-adminPortal-settingsPage-groupCard-info-gap);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  text-align: center;
  opacity: 0.5;
}
[data-theme="light"] .audit-card-expand-hint {
  color: var(--component-adminPortal-page-contentArea-card-text-light);
}
[data-theme="dark"] .audit-card-expand-hint {
  color: var(--component-adminPortal-page-contentArea-card-text-dark);
}
/* Responsive - stack on mobile */
@media (max-width: 768px) {
  .audit-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .audit-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .audit-card-row strong {
    min-width: auto;
  }

  .audit-search-row {
    flex-direction: column;
  }
}
/* Sales Reps page styles - uses design tokens only */

/* ============================================================================
   Page Layout
   ============================================================================ */
.filter-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
  gap: var(--component-adminPortal-users-pageHeader-gap);
}

.sales-reps-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
  padding-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}

/* ============================================================================
   Card Row Styling (matches Users page pattern)
   ============================================================================ */
.sales-rep-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.sales-rep-card-row strong {
  min-width: var(--component-adminPortal-accountsPage-fieldLabel-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.sales-rep-card-row > *:not(strong):not(.toggle-switch-container):not(.sales-rep-select) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Dropdown select for Paid As */
.sales-rep-select {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  cursor: pointer;
}

[data-theme="light"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.sales-rep-select:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

/* ============================================================================
   Card Actions
   ============================================================================ */
.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}

/* Button fallback for error state retry */
.sales-rep-button-primary {
  padding: var(--component-adminPortal-page-button-padding-top) var(--component-adminPortal-page-button-padding-right) var(--component-adminPortal-page-button-padding-bottom) var(--component-adminPortal-page-button-padding-left);
  border-radius: var(--component-adminPortal-page-button-borderRadius);
  border-width: var(--component-adminPortal-page-button-borderWidth);
  border-style: var(--component-adminPortal-page-button-borderStyle);
  font-family: var(--component-adminPortal-page-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-page-button-typography-fontWeight);
  font-size: var(--component-adminPortal-page-button-typography-fontSize);
  cursor: pointer;
  transition: all var(--component-adminPortal-page-transition-duration) ease;
}

[data-theme="light"] .sales-rep-button-primary {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .sales-rep-button-primary {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .sales-rep-button-primary:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .sales-rep-button-primary:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

/* ============================================================================
   Read-only Notice
   ============================================================================ */
.read-only-notice {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  text-align: center;
  margin-bottom: var(--component-adminPortal-accountsPage-grid-margin-top);
}

[data-theme="light"] .read-only-notice {
  background-color: var(--component-adminPortal-page-background-subtle);
  color: var(--component-adminPortal-page-text-muted);
}

[data-theme="dark"] .read-only-notice {
  background-color: var(--component-adminPortal-page-background-subtle);
  color: var(--component-adminPortal-page-text-muted);
}

/* ============================================================================
   AddSalesRepPopup (follows AddUserPopup pattern)
   ============================================================================ */

/* Overlay */
.add-sales-rep-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: salesRepFadeIn 200ms ease;
}

[data-theme="light"] .add-sales-rep-popup-overlay {
  background: var(--component-adminPortal-page-modal-overlay-light);
}

[data-theme="dark"] .add-sales-rep-popup-overlay {
  background: var(--component-adminPortal-page-modal-overlay-dark);
}

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

/* Container */
.add-sales-rep-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-width: var(--component-adminPortal-modal-addUserPopup-minWidth);
  max-width: var(--component-adminPortal-modal-addUserPopup-maxWidth);
  min-height: var(--component-adminPortal-modal-addUserPopup-minHeight);
  max-height: var(--component-adminPortal-modal-addUserPopup-maxHeight);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: salesRepSlideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="light"] .add-sales-rep-popup {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .add-sales-rep-popup {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

@keyframes salesRepSlideIn {
  from {
    transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Header */
.add-sales-rep-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: var(--component-adminPortal-modal-header-padding-top);
  padding-right: var(--component-adminPortal-modal-header-padding-right);
  padding-bottom: var(--component-adminPortal-modal-header-padding-bottom);
  padding-left: var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
}

[data-theme="light"] .add-sales-rep-popup-header {
  background: var(--component-adminPortal-page-modal-header-background-light);
  border-bottom-color: var(--component-adminPortal-page-modal-header-border-light);
}

[data-theme="dark"] .add-sales-rep-popup-header {
  background: var(--component-adminPortal-page-modal-header-background-dark);
  border-bottom-color: var(--component-adminPortal-page-modal-header-border-dark);
}

.add-sales-rep-popup-header h2 {
  margin-top: var(--component-adminPortal-modal-title-margin-top);
  margin-right: 0;
  margin-bottom: 0;
  margin-left: var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  width: 100%;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-family: inherit;
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  line-height: 1.2;
}

[data-theme="light"] .add-sales-rep-popup-header h2 {
  color: var(--component-adminPortal-page-modal-text-light);
}

[data-theme="dark"] .add-sales-rep-popup-header h2 {
  color: var(--component-adminPortal-page-modal-text-dark);
}

/* Close button */
.add-sales-rep-popup-close-button {
  position: relative;
  width: var(--component-adminPortal-button-closeButton-size);
  height: var(--component-adminPortal-button-closeButton-size);
  border: none;
  border-radius: var(--component-adminPortal-button-closeButton-borderRadius);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all var(--component-adminPortal-page-transition-duration) ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="light"] .add-sales-rep-popup-close-button {
  background: var(--component-adminPortal-page-closeButton-background-light);
}

[data-theme="dark"] .add-sales-rep-popup-close-button {
  background: var(--component-adminPortal-page-closeButton-background-dark);
}

[data-theme="light"] .add-sales-rep-popup-close-button:hover {
  background: var(--component-adminPortal-page-closeButton-hover-background-light);
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

[data-theme="dark"] .add-sales-rep-popup-close-button:hover {
  background: var(--component-adminPortal-page-closeButton-hover-background-dark);
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

.add-sales-rep-popup-close-button:active {
  transform: scale(var(--component-adminPortal-modal-closeButton-active-transform-scale));
}

.add-sales-rep-popup-close-icon {
  font-size: var(--component-adminPortal-modal-closeButton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--component-adminPortal-page-transition-duration) ease;
  user-select: none;
}

[data-theme="light"] .add-sales-rep-popup-close-icon {
  color: var(--component-adminPortal-modal-closeButton-icon-color-light);
}

[data-theme="dark"] .add-sales-rep-popup-close-icon {
  color: var(--component-adminPortal-modal-closeButton-icon-color-dark);
}

.add-sales-rep-popup-close-button:hover .add-sales-rep-popup-close-icon {
  opacity: 1;
}

/* Body */
.add-sales-rep-popup-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--component-adminPortal-modal-body-padding-top);
  padding-right: var(--component-adminPortal-modal-body-padding-right);
  padding-bottom: var(--component-adminPortal-modal-body-padding-bottom);
  padding-left: var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}

.add-sales-rep-popup-body form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--component-adminPortal-modal-body-gap);
}

/* Form fields */
.add-sales-rep-popup-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--component-adminPortal-modal-addUserPopup-field-gap);
}

.add-sales-rep-popup-field label {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  white-space: nowrap;
}

[data-theme="light"] .add-sales-rep-popup-field label {
  color: var(--component-adminPortal-page-modal-text-light);
}

[data-theme="dark"] .add-sales-rep-popup-field label {
  color: var(--component-adminPortal-page-modal-text-dark);
}

.add-sales-rep-popup-input {
  flex: 1;
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-page-input-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-weight: var(--component-adminPortal-page-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  transition: all var(--component-adminPortal-page-transition-duration) ease;
  box-sizing: border-box;
}

[data-theme="light"] .add-sales-rep-popup-input {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .add-sales-rep-popup-input {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

.add-sales-rep-popup-input:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}

[data-theme="light"] .add-sales-rep-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}

[data-theme="dark"] .add-sales-rep-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}

[data-theme="light"] .add-sales-rep-popup-input::placeholder {
  color: var(--component-adminPortal-page-searchBar-placeholder-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
}

[data-theme="dark"] .add-sales-rep-popup-input::placeholder {
  color: var(--component-adminPortal-page-searchBar-placeholder-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
}

/* Dropdown select for Paid As in popup */
.add-sales-rep-popup-select {
  flex: 1;
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-page-input-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-weight: var(--component-adminPortal-page-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  cursor: pointer;
}

[data-theme="light"] .add-sales-rep-popup-select {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .add-sales-rep-popup-select {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

.add-sales-rep-popup-select:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}

[data-theme="light"] .add-sales-rep-popup-select:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}

[data-theme="dark"] .add-sales-rep-popup-select:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}

/* Actions */
.add-sales-rep-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--component-adminPortal-modal-headerActions-gap);
  margin-top: auto;
  padding-top: var(--component-adminPortal-modal-addUserPopup-actions-margin-top);
}

.add-sales-rep-popup-cancel,
.add-sales-rep-popup-submit {
  padding: var(--component-adminPortal-modal-button-padding-top) var(--component-adminPortal-modal-button-padding-right) var(--component-adminPortal-modal-button-padding-bottom) var(--component-adminPortal-modal-button-padding-left);
  border-radius: var(--component-adminPortal-page-button-borderRadius);
  border-width: var(--component-adminPortal-page-button-borderWidth);
  border-style: var(--component-adminPortal-page-button-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  cursor: pointer;
  transition: all var(--component-adminPortal-page-transition-duration) ease;
  white-space: nowrap;
}

[data-theme="light"] .add-sales-rep-popup-cancel {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .add-sales-rep-popup-cancel {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .add-sales-rep-popup-cancel:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .add-sales-rep-popup-cancel:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

[data-theme="light"] .add-sales-rep-popup-submit {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .add-sales-rep-popup-submit {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .add-sales-rep-popup-submit:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .add-sales-rep-popup-submit:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

.add-sales-rep-popup-cancel:disabled,
.add-sales-rep-popup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error message */
.add-sales-rep-popup-error {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

[data-theme="light"] .add-sales-rep-popup-error {
  color: var(--component-adminPortal-page-text-error-light);
  background-color: var(--component-adminPortal-page-background-subtle);
}

[data-theme="dark"] .add-sales-rep-popup-error {
  color: var(--component-adminPortal-page-text-error-dark);
  background-color: var(--component-adminPortal-page-background-subtle);
}

/* ============================================================================
   Email Field - wider to accommodate multiple emails
   ============================================================================ */
.sales-rep-email-edit .inline-edit-input {
  min-width: 280px;
  width: 100%;
}

.sales-rep-email-edit .inline-edit-editing {
  flex: 1;
  width: 100%;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 48rem) {
  .add-sales-rep-popup {
    width: var(--component-adminPortal-modal-width-responsive);
  }

  .add-sales-rep-popup-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .add-sales-rep-popup-input {
    width: 100%;
  }

  .add-sales-rep-popup-actions {
    flex-direction: column;
  }

  .add-sales-rep-popup-cancel,
  .add-sales-rep-popup-submit {
    width: 100%;
  }

  .sales-rep-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .sales-rep-card-row strong {
    min-width: auto;
  }
}
/* Subscriptions page styles */

.subscriptions-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
}

/* Field row - consistent with Accounts page */
.field-row {
  margin: 0 0 var(--component-adminPortal-accountsPage-userCard-row-gap) 0;
}

.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}

/* Subscription card row */
.subscription-card-row {
  margin: 0 0 var(--component-adminPortal-accountsPage-userCard-row-gap) 0;
}

/* Status badge - reuse accounts page tokens */
.subscription-status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
}

.subscription-status-badge.status-active {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.subscription-status-badge.status-past-due {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}

.subscription-status-badge.status-canceled {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}

.subscription-status-badge.status-trialing {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

.subscription-status-badge.status-incomplete {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}

.subscription-status-badge.status-paused {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}

/* Cancellation date - highlighted in red */
.cancellation-date {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
}

[data-theme="light"] .cancellation-date {
  color: var(--component-adminPortal-subscriptions-cancellationDate-textColor-light);
}

[data-theme="dark"] .cancellation-date {
  color: var(--component-adminPortal-subscriptions-cancellationDate-textColor-dark);
}

/* Provider history list */
.provider-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.provider-history-item {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

[data-theme="light"] .provider-history-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .provider-history-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

/* Discount pricing display */
.subscription-pricing {
  display: inline-flex;
  align-items: baseline;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
}

.list-price.strikethrough {
  text-decoration: line-through;
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
}

[data-theme="light"] .list-price.strikethrough {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
}

[data-theme="dark"] .list-price.strikethrough {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
}

.effective-price {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
}

.discount-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

/* Discount item in DetailPopup */
.discount-item {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

[data-theme="light"] .discount-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .discount-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

/* Discount summary in DetailPopup */
.discount-summary {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  padding-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-color: transparent;
  border-top-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .discount-summary {
  border-top-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

.discount-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.discount-summary-row .savings {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
}

.discount-summary-row.final-row {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
}

.discount-summary-row .final {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
}

/* Sales Rep styles */
.sales-reps-inline {
  display: inline;
}

.sales-rep-chip {
  display: inline;
}

.sales-rep-separator {
  color: var(--component-adminPortal-page-text-muted);
}

/* Empty state */
.sales-reps-empty {
  font-style: italic;
}

.sales-reps-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
}

/* Total summary for multiple reps */
.sales-reps-total {
  margin-top: var(--component-adminPortal-inlineEdit-iconGap);
  padding-top: var(--component-adminPortal-inlineEdit-iconGap);
  border-top: 1px solid var(--component-adminPortal-page-border-default);
}

.sales-reps-total-value {
  font-weight: var(--component-adminPortal-button-typography-fontWeight-bold, 600);
}

.sales-reps-total-valid {
  color: var(--component-adminPortal-page-status-success);
}

.sales-reps-total-warning {
  color: var(--component-adminPortal-page-status-warning);
}

.sales-reps-total-error {
  color: var(--component-adminPortal-page-status-error);
}

/* Validation errors */
.sales-reps-validation-errors {
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  background-color: var(--component-adminPortal-page-status-error-background);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

.sales-reps-validation-error {
  color: var(--component-adminPortal-page-status-error);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
}

[data-theme="dark"] .sales-reps-validation-errors {
  background-color: rgba(220, 38, 38, 0.1);
}

.sales-rep-item {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  position: relative;
}

[data-theme="light"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

.sales-rep-item .delete-user-button {
  position: absolute;
  top: var(--component-adminPortal-inlineEdit-padding-top);
  right: var(--component-adminPortal-inlineEdit-padding-right);
}

.sales-rep-add-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.sales-rep-add-row {
  display: flex;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  width: 100%;
  flex-wrap: wrap;
}

.sales-rep-add-row .sales-rep-select {
  flex: 2;
  min-width: 150px;
}

.sales-rep-add-row .sales-rep-input-commission {
  flex: 0 0 80px;
  width: 80px;
  text-align: center;
}

.sales-rep-add-row .sales-rep-select-role {
  flex: 1;
  min-width: 100px;
}

.sales-rep-add-form .sales-rep-input,
.sales-rep-add-form .sales-rep-select {
  width: 100%;
}

/* Responsive: stack add form vertically on small screens */
@media (max-width: 480px) {
  .sales-rep-add-row {
    flex-direction: column;
  }
  
  .sales-rep-add-row .sales-rep-select,
  .sales-rep-add-row .sales-rep-input-commission,
  .sales-rep-add-row .sales-rep-select-role {
    flex: none;
    width: 100%;
  }
}

.sales-rep-select {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  cursor: pointer;
}

[data-theme="light"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.sales-rep-select:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

.sales-rep-select-inline {
  width: auto;
  min-width: var(--component-adminPortal-accountsPage-select-minWidth, 12rem);
}

.sales-rep-input {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
}

[data-theme="light"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}

[data-theme="dark"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}

.sales-rep-input:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="light"] .sales-rep-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-light);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

[data-theme="dark"] .sales-rep-input::placeholder {
  color: var(--component-adminPortal-searchBar-color-text-dark);
  opacity: var(--component-adminPortal-opacity-placeholder);
}
/* Invoices page styles */
/* Generated from filterbutton.bundle.ts */
/* DO NOT EDIT - regenerate with: node tools/generate-css-vars.mjs */
[data-theme="light"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #0077C8;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #0077C8;
  --filterbutton-textTransform: uppercase;
}
[data-theme="dark"] {
  --filterbutton-active-textdecoration: underline;
  --filterbutton-background: transparent;
  --filterbutton-fontFamily: 'Raleway', sans-serif;
  --filterbutton-fontSize: 1.25rem;
  --filterbutton-fontWeight: 400;
  --filterbutton-hover-background: transparent;
  --filterbutton-hover-text: #FFFFFF;
  --filterbutton-hover-textdecoration: underline;
  --filterbutton-margin-left: 0.3125rem;
  --filterbutton-padding-bottom: 0.1875rem;
  --filterbutton-padding-left: 0.3125rem;
  --filterbutton-padding-right: 0.3125rem;
  --filterbutton-padding-top: 0;
  --filterbutton-text: #FFFFFF;
  --filterbutton-textTransform: uppercase;
}
/* ============================================================================
   Page Layout - Filter Bars (matches Commissions page)
   ============================================================================ */
.invoices-filters-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-page-spacing-cardGap);
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}
.invoices-filters-wrapper .filter-bar-container,
.invoices-filters-wrapper .month-filter-bar {
  margin-bottom: var(--component-adminPortal-page-spacing-title-top);
}
.invoices-filters-wrapper .filter-bar {
  margin-bottom: var(--component-adminPortal-page-spacing-title-top);
  padding-bottom: var(--component-adminPortal-page-spacing-title-top);
}
.invoices-filters-wrapper .month-filter-bar .filter-bar {
  padding-top: var(--component-adminPortal-page-spacing-title-top);
}
.filter-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--component-adminPortal-users-pageHeader-gap);
}
.month-filter-bar {
  /* margin controlled by wrapper */
}
/* ============================================================================
   Invoices Grid
   ============================================================================ */
.invoices-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
  padding-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}
/* Field row - consistent with Accounts page */
.field-row {
  margin: 0 0 var(--component-adminPortal-accountsPage-userCard-row-gap) 0;
}
.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}
/* Invoice card row */
.invoice-card-row {
  margin: 0 0 var(--component-adminPortal-accountsPage-userCard-row-gap) 0;
}
/* Status badge - reuse accounts page tokens */
.invoice-status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
}
.invoice-status-badge.status-succeeded {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}
.invoice-status-badge.status-pending {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}
.invoice-status-badge.status-draft {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}
.invoice-status-badge.status-failed {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}
.invoice-status-badge.status-refunded {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}
/* Refunded notice */
.invoice-refunded {
  color: var(--component-adminPortal-page-text-warning);
  font-style: italic;
}
/* Invoice card header with badge */
.invoice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}
.invoice-card-header h3 {
  margin: 0;
}
/* Commission Paid badge (card list) */
.invoice-commission-paid-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
}
/* Commission Paid banner (popup) */
.invoice-commission-paid-banner {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  padding: var(--component-adminPortal-card-padding-top) var(--component-adminPortal-card-padding-right);
  border-radius: var(--component-adminPortal-card-borderRadius);
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-inactive-backgroundColor);
  text-align: center;
  margin-bottom: var(--component-adminPortal-accountsPage-grid-gap);
}
/* Disabled state for add form when locked */
.sales-rep-add-form-disabled {
  opacity: 0.5;
  pointer-events: none;
}
/* Commission splits table */
.commission-splits-table {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}
.splits-header,
.splits-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
}
.splits-header {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}
[data-theme="light"] .splits-header {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}
[data-theme="dark"] .splits-header {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  background-color: var(--component-adminPortal-page-background-secondary);
}
.splits-row {
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}
[data-theme="light"] .splits-row {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
[data-theme="dark"] .splits-row {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}
/* Split column styling */
.split-col-name,
.split-col-role,
.split-col-percent,
.split-col-amount,
.split-col-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.split-col-percent,
.split-col-amount {
  text-align: right;
}
/* Split status colors */
.split-status-paid {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
}
.split-status-locked {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
}
.split-status-pending {
  color: var(--component-adminPortal-accountsPage-statusBadge-inactive-color);
}
/* Expand/collapse button */
.expand-splits-button {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-gap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  text-decoration: underline;
}
.expand-splits-button {
  color: var(--filterbutton-text);
}
.expand-splits-button:hover {
  opacity: var(--component-adminPortal-opacity-hover);
}
/* No splits message */
.no-splits {
  color: var(--component-adminPortal-page-text-secondary);
  font-style: italic;
}
/* Stripe invoice link */
.stripe-invoice-link {
  text-decoration: underline;
  cursor: pointer;
}
.stripe-invoice-link {
  color: var(--filterbutton-text);
}
.stripe-invoice-link:hover {
  opacity: var(--component-adminPortal-opacity-hover);
}
/* Commission details list */
.commission-details-list {
  display: flex;
  flex-direction: column;
}
/* Locked notice */
.locked-notice {
  color: var(--component-adminPortal-page-text-secondary);
  font-style: italic;
  margin-top: var(--component-adminPortal-accountsPage-cardActions-gap);
}
/* ============================================================================
   Sales Rep Section (matches Accounts page pattern)
   ============================================================================ */
/* Empty state */
.sales-reps-empty {
  font-style: italic;
}
/* Validation errors */
.sales-reps-validation-errors {
  margin-bottom: var(--component-adminPortal-inlineEdit-iconGap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  background-color: rgba(220, 38, 38, 0.05);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}
.sales-reps-validation-error {
  color: var(--component-adminPortal-page-status-error);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
}
[data-theme="dark"] .sales-reps-validation-errors {
  background-color: rgba(220, 38, 38, 0.1);
}
.sales-reps-list {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}
/* Total summary for multiple reps */
.sales-reps-total {
  margin-top: var(--component-adminPortal-inlineEdit-iconGap);
  padding-top: var(--component-adminPortal-inlineEdit-iconGap);
  border-top: 1px solid;
}
[data-theme="light"] .sales-reps-total {
  border-top-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
[data-theme="dark"] .sales-reps-total {
  border-top-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}
.sales-reps-total-value {
  font-weight: var(--component-adminPortal-button-typography-fontWeight-bold, 600);
}
.sales-reps-total-valid {
  color: var(--component-adminPortal-page-status-success);
}
.sales-reps-total-warning {
  color: var(--component-adminPortal-page-status-warning);
}
.sales-reps-total-error {
  color: var(--component-adminPortal-page-status-error);
}
.sales-rep-item {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-userCard-row-gap);
  position: relative;
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border: 1px solid;
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}
[data-theme="light"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
[data-theme="dark"] .sales-rep-item {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}
.sales-rep-item .delete-user-button {
  position: absolute;
  top: var(--component-adminPortal-inlineEdit-padding-top);
  right: var(--component-adminPortal-inlineEdit-padding-right);
}
.sales-rep-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  margin-top: var(--component-adminPortal-inlineEdit-iconGap);
}
.sales-rep-add-row {
  display: flex;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
  align-items: center;
}
.sales-rep-add-row .sales-rep-select {
  flex: 2;
  min-width: 150px;
}
.sales-rep-add-row .sales-rep-input-commission {
  flex: 0 0 80px;
  width: 80px;
}
.sales-rep-select {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-inlineEdit-typography-fontFamily);
}
[data-theme="light"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}
[data-theme="dark"] .sales-rep-select {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}
.sales-rep-select:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
.sales-rep-input {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-inlineEdit-fontSize);
  font-family: var(--component-adminPortal-inlineEdit-typography-fontFamily);
}
[data-theme="light"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-light);
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  color: var(--component-adminPortal-inlineEdit-color-input-text-light);
}
[data-theme="dark"] .sales-rep-input {
  background: var(--component-adminPortal-inlineEdit-color-input-background-dark);
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  color: var(--component-adminPortal-inlineEdit-color-input-text-dark);
}
.sales-rep-input:focus {
  outline: none;
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}
/* Responsive: stack add form vertically on small screens */
@media (max-width: 480px) {
  .sales-rep-add-row {
    flex-direction: column;
  }
  
  .sales-rep-add-row .sales-rep-select,
  .sales-rep-add-row .sales-rep-input-commission {
    flex: none;
    width: 100%;
  }
}
/* CommissionCard component styles - uses design tokens only */

/* ============================================================================
   Commission Card Header
   ============================================================================ */
.commission-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.commission-card-header h3 {
  margin: 0;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
}

/* ============================================================================
   Card Row Styling
   ============================================================================ */
.commission-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.commission-card-row strong {
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.commission-card-row > *:not(strong) {
  min-width: 0;
  overflow: hidden;
}

/* ============================================================================
   Status Badge
   ============================================================================ */
.status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
  text-transform: uppercase;
}

.status-badge.status-pending {
  color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-backgroundColor);
}

.status-badge.status-approved {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

.status-badge.status-paid {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.status-badge.status-paying {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

/* ============================================================================
   Paid As Badge
   ============================================================================ */
.paid-as-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  display: inline-block;
}

.paid-as-badge.paid-as-w2 {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.paid-as-badge.paid-as-1099 {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

/* ============================================================================
   Payout Progress Section (for "paying" status)
   ============================================================================ */
.payout-progress-section {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  margin-bottom: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-users-userCard-row-gap);
}

/* Progress bar container */
.payout-progress-bar-container {
  width: 100%;
  height: var(--component-adminPortal-accountsPage-statusBadge-padding-top);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  overflow: hidden;
}

[data-theme="light"] .payout-progress-bar-container {
  background-color: var(--component-adminPortal-page-background-subtle);
}

[data-theme="dark"] .payout-progress-bar-container {
  background-color: var(--component-adminPortal-page-background-subtle);
}

/* Progress bar fill */
.payout-progress-bar-fill {
  height: 100%;
  transition: width 300ms ease;
}

[data-theme="light"] .payout-progress-bar-fill {
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

[data-theme="dark"] .payout-progress-bar-fill {
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

/* Progress text */
.payout-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  flex-wrap: wrap;
  gap: var(--component-adminPortal-users-userCard-row-gap);
}

.payout-elapsed-time {
  opacity: var(--component-adminPortal-opacity-placeholder);
}

/* Error banner */
.payout-error-banner {
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .payout-error-banner {
  background-color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-backgroundColor);
  color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-color);
}

[data-theme="dark"] .payout-error-banner {
  background-color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-backgroundColor);
  color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-color);
}

/* ============================================================================
   Card Actions
   ============================================================================ */
.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 48rem) {
  .commission-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .commission-card-row strong {
    min-width: auto;
  }

  .commission-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }
}
/* Commission Reports page styles - uses design tokens only */

/* ============================================================================
   Page Layout
   ============================================================================ */
.commissions-filters-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-page-spacing-cardGap);
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}

.commissions-filters-wrapper .filter-bar-container {
  margin-bottom: var(--component-adminPortal-page-spacing-title-top);
}

.commissions-filters-wrapper .filter-bar {
  margin-bottom: var(--component-adminPortal-page-spacing-title-top);
  padding-bottom: var(--component-adminPortal-page-spacing-title-top);
}

.filter-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--component-adminPortal-users-pageHeader-gap);
}

.commissions-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
  padding-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}

/* ============================================================================
   Pagination Controls
   ============================================================================ */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
  margin-top: var(--component-adminPortal-users-pageHeader-margin-bottom);
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}

.pagination-button {
  padding: var(--component-adminPortal-modal-button-padding-top) var(--component-adminPortal-modal-button-padding-right) var(--component-adminPortal-modal-button-padding-bottom) var(--component-adminPortal-modal-button-padding-left);
  border-radius: var(--component-adminPortal-page-button-borderRadius);
  border-width: var(--component-adminPortal-page-button-borderWidth);
  border-style: var(--component-adminPortal-page-button-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  cursor: pointer;
  transition: all var(--component-adminPortal-transition-duration-default) ease;
  white-space: nowrap;
}

[data-theme="light"] .pagination-button {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .pagination-button {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .pagination-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .pagination-button:hover:not(:disabled) {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

.pagination-button:disabled {
  opacity: var(--component-adminPortal-opacity-placeholder);
  cursor: not-allowed;
}

.pagination-info {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
}

[data-theme="light"] .pagination-info {
  color: var(--component-adminPortal-page-text-muted);
}

[data-theme="dark"] .pagination-info {
  color: var(--component-adminPortal-page-text-muted);
}

/* ============================================================================
   Commission Detail Popup Content
   ============================================================================ */
.commission-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--component-adminPortal-accountsPage-cardActions-margin-top);
}

.commission-detail-header .commission-detail-section-title {
  margin: 0;
}

.commission-detail-row {
  display: flex;
  align-items: center;
  padding: var(--component-adminPortal-inlineEdit-padding-top) 0;
  gap: var(--component-adminPortal-users-userCard-row-gap);
}

.commission-detail-row strong {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.commission-detail-row span {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

.commission-detail-amount {
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-title-fontSize);
}

/* Status Badge in detail popup */
.commission-detail-header .status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  text-transform: uppercase;
}

.status-badge.status-pending {
  color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-pastDue-backgroundColor);
}

.status-badge.status-approved {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

.status-badge.status-paid {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.status-badge.status-paying {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

/* Paid As Badge in detail popup */
.commission-detail-row .paid-as-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
}

.paid-as-badge.paid-as-w2 {
  color: var(--component-adminPortal-accountsPage-statusBadge-active-color);
  background-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

.paid-as-badge.paid-as-1099 {
  color: var(--component-adminPortal-accountsPage-demoBadge-color);
  background-color: var(--component-adminPortal-accountsPage-demoBadge-backgroundColor);
}

.commission-detail-section-title {
  margin: 0 0 var(--component-adminPortal-accountsPage-cardActions-margin-top) 0;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
}

.commission-detail-no-invoices {
  font-style: italic;
  opacity: var(--component-adminPortal-opacity-placeholder);
}

/* ============================================================================
   Invoice Details Table
   ============================================================================ */
.commission-invoice-table {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-inlineEdit-iconGap);
}

.invoice-table-header,
.invoice-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.5fr 1fr 1fr;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  padding: var(--component-adminPortal-inlineEdit-padding-top) var(--component-adminPortal-inlineEdit-padding-right) var(--component-adminPortal-inlineEdit-padding-bottom) var(--component-adminPortal-inlineEdit-padding-left);
  align-items: center;
}

.invoice-table-header {
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
}

[data-theme="light"] .invoice-table-header {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
  background-color: var(--component-adminPortal-page-background-subtle);
}

[data-theme="dark"] .invoice-table-header {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
  background-color: var(--component-adminPortal-page-background-secondary);
}

.invoice-table-row {
  border-width: var(--component-adminPortal-inlineEdit-borderWidth);
  border-style: var(--component-adminPortal-inlineEdit-borderStyle);
  border-radius: var(--component-adminPortal-inlineEdit-borderRadius);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

[data-theme="light"] .invoice-table-row {
  border-color: var(--component-adminPortal-inlineEdit-color-border-light);
}

[data-theme="dark"] .invoice-table-row {
  border-color: var(--component-adminPortal-inlineEdit-color-border-dark);
}

.invoice-col-client,
.invoice-col-amount,
.invoice-col-gross,
.invoice-col-percent,
.invoice-col-commission,
.invoice-col-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-col-amount,
.invoice-col-gross,
.invoice-col-percent,
.invoice-col-commission {
  text-align: right;
}

.invoice-col-id {
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  opacity: var(--component-adminPortal-opacity-placeholder);
}

/* ============================================================================
   Send Report Popup (follows AddUserPopup pattern)
   ============================================================================ */
.send-report-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--component-adminPortal-modal-zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sendReportFadeIn 200ms ease;
}

[data-theme="light"] .send-report-popup-overlay {
  background: var(--component-adminPortal-page-modal-overlay-light);
}

[data-theme="dark"] .send-report-popup-overlay {
  background: var(--component-adminPortal-page-modal-overlay-dark);
}

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

.send-report-popup {
  width: var(--component-adminPortal-modal-width-default);
  min-width: var(--component-adminPortal-modal-addUserPopup-minWidth);
  max-width: var(--component-adminPortal-modal-addUserPopup-maxWidth);
  display: flex;
  flex-direction: column;
  border-radius: var(--component-adminPortal-modal-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  box-shadow: var(--component-adminPortal-modal-shadow);
  animation: sendReportSlideIn 200ms ease;
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
}

[data-theme="light"] .send-report-popup {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .send-report-popup {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

@keyframes sendReportSlideIn {
  from { transform: translateY(var(--component-adminPortal-modal-animation-slideIn-translateY)); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Header */
.send-report-popup-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding: var(--component-adminPortal-modal-header-padding-top) var(--component-adminPortal-modal-header-padding-right) var(--component-adminPortal-modal-header-padding-bottom) var(--component-adminPortal-modal-header-padding-left);
  border-bottom-width: var(--component-adminPortal-modal-header-borderBottom-width);
  border-bottom-style: var(--component-adminPortal-modal-header-borderBottom-style);
  border-top-left-radius: var(--component-adminPortal-modal-borderRadius);
  border-top-right-radius: var(--component-adminPortal-modal-borderRadius);
}

[data-theme="light"] .send-report-popup-header {
  background: var(--component-adminPortal-page-modal-header-background-light);
  border-bottom-color: var(--component-adminPortal-page-modal-header-border-light);
}

[data-theme="dark"] .send-report-popup-header {
  background: var(--component-adminPortal-page-modal-header-background-dark);
  border-bottom-color: var(--component-adminPortal-page-modal-header-border-dark);
}

.send-report-popup-header h2 {
  margin: var(--component-adminPortal-modal-title-margin-top) 0 0 var(--component-adminPortal-modal-title-margin-left);
  padding: 0;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
}

[data-theme="light"] .send-report-popup-header h2 {
  color: var(--component-adminPortal-page-modal-text-light);
}

[data-theme="dark"] .send-report-popup-header h2 {
  color: var(--component-adminPortal-page-modal-text-dark);
}

/* Close button */
.send-report-popup-close-button {
  width: var(--component-adminPortal-button-closeButton-size);
  height: var(--component-adminPortal-button-closeButton-size);
  border: none;
  border-radius: var(--component-adminPortal-button-closeButton-borderRadius);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--component-adminPortal-page-transition-duration) ease;
}

[data-theme="light"] .send-report-popup-close-button {
  background: var(--component-adminPortal-page-closeButton-background-light);
}

[data-theme="dark"] .send-report-popup-close-button {
  background: var(--component-adminPortal-page-closeButton-background-dark);
}

[data-theme="light"] .send-report-popup-close-button:hover {
  background: var(--component-adminPortal-page-closeButton-hover-background-light);
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

[data-theme="dark"] .send-report-popup-close-button:hover {
  background: var(--component-adminPortal-page-closeButton-hover-background-dark);
  transform: scale(var(--component-adminPortal-modal-closeButton-hover-transform-scale));
}

.send-report-popup-close-icon {
  font-size: var(--component-adminPortal-modal-closeButton-icon-fontSize);
  font-weight: bold;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--component-adminPortal-page-transition-duration) ease;
}

[data-theme="light"] .send-report-popup-close-icon {
  color: var(--component-adminPortal-modal-closeButton-icon-color-light);
}

[data-theme="dark"] .send-report-popup-close-icon {
  color: var(--component-adminPortal-modal-closeButton-icon-color-dark);
}

.send-report-popup-close-button:hover .send-report-popup-close-icon {
  opacity: 1;
}

/* Body */
.send-report-popup-body {
  padding: var(--component-adminPortal-modal-body-padding-top) var(--component-adminPortal-modal-body-padding-right) var(--component-adminPortal-modal-body-padding-bottom) var(--component-adminPortal-modal-body-padding-left);
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}

.send-report-popup-body form {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-modal-body-gap);
}

.send-report-popup-description {
  margin: 0;
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

/* Form field */
.send-report-popup-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--component-adminPortal-modal-addUserPopup-field-gap);
}

.send-report-popup-field label {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  white-space: nowrap;
}

[data-theme="light"] .send-report-popup-field label {
  color: var(--component-adminPortal-page-modal-text-light);
}

[data-theme="dark"] .send-report-popup-field label {
  color: var(--component-adminPortal-page-modal-text-dark);
}

.send-report-popup-input {
  flex: 1;
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-page-input-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
}

[data-theme="light"] .send-report-popup-input {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .send-report-popup-input {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

.send-report-popup-input:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}

[data-theme="light"] .send-report-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}

[data-theme="dark"] .send-report-popup-input:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}

/* Actions */
.send-report-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--component-adminPortal-modal-headerActions-gap);
  margin-top: var(--component-adminPortal-modal-addUserPopup-actions-margin-top);
}

.send-report-popup-cancel,
.send-report-popup-submit {
  padding: var(--component-adminPortal-modal-button-padding-top) var(--component-adminPortal-modal-button-padding-right) var(--component-adminPortal-modal-button-padding-bottom) var(--component-adminPortal-modal-button-padding-left);
  border-radius: var(--component-adminPortal-page-button-borderRadius);
  border-width: var(--component-adminPortal-page-button-borderWidth);
  border-style: var(--component-adminPortal-page-button-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-size: var(--component-adminPortal-modal-button-typography-fontSize);
  text-transform: var(--component-adminPortal-page-typography-textTransform-uppercase);
  cursor: pointer;
  transition: all var(--component-adminPortal-page-transition-duration) ease;
}

[data-theme="light"] .send-report-popup-cancel {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .send-report-popup-cancel {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .send-report-popup-cancel:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .send-report-popup-cancel:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

[data-theme="light"] .send-report-popup-submit {
  background-color: var(--component-adminPortal-page-button-background-light);
  border-color: var(--component-adminPortal-page-button-border-light);
  color: var(--component-adminPortal-page-button-text-light);
}

[data-theme="dark"] .send-report-popup-submit {
  background-color: var(--component-adminPortal-page-button-background-dark);
  border-color: var(--component-adminPortal-page-button-border-dark);
  color: var(--component-adminPortal-page-button-text-dark);
}

[data-theme="light"] .send-report-popup-submit:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-light);
}

[data-theme="dark"] .send-report-popup-submit:hover {
  background-color: var(--component-adminPortal-page-button-hover-background-dark);
}

.send-report-popup-cancel:disabled,
.send-report-popup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 48rem) {
  .commission-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  /* Stack invoice table on mobile */
  .invoice-table-header {
    display: none;
  }

  .invoice-table-row {
    display: flex;
    flex-direction: column;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .invoice-col-client,
  .invoice-col-amount,
  .invoice-col-gross,
  .invoice-col-percent,
  .invoice-col-commission,
  .invoice-col-id {
    text-align: left;
  }

  .invoice-col-client::before { content: "Client: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
  .invoice-col-amount::before { content: "Amount: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
  .invoice-col-gross::before { content: "Gross Profit: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
  .invoice-col-percent::before { content: "Commission %: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
  .invoice-col-commission::before { content: "Commission: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
  .invoice-col-id::before { content: "Invoice: "; font-weight: var(--component-adminPortal-card-typography-label-fontWeight); }
}

/* ============================================================================
   Detail Modal Content
   ============================================================================ */
.detail-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-settingsPage-groupCard-row-gap);
}

.detail-modal-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
}

.detail-modal-row strong {
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
  min-width: 7rem;
}

.detail-modal-row span {
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

.detail-modal-row .status-badge {
  font-size: var(--component-adminPortal-accountsPage-statusBadge-fontSize);
  font-weight: var(--component-adminPortal-accountsPage-statusBadge-fontWeight);
  padding: var(--component-adminPortal-accountsPage-statusBadge-padding-top) var(--component-adminPortal-accountsPage-statusBadge-padding-right) var(--component-adminPortal-accountsPage-statusBadge-padding-bottom) var(--component-adminPortal-accountsPage-statusBadge-padding-left);
  border-radius: var(--component-adminPortal-accountsPage-statusBadge-borderRadius);
  text-transform: uppercase;
}
/* SplitSelectionTable component styles - uses design tokens only */

/* ============================================================================
   Container
   ============================================================================ */
.split-selection-table {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
}

/* ============================================================================
   Select All Header
   ============================================================================ */
.split-selection-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
  padding: var(--component-adminPortal-card-padding-top) var(--component-adminPortal-card-padding-right) var(--component-adminPortal-card-padding-bottom) var(--component-adminPortal-card-padding-left);
  border-radius: var(--component-adminPortal-card-borderRadius);
  border-width: var(--component-adminPortal-card-borderWidth);
  border-style: var(--component-adminPortal-card-borderStyle);
}

[data-theme="light"] .split-selection-header {
  background: var(--component-adminPortal-button-backgroundColor-light);
  border-color: var(--component-adminPortal-button-borderColor-light);
}

[data-theme="dark"] .split-selection-header {
  background: var(--component-adminPortal-button-backgroundColor-dark);
  border-color: var(--component-adminPortal-button-borderColor-dark);
}

.split-selection-header-text {
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-size: var(--component-adminPortal-commissionsPage-selectAll-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  font-style: var(--component-adminPortal-page-typography-fontStyle);
}

[data-theme="light"] .split-selection-header-text {
  color: var(--component-adminPortal-button-textColor-light);
}

[data-theme="dark"] .split-selection-header-text {
  color: var(--component-adminPortal-button-textColor-dark);
}

/* ============================================================================
   Checkbox Styling
   ============================================================================ */
.split-selection-checkbox {
  width: var(--component-adminPortal-button-closeButton-size);
  height: var(--component-adminPortal-button-closeButton-size);
  cursor: pointer;
  accent-color: var(--component-adminPortal-accountsPage-statusBadge-active-backgroundColor);
}

/* ============================================================================
   Splits Grid
   ============================================================================ */
.split-selection-grid {
  display: flex;
  flex-direction: column;
  gap: var(--component-adminPortal-accountsPage-grid-gap);
  margin-top: var(--component-adminPortal-accountsPage-grid-margin-top);
  padding-bottom: var(--component-adminPortal-usersPage-grid-margin-bottom);
}

/* ============================================================================
   Split Card Header
   ============================================================================ */
.split-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.split-card-title {
  margin: 0;
  font-size: var(--component-adminPortal-modal-title-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
}

/* ============================================================================
   Split Card Row Styling
   ============================================================================ */
.split-card-row {
  display: flex;
  align-items: center;
  gap: var(--component-adminPortal-users-userCard-row-gap);
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--component-adminPortal-accountsPage-userCard-row-gap);
}

.split-card-row strong {
  min-width: var(--component-adminPortal-users-userCard-row-label-minWidth);
  flex-shrink: 0;
  font-weight: var(--component-adminPortal-card-typography-label-fontWeight);
  font-size: var(--component-adminPortal-card-typography-label-fontSize);
}

.split-card-row > *:not(strong) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ============================================================================
   Loading / Empty States
   ============================================================================ */
.split-selection-loading,
.split-selection-empty {
  text-align: center;
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
}

/* ============================================================================
   Split Card Actions (Unlink button)
   ============================================================================ */
.split-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--component-adminPortal-accountsPage-userCard-row-gap);
  padding-top: var(--component-adminPortal-accountsPage-userCard-row-gap);
  border-top-width: var(--component-adminPortal-card-borderWidth);
  border-top-style: var(--component-adminPortal-card-borderStyle);
}

[data-theme="light"] .split-card-actions {
  border-top-color: var(--component-adminPortal-card-color-border-light);
}

[data-theme="dark"] .split-card-actions {
  border-top-color: var(--component-adminPortal-card-color-border-dark);
}

.split-unlink-button {
  padding: var(--component-adminPortal-button-universal-paddingY) var(--component-adminPortal-button-universal-paddingX);
  border-radius: var(--component-adminPortal-button-borderRadius);
  border-width: var(--component-adminPortal-button-borderWidth);
  border-style: var(--component-adminPortal-button-borderStyle);
  font-family: var(--component-adminPortal-button-typography-fontFamily);
  font-size: var(--component-adminPortal-button-universal-fontSize);
  font-weight: var(--component-adminPortal-button-typography-fontWeight);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

[data-theme="light"] .split-unlink-button {
  background-color: var(--component-adminPortal-button-hover-backgroundColor-light);
  color: var(--component-adminPortal-button-hover-textColor-light);
  border-color: var(--component-adminPortal-button-hover-borderColor-light);
}

[data-theme="dark"] .split-unlink-button {
  background-color: var(--component-adminPortal-button-hover-backgroundColor-dark);
  color: var(--component-adminPortal-button-hover-textColor-dark);
  border-color: var(--component-adminPortal-button-hover-borderColor-dark);
}

.split-unlink-button:hover {
  opacity: 0.8;
}

.split-unlink-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 48rem) {
  .split-card-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }

  .split-card-row strong {
    min-width: auto;
  }

  .split-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--component-adminPortal-users-userCard-row-gap-mobile);
  }
}
/* Commissions Page (Invoice/Split Selection) - uses design tokens only */
/* Note: Split selection table styles are in SplitSelectionTable.css */

/* ============================================================================
   Page Layout
   ============================================================================ */
.filter-bar-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--component-adminPortal-users-pageHeader-gap);
  margin-top: var(--component-adminPortal-page-spacing-title-top);
  margin-bottom: var(--component-adminPortal-users-pageHeader-margin-bottom);
}

/* ============================================================================
   Card Actions (for error state retry button)
   ============================================================================ */
.card-actions {
  margin-top: var(--component-adminPortal-accountsPage-cardActions-margin-top);
  display: flex;
  gap: var(--component-adminPortal-accountsPage-cardActions-gap);
  justify-content: flex-start;
}

/* ============================================================================
   Filter Controls (Sales Rep dropdown, Date inputs)
   ============================================================================ */
.generate-commission-popup-select {
  padding: var(--component-adminPortal-modal-input-padding-top) var(--component-adminPortal-modal-input-padding-right) var(--component-adminPortal-modal-input-padding-bottom) var(--component-adminPortal-modal-input-padding-left);
  border-radius: var(--component-adminPortal-page-input-borderRadius);
  border-width: var(--component-adminPortal-modal-borderWidth);
  border-style: var(--component-adminPortal-modal-borderStyle);
  font-size: var(--component-adminPortal-card-typography-body-fontSize);
  font-family: var(--component-adminPortal-page-typography-fontFamily);
  font-weight: var(--component-adminPortal-page-typography-fontWeight);
  text-transform: var(--component-adminPortal-button-typography-fontStyle);
  cursor: pointer;
}

[data-theme="light"] .generate-commission-popup-select {
  background: var(--component-adminPortal-page-modal-background-light);
  color: var(--component-adminPortal-page-modal-text-light);
  border-color: var(--component-adminPortal-page-modal-border-light);
}

[data-theme="dark"] .generate-commission-popup-select {
  background: var(--component-adminPortal-page-modal-background-dark);
  color: var(--component-adminPortal-page-modal-text-dark);
  border-color: var(--component-adminPortal-page-modal-border-dark);
}

.generate-commission-popup-select:focus {
  outline: none;
  border-width: var(--component-adminPortal-modal-input-focus-borderWidth);
}

[data-theme="light"] .generate-commission-popup-select:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-light);
}

[data-theme="dark"] .generate-commission-popup-select:focus {
  border-color: var(--component-adminPortal-modal-input-focus-border-dark);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Print styles - allow content to flow across multiple pages */
@media print {
  html,
  body,
  #root {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
}
/* App Navigation */
.app-nav {
  display: flex;
  gap: var(--spacing-primitive-xl);
  padding: 0 var(--spacing-primitive-lg);
  background: var(--color-nav-bg);
  border-bottom: var(--border-width-default) solid var(--color-nav-border);
  flex-shrink: 0;
  height: auto;
}

.app-nav-item {
  background: none;
  border: none;
  padding: var(--spacing-primitive-md) 0;
  color: var(--color-nav-item-text);
  cursor: pointer;
  font-size: var(--typography-semantic-body-sm-fontSize);
  font-family: var(--typography-semantic-body-fontFamily);
  font-weight: var(--typography-semantic-body-fontWeight);
  text-transform: uppercase;
  border-bottom: var(--border-width-thick) solid transparent;
  transition: all var(--transition-duration-default) var(--transition-timing-ease);
}

.app-nav-item:hover {
  color: var(--color-nav-item-hover);
}

.app-nav-item.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* App Content */
.app-content {
  flex: 1;
  overflow: auto;
  padding: var(--spacing-primitive-lg);
  background: var(--color-content-bg);
}

/* Scrollbar styles */
.app-content {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  scrollbar-width: thin;
}

.app-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.app-content::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

.app-content::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: var(--scrollbar-borderRadius);
}

.app-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Error Boundary */
.error-boundary-display {
  padding: var(--spacing-primitive-lg);
  font-family: var(--typography-semantic-body-fontFamily);
  background-color: var(--color-semantic-error-background);
  border: var(--border-width-default) solid var(--color-semantic-error-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.error-boundary-heading {
  color: var(--color-semantic-error-text);
}

.error-boundary-stack {
  background: var(--color-semantic-neutral-background-secondary);
  padding: var(--spacing-primitive-sm);
  overflow: auto;
}

/* Theme Context Wrapper */
.theme-context-wrapper-loading {
  padding: var(--spacing-primitive-lg);
  font-family: var(--typography-semantic-body-fontFamily);
}

.theme-context-wrapper-loading-hint {
  font-size: var(--typography-semantic-body-sm-fontSize);
  color: var(--color-text-secondary);
}

.theme-context-wrapper-error {
  padding: var(--spacing-primitive-lg);
  font-family: var(--typography-semantic-body-fontFamily);
  border: var(--border-width-default) solid var(--color-semantic-error-border);
}

.theme-context-wrapper-error-hint {
  font-size: var(--typography-semantic-body-sm-fontSize);
  color: var(--color-text-secondary);
}