/* components/autocomplete/autocomplete.css */

/**
 * Autocomplete Component
 * Advanced autocomplete with async loading, templates, and virtual scrolling
 * Full WCAG 2.2 AAA compliance
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Autocomplete dimensions */
  --autocomplete-height-xs: 1.75rem;
  --autocomplete-height-s: 2rem;
  --autocomplete-height-m: 2.5rem;
  --autocomplete-height-l: 3rem;
  --autocomplete-height-xl: 3.5rem;
  
  --autocomplete-padding-x-xs: 0.5rem;
  --autocomplete-padding-x-s: 0.625rem;
  --autocomplete-padding-x-m: 0.75rem;
  --autocomplete-padding-x-l: 1rem;
  --autocomplete-padding-x-xl: 1.25rem;
  
  --autocomplete-font-size-xs: 0.75rem;
  --autocomplete-font-size-s: 0.875rem;
  --autocomplete-font-size-m: 1rem;
  --autocomplete-font-size-l: 1.125rem;
  --autocomplete-font-size-xl: 1.25rem;
  
  /* Colors */
  --autocomplete-bg: #ffffff;
  --autocomplete-bg-hover: #ffffff;
  --autocomplete-bg-focus: #ffffff;
  --autocomplete-bg-disabled: #f5f5f5;
  
  --autocomplete-border-color: #d1d5db;
  --autocomplete-border-color-hover: #9ca3af;
  --autocomplete-border-color-focus: #3b82f6;
  --autocomplete-border-color-error: #ef4444;
  --autocomplete-border-color-success: #10b981;
  
  --autocomplete-text-color: #111827;
  --autocomplete-text-color-disabled: #9ca3af;
  --autocomplete-text-color-placeholder: #6b7280;
  
  /* Suggestions panel */
  --autocomplete-panel-bg: #ffffff;
  --autocomplete-panel-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --autocomplete-panel-max-height: 20rem;
  --autocomplete-panel-z-index: 1050;
  
  /* Suggestion items */
  --autocomplete-item-bg-hover: #f3f4f6;
  --autocomplete-item-bg-active: #e5e7eb;
  --autocomplete-item-bg-selected: #eff6ff;
  --autocomplete-item-text-selected: #1e40af;
  --autocomplete-item-text-highlight: #1e40af;
  --autocomplete-item-padding: 0.5rem 0.75rem;
  
  /* Styles */
  --autocomplete-border-width: 1px;
  --autocomplete-border-radius: 0.375rem;
  --autocomplete-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Focus ring */
  --autocomplete-focus-ring-width: 2px;
  --autocomplete-focus-ring-color: #3b82f6;
  --autocomplete-focus-ring-offset: 2px;
  
  /* Loading indicator */
  --autocomplete-spinner-size: 1.25rem;
  --autocomplete-spinner-color: #3b82f6;
  
  /* Chip/tag for multi-select */
  --autocomplete-chip-bg: #eff6ff;
  --autocomplete-chip-border: #bfdbfe;
  --autocomplete-chip-text: #1e40af;
  --autocomplete-chip-height: 1.5rem;
  --autocomplete-chip-padding: 0 0.5rem;
  --autocomplete-chip-radius: 0.25rem;
  
  /* Mobile breakpoint */
  --autocomplete-mobile-margin: 1rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --autocomplete-bg: #1f2937;
    --autocomplete-bg-hover: #1f2937;
    --autocomplete-bg-focus: #1f2937;
    --autocomplete-bg-disabled: #111827;
    
    --autocomplete-border-color: #4b5563;
    --autocomplete-border-color-hover: #6b7280;
    --autocomplete-border-color-focus: #60a5fa;
    
    --autocomplete-text-color: #f3f4f6;
    --autocomplete-text-color-disabled: #6b7280;
    --autocomplete-text-color-placeholder: #9ca3af;
    
    --autocomplete-panel-bg: #1f2937;
    --autocomplete-panel-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    
    --autocomplete-item-bg-hover: #374151;
    --autocomplete-item-bg-active: #4b5563;
    --autocomplete-item-bg-selected: #1e3a8a;
    --autocomplete-item-text-selected: #93bbfc;
    --autocomplete-item-text-highlight: #93bbfc;
    
    --autocomplete-chip-bg: #1e3a8a;
    --autocomplete-chip-border: #2563eb;
    --autocomplete-chip-text: #dbeafe;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --autocomplete-border-width: 2px;
    --autocomplete-border-color: #000000;
    --autocomplete-border-color-focus: #0066cc;
    --autocomplete-focus-ring-width: 3px;
  }
}

