/**
 * ECP UI SDK - Component Styles
 * Styles for all Web Components
 * Version: 1.0
 */

/* ========== Hamburger Menu Component ========== */
ecp-hamburger-menu {
  display: inline-block;
  position: relative;
}

.ecp-hamburger-btn {
  background: var(--ecp-hamburger-bg);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-md);
  padding: var(--ecp-space-sm) var(--ecp-space-md);
  font-size: var(--ecp-font-size-lg);
  cursor: pointer;
  transition: all var(--ecp-transition-fast);
  color: var(--ecp-text-primary);
}

.ecp-hamburger-btn:hover {
  background: var(--ecp-hamburger-hover);
  border-color: var(--ecp-primary);
}

.ecp-hamburger-dropdown {
  position: absolute;
  top: calc(100% + var(--ecp-space-xs));
  right: 0;
  background: var(--ecp-hamburger-bg);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-lg);
  box-shadow: var(--ecp-shadow-lg);
  min-width: 250px;
  max-width: 350px;
  z-index: var(--ecp-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--ecp-transition-base);
}

.ecp-hamburger-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ecp-hamburger-section {
  padding: var(--ecp-space-md);
  border-bottom: 1px solid var(--ecp-border-color-light);
}

.ecp-hamburger-section:last-child {
  border-bottom: none;
}

.ecp-hamburger-section-title {
  font-size: var(--ecp-font-size-xs);
  font-weight: var(--ecp-font-weight-semibold);
  text-transform: uppercase;
  color: var(--ecp-text-secondary);
  margin-bottom: var(--ecp-space-sm);
  letter-spacing: 0.05em;
}

.ecp-hamburger-link {
  display: block;
  padding: var(--ecp-space-sm) var(--ecp-space-md);
  color: var(--ecp-text-primary);
  text-decoration: none;
  border-radius: var(--ecp-radius-sm);
  transition: all var(--ecp-transition-fast);
  font-size: var(--ecp-font-size-sm);
}

.ecp-hamburger-link:hover {
  background: var(--ecp-bg-secondary);
  color: var(--ecp-primary);
}

/* ========== Theme Switcher Component ========== */
ecp-theme-switcher {
  display: inline-block;
}

.ecp-theme-btn {
  background: var(--ecp-bg-secondary);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-md);
  padding: var(--ecp-space-sm) var(--ecp-space-md);
  cursor: pointer;
  transition: all var(--ecp-transition-fast);
  color: var(--ecp-text-primary);
  font-size: var(--ecp-font-size-sm);
}

.ecp-theme-btn:hover {
  background: var(--ecp-bg-tertiary);
  border-color: var(--ecp-primary);
}

.ecp-theme-options {
  display: flex;
  gap: var(--ecp-space-xs);
  padding: var(--ecp-space-sm);
}

.ecp-theme-option {
  padding: var(--ecp-space-xs) var(--ecp-space-sm);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-sm);
  background: var(--ecp-bg-primary);
  cursor: pointer;
  transition: all var(--ecp-transition-fast);
  font-size: var(--ecp-font-size-xs);
}

.ecp-theme-option:hover {
  border-color: var(--ecp-primary);
  background: var(--ecp-bg-secondary);
}

.ecp-theme-option.active {
  background: var(--ecp-primary);
  color: white;
  border-color: var(--ecp-primary);
}

/* ========== Preferences Modal Component ========== */
ecp-preferences {
  display: none;
}

.ecp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ecp-modal-overlay);
  z-index: var(--ecp-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ecp-transition-base);
}

.ecp-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ecp-modal {
  background: var(--ecp-modal-bg);
  border-radius: var(--ecp-radius-lg);
  box-shadow: var(--ecp-shadow-xl);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  transform: scale(0.9);
  transition: transform var(--ecp-transition-base);
}

.ecp-modal-overlay.active .ecp-modal {
  transform: scale(1);
}

.ecp-modal-header {
  padding: var(--ecp-space-lg);
  border-bottom: 1px solid var(--ecp-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ecp-modal-title {
  font-size: var(--ecp-font-size-xl);
  font-weight: var(--ecp-font-weight-semibold);
  color: var(--ecp-text-primary);
  margin: 0;
}

.ecp-modal-close {
  background: transparent;
  border: none;
  font-size: var(--ecp-font-size-2xl);
  cursor: pointer;
  color: var(--ecp-text-secondary);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ecp-radius-sm);
  transition: all var(--ecp-transition-fast);
}

.ecp-modal-close:hover {
  background: var(--ecp-bg-secondary);
  color: var(--ecp-text-primary);
}

.ecp-modal-body {
  padding: var(--ecp-space-lg);
}

.ecp-modal-footer {
  padding: var(--ecp-space-lg);
  border-top: 1px solid var(--ecp-border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--ecp-space-sm);
}

/* ========== Form Elements ========== */
.ecp-form-group {
  margin-bottom: var(--ecp-space-lg);
}

.ecp-form-label {
  display: block;
  font-size: var(--ecp-font-size-sm);
  font-weight: var(--ecp-font-weight-medium);
  color: var(--ecp-text-primary);
  margin-bottom: var(--ecp-space-sm);
}

.ecp-form-input,
.ecp-form-select {
  width: 100%;
  padding: var(--ecp-space-sm) var(--ecp-space-md);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-md);
  background: var(--ecp-bg-primary);
  color: var(--ecp-text-primary);
  font-size: var(--ecp-font-size-base);
  transition: all var(--ecp-transition-fast);
}

