@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');/* Error Boundary Styles */
.error-boundary-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f8f9fa;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

.error-boundary-content {
  max-width: 800px;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.error-boundary-content h2 {
  color: #e74c3c;
  margin-bottom: 20px;
}

.error-boundary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 25px 0;
}

.error-boundary-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.error-boundary-button.primary {
  background-color: #3498db;
  color: white;
}

.error-boundary-button.primary:hover {
  background-color: #2980b9;
}

.error-boundary-button.secondary {
  background-color: #95a5a6;
  color: white;
}

.error-boundary-button.secondary:hover {
  background-color: #7f8c8d;
}

.error-boundary-button.info {
  background-color: #f39c12;
  color: white;
}

.error-boundary-button.info:hover {
  background-color: #d35400;
}

.error-boundary-button.danger {
  background-color: #e74c3c;
  color: white;
}

.error-boundary-button.danger:hover {
  background-color: #c0392b;
}

.error-boundary-details {
  text-align: left;
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #e74c3c;
}

.error-message {
  color: #c0392b;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fadbd8;
  border-radius: 4px;
}

.error-stack {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

/* API Error Handler Styles */
.api-error-container {
  padding: 20px;
  margin: 20px 0;
  background-color: #fff3f3;
  border-left: 4px solid #e74c3c;
  border-radius: 4px;
}

.api-error-container h3 {
  color: #c0392b;
  margin-top: 0;
}

.error-details {
  margin-top: 15px;
}

.error-details details {
  margin-top: 10px;
}

.error-details summary {
  cursor: pointer;
  color: #3498db;
  font-weight: 600;
}

.error-details pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  margin-top: 10px;
  font-family: monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

.retry-button {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.retry-button:hover {
  background-color: #2980b9;
}
/* 🎨 THERAPY SESSION RAINBOW FLASH ANIMATIONS */
/* Rainbow flash effect for new therapy sessions during auto-refresh */

@keyframes rainbow-glow {
  0% {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transform: scale(1.15); /* Start 15% larger */
    opacity: 1;
    font-size: 1.1em; /* Slightly larger text */
    /* Enhanced glowing effect */
    text-shadow: 
      0 0 10px rgba(255, 0, 0, 0.8),
      0 0 20px rgba(255, 127, 0, 0.6),
      0 0 30px rgba(255, 255, 0, 0.4),
      0 0 40px rgba(0, 255, 0, 0.3),
      0 0 50px rgba(0, 0, 255, 0.2);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
  }
  16.66% {
    background-position: 16.66% 50%;
    transform: scale(1.12);
    text-shadow: 
      0 0 12px rgba(255, 127, 0, 0.8),
      0 0 24px rgba(255, 255, 0, 0.6),
      0 0 36px rgba(0, 255, 0, 0.4),
      0 0 48px rgba(0, 0, 255, 0.3),
      0 0 60px rgba(75, 0, 130, 0.2);
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.5));
  }
  33.33% {
    background-position: 33.33% 50%;
    transform: scale(1.08);
    text-shadow: 
      0 0 14px rgba(255, 255, 0, 0.8),
      0 0 28px rgba(0, 255, 0, 0.6),
      0 0 42px rgba(0, 0, 255, 0.4),
      0 0 56px rgba(75, 0, 130, 0.3),
      0 0 70px rgba(148, 0, 211, 0.2);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  }
  50% {
    background-position: 50% 50%;
    transform: scale(1.05);
    text-shadow: 
      0 0 16px rgba(0, 255, 0, 0.8),
      0 0 32px rgba(0, 0, 255, 0.6),
      0 0 48px rgba(75, 0, 130, 0.4),
      0 0 64px rgba(148, 0, 211, 0.3),
      0 0 80px rgba(255, 0, 0, 0.2);
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.5));
  }
  66.66% {
    background-position: 66.66% 50%;
    transform: scale(1.03);
    text-shadow: 
      0 0 18px rgba(0, 0, 255, 0.8),
      0 0 36px rgba(75, 0, 130, 0.6),
      0 0 54px rgba(148, 0, 211, 0.4),
      0 0 72px rgba(255, 0, 0, 0.3),
      0 0 90px rgba(255, 127, 0, 0.2);
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.5));
  }
  83.33% {
    background-position: 83.33% 50%;
    transform: scale(1.01);
    text-shadow: 
      0 0 20px rgba(75, 0, 130, 0.8),
      0 0 40px rgba(148, 0, 211, 0.6),
      0 0 60px rgba(255, 0, 0, 0.4),
      0 0 80px rgba(255, 127, 0, 0.3),
      0 0 100px rgba(255, 255, 0, 0.2);
    filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.5));
  }
  100% {
    background-position: 100% 50%;
    font-weight: normal;
    transform: scale(1); /* Back to normal size */
    opacity: 0.3;
    font-size: 1em; /* Back to normal font size */
    text-shadow: none;
    filter: none;
  }
}

/* Main highlight class for new sessions */
.new-session-highlight {
  animation: rainbow-glow 3s ease-out forwards;
  animation-fill-mode: forwards;
  display: inline-block; /* Ensures transform works properly */
  transform-origin: center;
  will-change: transform, font-size, opacity, background-position, text-shadow, filter;
}

/* Class to immediately remove rainbow effect when clicked */
.new-session-highlight-removed {
  animation: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: inherit !important;
  font-weight: normal !important;
  transform: scale(1) !important;
  opacity: 1 !important;
  font-size: 1em !important;
  text-shadow: none !important;
  filter: none !important;
  transition: all 0.2s ease-out !important;
}