/* ========================================
   Base Autocomplete Structure
   ======================================== */

.c-autocomplete {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

/* Input wrapper */
.c-autocomplete__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--autocomplete-height-m);
  background: var(--autocomplete-bg);
  border: var(--autocomplete-border-width) solid var(--autocomplete-border-color);
  border-radius: var(--autocomplete-border-radius);
  transition: var(--autocomplete-transition);
}

.c-autocomplete__wrapper:hover {
  border-color: var(--autocomplete-border-color-hover);
}

.c-autocomplete__wrapper:focus-within {
  border-color: var(--autocomplete-border-color-focus);
  box-shadow: 0 0 0 var(--autocomplete-focus-ring-offset) transparent,
              0 0 0 calc(var(--autocomplete-focus-ring-width) + var(--autocomplete-focus-ring-offset)) var(--autocomplete-focus-ring-color);
}

/* Label */
.c-autocomplete__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--autocomplete-text-color);
}

.c-autocomplete__label--required::after {
  content: ' *';
  color: var(--autocomplete-border-color-error);
}

/* Input field */
.c-autocomplete__input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--autocomplete-padding-x-m);
  background: transparent;
  border: none;
  font-size: var(--autocomplete-font-size-m);
  font-family: inherit;
  color: var(--autocomplete-text-color);
  outline: none;
  height: calc(var(--autocomplete-height-m) - 2px);
}

.c-autocomplete__input::placeholder {
  color: var(--autocomplete-text-color-placeholder);
}

.c-autocomplete__input:disabled {
  color: var(--autocomplete-text-color-disabled);
  cursor: not-allowed;
}

/* Toggle button */
.c-autocomplete__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--autocomplete-text-color);
  transition: var(--autocomplete-transition);
}

.c-autocomplete__toggle:hover {
  opacity: 0.7;
}

.c-autocomplete__toggle:focus-visible {
  outline: 2px solid var(--autocomplete-focus-ring-color);
  outline-offset: -2px;
  border-radius: 0.25rem;
}

.c-autocomplete__toggle svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Clear button */
.c-autocomplete__clear {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--autocomplete-text-color);
  transition: var(--autocomplete-transition);
}

.c-autocomplete--has-value .c-autocomplete__clear {
  display: flex;
}

.c-autocomplete__clear:hover {
  opacity: 0.7;
}

.c-autocomplete__clear:focus-visible {
  outline: 2px solid var(--autocomplete-focus-ring-color);
  outline-offset: -2px;
  border-radius: 0.25rem;
}

.c-autocomplete__clear svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Loading spinner */
.c-autocomplete__spinner {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
}

.c-autocomplete--loading .c-autocomplete__spinner {
  display: flex;
}

.c-autocomplete__spinner svg {
  width: var(--autocomplete-spinner-size);
  height: var(--autocomplete-spinner-size);
  animation: autocomplete-spin 1s linear infinite;
  stroke: var(--autocomplete-spinner-color);
  stroke-width: 2;
  fill: none;
}

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

/* ========================================
   Dropdown Panel
   ======================================== */

.c-autocomplete__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: var(--autocomplete-panel-z-index);
  min-width: 100%;
  max-height: 0;
  overflow: hidden;
  background: var(--autocomplete-panel-bg);
  border: var(--autocomplete-border-width) solid var(--autocomplete-border-color);
  border-radius: var(--autocomplete-border-radius);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: var(--autocomplete-transition), max-height 200ms ease;
}