.ecp-form-input:focus,
.ecp-form-select:focus {
  outline: none;
  border-color: var(--ecp-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* ========== Buttons ========== */
.ecp-btn {
  padding: var(--ecp-space-sm) var(--ecp-space-lg);
  border: none;
  border-radius: var(--ecp-radius-md);
  font-size: var(--ecp-font-size-sm);
  font-weight: var(--ecp-font-weight-medium);
  cursor: pointer;
  transition: all var(--ecp-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ecp-space-sm);
}

.ecp-btn-primary {
  background: var(--ecp-primary);
  color: white;
}

.ecp-btn-primary:hover {
  background: var(--ecp-primary-hover);
}

.ecp-btn-secondary {
  background: var(--ecp-secondary);
  color: white;
}

.ecp-btn-secondary:hover {
  background: var(--ecp-secondary-hover);
}

.ecp-btn-outline {
  background: transparent;
  border: 1px solid var(--ecp-border-color);
  color: var(--ecp-text-primary);
}

.ecp-btn-outline:hover {
  background: var(--ecp-bg-secondary);
  border-color: var(--ecp-primary);
  color: var(--ecp-primary);
}

/* ========== Entity Switcher Component ========== */
ecp-entity-switcher {
  display: inline-block;
}

.ecp-entity-btn {
  background: var(--ecp-bg-secondary);
  border: 1px solid var(--ecp-border-color);
  border-radius: var(--ecp-radius-md);
  padding: var(--ecp-space-sm) var(--ecp-space-md);
  cursor: pointer;
  transition: all var(--ecp-transition-fast);
  color: var(--ecp-text-primary);
  font-size: var(--ecp-font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--ecp-space-sm);
}

.ecp-entity-btn:hover {
  background: var(--ecp-bg-tertiary);
  border-color: var(--ecp-primary);
}

/* ========== Utility Classes ========== */
.ecp-hidden {
  display: none !important;
}

.ecp-visible {
  display: block !important;
}

.ecp-text-center {
  text-align: center;
}

.ecp-text-right {
  text-align: right;
}

.ecp-mt-sm { margin-top: var(--ecp-space-sm); }
.ecp-mt-md { margin-top: var(--ecp-space-md); }
.ecp-mt-lg { margin-top: var(--ecp-space-lg); }

.ecp-mb-sm { margin-bottom: var(--ecp-space-sm); }
.ecp-mb-md { margin-bottom: var(--ecp-space-md); }
.ecp-mb-lg { margin-bottom: var(--ecp-space-lg); }

/* ========== Tag Component (Light DOM v2.0) ========== */
ecp-tag {
  display: inline-block;
}

.ecp-tag__container {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.2s;
  user-select: none;
  font-family: inherit;
  box-sizing: border-box;
}

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

.ecp-tag--clickable {
  cursor: pointer;
}

.ecp-tag--clickable:hover {
  opacity: 0.9;
}

/* Tag Sizes */
.ecp-tag--sm {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}

.ecp-tag--md {
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
}

.ecp-tag--lg {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Tag Variants */
.ecp-tag--default {
  background: var(--ecp-tag-default-bg, #f3f4f6);
  color: var(--ecp-tag-default-text, #374151);
}

.ecp-tag--primary {
  background: var(--ecp-tag-primary-bg, #dbeafe);
  color: var(--ecp-tag-primary-text, #1e40af);
}

.ecp-tag--success {
  background: var(--ecp-tag-success-bg, #d1fae5);
  color: var(--ecp-tag-success-text, #065f46);
}

.ecp-tag--warning {
  background: var(--ecp-tag-warning-bg, #fef3c7);
  color: var(--ecp-tag-warning-text, #92400e);
}

.ecp-tag--error {
  background: var(--ecp-tag-error-bg, #fee2e2);
  color: var(--ecp-tag-error-text, #991b1b);
}

/* Tag Elements */
.ecp-tag__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.ecp-tag__label {
  line-height: 1;
}

.ecp-tag__remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ecp-tag__remove-btn:hover {
  opacity: 1;
}

.ecp-tag__remove-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* ========== Badge Component (Light DOM v2.0) ========== */
ecp-badge {
  display: inline-block;
}

.ecp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  font-family: inherit;
  box-sizing: border-box;
}

/* Badge Sizes */
.ecp-badge--small {
  font-size: 0.6875rem;
  padding: 0.0625rem 0.375rem;
}

.ecp-badge--medium {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}

.ecp-badge--large {
  font-size: 0.875rem;
  padding: 0.1875rem 0.625rem;
}

/* Badge Color Variants - Light Mode */
.ecp-badge--primary {
  background: var(--ecp-badge-primary-bg, #e3f2fd);
  color: var(--ecp-badge-primary-text, #1976d2);
}

.ecp-badge--success {
  background: var(--ecp-badge-success-bg, #d1fae5);
  color: var(--ecp-badge-success-text, #059669);
}

.ecp-badge--warning {
  background: var(--ecp-badge-warning-bg, #fef3c7);
  color: var(--ecp-badge-warning-text, #d97706);
}

.ecp-badge--danger {
  background: var(--ecp-badge-danger-bg, #fee2e2);
  color: var(--ecp-badge-danger-text, #dc2626);
}

.ecp-badge--neutral {
  background: var(--ecp-badge-neutral-bg, #f3f4f6);
  color: var(--ecp-badge-neutral-text, #4b5563);
}

/* Badge Color Variants - Dark Mode */
[data-theme="dark"] .ecp-badge--primary {
  background: var(--ecp-badge-primary-bg-dark, #1e3a8a);
  color: var(--ecp-badge-primary-text-dark, #93c5fd);
}

[data-theme="dark"] .ecp-badge--success {
  background: var(--ecp-badge-success-bg-dark, #064e3b);
  color: var(--ecp-badge-success-text-dark, #6ee7b7);
}

[data-theme="dark"] .ecp-badge--warning {
  background: var(--ecp-badge-warning-bg-dark, #78350f);
  color: var(--ecp-badge-warning-text-dark, #fcd34d);
}

[data-theme="dark"] .ecp-badge--danger {
  background: var(--ecp-badge-danger-bg-dark, #7f1d1d);
  color: var(--ecp-badge-danger-text-dark, #fca5a5);
}

[data-theme="dark"] .ecp-badge--neutral {
  background: var(--ecp-badge-neutral-bg-dark, #374151);
  color: var(--ecp-badge-neutral-text-dark, #d1d5db);
}

/* ========== Spinner Component (Light DOM v2.0) ========== */
ecp-spinner {
  display: inline-block;
}

.ecp-spinner__container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-direction: column;
  box-sizing: border-box;
}

.ecp-spinner {
  border-radius: 50%;
  border-style: solid;
  border-color: var(--ecp-spinner-track, #e5e7eb);
  border-top-color: var(--ecp-spinner-color, #2196f3);
  animation: ecp-spin 0.8s linear infinite;
  will-change: transform;
}

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

/* Spinner Sizes */
.ecp-spinner--small {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.ecp-spinner--medium {
  width: 2rem;
  height: 2rem;
  border-width: 2px;
}

.ecp-spinner--large {
  width: 3rem;
  height: 3rem;
  border-width: 3px;
}

/* Spinner Color Variants - Light Mode */
.ecp-spinner--primary {
  --ecp-spinner-color: var(--ecp-primary, #2196f3);
  --ecp-spinner-track: var(--ecp-primary-light, #e3f2fd);
}

.ecp-spinner--success {
  --ecp-spinner-color: var(--ecp-success, #10b981);
  --ecp-spinner-track: var(--ecp-success-light, #d1fae5);
}

.ecp-spinner--warning {
  --ecp-spinner-color: var(--ecp-warning, #f59e0b);
  --ecp-spinner-track: var(--ecp-warning-light, #fef3c7);
}

.ecp-spinner--danger {
  --ecp-spinner-color: var(--ecp-danger, #ef4444);
  --ecp-spinner-track: var(--ecp-danger-light, #fee2e2);
}

.ecp-spinner--neutral {
  --ecp-spinner-color: var(--ecp-neutral, #6b7280);
  --ecp-spinner-track: var(--ecp-neutral-light, #f3f4f6);
}

.ecp-spinner__label {
  font-size: 0.875rem;
  color: var(--ecp-spinner-label-color, #6b7280);
  margin-top: 0.5rem;
  font-family: inherit;
}

/* Spinner Color Variants - Dark Mode */
[data-theme="dark"] .ecp-spinner--primary {
  --ecp-spinner-color: var(--ecp-primary, #60a5fa);
  --ecp-spinner-track: var(--ecp-primary-light, #1e3a8a);
}

[data-theme="dark"] .ecp-spinner--success {
  --ecp-spinner-color: var(--ecp-success, #34d399);
  --ecp-spinner-track: var(--ecp-success-light, #064e3b);
}

[data-theme="dark"] .ecp-spinner--warning {
  --ecp-spinner-color: var(--ecp-warning, #fbbf24);
  --ecp-spinner-track: var(--ecp-warning-light, #78350f);
}

[data-theme="dark"] .ecp-spinner--danger {
  --ecp-spinner-color: var(--ecp-danger, #f87171);
  --ecp-spinner-track: var(--ecp-danger-light, #7f1d1d);
}

[data-theme="dark"] .ecp-spinner--neutral {
  --ecp-spinner-color: var(--ecp-neutral, #9ca3af);
  --ecp-spinner-track: var(--ecp-neutral-light, #374151);
}

[data-theme="dark"] .ecp-spinner__label {
  color: var(--ecp-spinner-label-color, #9ca3af);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .ecp-spinner {
    animation-duration: 1.5s;
  }
}

/* ========== Accordion Component (Light DOM v2.0) ========== */
ecp-accordion {
  display: inline-block;
}

.ecp-accordion__container {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 0.5rem;
        }
        .accordion-item {
          border: 1px solid var(--accordion-border, #e5e7eb);
          border-radius: 0.5rem;
          overflow: hidden;
          background: var(--accordion-item-bg, #ffffff);
          transition: all 0.2s;
        }
        .accordion-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 1rem 1.25rem;
          background: transparent;
          border: none;
          cursor: pointer;
          font-size: 0.9375rem;
          font-weight: 500;
          color: var(--accordion-header-text, #374151);
          text-align: left;
          transition: background 0.2s;
          font-family: inherit;
        }
        .accordion-header:hover:not([disabled]) {
          background: var(--accordion-header-hover-bg, #f9fafb);
        }
        .accordion-header-active {
          color: var(--accordion-header-active-text, #2196f3);
          font-weight: 600;
        }
        .accordion-header[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }
        .accordion-header:focus {
          outline: 2px solid var(--accordion-header-active-text, #2196f3);
          outline-offset: -2px;
        }
        .accordion-header-label {
          flex: 1;
        }
        .accordion-icon {
          width: 1.25rem;
          height: 1.25rem;
          transition: transform 0.3s ease;
          flex-shrink: 0;
          margin-left: 0.5rem;
        }
        .accordion-icon-expanded {
          transform: rotate(180deg);
        }
        .accordion-icon svg {
          width: 100%;
          height: 100%;
          fill: currentColor;
        }
        .accordion-content {
          overflow: hidden;
          transition: max-height 0.3s ease, opacity 0.3s ease;
          max-height: 0;
          opacity: 0;
        }
        .accordion-content-expanded {
          opacity: 1;
        }
        .accordion-content-body {
          padding: 0 1.25rem 1.25rem 1.25rem;
          color: var(--accordion-content-text, #6b7280);
          font-size: 0.9375rem;
          line-height: 1.6;
        }
        /* Dark mode */
        [data-theme="dark"] .accordion-item {
          border-color: var(--accordion-border, #374151);
          background: var(--accordion-item-bg, #1f2937);
        }
        [data-theme="dark"] .accordion-header {
          color: var(--accordion-header-text, #d1d5db);
        }
        [data-theme="dark"] .accordion-header:hover:not([disabled]) {
          background: var(--accordion-header-hover-bg, #374151);
        }
        [data-theme="dark"] .accordion-header-active {
          color: var(--accordion-header-active-text, #60a5fa);
        }
        [data-theme="dark"] .accordion-content-body {
          color: var(--accordion-content-text, #9ca3af);
        }
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .accordion-header,
          .accordion-icon,
          .accordion-content {
            transition: none;
          }
        }
        /* Responsive */
        @media (max-width: 480px) {
          .accordion-header {
            padding: 0.875rem 1rem;
            font-size: 0.875rem;
          }
          .accordion-content-body {
            padding: 0 1rem 1rem 1rem;
            font-size: 0.875rem;
          }
        }

/* ========== Account Modal Component (Light DOM v2.0) ========== */
ecp-account-modal {
  display: inline-block;
}

@keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slide-up {
          from {
            transform: translateY(2rem);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .overlay {
          position: fixed;
          inset: 0;
          background: var(--account-overlay, rgba(0, 0, 0, 0.5));
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: fade-in 0.2s ease-out;
          font-family: inherit;
        }
        .modal {
          background: var(--account-bg, #ffffff);
          border-radius: 0.75rem;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          max-width: 42rem;
          max-height: 90vh;
          width: 90%;
          overflow: hidden;
          animation: slide-up 0.3s ease-out;
        }
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.5rem;
          border-bottom: 1px solid var(--account-border, #e5e7eb);
        }
        .title {
          font-size: 1.25rem;
          font-weight: 600;
          color: var(--account-text, #374151);
        }
        .close-button {
          width: 2rem;
          height: 2rem;
          border: none;
          border-radius: 0.375rem;
          background: transparent;
          color: var(--account-text, #6b7280);
          cursor: pointer;
          transition: background 0.2s;
        }
        .close-button:hover {
          background: #f3f4f6;
        }
        .close-icon {
          width: 1.5rem;
          height: 1.5rem;
        }
        .content {
          padding: 1.5rem;
          overflow-y: auto;
          max-height: calc(90vh - 10rem);
        }
        .section {
          margin-bottom: 1.5rem;
        }
        .section:last-child {
          margin-bottom: 0;
        }
        .section-title {
          font-size: 1rem;
          font-weight: 600;
          color: var(--account-text, #374151);
          margin-bottom: 1rem;
        }
        .form-group {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          margin-bottom: 1rem;
        }
        label {
          font-size: 0.875rem;
          font-weight: 500;
          color: var(--account-text, #374151);
        }
        input,
        textarea {
          padding: 0.625rem 0.75rem;
          border: 1px solid var(--account-input-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--account-bg, #ffffff);
          color: var(--account-text, #374151);
          font-size: 0.9375rem;
          font-family: inherit;
          transition: border-color 0.2s;
        }
        input:focus,
        textarea:focus {
          outline: none;
          border-color: var(--account-input-focus, #3b82f6);
        }
        textarea {
          resize: vertical;
          min-height: 4rem;
        }
        .help-text {
          font-size: 0.8125rem;
          color: #6b7280;
        }
        .footer {
          display: flex;
          gap: 0.75rem;
          justify-content: flex-end;
          padding: 1.5rem;
          border-top: 1px solid var(--account-border, #e5e7eb);
        }
        .ecp-account-modal__button {
          padding: 0.625rem 1.25rem;
          border: 1px solid;
          border-radius: 0.5rem;
          font-size: 0.9375rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .ecp-account-modal__button-cancel {
          background: transparent;
          border-color: var(--account-input-border, #d1d5db);
          color: var(--account-text, #374151);
        }
        .ecp-account-modal__button-cancel:hover {
          background: #f3f4f6;
        }
        .ecp-account-modal__button-save {
          background: var(--account-button-bg, #3b82f6);
          border-color: var(--account-button-bg, #3b82f6);
          color: var(--account-button-text, #ffffff);
        }
        .ecp-account-modal__button-save:hover {
          background: #2563eb;
        }
        /* Dark mode */
        [data-theme="dark"] .modal {
          background: var(--account-bg, #1f2937);
        }
        [data-theme="dark"] .title,
        [data-theme="dark"] .section-title,
        [data-theme="dark"] label {
          color: var(--account-text, #d1d5db);
        }
        [data-theme="dark"] input,
        [data-theme="dark"] textarea {
          background: #374151;
          color: #d1d5db;
          border-color: var(--account-input-border, #4b5563);
        }
        [data-theme="dark"] .close-button:hover {
          background: #374151;
        }
        [data-theme="dark"] .ecp-account-modal__button-cancel {
          color: #d1d5db;
          border-color: #4b5563;
        }
        [data-theme="dark"] .ecp-account-modal__button-cancel:hover {
          background: #374151;
        }

/* ========== Alert Component (Light DOM v2.0) ========== */
ecp-alert {
  display: inline-block;
}

.ecp-alert__container {
          display: flex;
          align-items: flex-start;
          gap: 0.75rem;
          padding: 1rem;
          border-radius: 0.5rem;
          border: 1px solid transparent;
          font-family: inherit;
        }
        .type-info {
          background: var(--alert-info-bg, #dbeafe);
          border-color: var(--alert-info-border, #93c5fd);
          color: var(--alert-info-text, #1e40af);
        }
        .type-success {
          background: var(--alert-success-bg, #d1fae5);
          border-color: var(--alert-success-border, #6ee7b7);
          color: var(--alert-success-text, #065f46);
        }
        .type-warning {
          background: var(--alert-warning-bg, #fef3c7);
          border-color: var(--alert-warning-border, #fcd34d);
          color: var(--alert-warning-text, #92400e);
        }
        .type-error {
          background: var(--alert-error-bg, #fee2e2);
          border-color: var(--alert-error-border, #fca5a5);
          color: var(--alert-error-text, #991b1b);
        }
        .ecp-alert__icon {
          width: 1.25rem;
          height: 1.25rem;
          flex-shrink: 0;
        }
        .content {
          flex: 1;
        }
        .title {
          font-size: 0.9375rem;
          font-weight: 600;
          margin-bottom: 0.25rem;
        }
        .description {
          font-size: 0.875rem;
          line-height: 1.5;
        }
        .actions {
          display: flex;
          gap: 0.5rem;
          margin-top: 0.75rem;
        }
        .close-button {
          background: none;
          border: none;
          cursor: pointer;
          padding: 0.25rem;
          border-radius: 0.25rem;
          color: inherit;
          opacity: 0.7;
          transition: all 0.2s;
          flex-shrink: 0;
        }
        .close-button:hover {
          opacity: 1;
          background: rgba(0, 0, 0, 0.05);
        }
        .close-icon {
          width: 1.25rem;
          height: 1.25rem;
          display: block;
        }
        @media (max-width: 640px) {
          .ecp-alert__container {
            flex-direction: column;
          }
          .actions {
            width: 100%;
          }
        }

/* ========== Avatar Component (Light DOM v2.0) ========== */
ecp-avatar {
  display: inline-block;
}

.ecp-avatar__container {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          background: var(--avatar-bg, ${!hasSrc ? this.getBackgroundColor() : '#e5e7eb'});
          color: var(--avatar-text, #ffffff);
          font-weight: 500;
          user-select: none;
          cursor: ${this.hasAttribute('clickable') ? 'pointer' : 'default'};
          transition: transform 0.2s;
        }
        .ecp-avatar__container:hover {
          ${this.hasAttribute('clickable') ? 'transform: scale(1.05);' : ''}
        }
        .ecp-avatar--xs {
          width: 1.5rem;
          height: 1.5rem;
          font-size: 0.625rem;
        }
        .ecp-avatar--sm {
          width: 2rem;
          height: 2rem;
          font-size: 0.75rem;
        }
        .ecp-avatar--md {
          width: 2.5rem;
          height: 2.5rem;
          font-size: 0.875rem;
        }
        .ecp-avatar--lg {
          width: 3rem;
          height: 3rem;
          font-size: 1rem;
        }
        .ecp-avatar--xl {
          width: 4rem;
          height: 4rem;
          font-size: 1.25rem;
        }
        .shape-circle {
          border-radius: 50%;
        }
        .shape-square {
          border-radius: 0;
        }
        .shape-rounded {
          border-radius: 0.375rem;
        }
        .image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .initials {
          font-family: inherit;
        }
        .status {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 25%;
          height: 25%;
          min-width: 0.5rem;
          min-height: 0.5rem;
          border-radius: 50%;
          border: 2px solid var(--avatar-bg, #ffffff);
        }
        .status.online {
          background: var(--status-online, #10b981);
        }
        .status.offline {
          background: var(--status-offline, #6b7280);
        }
        .status.busy {
          background: var(--status-busy, #ef4444);
        }
        .status.away {
          background: var(--status-away, #f59e0b);
        }

/* ========== Breadcrumbs Component (Light DOM v2.0) ========== */
ecp-breadcrumbs {
  display: inline-block;
}

nav {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 0.5rem;
          padding: 0.75rem 0;
          font-size: 0.875rem;
          font-family: inherit;
        }
        .item {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          color: var(--ecp-breadcrumb-text, #6b7280);
        }
        .link {
          color: var(--ecp-breadcrumb-link, #3b82f6);
          text-decoration: none;
          cursor: pointer;
          transition: color 0.2s;
          outline-offset: 2px;
          border-radius: 2px;
        }
        .link:hover {
          color: var(--ecp-breadcrumb-link-hover, #2563eb);
          text-decoration: underline;
        }
        .link:focus {
          outline: 2px solid var(--ecp-primary, #2196f3);
        }
        .current {
          color: var(--ecp-breadcrumb-current, #111827);
          font-weight: 500;
          pointer-events: none;
        }
        .separator {
          color: var(--ecp-breadcrumb-separator, #9ca3af);
          user-select: none;
          flex-shrink: 0;
        }
        /* Dark mode */
        [data-theme="dark"] nav {
          --ecp-breadcrumb-text: #9ca3af;
          --ecp-breadcrumb-link: #60a5fa;
          --ecp-breadcrumb-link-hover: #93c5fd;
          --ecp-breadcrumb-current: #f9fafb;
          --ecp-breadcrumb-separator: #6b7280;
        }
        /* Responsive */
        @media (max-width: 480px) {
          nav {
            font-size: 0.8125rem;
            gap: 0.375rem;
          }
        }

/* ========== Card Component (Light DOM v2.0) ========== */
ecp-card {
  display: inline-block;
}

.ecp-card__container {
          background: var(--card-bg, #ffffff);
          border-radius: 0.5rem;
          overflow: hidden;
          transition: all 0.2s;
        }
        .ecp-card--default {
          border: 1px solid var(--card-border, #e5e7eb);
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        }
        .ecp-card--elevated {
          border: none;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .ecp-card--outlined {
          border: 1px solid var(--card-border, #e5e7eb);
          box-shadow: none;
        }
        .interactive {
          cursor: pointer;
        }
        .interactive:hover {
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
        .image-container ::slotted(img),
        .header-image {
          width: 100%;
          height: auto;
          display: block;
        }
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 1.5rem;
          border-bottom: 1px solid var(--card-divider, #f3f4f6);
        }
        .header.no-border {
          border-bottom: none;
        }
        .title {
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--card-title-text, #111827);
          font-family: inherit;
        }
        .actions {
          display: flex;
          gap: 0.5rem;
        }
        .body {
          padding: 1.5rem;
          color: var(--card-body-text, #374151);
          font-size: 0.875rem;
          line-height: 1.6;
        }
        .footer {
          padding: 1rem 1.5rem;
          border-top: 1px solid var(--card-divider, #f3f4f6);
          background: var(--card-footer-bg, #f9fafb);
        }
        /* Hide empty slots */
        .header:not(.has-content) {
          display: none;
        }
        .footer:not(.has-content) {
          display: none;
        }
        @media (max-width: 640px) {
          .header {
            padding: 0.875rem 1rem;
          }
          .body {
            padding: 1rem;
          }
          .footer {
            padding: 0.875rem 1rem;
          }
        }

/* ========== Chart Component (Light DOM v2.0) ========== */
ecp-chart {
  display: inline-block;
}

:host {
          display: block;
          font-family: inherit;
        }
        .ecp-chart__container {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
          min-height: 300px;
          background: var(--chart-bg, transparent);
          border-radius: 0.5rem;
          padding: 1rem;
        }
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .title {
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--chart-text, #374151);
        }
        .subtitle {
          font-size: 0.875rem;
          color: var(--chart-subtitle, #6b7280);
          margin-top: 0.25rem;
        }
        .chart-wrapper {
          flex: 1;
          position: relative;
          min-height: 200px;
        }
        svg {
          width: 100%;
          height: 100%;
          overflow: visible;
        }
        .legend {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          margin-top: 1rem;
          padding-top: 1rem;
          border-top: 1px solid var(--chart-border, #e5e7eb);
        }
        .legend-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          color: var(--chart-text, #374151);
        }
        .legend-color {
          width: 1rem;
          height: 1rem;
          border-radius: 0.25rem;
        }
        .tooltip {
          position: absolute;
          background: var(--chart-tooltip-bg, rgba(0, 0, 0, 0.9));
          color: var(--chart-tooltip-text, #ffffff);
          padding: 0.5rem 0.75rem;
          border-radius: 0.375rem;
          font-size: 0.875rem;
          pointer-events: none;
          white-space: nowrap;
          z-index: 1000;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          opacity: 0;
          transition: opacity 0.2s;
        }
        .tooltip.visible {
          opacity: 1;
        }
        .no-data {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 200px;
          color: var(--chart-subtitle, #6b7280);
          font-size: 0.9375rem;
        }
        /* Dark mode */
        [data-theme="dark"] .title {
          color: var(--chart-text, #d1d5db);
        }
        [data-theme="dark"] .subtitle,
        [data-theme="dark"] .legend-item {
          color: var(--chart-subtitle, #9ca3af);
        }
        /* Animations */
        @keyframes bar-grow {
          from { transform: scaleY(0); transform-origin: bottom; }
          to { transform: scaleY(1); transform-origin: bottom; }
        }
        @keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        ${this._options.animate ? `
          .bar { animation: bar-grow 0.6s ease-out; }
          .chart-element { animation: fade-in 0.4s ease-out; }
        ` : ''}

/* ========== Chip Component (Light DOM v2.0) ========== */
ecp-chip {
  display: inline-block;
}

.chip {
          display: inline-flex;
          align-items: center;
          gap: 0.375rem;
          padding: 0.375rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.875rem;
          font-weight: 500;
          transition: all 0.2s;
          font-family: inherit;
        }
        .chip-clickable {
          cursor: pointer;
        }
        .chip-removable {
          padding-right: 0.5rem;
        }
        /* Color variants */
        .chip-primary {
          background: var(--chip-primary-bg, #e3f2fd);
          color: var(--chip-primary-text, #1976d2);
        }
        .chip-success {
          background: var(--chip-success-bg, #d1fae5);
          color: var(--chip-success-text, #059669);
        }
        .chip-warning {
          background: var(--chip-warning-bg, #fef3c7);
          color: var(--chip-warning-text, #d97706);
        }
        .chip-danger {
          background: var(--chip-danger-bg, #fee2e2);
          color: var(--chip-danger-text, #dc2626);
        }
        .chip-neutral {
          background: var(--chip-neutral-bg, #f3f4f6);
          color: var(--chip-neutral-text, #4b5563);
        }
        /* Hover states */
        .chip-clickable:hover {
          filter: brightness(0.95);
        }
        /* Remove button */
        .ecp-chip__remove-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 9999px;
          border: none;
          background: transparent;
          cursor: pointer;
          transition: background 0.2s;
          padding: 0;
          color: inherit;
        }
        .ecp-chip__remove-btn:hover {
          background: rgba(0, 0, 0, 0.1);
        }
        .ecp-chip__remove-btn:focus {
          outline: 2px solid currentColor;
          outline-offset: 2px;
        }
        .ecp-chip__remove-icon {
          width: 0.875rem;
          height: 0.875rem;
        }
        /* Dark mode */
        [data-theme="dark"] .chip-primary {
          background: var(--chip-primary-bg, #1e3a8a);
          color: var(--chip-primary-text, #93c5fd);
        }
        [data-theme="dark"] .chip-success {
          background: var(--chip-success-bg, #064e3b);
          color: var(--chip-success-text, #6ee7b7);
        }
        [data-theme="dark"] .chip-warning {
          background: var(--chip-warning-bg, #78350f);
          color: var(--chip-warning-text, #fcd34d);
        }
        [data-theme="dark"] .chip-danger {
          background: var(--chip-danger-bg, #7f1d1d);
          color: var(--chip-danger-text, #fca5a5);
        }
        [data-theme="dark"] .chip-neutral {
          background: var(--chip-neutral-bg, #374151);
          color: var(--chip-neutral-text, #d1d5db);
        }
        [data-theme="dark"] .ecp-chip__remove-btn:hover {
          background: rgba(255, 255, 255, 0.1);
        }

/* ========== Column Selector Component (Light DOM v2.0) ========== */
ecp-column-selector {
  display: inline-block;
}

.ecp-column-selector__container {
          position: relative;
          display: inline-block;
          font-family: inherit;
        }
        .trigger-button {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem 0.75rem;
          border: 1px solid var(--column-selector-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--column-selector-bg, #ffffff);
          color: var(--column-selector-text, #374151);
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .trigger-button:hover {
          background: var(--column-selector-button-hover, #f3f4f6);
        }
        .trigger-button:focus {
          outline: 2px solid var(--column-selector-dragging, #3b82f6);
          outline-offset: 2px;
        }
        .trigger-icon {
          width: 1rem;
          height: 1rem;
        }
        .dropdown {
          position: absolute;
          top: 100%;
          right: 0;
          margin-top: 0.5rem;
          background: var(--column-selector-dropdown-bg, #ffffff);
          border: 1px solid var(--column-selector-dropdown-border, #e5e7eb);
          border-radius: 0.5rem;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          z-index: 1000;
          padding: 0.75rem;
          min-width: 16rem;
          max-height: 24rem;
          overflow-y: auto;
          display: ${this._isOpen ? 'block' : 'none'};
        }
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid var(--column-selector-header-border, #e5e7eb);
          margin-bottom: 0.5rem;
        }
        .header-title {
          font-size: 0.875rem;
          font-weight: 600;
          color: var(--column-selector-text, #374151);
        }
        .select-all-button {
          padding: 0.25rem 0.5rem;
          border: none;
          background: transparent;
          color: var(--column-selector-dragging, #3b82f6);
          font-size: 0.75rem;
          font-weight: 500;
          cursor: pointer;
          transition: opacity 0.2s;
        }
        .select-all-button:hover {
          opacity: 0.8;
        }
        .column-list {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }
        .column-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.5rem;
          border-radius: 0.375rem;
          cursor: move;
          transition: background 0.2s;
        }
        .column-item:hover {
          background: var(--column-selector-item-hover, #f3f4f6);
        }
        .column-item.dragging {
          opacity: 0.5;
        }
        .drag-handle {
          width: 1rem;
          height: 1rem;
          color: var(--column-selector-text, #6b7280);
          cursor: move;
        }
        .checkbox-wrapper {
          display: flex;
          align-items: center;
          flex: 1;
          gap: 0.5rem;
          cursor: pointer;
        }
        .checkbox {
          width: 1rem;
          height: 1rem;
          cursor: pointer;
        }
        .column-label {
          font-size: 0.875rem;
          color: var(--column-selector-text, #374151);
          user-select: none;
        }
        .actions {
          display: flex;
          gap: 0.5rem;
          padding-top: 0.5rem;
          border-top: 1px solid var(--column-selector-header-border, #e5e7eb);
          margin-top: 0.5rem;
        }
        .action-button {
          flex: 1;
          padding: 0.5rem;
          border: 1px solid var(--column-selector-border, #d1d5db);
          border-radius: 0.375rem;
          background: transparent;
          color: var(--column-selector-text, #374151);
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .action-button:hover {
          background: var(--column-selector-button-hover, #f3f4f6);
        }
        .action-button:focus {
          outline: 2px solid var(--column-selector-dragging, #3b82f6);
          outline-offset: 2px;
        }
        /* Dark mode */
        [data-theme="dark"] .trigger-button {
          background: var(--column-selector-bg, #374151);
          color: var(--column-selector-text, #d1d5db);
          border-color: var(--column-selector-border, #4b5563);
        }
        [data-theme="dark"] .trigger-button:hover {
          background: var(--column-selector-button-hover, #4b5563);
        }
        [data-theme="dark"] .dropdown {
          background: var(--column-selector-dropdown-bg, #1f2937);
          border-color: var(--column-selector-dropdown-border, #374151);
        }
        [data-theme="dark"] .header-title,
        [data-theme="dark"] .column-label,
        [data-theme="dark"] .action-button {
          color: var(--column-selector-text, #d1d5db);
        }
        [data-theme="dark"] .column-item:hover {
          background: var(--column-selector-item-hover, #374151);
        }
        [data-theme="dark"] .action-button:hover {
          background: var(--column-selector-button-hover, #4b5563);
        }

/* ========== Confirm Dialog Component (Light DOM v2.0) ========== */
ecp-confirm-dialog {
  display: inline-block;
}

.ecp-confirm-dialog__container {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1060;
          align-items: center;
          justify-content: center;
        }
        .ecp-confirm-dialog__container-show {
          display: flex;
        }
        .backdrop {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--ecp-confirm-backdrop-bg, rgba(0, 0, 0, 0.5));
          animation: fadeIn 0.15s ease;
          cursor: pointer;
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slideIn {
          from {
            transform: translateY(-20px);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .dialog {
          position: relative;
          width: 90%;
          max-width: 420px;
          background: var(--ecp-confirm-bg, #ffffff);
          border-radius: 0.5rem;
          box-shadow: var(--ecp-confirm-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
          animation: slideIn 0.2s ease;
          outline: none;
          z-index: 1;
        }
        .header {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 1.25rem 1.5rem 0.75rem;
          border-bottom: 1px solid var(--ecp-confirm-border, #e5e7eb);
        }
        .ecp-confirm-dialog__icon {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .ecp-confirm-dialog__icon-warning {
          background: var(--ecp-warning-light, #fef3c7);
          color: var(--ecp-warning, #f59e0b);
        }
        .ecp-confirm-dialog__icon-danger {
          background: var(--ecp-danger-light, #fee2e2);
          color: var(--ecp-danger, #ef4444);
        }
        .ecp-confirm-dialog__icon-info {
          background: var(--ecp-info-light, #dbeafe);
          color: var(--ecp-info, #3b82f6);
        }
        .ecp-confirm-dialog__icon-success {
          background: var(--ecp-success-light, #d1fae5);
          color: var(--ecp-success, #10b981);
        }
        .title {
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--ecp-confirm-title-text, #111827);
          flex: 1;
        }
        .body {
          padding: 1.25rem 1.5rem;
          color: var(--ecp-confirm-body-text, #6b7280);
          line-height: 1.6;
          font-size: 0.9375rem;
        }
        .message {
          margin: 0;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
        .footer {
          display: flex;
          gap: 0.75rem;
          padding: 1rem 1.5rem 1.25rem;
          justify-content: flex-end;
          border-top: 1px solid var(--ecp-confirm-border, #e5e7eb);
        }
        .ecp-confirm-dialog__button {
          padding: 0.5rem 1.25rem;
          font-size: 0.9375rem;
          border-radius: 0.375rem;
          border: none;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.2s;
          min-width: 80px;
        }
        .ecp-confirm-dialog__button-cancel {
          background: var(--ecp-confirm-cancel-bg, #ffffff);
          color: var(--ecp-confirm-cancel-text, #374151);
          border: 1px solid var(--ecp-confirm-border, #e5e7eb);
        }
        .ecp-confirm-dialog__button-cancel:hover {
          background: var(--ecp-confirm-cancel-hover-bg, #f9fafb);
        }
        .ecp-confirm-dialog__button-confirm {
          background: var(--ecp-primary, #2196f3);
          color: white;
        }
        .ecp-confirm-dialog__button-confirm:hover {
          background: var(--ecp-primary-dark, #1976d2);
        }
        .ecp-confirm-dialog__button-confirm-danger {
          background: var(--ecp-danger, #ef4444);
        }
        .ecp-confirm-dialog__button-confirm-danger:hover {
          background: var(--ecp-danger-dark, #dc2626);
        }
        .ecp-confirm-dialog__button:focus {
          outline: 2px solid var(--ecp-primary, #2196f3);
          outline-offset: 2px;
        }
        /* Dark mode support */
        [data-theme="dark"] .dialog {
          background: var(--ecp-confirm-bg, #1f2937);
        }
        [data-theme="dark"] .title {
          color: var(--ecp-confirm-title-text, #f9fafb);
        }
        [data-theme="dark"] .message {
          color: var(--ecp-confirm-body-text, #d1d5db);
        }
        [data-theme="dark"] .ecp-confirm-dialog__button-cancel {
          background: var(--ecp-confirm-cancel-bg, #374151);
          color: var(--ecp-confirm-cancel-text, #f3f4f6);
        }
        [data-theme="dark"] .ecp-confirm-dialog__button-cancel:hover {
          background: var(--ecp-confirm-cancel-hover-bg, #4b5563);
        }
        /* Responsive */
        @media (max-width: 480px) {
          .dialog {
            max-width: 340px;
          }
          .header {
            padding: 1rem 1.25rem 0.5rem;
          }
          .body {
            padding: 1rem 1.25rem;
          }
          .footer {
            padding: 0.75rem 1.25rem 1rem;
          }
          .ecp-confirm-dialog__button {
            min-width: 70px;
          }
        }
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .backdrop, .dialog {
            animation: none;
          }
        }

/* ========== Data Table Component (Light DOM v2.0) ========== */
ecp-data-table {
  display: inline-block;
}

:host {
          display: block;
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
          position: relative;
        }
        .ecp-data-table__container {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          background: var(--ecp-data-table-bg, #ffffff);
          border: 1px solid var(--ecp-data-table-border, #dee2e6);
          border-radius: 0.5rem;
          overflow: hidden;
        }
        .toolbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1rem;
          gap: 1rem;
          border-bottom: 1px solid var(--ecp-data-table-border, #dee2e6);
          flex-wrap: wrap;
        }
        .toolbar-left {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          flex: 1;
          min-width: 200px;
        }
        .table-wrapper {
          overflow-x: auto;
          overflow-y: auto;
          max-height: 600px;
          position: relative;
        }
        table {
          width: 100%;
          border-collapse: collapse;
          font-size: 0.9375rem;
        }
        thead {
          position: sticky;
          top: 0;
          z-index: 10;
          background: var(--ecp-data-table-header-bg, #f8f9fa);
        }
        th {
          padding: 0.75rem 1rem;
          text-align: left;
          font-weight: 600;
          color: var(--ecp-data-table-header-text, #495057);
          border-bottom: 2px solid var(--ecp-data-table-border, #dee2e6);
          white-space: nowrap;
          user-select: none;
        }
        th.sortable {
          cursor: pointer;
          transition: background 0.2s;
        }
        th.sortable:hover {
          background: var(--ecp-data-table-header-hover-bg, #e9ecef);
        }
        .sort-indicator {
          display: inline-block;
          margin-left: 0.5rem;
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          opacity: 0.3;
          transition: opacity 0.2s;
        }
        .sort-indicator.sort-asc {
          border-bottom: 6px solid currentColor;
        }
        .sort-indicator.sort-desc {
          border-top: 6px solid currentColor;
        }
        tbody {
          background: var(--ecp-data-table-bg, #ffffff);
        }
        tr {
          transition: background 0.15s;
          border-bottom: 1px solid var(--ecp-data-table-border, #dee2e6);
        }
        tbody tr:hover {
          background: var(--ecp-data-table-row-hover-bg, #f8f9fa);
        }
        tbody tr.selected {
          background: var(--ecp-data-table-row-selected-bg, #e7f1ff);
        }
        td {
          padding: 0.75rem 1rem;
          color: var(--ecp-data-table-text, #212529);
          vertical-align: middle;
        }
        .td-checkbox {
          width: 40px;
          text-align: center;
        }
        input[type="checkbox"] {
          width: 18px;
          height: 18px;
          cursor: pointer;
        }
        .loading-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 20;
        }
        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 4px solid var(--ecp-data-table-border, #dee2e6);
          border-top-color: var(--ecp-primary, #007bff);
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .empty-state {
          padding: 3rem 1rem !important;
          text-align: center;
          color: var(--ecp-text-secondary, #6c757d);
        }
        .empty-icon {
          width: 64px;
          height: 64px;
          margin: 0 auto 1rem;
          opacity: 0.3;
        }
        .empty-message {
          font-size: 1rem;
          margin-bottom: 0.5rem;
        }
        .empty-hint {
          font-size: 0.875rem;
          opacity: 0.7;
        }
        @media (max-width: 768px) {
          .toolbar {
            flex-direction: column;
            align-items: stretch;
          }
          .toolbar-left {
            width: 100%;
          }
          th, td {
            padding: 0.5rem 0.75rem;
          }
        }

/* ========== Date Picker Component (Light DOM v2.0) ========== */
ecp-date-picker {
  display: inline-block;
}

.ecp-date-picker__container {
          position: relative;
          display: inline-block;
          width: 100%;
          font-family: inherit;
        }
        .input-wrapper {
          position: relative;
          display: flex;
          align-items: center;
        }
        .input {
          width: 100%;
          padding: 0.5rem 2.5rem 0.5rem 0.75rem;
          border: 1px solid var(--date-picker-input-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--date-picker-input-bg, #ffffff);
          color: var(--date-picker-input-text, #374151);
          font-size: 0.9375rem;
          cursor: pointer;
          font-family: inherit;
        }
        .input:focus {
          outline: 2px solid var(--date-picker-selected-bg, #3b82f6);
          outline-offset: 2px;
        }
        .input::placeholder {
          color: var(--date-picker-disabled, #9ca3af);
        }
        .calendar-icon {
          position: absolute;
          right: 0.75rem;
          width: 1.25rem;
          height: 1.25rem;
          color: var(--date-picker-text, #374151);
          pointer-events: none;
        }
        .calendar-container {
          position: absolute;
          top: calc(100% + 0.5rem);
          left: 0;
          background: var(--date-picker-calendar-bg, #ffffff);
          border: 1px solid var(--date-picker-calendar-border, #e5e7eb);
          border-radius: 0.5rem;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          z-index: 1000;
          padding: 1rem;
          min-width: 20rem;
          display: ${this._isOpen ? 'block' : 'none'};
        }
        .calendar-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .month-year-display {
          font-size: 1rem;
          font-weight: 600;
          color: var(--date-picker-header-text, #111827);
        }
        .nav-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          border: none;
          border-radius: 0.375rem;
          background: transparent;
          color: var(--date-picker-text, #374151);
          cursor: pointer;
          transition: background 0.2s;
        }
        .nav-button:hover {
          background: var(--date-picker-day-hover, #f3f4f6);
        }
        .nav-button:focus {
          outline: 2px solid var(--date-picker-selected-bg, #3b82f6);
          outline-offset: 2px;
        }
        .nav-icon {
          width: 1.25rem;
          height: 1.25rem;
        }
        .weekday-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 0.25rem;
          margin-bottom: 0.5rem;
        }
        .weekday-label {
          text-align: center;
          font-size: 0.75rem;
          font-weight: 600;
          padding: 0.5rem;
          color: var(--date-picker-weekday, #6b7280);
        }
        .days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 0.25rem;
        }
        .day-cell {
          aspect-ratio: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 0.375rem;
          font-size: 0.875rem;
          cursor: pointer;
          transition: all 0.2s;
          background: transparent;
          color: var(--date-picker-text, #374151);
        }
        .day-cell:hover:not(.day-cell-disabled) {
          background: var(--date-picker-day-hover, #f3f4f6);
        }
        .day-cell:focus {
          outline: 2px solid var(--date-picker-selected-bg, #3b82f6);
          outline-offset: 2px;
        }
        .day-cell-today {
          border: 2px solid var(--date-picker-today-border, #3b82f6);
        }
        .day-cell-selected {
          background: var(--date-picker-selected-bg, #3b82f6);
          color: var(--date-picker-selected-text, #ffffff);
        }
        .day-cell-selected:hover {
          background: var(--date-picker-selected-bg, #3b82f6);
        }
        .day-cell-other-month {
          color: var(--date-picker-other-month, #d1d5db);
        }
        .day-cell-disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
        }
        /* Dark mode */
        [data-theme="dark"] .input {
          background: var(--date-picker-input-bg, #374151);
          color: var(--date-picker-input-text, #d1d5db);
          border-color: var(--date-picker-input-border, #4b5563);
        }
        [data-theme="dark"] .calendar-container {
          background: var(--date-picker-calendar-bg, #1f2937);
          border-color: var(--date-picker-calendar-border, #374151);
        }
        [data-theme="dark"] .month-year-display {
          color: var(--date-picker-header-text, #f3f4f6);
        }
        [data-theme="dark"] .nav-button {
          color: var(--date-picker-text, #d1d5db);
        }
        [data-theme="dark"] .nav-button:hover {
          background: var(--date-picker-day-hover, #374151);
        }
        [data-theme="dark"] .weekday-label {
          color: var(--date-picker-weekday, #9ca3af);
        }
        [data-theme="dark"] .day-cell {
          color: var(--date-picker-text, #d1d5db);
        }
        [data-theme="dark"] .day-cell:hover:not(.day-cell-disabled) {
          background: var(--date-picker-day-hover, #374151);
        }
        [data-theme="dark"] .day-cell-today {
          border-color: var(--date-picker-today-border, #60a5fa);
        }
        [data-theme="dark"] .day-cell-selected {
          background: var(--date-picker-selected-bg, #2563eb);
        }
        [data-theme="dark"] .day-cell-other-month {
          color: var(--date-picker-other-month, #6b7280);
        }

/* ========== Empty State Component (Light DOM v2.0) ========== */
ecp-empty-state {
  display: inline-block;
}

.ecp-empty-state__container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 3rem 2rem;
          text-align: center;
        }
        .ecp-empty-state__icon {
          width: 4rem;
          height: 4rem;
          color: var(--empty-icon, #9ca3af);
          margin-bottom: 1rem;
        }
        .title {
          font-size: 1.125rem;
          font-weight: 600;
          color: var(--empty-title, #374151);
          margin-bottom: 0.5rem;
          font-family: inherit;
        }
        .description {
          font-size: 0.9375rem;
          color: var(--empty-description, #6b7280);
          margin-bottom: 1.5rem;
          max-width: 28rem;
          line-height: 1.5;
          font-family: inherit;
        }
        .action-slot {
          margin-top: 1rem;
        }
        /* Dark mode */
        [data-theme="dark"] .ecp-empty-state__icon {
          color: var(--empty-icon, #6b7280);
        }
        [data-theme="dark"] .title {
          color: var(--empty-title, #d1d5db);
        }
        [data-theme="dark"] .description {
          color: var(--empty-description, #9ca3af);
        }
        /* Responsive */
        @media (max-width: 480px) {
          .ecp-empty-state__container {
            padding: 2rem 1rem;
          }
          .ecp-empty-state__icon {
            width: 3rem;
            height: 3rem;
          }
          .title {
            font-size: 1rem;
          }
          .description {
            font-size: 0.875rem;
          }
        }

/* ========== Filter Select Component (Light DOM v2.0) ========== */
ecp-filter-select {
  display: inline-block;
}

:host {
          display: inline-flex;
          flex-direction: column;
          gap: 0.25rem;
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        }
        .ecp-filter-label {
          font-size: 0.875rem;
          font-weight: 500;
          color: var(--ecp-filter-label-color, var(--ecp-text-secondary, #6c757d));
          margin-bottom: 0.125rem;
        }
        .ecp-filter-select {
          padding: 0.5rem 2rem 0.5rem 0.75rem;
          font-size: 0.9375rem;
          line-height: 1.5;
          color: var(--ecp-filter-color, var(--ecp-text-primary, #212529));
          background: var(--ecp-filter-bg, var(--ecp-input-bg, #ffffff));
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
          background-repeat: no-repeat;
          background-position: right 0.5rem center;
          background-size: 1rem;
          border: 1px solid var(--ecp-filter-border, var(--ecp-border-color, #dee2e6));
          border-radius: 0.375rem;
          outline: none;
          appearance: none;
          cursor: pointer;
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .ecp-filter-select:focus {
          border-color: var(--ecp-filter-focus-border, var(--ecp-primary, #007bff));
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .ecp-filter-select:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          background-color: var(--ecp-bg-secondary, #f8f9fa);
        }
        /* Dark mode adjustments */
        @media (prefers-color-scheme: dark) {
          .ecp-filter-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
          }
        }
        /* When using dark theme class */
        :host-context(.dark-theme) .ecp-filter-select,
        :host-context([data-theme="dark"]) .ecp-filter-select {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
        }

/* ========== Font Controls Component (Light DOM v2.0) ========== */
ecp-font-controls {
  display: inline-block;
}

:host {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        }
        .ecp-font-controls-container {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.25rem 0.5rem;
          background: var(--ecp-font-controls-bg, transparent);
          border: 1px solid var(--ecp-font-controls-border, #dee2e6);
          border-radius: 0.375rem;
        }
        .ecp-font-label {
          font-size: 0.875rem;
          color: var(--ecp-font-controls-color, var(--ecp-text-secondary, #6c757d));
          margin-right: 0.25rem;
        }
        .ecp-font-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          padding: 0;
          background: var(--ecp-font-controls-button-bg, transparent);
          border: 1px solid var(--ecp-font-controls-border, #dee2e6);
          border-radius: 0.25rem;
          color: var(--ecp-font-controls-color, var(--ecp-text-primary, #212529));
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          user-select: none;
        }
        .ecp-font-button:hover:not(:disabled) {
          background: var(--ecp-font-controls-button-hover-bg, var(--ecp-bg-tertiary, #e9ecef));
          border-color: var(--ecp-primary, #007bff);
        }
        .ecp-font-button:active:not(:disabled) {
          transform: scale(0.95);
        }
        .ecp-font-button:disabled {
          opacity: 0.4;
          cursor: not-allowed;
        }
        .ecp-font-size-display {
          min-width: 3rem;
          text-align: center;
          font-size: 0.875rem;
          font-weight: 600;
          color: var(--ecp-font-controls-color, var(--ecp-text-primary, #212529));
        }
        /* Accessibility */
        .ecp-font-button:focus-visible {
          outline: 2px solid var(--ecp-primary, #007bff);
          outline-offset: 2px;
        }

/* ========== Form Field Component (Light DOM v2.0) ========== */
ecp-form-field {
  display: inline-block;
}

.ecp-form-field__container {
          display: flex;
          flex-direction: column;
          gap: 0.375rem;
          width: 100%;
        }
        .ecp-form-field__label {
          display: flex;
          align-items: center;
          gap: 0.25rem;
          font-size: 0.875rem;
          font-weight: 500;
          color: var(--form-label-text, #374151);
          margin-bottom: 0.25rem;
          font-family: inherit;
        }
        .required-indicator {
          color: var(--form-required, #ef4444);
          margin-left: 0.125rem;
        }
        .input-wrapper {
          position: relative;
          width: 100%;
        }
        .help-text {
          font-size: 0.8125rem;
          color: var(--form-help-text, #6b7280);
          line-height: 1.4;
          font-family: inherit;
        }
        .error-text {
          font-size: 0.8125rem;
          color: var(--form-error-text, #ef4444);
          line-height: 1.4;
          display: flex;
          align-items: center;
          gap: 0.25rem;
          font-family: inherit;
        }
        .error-icon {
          width: 1rem;
          height: 1rem;
          flex-shrink: 0;
        }
        .success-text {
          font-size: 0.8125rem;
          color: var(--form-success-text, #10b981);
          line-height: 1.4;
          font-family: inherit;
        }
        .warning-text {
          font-size: 0.8125rem;
          color: var(--form-warning-text, #f59e0b);
          line-height: 1.4;
          font-family: inherit;
        }
        /* Dark mode */
        [data-theme="dark"] .ecp-form-field__label {
          color: var(--form-label-text, #d1d5db);
        }
        [data-theme="dark"] .help-text {
          color: var(--form-help-text, #9ca3af);
        }
        [data-theme="dark"] .error-text {
          color: var(--form-error-text, #f87171);
        }
        [data-theme="dark"] .success-text {
          color: var(--form-success-text, #34d399);
        }
        [data-theme="dark"] .warning-text {
          color: var(--form-warning-text, #fbbf24);
        }
        [data-theme="dark"] .required-indicator {
          color: var(--form-required, #f87171);
        }
        /* Responsive */
        @media (max-width: 480px) {
          .ecp-form-field__label {
            font-size: 0.8125rem;
          }
          .help-text,
          .error-text,
          .success-text,
          .warning-text {
            font-size: 0.75rem;
          }
        }

/* ========== Hamburger Menu Component (Light DOM v2.0) ========== */
ecp-hamburger-menu {
  display: inline-block;
}

:host {
          display: inline-block;
          position: relative;
        }
        .hamburger-btn {
          background: var(--ecp-hamburger-bg, #ffffff);
          border: 1px solid var(--ecp-border-color, #dee2e6);
          border-radius: var(--ecp-radius-md, 0.375rem);
          padding: 0.5rem 1rem;
          font-size: 1.25rem;
          cursor: pointer;
          transition: all 0.15s ease;
          color: var(--ecp-text-primary, #212529);
          line-height: 1;
        }
        .hamburger-btn:hover {
          background: var(--ecp-hamburger-hover, #f8f9fa);
          border-color: var(--ecp-primary, #007bff);
        }
        .hamburger-dropdown {
          position: absolute;
          top: calc(100% + 0.25rem);
          right: 0;
          background: var(--ecp-hamburger-bg, #ffffff);
          border: 1px solid var(--ecp-border-color, #dee2e6);
          border-radius: 0.5rem;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                      0 4px 6px -2px rgba(0, 0, 0, 0.05);
          min-width: 250px;
          max-width: 350px;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.2s ease;
        }
        .hamburger-dropdown.active {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        .hamburger-section {
          padding: 1rem;
          border-bottom: 1px solid var(--ecp-border-color-light, #e9ecef);
        }
        .hamburger-section:last-child {
          border-bottom: none;
        }
        .hamburger-section-title {
          font-size: 0.75rem;
          font-weight: 600;
          text-transform: uppercase;
          color: var(--ecp-text-secondary, #6c757d);
          margin-bottom: 0.5rem;
          letter-spacing: 0.05em;
        }
        .hamburger-link {
          display: block;
          padding: 0.5rem 1rem;
          color: var(--ecp-text-primary, #212529);
          text-decoration: none;
          border-radius: 0.25rem;
          transition: all 0.15s ease;
          font-size: 0.875rem;
        }
        .hamburger-link:hover {
          background: var(--ecp-bg-secondary, #f8f9fa);
          color: var(--ecp-primary, #007bff);
        }
        .module-badge {
          display: inline-block;
          background: var(--ecp-primary, #007bff);
          color: white;
          padding: 0.125rem 0.5rem;
          border-radius: 1rem;
          font-size: 0.625rem;
          font-weight: 600;
          margin-left: 0.5rem;
        }

/* ========== Modal Component (Light DOM v2.0) ========== */
ecp-modal {
  display: inline-block;
}

:host {
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        }
        .ecp-modal-container {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1050;
        }
        .ecp-modal-container.show {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .ecp-modal-backdrop {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--ecp-modal-backdrop-bg, rgba(0, 0, 0, 0.5));
          animation: fadeIn 0.2s ease;
        }
        .ecp-modal {
          position: relative;
          display: flex;
          flex-direction: column;
          max-height: 90vh;
          background: var(--ecp-modal-bg, var(--ecp-bg-primary, #ffffff));
          border-radius: var(--ecp-modal-border-radius, 0.5rem);
          box-shadow: var(--ecp-modal-shadow, 0 10px 40px rgba(0, 0, 0, 0.2));
          animation: slideIn 0.3s ease;
          outline: none;
        }
        .ecp-modal.ecp-modal--sm {
          width: 90%;
          max-width: 400px;
        }
        .ecp-modal.ecp-modal--md {
          width: 90%;
          max-width: 600px;
        }
        .ecp-modal.ecp-modal--lg {
          width: 90%;
          max-width: 900px;
        }
        .ecp-modal.ecp-modal--xl {
          width: 90%;
          max-width: 1200px;
        }
        .ecp-modal-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.25rem 1.5rem;
          border-bottom: 1px solid var(--ecp-border-color, #dee2e6);
        }
        .ecp-modal-title {
          margin: 0;
          font-size: 1.25rem;
          font-weight: 600;
          color: var(--ecp-modal-color, var(--ecp-text-primary, #212529));
        }
        .ecp-modal-close {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          padding: 0;
          background: transparent;
          border: none;
          border-radius: 0.25rem;
          color: var(--ecp-text-secondary, #6c757d);
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .ecp-modal-close:hover {
          background: var(--ecp-bg-tertiary, #e9ecef);
          color: var(--ecp-text-primary, #212529);
        }
        .ecp-modal-close svg {
          width: 1.25rem;
          height: 1.25rem;
        }
        .ecp-modal-body {
          flex: 1;
          padding: 1.5rem;
          overflow-y: auto;
          color: var(--ecp-modal-color, var(--ecp-text-primary, #212529));
        }
        .ecp-modal-footer {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 0.5rem;
          padding: 1rem 1.5rem;
          border-top: 1px solid var(--ecp-border-color, #dee2e6);
        }
        .ecp-modal-footer:empty {
          display: none;
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateY(-50px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        /* Accessibility */
        .ecp-modal:focus {
          outline: none;
        }

/* ========== Notification Component (Light DOM v2.0) ========== */
ecp-notification {
  display: inline-block;
}

.notification {
          display: flex;
          align-items: flex-start;
          gap: 0.75rem;
          padding: 1rem 1.25rem;
          border-radius: 0.5rem;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
          pointer-events: auto;
          animation: slide-in 0.3s ease-out;
          max-width: 24rem;
          font-family: inherit;
        }
        @keyframes slide-in {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
        @keyframes slide-out {
          from {
            transform: translateX(0);
            opacity: 1;
          }
          to {
            transform: translateX(100%);
            opacity: 0;
          }
        }
        .ecp-notification__icon {
          width: 1.5rem;
          height: 1.5rem;
          flex-shrink: 0;
        }
        .content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
        }
        .title {
          font-size: 0.9375rem;
          font-weight: 600;
          line-height: 1.4;
        }
        .message {
          font-size: 0.875rem;
          line-height: 1.5;
        }
        .close-button {
          width: 1.25rem;
          height: 1.25rem;
          border: none;
          background: transparent;
          cursor: pointer;
          flex-shrink: 0;
          padding: 0;
          color: inherit;
          opacity: 0.7;
          transition: opacity 0.2s;
        }
        .close-button:hover {
          opacity: 1;
        }
        .close-button:focus {
          outline: 2px solid currentColor;
          outline-offset: 2px;
        }
        .close-icon {
          width: 100%;
          height: 100%;
        }
        /* Type variants */
        .notification-info {
          background: var(--notification-info-bg, #eff6ff);
          border-left: 4px solid var(--notification-info-border, #3b82f6);
          color: var(--notification-info-text, #1e40af);
        }
        .notification-success {
          background: var(--notification-success-bg, #f0fdf4);
          border-left: 4px solid var(--notification-success-border, #10b981);
          color: var(--notification-success-text, #065f46);
        }
        .notification-warning {
          background: var(--notification-warning-bg, #fffbeb);
          border-left: 4px solid var(--notification-warning-border, #f59e0b);
          color: var(--notification-warning-text, #92400e);
        }
        .notification-error {
          background: var(--notification-error-bg, #fef2f2);
          border-left: 4px solid var(--notification-error-border, #ef4444);
          color: var(--notification-error-text, #991b1b);
        }
        /* Dark mode */
        [data-theme="dark"] .notification-info {
          background: var(--notification-info-bg, #1e3a8a);
          border-left-color: var(--notification-info-border, #60a5fa);
          color: var(--notification-info-text, #dbeafe);
        }
        [data-theme="dark"] .notification-success {
          background: var(--notification-success-bg, #064e3b);
          border-left-color: var(--notification-success-border, #34d399);
          color: var(--notification-success-text, #d1fae5);
        }
        [data-theme="dark"] .notification-warning {
          background: var(--notification-warning-bg, #78350f);
          border-left-color: var(--notification-warning-border, #fbbf24);
          color: var(--notification-warning-text, #fef3c7);
        }
        [data-theme="dark"] .notification-error {
          background: var(--notification-error-bg, #7f1d1d);
          border-left-color: var(--notification-error-border, #f87171);
          color: var(--notification-error-text, #fee2e2);
        }
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .notification {
            animation-duration: 0.01ms;
          }
        }

/* ========== Pagination Component (Light DOM v2.0) ========== */
ecp-pagination {
  display: inline-block;
}

.ecp-pagination__container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          flex-wrap: wrap;
          font-family: inherit;
        }
        .pagination-controls {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .page-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 2.5rem;
          height: 2.5rem;
          padding: 0.5rem;
          border: 1px solid var(--pagination-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--pagination-bg, #ffffff);
          color: var(--pagination-text, #374151);
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .page-button:hover:not(:disabled):not(.page-button-active) {
          background: var(--pagination-hover-bg, #f3f4f6);
        }
        .page-button:focus {
          outline: 2px solid var(--pagination-active-bg, #3b82f6);
          outline-offset: 2px;
        }
        .page-button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        .page-button-active {
          background: var(--pagination-active-bg, #3b82f6);
          color: var(--pagination-active-text, #ffffff);
          border-color: var(--pagination-active-border, #3b82f6);
        }
        .page-ellipsis {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 2.5rem;
          height: 2.5rem;
          color: var(--pagination-ellipsis, #6b7280);
          font-size: 0.875rem;
        }
        .page-info {
          font-size: 0.875rem;
          color: var(--pagination-info-text, #6b7280);
        }
        .page-size-selector {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          color: var(--pagination-text, #374151);
        }
        .page-size-selector select {
          padding: 0.5rem;
          border: 1px solid var(--pagination-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--pagination-select-bg, #ffffff);
          color: var(--pagination-text, #374151);
          cursor: pointer;
          font-family: inherit;
          font-size: 0.875rem;
        }
        .page-size-selector select:focus {
          outline: 2px solid var(--pagination-active-bg, #3b82f6);
          outline-offset: 2px;
        }
        .ecp-pagination__icon {
          width: 1.25rem;
          height: 1.25rem;
        }
        /* Dark mode */
        [data-theme="dark"] .page-button {
          background: var(--pagination-bg, #1f2937);
          color: var(--pagination-text, #d1d5db);
          border-color: var(--pagination-border, #374151);
        }
        [data-theme="dark"] .page-button:hover:not(:disabled):not(.page-button-active) {
          background: var(--pagination-hover-bg, #374151);
        }
        [data-theme="dark"] .page-button-active {
          background: var(--pagination-active-bg, #2563eb);
          color: var(--pagination-active-text, #ffffff);
          border-color: var(--pagination-active-border, #2563eb);
        }
        [data-theme="dark"] .page-ellipsis {
          color: var(--pagination-ellipsis, #9ca3af);
        }
        [data-theme="dark"] .page-info {
          color: var(--pagination-info-text, #9ca3af);
        }
        [data-theme="dark"] .page-size-selector {
          color: var(--pagination-text, #d1d5db);
        }
        [data-theme="dark"] .page-size-selector select {
          background: var(--pagination-select-bg, #374151);
          color: var(--pagination-text, #d1d5db);
          border-color: var(--pagination-border, #4b5563);
        }
        /* Responsive */
        @media (max-width: 640px) {
          .ecp-pagination__container {
            flex-direction: column;
            align-items: stretch;
          }
          .pagination-controls {
            justify-content: center;
          }
          .page-info,
          .page-size-selector {
            justify-content: center;
          }
        }

/* ========== Preferences Modal Component (Light DOM v2.0) ========== */
ecp-preferences-modal {
  display: inline-block;
}

@keyframes fade-in {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slide-up {
          from {
            transform: translateY(2rem);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .overlay {
          position: fixed;
          inset: 0;
          background: var(--preferences-overlay, rgba(0, 0, 0, 0.5));
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: fade-in 0.2s ease-out;
          font-family: inherit;
        }
        .modal {
          background: var(--preferences-bg, #ffffff);
          border-radius: 0.75rem;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
          max-width: 42rem;
          max-height: 90vh;
          width: 90%;
          overflow: hidden;
          animation: slide-up 0.3s ease-out;
        }
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.5rem;
          border-bottom: 1px solid var(--preferences-border, #e5e7eb);
        }
        .title {
          font-size: 1.25rem;
          font-weight: 600;
          color: var(--preferences-text, #374151);
        }
        .close-button {
          width: 2rem;
          height: 2rem;
          border: none;
          border-radius: 0.375rem;
          background: transparent;
          color: var(--preferences-text, #6b7280);
          cursor: pointer;
          transition: background 0.2s;
        }
        .close-button:hover {
          background: var(--preferences-cancel-hover, #f3f4f6);
        }
        .close-button:focus {
          outline: 2px solid var(--preferences-button-bg, #3b82f6);
          outline-offset: 2px;
        }
        .close-icon {
          width: 1.5rem;
          height: 1.5rem;
        }
        .content {
          padding: 1.5rem;
          overflow-y: auto;
          max-height: calc(90vh - 10rem);
        }
        .section {
          margin-bottom: 1.5rem;
        }
        .section:last-child {
          margin-bottom: 0;
        }
        .section-title {
          font-size: 1rem;
          font-weight: 600;
          color: var(--preferences-text, #374151);
          margin-bottom: 0.75rem;
        }
        .setting-group {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        .setting-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.75rem;
          border-radius: 0.5rem;
          transition: background 0.2s;
        }
        .setting-item:hover {
          background: var(--preferences-cancel-hover, #f9fafb);
        }
        .setting-label {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          flex: 1;
        }
        .setting-name {
          font-size: 0.9375rem;
          font-weight: 500;
          color: var(--preferences-text, #374151);
        }
        .setting-description {
          font-size: 0.8125rem;
          color: var(--preferences-description, #6b7280);
        }
        .setting-control {
          margin-left: 1rem;
        }
        .toggle-switch {
          position: relative;
          display: inline-block;
          width: 3rem;
          height: 1.5rem;
        }
        .toggle-input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        .toggle-slider {
          position: absolute;
          cursor: pointer;
          inset: 0;
          background: #cbd5e1;
          transition: 0.3s;
          border-radius: 9999px;
        }
        .toggle-slider:before {
          position: absolute;
          content: "";
          height: 1.125rem;
          width: 1.125rem;
          left: 0.1875rem;
          bottom: 0.1875rem;
          background: white;
          transition: 0.3s;
          border-radius: 50%;
        }
        .toggle-input:checked + .toggle-slider {
          background: var(--preferences-button-bg, #3b82f6);
        }
        .toggle-input:checked + .toggle-slider:before {
          transform: translateX(1.5rem);
        }
        .toggle-input:focus + .toggle-slider {
          box-shadow: 0 0 1px var(--preferences-button-bg, #3b82f6);
        }
        select {
          padding: 0.5rem 0.75rem;
          border: 1px solid var(--preferences-border, #d1d5db);
          border-radius: 0.375rem;
          background: var(--preferences-bg, #ffffff);
          color: var(--preferences-text, #374151);
          font-size: 0.875rem;
          cursor: pointer;
          font-family: inherit;
        }
        select:focus {
          outline: 2px solid var(--preferences-button-bg, #3b82f6);
          outline-offset: 2px;
        }
        .footer {
          display: flex;
          gap: 0.75rem;
          justify-content: flex-end;
          padding: 1.5rem;
          border-top: 1px solid var(--preferences-border, #e5e7eb);
        }
        .ecp-preferences-modal__button {
          padding: 0.625rem 1.25rem;
          border: 1px solid;
          border-radius: 0.5rem;
          font-size: 0.9375rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .ecp-preferences-modal__button-cancel {
          background: var(--preferences-cancel-bg, transparent);
          border-color: var(--preferences-cancel-border, #d1d5db);
          color: var(--preferences-cancel-text, #374151);
        }
        .ecp-preferences-modal__button-cancel:hover {
          background: var(--preferences-cancel-hover, #f3f4f6);
        }
        .ecp-preferences-modal__button-save {
          background: var(--preferences-button-bg, #3b82f6);
          border-color: var(--preferences-button-bg, #3b82f6);
          color: var(--preferences-button-text, #ffffff);
        }
        .ecp-preferences-modal__button-save:hover {
          background: var(--preferences-button-hover, #2563eb);
        }
        .ecp-preferences-modal__button:focus {
          outline: 2px solid var(--preferences-button-bg, #3b82f6);
          outline-offset: 2px;
        }
        /* Dark mode */
        [data-theme="dark"] .overlay {
          background: var(--preferences-overlay, rgba(0, 0, 0, 0.7));
        }
        [data-theme="dark"] .modal {
          background: var(--preferences-bg, #1f2937);
        }
        [data-theme="dark"] .title,
        [data-theme="dark"] .section-title,
        [data-theme="dark"] .setting-name {
          color: var(--preferences-text, #d1d5db);
        }
        [data-theme="dark"] .setting-description {
          color: var(--preferences-description, #9ca3af);
        }
        [data-theme="dark"] .close-button:hover,
        [data-theme="dark"] .setting-item:hover {
          background: var(--preferences-cancel-hover, #374151);
        }
        [data-theme="dark"] select {
          background: var(--preferences-bg, #374151);
          color: var(--preferences-text, #d1d5db);
          border-color: var(--preferences-border, #4b5563);
        }
        [data-theme="dark"] .ecp-preferences-modal__button-cancel {
          color: var(--preferences-cancel-text, #d1d5db);
          border-color: var(--preferences-cancel-border, #4b5563);
        }
        [data-theme="dark"] .ecp-preferences-modal__button-cancel:hover {
          background: var(--preferences-cancel-hover, #374151);
        }
        /* Responsive */
        @media (max-width: 640px) {
          .modal {
            width: 95%;
            max-height: 95vh;
          }
          .setting-item {
            flex-direction: column;
            align-items: flex-start;
          }
          .setting-control {
            margin-left: 0;
            margin-top: 0.5rem;
            width: 100%;
          }
          select {
            width: 100%;
          }
        }

/* ========== Progress Bar Component (Light DOM v2.0) ========== */
ecp-progress-bar {
  display: inline-block;
}

.ecp-progress-bar__container {
          display: block;
          width: 100%;
        }
        .ecp-progress-bar__label {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
          color: var(--progress-label-text, #6b7280);
          font-family: inherit;
        }
        .ecp-progress-bar__label-text {
          flex: 1;
        }
        .percentage {
          font-weight: 500;
          color: var(--progress-percentage-text, #374151);
        }
        .track {
          width: 100%;
          background: var(--progress-track, #e5e7eb);
          border-radius: 9999px;
          overflow: hidden;
          position: relative;
        }
        .track-small {
          height: 0.25rem;
        }
        .track-medium {
          height: 0.5rem;
        }
        .track-large {
          height: 0.75rem;
        }
        .bar {
          height: 100%;
          border-radius: 9999px;
          transition: width 0.3s ease;
          will-change: width;
        }
        .bar-indeterminate {
          width: 30% !important;
          animation: progress-indeterminate 1.5s ease-in-out infinite;
        }
        @keyframes progress-indeterminate {
          0% {
            transform: translateX(-100%);
          }
          50% {
            transform: translateX(200%);
          }
          100% {
            transform: translateX(-100%);
          }
        }
        /* Color variants - Primary */
        .bar-primary {
          background: var(--ecp-primary, #2196f3);
        }
        .track:has(.bar-primary) {
          background: var(--ecp-primary-light, #e3f2fd);
        }
        /* Color variants - Success */
        .bar-success {
          background: var(--ecp-success, #10b981);
        }
        .track:has(.bar-success) {
          background: var(--ecp-success-light, #d1fae5);
        }
        /* Color variants - Warning */
        .bar-warning {
          background: var(--ecp-warning, #f59e0b);
        }
        .track:has(.bar-warning) {
          background: var(--ecp-warning-light, #fef3c7);
        }
        /* Color variants - Danger */
        .bar-danger {
          background: var(--ecp-danger, #ef4444);
        }
        .track:has(.bar-danger) {
          background: var(--ecp-danger-light, #fee2e2);
        }
        /* Color variants - Neutral */
        .bar-neutral {
          background: var(--ecp-neutral, #6b7280);
        }
        .track:has(.bar-neutral) {
          background: var(--ecp-neutral-light, #f3f4f6);
        }
        /* Dark mode */
        [data-theme="dark"] .bar-primary {
          background: var(--ecp-primary, #60a5fa);
        }
        [data-theme="dark"] .track:has(.bar-primary) {
          background: var(--ecp-primary-light, #1e3a8a);
        }
        [data-theme="dark"] .bar-success {
          background: var(--ecp-success, #34d399);
        }
        [data-theme="dark"] .track:has(.bar-success) {
          background: var(--ecp-success-light, #064e3b);
        }
        [data-theme="dark"] .bar-warning {
          background: var(--ecp-warning, #fbbf24);
        }
        [data-theme="dark"] .track:has(.bar-warning) {
          background: var(--ecp-warning-light, #78350f);
        }
        [data-theme="dark"] .bar-danger {
          background: var(--ecp-danger, #f87171);
        }
        [data-theme="dark"] .track:has(.bar-danger) {
          background: var(--ecp-danger-light, #7f1d1d);
        }
        [data-theme="dark"] .bar-neutral {
          background: var(--ecp-neutral, #9ca3af);
        }
        [data-theme="dark"] .track:has(.bar-neutral) {
          background: var(--ecp-neutral-light, #374151);
        }
        [data-theme="dark"] .ecp-progress-bar__label {
          color: var(--progress-label-text, #9ca3af);
        }
        [data-theme="dark"] .percentage {
          color: var(--progress-percentage-text, #d1d5db);
        }
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .bar {
            transition: none;
          }
          .bar-indeterminate {
            animation-duration: 3s;
          }
        }

/* ========== Search Filter Component (Light DOM v2.0) ========== */
ecp-search-filter {
  display: inline-block;
}

.ecp-search-filter__container {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          font-family: inherit;
        }
        .search-input-wrapper {
          position: relative;
          display: flex;
          align-items: center;
        }
        .search-input {
          width: 100%;
          padding: 0.625rem 3rem 0.625rem 2.5rem;
          border: 1px solid var(--search-filter-border, #d1d5db);
          border-radius: 0.5rem;
          background: var(--search-filter-bg, #ffffff);
          color: var(--search-filter-text, #374151);
          font-size: 0.9375rem;
          transition: border 0.2s;
          font-family: inherit;
        }
        .search-input:focus {
          outline: none;
          border-color: var(--search-filter-focus-border, #3b82f6);
        }
        .search-input::placeholder {
          color: var(--search-filter-placeholder, #9ca3af);
        }
        .search-icon {
          position: absolute;
          left: 0.75rem;
          width: 1.25rem;
          height: 1.25rem;
          color: var(--search-filter-icon, #6b7280);
          pointer-events: none;
        }
        .clear-button {
          position: absolute;
          right: 0.75rem;
          display: ${hasSearch ? 'inline-flex' : 'none'};
          align-items: center;
          justify-content: center;
          width: 1.5rem;
          height: 1.5rem;
          border: none;
          border-radius: 0.25rem;
          background: transparent;
          color: var(--search-filter-icon, #6b7280);
          cursor: pointer;
          transition: background 0.2s;
        }
        .clear-button:hover {
          background: var(--search-filter-clear-hover, #f3f4f6);
        }
        .clear-button:focus {
          outline: 2px solid var(--search-filter-focus-border, #3b82f6);
          outline-offset: 2px;
        }
        .clear-icon {
          width: 1rem;
          height: 1rem;
        }
        .filter-tags-container {
          display: ${hasFilters ? 'flex' : 'none'};
          flex-wrap: wrap;
          gap: 0.5rem;
          align-items: center;
        }
        .filter-tag-label {
          font-size: 0.875rem;
          font-weight: 500;
          color: var(--search-filter-label, #6b7280);
        }
        .filter-tag {
          display: inline-flex;
          align-items: center;
          gap: 0.375rem;
          padding: 0.375rem 0.75rem;
          border-radius: 9999px;
          background: var(--chip-primary-bg, #e3f2fd);
          color: var(--chip-primary-text, #1976d2);
          font-size: 0.875rem;
          font-weight: 500;
        }
        .filter-tag-content {
          display: flex;
          gap: 0.25rem;
        }
        .filter-tag-label-text {
          font-weight: 600;
        }
        .remove-filter-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 9999px;
          border: none;
          background: transparent;
          cursor: pointer;
          transition: background 0.2s;
          padding: 0;
          color: inherit;
        }
        .remove-filter-button:hover {
          background: rgba(0, 0, 0, 0.1);
        }
        .remove-filter-button:focus {
          outline: 2px solid currentColor;
          outline-offset: 2px;
        }
        .ecp-search-filter__remove-icon {
          width: 0.875rem;
          height: 0.875rem;
        }
        .clear-all-button {
          padding: 0.375rem 0.75rem;
          border: 1px solid var(--search-filter-button-border, #d1d5db);
          border-radius: 0.375rem;
          background: transparent;
          color: var(--search-filter-button-text, #374151);
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          font-family: inherit;
        }
        .clear-all-button:hover {
          background: var(--search-filter-button-hover-bg, #f3f4f6);
        }
        .clear-all-button:focus {
          outline: 2px solid var(--search-filter-focus-border, #3b82f6);
          outline-offset: 2px;
        }
        /* Dark mode */
        [data-theme="dark"] .search-input {
          background: var(--search-filter-bg, #374151);
          color: var(--search-filter-text, #d1d5db);
          border-color: var(--search-filter-border, #4b5563);
        }
        [data-theme="dark"] .search-input:focus {
          border-color: var(--search-filter-focus-border, #60a5fa);
        }
        [data-theme="dark"] .search-icon,
        [data-theme="dark"] .clear-button {
          color: var(--search-filter-icon, #9ca3af);
        }
        [data-theme="dark"] .clear-button:hover {
          background: var(--search-filter-clear-hover, #4b5563);
        }
        [data-theme="dark"] .filter-tag-label {
          color: var(--search-filter-label, #9ca3af);
        }
        [data-theme="dark"] .clear-all-button {
          color: var(--search-filter-button-text, #d1d5db);
          border-color: var(--search-filter-button-border, #6b7280);
        }
        [data-theme="dark"] .clear-all-button:hover {
          background: var(--search-filter-button-hover-bg, #4b5563);
        }
        /* Responsive */
        @media (max-width: 640px) {
          .filter-tags-container {
            flex-direction: column;
            align-items: stretch;
          }
        }

/* ========== Search Input Component (Light DOM v2.0) ========== */
ecp-search-input {
  display: inline-block;
}

:host {
          display: inline-block;
          width: 100%;
          max-width: 400px;
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        }
        .ecp-search-container {
          position: relative;
          display: flex;
          align-items: center;
          width: 100%;
        }
        .ecp-search-icon {
          position: absolute;
          left: 0.75rem;
          width: 1.25rem;
          height: 1.25rem;
          color: var(--ecp-search-icon-color, var(--ecp-text-secondary, #6c757d));
          pointer-events: none;
        }
        .ecp-search-input {
          width: 100%;
          padding: 0.5rem 2.5rem 0.5rem 2.5rem;
          font-size: 0.9375rem;
          line-height: 1.5;
          color: var(--ecp-search-color, var(--ecp-text-primary, #212529));
          background: var(--ecp-search-bg, var(--ecp-input-bg, #ffffff));
          border: 1px solid var(--ecp-search-border, var(--ecp-border-color, #dee2e6));
          border-radius: 0.375rem;
          outline: none;
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .ecp-search-input:focus {
          border-color: var(--ecp-search-focus-border, var(--ecp-primary, #007bff));
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .ecp-search-input::placeholder {
          color: var(--ecp-text-tertiary, #adb5bd);
        }
        .ecp-search-clear {
          position: absolute;
          right: 0.5rem;
          display: none;
          align-items: center;
          justify-content: center;
          width: 1.5rem;
          height: 1.5rem;
          padding: 0;
          background: transparent;
          border: none;
          border-radius: 0.25rem;
          color: var(--ecp-text-secondary, #6c757d);
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .ecp-search-clear:hover {
          background: var(--ecp-bg-tertiary, #e9ecef);
          color: var(--ecp-text-primary, #212529);
        }
        .ecp-search-clear:focus-visible {
          outline: 2px solid var(--ecp-primary, #007bff);
          outline-offset: 2px;
        }
        .ecp-search-clear svg {
          width: 1rem;
          height: 1rem;
        }

/* ========== Skeleton Component (Light DOM v2.0) ========== */
ecp-skeleton {
  display: inline-block;
}

.skeleton {
          background: var(--skeleton-bg, #e5e7eb);
          overflow: hidden;
          position: relative;
          will-change: transform;
        }
        .skeleton::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            90deg,
            transparent,
            var(--skeleton-highlight, #f3f4f6),
            transparent
          );
          animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
        /* Shape variants */
        .skeleton-text {
          width: 100%;
          border-radius: 0.25rem;
        }
        .skeleton-circle {
          width: 3rem;
          height: 3rem;
          border-radius: 9999px;
        }
        .skeleton-rectangle {
          width: 100%;
          height: 8rem;
          border-radius: 0.5rem;
        }
        /* Size variants (for text shape) */
        .skeleton-text.skeleton-small {
          height: 0.75rem;
        }
        .skeleton-text.skeleton-medium {
          height: 1rem;
        }
        .skeleton-text.skeleton-large {
          height: 1.5rem;
        }
        /* Dark mode */
        [data-theme="dark"] .skeleton {
          background: var(--skeleton-bg, #374151);
        }
        [data-theme="dark"] .skeleton::after {
          background: linear-gradient(
            90deg,
            transparent,
            var(--skeleton-highlight, #4b5563),
            transparent
          );
        }
        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .skeleton::after {
            animation-duration: 3s;
          }
        }

/* ========== Status Badge Component (Light DOM v2.0) ========== */
ecp-status-badge {
  display: inline-block;
}

.ecp-status-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 0.375rem;
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 500;
          line-height: 1.25;
          font-family: inherit;
          transition: all 0.2s;
          white-space: nowrap;
          border: 1px solid transparent;
        }
        /* Size variants */
        .ecp-status-badge-small {
          padding: 0.125rem 0.5rem;
          font-size: 0.6875rem;
          gap: 0.25rem;
        }
        .ecp-status-badge-medium {
          padding: 0.25rem 0.75rem;
          font-size: 0.75rem;
          gap: 0.375rem;
        }
        .ecp-status-badge-large {
          padding: 0.375rem 1rem;
          font-size: 0.875rem;
          gap: 0.5rem;
        }
        /* Color variants - Success */
        .ecp-status-badge-success.ecp-status-badge-filled {
          background: var(--ecp-success, #10b981);
          color: white;
        }
        .ecp-status-badge-success.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-success, #10b981);
          border-color: var(--ecp-success, #10b981);
        }
        .ecp-status-badge-success.ecp-status-badge-subtle {
          background: var(--ecp-success-light, #d1fae5);
          color: var(--ecp-success, #10b981);
        }
        /* Color variants - Warning */
        .ecp-status-badge-warning.ecp-status-badge-filled {
          background: var(--ecp-warning, #f59e0b);
          color: white;
        }
        .ecp-status-badge-warning.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-warning, #f59e0b);
          border-color: var(--ecp-warning, #f59e0b);
        }
        .ecp-status-badge-warning.ecp-status-badge-subtle {
          background: var(--ecp-warning-light, #fef3c7);
          color: var(--ecp-warning, #f59e0b);
        }
        /* Color variants - Danger */
        .ecp-status-badge-danger.ecp-status-badge-filled {
          background: var(--ecp-danger, #ef4444);
          color: white;
        }
        .ecp-status-badge-danger.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-danger, #ef4444);
          border-color: var(--ecp-danger, #ef4444);
        }
        .ecp-status-badge-danger.ecp-status-badge-subtle {
          background: var(--ecp-danger-light, #fee2e2);
          color: var(--ecp-danger, #ef4444);
        }
        /* Color variants - Info */
        .ecp-status-badge-info.ecp-status-badge-filled {
          background: var(--ecp-info, #3b82f6);
          color: white;
        }
        .ecp-status-badge-info.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-info, #3b82f6);
          border-color: var(--ecp-info, #3b82f6);
        }
        .ecp-status-badge-info.ecp-status-badge-subtle {
          background: var(--ecp-info-light, #dbeafe);
          color: var(--ecp-info, #3b82f6);
        }
        /* Color variants - Neutral */
        .ecp-status-badge-neutral.ecp-status-badge-filled {
          background: var(--ecp-neutral, #6b7280);
          color: white;
        }
        .ecp-status-badge-neutral.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-neutral, #6b7280);
          border-color: var(--ecp-neutral, #6b7280);
        }
        .ecp-status-badge-neutral.ecp-status-badge-subtle {
          background: var(--ecp-neutral-light, #f3f4f6);
          color: var(--ecp-neutral, #6b7280);
        }
        /* Color variants - Primary */
        .ecp-status-badge-primary.ecp-status-badge-filled {
          background: var(--ecp-primary, #2196f3);
          color: white;
        }
        .ecp-status-badge-primary.ecp-status-badge-outline {
          background: transparent;
          color: var(--ecp-primary, #2196f3);
          border-color: var(--ecp-primary, #2196f3);
        }
        .ecp-status-badge-primary.ecp-status-badge-subtle {
          background: var(--ecp-primary-light, #bbdefb);
          color: var(--ecp-primary, #2196f3);
        }
        /* Icon */
        .ecp-status-badge__icon {
          width: 1em;
          height: 1em;
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        /* Dot indicator */
        .dot {
          width: 0.5em;
          height: 0.5em;
          border-radius: 50%;
          background: currentColor;
          flex-shrink: 0;
        }
        /* Close button */
        .close-button {
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;
          margin-left: 0.25rem;
          display: inline-flex;
          align-items: center;
          color: inherit;
          opacity: 0.7;
          transition: opacity 0.2s;
          width: 1em;
          height: 1em;
        }
        .close-button:hover {
          opacity: 1;
        }
        .close-button:focus {
          outline: 2px solid currentColor;
          outline-offset: 2px;
          border-radius: 2px;
        }
        /* Dark mode support */
        [data-theme="dark"] .ecp-status-badge-success.ecp-status-badge-subtle {
          background: var(--ecp-success-light, #064e3b);
        }
        [data-theme="dark"] .ecp-status-badge-warning.ecp-status-badge-subtle {
          background: var(--ecp-warning-light, #78350f);
        }
        [data-theme="dark"] .ecp-status-badge-danger.ecp-status-badge-subtle {
          background: var(--ecp-danger-light, #7f1d1d);
        }
        [data-theme="dark"] .ecp-status-badge-info.ecp-status-badge-subtle {
          background: var(--ecp-info-light, #1e3a8a);
        }
        [data-theme="dark"] .ecp-status-badge-neutral.ecp-status-badge-subtle {
          background: var(--ecp-neutral-light, #374151);
          color: var(--ecp-neutral, #9ca3af);
        }
        [data-theme="dark"] .ecp-status-badge-primary.ecp-status-badge-subtle {
          background: var(--ecp-primary-light, #1e40af);
          color: var(--ecp-primary, #60a5fa);
        }

/* ========== Tabs Component (Light DOM v2.0) ========== */
ecp-tabs {
  display: inline-block;
}

.ecp-tabs__container {
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        .tab-list {
          display: flex;
          border-bottom: 1px solid var(--tabs-border, #e5e7eb);
          gap: 0.5rem;
          overflow-x: auto;
          scrollbar-width: thin;
        }
        .tab-list::-webkit-scrollbar {
          height: 4px;
        }
        .tab-list::-webkit-scrollbar-thumb {
          background: var(--tabs-border, #e5e7eb);
          border-radius: 2px;
        }
        .tab {
          padding: 0.75rem 1.25rem;
          background: transparent;
          border: none;
          border-bottom: 2px solid transparent;
          cursor: pointer;
          font-size: 0.9375rem;
          font-weight: 500;
          font-family: inherit;
          color: var(--tabs-text, #6b7280);
          transition: all 0.2s;
          white-space: nowrap;
          position: relative;
          display: inline-flex;
          align-items: center;
        }
        .tab:hover:not([disabled]) {
          color: var(--tabs-text-hover, #374151);
          background: var(--tabs-hover-bg, #f9fafb);
        }
        .tab.tab-active {
          color: var(--tabs-text-active, #2196f3);
          border-bottom-color: var(--tabs-active-border, #2196f3);
        }
        .tab[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }
        .tab:focus {
          outline: 2px solid var(--tabs-text-active, #2196f3);
          outline-offset: -2px;
        }
        .tab-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-left: 0.5rem;
          padding: 0.125rem 0.5rem;
          border-radius: 9999px;
          font-size: 0.6875rem;
          background: var(--tabs-badge-bg, #e5e7eb);
          color: var(--tabs-badge-text, #374151);
        }
        .tab-panels {
          padding: 1.5rem 0;
        }
        /* Dark mode */
        [data-theme="dark"] .tab-list {
          border-bottom-color: var(--tabs-border, #374151);
        }
        [data-theme="dark"] .tab {
          color: var(--tabs-text, #9ca3af);
        }
        [data-theme="dark"] .tab:hover:not([disabled]) {
          color: var(--tabs-text-hover, #d1d5db);
          background: var(--tabs-hover-bg, #1f2937);
        }
        [data-theme="dark"] .tab.tab-active {
          color: var(--tabs-text-active, #60a5fa);
          border-bottom-color: var(--tabs-active-border, #60a5fa);
        }
        [data-theme="dark"] .tab-badge {
          background: var(--tabs-badge-bg, #374151);
          color: var(--tabs-badge-text, #d1d5db);
        }
        /* Responsive */
        @media (max-width: 480px) {
          .tab {
            padding: 0.625rem 1rem;
            font-size: 0.875rem;
          }
          .tab-panels {
            padding: 1rem 0;
          }
        }

/* ========== Theme Switcher Component (Light DOM v2.0) ========== */
ecp-theme-switcher {
  display: inline-block;
}

:host {
          display: inline-block;
        }
        .theme-switcher {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .theme-btn {
          background: var(--ecp-bg-secondary, #f8f9fa);
          border: 1px solid var(--ecp-border-color, #dee2e6);
          border-radius: 0.375rem;
          padding: 0.5rem 1rem;
          cursor: pointer;
          transition: all 0.15s ease;
          color: var(--ecp-text-primary, #212529);
          font-size: 0.875rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .theme-btn:hover {
          background: var(--ecp-bg-tertiary, #e9ecef);
          border-color: var(--ecp-primary, #007bff);
        }
        .theme-icon {
          font-size: 1rem;
          line-height: 1;
        }
        .theme-label {
          font-size: 0.875rem;
          font-weight: 500;
        }
        .theme-dropdown {
          position: absolute;
          top: calc(100% + 0.25rem);
          right: 0;
          background: var(--ecp-hamburger-bg, #ffffff);
          border: 1px solid var(--ecp-border-color, #dee2e6);
          border-radius: 0.5rem;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                      0 4px 6px -2px rgba(0, 0, 0, 0.05);
          padding: 0.5rem;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10px);
          transition: all 0.2s ease;
          min-width: 150px;
        }
        .theme-dropdown.active {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        .theme-option {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          padding: 0.5rem 0.75rem;
          border-radius: 0.25rem;
          cursor: pointer;
          transition: all 0.15s ease;
          font-size: 0.875rem;
          color: var(--ecp-text-primary, #212529);
          background: transparent;
        }
        .theme-option:hover {
          background: var(--ecp-bg-secondary, #f8f9fa);
        }
        .theme-option.active {
          background: var(--ecp-primary, #007bff);
          color: white;
        }
        .theme-option-icon {
          font-size: 1.125rem;
          line-height: 1;
        }
        .theme-option-label {
          flex: 1;
        }
        .theme-option-check {
          opacity: 0;
          transition: opacity 0.15s ease;
        }
        .theme-option.active .theme-option-check {
          opacity: 1;
        }

/* ========== Timeline Component (Light DOM v2.0) ========== */
ecp-timeline {
  display: inline-block;
}

:host {
          display: block;
          font-family: inherit;
        }
        .ecp-timeline__container {
          display: flex;
          flex-direction: column;
          width: 100%;
          background: var(--timeline-bg, transparent);
          padding: 1rem;
        }
        .timeline {
          position: relative;
          padding-left: 2.5rem;
        }
        .timeline-line {
          position: absolute;
          left: 1.125rem;
          top: 0;
          bottom: 0;
          width: 2px;
          background: var(--timeline-line, #e5e7eb);
        }
        .timeline-item {
          position: relative;
          margin-bottom: 1.5rem;
          padding-left: 1rem;
          animation: fade-in 0.4s ease-out;
        }
        .timeline-item:last-child {
          margin-bottom: 0;
        }
        .timeline-marker {
          position: absolute;
          left: -2.375rem;
          top: 0.375rem;
          width: 2.25rem;
          height: 2.25rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
          transition: transform 0.2s;
        }
        .timeline-marker:hover {
          transform: scale(1.1);
        }
        .timeline-icon {
          width: 1.25rem;
          height: 1.25rem;
          color: #ffffff;
        }
        .timeline-content {
          background: var(--timeline-content-bg, #ffffff);
          border: 1px solid var(--timeline-border, #e5e7eb);
          border-radius: 0.5rem;
          padding: 1rem;
          transition: all 0.2s;
          cursor: pointer;
        }
        .timeline-content:hover {
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          border-color: var(--timeline-border-hover, #d1d5db);
        }
        .timeline-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 0.5rem;
        }
        .timeline-title {
          font-size: 1rem;
          font-weight: 600;
          color: var(--timeline-text, #374151);
        }
        .timeline-time {
          font-size: 0.875rem;
          color: var(--timeline-time, #6b7280);
        }
        .timeline-description {
          font-size: 0.9375rem;
          color: var(--timeline-description, #4b5563);
          line-height: 1.5;
        }
        .timeline-metadata {
          display: flex;
          gap: 0.75rem;
          margin-top: 0.75rem;
          padding-top: 0.75rem;
          border-top: 1px solid var(--timeline-border, #e5e7eb);
          font-size: 0.8125rem;
          color: var(--timeline-metadata, #6b7280);
        }
        .metadata-item {
          display: flex;
          align-items: center;
          gap: 0.25rem;
        }
        .date-group {
          position: sticky;
          top: 0;
          background: var(--timeline-bg, #ffffff);
          z-index: 2;
          padding: 0.75rem 0;
          margin-bottom: 1rem;
        }
        .date-label {
          font-size: 0.875rem;
          font-weight: 600;
          color: var(--timeline-date, #6b7280);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }
        .no-events {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 3rem 1rem;
          color: var(--timeline-metadata, #6b7280);
          font-size: 0.9375rem;
        }
        /* Dark mode */
        [data-theme="dark"] .timeline-title {
          color: var(--timeline-text, #d1d5db);
        }
        [data-theme="dark"] .timeline-description {
          color: var(--timeline-description, #d1d5db);
        }
        [data-theme="dark"] .timeline-time,
        [data-theme="dark"] .timeline-metadata,
        [data-theme="dark"] .date-label {
          color: var(--timeline-metadata, #9ca3af);
        }
        [data-theme="dark"] .timeline-content {
          background: var(--timeline-content-bg, #1f2937);
          border-color: var(--timeline-border, #374151);
        }
        /* Animations */
        @keyframes fade-in {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        /* Responsive */
        @media (max-width: 640px) {
          .timeline {
            padding-left: 2rem;
          }
          .timeline-marker {
            width: 1.75rem;
            height: 1.75rem;
            left: -2rem;
          }
          .timeline-icon {
            width: 1rem;
            height: 1rem;
          }
          .timeline-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
          }
          .timeline-metadata {
            flex-direction: column;
            gap: 0.25rem;
          }
        }

/* ========== Toast Component (Light DOM v2.0) ========== */
ecp-toast {
  display: inline-block;
}

:host {
          font-family: var(--ecp-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
        }
        .ecp-toast-container {
          position: fixed;
          z-index: 9999;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          padding: 1rem;
          pointer-events: none;
        }
        .ecp-toast-container.position-top-right {
          top: 0;
          right: 0;
        }
        .ecp-toast-container.position-top-left {
          top: 0;
          left: 0;
        }
        .ecp-toast-container.position-bottom-right {
          bottom: 0;
          right: 0;
        }
        .ecp-toast-container.position-bottom-left {
          bottom: 0;
          left: 0;
        }
        .ecp-toast-list {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }
        .ecp-toast {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          min-width: 300px;
          max-width: 500px;
          padding: 1rem 1.25rem;
          background: var(--ecp-toast-bg, var(--ecp-bg-primary, #ffffff));
          border-left: 4px solid;
          border-radius: 0.375rem;
          box-shadow: var(--ecp-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
          pointer-events: all;
          animation: slideIn 0.3s ease;
        }
        .ecp-toast-content {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          flex: 1;
        }
        .ecp-toast-icon {
          display: inline-flex;
          flex-shrink: 0;
          width: 1.25rem;
          height: 1.25rem;
        }
        .ecp-toast-icon svg {
          width: 100%;
          height: 100%;
        }
        .ecp-toast-message {
          font-size: 0.9375rem;
          line-height: 1.5;
          color: var(--ecp-toast-color, var(--ecp-text-primary, #212529));
        }
        .ecp-toast-close {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.5rem;
          height: 1.5rem;
          padding: 0;
          background: transparent;
          border: none;
          border-radius: 0.25rem;
          color: var(--ecp-text-secondary, #6c757d);
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .ecp-toast-close:hover {
          background: rgba(0, 0, 0, 0.1);
        }
        .ecp-toast-close svg {
          width: 1rem;
          height: 1rem;
        }
        /* Variants */
        .ecp-toast-success {
          border-left-color: var(--ecp-success, #28a745);
          background: var(--ecp-toast-success-bg, #d4edda);
        }
        .ecp-toast-success .ecp-toast-icon {
          color: var(--ecp-success, #28a745);
        }
        .ecp-toast-error {
          border-left-color: var(--ecp-danger, #dc3545);
          background: var(--ecp-toast-error-bg, #f8d7da);
        }
        .ecp-toast-error .ecp-toast-icon {
          color: var(--ecp-danger, #dc3545);
        }
        .ecp-toast-warning {
          border-left-color: var(--ecp-warning, #ffc107);
          background: var(--ecp-toast-warning-bg, #fff3cd);
        }
        .ecp-toast-warning .ecp-toast-icon {
          color: var(--ecp-warning, #856404);
        }
        .ecp-toast-info {
          border-left-color: var(--ecp-info, #17a2b8);
          background: var(--ecp-toast-info-bg, #d1ecf1);
        }
        .ecp-toast-info .ecp-toast-icon {
          color: var(--ecp-info, #17a2b8);
        }
        .ecp-toast-default {
          border-left-color: var(--ecp-text-secondary, #6c757d);
        }
        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateX(100%);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
        @media (max-width: 768px) {
          .ecp-toast {
            min-width: calc(100vw - 2rem);
            max-width: calc(100vw - 2rem);
          }
        }

/* ========== Tooltip Component (Light DOM v2.0) ========== */
ecp-tooltip {
  display: inline-block;
}

.ecp-tooltip__container {
          position: relative;
          display: inline-block;
        }
        .tooltip {
          position: absolute;
          z-index: 1050;
          padding: 0.5rem 0.75rem;
          font-size: 0.875rem;
          line-height: 1.4;
          color: var(--tooltip-text, #ffffff);
          background: var(--tooltip-bg, #1f2937);
          border-radius: 0.375rem;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s ease;
          white-space: nowrap;
          max-width: 300px;
          font-family: inherit;
        }
        .tooltip-show {
          opacity: 1;
        }
        /* Position variants */
        .tooltip-top {
          bottom: calc(100% + 0.5rem);
          left: 50%;
          transform: translateX(-50%);
        }
        .tooltip-bottom {
          top: calc(100% + 0.5rem);
          left: 50%;
          transform: translateX(-50%);
        }
        .tooltip-left {
          right: calc(100% + 0.5rem);
          top: 50%;
          transform: translateY(-50%);
        }
        .tooltip-right {
          left: calc(100% + 0.5rem);
          top: 50%;
          transform: translateY(-50%);
        }
        /* Arrow */
        .arrow {
          position: absolute;
          width: 0;
          height: 0;
          border: 0.375rem solid transparent;
        }
        .arrow-top {
          bottom: -0.75rem;
          left: 50%;
          transform: translateX(-50%);
          border-top-color: var(--tooltip-bg, #1f2937);
        }
        .arrow-bottom {
          top: -0.75rem;
          left: 50%;
          transform: translateX(-50%);
          border-bottom-color: var(--tooltip-bg, #1f2937);
        }
        .arrow-left {
          right: -0.75rem;
          top: 50%;
          transform: translateY(-50%);
          border-left-color: var(--tooltip-bg, #1f2937);
        }
        .arrow-right {
          left: -0.75rem;
          top: 50%;
          transform: translateY(-50%);
          border-right-color: var(--tooltip-bg, #1f2937);
        }
        /* Dark mode */
        [data-theme="dark"] .tooltip {
          background: var(--tooltip-bg, #374151);
          color: var(--tooltip-text, #f9fafb);
        }
        [data-theme="dark"] .arrow-top {
          border-top-color: var(--tooltip-bg, #374151);
        }
        [data-theme="dark"] .arrow-bottom {
          border-bottom-color: var(--tooltip-bg, #374151);
        }
        [data-theme="dark"] .arrow-left {
          border-left-color: var(--tooltip-bg, #374151);
        }
        [data-theme="dark"] .arrow-right {
          border-right-color: var(--tooltip-bg, #374151);
        }
        /* Allow wrapping for long text */
        @media (max-width: 480px) {
          .tooltip {
            white-space: normal;
            max-width: 200px;
          }
        }

/* ========== Tree View Component (Light DOM v2.0) ========== */
ecp-tree-view {
  display: inline-block;
}

:host {
          display: block;
          font-family: inherit;
        }
        .ecp-tree-view__container {
          display: flex;
          flex-direction: column;
          width: 100%;
          background: var(--tree-bg, transparent);
        }
        .tree {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .tree-item {
          position: relative;
          user-select: none;
        }
        .tree-node {
          display: flex;
          align-items: center;
          padding: 0.5rem 0.75rem;
          cursor: pointer;
          border-radius: 0.375rem;
          transition: all 0.15s;
        }
        .tree-node:hover {
          background: var(--tree-hover, #f3f4f6);
        }
        .tree-node:focus {
          outline: 2px solid var(--tree-selected, #dbeafe);
          outline-offset: -2px;
        }
        .tree-node.selected {
          background: var(--tree-selected, #dbeafe);
        }
        .tree-node.selected .tree-label {
          color: var(--tree-selected-text, #1e40af);
          font-weight: 500;
        }
        .tree-toggle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1.25rem;
          height: 1.25rem;
          margin-right: 0.5rem;
          transition: transform 0.2s;
          flex-shrink: 0;
        }
        .tree-toggle.expanded {
          transform: rotate(90deg);
        }
        .tree-toggle.placeholder {
          opacity: 0;
          pointer-events: none;
        }
        .tree-icon {
          width: 1.125rem;
          height: 1.125rem;
          margin-right: 0.5rem;
          flex-shrink: 0;
        }
        .tree-label {
          font-size: 0.9375rem;
          color: var(--tree-text, #374151);
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .tree-badge {
          font-size: 0.75rem;
          padding: 0.125rem 0.5rem;
          border-radius: 0.25rem;
          background: var(--tree-badge-bg, #e5e7eb);
          color: var(--tree-badge-text, #6b7280);
          margin-left: 0.5rem;
        }
        .tree-children {
          list-style: none;
          padding: 0;
          margin: 0;
          padding-left: 1.5rem;
          display: none;
        }
        .tree-children.expanded {
          display: block;
        }
        /* Dark mode */
        [data-theme="dark"] .tree-label {
          color: var(--tree-text, #d1d5db);
        }
        [data-theme="dark"] .tree-node:hover {
          background: var(--tree-hover, #374151);
        }
        [data-theme="dark"] .tree-node.selected {
          background: var(--tree-selected, #1e3a5f);
        }
        [data-theme="dark"] .tree-node.selected .tree-label {
          color: var(--tree-selected-text, #93c5fd);
        }
        [data-theme="dark"] .tree-badge {
          background: var(--tree-badge-bg, #374151);
          color: var(--tree-badge-text, #9ca3af);
        }
        /* Responsive */
        @media (max-width: 640px) {
          .tree-node {
            padding: 0.375rem 0.5rem;
          }
          .tree-toggle,
          .tree-icon {
            width: 1rem;
            height: 1rem;
          }
          .tree-label {
            font-size: 0.875rem;
          }
          .tree-children {
            padding-left: 1rem;
          }
        }