/* Alternative dramatic version for more attention */
@keyframes rainbow-flash-dramatic {
  0% {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transform: scale(1.25); /* More dramatic start */
    opacity: 1;
    font-size: 1.2em; /* Larger text */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
  20% {
    background-position: 20% 50%;
    transform: scale(1.15);
    font-size: 1.15em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  40% {
    background-position: 40% 50%;
    transform: scale(1.08);
    font-size: 1.1em;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  }
  60% {
    background-position: 60% 50%;
    transform: scale(1.04);
    font-size: 1.05em;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  }
  80% {
    background-position: 80% 50%;
    transform: scale(1.01);
    font-size: 1.02em;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
  }
  100% {
    background-position: 100% 50%;
    font-weight: normal;
    transform: scale(1);
    opacity: 0.3;
    font-size: 1em;
    text-shadow: none;
  }
}

.new-session-highlight-dramatic {
  animation: rainbow-flash-dramatic 3.5s ease-out forwards;
  animation-fill-mode: forwards;
  display: inline-block;
  transform-origin: center;
  will-change: transform, font-size, opacity, background-position;
}

/* Accessibility: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .new-session-highlight,
  .new-session-highlight-dramatic {
    animation: none;
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.05em; /* Subtle enlargement without animation */
    transform: none;
    opacity: 1;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .new-session-highlight,
  .new-session-highlight-dramatic {
    background: none;
    -webkit-text-fill-color: #ffff00; /* Bright yellow for high contrast */
    color: #ffff00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

/* User Activity Glow Effect */
@keyframes userActivityGlow {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* New Record Glow Effect for individual rows - cycling version */
@keyframes newRecordGlow {
  0% {
    opacity: 0.4;
    transform: scale(1);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
  }
  25% {
    opacity: 0.7;
    transform: scale(1.005);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.8);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.005);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
  }
  100% {
    opacity: 0.4;
    transform: scale(1);
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
  }
}

/* Print styles - disable animations for printing */
@media print {
  .new-session-highlight,
  .new-session-highlight-dramatic {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #000 !important;
    font-weight: bold !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/**
 * 🎨 EXTRA COMPACT Support Stats Cards Styles
 * Ultra-small, minimal design for dashboard integration
 */

.support-stats-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.stats-card {
  flex: 1;
  min-width: 150px;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.stats-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-number {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 4px;
}

.card-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.9;
}

/* Card Color Themes - More Compact & Subtle */
.stats-card.open {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  color: white;
}

.stats-card.urgent {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
}

.stats-card.progress {
  background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
  color: white;
}

.stats-card.resolved {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  color: white;
}

/* Loading State */
.support-stats-cards.loading {
  display: flex;
  gap: 12px;
}

.stats-card.skeleton {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 12px;
  background: #cbd5e0;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80px;
}

.skeleton-number {
  height: 32px;
  background: #cbd5e0;
  border-radius: 4px;
  width: 60px;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Error State */
.support-stats-cards.error {
  padding: 16px;
  background: #fed7d7;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  color: #c53030;
  text-align: center;
}

.error-message {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Responsive Design - Extra compact on all screens */
@media (max-width: 768px) {
  .support-stats-cards {
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .stats-card {
    min-width: unset;
    padding: 6px 10px;
  }
  
  .card-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  
  .card-number {
    font-size: 1.4rem;
    margin-bottom: 0;
    margin-right: 8px;
  }
  
  .card-label {
    font-size: 0.65rem;
  }
}/**
 * 🎯 SUPPORT COMPONENTS CSS
 * Styling for new support ticket components
 * Simple, clean, and consistent with existing design
 */

/* Dashboard Actions */
.dashboard-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.create-ticket-button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.create-ticket-button:hover {
  background: #45a049;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.close-modal {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0;
  margin-left: auto;
}

.close-modal:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

/* Form Styling */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.form-group input.error,
.form-group textarea.error {
  border-color: #f44336;
}

.error-text {
  color: #f44336;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.char-count {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.cancel-button {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button:hover {
  background: #e0e0e0;
}

.submit-button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.submit-button:hover:not(:disabled) {
  background: #45a049;
}

.submit-button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 16px;
  border-left: 4px solid #f44336;
}

/* Bulk Assignment Toolbar */
.bulk-assignment-toolbar {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}

.toolbar-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.selection-info {
  color: #495057;
  font-weight: 500;
}

.assignment-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assignment-controls label {
  color: #495057;
  font-size: 14px;
}

.assignee-select {
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

.assign-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.assign-button:hover:not(:disabled) {
  background: #0056b3;
}

.assign-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.clear-button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.clear-button:hover:not(:disabled) {
  background: #545b62;
}

.toolbar-message {
  padding: 8px 16px;
  margin: 0;
  font-size: 14px;
}

.toolbar-message.error {
  background: #f8d7da;
  color: #721c24;
  border-top: 1px solid #f5c6cb;
}

.toolbar-message.success {
  background: #d4edda;
  color: #155724;
  border-top: 1px solid #c3e6cb;
}

.assignment-progress {
  padding: 12px 16px;
  border-top: 1px solid #dee2e6;
  background: #ffffff;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: #007bff;
  animation: progress-animation 1.5s ease-in-out infinite;
}

@keyframes progress-animation {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}

.progress-text {
  font-size: 12px;
  color: #6c757d;
}

/* Quick Reply Box */
.quick-reply-box {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.reply-header h4 {
  margin: 0;
  color: #495057;
  font-size: 16px;
}

.reply-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #2196F3;
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.toggle-label {
  font-size: 12px;
  color: #6c757d;
}

.reply-form {
  margin: 0;
}

.message-group {
  margin-bottom: 12px;
}

.message-group textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: #6c757d;
}

.internal-indicator {
  color: #856404;
  background: #fff3cd;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #ffeaa7;
}

.reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.send-button {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.send-button:hover:not(:disabled) {
  background: #218838;
}

.send-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.message-status {
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 14px;
}

.message-status.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.message-status.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.ticket-context {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dee2e6;
}

.ticket-context small {
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
  .toolbar-content {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .assignment-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .assignee-select {
    min-width: auto;
  }
  
  .modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .reply-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}











/* TimeInput Component Styles */

.time-input-container {
  position: relative;
  margin-bottom: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Label Styles */
.time-input-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.25;
}

.time-input-label .required-indicator {
  color: #dc2626;
  margin-left: 0.25rem;
}

/* Input Wrapper */
.time-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Base Input Styles */
.time-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #374151;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

.time-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

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

.time-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Custom Time Input (Desktop) */
.custom-time-input {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 120px;
}

/* Native Time Input (Mobile) */
.native-time-input {
  max-width: 150px;
}

/* Add Time Button */
.add-time-button {
  padding: 0.75rem;
  border: 2px solid #3b82f6;
  border-radius: 0.5rem;
  background-color: #3b82f6;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
}

.add-time-button:hover:not(:disabled) {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.add-time-button:active {
  transform: translateY(0);
}

.add-time-button:disabled {
  background-color: #d1d5db;
  border-color: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.add-icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* Multiple Times Display */
.multiple-times-display {
  margin-top: 0.75rem;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.times-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.5rem;
}

.times-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.time-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 0.875rem;
}

.time-value {
  color: #1e293b;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.remove-time-button {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.remove-time-button:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

.max-entries-message {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
  font-style: italic;
}

/* Error States */
.time-input-container.has-error .time-input {
  border-color: #dc2626;
  background-color: #fef2f2;
}

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

.time-input-error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.time-input-error::before {
  content: '⚠';
  font-size: 1rem;
}

/* Help Text */
.time-input-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

/* Focus States */
.time-input-container.focused .time-input-label {
  color: #3b82f6;
}

/* Responsive Design */
@media (max-width: 640px) {
  .time-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .custom-time-input,
  .native-time-input {
    max-width: none;
  }
  
  .add-time-button {
    align-self: center;
    min-width: 120px;
  }
  
  .times-list {
    flex-direction: column;
  }
  
  .time-entry {
    justify-content: space-between;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .time-input {
    border-width: 3px;
  }
  
  .time-input:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .time-input,
  .add-time-button,
  .remove-time-button {
    transition: none;
  }
  
  .add-time-button:hover:not(:disabled) {
    transform: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .time-input-label {
    color: #f3f4f6;
  }
  
  .time-input {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  
  .time-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  }
  
  .time-input:disabled {
    background-color: #1f2937;
    color: #6b7280;
  }
  
  .multiple-times-display {
    background-color: #1f2937;
    border-color: #374151;
  }
  
  .time-entry {
    background-color: #374151;
    border-color: #4b5563;
  }
  
  .time-value {
    color: #f3f4f6;
  }
  
  .times-label {
    color: #d1d5db;
  }
  
  .time-input-help {
    color: #9ca3af;
  }
  
  .max-entries-message {
    color: #9ca3af;
  }
}

/* Animation for time entry addition */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.time-entry {
  animation: slideIn 0.2s ease-out;
}

/* Accessibility improvements */
.time-input:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .time-input-container {
    break-inside: avoid;
  }
  
  .add-time-button,
  .remove-time-button {
    display: none;
  }
  
  .time-entry {
    border: 1px solid #000;
  }
} /* TinnitusScale Component Styles */

.tinnitus-scale-container {
  position: relative;
  margin-bottom: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Label Styles */
.tinnitus-scale-label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1rem;
  color: #374151;
  line-height: 1.25;
}

.tinnitus-scale-label .required-indicator {
  color: #dc2626;
  margin-left: 0.25rem;
}

/* Main Wrapper */
.tinnitus-scale-wrapper {
  padding: 1.5rem;
  background-color: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tinnitus-scale-container.focused .tinnitus-scale-wrapper {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tinnitus-scale-container.has-error .tinnitus-scale-wrapper {
  border-color: #dc2626;
  background-color: #fef2f2;
}

/* Value Display */
.value-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.75rem;
  border: 2px solid #e2e8f0;
}

.value-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  transform: scale(1);
}

.tinnitus-scale-container.dragging .value-indicator {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.value-description {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  min-width: 150px;
}

/* Slider Container */
.slider-container {
  position: relative;
  margin: 2rem 0;
  padding: 1rem 0;
}

/* Custom Slider Track */
.slider-track {
  position: relative;
  width: 100%;
  height: 12px;
  background-color: #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.slider-track:hover {
  background-color: #d1d5db;
}

/* Progress Fill */
.slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Slider Thumb */
.slider-thumb {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  cursor: grab;
  z-index: 10;
}

.slider-thumb:hover,
.tinnitus-scale-container.focused .slider-thumb {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.tinnitus-scale-container.dragging .slider-thumb {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Tick Marks */
.tick-marks {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 32px;
  pointer-events: none;
}

.tick-mark {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.tick-line {
  width: 2px;
  height: 8px;
  background-color: #9ca3af;
  border-radius: 1px;
  transition: all 0.2s ease;
}

.tick-mark.active .tick-line {
  height: 12px;
  background-color: #374151;
  width: 3px;
}

.tick-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  transition: all 0.2s ease;
}

.tick-mark.active .tick-label {
  color: #374151;
  font-size: 0.875rem;
}

/* Hidden Native Slider */
.native-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 20;
}

.native-slider:focus {
  outline: none;
}

/* Scale Labels */
.scale-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 0 0.5rem;
}

.scale-label-start,
.scale-label-middle,
.scale-label-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.scale-number {
  font-size: 1rem;
  font-weight: 700;
  color: #374151;
  background-color: #f3f4f6;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d1d5db;
}

.scale-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  max-width: 80px;
  line-height: 1.2;
}

/* Current Description */
.current-description {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #0c4a6e;
}

.current-description strong {
  color: #075985;
}

.description-detail {
  color: #0369a1;
  font-style: italic;
}

/* Error Display */
.tinnitus-scale-error {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: #dc2626;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tinnitus-scale-error::before {
  content: '⚠';
  font-size: 1rem;
}

/* Instructions */
.scale-instructions {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 640px) {
  .tinnitus-scale-wrapper {
    padding: 1rem;
  }
  
  .value-display {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .value-indicator {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }
  
  .value-description {
    font-size: 1rem;
    min-width: auto;
  }
  
  .scale-labels {
    padding: 0;
  }
  
  .scale-text {
    font-size: 0.625rem;
    max-width: 60px;
  }
  
  .slider-thumb {
    width: 32px;
    height: 32px;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  .slider-thumb {
    width: 36px;
    height: 36px;
  }
  
  .slider-track {
    height: 16px;
    border-radius: 8px;
  }
  
  .tick-marks {
    top: -12px;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .tinnitus-scale-wrapper {
    border-width: 3px;
  }
  
  .slider-track {
    border: 2px solid #000;
  }
  
  .slider-thumb {
    border-width: 4px;
  }
  
  .tick-line {
    background-color: #000;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tinnitus-scale-wrapper,
  .slider-fill,
  .slider-thumb,
  .value-indicator,
  .tick-line,
  .tick-label {
    transition: none;
  }
  
  .tinnitus-scale-container.dragging .value-indicator {
    transform: scale(1);
  }
  
  .slider-thumb:hover,
  .tinnitus-scale-container.focused .slider-thumb {
    transform: translate(-50%, -50%);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .tinnitus-scale-label {
    color: #f3f4f6;
  }
  
  .tinnitus-scale-wrapper {
    background-color: #1f2937;
    border-color: #374151;
  }
  
  .tinnitus-scale-container.focused .tinnitus-scale-wrapper {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1), 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  
  .value-display {
    background-color: #374151;
    border-color: #4b5563;
  }
  
  .value-description {
    color: #f3f4f6;
  }
  
  .slider-track {
    background-color: #4b5563;
  }
  
  .slider-track:hover {
    background-color: #6b7280;
  }
  
  .tick-line {
    background-color: #9ca3af;
  }
  
  .tick-mark.active .tick-line {
    background-color: #f3f4f6;
  }
  
  .tick-label {
    color: #d1d5db;
  }
  
  .tick-mark.active .tick-label {
    color: #f3f4f6;
  }
  
  .scale-number {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  
  .scale-text {
    color: #d1d5db;
  }
  
  .current-description {
    background-color: #1e3a8a;
    border-color: #3b82f6;
    color: #dbeafe;
  }
  
  .current-description strong {
    color: #93c5fd;
  }
  
  .description-detail {
    color: #bfdbfe;
  }
  
  .scale-instructions {
    color: #d1d5db;
  }
}

/* Print Styles */
@media print {
  .tinnitus-scale-container {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .tinnitus-scale-wrapper {
    border: 2px solid #000;
    box-shadow: none;
  }
  
  .slider-track,
  .slider-fill,
  .slider-thumb {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .scale-instructions {
    display: none;
  }
}

/* Animation for value changes */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.value-indicator.value-changed {
  animation: pulse 0.3s ease-in-out;
}

/* Focus ring for better accessibility */
.native-slider:focus-visible + .slider-track {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
} /* DurationInput Component Styles */

.duration-input-container {
  position: relative;
  margin-bottom: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Label Styles */
.duration-input-label {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.25;
}

.duration-input-label .required-indicator {
  color: #dc2626;
  margin-left: 0.25rem;
}

/* Main Wrapper */
.duration-input-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Duration Field Container */
.duration-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

/* Input Group with Buttons */
.duration-input-group {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.duration-input-container.focused .duration-input-group {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.duration-input-container.has-error .duration-input-group {
  border-color: #dc2626;
  background-color: #fef2f2;
}

/* Duration Buttons */
.duration-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  background-color: #f3f4f6;
  border: none;
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.duration-button:hover:not(:disabled) {
  background-color: #e5e7eb;
  color: #1f2937;
}

.duration-button:active:not(:disabled) {
  background-color: #d1d5db;
  transform: scale(0.95);
}

.duration-button:disabled {
  background-color: #f9fafb;
  color: #d1d5db;
  cursor: not-allowed;
}

.duration-button.decrement {
  border-right: 1px solid #e5e7eb;
}

.duration-button.increment {
  border-left: 1px solid #e5e7eb;
}

/* Duration Input */
.duration-input {
  width: 60px;
  height: 44px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  background-color: transparent;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  letter-spacing: 0.025em;
}

.duration-input:focus {
  background-color: #f8fafc;
}

.duration-input:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.duration-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* Remove number input arrows */
.duration-input::-webkit-outer-spin-button,
.duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.duration-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Duration Labels */
.duration-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Duration Display */
.duration-display {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  text-align: center;
}

.formatted-duration {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.25rem;
}

.total-minutes {
  font-size: 0.875rem;
  color: #6b7280;
  font-style: italic;
}

/* Quick Presets */
.duration-presets {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.preset-button {
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 44px;
}

.preset-button:hover:not(:disabled) {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.preset-button:active:not(:disabled) {
  background-color: #e5e7eb;
  transform: scale(0.95);
}

.preset-button:disabled {
  background-color: #f9fafb;
  color: #d1d5db;
  cursor: not-allowed;
}

.preset-button.clear {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.preset-button.clear:hover:not(:disabled) {
  background-color: #fee2e2;
  border-color: #f87171;
}

/* Error Display */
.duration-input-error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.duration-input-error::before {
  content: '⚠';
  font-size: 1rem;
}

/* Help Text */
.duration-input-help {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}

/* Focus States */
.duration-input-container.focused .duration-input-label {
  color: #3b82f6;
}

.duration-input-container.focused .duration-label {
  color: #3b82f6;
}

/* Responsive Design */
@media (max-width: 640px) {
  .duration-input-wrapper {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  
  .duration-field {
    width: 100%;
    max-width: 200px;
  }
  
  .duration-input-group {
    width: 100%;
  }
  
  .duration-input {
    flex: 1;
    min-width: 0;
  }
  
  .duration-button {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .duration-presets {
    gap: 0.75rem;
  }
  
  .preset-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-width: 60px;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  .duration-button {
    width: 48px;
    height: 48px;
    font-size: 1.375rem;
  }
  
  .duration-input {
    height: 48px;
    font-size: 1.25rem;
  }
  
  .preset-button {
    padding: 0.75rem 1rem;
    min-height: 44px;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .duration-input-group {
    border-width: 3px;
  }
  
  .duration-button {
    border-width: 2px;
  }
  
  .preset-button {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .duration-input-group,
  .duration-button,
  .preset-button {
    transition: none;
  }
  
  .duration-button:active:not(:disabled),
  .preset-button:active:not(:disabled) {
    transform: none;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .duration-input-label {
    color: #f3f4f6;
  }
  
  .duration-input-group {
    background-color: #374151;
    border-color: #4b5563;
  }
  
  .duration-input-container.focused .duration-input-group {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
  }
  
  .duration-button {
    background-color: #4b5563;
    color: #f3f4f6;
    border-color: #6b7280;
  }
  
  .duration-button:hover:not(:disabled) {
    background-color: #6b7280;
    color: #ffffff;
  }
  
  .duration-button:active:not(:disabled) {
    background-color: #9ca3af;
  }
  
  .duration-button:disabled {
    background-color: #1f2937;
    color: #6b7280;
  }
  
  .duration-input {
    color: #f3f4f6;
  }
  
  .duration-input:focus {
    background-color: #1f2937;
  }
  
  .duration-input:disabled {
    color: #6b7280;
  }
  
  .duration-label {
    color: #d1d5db;
  }
  
  .duration-input-container.focused .duration-label {
    color: #60a5fa;
  }
  
  .duration-display {
    background-color: #1f2937;
    border-color: #374151;
  }
  
  .formatted-duration {
    color: #f3f4f6;
  }
  
  .total-minutes {
    color: #d1d5db;
  }
  
  .preset-button {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }
  
  .preset-button:hover:not(:disabled) {
    background-color: #4b5563;
    border-color: #6b7280;
  }
  
  .preset-button:active:not(:disabled) {
    background-color: #6b7280;
  }
  
  .preset-button.clear {
    background-color: #991b1b;
    border-color: #dc2626;
    color: #fecaca;
  }
  
  .preset-button.clear:hover:not(:disabled) {
    background-color: #dc2626;
    border-color: #ef4444;
  }
  
  .duration-input-help {
    color: #d1d5db;
  }
}

/* Print Styles */
@media print {
  .duration-input-container {
    break-inside: avoid;
  }
  
  .duration-button,
  .preset-button {
    display: none;
  }
  
  .duration-input-group {
    border: 1px solid #000;
  }
  
  .duration-input {
    border: 1px solid #000;
  }
  
  .duration-input-help {
    display: none;
  }
}

/* Animation for value changes */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
}

.duration-button:active:not(:disabled) {
  animation: bounce 0.3s ease-in-out;
}

/* Focus ring for better accessibility */
.duration-input:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.duration-button:focus-visible,
.preset-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
} 

/* Spinner animation for loading states */

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  min-height: 100vh;  /* 🚨 FIX: Prevent resize flash on load */
  min-width: 100vw;   /* 🚨 FIX: Prevent resize flash on load */
  font-family: 'Plus Jakarta Sans', sans-serif;
  scroll-behavior: smooth;
  /* 🚨 FIX: Prevent layout shift during initialization */
  overflow: hidden;  /* Prevent scrollbars during load */
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* Match the beautiful dashboard gradient color vibe */
  background: radial-gradient(1200px 800px at 20% 15%, rgba(30,118,255,0.25) 0%, rgba(0,194,255,0.18) 35%, rgba(15,21,53,0.95) 60%), #0f1535;
  color: #ffffff;
  /* 🚨 FIX: Prevent content jump during load */
  position: fixed;  /* Fix position during initial load */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Vision UI inspired scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #0075ff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00c2ff;
}

/* PnQ Health brand gradients */

.pnq-gradient-text {
  background: linear-gradient(90deg, #0075ff, #00c2ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.pnq-bg-gradient {
  background: linear-gradient(90deg, #0075ff, #00c2ff);
}

.pnq-bg-gradient-purple {
  background: linear-gradient(90deg, #9146b8, #b254e8);
}

/* VisionUI Dashboard-inspired background  */

.blur-bg {
  -webkit-backdrop-filter: blur(120px);
  backdrop-filter: blur(120px);
}

/* Remove focus outline */

*:focus {
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* App loading spinner */

.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background-color: #0f1535;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 117, 255, 0.2);
  border-radius: 50%;
  border-top-color: #0075ff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 🎨 AURIS DESIGN TOKENS - THE SACRED ELEMENTS */
/* ⚠️  WARNING: These tokens are PROTECTED and should NEVER be modified */
/* 🔒 They represent the core aesthetic that makes this app beautiful */

:root {
  /* ==========================================================================
     🔒 TIER 1: IMMUTABLE CORE DESIGN LANGUAGE - NEVER CHANGE THESE
     ========================================================================== */
  
  /* 🌟 GLASSMORPHISM EFFECTS - The heart of the aesthetic */
  --auris-core-blur: blur(120px);
  --auris-core-blur-webkit: blur(120px);
  --auris-core-glass-primary: rgba(255, 255, 255, 0.1);
  --auris-core-glass-secondary: rgba(255, 255, 255, 0.05);
  --auris-core-glass-surface: rgba(16, 25, 50, 0.6);
  
  /* ✨ BORDER & GLOW EFFECTS - The subtle elegance */
  --auris-core-border-glow: rgba(255, 255, 255, 0.1);
  --auris-core-border-subtle: rgba(255, 255, 255, 0.05);
  --auris-core-border-radius: 15px;
  --auris-core-border-radius-small: 8px;
  
  /* 🌈 SHADOW DEPTHS - The depth perception magic */
  --auris-core-shadow-depth: 0 4px 20px rgba(0, 0, 0, 0.2);
  --auris-core-shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.1);
  --auris-core-shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
  
  /* 🎨 SACRED COLOR GRADIENTS - The emotional design language */
  --auris-core-gradient-urgent: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  --auris-core-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --auris-core-gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  
  /* 🔥 BRAND COLORS - The identity */
  --auris-core-primary: #1976d2;
  --auris-core-primary-light: #42a5f5;
  --auris-core-primary-dark: #1565c0;
  --auris-core-urgent-red: #f56565;
  --auris-core-urgent-red-dark: #e53e3e;
  
  /* 📝 TEXT HIERARCHY - The readability magic */
  --auris-core-text-primary: rgba(255, 255, 255, 0.9);
  --auris-core-text-secondary: rgba(255, 255, 255, 0.7);
  --auris-core-text-muted: rgba(255, 255, 255, 0.5);
  
  /* ⚡ ANIMATION TIMINGS - The smoothness */
  --auris-core-transition-fast: 0.2s ease-in-out;
  --auris-core-transition-smooth: 0.3s ease-in-out;
  --auris-core-transition-slow: 0.5s ease-in-out;
  
  /* ==========================================================================
     🔄 TIER 2: RESTRICTED THEME TOKENS - Requires design review to change
     ========================================================================== */
  
  /* 🎭 Theme variants that inherit from core */
  --auris-theme-background: var(--auris-core-glass-surface);
  --auris-theme-surface: var(--auris-core-glass-primary);
  --auris-theme-border: var(--auris-core-border-glow);
  --auris-theme-shadow: var(--auris-core-shadow-depth);
  --auris-theme-text: var(--auris-core-text-primary);
  
  /* 🎨 Component-specific theme tokens */
  --auris-card-background: var(--auris-core-glass-primary);
  --auris-card-border: var(--auris-core-border-glow);
  --auris-card-shadow: var(--auris-core-shadow-depth);
  
  --auris-button-primary-bg: var(--auris-core-primary);
  --auris-button-urgent-bg: var(--auris-core-gradient-urgent);
  
  /* ==========================================================================
     🛠️ TIER 3: FLEXIBLE UTILITY TOKENS - Can be modified for optimization
     ========================================================================== */
  
  /* 📏 Spacing system */
  --auris-spacing-xs: 0.25rem;   /* 4px */
  --auris-spacing-sm: 0.5rem;    /* 8px */
  --auris-spacing-md: 1rem;      /* 16px */
  --auris-spacing-lg: 1.5rem;    /* 24px */
  --auris-spacing-xl: 2rem;      /* 32px */
  --auris-spacing-xxl: 3rem;     /* 48px */
  
  /* 📐 Layout dimensions */
  --auris-width-full: 100%;
  --auris-height-full: 100%;
  --auris-min-height: 0;
  
  /* 🎯 Z-index layers */
  --auris-z-background: -1;
  --auris-z-default: 0;
  --auris-z-elevated: 10;
  --auris-z-modal: 1000;
  --auris-z-tooltip: 2000;
}

/* ==========================================================================
   🎨 SKIN LAYER CLASSES - THE PROTECTED AESTHETIC
   ========================================================================== */

/* 🌟 Primary glassmorphism skin */
.auris-skin-glass {
  background: var(--auris-core-glass-primary) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* ✨ Secondary glassmorphism skin */
.auris-skin-glass-subtle {
  background: var(--auris-core-glass-secondary) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
  border: 1px solid var(--auris-core-border-subtle) !important;
  border-radius: var(--auris-core-border-radius-small) !important;
  box-shadow: var(--auris-core-shadow-subtle) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* 🔥 Urgent gradient skin */
.auris-skin-urgent {
  background: var(--auris-core-gradient-urgent) !important;
  border: 1px solid var(--auris-core-urgent-red) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  color: white !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* 🎨 Primary gradient skin */
.auris-skin-primary {
  background: var(--auris-core-gradient-primary) !important;
  border: 1px solid var(--auris-core-primary) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  color: white !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* 🌊 Surface skin for containers */
.auris-skin-surface {
  background: var(--auris-core-glass-surface) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* ==========================================================================
   🎯 INTERACTIVE STATES - The delightful micro-interactions
   ========================================================================== */

.auris-skin-glass:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.auris-skin-urgent:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(245, 101, 101, 0.4) !important;
}

.auris-skin-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(25, 118, 210, 0.4) !important;
}

/* ==========================================================================
   🛡️ PROTECTION RULES - CSS that prevents accidental overrides
   ========================================================================== */

/* Prevent any accidental overrides of our sacred elements */
.auris-skin-glass,
.auris-skin-glass-subtle,
.auris-skin-urgent,
.auris-skin-primary,
.auris-skin-surface {
  /* These classes are PROTECTED - do not override */
  position: relative;
  z-index: var(--auris-z-default);
}

/* Ensure our design tokens are never accidentally overridden */
[style*="backdrop-filter"]:not(.auris-skin-glass):not(.auris-skin-glass-subtle):not(.auris-skin-surface) {
  /* Warn developers not to override our glassmorphism */
  border: 2px dashed #ff6b6b !important;
  background: rgba(255, 107, 107, 0.1) !important;
}

/* ==========================================================================
   📱 RESPONSIVE DESIGN TOKENS
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --auris-core-border-radius: 12px;
    --auris-core-border-radius-small: 6px;
    --auris-spacing-md: 0.75rem;
    --auris-spacing-lg: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --auris-core-border-radius: 10px;
    --auris-core-border-radius-small: 5px;
    --auris-spacing-md: 0.5rem;
    --auris-spacing-lg: 1rem;
  }
}
/* 🏷️ AURIS NAMESPACE SYSTEM - BEAUTIFUL BEM METHODOLOGY */
/* 🎯 Structure: .auris-[domain]-[component]-[element]--[modifier] */

/* ==========================================================================
   🎨 GLOBAL AURIS NAMESPACE FOUNDATION
   ========================================================================== */

/* Base namespace for all Auris components */
.auris {
  /* Global Auris component base styles */
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--auris-core-text-primary);
  line-height: 1.6;
}

/* ==========================================================================
   🏢 ADMIN DOMAIN NAMESPACE
   ========================================================================== */

/* Admin Dashboard Container */
.auris-admin-dashboard {
  /* Base admin dashboard styles */
  width: var(--auris-width-full);
  min-height: var(--auris-height-full);
  padding: var(--auris-spacing-lg);
}

.auris-admin-dashboard__container {
  /* Main dashboard container */
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-lg);
}

.auris-admin-dashboard__header {
  /* Dashboard header section */
  margin-bottom: var(--auris-spacing-lg);
}

.auris-admin-dashboard__content {
  /* Main content area */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-md);
}

.auris-admin-dashboard__tabs {
  /* Tab navigation */
  margin-bottom: var(--auris-spacing-lg);
}

.auris-admin-dashboard__tabs--transparent {
  /* Transparent tab variant */
  background: transparent !important;
}

/* Admin Summary Cards */
.auris-admin-summary-card {
  /* Base summary card */
  cursor: pointer;
  transition: all var(--auris-core-transition-smooth);
}

.auris-admin-summary-card__content {
  /* Card content area */
  padding: var(--auris-spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auris-admin-summary-card__icon {
  /* Card icon */
  margin-right: var(--auris-spacing-sm);
}

.auris-admin-summary-card__text {
  /* Card text content */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.auris-admin-summary-card__title {
  /* Card title */
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--auris-core-text-primary);
}

.auris-admin-summary-card__value {
  /* Card value */
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--auris-core-text-primary);
}

.auris-admin-summary-card--urgent {
  /* Urgent card variant */
  /* Uses auris-skin-urgent class for styling */
}

.auris-admin-summary-card--primary {
  /* Primary card variant */
  /* Uses auris-skin-primary class for styling */
}

/* ==========================================================================
   👥 USER MANAGEMENT DOMAIN NAMESPACE
   ========================================================================== */

/* User Management Container */
.auris-user-management {
  /* Base user management container */
  width: var(--auris-width-full);
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-md);
}

.auris-user-management__container {
  /* Main user management container */
  /* Uses auris-skin-surface for glassmorphism */
}

.auris-user-management__header {
  /* User management header */
  padding: var(--auris-spacing-lg);
  border-bottom: 1px solid var(--auris-core-border-glow);
}

.auris-user-management__title {
  /* Section title */
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--auris-core-text-primary);
  margin-bottom: var(--auris-spacing-sm);
}

.auris-user-management__subtitle {
  /* Section subtitle */
  font-size: 0.875rem;
  color: var(--auris-core-text-secondary);
}

/* User Management Controls */
.auris-user-management__controls {
  /* Control section */
  padding: var(--auris-spacing-lg);
  display: flex;
  gap: var(--auris-spacing-md);
  align-items: center;
  flex-wrap: wrap;
}

.auris-user-management__search {
  /* Search input */
  flex: 1;
  min-width: 200px;
}

.auris-user-management__filters {
  /* Filter controls */
  display: flex;
  gap: var(--auris-spacing-sm);
  align-items: center;
}

.auris-user-management__filter {
  /* Individual filter */
  min-width: 120px;
}

/* User Management Grid */
.auris-user-management__grid {
  /* Main grid container */
  flex: 1;
  min-height: 0;
  /* Uses auris-skin-glass for transparency */
}

.auris-user-management__grid-container {
  /* Grid wrapper */
  height: var(--auris-height-full);
  width: var(--auris-width-full);
}

.auris-user-management__grid--transparent {
  /* Transparent grid variant */
  background: transparent !important;
}

/* ==========================================================================
   📊 AG GRID DOMAIN NAMESPACE
   ========================================================================== */

/* AG Grid Container */
.auris-ag-grid {
  /* Base AG Grid container */
  width: var(--auris-width-full);
  height: var(--auris-height-full);
}

.auris-ag-grid__container {
  /* AG Grid wrapper */
  /* Uses auris-skin-glass for glassmorphism */
}

.auris-ag-grid__header {
  /* AG Grid header */
  padding: var(--auris-spacing-md);
  border-bottom: 1px solid var(--auris-core-border-glow);
  background: var(--auris-core-glass-secondary);
}

.auris-ag-grid__title {
  /* Grid title */
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--auris-core-text-primary);
}

.auris-ag-grid__content {
  /* Grid content area */
  flex: 1;
  min-height: 0;
}

.auris-ag-grid--transparent {
  /* Transparent AG Grid variant */
  background: transparent !important;
}

.auris-ag-grid--glass {
  /* Glassmorphism AG Grid variant */
  /* Uses auris-skin-glass for styling */
}

/* ==========================================================================
   🏷️ STATUS PILLS DOMAIN NAMESPACE
   ========================================================================== */

/* Status Pills */
.auris-status-pill {
  /* Base status pill */
  display: inline-flex;
  align-items: center;
  padding: var(--auris-spacing-xs) var(--auris-spacing-sm);
  border-radius: var(--auris-core-border-radius-small);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auris-status-pill__icon {
  /* Pill icon */
  margin-right: var(--auris-spacing-xs);
  width: 12px;
  height: 12px;
}

.auris-status-pill__text {
  /* Pill text */
  white-space: nowrap;
}

/* Status Pill Variants */
.auris-status-pill--verification {
  /* Verification status */
  background-color: #10b981;
  color: white;
}

.auris-status-pill--sessions {
  /* Sessions status */
  background-color: #3b82f6;
  color: white;
}

.auris-status-pill--forms {
  /* Forms status */
  background-color: #8b5cf6;
  color: white;
}

.auris-status-pill--patient {
  /* Patient status */
  background-color: #f59e0b;
  color: white;
}

.auris-status-pill--treatment {
  /* Treatment status */
  background-color: #ef4444;
  color: white;
}

/* ==========================================================================
   🔍 SEARCH DOMAIN NAMESPACE
   ========================================================================== */

/* Search Components */
.auris-search {
  /* Base search component */
  position: relative;
  width: var(--auris-width-full);
}

.auris-search__input {
  /* Search input */
  width: var(--auris-width-full);
  padding: var(--auris-spacing-sm) var(--auris-spacing-md);
  border: 1px solid var(--auris-core-border-glow);
  border-radius: var(--auris-core-border-radius-small);
  background: var(--auris-core-glass-secondary);
  color: var(--auris-core-text-primary);
  transition: all var(--auris-core-transition-smooth);
}

.auris-search__input:focus {
  /* Focused search input */
  outline: none;
  border-color: var(--auris-core-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.auris-search__icon {
  /* Search icon */
  position: absolute;
  right: var(--auris-spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--auris-core-text-secondary);
}

/* ==========================================================================
   🎛️ FILTER DOMAIN NAMESPACE
   ========================================================================== */

/* Filter Components */
.auris-filter {
  /* Base filter component */
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-xs);
}

.auris-filter__label {
  /* Filter label */
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--auris-core-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auris-filter__select {
  /* Filter select */
  padding: var(--auris-spacing-sm) var(--auris-spacing-md);
  border: 1px solid var(--auris-core-border-glow);
  border-radius: var(--auris-core-border-radius-small);
  background: var(--auris-core-glass-secondary);
  color: var(--auris-core-text-primary);
  transition: all var(--auris-core-transition-smooth);
}

.auris-filter__select:focus {
  /* Focused filter select */
  outline: none;
  border-color: var(--auris-core-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* ==========================================================================
   📱 RESPONSIVE NAMESPACE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .auris-admin-dashboard {
    padding: var(--auris-spacing-md);
  }
  
  .auris-user-management__controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .auris-user-management__search {
    min-width: auto;
  }
  
  .auris-user-management__filters {
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .auris-admin-dashboard {
    padding: var(--auris-spacing-sm);
  }
  
  .auris-user-management__controls {
    gap: var(--auris-spacing-sm);
  }
  
  .auris-status-pill {
    font-size: 0.625rem;
    padding: 2px var(--auris-spacing-xs);
  }
}
/* 🎯 AG GRID OVERRIDES - BEAUTIFUL TRANSPARENCY SYSTEM */
/* 🎨 This file specifically targets AG Grid while preserving the beloved design */

/* ==========================================================================
   🌟 AG GRID THEME VARIABLE OVERRIDES
   ========================================================================== */

/* Override AG Grid's CSS custom properties with our beautiful design tokens */
.auris-ag-grid__container {
  /* Set AG Grid theme variables to match our design */
  --ag-background-color: transparent;
  --ag-header-background-color: var(--auris-core-glass-secondary);
  --ag-odd-row-background-color: transparent;
  --ag-row-background-color: transparent;
  --ag-row-hover-color: var(--auris-core-glass-primary);
  --ag-selected-row-background-color: rgba(25, 118, 210, 0.2);
  --ag-border-color: var(--auris-core-border-glow);
  --ag-header-foreground-color: var(--auris-core-text-primary);
  --ag-foreground-color: var(--auris-core-text-primary);
  --ag-disabled-foreground-color: var(--auris-core-text-muted);
  --ag-input-border-color: var(--auris-core-border-glow);
  --ag-input-focus-border-color: var(--auris-core-primary);
  --ag-range-selection-background-color: rgba(25, 118, 210, 0.1);
  --ag-range-selection-background-color-2: rgba(25, 118, 210, 0.2);
  --ag-range-selection-background-color-3: rgba(25, 118, 210, 0.3);
  --ag-range-selection-background-color-4: rgba(25, 118, 210, 0.4);
}

/* ==========================================================================
   🎨 AG GRID ROOT ELEMENT OVERRIDES
   ========================================================================== */

/* Target AG Grid root elements with maximum specificity */
.auris-ag-grid__container .ag-root,
.auris-ag-grid__container .ag-root-wrapper,
.auris-ag-grid__container .ag-body,
.auris-ag-grid__container .ag-body-viewport,
.auris-ag-grid__container .ag-body-horizontal-scroll,
.auris-ag-grid__container .ag-body-vertical-scroll,
.auris-ag-grid__container .ag-center-cols-container,
.auris-ag-grid__container .ag-center-cols-viewport {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================================
   🏷️ AG GRID HEADER OVERRIDES
   ========================================================================== */

/* Beautiful header styling that matches our glassmorphism */
.auris-ag-grid__container .ag-header,
.auris-ag-grid__container .ag-header-row,
.auris-ag-grid__container .ag-header-cell {
  background-color: var(--auris-core-glass-secondary) !important;
  background: var(--auris-core-glass-secondary) !important;
  border-bottom: 1px solid var(--auris-core-border-glow) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-ag-grid__container .ag-header-cell-label {
  color: var(--auris-core-text-primary) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   📊 AG GRID ROW OVERRIDES
   ========================================================================== */

/* Transparent rows that maintain readability */
.auris-ag-grid__container .ag-row,
.auris-ag-grid__container .ag-row-even,
.auris-ag-grid__container .ag-row-odd {
  background-color: transparent !important;
  background: transparent !important;
  border-bottom: 1px solid var(--auris-core-border-subtle) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-ag-grid__container .ag-row:hover {
  background-color: var(--auris-core-glass-primary) !important;
  background: var(--auris-core-glass-primary) !important;
}

.auris-ag-grid__container .ag-row-selected {
  background-color: rgba(25, 118, 210, 0.2) !important;
  background: rgba(25, 118, 210, 0.2) !important;
}

/* ==========================================================================
   📝 AG GRID CELL OVERRIDES
   ========================================================================== */

/* Beautiful cell styling */
.auris-ag-grid__container .ag-cell,
.auris-ag-grid__container .ag-cell-value {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--auris-core-text-primary) !important;
  border-right: 1px solid var(--auris-core-border-subtle) !important;
}

.auris-ag-grid__container .ag-cell:focus {
  border: 2px solid var(--auris-core-primary) !important;
  outline: none !important;
}

/* ==========================================================================
   🎯 AG GRID THEME-SPECIFIC OVERRIDES
   ========================================================================== */

/* Override all AG Grid themes to use our beautiful design */
.auris-ag-grid__container .ag-theme-alpine,
.auris-ag-grid__container .ag-theme-material,
.auris-ag-grid__container .ag-theme-quartz,
.auris-ag-grid__container .ag-theme-quartz-dark {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================================
   🔍 AG GRID FILTER OVERRIDES
   ========================================================================== */

/* Beautiful filter styling */
.auris-ag-grid__container .ag-filter-toolpanel,
.auris-ag-grid__container .ag-filter-toolpanel-header {
  background-color: var(--auris-core-glass-primary) !important;
  background: var(--auris-core-glass-primary) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius-small) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
}

.auris-ag-grid__container .ag-filter-toolpanel-body {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================================
   📄 AG GRID PAGINATION OVERRIDES
   ========================================================================== */

/* Beautiful pagination styling */
.auris-ag-grid__container .ag-paging-panel {
  background-color: var(--auris-core-glass-secondary) !important;
  background: var(--auris-core-glass-secondary) !important;
  border-top: 1px solid var(--auris-core-border-glow) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-ag-grid__container .ag-paging-button {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  color: var(--auris-core-text-primary) !important;
  border-radius: var(--auris-core-border-radius-small) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

.auris-ag-grid__container .ag-paging-button:hover {
  background-color: var(--auris-core-glass-primary) !important;
  background: var(--auris-core-glass-primary) !important;
  border-color: var(--auris-core-primary) !important;
}

/* ==========================================================================
   🎨 AG GRID STATUS PILL PROTECTION
   ========================================================================== */

/* Ensure our beautiful status pills are never overridden by AG Grid */
.auris-ag-grid__container .ag-cell .auris-status-pill,
.auris-ag-grid__container .ag-cell .auris-status-pill--verification,
.auris-ag-grid__container .ag-cell .auris-status-pill--sessions,
.auris-ag-grid__container .ag-cell .auris-status-pill--forms,
.auris-ag-grid__container .ag-cell .auris-status-pill--patient,
.auris-ag-grid__container .ag-cell .auris-status-pill--treatment {
  background-color: inherit !important;
  background: inherit !important;
  color: inherit !important;
  border: inherit !important;
  box-shadow: inherit !important;
}

/* ==========================================================================
   🚀 AG GRID PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Optimize AG Grid rendering for our glassmorphism effects */
.auris-ag-grid__container .ag-root,
.auris-ag-grid__container .ag-body-viewport {
  will-change: transform !important;
  transform: translateZ(0) !important;
}

/* ==========================================================================
   📱 AG GRID RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 768px) {
  .auris-ag-grid__container .ag-header-cell {
    font-size: 0.875rem !important;
  }
  
  .auris-ag-grid__container .ag-cell {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .auris-ag-grid__container .ag-header-cell {
    font-size: 0.75rem !important;
  }
  
  .auris-ag-grid__container .ag-cell {
    font-size: 0.75rem !important;
  }
}

/* ==========================================================================
   🎯 AG GRID LOADING STATE OVERRIDES
   ========================================================================== */

/* Beautiful loading state */
.auris-ag-grid__container .ag-overlay-loading-wrapper {
  background-color: var(--auris-core-glass-surface) !important;
  background: var(--auris-core-glass-surface) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
}

.auris-ag-grid__container .ag-overlay-loading-center {
  background-color: var(--auris-core-glass-primary) !important;
  background: var(--auris-core-glass-primary) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius) !important;
  color: var(--auris-core-text-primary) !important;
}

/* ==========================================================================
   🛡️ AG GRID PROTECTION RULES
   ========================================================================== */

/* Prevent any accidental overrides of our AG Grid styling */
.auris-ag-grid__container {
  /* This container is PROTECTED - do not override */
  position: relative;
  z-index: var(--auris-z-default);
}

/* Ensure our AG Grid overrides take precedence */
.auris-ag-grid__container * {
  /* Our overrides should always win */
  box-sizing: border-box;
}
/* 🎨 COMPONENT THEMES - CSS-FIRST ARCHITECTURE */
/* 🚀 This file replaces all brittle JavaScript CSS injection with beautiful CSS classes! */

/* ==========================================================================
   🎯 TABLE THEMES - REPLACE JAVASCRIPT CSS INJECTION
   ========================================================================== */

/* Beautiful Users Table Theme */
.auris-table-theme-users {
  background-color: var(--auris-core-glass-surface) !important;
  border-radius: var(--auris-core-border-radius) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
}

.auris-table-theme-users .MuiTableCell-root {
  border-bottom: 1px solid var(--auris-core-border-subtle) !important;
  color: var(--auris-core-text-primary) !important;
  padding: 12px 16px !important;
}

.auris-table-theme-users .MuiTableHead-root {
  background-color: var(--auris-core-glass-secondary) !important;
}

.auris-table-theme-users .MuiTableHead-root .MuiTableCell-root {
  font-weight: bold !important;
  font-size: 0.875rem !important;
  background-color: var(--auris-core-glass-secondary) !important;
  color: var(--auris-core-text-primary) !important;
  border-bottom: 2px solid var(--auris-core-border-glow) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.auris-table-theme-users .MuiTableBody-root .MuiTableRow-root {
  background-color: transparent !important;
}

.auris-table-theme-users .MuiTableBody-root .MuiTableRow-root:nth-of-type(even) {
  background-color: var(--auris-core-glass-subtle) !important;
}

.auris-table-theme-users .MuiTableBody-root .MuiTableRow-root:hover {
  background-color: var(--auris-core-glass-primary) !important;
  transition: background-color 0.2s ease !important;
}

.auris-table-theme-users .MuiTableContainer-root {
  background-color: transparent !important;
}

/* ==========================================================================
   🎯 ACTIVITY TAB THEMES
   ========================================================================== */

/* Beautiful Activity Tab Theme */
.auris-activity-theme-default {
  background-color: var(--auris-core-glass-secondary) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-activity-theme-primary {
  background-color: var(--auris-core-glass-primary) !important;
  color: var(--auris-core-text-primary) !important;
}

/* ==========================================================================
   🎯 FILTER SECTION THEMES
   ========================================================================== */

/* Beautiful Filter Section Theme */
.auris-filter-theme-container {
  background-color: var(--auris-core-glass-secondary) !important;
  border-radius: 8px !important;
}

.auris-filter-theme-container .MuiAccordionSummary-root {
  background-color: var(--auris-core-glass-secondary) !important;
  border-radius: 8px 8px 0 0 !important;
  min-height: 56px !important;
  padding: 0 16px !important;
}

.auris-filter-theme-container .MuiAccordionDetails-root {
  background-color: var(--auris-core-glass-surface) !important;
  border-radius: 0 0 8px 8px !important;
  padding: 16px !important;
  border-top: 1px solid var(--auris-core-border-glow) !important;
}

/* ==========================================================================
   🎯 AG GRID THEMES
   ========================================================================== */

/* Beautiful AG Grid Theme */
.auris-ag-grid-theme-transparent {
  --ag-background-color: transparent !important;
  --ag-header-background-color: var(--auris-core-glass-secondary) !important;
  --ag-odd-row-background-color: transparent !important;
  --ag-row-background-color: transparent !important;
  --ag-row-hover-color: var(--auris-core-glass-primary) !important;
  --ag-selected-row-background-color: rgba(25, 118, 210, 0.2) !important;
  --ag-border-color: var(--auris-core-border-glow) !important;
  --ag-header-foreground-color: var(--auris-core-text-primary) !important;
  --ag-foreground-color: var(--auris-core-text-primary) !important;
  --ag-disabled-foreground-color: var(--auris-core-text-muted) !important;
  --ag-input-border-color: var(--auris-core-border-glow) !important;
  --ag-input-focus-border-color: var(--auris-core-primary) !important;
  --ag-range-selection-background-color: rgba(25, 118, 210, 0.1) !important;
  --ag-range-selection-background-color-2: rgba(25, 118, 210, 0.2) !important;
  --ag-range-selection-background-color-3: rgba(25, 118, 210, 0.3) !important;
  --ag-range-selection-background-color-4: rgba(25, 118, 210, 0.4) !important;
}

.auris-ag-grid-theme-transparent .ag-root,
.auris-ag-grid-theme-transparent .ag-root-wrapper,
.auris-ag-grid-theme-transparent .ag-body,
.auris-ag-grid-theme-transparent .ag-body-viewport,
.auris-ag-grid-theme-transparent .ag-body-horizontal-scroll,
.auris-ag-grid-theme-transparent .ag-body-vertical-scroll,
.auris-ag-grid-theme-transparent .ag-center-cols-container,
.auris-ag-grid-theme-transparent .ag-center-cols-viewport {
  background-color: transparent !important;
  background: transparent !important;
}

.auris-ag-grid-theme-transparent .ag-header,
.auris-ag-grid-theme-transparent .ag-header-row,
.auris-ag-grid-theme-transparent .ag-header-cell {
  background-color: var(--auris-core-glass-secondary) !important;
  background: var(--auris-core-glass-secondary) !important;
  border-bottom: 1px solid var(--auris-core-border-glow) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-ag-grid-theme-transparent .ag-row,
.auris-ag-grid-theme-transparent .ag-row-even,
.auris-ag-grid-theme-transparent .ag-row-odd {
  background-color: transparent !important;
  background: transparent !important;
  border-bottom: 1px solid var(--auris-core-border-subtle) !important;
  color: var(--auris-core-text-primary) !important;
}

.auris-ag-grid-theme-transparent .ag-row:hover {
  background-color: var(--auris-core-glass-primary) !important;
  background: var(--auris-core-glass-primary) !important;
}

.auris-ag-grid-theme-transparent .ag-row-selected {
  background-color: rgba(25, 118, 210, 0.2) !important;
  background: rgba(25, 118, 210, 0.2) !important;
}

.auris-ag-grid-theme-transparent .ag-cell,
.auris-ag-grid-theme-transparent .ag-cell-value {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--auris-core-text-primary) !important;
  border-right: 1px solid var(--auris-core-border-subtle) !important;
}

/* ==========================================================================
   🎯 STATUS PILL THEMES
   ========================================================================== */

/* Beautiful Status Pill Themes */
.auris-status-pill-theme-verification {
  background-color: #10b981 !important;
  color: white !important;
}

.auris-status-pill-theme-sessions {
  background-color: #3b82f6 !important;
  color: white !important;
}

.auris-status-pill-theme-forms {
  background-color: #8b5cf6 !important;
  color: white !important;
}

.auris-status-pill-theme-patient {
  background-color: #f59e0b !important;
  color: white !important;
}

.auris-status-pill-theme-treatment {
  background-color: #ef4444 !important;
  color: white !important;
}

/* ==========================================================================
   🎯 CARD THEMES
   ========================================================================== */

/* Beautiful Card Themes */
.auris-card-theme-glass {
  background: var(--auris-core-glass-primary) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

.auris-card-theme-glass:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.auris-card-theme-surface {
  background: var(--auris-core-glass-surface) !important;
  backdrop-filter: var(--auris-core-blur) !important;
  -webkit-backdrop-filter: var(--auris-core-blur-webkit) !important;
  border: 1px solid var(--auris-core-border-glow) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

/* ==========================================================================
   🎯 BUTTON THEMES
   ========================================================================== */

/* Beautiful Button Themes */
.auris-button-theme-primary {
  background: var(--auris-core-gradient-primary) !important;
  border: 1px solid var(--auris-core-primary) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  color: white !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

.auris-button-theme-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(25, 118, 210, 0.4) !important;
}

.auris-button-theme-urgent {
  background: var(--auris-core-gradient-urgent) !important;
  border: 1px solid var(--auris-core-urgent-red) !important;
  border-radius: var(--auris-core-border-radius) !important;
  box-shadow: var(--auris-core-shadow-depth) !important;
  color: white !important;
  transition: all var(--auris-core-transition-smooth) !important;
}

.auris-button-theme-urgent:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(245, 101, 101, 0.4) !important;
}

/* ==========================================================================
   🎯 RESPONSIVE THEMES
   ========================================================================== */

@media (max-width: 768px) {
  .auris-table-theme-users .MuiTableHead-root .MuiTableCell-root {
    font-size: 0.875rem !important;
  }
  
  .auris-table-theme-users .MuiTableCell-root {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 480px) {
  .auris-table-theme-users .MuiTableHead-root .MuiTableCell-root {
    font-size: 0.75rem !important;
  }
  
  .auris-table-theme-users .MuiTableCell-root {
    font-size: 0.75rem !important;
  }
}
/* 🎨 AURIS DASHBOARD - BEAUTIFUL ARCHITECTURE IMPLEMENTATION */
/* 🚀 This file now uses our new design token system and namespace architecture! */

/* ==========================================================================
   🎯 DESIGN TOKENS - CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* 🎨 Color Tokens */
  --auris-color-white: #ffffff;
  --auris-color-black: #000000;
  --auris-color-primary: #0075FF;
  --auris-color-primary-dark: #1a237e;
  --auris-color-secondary: #9146B8;
  --auris-color-success: #01B574;
  --auris-color-warning: #ffb547;
  --auris-color-error: #fa3d56;
  --auris-color-info: #3b82f6;
  --auris-color-neutral: #6b7280;
  
  /* Light variants for backgrounds */
  --auris-color-success-light: #d1fae5;
  --auris-color-warning-light: #fef3c7;
  --auris-color-error-light: #fee2e2;
  --auris-color-info-light: #dbeafe;
  --auris-color-neutral-light: #f3f4f6;
  
  /* Dark variants for text */
  --auris-color-success-dark: #065f46;
  --auris-color-warning-dark: #92400e;
  --auris-color-error-dark: #991b1b;
  --auris-color-info-dark: #1e40af;
  --auris-color-neutral-dark: #374151;
  
  /* 🎨 Border Color Tokens */
  --auris-color-border-light-dark: rgba(255, 255, 255, 0.1);
  --auris-color-border-light-light: rgba(0, 0, 0, 0.1);
  
  /* 🌈 Gradient Tokens */
  --auris-gradient-primary: linear-gradient(90deg, #0075FF 0%, #00C2FF 100%);
  --auris-gradient-primary-dark: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
  --auris-gradient-primary-light: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  --auris-gradient-secondary: linear-gradient(90deg, #9146B8 0%, #b254e8 100%);
  --auris-gradient-card-dark: linear-gradient(135deg, #141727 0%, #2c3154 100%);
  --auris-gradient-card-light: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  --auris-gradient-success: linear-gradient(90deg, #01B574, #21cc9e);
  --auris-gradient-warning: linear-gradient(90deg, #ffb547, #ffd574);
  --auris-gradient-error: linear-gradient(90deg, #fa3d56, #ff788d);
  
  /* 🌫️ Shadow Tokens */
  --auris-shadow-elevation-1-dark: 0px 1px 3px rgba(0, 0, 0, 0.4);
  --auris-shadow-elevation-2-dark: 0px 2px 6px rgba(0, 0, 0, 0.5);
  --auris-shadow-elevation-4-dark: 0px 4px 12px rgba(0, 0, 0, 0.6);
  --auris-shadow-elevation-8-dark: 0px 8px 24px rgba(0, 0, 0, 0.7);
  --auris-shadow-focus-primary: 0 0 0 3px rgba(25, 118, 210, 0.1);
  --auris-shadow-elevated-primary: 0 8px 25px rgba(25, 118, 210, 0.4);
  --auris-shadow-elevated-error: 0 8px 25px rgba(245, 101, 101, 0.4);
  
  /* 🎨 Overlay Tokens */
  --auris-color-overlay-dark: rgba(0, 0, 0, 0.5);
  
  /* 📏 Spacing Tokens */
  --auris-spacing-xs: 4px;
  --auris-spacing-sm: 8px;
  --auris-spacing-md: 16px;
  --auris-spacing-lg: 24px;
  --auris-spacing-xl: 32px;
  
  /* 🔤 Typography Tokens */
  --auris-font-size-xs: 12px;
  --auris-font-size-sm: 14px;
  --auris-font-size-body: 16px;
  --auris-font-size-lg: 18px;
  --auris-font-size-xl: 24px;
  
  /* 🔲 Border Radius Tokens */
  --auris-border-radius-sm: 4px;
  --auris-border-radius-md: 8px;
  --auris-border-radius-lg: 12px;
  --auris-border-radius-xl: 16px;
  
  /* 🎯 Core Design Tokens for Status Pills */
  --auris-core-border-radius: var(--auris-border-radius-lg);
  --auris-core-transition-smooth: 0.2s ease-in-out;
}

/* ==========================================================================
   🎯 LOGO COMPONENTS - CSS CLASSES
   ========================================================================== */

/* PnQ Health Logo */
.auris-pnq-logo {
  /* DEBUG: PnqLogo - Logo image */
  display: block;
  max-width: 100%;
  height: auto;
}

/* PnQ Ear Logo */
.auris-pnq-ear-logo {
  /* DEBUG: PnqEarLogo - Ear logo image */
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--auris-border-radius-lg);
}

/* PnQ Ear Logo SVG */
.auris-pnq-ear-logo-svg {
  /* DEBUG: PnqEarLogo - Ear logo SVG */
  display: block;
  max-width: 100%;
  height: auto;
}

/* PnQ Logo SVG */
.auris-pnq-logo-svg {
  /* DEBUG: PnqLogo - Logo SVG */
  display: block;
  max-width: 100%;
  height: auto;
}

/* PnQ Logo Text */
.auris-pnq-logo-text {
  /* DEBUG: PnqLogo - Logo text */
  fill: var(--auris-color-primary);
  font-size: var(--auris-font-size-lg);
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* ==========================================================================
   🎯 AUTH SYSTEM TOGGLE - CSS CLASSES
   ========================================================================== */

/* Auth System Toggle Container */
.auris-auth-system-toggle-container {
  /* DEBUG: AuthSystemToggle - Container */
  position: fixed;
  bottom: var(--auris-spacing-sm);
  right: var(--auris-spacing-sm);
  padding: var(--auris-spacing-sm);
  z-index: 9999;
  width: 250px;
  background-color: var(--auris-color-overlay-dark);
  color: var(--auris-color-white);
}

/* Auth System Toggle Controls */
.auris-auth-system-toggle-controls {
  /* DEBUG: AuthSystemToggle - Controls */
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-xs);
}

/* Auth System Toggle Status */
.auris-auth-system-toggle-status {
  /* DEBUG: AuthSystemToggle - Status */
  margin-top: var(--auris-spacing-xs);
}

/* ==========================================================================
   🎯 AGGREGATION CONTROL PANEL - CSS CLASSES
   ========================================================================== */

/* Aggregation Control Panel Loading */
.auris-aggregation-control-panel-loading {
  /* DEBUG: AggregationControlPanel - Loading */
  display: flex;
  justify-content: center;
  padding: var(--auris-spacing-md);
}

/* Aggregation Control Panel Container */
.auris-aggregation-control-panel-container {
  /* DEBUG: AggregationControlPanel - Container */
  width: 100%;
}

/* Aggregation Control Panel Header */
.auris-aggregation-control-panel-header {
  /* DEBUG: AggregationControlPanel - Header */
  padding: var(--auris-spacing-md);
  margin-bottom: var(--auris-spacing-md);
}

/* Aggregation Control Panel Header Content */
.auris-aggregation-control-panel-header-content {
  /* DEBUG: AggregationControlPanel - Header Content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-sm);
}

/* Aggregation Control Panel Job History Header */
.auris-aggregation-control-panel-job-history-header {
  /* DEBUG: AggregationControlPanel - Job History Header */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-sm);
}

/* Aggregation Control Panel Cron Status */
.auris-aggregation-control-panel-cron-status {
  /* DEBUG: AggregationControlPanel - Cron Status */
  display: flex;
  align-items: center;
  margin-bottom: var(--auris-spacing-sm);
}

/* Aggregation Control Panel Scheduled Jobs Header */
.auris-aggregation-control-panel-scheduled-jobs-header {
  /* DEBUG: AggregationControlPanel - Scheduled Jobs Header */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-sm);
}

/* ==========================================================================
   🎯 CLINICIAN CREATION FORM - CSS CLASSES
   ========================================================================== */

/* Clinician Creation Form Container */
.auris-clinician-creation-form-container {
  /* DEBUG: ClinicianCreationForm - Container */
  padding: var(--auris-spacing-sm);
}

/* Clinician Creation Form Header */
.auris-clinician-creation-form-header {
  /* DEBUG: ClinicianCreationForm - Header */
  display: flex;
  align-items: center;
  margin-bottom: var(--auris-spacing-sm);
}

/* Clinician Creation Form Icon */
.auris-clinician-creation-form-icon {
  /* DEBUG: ClinicianCreationForm - Icon */
  margin-right: var(--auris-spacing-xs);
  color: var(--auris-color-primary);
}

/* Clinician Creation Form Name Fields */
.auris-clinician-creation-form-name-fields {
  /* DEBUG: ClinicianCreationForm - Name Fields */
  display: flex;
  gap: var(--auris-spacing-sm);
  margin-bottom: var(--auris-spacing-sm);
}

/* Clinician Creation Form Actions */
.auris-clinician-creation-form-actions {
  /* DEBUG: ClinicianCreationForm - Actions */
  display: flex;
  gap: var(--auris-spacing-sm);
  justify-content: flex-end;
}

/* ==========================================================================
   🎯 ENHANCED ADMIN FORM DASHBOARD - CSS CLASSES
   ========================================================================== */

/* Enhanced Admin Form Dashboard Loading */
.auris-enhanced-admin-form-dashboard-loading {
  /* DEBUG: EnhancedAdminFormDashboard - Loading */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

/* Enhanced Admin Form Dashboard Stats Content */
.auris-enhanced-admin-form-dashboard-stats-content {
  /* DEBUG: EnhancedAdminFormDashboard - Stats Content */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Enhanced Admin Form Dashboard Stats Icon */
.auris-enhanced-admin-form-dashboard-stats-icon {
  /* DEBUG: EnhancedAdminFormDashboard - Stats Icon */
  font-size: 40px;
}

/* Enhanced Admin Form Dashboard Filters */
.auris-enhanced-admin-form-dashboard-filters {
  /* DEBUG: EnhancedAdminFormDashboard - Filters */
  display: flex;
  gap: var(--auris-spacing-sm);
  align-items: center;
}

/* Enhanced Admin Form Dashboard View Mode */
.auris-enhanced-admin-form-dashboard-view-mode {
  /* DEBUG: EnhancedAdminFormDashboard - View Mode */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-md);
}

/* Enhanced Admin Form Dashboard Sort Controls */
.auris-enhanced-admin-form-dashboard-sort-controls {
  /* DEBUG: EnhancedAdminFormDashboard - Sort Controls */
  display: flex;
  gap: var(--auris-spacing-xs);
}

/* Enhanced Admin Form Dashboard Patient Info */
.auris-enhanced-admin-form-dashboard-patient-info {
  /* DEBUG: EnhancedAdminFormDashboard - Patient Info */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-xs);
}

/* Enhanced Admin Form Dashboard Patient Avatar */
.auris-enhanced-admin-form-dashboard-patient-avatar {
  /* DEBUG: EnhancedAdminFormDashboard - Patient Avatar */
  width: 32px;
  height: 32px;
}

/* Enhanced Admin Form Dashboard Actions */
.auris-enhanced-admin-form-dashboard-actions {
  /* DEBUG: EnhancedAdminFormDashboard - Actions */
  display: flex;
  gap: var(--auris-spacing-xs);
}

/* Enhanced Admin Form Dashboard Card Header */
.auris-enhanced-admin-form-dashboard-card-header {
  /* DEBUG: EnhancedAdminFormDashboard - Card Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--auris-spacing-sm);
}

/* Enhanced Admin Form Dashboard Card Avatar */
.auris-enhanced-admin-form-dashboard-card-avatar {
  /* DEBUG: EnhancedAdminFormDashboard - Card Avatar */
  width: 40px;
  height: 40px;
}

/* Enhanced Admin Form Dashboard Card Details */
.auris-enhanced-admin-form-dashboard-card-details {
  /* DEBUG: EnhancedAdminFormDashboard - Card Details */
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-xs);
}

/* Enhanced Admin Form Dashboard Dialog Header */
.auris-enhanced-admin-form-dashboard-dialog-header {
  /* DEBUG: EnhancedAdminFormDashboard - Dialog Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Enhanced Admin Form Dashboard Dialog Actions */
.auris-enhanced-admin-form-dashboard-dialog-actions {
  /* DEBUG: EnhancedAdminFormDashboard - Dialog Actions */
  display: flex;
  gap: var(--auris-spacing-xs);
}

/* ==========================================================================
   🎯 ENHANCED CLINICAL ANALYTICS - CSS CLASSES
   ========================================================================== */

/* Enhanced Clinical Analytics Loading */
.auris-enhanced-clinical-analytics-loading {
  /* DEBUG: EnhancedClinicalAnalytics - Loading */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

/* Enhanced Clinical Analytics Card Header */
.auris-enhanced-clinical-analytics-card-header {
  /* DEBUG: EnhancedClinicalAnalytics - Card Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--auris-spacing-sm);
}

/* Enhanced Clinical Analytics Alerts Header */
.auris-enhanced-clinical-analytics-alerts-header {
  /* DEBUG: EnhancedClinicalAnalytics - Alerts Header */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-sm);
  margin-bottom: var(--auris-spacing-sm);
}

/* Enhanced Clinical Analytics Actions */
.auris-enhanced-clinical-analytics-actions {
  /* DEBUG: EnhancedClinicalAnalytics - Actions */
  display: flex;
  gap: var(--auris-spacing-sm);
  margin-top: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-loading {
  /* DEBUG: EnhancedFormScoring - Loading */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.auris-enhanced-form-scoring-score-header {
  /* DEBUG: EnhancedFormScoring - Score Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-score-title {
  /* DEBUG: EnhancedFormScoring - Score Title */
  font-weight: 600;
}

.auris-enhanced-form-scoring-score-icon {
  /* DEBUG: EnhancedFormScoring - Score Icon */
  font-size: 40px;
}

.auris-enhanced-form-scoring-score-value {
  /* DEBUG: EnhancedFormScoring - Score Value */
  font-weight: 700;
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-score-label {
  /* DEBUG: EnhancedFormScoring - Score Label */
  font-weight: 600;
  margin-bottom: var(--auris-spacing-sm);
}

.auris-enhanced-form-scoring-completion-container {
  /* DEBUG: EnhancedFormScoring - Completion Container */
  margin-top: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-completion-text {
  /* DEBUG: EnhancedFormScoring - Completion Text */
  margin-bottom: var(--auris-spacing-sm);
}

.auris-enhanced-form-scoring-progress {
  /* DEBUG: EnhancedFormScoring - Progress */
  height: 8px;
  border-radius: 4px;
}

.auris-enhanced-form-scoring-trend-header {
  /* DEBUG: EnhancedFormScoring - Trend Header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-trend-title {
  /* DEBUG: EnhancedFormScoring - Trend Title */
  font-weight: 600;
}

.auris-enhanced-form-scoring-trend-label {
  /* DEBUG: EnhancedFormScoring - Trend Label */
  font-weight: 500;
}

.auris-enhanced-form-scoring-recommendations-header {
  /* DEBUG: EnhancedFormScoring - Recommendations Header */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-md);
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-form-scoring-recommendations-title {
  /* DEBUG: EnhancedFormScoring - Recommendations Title */
  font-weight: 600;
}

.auris-enhanced-form-scoring-actions {
  /* DEBUG: EnhancedFormScoring - Actions */
  display: flex;
  gap: var(--auris-spacing-md);
  margin-top: var(--auris-spacing-lg);
}

.auris-enhanced-patient-form-viewer-required-indicator {
  /* DEBUG: EnhancedPatientFormViewer - Required Indicator */
  color: var(--auris-color-error);
  margin-left: 4px;
}

.auris-enhanced-patient-form-viewer-scale-response {
  /* DEBUG: EnhancedPatientFormViewer - Scale Response */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-xs);
}

.auris-enhanced-patient-form-viewer-scale-value {
  /* DEBUG: EnhancedPatientFormViewer - Scale Value */
  font-weight: 500;
}

.auris-enhanced-patient-form-viewer-loading {
  /* DEBUG: EnhancedPatientFormViewer - Loading */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.auris-enhanced-patient-form-viewer-header {
  /* DEBUG: EnhancedPatientFormViewer - Header */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-md);
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-patient-form-viewer-title {
  /* DEBUG: EnhancedPatientFormViewer - Title */
  font-weight: 600;
}

.auris-enhanced-patient-form-viewer-patient-info {
  /* DEBUG: EnhancedPatientFormViewer - Patient Info */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-lg);
}

.auris-enhanced-patient-form-viewer-patient-name {
  /* DEBUG: EnhancedPatientFormViewer - Patient Name */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-xs);
}

.auris-enhanced-patient-form-viewer-patient-email {
  /* DEBUG: EnhancedPatientFormViewer - Patient Email */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-xs);
}

.auris-enhanced-patient-form-viewer-metadata {
  /* DEBUG: EnhancedPatientFormViewer - Metadata */
  display: flex;
  flex-direction: column;
  gap: var(--auris-spacing-md);
}

.auris-enhanced-patient-form-viewer-actions {
  /* DEBUG: EnhancedPatientFormViewer - Actions */
  display: flex;
  gap: var(--auris-spacing-xs);
  flex-wrap: wrap;
}

.auris-enhanced-patient-form-viewer-view-mode {
  /* DEBUG: EnhancedPatientFormViewer - View Mode */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-lg);
}

.auris-enhanced-patient-form-viewer-zoom-controls {
  /* DEBUG: EnhancedPatientFormViewer - Zoom Controls */
  display: flex;
  gap: var(--auris-spacing-xs);
}

.auris-enhanced-patient-form-viewer-zoom-level {
  /* DEBUG: EnhancedPatientFormViewer - Zoom Level */
  display: flex;
  align-items: center;
}

.auris-enhanced-patient-form-viewer-section-header {
  /* DEBUG: EnhancedPatientFormViewer - Section Header */
  display: flex;
  align-items: center;
  gap: var(--auris-spacing-md);
  width: 100%;
}

.auris-enhanced-patient-form-viewer-section-title {
  /* DEBUG: EnhancedPatientFormViewer - Section Title */
  font-weight: 600;
}

.auris-enhanced-patient-form-viewer-section-stats {
  /* DEBUG: EnhancedPatientFormViewer - Section Stats */
  margin-left: auto;
}

.auris-enhanced-patient-form-viewer-question-container {
  /* DEBUG: EnhancedPatientFormViewer - Question Container */
  display: flex;
  align-items: flex-start;
  gap: var(--auris-spacing-md);
}

.auris-enhanced-patient-form-viewer-question-indicator {
  /* DEBUG: EnhancedPatientFormViewer - Question Indicator */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.auris-enhanced-patient-form-viewer-question-indicator-answered {
  /* DEBUG: EnhancedPatientFormViewer - Question Indicator Answered */
  background-color: var(--auris-color-success);
}

.auris-enhanced-patient-form-viewer-question-indicator-unanswered {
  /* DEBUG: EnhancedPatientFormViewer - Question Indicator Unanswered */
  background-color: var(--auris-color-grey-300);
}

.auris-enhanced-patient-form-viewer-response-container {
  /* DEBUG: EnhancedPatientFormViewer - Response Container */
  padding: var(--auris-spacing-md);
  background-color: var(--auris-color-background-default);
  border-radius: var(--auris-border-radius-sm);
  border: 1px solid var(--auris-color-divider);
}

.auris-enhanced-patient-form-viewer-required-warning {
  /* DEBUG: EnhancedPatientFormViewer - Required Warning */
  margin-top: var(--auris-spacing-sm);
  display: block;
}

.auris-enhanced-therapy-groups-view-empty-cell {
  /* DEBUG: EnhancedTherapyGroupsView - Empty Cell */
  padding: var(--auris-spacing-xl) 0;
}

.auris-enhanced-therapy-groups-view-empty-icon {
  /* DEBUG: EnhancedTherapyGroupsView - Empty Icon */
  font-size: 48px;
  color: var(--auris-color-text-secondary);
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-therapy-groups-view-table-row {
  /* DEBUG: EnhancedTherapyGroupsView - Table Row */
  cursor: pointer;
}

.auris-enhanced-therapy-groups-view-table-row:hover {
  /* DEBUG: EnhancedTherapyGroupsView - Table Row Hover */
  background-color: var(--auris-color-action-hover);
}

.auris-enhanced-therapy-groups-view-stats-container {
  /* DEBUG: EnhancedTherapyGroupsView - Stats Container */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--auris-spacing-xs);
}

.auris-enhanced-therapy-groups-view-progress-container {
  /* DEBUG: EnhancedTherapyGroupsView - Progress Container */
  width: 60px;
}

.auris-enhanced-therapy-groups-view-progress {
  /* DEBUG: EnhancedTherapyGroupsView - Progress */
  height: 6px;
  border-radius: 3px;
}

.auris-global-clinic-management-table-row {
  /* DEBUG: GlobalClinicManagement - Table Row */
  cursor: pointer;
  transition: background-color 0.2s;
}

.auris-global-clinic-management-table-row:hover {
  /* DEBUG: GlobalClinicManagement - Table Row Hover */
  background-color: var(--auris-color-action-hover);
}

.auris-global-clinic-management-table-row-selected {
  /* DEBUG: GlobalClinicManagement - Table Row Selected */
  background-color: var(--auris-color-action-selected);
}

.auris-global-clinic-management-table-row-selected:hover {
  /* DEBUG: GlobalClinicManagement - Table Row Selected Hover */
  background-color: var(--auris-color-action-selected);
}

.auris-global-clinic-management-clinic-icon {
  /* DEBUG: GlobalClinicManagement - Clinic Icon */
  margin-right: var(--auris-spacing-xs);
  color: var(--auris-color-primary);
}

.auris-global-clinic-management-location-icon {
  /* DEBUG: GlobalClinicManagement - Location Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: 16px;
  color: var(--auris-color-text-secondary);
}

.auris-global-clinic-management-phone-icon {
  /* DEBUG: GlobalClinicManagement - Phone Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: 16px;
  color: var(--auris-color-text-secondary);
}

.auris-global-clinic-management-email-icon {
  /* DEBUG: GlobalClinicManagement - Email Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: 16px;
  color: var(--auris-color-text-secondary);
}

.auris-global-clinic-management-empty-container {
  /* DEBUG: GlobalClinicManagement - Empty Container */
  padding: var(--auris-spacing-xl);
  text-align: center;
  margin-top: var(--auris-spacing-md);
}

.auris-global-clinic-management-empty-icon {
  /* DEBUG: GlobalClinicManagement - Empty Icon */
  font-size: 48px;
  color: var(--auris-color-text-secondary);
  margin-bottom: var(--auris-spacing-md);
}

.auris-global-therapy-groups-view-clinic-icon {
  /* DEBUG: GlobalTherapyGroupsView - Clinic Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: 16px;
  color: var(--auris-color-text-secondary);
}

.auris-global-therapy-groups-view-people-icon {
  /* DEBUG: GlobalTherapyGroupsView - People Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: 16px;
}

.auris-global-therapy-groups-view-empty-state {
  /* DEBUG: GlobalTherapyGroupsView - Empty State */
  padding: var(--auris-spacing-xl);
  text-align: center;
}

.auris-global-therapy-groups-view-empty-icon {
  /* DEBUG: GlobalTherapyGroupsView - Empty Icon */
  font-size: 64px;
  color: var(--auris-color-text-secondary);
  margin-bottom: var(--auris-spacing-md);
}

/* ==========================================================================
   🎯 USER MANAGEMENT CONTAINER - TRANSPARENCY & THEME MATCHING
   ========================================================================== */

/* Main User Management Container - Make transparent and match theme */
.auris-dashboard-user-management-container {
  background-color: transparent !important;
  backdrop-filter: blur(120px) !important;
  -webkit-backdrop-filter: blur(120px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* AG Grid Container within User Management - Ensure transparency */
.auris-dashboard-user-management-ag-grid-container {
  background-color: transparent !important;
}

/* Search Container - Match theme transparency */
.auris-dashboard-user-management-search-container {
  background-color: transparent !important;
}

/* Role Filter Container - Match theme transparency */
.auris-dashboard-user-management-role-filter {
  background-color: transparent !important;
}

/* Remove Giant Space Container - Match theme transparency and collapse space */
.auris-dashboard-remove-giant-space {
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Hide Role Filter Container - Match theme transparency */
.auris-dashboard-hide-role-filter {
  background-color: transparent !important;
}

/* ==========================================================================
   🎯 STATUS PILLS - COLOR PRESERVATION
   ========================================================================== */

/* Status Pills - Ensure colors are preserved */
.auris-dashboard-status-pill-verification,
.auris-dashboard-status-pill-sessions,
.auris-dashboard-status-pill-forms,
.auris-dashboard-status-pill-patient,
.auris-dashboard-status-pill-treatment {
  background-color: inherit !important;
  color: inherit !important;
}

/* ==========================================================================
   🎯 INTELLIGENT CONTENT COLLAPSING
   ========================================================================== */

/* Collapsible Empty Divs - Hide when empty */
.auris-dashboard-container:empty,
.auris-dashboard-user-management-container:empty,
.auris-dashboard-user-management-grid-container:empty,
.auris-dashboard-user-management-search-container:empty,
.auris-dashboard-user-management-ag-grid-container:empty,
.auris-dashboard-remove-giant-space:empty,
.auris-dashboard-hide-role-filter:empty {
  display: none !important;
}

/* Smart Collapsing for Content Areas */
.auris-dashboard-container:has(:empty),
.auris-dashboard-user-management-container:has(:empty) {
  min-height: 0 !important;
}

/* ==========================================================================
   🎯 COLLAPSED STATE STYLING - SMOOTH TRANSITIONS
   ========================================================================== */

/* Collapsed State Styling - Smooth transitions */
.auris-dashboard-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  transition: all 300ms ease-in-out !important;
}

/* Smooth transitions for all auris dashboard elements */
.auris-dashboard-container,
.auris-dashboard-user-management-container,
.auris-dashboard-user-management-grid-container,
.auris-dashboard-user-management-search-container,
.auris-dashboard-user-management-ag-grid-container,
.auris-dashboard-remove-giant-space,
.auris-dashboard-hide-role-filter {
  transition: all 300ms ease-in-out !important;
}

/* ==========================================================================
   🎯 AG GRID THEME TRANSPARENCY - MAXIMUM OVERRIDE POWER
   ========================================================================== */

/* 🚀 NUCLEAR OPTION - Override ALL AG Grid themes with maximum specificity */
.auris-dashboard-user-management-container .ag-theme-alpine,
.auris-dashboard-user-management-container .ag-theme-material,
.auris-dashboard-user-management-container .ag-theme-quartz,
.auris-dashboard-user-management-container .ag-theme-quartz-dark,
.ag-theme-alpine,
.ag-theme-material,
.ag-theme-quartz,
.ag-theme-quartz-dark {
  /* Override theme variables */
  --ag-background-color: transparent !important;
  --ag-header-background-color: rgba(255, 255, 255, 0.05) !important;
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02) !important;
  --ag-row-background-color: transparent !important;
  --ag-row-hover-color: rgba(255, 255, 255, 0.05) !important;
  --ag-selected-row-background-color: rgba(59, 130, 246, 0.2) !important;
  --ag-border-color: rgba(255, 255, 255, 0.1) !important;
  --ag-header-foreground-color: rgba(255, 255, 255, 0.9) !important;
  --ag-foreground-color: rgba(255, 255, 255, 0.9) !important;
  
  /* Direct background overrides */
  background-color: transparent !important;
  background: transparent !important;
}

/* 🚀 TARGET AG GRID ROOT ELEMENTS WITH MAXIMUM SPECIFICITY */
.auris-dashboard-user-management-container .ag-root,
.auris-dashboard-user-management-container .ag-root-wrapper,
.auris-dashboard-user-management-container .ag-body,
.auris-dashboard-user-management-container .ag-body-viewport,
.auris-dashboard-user-management-container .ag-body-horizontal-scroll,
.auris-dashboard-user-management-container .ag-body-vertical-scroll,
.auris-dashboard-user-management-container .ag-center-cols-container,
.auris-dashboard-user-management-container .ag-center-cols-viewport,
.ag-root,
.ag-root-wrapper,
.ag-body,
.ag-body-viewport,
.ag-body-horizontal-scroll,
.ag-body-vertical-scroll,
.ag-center-cols-container,
.ag-center-cols-viewport {
  background-color: transparent !important;
  background: transparent !important;
}

/* 🚀 OVERRIDE AG GRID HEADER ELEMENTS */
.auris-dashboard-user-management-container .ag-header,
.auris-dashboard-user-management-container .ag-header-row,
.auris-dashboard-user-management-container .ag-header-cell,
.ag-header,
.ag-header-row,
.ag-header-cell {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 🚀 OVERRIDE AG GRID ROW ELEMENTS */
.auris-dashboard-user-management-container .ag-row,
.auris-dashboard-user-management-container .ag-row-even,
.auris-dashboard-user-management-container .ag-row-odd,
.ag-row,
.ag-row-even,
.ag-row-odd {
  background-color: transparent !important;
  background: transparent !important;
}

/* 🚀 OVERRIDE AG GRID CELL ELEMENTS */
.auris-dashboard-user-management-container .ag-cell,
.auris-dashboard-user-management-container .ag-cell-value,
.ag-cell,
.ag-cell-value {
  background-color: transparent !important;
  background: transparent !important;
}

/* ==========================================================================
   🎯 TAB STYLING - ACTIVE/INACTIVE STATES
   ========================================================================== */

/* Tab Container */
.auris-dashboard-tab-container {
  background-color: transparent !important;
}

/* Individual Tabs */
.auris-dashboard-tab {
  transition: all 300ms ease-in-out !important;
}

.auris-dashboard-tab-active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom: 2px solid #1976d2 !important;
}

.auris-dashboard-tab-inactive {
  background-color: transparent !important;
  border-bottom: 2px solid transparent !important;
}

/* ==========================================================================
   🎨 BEAUTIFUL NAMESPACE SYSTEM - CLEAN & PREDICTABLE
   ========================================================================== */

/* 🚀 Apply our beautiful skin classes to existing containers */
.auris-dashboard-user-management-container {
  /* Apply glassmorphism skin */
  composes: auris-skin-surface;
}

.auris-dashboard-user-management-grid-container {
  /* Apply glassmorphism skin */
  composes: auris-skin-glass;
}

.auris-dashboard-user-management-ag-grid-container {
  /* Apply glassmorphism skin */
  composes: auris-skin-glass;
}

/* 🚀 Legacy class mapping to new namespace system */
.auris-dashboard-user-management-container {
  /* Map to new namespace */
  composes: auris-user-management__container;
}

.auris-dashboard-user-management-grid-container {
  /* Map to new namespace */
  composes: auris-user-management__grid;
}

.auris-dashboard-user-management-ag-grid-container {
  /* Map to new namespace */
  composes: auris-ag-grid__container;
}

/* ==========================================================================
   🎯 BADGE/SUMMARY CARD STYLING
   ========================================================================== */

/* Badge Container */
.auris-dashboard-badge-container {
  background-color: transparent !important;
}

/* Individual Badges */
.auris-dashboard-badge {
  transition: all 300ms ease-in-out !important;
}


.auris-dashboard-badge-clinics,
.auris-dashboard-badge-therapy-groups,
.auris-dashboard-badge-users,
.auris-dashboard-badge-sessions,
.auris-dashboard-badge-support,
.auris-dashboard-badge-urgent {
  background-color: transparent !important;
}

/* 🚀 SPECIFIC FIX: Ensure urgent card keeps its red gradient */
.auris-dashboard-badge-urgent {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
  background-color: transparent !important;
}

/* ==========================================================================
   🎯 SEARCH BAR STYLING
   ========================================================================== */

/* Search Bar Container */
.auris-dashboard-search-bar {
  background-color: transparent !important;
  transition: all 300ms ease-in-out !important;
}

/* ==========================================================================
   🎯 COMPONENT-SPECIFIC STYLES WITH DEBUG HELPERS
   ========================================================================== */

/* 🚀 ENHANCED ROBUST USERS TABLE STYLES */
.auris-enhanced-users-table-container {
  /* DEBUG: EnhancedRobustUsersTable - Main container */
  width: 100%;
  padding: var(--auris-spacing-md);
  background-color: transparent;
}

.auris-enhanced-users-table-card {
  /* DEBUG: EnhancedRobustUsersTable - Table card */
  background-color: var(--auris-color-overlay-dark);
  border-radius: var(--auris-border-radius-lg);
  box-shadow: var(--auris-shadow-elevation-8-dark);
}

.auris-enhanced-users-table-header {
  /* DEBUG: EnhancedRobustUsersTable - Header section */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--auris-spacing-md);
  padding: var(--auris-spacing-md);
}

.auris-enhanced-users-table-search {
  /* DEBUG: EnhancedRobustUsersTable - Search section */
  margin-bottom: var(--auris-spacing-md);
}

.auris-enhanced-users-table-cell {
  /* DEBUG: EnhancedRobustUsersTable - Table cell */
  border-bottom: 1px solid var(--auris-color-border-light-dark);
  color: var(--auris-color-white);
}

.auris-enhanced-users-table-cell-header {
  /* DEBUG: EnhancedRobustUsersTable - Table header cell */
  color: white;
  font-weight: bold;
}

.auris-enhanced-users-table-cell-header-sortable {
  /* DEBUG: EnhancedRobustUsersTable - Sortable header cell */
  color: white;
  font-weight: bold;
}

.auris-enhanced-users-table-cell-header-sortable:hover {
  /* DEBUG: EnhancedRobustUsersTable - Sortable header hover */
  color: white;
}

.auris-enhanced-users-table-cell-header-sortable.active {
  /* DEBUG: EnhancedRobustUsersTable - Active sort header */
  color: white;
}

.auris-enhanced-users-table-row {
  /* DEBUG: EnhancedRobustUsersTable - Table row */
  transition: background-color 0.2s ease;
}

.auris-enhanced-users-table-row:hover {
  /* DEBUG: EnhancedRobustUsersTable - Table row hover */
  background-color: rgba(255, 255, 255, 0.05);
}

.auris-enhanced-users-table-loading {
  /* DEBUG: EnhancedRobustUsersTable - Loading state */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
}

.auris-enhanced-users-table-error {
  /* DEBUG: EnhancedRobustUsersTable - Error state */
  color: white;
  padding: 16px;
}

.auris-enhanced-users-table-empty {
  /* DEBUG: EnhancedRobustUsersTable - Empty state */
  color: white;
  padding: 16px;
}

/* 🚀 STATUS CHIP STYLES */
.auris-status-chip {
  /* DEBUG: StatusChip - Base chip */
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.75rem;
  min-width: 60px;
  transition: all 0.2s ease-in-out;
}

.auris-status-chip-clickable {
  /* DEBUG: StatusChip - Clickable variant */
  cursor: pointer;
}

.auris-status-chip-clickable:hover {
  /* DEBUG: StatusChip - Clickable hover */
  opacity: 0.8;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 🚀 ENHANCED USERS TABLE ADDITIONAL STYLES */
.auris-enhanced-users-table-header-content {
  /* DEBUG: EnhancedRobustUsersTable - Header content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auris-enhanced-users-table-header-actions {
  /* DEBUG: EnhancedRobustUsersTable - Header actions */
  display: flex;
  gap: 8px;
}

.auris-enhanced-users-table-search-field {
  /* DEBUG: EnhancedRobustUsersTable - Search field */
  /* OLD STYLE: EnhancedRobustUsersTable.renderSearchField */
  /* sx={{
    '& .MuiOutlinedInput-root': {
      color: 'white',
      '& fieldset': {
        borderColor: 'rgba(255, 255, 255, 0.23)',
      },
      '&:hover fieldset': {
        borderColor: 'rgba(255, 255, 255, 0.5)',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'primary.main',
      },
    },
    '& .MuiInputLabel-root': {
      color: 'rgba(255, 255, 255, 0.7)',
    },
  }} */
}

.auris-enhanced-users-table-help-icon {
  /* DEBUG: EnhancedRobustUsersTable - Help icon */
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

/* 🚀 SUPPORT TICKET GRID STYLES */
.auris-support-ticket-grid-container {
  /* DEBUG: SupportTicketGrid - Main container */
  width: 100%;
  height: 100%;
}

.auris-support-ticket-grid-header {
  /* DEBUG: SupportTicketGrid - Header section */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.auris-support-ticket-grid-environment-indicator {
  /* DEBUG: SupportTicketGrid - Environment indicator */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.auris-support-ticket-grid-env-badge {
  /* DEBUG: SupportTicketGrid - Environment badge */
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.auris-support-ticket-grid-env-badge.testflight {
  /* DEBUG: SupportTicketGrid - TestFlight badge */
  background-color: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.auris-support-ticket-grid-env-badge.production {
  /* DEBUG: SupportTicketGrid - Production badge */
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.auris-support-ticket-grid-actions {
  /* DEBUG: SupportTicketGrid - Actions section */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.auris-support-ticket-grid-refresh-btn {
  /* DEBUG: SupportTicketGrid - Refresh button */
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(25, 118, 210, 0.6) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 118, 210, 0.3);
  border-radius: 8px;
  color: white;
  padding: 8px 16px;
  transition: all 0.2s ease;
}

.auris-support-ticket-grid-refresh-btn:hover {
  /* DEBUG: SupportTicketGrid - Refresh button hover */
  background: linear-gradient(135deg, rgba(25, 118, 210, 1) 0%, rgba(25, 118, 210, 0.8) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.auris-support-ticket-grid-bulk-actions {
  /* DEBUG: SupportTicketGrid - Bulk actions */
  display: flex;
  align-items: center;
  gap: 12px;
}

.auris-support-ticket-grid-selection-count {
  /* DEBUG: SupportTicketGrid - Selection count */
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.auris-support-ticket-grid-bulk-action-btn {
  /* DEBUG: SupportTicketGrid - Bulk action button */
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.8) 0%, rgba(220, 53, 69, 0.6) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 6px;
  color: white;
  padding: 6px 12px;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.auris-support-ticket-grid-bulk-action-btn:hover {
  /* DEBUG: SupportTicketGrid - Bulk action button hover */
  background: linear-gradient(135deg, rgba(220, 53, 69, 1) 0%, rgba(220, 53, 69, 0.8) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.auris-support-ticket-grid-ag-grid {
  /* DEBUG: SupportTicketGrid - AG Grid container */
  height: 600px;
  width: 100%;
  background-color: transparent;
}

.auris-support-ticket-grid-error-message {
  /* DEBUG: SupportTicketGrid - Error message */
  color: #f56565;
  text-align: center;
  padding: 16px;
}

.auris-support-ticket-grid-retry-btn {
  /* DEBUG: SupportTicketGrid - Retry button */
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auris-support-ticket-grid-retry-btn:hover {
  /* DEBUG: SupportTicketGrid - Retry button hover */
  background-color: #1565c0;
}

/* ==========================================================================
   🎯 DEBUG HELPERS FOR LOWER ENVIRONMENTS
   ========================================================================== */

/* 🚀 DEBUG MODE - Show component identifiers in development */
@media (max-width: 9999px) {
  .auris-enhanced-users-table-container::before,
  .auris-enhanced-users-table-card::before,
  .auris-enhanced-users-table-header::before,
  .auris-enhanced-users-table-search::before,
  .auris-enhanced-users-table-cell::before,
  .auris-enhanced-users-table-cell-header::before,
  .auris-enhanced-users-table-cell-header-sortable::before,
  .auris-enhanced-users-table-row::before,
  .auris-enhanced-users-table-loading::before,
  .auris-enhanced-users-table-error::before,
  .auris-enhanced-users-table-empty::before,
  .auris-status-chip::before,
  .auris-status-chip-clickable::before,
  .auris-support-ticket-grid-container::before,
  .auris-support-ticket-grid-header::before,
  .auris-support-ticket-grid-environment-indicator::before,
  .auris-support-ticket-grid-env-badge::before,
  .auris-support-ticket-grid-actions::before,
  .auris-support-ticket-grid-refresh-btn::before,
  .auris-support-ticket-grid-bulk-actions::before,
  .auris-support-ticket-grid-selection-count::before,
  .auris-support-ticket-grid-bulk-action-btn::before,
  .auris-support-ticket-grid-ag-grid::before,
  .auris-support-ticket-grid-error-message::before,
  .auris-support-ticket-grid-retry-btn::before {
    content: attr(data-debug-component);
    position: absolute;
    top: -20px;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    font-family: monospace;
  }
}

/* 🚀 DEBUG MODE - Show function names in development */
@media (max-width: 9999px) {
  .auris-enhanced-users-table-container::after,
  .auris-enhanced-users-table-card::after,
  .auris-enhanced-users-table-header::after,
  .auris-enhanced-users-table-search::after,
  .auris-enhanced-users-table-cell::after,
  .auris-enhanced-users-table-cell-header::after,
  .auris-enhanced-users-table-cell-header-sortable::after,
  .auris-enhanced-users-table-row::after,
  .auris-enhanced-users-table-loading::after,
  .auris-enhanced-users-table-error::after,
  .auris-enhanced-users-table-empty::after,
  .auris-status-chip::after,
  .auris-status-chip-clickable::after,
  .auris-support-ticket-grid-container::after,
  .auris-support-ticket-grid-header::after,
  .auris-support-ticket-grid-environment-indicator::after,
  .auris-support-ticket-grid-env-badge::after,
  .auris-support-ticket-grid-actions::after,
  .auris-support-ticket-grid-refresh-btn::after,
  .auris-support-ticket-grid-bulk-actions::after,
  .auris-support-ticket-grid-selection-count::after,
  .auris-support-ticket-grid-bulk-action-btn::after,
  .auris-support-ticket-grid-ag-grid::after,
  .auris-support-ticket-grid-error-message::after,
  .auris-support-ticket-grid-retry-btn::after {
    content: attr(data-debug-function);
    position: absolute;
    top: -20px;
    right: 0;
    background: rgba(0, 255, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    font-family: monospace;
  }
}

/* ==========================================================================
   🎯 UTILITY CLASSES - THE JOY OF REUSABLE STYLES! 🎉
   ========================================================================== */

/* 🎨 LAYOUT UTILITY CLASSES - Because every component deserves beautiful layout! */
.auris-flex { display: flex; }
.auris-block { display: block; }
.auris-inline-block { display: inline-block; }
.auris-grid { display: grid; }
.auris-hidden { display: none; }

/* 🎨 FLEXBOX UTILITY CLASSES - Flex your layout muscles! */
.auris-align-center { align-items: center; }
.auris-align-start { align-items: flex-start; }
.auris-align-end { align-items: flex-end; }
.auris-justify-center { justify-content: center; }
.auris-justify-between { justify-content: space-between; }
.auris-justify-around { justify-content: space-around; }
.auris-flex-column { flex-direction: column; }
.auris-flex-row { flex-direction: row; }
.auris-flex-wrap { flex-wrap: wrap; }
.auris-flex-nowrap { flex-wrap: nowrap; }

/* 🎨 SPACING UTILITY CLASSES - Breathe life into your layouts! */
.auris-gap-xs { gap: var(--auris-spacing-xs); }
.auris-gap-sm { gap: var(--auris-spacing-sm); }
.auris-gap-md { gap: var(--auris-spacing-md); }
.auris-gap-lg { gap: var(--auris-spacing-lg); }
.auris-gap-xl { gap: var(--auris-spacing-xl); }

.auris-p-xs { padding: var(--auris-spacing-xs); }
.auris-p-sm { padding: var(--auris-spacing-sm); }
.auris-p-md { padding: var(--auris-spacing-md); }
.auris-p-lg { padding: var(--auris-spacing-lg); }
.auris-p-xl { padding: var(--auris-spacing-xl); }

.auris-m-xs { margin: var(--auris-spacing-xs); }
.auris-m-sm { margin: var(--auris-spacing-sm); }
.auris-m-md { margin: var(--auris-spacing-md); }
.auris-m-lg { margin: var(--auris-spacing-lg); }
.auris-m-xl { margin: var(--auris-spacing-xl); }

/* 🎨 TYPOGRAPHY UTILITY CLASSES - Words that dance with style! */
.auris-text-xs { font-size: var(--auris-font-size-xs); }
.auris-text-sm { font-size: var(--auris-font-size-sm); }
.auris-text-base { font-size: var(--auris-font-size-body); }
.auris-text-lg { font-size: var(--auris-font-size-lg); }
.auris-text-xl { font-size: var(--auris-font-size-xl); }

.auris-font-normal { font-weight: 400; }
.auris-font-medium { font-weight: 500; }
.auris-font-semibold { font-weight: 600; }
.auris-font-bold { font-weight: 700; }

.auris-text-center { text-align: center; }
.auris-text-left { text-align: left; }
.auris-text-right { text-align: right; }

/* 🎨 COLOR UTILITY CLASSES - Paint your world with joy! */
.auris-text-primary { color: var(--auris-color-primary); }
.auris-text-secondary { color: var(--auris-color-secondary); }
.auris-text-white { color: var(--auris-color-white); }
.auris-text-black { color: var(--auris-color-black); }
.auris-text-success { color: var(--auris-color-success); }
.auris-text-warning { color: var(--auris-color-warning); }
.auris-text-error { color: var(--auris-color-error); }

.auris-bg-primary { background-color: var(--auris-color-primary); }
.auris-bg-secondary { background-color: var(--auris-color-secondary); }
.auris-bg-white { background-color: var(--auris-color-white); }
.auris-bg-black { background-color: var(--auris-color-black); }
.auris-bg-success { background-color: var(--auris-color-success); }
.auris-bg-warning { background-color: var(--auris-color-warning); }
.auris-bg-error { background-color: var(--auris-color-error); }
.auris-bg-transparent { background-color: transparent; }

/* 🎨 BORDER UTILITY CLASSES - Frame your beauty! */
.auris-rounded-sm { border-radius: var(--auris-border-radius-sm); }
.auris-rounded-md { border-radius: var(--auris-border-radius-md); }
.auris-rounded-lg { border-radius: var(--auris-border-radius-lg); }
.auris-rounded-xl { border-radius: var(--auris-border-radius-xl); }
.auris-rounded-full { border-radius: 50%; }

.auris-border { border: 1px solid var(--auris-color-border-light-dark); }
.auris-border-t { border-top: 1px solid var(--auris-color-border-light-dark); }
.auris-border-b { border-bottom: 1px solid var(--auris-color-border-light-dark); }
.auris-border-l { border-left: 1px solid var(--auris-color-border-light-dark); }
.auris-border-r { border-right: 1px solid var(--auris-color-border-light-dark); }

/* 🎨 SHADOW UTILITY CLASSES - Add depth and dimension! */
.auris-shadow-sm { box-shadow: var(--auris-shadow-elevation-1-dark); }
.auris-shadow-md { box-shadow: var(--auris-shadow-elevation-2-dark); }
.auris-shadow-lg { box-shadow: var(--auris-shadow-elevation-4-dark); }
.auris-shadow-xl { box-shadow: var(--auris-shadow-elevation-8-dark); }
.auris-shadow-none { box-shadow: none; }

/* 🎨 WIDTH/HEIGHT UTILITY CLASSES - Size matters, and so does proportion! */
.auris-w-full { width: 100%; }
.auris-w-1/2 { width: 50%; }
.auris-w-1/3 { width: 33.333333%; }
.auris-w-2/3 { width: 66.666667%; }
.auris-w-1/4 { width: 25%; }
.auris-w-3/4 { width: 75%; }

.auris-h-full { height: 100%; }
.auris-h-screen { height: 100vh; }
.auris-min-h-screen { min-height: 100vh; }

/* 🎨 POSITION UTILITY CLASSES - Position with precision! */
.auris-relative { position: relative; }
.auris-absolute { position: absolute; }
.auris-fixed { position: fixed; }
.auris-sticky { position: sticky; }

/* 🎨 OVERFLOW UTILITY CLASSES - Control the flow! */
.auris-overflow-hidden { overflow: hidden; }
.auris-overflow-auto { overflow: auto; }
.auris-overflow-scroll { overflow: scroll; }
.auris-overflow-x-auto { overflow-x: auto; }
.auris-overflow-y-auto { overflow-y: auto; }

/* 🎨 CURSOR UTILITY CLASSES - Point the way! */
.auris-cursor-pointer { cursor: pointer; }
.auris-cursor-not-allowed { cursor: not-allowed; }
.auris-cursor-default { cursor: default; }

/* ==========================================================================
   🎯 GLOBAL ROUTER CONTEXT CHECKER STYLES
   ========================================================================== */

.auris-router-context-checker-error-container {
  /* DEBUG: RouterContextChecker - Error Container */
  padding: var(--auris-spacing-lg);
  margin: var(--auris-spacing-lg);
  border: 2px solid var(--auris-color-error);
  background-color: var(--auris-color-error-light);
  color: var(--auris-color-error);
  border-radius: var(--auris-border-radius-md);
}

.auris-router-context-checker-error-message {
  /* DEBUG: RouterContextChecker - Error Message */
  padding: var(--auris-spacing-sm);
  margin: var(--auris-spacing-xs);
  background-color: var(--auris-color-error-light);
  color: var(--auris-color-error);
  border-radius: var(--auris-border-radius-sm);
}

/* ==========================================================================
   🎯 GLOBAL THERAPY GROUPS VIEW STYLES
   ========================================================================== */

.auris-global-therapy-groups-view-icon {
  /* DEBUG: GlobalTherapyGroupsView - Icon */
  margin-right: var(--auris-spacing-xs);
  font-size: var(--auris-font-size-body);
  color: var(--auris-color-text-secondary);
}

.auris-global-therapy-groups-view-empty-container {
  /* DEBUG: GlobalTherapyGroupsView - Empty Container */
  padding: var(--auris-spacing-xl);
  text-align: center;
}

.auris-global-therapy-groups-view-empty-icon {
  /* DEBUG: GlobalTherapyGroupsView - Empty Icon */
  font-size: 64px;
  color: var(--auris-color-text-secondary);
  margin-bottom: var(--auris-spacing-sm);
}

/* ==========================================================================
   🎯 RESPONSIVE DESIGN & UTILITIES
   ========================================================================== */

/* Responsive breakpoints */
@media (max-width: 768px) {
  .auris-dashboard-user-management-container {
    border-radius: 10px !important;
    backdrop-filter: blur(80px) !important;
    -webkit-backdrop-filter: blur(80px) !important;
  }
}

@media (max-width: 480px) {
  .auris-dashboard-user-management-container {
    border-radius: 8px !important;
    backdrop-filter: blur(60px) !important;
    -webkit-backdrop-filter: blur(60px) !important;
  }
}

/* ==========================================================================
   🎯 PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Hardware acceleration for smooth animations */
.auris-dashboard-container,
.auris-dashboard-user-management-container,
.auris-dashboard-user-management-grid-container {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
}

/* ==========================================================================
   🎯 ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Focus states for keyboard navigation */
.auris-dashboard-tab:focus,
.auris-dashboard-badge:focus {
  outline: 2px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .auris-dashboard-user-management-container {
    border: 2px solid #ffffff !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .auris-dashboard-container,
  .auris-dashboard-user-management-container,
  .auris-dashboard-user-management-grid-container,
  .auris-dashboard-user-management-search-container,
  .auris-dashboard-user-management-ag-grid-container,
  .auris-dashboard-remove-giant-space,
  .auris-dashboard-hide-role-filter,
  .auris-dashboard-tab,
  .auris-dashboard-badge {
    transition: none !important;
  }
}/**
 * 🎯 STATUS PILLS - UNIFIED STYLE SYSTEM INTEGRATION
 * 
 * This file applies the unified style system to existing status pill classes
 * for beautiful, consistent status indicators across the application.
 */

/* ==========================================================================
   🎯 STATUS PILL BASE STYLES
   ========================================================================== */

.auris-dashboard-status-pill-forms,
.auris-dashboard-status-pill-sessions,
.auris-dashboard-status-pill-patient,
.auris-dashboard-status-pill-treatment,
.auris-dashboard-status-pill-verification,
.auris-dashboard-status-pill-roles {
  /* Base pill styling - 3D Pharmaceutical Pill Effect */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 25px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all var(--auris-core-transition-smooth) !important;
  
  /* 3D Pill Effect - Thin Raised Border */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  
  /* Standardized width to match verification pills */
  min-width: 120px !important;
  max-width: 140px !important;
  width: fit-content !important;
  height: 32px !important;
  text-align: center !important;
  position: relative !important;
  
  /* 3D Depth and Realism */
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
  
  /* Subtle inner glow for pill realism */
  background-clip: padding-box !important;
  
  /* Ensure proper spacing */
  margin: 2px 4px !important;
  
  /* Hover effects */
  cursor: default !important;
}

/* Enhanced pill content centering */
.auris-dashboard-status-pill-forms,
.auris-dashboard-status-pill-sessions,
.auris-dashboard-status-pill-patient,
.auris-dashboard-status-pill-treatment,
.auris-dashboard-status-pill-verification,
.auris-dashboard-status-pill-roles {
  /* Ensure perfect centering of all content */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-direction: row !important;
  gap: 6px !important;
}

/* Icon centering for pills */
.auris-dashboard-status-pill-forms svg,
.auris-dashboard-status-pill-sessions svg,
.auris-dashboard-status-pill-patient svg,
.auris-dashboard-status-pill-treatment svg,
.auris-dashboard-status-pill-verification svg,
.auris-dashboard-status-pill-roles svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Text content centering */
.auris-dashboard-status-pill-forms span,
.auris-dashboard-status-pill-sessions span,
.auris-dashboard-status-pill-patient span,
.auris-dashboard-status-pill-treatment span,
.auris-dashboard-status-pill-verification span,
.auris-dashboard-status-pill-roles span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Remove old margin-based spacing in favor of gap */
.auris-dashboard-status-pill-forms > *:not(:last-child),
.auris-dashboard-status-pill-sessions > *:not(:last-child),
.auris-dashboard-status-pill-patient > *:not(:last-child),
.auris-dashboard-status-pill-treatment > *:not(:last-child),
.auris-dashboard-status-pill-verification > *:not(:last-child),
.auris-dashboard-status-pill-roles > *:not(:last-child) {
  margin-right: 0 !important; /* Use gap instead */
}

/* Enhanced hover effects for clickable pills - 3D Lift Effect */
.auris-dashboard-status-pill-forms:hover,
.auris-dashboard-status-pill-sessions:hover,
.auris-dashboard-status-pill-patient:hover,
.auris-dashboard-status-pill-treatment:hover,
.auris-dashboard-status-pill-verification:hover,
.auris-dashboard-status-pill-roles:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   🎯 FORMS STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-forms {
  /* Default forms styling - will be overridden by specific status classes */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

/* Forms status variants - Realistic 3D Pill Colors */
.auris-dashboard-status-pill-forms.pending,
.auris-dashboard-status-pill-forms-pending,
.auris-dashboard-status-pill-forms[data-status="pending"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #451a03 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

.auris-dashboard-status-pill-forms.completed,
.auris-dashboard-status-pill-forms-completed,
.auris-dashboard-status-pill-forms.complete,
.auris-dashboard-status-pill-forms-complete,
.auris-dashboard-status-pill-forms[data-status="completed"],
.auris-dashboard-status-pill-forms[data-status="complete"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ecfdf5 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-forms.in-progress,
.auris-dashboard-status-pill-forms-in-progress,
.auris-dashboard-status-pill-forms[data-status="in-progress"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #eff6ff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(29, 78, 216, 0.3) !important;
}

.auris-dashboard-status-pill-forms.required,
.auris-dashboard-status-pill-forms-required,
.auris-dashboard-status-pill-forms.late,
.auris-dashboard-status-pill-forms-late,
.auris-dashboard-status-pill-forms[data-status="required"],
.auris-dashboard-status-pill-forms[data-status="late"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  color: #fef2f2 !important;
  border-color: #b91c1c !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(185, 28, 28, 0.3) !important;
}

.auris-dashboard-status-pill-forms.none,
.auris-dashboard-status-pill-forms-none,
.auris-dashboard-status-pill-forms[data-status="none"] {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%) !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(75, 85, 99, 0.3) !important;
}

/* ==========================================================================
   🎯 SESSIONS STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-sessions {
  /* Default sessions styling */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

.auris-dashboard-status-pill-sessions.active,
.auris-dashboard-status-pill-sessions-active,
.auris-dashboard-status-pill-sessions[data-status="active"] {
  background: linear-gradient(135deg, var(--auris-color-success-light) 0%, #d1fae5 100%) !important;
  color: var(--auris-color-success-dark) !important;
  border-color: var(--auris-color-success) !important;
  box-shadow: 0 2px 8px rgba(1, 181, 116, 0.3) !important;
}

.auris-dashboard-status-pill-sessions.scheduled,
.auris-dashboard-status-pill-sessions-scheduled,
.auris-dashboard-status-pill-sessions[data-status="scheduled"] {
  background: linear-gradient(135deg, var(--auris-color-info-light) 0%, #dbeafe 100%) !important;
  color: var(--auris-color-info-dark) !important;
  border-color: var(--auris-color-info) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.auris-dashboard-status-pill-sessions.completed,
.auris-dashboard-status-pill-sessions-completed,
.auris-dashboard-status-pill-sessions[data-status="completed"] {
  background: linear-gradient(135deg, var(--auris-color-neutral-light) 0%, #f3f4f6 100%) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3) !important;
}

/* ==========================================================================
   🎯 PATIENT STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-patient {
  /* Default patient styling */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

.auris-dashboard-status-pill-patient.active,
.auris-dashboard-status-pill-patient-active,
.auris-dashboard-status-pill-patient[data-status="active"] {
  background: linear-gradient(135deg, var(--auris-color-success-light) 0%, #d1fae5 100%) !important;
  color: var(--auris-color-success-dark) !important;
  border-color: var(--auris-color-success) !important;
  box-shadow: 0 2px 8px rgba(1, 181, 116, 0.3) !important;
}

.auris-dashboard-status-pill-patient.inactive,
.auris-dashboard-status-pill-patient-inactive,
.auris-dashboard-status-pill-patient[data-status="inactive"] {
  background: linear-gradient(135deg, var(--auris-color-neutral-light) 0%, #f3f4f6 100%) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3) !important;
}

.auris-dashboard-status-pill-patient.pending,
.auris-dashboard-status-pill-patient-pending,
.auris-dashboard-status-pill-patient[data-status="pending"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #451a03 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

/* Additional patient status variants from StatusChip */
.auris-dashboard-status-pill-patient.candidate,
.auris-dashboard-status-pill-patient-candidate,
.auris-dashboard-status-pill-patient[data-status="candidate"] {
  background: linear-gradient(135deg, var(--auris-color-info-light) 0%, #dbeafe 100%) !important;
  color: var(--auris-color-info-dark) !important;
  border-color: var(--auris-color-info) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.auris-dashboard-status-pill-patient.potential,
.auris-dashboard-status-pill-patient-potential,
.auris-dashboard-status-pill-patient[data-status="potential"] {
  background: linear-gradient(135deg, #e9d5ff 0%, #f3e8ff 100%) !important;
  color: #6b21a8 !important;
  border-color: #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

.auris-dashboard-status-pill-patient.ineligible,
.auris-dashboard-status-pill-patient-ineligible,
.auris-dashboard-status-pill-patient[data-status="ineligible"] {
  background: linear-gradient(135deg, var(--auris-color-error-light) 0%, #fee2e2 100%) !important;
  color: var(--auris-color-error-dark) !important;
  border-color: var(--auris-color-error) !important;
  box-shadow: 0 2px 8px rgba(250, 61, 86, 0.3) !important;
}

.auris-dashboard-status-pill-patient.patient,
.auris-dashboard-status-pill-patient-patient,
.auris-dashboard-status-pill-patient[data-status="patient"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ecfdf5 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-patient.forms_due,
.auris-dashboard-status-pill-patient-forms_due,
.auris-dashboard-status-pill-patient[data-status="forms_due"] {
  background: linear-gradient(135deg, var(--auris-color-warning-light) 0%, #fef3c7 100%) !important;
  color: var(--auris-color-warning-dark) !important;
  border-color: var(--auris-color-warning) !important;
  box-shadow: 0 2px 8px rgba(255, 181, 71, 0.3) !important;
}

.auris-dashboard-status-pill-patient.unassigned,
.auris-dashboard-status-pill-patient-unassigned,
.auris-dashboard-status-pill-patient[data-status="unassigned"] {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%) !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(75, 85, 99, 0.3) !important;
}

/* ==========================================================================
   🎯 TREATMENT STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-treatment {
  /* Default treatment styling */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

.auris-dashboard-status-pill-treatment.active,
.auris-dashboard-status-pill-treatment-active,
.auris-dashboard-status-pill-treatment[data-status="active"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ecfdf5 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.paused,
.auris-dashboard-status-pill-treatment-paused,
.auris-dashboard-status-pill-treatment[data-status="paused"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #451a03 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.completed,
.auris-dashboard-status-pill-treatment-completed,
.auris-dashboard-status-pill-treatment[data-status="completed"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #eff6ff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(29, 78, 216, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.no-plan,
.auris-dashboard-status-pill-treatment-no-plan,
.auris-dashboard-status-pill-treatment[data-status="no-plan"] {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%) !important;
  color: #f9fafb !important;
  border-color: #4b5563 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(75, 85, 99, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.current,
.auris-dashboard-status-pill-treatment-current,
.auris-dashboard-status-pill-treatment[data-status="current"] {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
  color: #f0fdf4 !important;
  border-color: #15803d !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(21, 128, 61, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.active,
.auris-dashboard-status-pill-treatment-active,
.auris-dashboard-status-pill-treatment[data-status="active"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #f0fdf4 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.paused,
.auris-dashboard-status-pill-treatment-paused,
.auris-dashboard-status-pill-treatment[data-status="paused"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #fef3c7 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.completed,
.auris-dashboard-status-pill-treatment-completed,
.auris-dashboard-status-pill-treatment[data-status="completed"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #dbeafe !important;
  border-color: #1d4ed8 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(29, 78, 216, 0.3) !important;
}

.auris-dashboard-status-pill-treatment.error,
.auris-dashboard-status-pill-treatment-error,
.auris-dashboard-status-pill-treatment[data-status="error"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  color: #fef2f2 !important;
  border-color: #b91c1c !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(185, 28, 28, 0.3) !important;
}

/* ==========================================================================
   🎯 VERIFICATION STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-verification {
  /* Default verification styling */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

/* Verification status variants - Realistic 3D Pill Colors */
.auris-dashboard-status-pill-verification.active,
.auris-dashboard-status-pill-verification-active,
.auris-dashboard-status-pill-verification[data-status="active"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ecfdf5 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-verification.email_verified,
.auris-dashboard-status-pill-verification-email_verified,
.auris-dashboard-status-pill-verification[data-status="email_verified"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #eff6ff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(29, 78, 216, 0.3) !important;
}

.auris-dashboard-status-pill-verification.human_verified,
.auris-dashboard-status-pill-verification-human_verified,
.auris-dashboard-status-pill-verification[data-status="human_verified"] {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%) !important;
  color: #faf5ff !important;
  border-color: #6d28d9 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(109, 40, 217, 0.3) !important;
}

.auris-dashboard-status-pill-verification.unverified,
.auris-dashboard-status-pill-verification-unverified,
.auris-dashboard-status-pill-verification[data-status="unverified"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #451a03 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

.auris-dashboard-status-pill-verification.verified,
.auris-dashboard-status-pill-verification-verified,
.auris-dashboard-status-pill-verification[data-status="verified"] {
  background: linear-gradient(135deg, var(--auris-color-success-light) 0%, #d1fae5 100%) !important;
  color: var(--auris-color-success-dark) !important;
  border-color: var(--auris-color-success) !important;
  box-shadow: 0 2px 8px rgba(1, 181, 116, 0.3) !important;
}

.auris-dashboard-status-pill-verification.pending,
.auris-dashboard-status-pill-verification-pending,
.auris-dashboard-status-pill-verification[data-status="pending"] {
  background: linear-gradient(135deg, var(--auris-color-warning-light) 0%, #fef3c7 100%) !important;
  color: var(--auris-color-warning-dark) !important;
  border-color: var(--auris-color-warning) !important;
  box-shadow: 0 2px 8px rgba(255, 181, 71, 0.3) !important;
}

.auris-dashboard-status-pill-verification.failed,
.auris-dashboard-status-pill-verification-failed,
.auris-dashboard-status-pill-verification[data-status="failed"] {
  background: linear-gradient(135deg, var(--auris-color-error-light) 0%, #fee2e2 100%) !important;
  color: var(--auris-color-error-dark) !important;
  border-color: var(--auris-color-error) !important;
  box-shadow: 0 2px 8px rgba(250, 61, 86, 0.3) !important;
}

/* ==========================================================================
   🎯 ROLES STATUS PILLS
   ========================================================================== */

.auris-dashboard-status-pill-roles {
  /* Default roles styling */
  background-color: var(--auris-color-neutral-light) !important;
  color: var(--auris-color-neutral-dark) !important;
  border-color: var(--auris-color-neutral) !important;
}

/* Roles status variants from StatusChip */
.auris-dashboard-status-pill-roles.clinician,
.auris-dashboard-status-pill-roles-clinician,
.auris-dashboard-status-pill-roles[data-status="clinician"] {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
  color: #eff6ff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(29, 78, 216, 0.3) !important;
}

.auris-dashboard-status-pill-roles.patient,
.auris-dashboard-status-pill-roles-patient,
.auris-dashboard-status-pill-roles[data-status="patient"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ecfdf5 !important;
  border-color: #047857 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(4, 120, 87, 0.3) !important;
}

.auris-dashboard-status-pill-roles.admin,
.auris-dashboard-status-pill-roles-admin,
.auris-dashboard-status-pill-roles.administrator,
.auris-dashboard-status-pill-roles-administrator,
.auris-dashboard-status-pill-roles[data-status="admin"],
.auris-dashboard-status-pill-roles[data-status="administrator"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  color: #fef2f2 !important;
  border-color: #b91c1c !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(185, 28, 28, 0.3) !important;
}

.auris-dashboard-status-pill-roles.clinic,
.auris-dashboard-status-pill-roles-clinic,
.auris-dashboard-status-pill-roles.clinic_admin,
.auris-dashboard-status-pill-roles-clinic_admin,
.auris-dashboard-status-pill-roles[data-status="clinic"],
.auris-dashboard-status-pill-roles[data-status="clinic_admin"] {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #451a03 !important;
  border-color: #d97706 !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(217, 119, 6, 0.3) !important;
}

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

@media (max-width: 768px) {
  .auris-dashboard-status-pill-forms,
  .auris-dashboard-status-pill-sessions,
  .auris-dashboard-status-pill-patient,
  .auris-dashboard-status-pill-treatment,
  .auris-dashboard-status-pill-verification,
  .auris-dashboard-status-pill-roles {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    min-width: 70px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .auris-dashboard-status-pill-forms,
  .auris-dashboard-status-pill-sessions,
  .auris-dashboard-status-pill-patient,
  .auris-dashboard-status-pill-treatment,
  .auris-dashboard-status-pill-verification,
  .auris-dashboard-status-pill-roles {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
    min-width: 60px !important;
    letter-spacing: 0.3px !important;
  }
}

/* ==========================================================================
   🎯 EXCLUSION INDICATORS - MEDICAL FORMS ENHANCEMENT
   ========================================================================== */

/* Base exclusion indicator styles - 3px red outline with halo effect */
.auris-dashboard-status-pill-forms.exclusion-indicator,
.auris-dashboard-status-pill-sessions.exclusion-indicator,
.auris-dashboard-status-pill-patient.exclusion-indicator,
.auris-dashboard-status-pill-treatment.exclusion-indicator,
.auris-dashboard-status-pill-verification.exclusion-indicator,
.auris-dashboard-status-pill-roles.exclusion-indicator {
  /* 3px red outline as specified in requirements */
  outline: 3px solid #dc3545 !important;
  outline-offset: 2px !important;
  
  /* Enhanced halo effect combining with existing 3D shadows */
  box-shadow: 
    /* Preserve existing 3D pill shadows */
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    /* Add exclusion halo layers */
    0 0 0 1px rgba(220, 53, 69, 0.3),
    0 0 8px rgba(220, 53, 69, 0.4),
    0 0 16px rgba(220, 53, 69, 0.2) !important;
  
  /* Subtle animation to draw attention */
  animation: exclusion-pulse 2s ease-in-out infinite !important;
}

/* Data attribute based exclusion indicators for dynamic application */
.auris-dashboard-status-pill-forms[data-has-exclusions="true"],
.auris-dashboard-status-pill-sessions[data-has-exclusions="true"],
.auris-dashboard-status-pill-patient[data-has-exclusions="true"],
.auris-dashboard-status-pill-treatment[data-has-exclusions="true"],
.auris-dashboard-status-pill-verification[data-has-exclusions="true"],
.auris-dashboard-status-pill-roles[data-has-exclusions="true"] {
  outline: 3px solid #dc3545 !important;
  outline-offset: 2px !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(220, 53, 69, 0.3),
    0 0 8px rgba(220, 53, 69, 0.4),
    0 0 16px rgba(220, 53, 69, 0.2) !important;
  animation: exclusion-pulse 2s ease-in-out infinite !important;
}

/* Exclusion indicator hover states - enhanced visibility */
.auris-dashboard-status-pill-forms.exclusion-indicator:hover,
.auris-dashboard-status-pill-sessions.exclusion-indicator:hover,
.auris-dashboard-status-pill-patient.exclusion-indicator:hover,
.auris-dashboard-status-pill-treatment.exclusion-indicator:hover,
.auris-dashboard-status-pill-verification.exclusion-indicator:hover,
.auris-dashboard-status-pill-roles.exclusion-indicator:hover,
.auris-dashboard-status-pill-forms[data-has-exclusions="true"]:hover,
.auris-dashboard-status-pill-sessions[data-has-exclusions="true"]:hover,
.auris-dashboard-status-pill-patient[data-has-exclusions="true"]:hover,
.auris-dashboard-status-pill-treatment[data-has-exclusions="true"]:hover,
.auris-dashboard-status-pill-verification[data-has-exclusions="true"]:hover,
.auris-dashboard-status-pill-roles[data-has-exclusions="true"]:hover {
  outline-color: #b91c1c !important;
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(185, 28, 28, 0.4),
    0 0 12px rgba(185, 28, 28, 0.6),
    0 0 24px rgba(185, 28, 28, 0.3) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Focus states for accessibility - blue outline takes precedence */
.auris-dashboard-status-pill-forms.exclusion-indicator:focus,
.auris-dashboard-status-pill-sessions.exclusion-indicator:focus,
.auris-dashboard-status-pill-patient.exclusion-indicator:focus,
.auris-dashboard-status-pill-treatment.exclusion-indicator:focus,
.auris-dashboard-status-pill-verification.exclusion-indicator:focus,
.auris-dashboard-status-pill-roles.exclusion-indicator:focus,
.auris-dashboard-status-pill-forms[data-has-exclusions="true"]:focus,
.auris-dashboard-status-pill-sessions[data-has-exclusions="true"]:focus,
.auris-dashboard-status-pill-patient[data-has-exclusions="true"]:focus,
.auris-dashboard-status-pill-treatment[data-has-exclusions="true"]:focus,
.auris-dashboard-status-pill-verification[data-has-exclusions="true"]:focus,
.auris-dashboard-status-pill-roles[data-has-exclusions="true"]:focus {
  outline: 3px solid #0066cc !important;
  outline-offset: 2px !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(0, 102, 204, 0.3),
    0 0 8px rgba(0, 102, 204, 0.4) !important;
}

/* Exclusion pulse animation */
@keyframes exclusion-pulse {
  0%, 100% {
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.2),
      0 2px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(220, 53, 69, 0.3),
      0 0 8px rgba(220, 53, 69, 0.4),
      0 0 16px rgba(220, 53, 69, 0.2);
  }
  50% {
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.2),
      0 2px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(220, 53, 69, 0.4),
      0 0 12px rgba(220, 53, 69, 0.6),
      0 0 24px rgba(220, 53, 69, 0.3);
  }
}

/* Responsive exclusion indicators */
@media (max-width: 768px) {
  .auris-dashboard-status-pill-forms.exclusion-indicator,
  .auris-dashboard-status-pill-sessions.exclusion-indicator,
  .auris-dashboard-status-pill-patient.exclusion-indicator,
  .auris-dashboard-status-pill-treatment.exclusion-indicator,
  .auris-dashboard-status-pill-verification.exclusion-indicator,
  .auris-dashboard-status-pill-roles.exclusion-indicator,
  .auris-dashboard-status-pill-forms[data-has-exclusions="true"],
  .auris-dashboard-status-pill-sessions[data-has-exclusions="true"],
  .auris-dashboard-status-pill-patient[data-has-exclusions="true"],
  .auris-dashboard-status-pill-treatment[data-has-exclusions="true"],
  .auris-dashboard-status-pill-verification[data-has-exclusions="true"],
  .auris-dashboard-status-pill-roles[data-has-exclusions="true"] {
    outline-width: 2px !important;
    outline-offset: 1px !important;
  }
}

@media (max-width: 480px) {
  .auris-dashboard-status-pill-forms.exclusion-indicator,
  .auris-dashboard-status-pill-sessions.exclusion-indicator,
  .auris-dashboard-status-pill-patient.exclusion-indicator,
  .auris-dashboard-status-pill-treatment.exclusion-indicator,
  .auris-dashboard-status-pill-verification.exclusion-indicator,
  .auris-dashboard-status-pill-roles.exclusion-indicator,
  .auris-dashboard-status-pill-forms[data-has-exclusions="true"],
  .auris-dashboard-status-pill-sessions[data-has-exclusions="true"],
  .auris-dashboard-status-pill-patient[data-has-exclusions="true"],
  .auris-dashboard-status-pill-treatment[data-has-exclusions="true"],
  .auris-dashboard-status-pill-verification[data-has-exclusions="true"],
  .auris-dashboard-status-pill-roles[data-has-exclusions="true"] {
    outline-width: 1px !important;
    outline-offset: 1px !important;
    box-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 0 4px rgba(220, 53, 69, 0.4) !important;
  }
}

/* ==========================================================================
   🎯 ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

.auris-dashboard-status-pill-forms:focus,
.auris-dashboard-status-pill-sessions:focus,
.auris-dashboard-status-pill-patient:focus,
.auris-dashboard-status-pill-treatment:focus,
.auris-dashboard-status-pill-verification:focus,
.auris-dashboard-status-pill-roles:focus {
  outline: 2px solid var(--auris-color-primary) !important;
  outline-offset: 2px !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 117, 255, 0.3) !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .auris-dashboard-status-pill-forms,
  .auris-dashboard-status-pill-sessions,
  .auris-dashboard-status-pill-patient,
  .auris-dashboard-status-pill-treatment,
  .auris-dashboard-status-pill-verification,
  .auris-dashboard-status-pill-roles {
    border-width: 2px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px currentColor !important;
  }
  
  /* Enhanced exclusion indicators for high contrast */
  .auris-dashboard-status-pill-forms.exclusion-indicator,
  .auris-dashboard-status-pill-sessions.exclusion-indicator,
  .auris-dashboard-status-pill-patient.exclusion-indicator,
  .auris-dashboard-status-pill-treatment.exclusion-indicator,
  .auris-dashboard-status-pill-verification.exclusion-indicator,
  .auris-dashboard-status-pill-roles.exclusion-indicator,
  .auris-dashboard-status-pill-forms[data-has-exclusions="true"],
  .auris-dashboard-status-pill-sessions[data-has-exclusions="true"],
  .auris-dashboard-status-pill-patient[data-has-exclusions="true"],
  .auris-dashboard-status-pill-treatment[data-has-exclusions="true"],
  .auris-dashboard-status-pill-verification[data-has-exclusions="true"],
  .auris-dashboard-status-pill-roles[data-has-exclusions="true"] {
    outline-width: 4px !important;
    outline-color: #ff0000 !important;
    box-shadow: 0 0 0 4px #ff0000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .auris-dashboard-status-pill-forms,
  .auris-dashboard-status-pill-sessions,
  .auris-dashboard-status-pill-patient,
  .auris-dashboard-status-pill-treatment,
  .auris-dashboard-status-pill-verification,
  .auris-dashboard-status-pill-roles {
    transition: none !important;
  }
  
  .auris-dashboard-status-pill-forms:hover,
  .auris-dashboard-status-pill-sessions:hover,
  .auris-dashboard-status-pill-patient:hover,
  .auris-dashboard-status-pill-treatment:hover,
  .auris-dashboard-status-pill-verification:hover,
  .auris-dashboard-status-pill-roles:hover {
    transform: none !important;
  }
  
  /* Disable exclusion pulse animation for reduced motion */
  .auris-dashboard-status-pill-forms.exclusion-indicator,
  .auris-dashboard-status-pill-sessions.exclusion-indicator,
  .auris-dashboard-status-pill-patient.exclusion-indicator,
  .auris-dashboard-status-pill-treatment.exclusion-indicator,
  .auris-dashboard-status-pill-verification.exclusion-indicator,
  .auris-dashboard-status-pill-roles.exclusion-indicator,
  .auris-dashboard-status-pill-forms[data-has-exclusions="true"],
  .auris-dashboard-status-pill-sessions[data-has-exclusions="true"],
  .auris-dashboard-status-pill-patient[data-has-exclusions="true"],
  .auris-dashboard-status-pill-treatment[data-has-exclusions="true"],
  .auris-dashboard-status-pill-verification[data-has-exclusions="true"],
  .auris-dashboard-status-pill-roles[data-has-exclusions="true"] {
    animation: none !important;
  }
}