.c-autocomplete--open .c-autocomplete__dropdown {
  max-height: var(--autocomplete-panel-max-height);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  box-shadow: var(--autocomplete-panel-shadow);
}

/* Options list */
.c-autocomplete__options {
  max-height: var(--autocomplete-panel-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem 0;
  margin: 0;
  list-style: none;
}

/* Scrollbar styling */
.c-autocomplete__options::-webkit-scrollbar {
  width: 0.5rem;
}

.c-autocomplete__options::-webkit-scrollbar-track {
  background: transparent;
}

.c-autocomplete__options::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 0.25rem;
}

.c-autocomplete__options::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Option item */
.c-autocomplete__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--autocomplete-item-padding);
  cursor: pointer;
  transition: background-color 150ms;
  position: relative;
  outline: none;
}

.c-autocomplete__option:hover:not(.c-autocomplete__option--disabled) {
  background: var(--autocomplete-item-bg-hover);
}

.c-autocomplete__option[aria-selected="true"] {
  background: var(--autocomplete-item-bg-selected);
  color: var(--autocomplete-item-text-selected);
}

.c-autocomplete__option--highlighted {
  background: var(--autocomplete-item-bg-active);
}

.c-autocomplete__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.c-autocomplete__option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--autocomplete-focus-ring-color);
}

/* Option icon */
.c-autocomplete__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-autocomplete__option-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Option content */
.c-autocomplete__option-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.c-autocomplete__option-text {
  font-size: var(--autocomplete-font-size-m);
  line-height: 1.2;
}

.c-autocomplete__option-description {
  font-size: var(--autocomplete-font-size-s);
  color: var(--autocomplete-text-color-placeholder);
  line-height: 1.2;
}

/* Highlighted text in search results */
.c-autocomplete__highlight {
  font-weight: 600;
  color: var(--autocomplete-item-text-highlight);
  background: rgba(59, 130, 246, 0.1);
  padding: 0 0.125rem;
  border-radius: 0.125rem;
}

/* Check icon for selected */
.c-autocomplete__option-check {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}

.c-autocomplete__option[aria-selected="true"] .c-autocomplete__option-check {
  display: flex;
}

.c-autocomplete__option-check svg {
  width: 1rem;
  height: 1rem;
  stroke: var(--autocomplete-item-text-selected);
  stroke-width: 3;
  fill: none;
}

/* Group header */
.c-autocomplete__group {
  padding: 0;
  margin: 0;
}

.c-autocomplete__group-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: var(--autocomplete-font-size-s);
  font-weight: 600;
  color: var(--autocomplete-text-color-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  position: sticky;
  top: 0;
  background: var(--autocomplete-panel-bg);
  z-index: 1;
}

.c-autocomplete__group + .c-autocomplete__group {
  border-top: 1px solid var(--autocomplete-border-color);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

/* Empty state */
.c-autocomplete__empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--autocomplete-text-color-placeholder);
  font-size: var(--autocomplete-font-size-m);
}

.c-autocomplete__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  width: 3rem;
  height: 3rem;
  background: var(--autocomplete-item-bg-hover);
  border-radius: 50%;
}

.c-autocomplete__empty-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Loading state */
.c-autocomplete__loading {
  padding: 1.5rem;
  text-align: center;
  color: var(--autocomplete-text-color-placeholder);
  font-size: var(--autocomplete-font-size-m);
}

.c-autocomplete__loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.c-autocomplete__loading-spinner svg {
  width: 2rem;
  height: 2rem;
  animation: autocomplete-spin 1s linear infinite;
  stroke: var(--autocomplete-spinner-color);
  stroke-width: 2;
  fill: none;
}

/* ========================================
   Multi-select Tags
   ======================================== */

.c-autocomplete--multiple .c-autocomplete__wrapper {
  min-height: auto;
  padding: 0.25rem;
  flex-wrap: wrap;
}

.c-autocomplete__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
}

.c-autocomplete__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--autocomplete-chip-height);
  padding: var(--autocomplete-chip-padding);
  background: var(--autocomplete-chip-bg);
  border: 1px solid var(--autocomplete-chip-border);
  border-radius: var(--autocomplete-chip-radius);
  font-size: var(--autocomplete-font-size-s);
  color: var(--autocomplete-chip-text);
  line-height: 1;
  white-space: nowrap;
  max-width: 200px;
}

.c-autocomplete__tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-autocomplete__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 -0.25rem 0 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 150ms;
}

.c-autocomplete__tag-remove:hover {
  opacity: 1;
}

.c-autocomplete__tag-remove:focus-visible {
  outline: 2px solid var(--autocomplete-focus-ring-color);
  outline-offset: -2px;
  border-radius: 0.125rem;
}

.c-autocomplete__tag-remove svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

.c-autocomplete--multiple .c-autocomplete__input {
  flex: 0 1 auto;
  min-width: 120px;
  padding: 0.25rem 0.5rem;
  height: var(--autocomplete-chip-height);
}

/* ========================================
   Size Variants
   ======================================== */

/* Extra Small */
.c-autocomplete--xs .c-autocomplete__wrapper {
  min-height: var(--autocomplete-height-xs);
}

.c-autocomplete--xs .c-autocomplete__input {
  padding: 0 var(--autocomplete-padding-x-xs);
  font-size: var(--autocomplete-font-size-xs);
  height: calc(var(--autocomplete-height-xs) - 2px);
}

.c-autocomplete--xs .c-autocomplete__option {
  padding: 0.375rem var(--autocomplete-padding-x-xs);
  font-size: var(--autocomplete-font-size-xs);
}

/* Small */
.c-autocomplete--s .c-autocomplete__wrapper {
  min-height: var(--autocomplete-height-s);
}

.c-autocomplete--s .c-autocomplete__input {
  padding: 0 var(--autocomplete-padding-x-s);
  font-size: var(--autocomplete-font-size-s);
  height: calc(var(--autocomplete-height-s) - 2px);
}

.c-autocomplete--s .c-autocomplete__option {
  padding: 0.375rem var(--autocomplete-padding-x-s);
  font-size: var(--autocomplete-font-size-s);
}

/* Large */
.c-autocomplete--l .c-autocomplete__wrapper {
  min-height: var(--autocomplete-height-l);
}

.c-autocomplete--l .c-autocomplete__input {
  padding: 0 var(--autocomplete-padding-x-l);
  font-size: var(--autocomplete-font-size-l);
  height: calc(var(--autocomplete-height-l) - 2px);
}

.c-autocomplete--l .c-autocomplete__option {
  padding: 0.625rem var(--autocomplete-padding-x-l);
  font-size: var(--autocomplete-font-size-l);
}

/* Extra Large */
.c-autocomplete--xl .c-autocomplete__wrapper {
  min-height: var(--autocomplete-height-xl);
}

.c-autocomplete--xl .c-autocomplete__input {
  padding: 0 var(--autocomplete-padding-x-xl);
  font-size: var(--autocomplete-font-size-xl);
  height: calc(var(--autocomplete-height-xl) - 2px);
}

.c-autocomplete--xl .c-autocomplete__option {
  padding: 0.75rem var(--autocomplete-padding-x-xl);
  font-size: var(--autocomplete-font-size-xl);
}

/* ========================================
   State Variants
   ======================================== */

/* Disabled */
.c-autocomplete--disabled .c-autocomplete__wrapper {
  background: var(--autocomplete-bg-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.c-autocomplete--disabled .c-autocomplete__input,
.c-autocomplete--disabled .c-autocomplete__toggle,
.c-autocomplete--disabled .c-autocomplete__clear {
  cursor: not-allowed;
  pointer-events: none;
}

/* Error */
.c-autocomplete--error .c-autocomplete__wrapper {
  border-color: var(--autocomplete-border-color-error);
}

.c-autocomplete--error .c-autocomplete__wrapper:focus-within {
  box-shadow: 0 0 0 var(--autocomplete-focus-ring-offset) transparent,
              0 0 0 calc(var(--autocomplete-focus-ring-width) + var(--autocomplete-focus-ring-offset)) rgba(239, 68, 68, 0.2);
}

/* Success */
.c-autocomplete--success .c-autocomplete__wrapper {
  border-color: var(--autocomplete-border-color-success);
}

.c-autocomplete--success .c-autocomplete__wrapper:focus-within {
  box-shadow: 0 0 0 var(--autocomplete-focus-ring-offset) transparent,
              0 0 0 calc(var(--autocomplete-focus-ring-width) + var(--autocomplete-focus-ring-offset)) rgba(16, 185, 129, 0.2);
}

/* Helper text */
.c-autocomplete__helper {
  margin-top: 0.25rem;
  font-size: var(--autocomplete-font-size-s);
  color: var(--autocomplete-text-color-placeholder);
}

.c-autocomplete--error .c-autocomplete__helper {
  color: var(--autocomplete-border-color-error);
}

.c-autocomplete--success .c-autocomplete__helper {
  color: var(--autocomplete-border-color-success);
}

/* ========================================
   Responsive Design
   ======================================== */

/* Position dropdown above when near bottom */
.c-autocomplete--dropup .c-autocomplete__dropdown {
  top: auto;
  bottom: calc(100% + 0.25rem);
  transform-origin: bottom;
}

/* Mobile fullscreen mode */
@media (max-width: 480px) {
  .c-autocomplete--mobile-fullscreen .c-autocomplete__dropdown {
    position: fixed;
    top: var(--autocomplete-mobile-margin);
    left: var(--autocomplete-mobile-margin);
    right: var(--autocomplete-mobile-margin);
    bottom: var(--autocomplete-mobile-margin);
    max-height: none;
    border-radius: var(--autocomplete-border-radius);
    z-index: 9999;
  }
  
  .c-autocomplete--mobile-fullscreen.c-autocomplete--open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn 200ms ease;
  }
  
  .c-autocomplete--mobile-fullscreen .c-autocomplete__options {
    max-height: calc(100vh - calc(var(--autocomplete-mobile-margin) * 2) - 3rem);
  }
  
  /* Add close button on mobile */
  .c-autocomplete--mobile-fullscreen .c-autocomplete__dropdown::before {
    content: '';
    display: block;
    padding: 0.75rem;
    border-bottom: 1px solid var(--autocomplete-border-color);
    background: var(--autocomplete-panel-bg);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  
  .c-autocomplete--mobile-fullscreen .c-autocomplete__mobile-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--autocomplete-text-color);
  }
  
  .c-autocomplete__mobile-close svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }
}

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

/* ========================================
   Virtual Scrolling Support
   ======================================== */

.c-autocomplete__virtual-scroll {
  position: relative;
  overflow-y: auto;
  max-height: var(--autocomplete-panel-max-height);
}

.c-autocomplete__virtual-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
}

.c-autocomplete__virtual-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ========================================
   Accessibility
   ======================================== */

/* Screen reader only text */
.c-autocomplete__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus trap indicator */
.c-autocomplete[data-focus-trapped="true"] .c-autocomplete__dropdown {
  box-shadow: var(--autocomplete-panel-shadow),
              inset 0 0 0 2px var(--autocomplete-focus-ring-color);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-autocomplete__dropdown,
  .c-autocomplete__wrapper,
  .c-autocomplete__option,
  .c-autocomplete__tag-remove,
  .c-autocomplete__spinner svg,
  .c-autocomplete__loading-spinner svg {
    transition: none;
    animation: none;
  }
}

/* Print styles */
@media print {
  .c-autocomplete__dropdown {
    display: none !important;
  }
  
  .c-autocomplete__toggle,
  .c-autocomplete__clear,
  .c-autocomplete__spinner {
    display: none !important;
  }
  
  .c-autocomplete__wrapper {
    border: 1px solid #000;
  }
}