@layer components {
/* ========================================================================
   * Component: Alert
   * ======================================================================== */
.dig-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  border-radius: var(--dig-radius-lg);
  border: 1px solid var(--dig-color-info-border);
  background-color: var(--dig-color-info-bg);
  color: var(--dig-color-info-text);
}
.dig-alert--success {
  background-color: var(--dig-color-success-bg);
  border-color: var(--dig-color-success-border);
  color: var(--dig-color-success-text);
}
.dig-alert--warning {
  background-color: var(--dig-color-warning-bg);
  border-color: var(--dig-color-warning-border);
  color: var(--dig-color-warning-text);
}
.dig-alert--danger {
  background-color: var(--dig-color-danger-bg);
  border-color: var(--dig-color-danger-border);
  color: var(--dig-color-danger-text);
}

.dig-alert__icon {
  flex-shrink: 0;
  margin-top: 2px; /* Small adjustment for better visual alignment */
}
.dig-alert__icon .dashicons {
  color: inherit;
}

.dig-alert__message {
  flex-grow: 1;
  line-height: 1.5;
}
.dig-alert__message > *:first-child {
  margin-top: 0;
}
.dig-alert__message > *:last-child {
  margin-bottom: 0;
}

.dig-alert__actions {
  margin-left: auto; /* Pushes the close button to the far right */
}
.dig-alert__close-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--dig-transition-fast);
}
.dig-alert__close-btn:hover {
  opacity: 1;
}

}
@layer components {
/*
 * UCA Component: d1:collection (v2.0 - UI Polished & Icon-driven)
 * Base styles for the smart repeater component.
 */
.dig-collection__rows-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--dig-spacing-md);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-lg);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg-alt);
}
.dig-collection__row {
  display: flex;
  align-items: center; /* Vertically align controls with content */
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-md);
  transition: box-shadow var(--dig-transition-fast),
    transform var(--dig-transition-fast);
}
.dig-collection__row.sortable-ghost {
  opacity: 0.4;
  background: var(--dig-color-primary-bg);
}
.dig-collection__row.sortable-chosen {
  box-shadow: var(--dig-shadow-lg);
  transform: scale(1.02);
}
.dig-collection__row-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dig-spacing-md);
}
.dig-collection__row-controls {
  display: flex;
  align-items: center;
  gap: var(--dig-spacing-xs);
}
.dig-collection__drag-handle,
.dig-collection__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* Make border transparent by default */
  background-color: transparent; /* Make background transparent */
  border-radius: var(--dig-radius-sm);
  padding: var(--dig-spacing-xs);
  cursor: pointer;
  transition: background-color var(--dig-transition-fast),
    color var(--dig-transition-fast);
  color: var(--dig-color-text-muted); /* Muted color for icons */
}

.dig-collection__drag-handle {
  cursor: move;
}
.dig-collection__drag-handle:hover {
  background-color: var(--dig-color-bg-alt);
  color: var(--dig-color-text);
}

/* Specific styling for the remove button */
.dig-collection__remove-btn:hover {
  background-color: var(--dig-color-danger-bg);
  color: var(--dig-color-danger);
}

.dig-collection__actions {
  margin-top: var(--dig-spacing-md);
}

/* Apply this class to the container via _modifiers in JSON */
.dig-collection--readonly .dig-collection__drag-handle,
.dig-collection--readonly .dig-collection__remove-btn {
  display: none !important; /* Force hide controls */
}

.dig-collection--readonly .dig-collection__rows-wrapper {
  background-color: transparent;
  border: none;
  padding: 0;
}

.dig-collection--readonly .dig-collection__row {
  background-color: #fff;
  border: 1px solid var(--dig-color-border);
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dig-collection--readonly .dig-collection__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--dig-color-secondary);
}

}
@layer components {
/* === Password Component - Enterprise Grade Styles === */

.dig-password-field-wrapper .dig-confirmation-group {
  margin-top: var(--dig-spacing-md);
}

/* Strength Meter Enhancements */
.dig-strength-meter {
  margin-top: var(--dig-spacing-xs);
  background-color: var(--dig-color-bg-alt);
  border-radius: var(--dig-radius-sm);
  overflow: hidden;
  transition: all 0.3s ease;
}

.dig-password-field-wrapper.has-weak-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-danger);
}

.dig-password-field-wrapper.has-strong-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-success);
}

.dig-strength-meter-bar {
  height: 6px;
  width: 0%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--dig-color-border);
  transform-origin: left;
}

.dig-strength-meter-bar.is-strength-1 {
  background-color: var(--dig-color-danger);
  width: 25%;
}

.dig-strength-meter-bar.is-strength-2 {
  background-color: var(--dig-color-warning);
  width: 50%;
}

.dig-strength-meter-bar.is-strength-3 {
  background-color: var(--dig-color-info);
  width: 75%;
}

.dig-strength-meter-bar.is-strength-4 {
  background-color: var(--dig-color-success);
  width: 100%;
}

.dig-strength-meter-text {
  font-size: var(--dig-font-size-small);
  color: var(--dig-color-text-muted);
  padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
  margin: 0;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Toggle Button Excellence */
.dig-icon-button.dig-password-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--dig-spacing-xs);
  color: var(--dig-color-text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dig-radius-sm);
  position: relative;
  overflow: hidden;
}

.dig-icon-button.dig-password-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}

.dig-icon-button.dig-password-toggle:hover::before {
  opacity: 0.1;
}

.dig-icon-button.dig-password-toggle:focus {
  outline: 2px solid var(--dig-color-primary);
  outline-offset: 1px;
}

.dig-icon-button.dig-password-toggle:hover {
  color: var(--dig-color-primary);
  transform: translateY(-1px);
}

.dig-icon-button.dig-password-toggle:active {
  transform: translateY(0);
}

/* Dashicon Perfection */
.dig-password-toggle-icon {
  font-family: "dashicons";
  font-size: 20px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.dig-icon-button.dig-password-toggle:hover .dig-password-toggle-icon {
  transform: scale(1.1);
}

.dig-password-toggle-icon.is-visible::before {
  content: "\f177";
}

.dig-password-toggle-icon.is-hidden::before {
  content: "\f530";
}

@supports not (font-family: "dashicons") {
  .dig-password-toggle-icon {
    font-family: system-ui, sans-serif;
    font-size: 18px;
  }
}

/* Focus indicators for accessibility */
.dig-password-field-wrapper:focus-within {
  position: relative;
}

/* Responsive considerations */
@media (max-width: 768px) {
  .dig-password-toggle-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .dig-icon-button.dig-password-toggle {
    padding: var(--dig-spacing-xxs);
  }
}

}
@layer components {
/* Component: App Sidebar */

.d1-app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background-color: var(--dig-color-bg-alt);
  border-right: 1px solid var(--dig-color-border);
  display: flex;
  flex-direction: column;
}

.d1-sidebar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--dig-color-border);
}

.d1-sidebar-nav {
  padding: 1.5rem 1rem;
  flex-grow: 1;
  overflow-y: auto;
}

.d1-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--dig-color-border);
}

.d1-sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d1-sidebar-nav-item {
  margin-bottom: 0.5rem;
}

.d1-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: var(--dig-color-text-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border-left: 3px solid transparent;
}

.d1-sidebar-link:hover,
.d1-sidebar-link.active {
  background-color: rgba(37, 209, 219, 0.1);
  color: var(--dig-color-primary);
  border-left-color: var(--dig-color-primary);
}

.d1-sidebar-link__icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.d1-sidebar-link__label {
  font-weight: 500;
}

}
@layer components {
/* 
 * ==========================================
 * COMPONENT: Spinner
 * ==========================================
 */

.dig-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s;
}

.dig-spinner-icon {
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--dig-color-border);
  border-top-color: var(--dig-color-primary);
  border-radius: 50%;
  animation: dig-spin 1s linear infinite;
}

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

}
@layer components {
@layer components {
  .dig-proof-strip {
    border-bottom: 1px solid var(--dig-color-border);
    background-color: var(--dig-color-bg-alt);
  }

  .dig-status-block {
    min-width: 200px;
  }

  .dig-status-header__icon {
    margin-right: 0.375rem;
    color: var(--dig-color-secondary);
    font-size: 0.875rem;
    animation: dig-pulse-text 2s infinite;
  }

  .dig-proof-item {
    max-width: 300px;
  }

  .dig-proof-description {
    line-height: 1.5;
    margin: 0;
    padding-left: 2rem;
  }

  .dig-dot-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--dig-color-success, #10b981);
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: dig-pulse-green 2s infinite;
  }

  .dig-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: color-mix(
      in srgb,
      var(--dig-color-secondary) 14%,
      transparent
    );
    color: var(--dig-color-secondary);
    border-radius: 999px;
    flex-shrink: 0;
  }

  .dig-icon-circle__icon {
    font-size: 0.875rem;
  }

  @keyframes dig-pulse-green {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
      transform: scale(1);
      box-shadow: 0 0 0 0.375rem rgba(16, 185, 129, 0);
    }

    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
  }

  @keyframes dig-pulse-text {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 1;
    }
  }

  @media (max-width: 768px) {
    .dig-mb-md-mobile {
      margin-bottom: 1.5rem;
      width: 100%;
      border-bottom: 1px solid var(--dig-color-border);
      padding-bottom: 1rem;
    }

    .dig-justify-end {
      justify-content: flex-start;
    }

    .dig-proof-item {
      max-width: 100%;
      margin-bottom: 1rem;
    }
  }
}

}
@layer components {
@layer components {
  .dig-admin-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .dig-admin-title__icon {
    font-size: 1.3em;
    color: currentColor;
  }

  .dig-admin-main-card {
    margin-top: 20px;
    padding: 20px;
  }
}

}
@layer components {
@layer components {
  .dig-integrations-hub__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .dig-integrations-hub__title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .dig-integrations-hub__description {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .dig-integrations-hub__filters {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .dig-integrations-hub__search {
    position: relative;
  }

  .dig-integrations-hub__search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 1rem;
    pointer-events: none;
  }

  .dig-integrations-hub__search-input {
    padding-left: 2rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 250px;
  }

  .dig-integrations-hub__select {
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .dig-integration-card {
    text-decoration: none;
    color: inherit;
  }

  .dig-integration-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 2rem;
  }

  .dig-integration-card__logo {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .dig-integration-card__logo-img {
    height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .dig-integration-card__fallback-icon {
    font-size: 2.5rem;
    color: #ccc;
  }

  .dig-integration-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .dig-integration-card__description {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
    color: #666;
  }

  .dig-integration-card__footer {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dig-integration-card__status {
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .dig-integration-card__status-icon {
    font-size: 0.875rem;
  }

  .dig-integration-card__status--inactive {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
  }

  .dig-integrations-hub__no-results {
    display: none;
    text-align: center;
    padding: 4rem;
    color: #666;
  }

  .dig-integrations-hub__no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #ccc;
  }

  .dig-integration-card--active .dig-badge-success {
    background-color: var(--dig-color-success-bg);
    color: var(--dig-color-success-text);
    border: 1px solid var(--dig-color-success-border);
  }
}

}
@layer components {
@layer components {
  .digentus-one-admin-page .dig-status-card {
    background: #ffffff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    padding: 1px 12px;
    margin-top: 20px;
  }

  .digentus-one-admin-page .dig-status-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2em;
  }

  .dig-admin-heading-icon {
    color: #2271b1;
    font-size: 1rem;
  }

  .dig-admin-button-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
  }

  .dig-admin-button-icon {
    font-size: 0.95rem;
  }

  .digentus-one-admin-page .dig-processor-list {
    list-style: disc;
    padding-left: 20px;
  }
}

}
@layer components {
@layer components {
  .dig-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .dig-icon-box-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
  }

  .dig-bg-surface {
    background: rgba(255, 255, 255, 0.05);
  }

  .dig-property-row-compact__icon {
    color: var(--dig-color-text-muted);
    font-size: 1rem;
  }
}

}
@layer components {
@layer components {
  .dig-feature-grid__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }

  .dig-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(37, 209, 219, 0.1);
    color: var(--dig-color-secondary);
    margin-bottom: 1.5rem;
  }

  .dig-icon-badge__icon {
    font-size: 1.5rem;
  }

  .dig-feature-grid__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dig-color-primary);
  }

  .dig-feature-grid__text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

}
@layer components {
@layer components {
  .dig-card-universal {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .dig-card-universal__title-icon {
    color: var(--dig-color-warning);
    font-size: 1.25rem;
  }

  .dig-card-universal__body {
    position: relative;
  }

  .dig-card-universal__tease {
    filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }

  .dig-card-universal__tease strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--dig-color-text-muted);
  }

  .dig-card-universal__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 85%;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .dig-card-universal__overlay-title {
    color: var(--dig-color-primary);
  }

  .dig-card-universal__overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-shadow: 0 4px 12px rgba(37, 209, 219, 0.3);
  }

  .dig-card-universal__overlay-btn-icon {
    font-size: 1rem;
  }
}

}
@layer layouts {
/*
 * Layout: Application Dashboard (App Shell)
 * Responsibility:
 * - Fixed app shell geometry
 * - WordPress admin bar offsets
 * - Sidebar behavior
 * - Dashboard header geometry
 * - Header-level global search placement
 *
 * Notes:
 * - Search component internals live in:
 *   packages/re-ios/assets/css/components/search-bar.css
 * - This file only controls where the search appears inside the dashboard header.
 */

/* ============================================================
 * 1. App Mode Reset
 * ============================================================ */

html.d1-app-mode,
html.d1-app-mode body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ============================================================
 * 2. Main Fixed Shell
 * ============================================================ */

.d1-dashboard-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  z-index: 999;
}

/* Hide native theme chrome in app mode. */
html.d1-app-mode body > a.skip-link,
html.d1-app-mode header#masthead {
  display: none;
}

/* ============================================================
 * 3. WordPress Admin Bar Compatibility
 * ============================================================ */

body.admin-bar .d1-dashboard-wrapper {
  top: 32px;
  height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .d1-dashboard-wrapper {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

/* ============================================================
 * 4. App Main Area
 * ============================================================ */

.d1-app-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dig-color-bg);
}

.d1-app-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
}

/* ============================================================
 * 5. Desktop Header
 * ============================================================ */

.d1-app-header {
  height: 64px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--dig-color-border);
  background-color: var(--dig-color-bg);
  overflow: visible;
}

.d1-app-header-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.d1-app-header h1 {
  margin: 0;
  color: var(--dig-color-text);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.d1-app-header-controls {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header global search: desktop placement */
.d1-app-header-search {
  flex: 1 1 520px;
  min-width: 360px;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 1rem;
}

.d1-app-header-search .d1-search-wrapper {
  width: 100%;
  max-width: 520px;
  margin: 0;
  z-index: 1200;
}

.d1-app-header-search .d1-search--small,
.d1-app-header-search .d1-search--large {
  max-width: 100%;
}

.d1-app-header-search .d1-search-input-group,
.d1-app-header-search .dig-input-group {
  min-height: 40px;
  border-radius: var(--dig-radius-md);
  border: 1px solid rgba(37, 209, 219, 0.36);
  background: rgba(2, 18, 32, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 28px rgba(0, 0, 0, 0.16);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.d1-app-header-search .d1-search-input-group:hover,
.d1-app-header-search .dig-input-group:hover {
  border-color: rgba(37, 209, 219, 0.48);
}

.d1-app-header-search .d1-search-input-group:focus-within,
.d1-app-header-search .dig-input-group:focus-within {
  border-color: rgba(37, 209, 219, 0.7);
  background: rgba(2, 18, 32, 0.9);
  box-shadow:
    0 0 0 2px rgba(37, 209, 219, 0.08),
    0 16px 38px rgba(0, 0, 0, 0.26);
}

.d1-app-header-search .d1-search-submit {
  color: rgba(196, 220, 235, 0.82);
}

.d1-app-header-search .d1-search-submit:hover {
  color: var(--dig-color-primary);
}

.d1-app-header-search .d1-search-input,
.d1-app-header-search input[data-d1-search] {
  color: var(--dig-color-text);
  font-size: 0.92rem;
  font-weight: 500;
}

.d1-app-header-search .d1-search-input::placeholder,
.d1-app-header-search input[data-d1-search]::placeholder {
  color: rgba(196, 220, 235, 0.68);
}

/* Dropdown must float above dashboard cards. */
.d1-app-header-search .d1-search-dropdown {
  top: calc(100% + 0.55rem);
  z-index: 3000;
  background: rgba(3, 18, 31, 0.98);
  border: 1px solid rgba(37, 209, 219, 0.22);
  border-radius: var(--dig-radius-md);
  box-shadow:
    0 18px 55px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.d1-app-header-search .d1-search-item {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.d1-app-header-search .d1-search-item:hover,
.d1-app-header-search .d1-search-active {
  background: rgba(37, 209, 219, 0.12);
}

/* ============================================================
 * 6. Sidebar
 * ============================================================ */

.d1-app-sidebar {
  width: 260px;
  height: 100%;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background-color: var(--dig-color-bg-alt);
  border-right: 1px solid var(--dig-color-border);
  z-index: 1000;
  transition: transform 0.3s ease;
}

/* ============================================================
 * 7. Medium Desktop / Tablet Refinement
 * ============================================================ */

@media (max-width: 1200px) {
  .d1-app-header {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .d1-app-header-search {
    flex-basis: 360px;
    min-width: 260px;
    max-width: 440px;
    padding-inline: 0.5rem;
  }

  .d1-app-header-search .d1-search-wrapper {
    max-width: 380px;
  }
}

/* ============================================================
 * App Shell Controls
 * ============================================================ */

 .d1-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: clamp(3.75rem, 3.5rem + 1vw, 4rem);

  padding-inline:
    clamp(1rem, 0.8rem + 1vw, 1.25rem);

  border-bottom: 1px solid var(--dig-color-border);
}

.d1-sidebar-brand__logo {
  display: block;

  width: auto;
  height: clamp(1.35rem, 1.25rem + 0.3vw, 1.55rem);
}

.d1-sidebar-brand__fallback {
  display: none;
}

.d1-mobile-close-btn {
  width: 2.25rem;
  height: 2.25rem;

  margin: 0;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dig-color-text-muted);

  transition:
    color var(--dig-transition-fast),
    background-color var(--dig-transition-fast);
}

.d1-mobile-close-btn:hover {
  color: var(--dig-color-primary);
}

.d1-mobile-close-btn svg,
.d1-mobile-close-btn svg *,
.d1-mobile-close-btn .dig-icon,
.d1-mobile-close-btn .d1-mobile-close-btn__icon {
  color: inherit;
  fill: none;
  stroke: currentColor;
}

.d1-mobile-menu-btn {
  padding: 0.25rem;
}

.d1-mobile-close-btn__icon,
.d1-mobile-menu-btn__icon {
  color: var(--dig-color-text-muted);

  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem);
}

/* ============================================================
 * 8. Sidebar Mobile Overlay
 * ============================================================ */

 @media (max-width: 992px) {
  .d1-app-sidebar {
    position: absolute;
    z-index: 4000;

    top: 0;
    left: 0;

    width: min(17rem, calc(100vw - 3.5rem));
    height: 100%;

    flex-basis: auto;

    transform: translateX(-100%);

    background: var(--dig-color-bg-alt);

    border-right: 1px solid var(--dig-color-border);

    box-shadow:
      1rem 0 3rem rgba(0, 0, 0, 0.38);

    transition:
      transform var(--dig-transition-base);
  }

  .d1-app-sidebar.is-open {
    transform: translateX(0);
  }

  .d1-app-content {
    padding: 1rem;
  }

  .d1-app-header-controls .dig-d-none {
    display: none;
  }
}

/* ============================================================
 * 9. Mobile Header + Search Layout
 * ============================================================ */

 @media (max-width: 1023px) {
  .d1-app-header {
    height: auto;
    min-height: 116px;

    display: grid;
    grid-template-columns:
      44px
      minmax(0, 1fr)
      40px
      40px;
    grid-template-rows:
      44px
      42px;

    align-items: center;

    column-gap: 0.65rem;
    row-gap: 0.55rem;

    padding:
      0.7rem
      1rem
      0.75rem;

    overflow: visible;
  }

  /*
   * The title wrapper owns only the hamburger cell.
   */
  .d1-app-header-title {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .d1-app-header h1 {
    display: none;
  }

  .d1-mobile-menu-btn {
    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    pointer-events: auto;
  }

  /*
   * Critical:
   * Controls itself must NOT create another grid layer over
   * the hamburger. Its children participate directly in the
   * header grid.
   */
  .d1-app-header-controls {
    display: contents;
  }

  /*
   * Search owns the entire second row.
   */
  .d1-app-header-search {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;
    min-width: 0;
    max-width: none;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
  }

  .d1-app-header-search .d1-search-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;

    z-index: 1600;
  }

  .d1-app-header-search .d1-search-input-group,
  .d1-app-header-search .dig-input-group {
    height: 42px;
    min-height: 42px;
  }

  .d1-app-header-search .d1-search-input,
  .d1-app-header-search input[data-d1-search] {
    font-size: clamp(0.84rem, 0.8rem + 0.15vw, 0.88rem);
  }

  .d1-app-header-search .d1-search-dropdown {
    right: 0;
    left: 0;

    width: 100%;
    min-width: 100%;

    transform: none;
  }

  /*
   * Alert owns column 3.
   */
  .d1-alert-button {
    grid-column: 3;
    grid-row: 1;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: center;
    justify-self: center;
  }

  /*
   * Account owns column 4.
   */
  .d1-user-menu {
    grid-column: 4;
    grid-row: 1;

    height: 40px;

    margin: 0;
    padding: 0;

    border-left: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: center;
    justify-self: center;
  }

  .d1-user-menu__meta {
    display: none;
  }

  .d1-app-header-controls .dig-avatar {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
 * 10. Very Small Screens
 * ============================================================ */

 @media (max-width: 420px) {
  .d1-app-header {
    min-height: 108px;

    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px
      38px;

    grid-template-rows:
      40px
      40px;

    column-gap: 0.5rem;
    row-gap: 0.5rem;

    padding:
      0.6rem
      0.75rem
      0.65rem;
  }

  .d1-app-header-title {
    height: 40px;
  }

  .d1-mobile-menu-btn,
  .d1-alert-button {
    width: 38px;
    height: 38px;
  }

  .d1-user-menu {
    height: 38px;
  }

  .d1-app-header-controls .dig-avatar {
    width: 34px;
    height: 34px;
  }

  .d1-app-header-search .d1-search-input-group,
  .d1-app-header-search .dig-input-group {
    height: 40px;
    min-height: 40px;
  }

  .d1-app-header-search .d1-search-input,
  .d1-app-header-search input[data-d1-search] {
    font-size: clamp(0.8rem, 0.77rem + 0.18vw, 0.84rem);
  }
}

.d1-app-main::after {
  content: "";

  position: absolute;
  z-index: 3500;
  inset: 0;

  background: rgba(0, 0, 0, 0);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity var(--dig-transition-fast),
    visibility var(--dig-transition-fast),
    background-color var(--dig-transition-fast);
}

@media (max-width: 992px) {
  html.d1-sidebar-open .d1-app-main::after {
    background: rgba(0, 0, 0, 0.48);

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
  }

  html.d1-sidebar-open .d1-app-header-controls,
  html.d1-sidebar-open .d1-app-header-title {
    pointer-events: none;
  }
}
}
@layer themes {
/**
 * Theme: Enterprise
 *
 * Logged-in application theme for Digentus One.
 *
 * This layer owns:
 * - Dark application surfaces
 * - Enterprise contrast
 * - Glass surfaces
 * - Dashboard-specific visual treatments
 *
 * It intentionally inherits typography, spacing, radii, transitions,
 * semantic colors, and component structure from digentus-one.css.
 */

@layer themes {
  /* ==========================================================================
     1. Theme Tokens
     ========================================================================== */

  .d1-theme-enterprise {
    /*
     * Enterprise primitives.
     *
     * These values are intentionally local to the enterprise theme.
     * Components consume the standard --dig-color-* interface below.
     */
    --d1-enterprise-bg: #0a1b2a;
    --d1-enterprise-bg-deep: #06131f;
    --d1-enterprise-bg-raised: #0d1929;

    --d1-enterprise-text: #e6edf3;
    --d1-enterprise-text-strong: var(--dig-color-white);
    --d1-enterprise-text-muted: #94a3b8;

    --d1-enterprise-border: #1e293b;
    --d1-enterprise-border-subtle: rgba(255, 255, 255, 0.08);
    --d1-enterprise-border-soft: rgba(255, 255, 255, 0.05);

    --d1-enterprise-cyan: #25d1db;

    --d1-enterprise-surface: color-mix(
      in srgb,
      var(--d1-enterprise-bg-deep) 82%,
      transparent
    );

    --d1-enterprise-surface-glass: color-mix(
      in srgb,
      var(--d1-enterprise-bg-raised) 72%,
      transparent
    );

    --d1-enterprise-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.2), 0 20px 40px -10px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --d1-enterprise-shadow-raised: 0 4px 24px -1px rgba(0, 0, 0, 0.3);

    /*
     * Standard design-system interface.
     *
     * All existing components should continue consuming these semantic tokens,
     * without knowing which theme is active.
     */
    --dig-color-bg: var(--d1-enterprise-bg);
    --dig-color-bg-alt: var(--d1-enterprise-bg-deep);

    --dig-color-text: var(--d1-enterprise-text);
    --dig-color-text-muted: var(--d1-enterprise-text-muted);

    --dig-color-border: var(--d1-enterprise-border);
    --dig-color-border-subtle: var(--d1-enterprise-border-subtle);

    --dig-color-primary: var(--d1-enterprise-cyan);
  }

  /* ==========================================================================
     2. Application Root
     ========================================================================== */

  body.d1-theme-enterprise {
    min-height: 100dvh;
    margin: 0;

    background-color: var(--dig-color-bg);

    color: var(--dig-color-text);
  }

  .d1-theme-enterprise
    :is(.d1-dashboard-wrapper, .d1-app-main, .d1-app-content) {
    background-color: var(--dig-color-bg);
    color: var(--dig-color-text);
  }

  /* ==========================================================================
     3. Dashboard Environment
     ========================================================================== */

  .d1-theme-enterprise .d1-dashboard-wrapper {
    background: radial-gradient(
      circle at 10% 20%,
      color-mix(in srgb, var(--dig-color-primary) 14%, var(--dig-color-bg)) 0%,
      var(--dig-color-bg) 40%
    );
  }

  .d1-theme-enterprise .dig-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--dig-spacing-lg);
  }

  /* ==========================================================================
     4. Shared Enterprise Surfaces
     ========================================================================== */

  .d1-theme-enterprise :is(.dig-card, .dig-card--glass) {
    background: var(--d1-enterprise-surface-glass);
    border: 1px solid var(--d1-enterprise-border-subtle);

    color: var(--dig-color-text);

    backdrop-filter: blur(12px);
    box-shadow: var(--d1-enterprise-shadow-raised);
  }

  .d1-theme-enterprise .dig-card--glass {
    box-shadow: var(--d1-enterprise-shadow);
  }

  .d1-theme-enterprise
    :is(.dig-card, .dig-card--glass)
    :is(h1, h2, h3, h4, strong) {
    color: var(--d1-enterprise-text-strong);
  }

  .d1-theme-enterprise
    :is(.dig-card, .dig-card--glass)
    :is(.dig-text-muted, .dig-label) {
    color: var(--dig-color-text-muted);
  }

  /* ==========================================================================
     5. Hero Surface
     ========================================================================== */

  .d1-theme-enterprise .d1-hero {
    background: var(--d1-enterprise-surface);
    border: 1px solid var(--d1-enterprise-border-subtle);

    color: var(--dig-color-text);

    backdrop-filter: blur(12px);
    box-shadow: var(--d1-enterprise-shadow-raised);
  }

  /* ==========================================================================
     6. Enterprise Typography Utilities
     ========================================================================== */

  .d1-theme-enterprise .dig-text-white {
    color: var(--d1-enterprise-text-strong);

    text-shadow: 0 0 20px
      color-mix(in srgb, var(--d1-enterprise-text-strong) 30%, transparent);
  }

  .d1-theme-enterprise :is(.dig-text-muted, .dig-label) {
    color: var(--dig-color-text-muted);
  }

  /* ==========================================================================
     7. Tables
     ========================================================================== */

  .d1-theme-enterprise .dig-table th {
    background-color: color-mix(
      in srgb,
      var(--d1-enterprise-text-strong) 5%,
      transparent
    );

    border-color: color-mix(
      in srgb,
      var(--d1-enterprise-text-strong) 10%,
      transparent
    );

    color: var(--d1-enterprise-text-strong);
  }

  .d1-theme-enterprise .dig-table td {
    border-color: color-mix(
      in srgb,
      var(--d1-enterprise-text-strong) 5%,
      transparent
    );

    color: var(--dig-color-text);
  }

  /* ==========================================================================
     8. Links
     ========================================================================== */

  .d1-theme-enterprise .d1-comps-link {
    color: var(--dig-color-primary);

    font-weight: var(--dig-font-weight-semibold);
    text-decoration: none;

    border-bottom: 1px solid transparent;

    transition:
      color var(--dig-transition-fast),
      border-color var(--dig-transition-fast),
      text-shadow var(--dig-transition-fast);
  }

  .d1-theme-enterprise .d1-comps-link:hover,
  .d1-theme-enterprise .d1-comps-link:focus-visible {
    color: var(--d1-enterprise-text-strong);
    border-bottom-color: var(--dig-color-primary);

    text-shadow: 0 0 8px
      color-mix(in srgb, var(--dig-color-primary) 40%, transparent);
  }

  /* ==========================================================================
     9. Map
     ========================================================================== */

  .d1-theme-enterprise .leaflet-container {
    background: var(--dig-color-bg);
  }

  /* ==========================================================================
     10. Ambient Effects
     ========================================================================== */

  .d1-theme-enterprise .dig-glow-bg {
    position: absolute;
    z-index: 0;
    inset: -50% auto auto -50%;

    width: 200%;
    height: 200%;

    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--dig-color-primary) 5%, transparent) 0%,
      transparent 60%
    );

    pointer-events: none;
  }

  /* ==========================================================================
     11. Enterprise Utilities
     ========================================================================== */

  .d1-theme-enterprise .dig-border-subtle {
    border-color: var(--d1-enterprise-border-subtle);
  }

  .d1-theme-enterprise .dig-dot {
    width: clamp(0.4rem, 0.38rem + 0.1vw, 0.5rem);
    height: clamp(0.4rem, 0.38rem + 0.1vw, 0.5rem);

    border-radius: var(--dig-radius-full);

    box-shadow: 0 0 8px currentColor;
  }

  /*
   * The color is intentionally repeated as currentColor because .dig-dot uses
   * it to generate the matching glow.
   */
  .d1-theme-enterprise .dig-bg-success {
    background-color: var(--dig-color-operational);
    color: var(--dig-color-operational);
  }

  .d1-theme-enterprise .dig-bg-warning {
    background-color: var(--dig-color-warning);
    color: var(--dig-color-warning);
  }

  .d1-theme-enterprise .dig-bg-info {
    background-color: var(--dig-color-info);
    color: var(--dig-color-info);
  }

  /* ==========================================================================
     12. Responsive
     ========================================================================== */

  @media (max-width: 75rem) {
    .d1-theme-enterprise .dig-dashboard-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ==========================================================================
     13. Feature Support
     ========================================================================== */

  @supports not (backdrop-filter: blur(1px)) {
    .d1-theme-enterprise :is(.dig-card, .dig-card--glass, .d1-hero) {
      background: var(--d1-enterprise-bg-deep);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .d1-theme-enterprise :is(.dig-card, .dig-card--glass, .d1-hero) {
      background: var(--d1-enterprise-bg-deep);
      backdrop-filter: none;
    }
  }
}

}
@layer components {
@layer components {
  /* ============================================================
   * Digentus One Search Bar
   * Enterprise  Grade
   * ============================================================ */

  .d1-search-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    z-index: 100;
  }

  .d1-search--small {
    max-width: 320px;
  }

  .d1-search--large {
    max-width: 650px;
  }

  .d1-search-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    overflow: hidden;
    background-color: var(--dig-color-bg-alt);
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease,
      background-color 160ms ease;
  }

  .d1-search-input-group:hover {
    border-color: rgba(37, 209, 219, 0.38);
  }

  .d1-search-input-group:focus-within {
    border-color: rgba(37, 209, 219, 0.55);
    box-shadow:
      0 0 0 2px rgba(37, 209, 219, 0.08),
      0 14px 34px rgba(0, 0, 0, 0.24);
  }

  .d1-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0 0 1rem;
    color: var(--dig-color-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition:
      color 160ms ease,
      transform 160ms ease;
  }

  .d1-search-submit:hover {
    color: var(--dig-color-primary);
  }

  .d1-search-submit:active {
    transform: scale(0.96);
  }

  .d1-search-icon {
    width: 1em;
    height: 1em;
    line-height: 1;
  }

  .d1-search--small .d1-search-icon {
    font-size: 1.15rem;
  }

  .d1-search--large .d1-search-icon {
    font-size: 1.45rem;
  }

  .d1-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    outline: none;
    border: none;
    font-weight: 500;
    letter-spacing: -0.01em;
    background: transparent;
    color: var(--dig-color-text);
  }

  .d1-search-input::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 0.86;
  }

  .d1-search--small .d1-search-input {
    padding: 0.65rem 1rem 0.65rem 0.55rem;
    font-size: 0.9rem;
  }

  .d1-search--large .d1-search-input {
    padding: 1rem 1.5rem 1rem 0.75rem;
    font-size: 1.1rem;
  }

  .d1-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 1400;
    display: none;
    max-height: 450px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(
      180deg,
      rgba(10, 27, 41, 0.98),
      rgba(4, 14, 26, 0.98)
    );
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--dig-radius-md);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
  }

  .d1-search-dropdown::-webkit-scrollbar {
    width: 6px;
  }

  .d1-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
  }

  .d1-search-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
  }

  .d1-search-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(37, 209, 219, 0.52);
  }

  /* ============================================================
  * Search Result
  * ============================================================ */

  .d1-search-item {
    display: block;

    width: 100%;
    padding:
      clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem)
      clamp(1rem, 0.85rem + 0.45vw, 1.25rem);

    color: var(--dig-color-text);
    text-decoration: none;

    background: color-mix(
      in srgb,
      var(--dig-color-bg-alt) 82%,
      transparent
    );

    border: 1px solid var(--d1-enterprise-border-subtle);
    border-radius: var(--dig-radius-sm);

    transition:
      background-color var(--dig-transition-fast),
      border-color var(--dig-transition-fast);
  }

  .d1-search-item + .d1-search-item {
    margin-top: 1px;
  }

  .d1-search-item:hover,
  .d1-search-item.d1-search-active,
  .d1-search-item[aria-selected="true"] {
    background: color-mix(
      in srgb,
      var(--dig-color-primary) 5%,
      var(--dig-color-bg-alt)
    );

    border-color: color-mix(
      in srgb,
      var(--dig-color-primary) 28%,
      var(--d1-enterprise-border-subtle)
    );
  }

  .d1-search-item[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
  }

  /* ============================================================
  * Primary Row
  * ============================================================ */

  .d1-search-item__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: clamp(1rem, 0.8rem + 0.4vw, 1.5rem);

    min-width: 0;
  }

  .d1-search-item__title {
    min-width: 0;

    color: var(--dig-color-text);

    font-size: clamp(0.84rem, 0.8rem + 0.1vw, 0.92rem);
    font-weight: var(--dig-font-weight-semibold);
    line-height: 1.25;

    overflow-wrap: anywhere;
  }

  .d1-search-item__value {
    flex: 0 0 auto;

    color: var(--dig-color-success);

    font-family: var(--dig-font-mono);
    font-size: clamp(0.7rem, 0.67rem + 0.08vw, 0.78rem);
    font-weight: var(--dig-font-weight-medium);
    line-height: 1.25;
    letter-spacing: 0.025em;
  }

  /* ============================================================
  * Secondary Row
  * ============================================================ */

  .d1-search-item__meta {
    display: flex;
    align-items: baseline;

    gap: clamp(0.45rem, 0.4rem + 0.12vw, 0.6rem);

    margin-top: clamp(0.25rem, 0.2rem + 0.1vw, 0.35rem);

    min-width: 0;
  }

  .d1-search-item__subtitle {
    color: var(--dig-color-text-muted);

    font-size: clamp(0.72rem, 0.69rem + 0.08vw, 0.8rem);
    line-height: 1.35;
  }

  /*
  * Semantic property classification.
  *
  * Deliberately flat: this is metadata, not an action,
  * status control, chip or button.
  */
  .d1-search-item__type {
    color: color-mix(
      in srgb,
      var(--dig-color-primary) 78%,
      var(--dig-color-text-muted)
    );

    font-family: var(--dig-font-mono);
    font-size: clamp(0.61rem, 0.59rem + 0.05vw, 0.67rem);
    font-weight: var(--dig-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* ==========================================================================
  * Header Search — Command Bar Treatment
  * ========================================================================== */

  .d1-app-header-search {
    width: clamp(20rem, 28vw, 26rem);
    min-width: 0;
  }

  .d1-app-header-search .d1-search-wrapper,
  .d1-app-header-search .d1-search-form {
    position: relative;

    width: 100%;
    max-width: none;
    margin: 0;
  }

  .d1-app-header-search .d1-search-input-group {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;
    height: 2.5rem;

    overflow: hidden;

    border: 1px solid var(--d1-enterprise-border-subtle);
    border-radius: var(--dig-radius-md);

    background: color-mix(
      in srgb,
      var(--dig-color-bg-alt) 88%,
      transparent
    );

    box-shadow: none;

    transition:
      border-color var(--dig-transition-fast),
      background-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }

  .d1-app-header-search .d1-search-input-group:hover {
    border-color: color-mix(
      in srgb,
      var(--dig-color-primary) 36%,
      var(--d1-enterprise-border-subtle)
    );
  }

  .d1-app-header-search .d1-search-input-group:focus-within {
    border-color: color-mix(
      in srgb,
      var(--dig-color-primary) 72%,
      var(--d1-enterprise-border-subtle)
    );

    background: color-mix(
      in srgb,
      var(--dig-color-primary) 2%,
      var(--dig-color-bg-alt)
    );

    box-shadow:
      0 0 0 1px color-mix(
        in srgb,
        var(--dig-color-primary) 16%,
        transparent
      );
  }

  /* Search command icon */

  .d1-app-header-search .d1-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 2.5rem;

    width: 2.5rem;
    height: 100%;

    padding: 0;

    border: 0;
    border-right: 1px solid var(--d1-enterprise-border-subtle);
    border-radius: 0;

    background: transparent;

    color: var(--dig-color-text-muted);

    cursor: pointer;

    transition:
      color var(--dig-transition-fast),
      background-color var(--dig-transition-fast);
  }

  .d1-app-header-search .d1-search-submit:hover,
  .d1-app-header-search .d1-search-submit:focus-visible {
    background: color-mix(
      in srgb,
      var(--dig-color-primary) 5%,
      transparent
    );

    color: var(--dig-color-primary);
  }

  .d1-app-header-search .d1-search-icon {
    width: 0.9rem;
    height: 0.9rem;

    font-size: 0.9rem;
  }

  /* Input */

  .d1-app-header-search .d1-search-input {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    height: 100%;

    padding: 0 0.85rem;

    border: 0 !important;
    border-radius: var(--dig-radius-md);

    outline: 0 !important;

    background: transparent !important;

    color: var(--dig-color-text);

    font-size: clamp(0.76rem, 0.73rem + 0.07vw, 0.84rem);
    font-weight: var(--dig-font-weight-medium);
    line-height: 1;

    box-shadow: none !important;
    appearance: none;
  }

  .d1-app-header-search .d1-search-input:focus,
  .d1-app-header-search .d1-search-input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .d1-app-header-search .d1-search-input::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 0.78;
  }

  /* Results */

  .d1-app-header-search .d1-search-dropdown {
    top: calc(100% + 0.4rem);

    overflow: hidden;

    border: 1px solid var(--d1-enterprise-border-subtle);
    border-radius: var(--dig-radius-md);

    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(255, 255, 255, 0.025);
  }

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

  @media (max-width: 37.5rem) {
    .d1-search-item__top {
      gap: 0.75rem;
    }

    .d1-search-item__meta {
      flex-wrap: wrap;
    }
  }

  @media (max-width: 1023px) {
    .d1-app-header-search .d1-search-input-group {
      height: 42px;
      border-color: rgba(148, 163, 184, 0.16);
      background: linear-gradient(
        180deg,
        rgba(5, 19, 34, 0.92),
        rgba(3, 14, 25, 0.92)
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 28px rgba(0, 0, 0, 0.2);
    }

    .d1-app-header-search .d1-search-input-group:focus-within {
      border-color: rgba(37, 209, 219, 0.55);
      box-shadow:
        0 0 0 2px rgba(37, 209, 219, 0.08),
        0 14px 34px rgba(0, 0, 0, 0.26);
    }

    .d1-app-header-search .d1-search-input {
      font-size: 0.88rem;
      color: rgba(226, 232, 240, 0.94);
    }

    .d1-app-header-search .d1-search-input::placeholder {
      color: rgba(148, 163, 184, 0.74);
    }

    .d1-app-header-search .d1-search-submit {
      color: rgba(148, 163, 184, 0.82);
    }
  }  
}

}
/* ==========================================================================
   digentus-one.css - Complete UI Base Stylesheet for Web API Native Architecture
   ==========================================================================
   Purpose: Declarative, accessible, semantic, and responsive stylesheet
   to be used alongside Digentus One UI rendered entirely with Web APIs.
   Includes full support for: CSS Variables, Dark Mode, Reduced Motion,
   Container Queries, Cascade Layers, Scroll Snap, Viewport Units, 
   Subgrid, Anchor Positioning, and all modern Web APIs.
   ==========================================================================
*/

/* ==========================================================================
   digentus-one.css - Master Stylesheet
   ========================================================================== */

/* 1. Strict definition of layer order (from lowest to highest priority) */
@layer base, layouts, components, themes, utilities, animations, admin;

/* 2. Importing modules into their corresponding layers */

/* Components (Microstructures and Widgets) */

/* Layouts (Macro Page Structures) */

/* Themes (Colors, backgrounds, global typography) */

/* ==========================================================================
   2. Layer 'base'
   ========================================================================== */
@layer base {
  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
   * =========================================================================
   * Root Variable Definitions (Refactored with HSL & Auto-Contrast Logic)
   * =========================================================================
   */
  :root {
    /* ==========================================================================
   Typography
   ========================================================================== */

    --dig-font-sans:
      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;

    --dig-font-mono:
      "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas,
      "Liberation Mono", monospace;

    --dig-font-primary: var(--dig-font-sans);
    --dig-font-secondary: var(--dig-font-sans);
    /* --- A) HSL Color Primitives (Updated for Digentus One Official Brand) ---
       Base Colors: #0A1B2A (Primary), #25D1DB (Secondary), #E6EDF3 (Text)
    */
    /* Primary: #0A1B2A */
    --dig-hue-primary: 208;
    --dig-saturation-primary: 62%;
    --dig-lightness-primary: 0.1;

    /* Secondary: #25D1DB */
    --dig-hue-secondary: 183;
    --dig-saturation-secondary: 71%;
    --dig-lightness-secondary: 0.5;

    /* Accent: Same as Secondary */
    --dig-hue-accent: 183;
    --dig-saturation-accent: 71%;
    --dig-lightness-accent: 0.5;

    /* Text: #E6EDF3 */
    --dig-hue-text: 210;
    --dig-saturation-text: 29%;
    --dig-lightness-text: 0.2; /* Dark for light mode base */

    /* Semantic Colors */
    --dig-hue-success: 153;
    --dig-saturation-success: 84%;
    --dig-lightness-success: 0.35;
    --dig-hue-warning: 38;
    --dig-saturation-warning: 92%;
    --dig-lightness-warning: 0.5;
    --dig-hue-danger: 358;
    --dig-saturation-danger: 84%;
    --dig-lightness-danger: 0.6;
    --dig-hue-info: 217;
    --dig-saturation-info: 91%;
    --dig-lightness-info: 0.6;

    /* Backgrounds */
    --dig-hue-bg: 0;
    --dig-saturation-bg: 0%;
    --dig-lightness-bg: 1; /* White */
    --dig-hue-bg-alt: 210;
    --dig-saturation-bg-alt: 40%;
    --dig-lightness-bg-alt: 0.96;
    --dig-hue-border: 215;
    --dig-saturation-border: 16%;
    --dig-lightness-border: 0.89;

    /* --- Auto-Contrast Logic (Simplified for stability) --- */
    --contrast-threshold: 0.6;

    /* Note: If clamp() causes an error, use a fixed value temporarily */
    --is-light: 1;
    --auto-contrast-lightness: 0.2;

    /* Neutral text primitives */

    --dig-hue-light: 210;
    --dig-saturation-light: 29%;
    --dig-lightness-light: 0.93;

    --dig-hue-muted: 208;
    --dig-saturation-muted: 22%;
    --dig-lightness-muted: 0.38;

    /*
     * -----------------------------------------------------------------------
     * B) Composite Color Variables (Reconstructing Percentage)
     * -----------------------------------------------------------------------
     * We reconstruct the final percentage value ONLY when passing it to the hsl() function.
     * This keeps all intermediate calculations pure and unit-less.
     */

     --dig-color-white: #ffffff;
    
     --d1-login-placeholder-text: #64748b;

     --dig-color-operational: #dbfe01;

    /* Brand Colors */
    --dig-color-primary: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc(var(--dig-lightness-primary) * 100%)
    );
    --dig-color-primary-light: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) + 0.1) * 100%)
    );
    --dig-color-primary-dark: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) - 0.05) * 100%)
    );

    --dig-color-secondary: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc(var(--dig-lightness-secondary) * 100%)
    );
    --dig-color-secondary-light: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) + 0.1) * 100%)
    );
    --dig-color-secondary-dark: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) - 0.1) * 100%)
    );

    --dig-color-accent: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%)
    );
    
    --dig-color-accent-light: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) + 0.15) * 100%)
    );
    --dig-color-accent-dark: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) - 0.15) * 100%)
    );    

    /* Semantic Colors */
    --dig-color-success: hsl(
      var(--dig-hue-success),
      var(--dig-saturation-success),
      calc(var(--dig-lightness-success) * 100%)
    );
    --dig-color-warning: hsl(
      var(--dig-hue-warning),
      var(--dig-saturation-warning),
      calc(var(--dig-lightness-warning) * 100%)
    );
    --dig-color-danger: hsl(
      var(--dig-hue-danger),
      var(--dig-saturation-danger),
      calc(var(--dig-lightness-danger) * 100%)
    );
    --dig-color-info: hsl(
      var(--dig-hue-info),
      var(--dig-saturation-info),
      calc(var(--dig-lightness-info) * 100%)
    );

    --dig-color-border-on-dark: color-mix(
      in srgb,
      var(--dig-color-white) 16%,
      var(--dig-color-primary-dark)
    );    

    --dig-color-text-on-dark: var(--dig-color-white);

    --dig-color-text-on-dark-muted: color-mix(
      in srgb,
      var(--dig-color-white) 72%,
      transparent
    );

    /* --- Alert Background & Border Colors ---
       We create dedicated variables for the alert states.
       They use a very low lightness and saturation for a subtle background tint.
    */
    --dig-color-success-bg: hsl(var(--dig-hue-success), 90%, 95%);
    --dig-color-success-border: hsl(var(--dig-hue-success), 90%, 85%);
    --dig-color-success-text: hsl(var(--dig-hue-success), 80%, 25%);

    --dig-color-warning-bg: hsl(var(--dig-hue-warning), 100%, 95%);
    --dig-color-warning-border: hsl(var(--dig-hue-warning), 100%, 85%);
    --dig-color-warning-text: hsl(var(--dig-hue-warning), 90%, 30%);

    --dig-color-danger-bg: hsl(var(--dig-hue-danger), 100%, 95%);
    --dig-color-danger-border: hsl(var(--dig-hue-danger), 100%, 85%);
    --dig-color-danger-text: hsl(var(--dig-hue-danger), 80%, 35%);

    --dig-color-info-bg: hsl(var(--dig-hue-info), 100%, 95%);
    --dig-color-info-border: hsl(var(--dig-hue-info), 100%, 85%);
    --dig-color-info-text: hsl(var(--dig-hue-info), 80%, 30%);

    /* Operational / Live State: #DBFE01 */
    --dig-hue-operational: 68.3;
    --dig-saturation-operational: 99.2%;
    --dig-lightness-operational: 0.5;

    /* Neutral & UI Colors */
    --dig-color-text: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      calc(var(--dig-lightness-text) * 100%)
    );
    --dig-color-text-light: hsl(
      var(--dig-hue-light),
      var(--dig-saturation-light),
      calc(var(--dig-lightness-light) * 100%)
    );
    --dig-color-text-muted: hsl(
      var(--dig-hue-muted),
      var(--dig-saturation-muted),
      calc(var(--dig-lightness-muted) * 100%)
    );

    --dig-color-bg: hsl(
      var(--dig-hue-bg),
      var(--dig-saturation-bg),
      calc(var(--dig-lightness-bg) * 100%)
    );
    --dig-color-bg-alt: hsl(
      var(--dig-hue-bg-alt),
      var(--dig-saturation-bg-alt),
      calc(var(--dig-lightness-bg-alt) * 100%)
    );

    --dig-color-border: hsl(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%)
    );
    --dig-color-border-subtle: hsla(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%),
      0.5
    );
    --dig-color-operational: hsl(
      var(--dig-hue-operational),
      var(--dig-saturation-operational),
      calc(var(--dig-lightness-operational) * 100%)
    );

    /* Special Colors with Alpha Channel */
    --dig-color-focus-ring: hsla(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%),
      0.35
    );

    /* --- C) Automatic Contrast Logic ("The Brain") - Bulletproof Version --- */
    --contrast-threshold: 0.6; /* Unit-less threshold (60%) */

    /* --bg-lightness will be set by components (e.g., a button) as a unit-less value */
    --is-light: clamp(
      0,
      (var(--bg-lightness, 0) - var(--contrast-threshold)) * 9999,
      1
    );

    /* This formula now calculates the final LIGHTNESS value as a unit-less number (e.g., 0.20 or 1.0) */
    --auto-contrast-lightness: calc(
      (var(--is-light) * var(--dig-lightness-text)) +
        ((1 - var(--is-light)) * var(--dig-lightness-light))
    );

    /*
     * -----------------------------------------------------------------------
     * D) Non-Color System Variables (The Design System Foundation)
     * -----------------------------------------------------------------------
     * This section defines all other foundational design tokens for the UI,
     * including typography, fluid spacing, border radii, transitions,
     * layout dimensions, responsive breakpoints, shadows, and z-index stacking.
     * These variables are used by all components to ensure a consistent
     * and maintainable visual system.
     */

    /* Fluid Typography Scale */

    --dig-font-size-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);

    --dig-font-size-small: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);

    --dig-font-size-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);

    --dig-font-size-large: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);

    --dig-font-size-h6: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);

    --dig-font-size-h5: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

    --dig-font-size-h4: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);

    --dig-font-size-h3: clamp(1.5rem, 1.28rem + 0.9vw, 2.125rem);

    --dig-font-size-h2: clamp(2rem, 1.65rem + 1.45vw, 3rem);

    --dig-font-size-h1: clamp(2.75rem, 2.15rem + 2.45vw, 4.5rem);

    /* Editorial Typography */

    --dig-font-weight-regular: 400;
    --dig-font-weight-medium: 500;
    --dig-font-weight-semibold: 600;
    --dig-font-weight-bold: 700;
    --dig-font-weight-heavy: 800;

    --dig-line-height-tight: 1.05;
    --dig-line-height-heading: 1.15;
    --dig-line-height-body: 1.65;

    --dig-letter-spacing-tight: -0.035em;
    --dig-letter-spacing-heading: -0.02em;
    --dig-letter-spacing-label: 0.08em;
    --dig-letter-spacing-mono: 0.12em;

    /* Spacing System (Fluid) using clamp() for responsive gutters and margins */
    --dig-spacing-xxs: clamp(
      0.25rem,
      0.2rem + 0.25vw,
      0.375rem
    ); /* ~4px to 6px */
    --dig-spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* ~8px to 12px */
    --dig-spacing-sm: clamp(
      0.75rem,
      0.6rem + 0.75vw,
      1.125rem
    ); /* ~12px to 18px */
    --dig-spacing-md: clamp(
      1.5rem,
      1.2rem + 1.5vw,
      2.25rem
    ); /* ~24px to 36px */
    --dig-spacing-lg: clamp(
      2.25rem,
      1.8rem + 2.25vw,
      3.375rem
    ); /* ~36px to 54px */
    --dig-spacing-xl: clamp(3rem, 2.4rem + 3vw, 4.5rem); /* ~48px to 72px */
    --dig-form-grid-gap: var(--dig-spacing-md);

    --dig-form-control-padding: var(--dig-spacing-xs);
    --dig-form-control-margin: 0;

    /* Border Radius */
    --dig-radius-xs: 2px;
    --dig-radius-sm: 4px;
    --dig-radius-md: 8px;
    --dig-radius-lg: 16px;
    --dig-radius-full: 9999px; /* A large value to ensure perfect circles/pills */
    --dig-button-radius: var(--dig-radius-full);

    /* Transitions & Animations */
    --dig-transition-fast: 0.15s ease-in-out;
    --dig-transition-base: 0.3s ease-in-out;
    --dig-transition-slow: 0.5s ease-in-out;
    --dig-animation-duration: 0.5s;

    /* ==========================================================================
   Layout
   ========================================================================== */

    --dig-sidebar-width: 21.875rem;

    --dig-container-max-width: 90rem;
    --dig-container-wide: 100rem;
    --dig-reading-width: 47.5rem;
    --dig-text-max-width: 65ch;

    --dig-page-gutter: clamp(1.25rem, 2.5vw, 2.5rem);

    --dig-section-space: clamp(5rem, 8vw, 8rem);

    --dig-section-space-compact: clamp(3.5rem, 6vw, 5.5rem);

    --dig-header-height: clamp(4.25rem, 4rem + 1vw, 5rem);

    /* Responsive Breakpoints */
    --dig-breakpoint-sm: 576px;
    --dig-breakpoint-md: 768px;
    --dig-breakpoint-lg: 992px;
    --dig-breakpoint-xl: 1200px;

    /* Shadows (Subtle and layered) */
    --dig-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dig-shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --dig-shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --dig-shadow-xl:
      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Z-index Stack (Manages layering of UI elements) */
    --dig-z-index-dropdown: 1000;
    --dig-z-index-sticky: 1020;
    --dig-z-index-fixed: 1030;
    --dig-z-index-modal-backdrop: 1040;
    --dig-z-index-modal: 1050;
    --dig-z-index-popover: 1070;
    --dig-z-index-tooltip: 1080;
    --dig-z-index-toast: 1090;
  }

  /*
 * ========================================================================
 * SAFE GLOBAL RESETS
 * ========================================================================
 * These rules are safe to apply globally because they target root elements
 * or use universal selectors that establish a baseline without destroying layouts.
 */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin ONLY from the body. This is a common and generally safe reset. */
  body {
    margin: 0;
  }

  /*
 * ========================================================================
 * SCOPED RESETS FOR FRAMEWORK COMPONENTS
 * ========================================================================
 * These rules are DANGEROUS if applied globally. We scope them so they ONLY
 * apply to elements inside our controlled containers (.dig-content-flow for frontend,
 * .dig-admin-context for our custom admin pages). This prevents any conflict
 * with the native WordPress Admin UI.
 */
  :is(.dig-content-flow, .dig-admin-context)
    :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  /* Set core root defaults */
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
    scroll-padding-top: var(--dig-header-height);
  }

  /* Set SAFE core body defaults */
  body {
    min-height: 100dvh;
    background-color: var(--dig-color-bg); /* Background color is safe */
    margin: 0; /* The margin reset is here */
  }

  /* Apply typographic styles ONLY within framework-controlled containers */
  :is(.dig-content-flow, .dig-admin-context) {
    font-family: var(--dig-font-secondary);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    line-height: var(--dig-line-height-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--dig-font-sans);
    font-optical-sizing: auto;
  }
  code,
  pre,
  kbd,
  samp {
    font-family: var(--dig-font-mono);
  }

  .metric,
  .table {
    font-feature-settings: "tnum" 1;
  }

  .dig-table td:not(:first-child),
  .dig-table th:not(:first-child) {
    white-space: nowrap;
    text-align: right;
  }

  /* Remove list styles on ul, ol elements */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Make images easier to work with */
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  :is(
    .dig-btn,
    .dig-form-control,
    .dig-form-check-input,
    .dig-form-switch input,
    [class*="dirpros-input"]
  ) {
    font: inherit;
  }

  /* Remove all animations, transitions and smooth scroll for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    :where(*, *::before, *::after) {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .dig-skeleton {
      animation: none;
    }
  }

  /* Focus styles */
  :focus-visible {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Remove focus styles for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-track {
    background: var(--dig-color-bg-alt);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--dig-color-primary);
    border-radius: var(--dig-radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--dig-color-primary-light);
  }

  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--dig-color-primary) var(--dig-color-bg-alt);
  }

  /* Scoped Typography: Headings will only use framework styles inside designated containers. */
  :is(.dig-content-flow, .dig-admin-context) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--dig-font-primary);
    font-weight: var(--dig-font-weight-bold);
    color: var(--dig-color-primary);
    line-height: var(--dig-line-height-heading);
    letter-spacing: var(--dig-letter-spacing-heading);
    margin-bottom: var(--dig-spacing-sm);
    text-wrap: balance;
  }
  :is(.dig-content-flow, .dig-admin-context) h1 {
    font-size: var(--dig-font-size-h1);
  }
  :is(.dig-content-flow, .dig-admin-context) h2 {
    font-size: var(--dig-font-size-h2);
  }
  :is(.dig-content-flow, .dig-admin-context) h3 {
    font-size: var(--dig-font-size-h3);
  }
  :is(.dig-content-flow, .dig-admin-context) h4 {
    font-size: var(--dig-font-size-h4);
  }
  :is(.dig-content-flow, .dig-admin-context) h5 {
    font-size: var(--dig-font-size-h5);
  }
  :is(.dig-content-flow, .dig-admin-context) h6 {
    font-size: var(--dig-font-size-h6);
    color: var(--dig-color-text-muted);
  }

  /* Scoped Paragraphs */
  :is(.dig-content-flow, .dig-admin-context) p {
    margin-bottom: var(--dig-spacing-xxs);
    max-width: var(--dig-text-max-width);
    text-wrap: pretty;
  }

  /* Links */
  /*
 * ========================================================================
 * The New, SAFE Global Link Reset
 * ========================================================================
 * We REMOVE `color: inherit;` from the global scope. The only safe global
 * resets are for text-decoration and transitions. Color will now be handled
 * explicitly only within our controlled contexts.
 */
  a {
    text-decoration: none; /* This is safe and desirable */
    transition:
      color var(--dig-transition-fast),
      text-decoration-color var(--dig-transition-fast); /* This is safe */
  }

  /* ==========================================================================
   Interactive Affordances
   ========================================================================== */

  :where(
    a[href],
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    input[type="button"]:not(:disabled),
    input[type="submit"]:not(:disabled),
    input[type="reset"]:not(:disabled),
    summary
  ) {
    cursor: pointer;
    touch-action: manipulation;
  }

  :where(button:disabled, input:disabled, [aria-disabled="true"]) {
    cursor: not-allowed;
  }

  /*
 * Defensive override for WordPress themes that assign a default cursor
 * directly to anchors with greater cascade priority.
 */
  a[href] {
    cursor: pointer;
    -webkit-tap-highlight-color: color-mix(
      in srgb,
      var(--dig-color-secondary) 18%,
      transparent
    );
  }

  :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"])) {
    -webkit-tap-highlight-color: color-mix(
      in srgb,
      var(--dig-color-secondary) 18%,
      transparent
    );
  }

  /* ==========================================================================
   Global Focus States
   ========================================================================== */

  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 2px solid var(--dig-color-secondary);
    outline-offset: 3px;
  }

  :where(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex="-1"])
    ):focus:not(:focus-visible) {
    outline: none;
  }

  /* ==========================================================================
   Global Interactive States
   ========================================================================== */

  :where(
    a[href],
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"])
  ) {
    -webkit-tap-highlight-color: color-mix(
      in srgb,
      var(--dig-color-secondary) 18%,
      transparent
    );
  }

  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 2px solid var(--dig-color-secondary);
    outline-offset: 3px;
  }

  :where(
      a,
      button,
      input,
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex="-1"])
    ):focus:not(:focus-visible) {
    outline: none;
  }

  :where(
    a[href],
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"])
  ) {
    touch-action: manipulation;
  }

  /*
 * ========================================================================
 * Scoped Link Styling for Framework Content
 * ========================================================================
 * Now, we apply our desired link colors ONLY inside our framework's containers.
 * We also explicitly exclude any element styled as a button (both our framework's
 * .dig-btn and WordPress's .button) to prevent any possible conflict.
 */
  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button) {
    color: var(--dig-color-primary); /* Our default framework link color */
  }

  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button):hover,
  :is(.dig-content-flow, .dig-admin-context)
    a:not(.dig-btn):not(.button):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Opt-in Framework Link Styles */
  /* Apply your custom link styles ONLY inside your designated containers. */
  .dig-content-flow a:not(.dig-btn),
  .dig-admin-context a:not(.dig-btn) {
    color: var(--dig-color-primary);
    text-decoration: none;
  }

  .dig-content-flow a:not(.dig-btn):hover,
  .dig-content-flow a:not(.dig-btn):focus,
  .dig-admin-context a:not(.dig-btn):hover,
  .dig-admin-context a:not(.dig-btn):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Lists */
  /**
 * Modern List Reset
 * Instead of applying padding globally, we remove default padding and margin.
 * Specific components should define their own list styles. This prevents
 * unintended side effects in third-party UIs like the WordPress admin.
 */
  ul,
  ol {
    /* Remove browser-default indentation and margin */
    padding: 0;
    margin: 0;
    /* The list-style is kept, to be overridden by components as needed */
  }

  /* We can keep a default bottom margin for lists that are direct children
   of a typical content flow, but NOT for all lists everywhere. */
  .dig-content-flow > ul,
  .dig-content-flow > ol {
    margin-bottom: var(--dig-spacing-sm);
    padding-left: var(--dig-spacing-md); /* Apply indentation only here */
  }

  .dig-content-area li {
    margin-bottom: var(--dig-spacing-xs);
  }

  /* Blockquotes */
  blockquote {
    border-left: 4px solid var(--dig-color-accent);
    padding-left: var(--dig-spacing-sm);
    color: var(--dig-color-primary);
    font-style: italic;
    margin: var(--dig-spacing-md) 0;
  }

  /* Code */
  code {
    font-family: var(--dig-font-mono);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
  }

  pre {
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
    overflow-x: auto;
    margin-bottom: var(--dig-spacing-md);
  }

  pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Horizontal Rule */
  hr {
    /* We only reset the border and height globally. */
    border: 0;
    height: 1px;
    background-color: var(--dig-color-border);
    margin: 0; /* The global reset now removes all margins. */
  }

  /* SCOPED MARGINS: Apply our custom spacing ONLY inside our containers. */
  :is(.dig-content-flow, .dig-admin-context) hr {
    margin: var(--dig-spacing-md) 0;
  }

  /* Text-level semantics */
  strong {
    font-weight: 700;
  }

  em {
    font-style: italic;
  }

  small {
    font-size: var(--dig-font-size-small);
  }

  mark {
    background-color: var(--dig-color-secondary);
    color: var(--dig-color-primary);
    padding: 0 0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-decoration-style: dotted;
    cursor: help;
  }

  @media print {
    @layer print {
      *,
      *::before,
      *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      body {
        font-size: 12pt;
        line-height: 1.5;
      }

      a,
      a:visited {
        text-decoration: underline;
      }

      a[href^="#"]::after,
      a[href^="javascript:"]::after {
        content: "";
      }

      pre,
      blockquote {
        page-break-inside: avoid;
      }

      tr,
      img {
        page-break-inside: avoid;
      }

      img {
        max-width: 100% !important;
      }

      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3;
      }

      h2,
      h3 {
        page-break-after: avoid;
      }

      .no-print {
        display: none !important;
      }
    }
  }

  /* ==========================================================================
   Component: BlurHash Image Placeholder (Anti-Layout-Shift Version)
   ========================================================================== */
  .dig-image-blurhash-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* O var(--image-aspect-ratio, 16 / 9) */
    background-color: var(--dig-color-bg-alt);
  }

  .dig-blurhash-canvas,
  .dig-blurhash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-blurhash-canvas {
    z-index: 1;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image.is-loaded {
    opacity: 1;
  }

  .dig-content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
  }
}

@layer layouts {
  /* ==========================================================================
     Site Shell
     ========================================================================== */

  .dig-site-wrapper {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 100dvh;

    overflow-x: clip;
  }

  .d1-header-area,
  .d1-footer-area {
    flex: 0 0 auto;
    min-width: 0;
  }

  .d1-main {
    flex: 1 0 auto;

    min-width: 0;
    padding-bottom: var(--dig-section-space-compact);
  }

  .d1-main:has(> .dig-cta-strip:last-child) {
    padding-bottom: 0;
  }

  .dig-skip-link {
    position: fixed;
    z-index: var(--dig-z-index-toast);
    top: var(--dig-spacing-xs);
    left: var(--dig-spacing-xs);

    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);

    background: var(--dig-color-primary);
    border-radius: var(--dig-radius-sm);

    color: var(--dig-color-white);
    font-size: var(--dig-font-size-small);
    font-weight: var(--dig-font-weight-semibold);
    text-decoration: none;

    transform: translateY(calc(-100% - var(--dig-spacing-md)));

    transition: transform var(--dig-transition-fast);
  }

  .dig-skip-link:focus-visible {
    outline: 2px solid var(--dig-color-secondary);
    outline-offset: 2px;

    transform: translateY(0);
  }
}

/* ==========================================================================
   3. Layer 'components'
   ========================================================================== */
@layer components {
  .dig-skeleton {
    background-color: var(--dig-color-bg-alt);
    background-image: linear-gradient(
      90deg,
      var(--dig-color-bg-alt) 25%,
      var(--dig-color-bg) 50%,
      var(--dig-color-bg-alt) 75%
    );
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite linear;
    border-radius: var(--dig-radius-sm);
    color: transparent; /* Hides text inside a skeleton element */
  }

  /*
   * 1. The Row Container (`.dig-form-row`)
   * This is the flex container. The magic is in the negative margins.
   */
  .dig-form-row {
    display: flex;
    flex-wrap: wrap;

    /* Define the horizontal gap as a variable for easy tuning. */
    --dig-grid-gap-x: var(--dig-spacing-md, 1.5rem);

    /* The negative margin on each side is HALF of the total desired gap. */
    /* This pulls the child columns outwards, aligning them perfectly with the page grid. */
    margin-right: calc(var(--dig-grid-gap-x) / -2);
    margin-left: calc(var(--dig-grid-gap-x) / -2);
  }

  /* Add a consistent vertical gap between rows. */
  .dig-form-row + .dig-form-row {
    margin-top: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 2. The Column Items (`.dig-form-group`)
   * These are the flex items. The padding creates the gutter.
   */
  .dig-form-row > .dig-form-group {
    box-sizing: border-box; /* Crucial for correct padding calculation. */

    /* The horizontal "gutter" is created by adding padding on each side of the column. */
    /* The padding value is HALF of the total desired gap. */
    padding-right: calc(var(--dig-grid-gap-x) / 2);
    padding-left: calc(var(--dig-grid-gap-x) / 2);

    /* A consistent bottom margin for vertical rhythm within rows. */
    margin-bottom: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 3. Column Width Definitions (`.dig-col-*`)
   * We use `flex-basis` for the ideal width. The `max-width` prevents
   * shrinking/growing issues. `flex-grow: 0` is also important.
   */
  [class*="dig-col-"] {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .dig-col-100 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .dig-col-75 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .dig-col-66 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
  }
  .dig-col-50 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .dig-col-33 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
  .dig-col-25 {
    flex-basis: 25%;
    max-width: 25%;
  }

  /*
   * 4. Responsive Stacking for Mobile
   */
  @media (max-width: var(--dig-breakpoint-md)) {
    html {
      scroll-padding-top: calc(var(--dig-header-height) / 2);
    }
    /* On smaller screens, the row no longer needs negative margins. */
    .dig-form-row {
      margin-right: 0;
      margin-left: 0;
    }

    /* Each column now takes up the full width and has its padding reset. */
    /* We use a direct child selector for precision. */
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important; /* Force full width */
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: var(--dig-spacing-md);
    }

    .dig-form-row > .dig-form-group:last-child {
      margin-bottom: 0;
    }
  }

  @container (max-width: 400px) {
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important;
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Container */
  .dig-container {
    width: min(
      calc(100% - (2 * var(--dig-page-gutter))),
      var(--dig-container-max-width)
    );

    margin-inline: auto;
  }

  .dig-container--wide {
    max-width: var(--dig-container-wide);
  }

  .dig-container--reading {
    max-width: var(--dig-reading-width);
  }

  /* Layout Patterns */
  .dig-layout-z {
    display: grid;
    grid-template-areas:
      "header header"
      "left right"
      "footer footer";
    grid-template-columns: 1fr 1fr;
    gap: var(--dig-spacing-md);
  }

  .dig-layout-z > header {
    grid-area: header;
  }
  .dig-layout-z > .left {
    grid-area: left;
  }
  .dig-layout-z > .right {
    grid-area: right;
  }
  .dig-layout-z > footer {
    grid-area: footer;
  }

  .dig-layout-f {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dig-spacing-md);
  }

  /* Grid System */
  .dig-grid {
    display: grid;
    gap: var(--dig-spacing-md);
  }

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

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

  /* Custom Grid for Dossier (Left column wider) */
  .dig-grid-cols-3 > .dig-col:first-child {
    grid-column: span 2; /* Ocupa 2/3 del espacio */
  }
  .dig-grid-cols-3 > .dig-col:last-child {
    grid-column: span 1; /* Ocupa 1/3 del espacio */
  }

  /* Subgrid Support */
  @supports (grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
    }
  }

  /* Flex Utilities */
  .dig-flex {
    display: flex;
    gap: var(--dig-spacing-sm);
  }

  .dig-flex-col {
    flex-direction: column;
  }

  .dig-flex-wrap {
    flex-wrap: wrap;
  }

  .dig-items-center {
    align-items: center;
  }

  .dig-justify-between {
    justify-content: space-between;
  }

  /* Spacing Utilities */
  .dig-gap-xs {
    gap: var(--dig-spacing-xs);
  }
  .dig-gap-sm {
    gap: var(--dig-spacing-sm);
  }
  .dig-gap-md {
    gap: var(--dig-spacing-md);
  }
  .dig-gap-lg {
    gap: var(--dig-spacing-lg);
  }
  .dig-gap-xl {
    gap: var(--dig-spacing-xl);
  }

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

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

  /* Full viewport sections */
  .dig-full-viewport {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Scroll Snap */
  .dig-scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100dvh;
  }

  .dig-scroll-section {
    scroll-snap-align: start;
    min-height: 100dvh;
  }

  /* Container Queries */
  .dig-card-container {
    container-type: inline-size;
  }

  @container (min-width: 480px) {
    .dig-card {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Anchor Positioning */
  .dig-tooltip {
    position: absolute;
    anchor-name: --tooltip-anchor;
  }

  .dig-tooltip-content {
    position: absolute;
    bottom: anchor(--tooltip-anchor top);
    left: anchor(--tooltip-anchor left);
  }

  .dig-grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--dig-spacing-lg);
  }

  /* --- UNICORN MARKETING STYLES --- */

  /* 1. Unicorn Cards */
  .dig-card-feature {
    background: #fff;
    border: 1px solid var(--dig-color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
  }
  .dig-card-feature:hover {
    transform: translateY(-5px);
    border-color: var(--dig-color-secondary);
    box-shadow: 0 20px 40px -10px rgba(37, 209, 219, 0.15); /* Secondary color shadow */
  }

  /* 2. Icon Badges */
  .dig-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(37, 209, 219, 0.1); /* Secondary with opacity */
    color: var(--dig-color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* 3. Process Steps (Connectors) */
  .dig-step-connector {
    position: relative;
  }

  @media (min-width: 992px) {
    .dig-step-connector:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 24px;
      left: 60%;
      width: 80%;
      height: 2px;
      background: linear-gradient(
        90deg,
        var(--dig-color-border) 50%,
        transparent 100%
      );
      z-index: 0;
    }
  }

  /* Update Process Steps */
  .dig-step-number {
    color: var(--dig-color-secondary);
    opacity: 0.4;
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
  }
  .dig-step h3 {
    color: var(--dig-color-primary);
    margin-top: -1rem; /* Slightly overlap */
    position: relative;
    z-index: 2;
  }

  /*
 * ========================================================================
 * Layout Component: Admin UI Sidebar Layout
 * ========================================================================
 * Provides a two-column layout for application-like interfaces in the admin.
 */
  .dig-layout-sidebar {
    display: grid;
    /* Sidebar width is fixed, main content is flexible */
    grid-template-columns: var(--dig-sidebar-width) 1fr;
    gap: var(--dig-spacing-md);
    /* Make the layout fill the available vertical space */
    height: calc(
      100vh - 180px
    ); /* Adjust 180px based on WP admin header/footer height */
    overflow: hidden; /* Prevent double scrollbars on the main wrapper */
  }

  .dig-layout-sidebar__sidebar {
    background-color: var(--dig-color-bg-alt);
    border-right: 1px solid var(--dig-color-border);
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling ONLY for the sidebar content */
  }

  .dig-layout-sidebar__main {
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling for the main content (iframe) */
  }

  .dig-layout-sidebar__main iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg); /* For loading state */
  }

  /* Responsive behavior for the admin layout */
  @media (max-width: var(--dig-breakpoint-lg)) {
    .dig-layout-sidebar {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
      height: auto;
      overflow: visible;
    }
    .dig-layout-sidebar__sidebar {
      border-right: none;
      border-bottom: 1px solid var(--dig-color-border);
    }
  }

  /*
 * ========================================================================
 * Component: Buttons (Design Token Architecture + Progressive Contrast)
 * ========================================================================
 * Goals:
 * - Variants only override tokens (no duplicated logic).
 * - Base consumes tokens.
 * - Auto-contrast via color-contrast() when supported.
 * - Safe fallbacks for legacy browsers.
 */

  /* ------------------------------------------------------------------------
 * 1) Base (structure + token defaults)
 * ------------------------------------------------------------------------ */
  .dig-btn {
    /* --- Token Defaults: overridden by button variants --- */
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-fg: var(--dig-color-text);

    --btn-bg-hover: color-mix(in srgb, var(--btn-bg), black 10%);

    --btn-border-hover: var(--btn-border);
    --btn-shadow-hover: var(--dig-shadow-md);

    /* --- Structure & Typography --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dig-spacing-xs);

    min-width: 0;
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);

    border: 1.5px solid var(--btn-border);
    border-radius: var(--dig-radius-md);

    color: var(--btn-fg);
    background-color: var(--btn-bg);

    font-family: var(--dig-font-primary);
    font-weight: var(--dig-font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    user-select: none;

    transition:
      background-color var(--dig-transition-fast),
      border-color var(--dig-transition-fast),
      color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast),
      opacity var(--dig-transition-fast);
  }

  .dig-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    box-shadow: var(--btn-shadow-hover);
  }

  .dig-btn:active:not(:disabled):not([aria-disabled="true"]) {
    opacity: 0.82;
  }

  .dig-btn:disabled,
  .dig-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.48;
    pointer-events: none;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .dig-btn {
      transition:
        background-color var(--dig-transition-fast),
        border-color var(--dig-transition-fast),
        color var(--dig-transition-fast),
        box-shadow var(--dig-transition-fast);
    }
    .dig-btn:hover {
      transform: none;
      will-change: auto;
    }
    .dig-btn:active {
      transform: none;
    }
  }

  /* ------------------------------------------------------------------------
 * 3) Variants (token overrides only)
 * ------------------------------------------------------------------------ */

  /* Primary */
  .dig-btn-primary,
  .dig-btn--primary {
    --btn-bg: var(--dig-color-primary);
    --btn-border: var(--dig-color-primary);
    --btn-fg: #ffffff; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-primary), white 8%);
    --btn-border-hover: var(--dig-color-primary);
  }

  /* Secondary */
  .dig-btn-secondary,
  .dig-btn--secondary {
    --btn-bg: var(--dig-color-secondary);
    --btn-border: var(--dig-color-secondary);
    --btn-fg: #000000; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-secondary), black 10%);
    --btn-border-hover: var(--dig-color-secondary);
  }

  /* Accent (optional) */
  .dig-btn-accent,
  .dig-btn--accent {
    --btn-bg: var(--dig-color-accent);
    --btn-border: var(--dig-color-accent);
    --btn-fg: #0a1b2a; /* fallback */
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-accent), black 10%);
    --btn-border-hover: var(--dig-color-accent);
  }

  /* Outline */
  .dig-btn-outline,
  .dig-btn--outline {
    --btn-bg: transparent;
    --btn-border: var(--dig-color-primary);
    --btn-fg: var(--dig-color-primary);
    --btn-bg-hover: var(--dig-color-bg-alt);
    --btn-border-hover: var(--dig-color-primary);
  }

  /* Ghost */
  .dig-btn-ghost,
  .dig-btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-fg: var(--dig-color-primary);
    --btn-bg-hover: color-mix(in srgb, var(--dig-color-bg), black 6%);
    --btn-border-hover: transparent;
  }

  /* ------------------------------------------------------------------------
 * 4) Progressive enhancement: automatic foreground contrast
 * ------------------------------------------------------------------------ */
  /*
  If supported, the button auto-selects white/black text depending on bg.
  Outline/ghost stay brand-colored since bg may be transparent.
  */
  @supports (color: color-contrast(white vs black)) {
    .dig-btn {
      --btn-fg: color-contrast(var(--btn-bg) vs white, black);
    }

    .dig-btn-outline,
    .dig-btn--outline,
    .dig-btn-ghost,
    .dig-btn--ghost {
      --btn-fg: var(--dig-color-primary);
    }
  }

  /* ------------------------------------------------------------------------
 * 5) Sizes (keep your API)
 * ------------------------------------------------------------------------ */
  .dig-btn-xs,
  .dig-btn--xs {
    padding: var(--dig-spacing-xxs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-sm,
  .dig-btn--sm {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-md,
  .dig-btn--md {
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-size: 0.95rem;
  }

  .dig-btn-lg,
  .dig-btn--lg {
    padding: var(--dig-spacing-md) var(--dig-spacing-lg);
    font-size: var(--dig-font-size-h5);
  }

  .dig-btn-xl,
  .dig-btn--xl {
    padding: var(--dig-spacing-lg) var(--dig-spacing-xl);
    font-size: var(--dig-font-size-h4);
  }

  /* ------------------------------------------------------------------------
 * 6) Icons helpers
 * ------------------------------------------------------------------------ */
  .dig-btn--with-icon {
    gap: var(--dig-spacing-xs);
  }

  .dig-btn__icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
  }

  .dig-btn__icon--start {
    order: -1;
  }
  .dig-btn__icon--end {
    order: 1;
  }

  /* ------------------------------------------------------------------------
 * 7) High contrast mode support
 * ------------------------------------------------------------------------ */
  @media (prefers-contrast: high) {
    .dig-btn {
      border-width: 1.5px;
    }
    .dig-btn:focus-visible {
      outline-width: 3px;
      outline-offset: 1px;
    }
    .dig-btn-outline,
    .dig-btn--outline {
      border-width: 1.5px;
    }
  }

  /* --- 12. PRINT STYLES --- */
  @media print {
    .dig-btn {
      background-color: #000 !important;
      color: #fff !important;
      border: 1px solid #000 !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .dig-btn-outline {
      background-color: transparent !important;
      color: #0b2239 !important;
      border: 1.5px solid #0b2239 !important;
    }
  }

  /* Cards */
  .dig-card {
    background: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-sm);
    overflow: hidden;
    transition:
      transform var(--dig-transition-base),
      box-shadow var(--dig-transition-base);
  }

  .dig-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dig-shadow-md);
  }

  .dig-card-header {
    padding: var(--dig-spacing-md);
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-card-body {
    padding: var(--dig-spacing-md);
  }

  .dig-card-footer {
    padding: var(--dig-spacing-md);
    border-top: 1px solid var(--dig-color-border);
  }

  /*
   * ========================================================================
   * Component: Integration Marketplace Cards
   * ========================================================================
   */
  .dig-integration-card {
    /* Smooth transition for hover effects */
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease;
    cursor: pointer;
    display: flex; /* Ensure it behaves as a flex container if needed */
    flex-direction: column;
    height: 100%; /* Make cards equal height in grid */
  }

  .dig-integration-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 10px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
    /* Use primary color or accent color for border on hover */
    border-color: var(--dig-color-primary);
  }

  /* Active State (Green Border & Subtle Background) */
  .dig-integration-card--active {
    border-color: var(--dig-color-success);
    background: linear-gradient(
      to bottom,
      var(--dig-color-bg),
      var(--dig-color-success-bg)
    );
  }

  /* Ensure the badge inside the active card looks correct */
  .dig-integration-card--active .dig-badge-success {
    background-color: var(--dig-color-success-bg);
    color: var(--dig-color-success-text);
    border: 1px solid var(--dig-color-success-border);
  }

  /* Forms */
  .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }

  /*
   * ========================================================================
   * Form Field UI Helpers (Required Indicators, Instructions, Errors)
   * ========================================================================
   */

  /*
   * Styles for the red asterisk (*) on required fields.
   */
  .dig-required-indicator {
    color: var(--dig-color-danger);
    font-weight: bold;
    margin-left: var(--dig-spacing-xxs);
  }

  /*
   * Styles for the wrapper of the actual input/select/textarea.
   */
  .dig-form-control-wrapper {
    position: relative; /* Useful for positioning icons inside inputs */
  }

  /*
   * Styles for instructional/help text below a field.
   */
  .dig-form-instructions {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
    margin-top: var(--dig-spacing-xs);
  }

  /*
   * Styles for the container of validation error messages.
   */
  .dig-field-errors {
    margin-top: var(--dig-spacing-xs);
  }

  .dig-error-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-error-item {
    color: var(--dig-color-danger);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
  }

  /*
 * ========================================================================
 * Component: Password Field with Visibility Toggle
 * ========================================================================
 * Styles for positioning the visibility toggle button inside the password
 * input field for a modern, clean user experience.
 */

  /*
 * 1. The Wrapper: `.dig-password-input-wrapper`
 * This is the container for both the input and the button. By setting
 * `position: relative`, it becomes the positioning context for the
 * absolutely positioned button inside it.
 */
  .dig-password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /*
 * 2. The Input Field
 * We add padding to the right side of the input field. This creates a
 * dedicated space for the toggle button, preventing the user's typed
 * text from overlapping with the button icon.
 */
  .dig-password-input-wrapper .dig-form-control {
    /* The padding needs to be wide enough for the button plus some breathing room.
       A value around 2.5em or 40px is usually a good starting point. */
    padding-right: 2.5em;
    width: 100%; /* Ensure the input still fills its container. */
  }

  /*
 * 3. The Toggle Button
 * This is the core of the technique. We use `position: absolute` to pull the
 * button out of the normal document flow and place it precisely where we want
 * it, visually "inside" the input field.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn {
    position: absolute;
    right: var(
      --dig-spacing-sm
    ); /* Position from the right edge. Uses your spacing variable. */
    top: 50%;
    transform: translateY(
      -50%
    ); /* This vertically centers the button perfectly. */

    /* Reset button styles for a clean, icon-only look */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--dig-color-text-muted); /* A subtle color for the icon. */
    height: 100%; /* Make the clickable area vertically fill the input. */
    display: inline-flex;
    align-items: center;

    /* Ensure it appears above the input field's content/border */
    z-index: 2;

    /* Smooth transition for color changes on hover/focus */
    transition: color var(--dig-transition-fast) ease-in-out;
  }

  /*
 * 4. Interaction States (Hover/Focus)
 * Provide clear visual feedback when the user interacts with the button.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn:hover,
  .dig-password-input-wrapper .dig-password-toggle-btn:focus-visible {
    color: var(--dig-color-primary); /* Use your primary color for emphasis. */
  }

  /* Remove default focus outline if you have a custom one via color change */
  .dig-password-input-wrapper .dig-password-toggle-btn:focus {
    outline: none;
  }

  /*
 * 5. The Dashicon inside the button
 * Adjust the icon size for optimal appearance.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    vertical-align: middle; /* Helps with pixel-perfect alignment. */
  }

  /* ==========================================================================
   Component: Image Selector
   ========================================================================== */
  .dig-image-selector-ui {
    display: flex;
    align-items: flex-start; /* Alinea los items arriba */
    gap: var(--dig-spacing-md);
  }

  .dig-image-preview-area {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--dig-color-bg-alt);
  }

  .dig-image-preview-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-image-placeholder {
    text-align: center;
    color: var(--dig-color-text-muted);
    font-size: var(--dig-font-size-small);
  }

  .dig-image-actions {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-btn-text-danger {
    background: none;
    border: none;
    padding: 0;
    color: var(--dig-color-danger);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--dig-font-size-small);
  }
  .dig-btn-text-danger:hover {
    text-decoration: none;
  }

  /*
   * 1. The Real Input: `.dig-file-input-real`
   * We use the "visually-hidden" technique. This hides the element from view
   * but keeps it in the DOM, focusable, and fully functional for assistive
   * technologies and form submissions. It's the most accessible way to
   * create a custom file input.
  */
  .dig-file-input-real {
    /* Visually-Hidden Technique */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /*
   * 2. The Custom Button (The Label)
   * When a user focuses the visually-hidden input via keyboard (e.g., Tabbing),
   * we want to show a focus state on the VISIBLE label to provide feedback.
   * The `+` selector targets the label that immediately follows the input.
  */
  .dig-file-input-real:focus-visible + .dig-btn {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 2px;
  }

  /*
   * 3. The Control UI Wrapper
   * This helps align the custom button and the filename display.
  */
  .dig-file-control-ui {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
  }

  /*
   * 4. The Filename Display Area
   * Styles for the area that shows the name of the selected file.
  */
  .dig-file-display-area {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  .dig-current-file {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
  }

  .dig-remove-file-btn {
    background: none;
    border: none;
    color: var(--dig-color-danger);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 0.25em;
  }

  .dig-icon-button__icon {
    font-size: 1rem;
  }

  /*
   * 5. The Social Links List (`.dig-social-links`)
  */
  .dig-social-links,
  .dig-social-links li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-social-links {
    display: flex;
    justify-content: center;
    gap: var(--dig-spacing-md);
  }

  /*
   * 6. Individual Social Link Items (`.dig-social-links__item`)
  */
  .dig-social-links__item a {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--dig-color-text-muted);
    text-decoration: none;
    transition:
      color var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  .dig-social-links__item a:hover,
  .dig-social-links__item a:focus-visible {
    color: var(--dig-color-primary);
    transform: translateY(-2px) scale(1.1);
  }

  /*
   * 7. The Dashicon Span
  */
  .dig-social-links__item .dashicons {
    width: 1em;
    height: 1em;
    font-size: inherit;
  }

  .dig-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
  }

  .dig-brand-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
  }

  /**
	 * ========================================================================
	 * Form Controls (Inputs, Textareas, Selects) - v7 MODERN & CONSOLIDATED
	 * ========================================================================
	 */
  :is(
    input:not(
      [type="range"],
      [type="color"],
      [type="checkbox"],
      [type="radio"],
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="file"]
    ),
    textarea,
    select
  ).dig-form-control {
    width: 100%;
    margin: var(--dig-form-control-margin, 0);
    padding: var(--dig-form-control-padding, var(--dig-spacing-sm));
    font-size: var(--dig-font-size-base);
    color: var(--dig-form-control-color, var(--dig-color-text));
    background-color: var(--dig-form-control-bg, var(--dig-color-bg));
    border: var(--dig-form-control-border, 1px solid var(--dig-color-border));
    border-radius: var(--dig-form-control-radius, var(--dig-radius-md));
    box-shadow: var(--dig-form-control-shadow, none);
    line-height: var(--dig-form-control-line-height, 1.5);
    min-height: var(--dig-form-control-min-height, auto);
    transition:
      border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }

  :is(
      input:not(
        [type="range"],
        [type="color"],
        [type="checkbox"],
        [type="radio"],
        [type="submit"],
        [type="button"],
        [type="reset"],
        [type="file"]
      ),
      textarea,
      select
    ).dig-form-control:focus {
    border-color: var(
      --dig-form-control-focus-border-color,
      var(--dig-color-primary)
    );
    box-shadow: var(
      --dig-form-control-focus-shadow,
      0 0 0 1px var(--dig-color-primary)
    );
    outline: none;
  }

  /*
	   * Placeholder State
	   */
  input.dig-form-control::placeholder,
  textarea.dig-form-control::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 1;
  }

  /*
	   * Disabled State
	   */
  input.dig-form-control:disabled,
  textarea.dig-form-control:disabled,
  select.dig-form-control:disabled {
    background-color: var(--dig-color-bg-alt);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--dig-color-border-light);
  }

  /* ========================================================================
  Form Validation States & Helpers
  ======================================================================== */
  .digentus-one-field--has-errors .dig-form-control {
    border-color: var(--dig-color-danger);
  }

  .digentus-one-field--has-errors .dig-form-control:focus {
    /* Maintain the error state indication even when focused */
    border-color: var(--dig-color-danger);
    box-shadow: 0 0 0 1px var(--dig-color-danger);
  }

  /*
 * Styles for the error message container itself.
 * This is where the JS will inject the error text.
 */
  .digentus-one-field-error-message {
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-danger);
  }

  .digentus-one-field-error-message ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-xxs);
  }

  .dig-form-text {
    display: block;
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  /* Checkboxes & Radios */
  .dig-form-check {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0;
    vertical-align: middle;
  }

  .dig-form-check-label {
    margin-bottom: 0;
  }

  /* Toggle Switches */
  .dig-form-switch {
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 1.5em;
  }

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

  .dig-form-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dig-color-border);
    transition: 0.4s;
    border-radius: var(--dig-radius-full);
  }

  .dig-form-switch-slider:before {
    position: absolute;
    content: "";
    height: 1em;
    width: 1em;
    left: 0.25em;
    bottom: 0.25em;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  input:checked + .dig-form-switch-slider {
    background-color: var(--dig-color-accent);
  }

  input:checked + .dig-form-switch-slider:before {
    transform: translateX(1em);
  }

  /*
   * Custom Select Styling
   */
  .dig-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--dig-spacing-sm) center;
    background-size: 1.2em;
    padding-right: calc(var(--dig-spacing-sm) * 2 + 1.2em);
  }

  /* Remove custom arrow for multiple-select listboxes */
  select[multiple].dig-select {
    background-image: none;
    padding-right: var(--dig-spacing-sm);
    height: auto;
  }

  /* Range */
  .dig-form-range {
    width: 100%;
    height: 0.5em;
    appearance: none;
    background: var(--dig-color-border);
    border-radius: var(--dig-radius-full);
    outline: none;
  }

  .dig-form-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  .dig-form-range::-moz-range-thumb {
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  /*
   * ========================================================================
   * Component: Badges (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-badge {
    /* Base styles remain the same */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  .dig-badge-primary {
    --bg-lightness: var(--dig-lightness-primary);
    background-color: var(--dig-color-primary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-secondary {
    --bg-lightness: var(--dig-lightness-secondary);
    background-color: var(--dig-color-secondary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-accent {
    --bg-lightness: var(--dig-lightness-accent);
    background-color: var(--dig-color-accent);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Navigation */
  .dig-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-md);
  }

  .dig-nav ul,
  [role="menubar"],
  [role="menu"] {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .dig-nav-link {
    color: var(--dig-color-text);
    text-decoration: none;
    transition: color var(--dig-transition-fast);
  }

  .dig-nav-link:hover {
    color: var(--dig-color-primary);
  }

  .dig-nav-link.active {
    color: var(--dig-color-accent);
    font-weight: 600;
  }

  /* Tabs */
  .dig-tab-container {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-tab-list {
    display: flex;
    gap: var(--dig-spacing-md);
  }

  .dig-tab {
    padding: var(--dig-spacing-sm) 0;
    position: relative;
    cursor: pointer;
  }

  .dig-tab.active {
    color: var(--dig-color-accent);
  }

  .dig-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--dig-color-accent);
  }

  .dig-tab-panel {
    display: none;
    padding: var(--dig-spacing-md) 0;
  }

  .dig-tab-panel.active {
    display: block;
  }

  /* Modal */
  .dig-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--dig-z-index-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dig-transition-base);
  }

  .dig-modal.active {
    opacity: 1;
    pointer-events: all;
  }

  .dig-modal .dig-modal-content {
    transform: translateY(0);
  }

  .dig-modal .dig-modal-content {
    background-color: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--dig-shadow-xl);
    transform: translateY(-20px);
    transition: transform var(--dig-transition-base);
  }

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

  .dig-modal-body {
    padding: var(--dig-spacing-md);
  }

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

  /* Carousel */
  /*
   * 1. The main component wrapper.
   *    Establishes the positioning context for navigation elements.
   */
  [data-dig-component="carousel"] {
    position: relative;
    /* You can add aspect-ratio for responsive height control if needed */
    /* aspect-ratio: 16 / 9; */
  }

  /*
   * 2. The track wrapper.
   *    Its only job is to hide the overflowing slides.
   */
  .dig-carousel-track-wrapper {
    overflow: hidden;
    border-radius: var(--dig-radius-md); /* Inherit branding */
  }

  /*
   * 3. The track.
   *    This is the flex container that moves. Transitions are handled by JS
   *    to manage the "snap back" for the infinite loop.
   */
  .dig-carousel-track {
    display: flex;
    will-change: transform;
  }

  .dig-carousel-track.is-grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
  }

  /*
   * 4. The individual slides.
   *    They are designed to take up 100% of the container's width.
   */
  .dig-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    /* Add padding here if you want space INSIDE each slide */
    /* padding: var(--dig-spacing-md); */
  }

  /*
   * 5. Navigation Buttons (Prev/Next Arrows).
   *    Styled to look clean and be positioned correctly.
   */
  .dig-carousel-btn {
    position: absolute;
    top: 50%;
    z-index: var(--dig-z-index-sticky); /* Use z-index variable */

    /* Reusing button styles is good, but for overlays, custom is better */
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--dig-color-text-light);
    border: none;
    width: 44px; /* Accessible touch target size */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dig-carousel-btn--prev {
    left: var(--dig-spacing-sm);
  }

  .dig-carousel-btn--next {
    right: var(--dig-spacing-sm);
  }

  /*
   * 6. Dot Navigation.
   *    Positioned at the bottom, centered.
   */
  .dig-carousel-dots {
    position: absolute;
    bottom: var(--dig-spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--dig-z-index-sticky);
    display: flex;
    gap: var(--dig-spacing-xs);
  }

  .dig-carousel-dots button {
    /* Reset button styles for a clean dot */
    padding: 0;
    border: 1px solid var(--dig-color-text-light);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-dots button.is-active {
    background-color: var(--dig-color-text-light);
  }

  .is-static .dig-carousel-btn,
  .is-static .dig-carousel-dots {
    display: none;
  }

  /*Icons*/
  .dig-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em; /* Better vertical alignment with text */
  }

  .dig-icon-button {
    /* Reset button styles for icon-only buttons */
    background: none;
    border: none;
    padding: var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    cursor: pointer;
    line-height: 0;
    color: inherit;
  }

  dig-header-tagline {
    opacity: 0.85;
  }

  .dig-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Tooltips */
  .dig-tooltip {
    position: relative;
    display: inline-block;
  }

  .dig-tooltip-content {
    position: absolute;
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
    white-space: nowrap;
    z-index: var(--dig-z-index-tooltip);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dig-transition-fast);
  }

  .dig-tooltip:hover .dig-tooltip-content {
    opacity: 1;
    visibility: visible;
  }

  .dig-tooltip-top .dig-tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-tooltip-bottom .dig-tooltip-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--dig-spacing-xs);
  }

  .dig-tooltip-left .dig-tooltip-content {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: var(--dig-spacing-xs);
  }

  .dig-tooltip-right .dig-tooltip-content {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: var(--dig-spacing-xs);
  }

  /* Progress */
  .dig-progress {
    height: 0.5em;
    background-color: var(--dig-color-bg-alt);
    border-radius: var(--dig-radius-full);
    overflow: hidden;
  }

  .dig-progress-bar {
    height: 100%;
    background-color: var(--dig-color-primary);
    transition: width var(--dig-transition-slow);
  }

  /* Spinners */
  .dig-spinner {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border: 0.25em solid var(--dig-color-border);
    border-top-color: var(--dig-color-primary);
    border-radius: 50%;
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  /* Avatars */
  .dig-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: var(--dig-color-bg-alt);
    color: var(--dig-color-text);
    font-weight: 600;
    overflow: hidden;
  }

  .dig-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-avatar-sm {
    width: 2em;
    height: 2em;
    font-size: var(--dig-font-size-small);
  }

  .dig-avatar-lg {
    width: 3.5em;
    height: 3.5em;
    font-size: var(--dig-font-size-h5);
  }

  /*
   * ========================================================================
   * Component: Toast Notifications (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-toast-container {
    position: fixed;
    bottom: var(--dig-spacing-md);
    right: var(--dig-spacing-md);
    z-index: var(--dig-z-index-toast);
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
    /* Ensure clicks pass through the container itself */
    pointer-events: none;
  }

  .dig-toast {
    /* Base styles */
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-lg);
    min-width: 250px;
    max-width: 350px;
    /* Allow clicks on the toast messages */
    pointer-events: auto;

    /* Animation initial state */
    transform: translateX(calc(100% + var(--dig-spacing-md)));
    opacity: 0;
    transition:
      transform 0.4s ease-in-out,
      opacity 0.4s ease-in-out;

    /* Default to info style */
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast.show {
    /* Animation final state */
    transform: translateX(0);
    opacity: 1;
  }

  .dig-toast-success {
    --bg-lightness: var(--dig-lightness-success);
    background-color: var(--dig-color-success);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-error {
    --bg-lightness: var(--dig-lightness-danger);
    background-color: var(--dig-color-danger);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-info {
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Accordion */
  .dig-accordion-item {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-accordion-header {
    padding: var(--dig-spacing-sm) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dig-accordion-content {
    padding: var(--dig-spacing-sm) 0;
    display: none;
  }

  .dig-accordion-item.active .dig-accordion-content {
    display: block;
  }

  /* Dropdown */
  .dig-dropdown {
    position: relative;
    display: inline-block;
  }

  .dig-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-md);
    min-width: 200px;
    z-index: var(--dig-z-index-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
      opacity var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

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

  .dig-dropdown-item {
    display: block;
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    color: var(--dig-color-text);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-dropdown-item:hover {
    background-color: var(--dig-color-bg-alt);
  }

  /* Breadcrumb */
  .dig-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
  }

  .dig-breadcrumb-item:not(:last-child)::after {
    content: "/";
    color: var(--dig-color-text-muted);
  }

  /* Pagination */
  .dig-pagination {
    display: flex;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-page-item {
    display: inline-flex;
  }

  .dig-page-link {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-sm);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-page-link:hover {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-page-item.active .page-link {
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border-color: var(--dig-color-primary);
  }

  /* Table */
  .dig-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-table th,
  .dig-table td {
    padding: var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    text-align: left;
  }

  .dig-table th {
    background-color: var(--dig-color-bg-alt);
    font-weight: 600;
  }

  .dig-table-striped tbody tr:nth-child(odd) {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-table-hover tbody tr:hover {
    background-color: rgba(0, 8, 45, 0.05);
  }

  /* ==========================================================================
   Web Components & Shadow DOM Support
   ==========================================================================
  */
  :host {
    display: block;
    contain: content;
  }

  ::slotted(*) {
    margin-bottom: var(--dig-spacing-sm);
  }

  ::slotted(h1),
  ::slotted(h2),
  ::slotted(h3) {
    margin-top: var(--dig-spacing-md);
  }

  @media (max-width: 992px) {
    .dig-grid-cols-3 > .dig-col {
      grid-column: span 1 !important;
    }
  }
}

/* ==========================================================================
   4. Layer 'themes'
   ========================================================================== */
@layer themes {
  /* Reduced data mode */
  @media (prefers-reduced-data: reduce) {
    * {
      background-image: none !important;
    }

    img,
    video {
      display: none !important;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: more) {
    :root {
      --dig-color-border: #000000;
    }
    body {
      background-image: none !important;
    }
    img {
      filter: contrast(1.5) !important;
    }
    :focus-visible {
      outline-width: 3px;
    }
    .dig--has-errors > .dig-form-control {
      outline: 2px solid var(--dig-color-danger);
      box-shadow: none;
    }
    .dig-form-control::placeholder {
      color: var(--dig-color-text);
      opacity: 1;
    }
  }

  /* --- THEME: ENTERPRISE (Dark Mode Override) --- */
  .d1-theme-enterprise {
    --dig-color-bg: #0a1b2a; /* Navy Deep */
    --dig-color-bg-alt: #06131f; /* Darker Sidebar */
    --dig-color-text: #e6edf3; /* Light Text */
    --dig-color-text-muted: #94a3b8;
    --dig-color-border: #1e293b; /* Slate Border */
    --dig-color-primary: #25d1db; /* Cyan Electric */
  }
  /* Apply background to the wrapper when theme class is present */
  .d1-theme-enterprise .d1-dashboard-wrapper {
    background-color: var(--dig-color-bg);
    color: var(--dig-color-text);
  }

  body.d1-theme-enterprise {
    background-color: #0a1b2a !important;
    margin: 0;
  }
}

/* ==========================================================================
   5. Layer 'utilities'
   ========================================================================== */
@layer utilities {
  /* Text Utilities */
  .dig-text-center {
    text-align: center;
  }
  .dig-text-left {
    text-align: left;
  }
  .dig-text-right {
    text-align: right;
  }
  .dig-text-uppercase {
    text-transform: uppercase;
  }
  .dig-text-lowercase {
    text-transform: lowercase;
  }
  .dig-text-capitalize {
    text-transform: capitalize;
  }
  .dig-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dig-text-wrap-balance {
    text-wrap: balance;
  }
  .dig-text-wrap-pretty {
    text-wrap: pretty;
  }

  /* Color Utilities */
  .dig-text-primary {
    color: var(--dig-color-primary);
  }
  .dig-text-secondary {
    color: var(--dig-color-secondary);
  }
  .dig-text-accent {
    color: var(--dig-color-accent);
  }
  .dig-hero-title .dig-text-accent {
    position: relative;
    top: 0.02em;
  }
  .dig-text-success {
    color: var(--dig-color-success);
  }
  .dig-text-warning {
    color: var(--dig-color-warning);
  }
  .dig-text-danger {
    color: var(--dig-color-danger);
  }
  .dig-text-info {
    color: var(--dig-color-info);
  }
  .dig-text-muted {
    color: var(--dig-color-text-muted);
  }
  .dig-text-light {
    color: var(--dig-color-text-light);
  }

  .dig-bg-primary {
    background-color: var(--dig-color-primary);
  }
  .dig-bg-secondary {
    background-color: var(--dig-color-secondary);
  }
  .dig-bg-accent {
    background-color: var(--dig-color-accent);
  }
  .dig-bg-success {
    background-color: var(--dig-color-success);
  }
  .dig-bg-warning {
    background-color: var(--dig-color-warning);
  }
  .dig-bg-danger {
    background-color: var(--dig-color-danger);
  }
  .dig-bg-info {
    background-color: var(--dig-color-info);
  }
  .dig-bg-light {
    background-color: var(--dig-color-bg);
  }
  .dig-bg-dark {
    background-color: var(--dig-color-bg-alt);
  }

  /* Display Utilities */
  .dig-d-block {
    display: block;
  }
  .dig-d-inline {
    display: inline;
  }
  .dig-d-inline-block {
    display: inline-block;
  }
  .dig-d-flex {
    display: flex;
  }
  .dig-d-inline-flex {
    display: inline-flex;
  }
  .dig-d-grid {
    display: grid;
  }

  /* Flex Utilities */
  .dig-flex-row {
    flex-direction: row;
  }
  .dig-flex-column {
    flex-direction: column;
  }
  .dig-flex-wrap {
    flex-wrap: wrap;
  }
  .dig-flex-nowrap {
    flex-wrap: nowrap;
  }
  /* Default (mobile-first): permitir wrap */
  .dig-nowrap {
    white-space: normal;
  }

  /* Desktop/tablet: forzar que no se separe */
  @media (min-width: 768px) {
    .dig-nowrap {
      white-space: nowrap;
    }
  }
  .dig-justify-start {
    justify-content: flex-start;
  }
  .dig-justify-end {
    justify-content: flex-end;
  }
  .dig-justify-center {
    justify-content: center;
  }
  .dig-justify-between {
    justify-content: space-between;
  }
  .dig-justify-around {
    justify-content: space-around;
  }
  .dig-align-start {
    align-items: flex-start;
  }
  .dig-align-end {
    align-items: flex-end;
  }
  .dig-align-center {
    align-items: center;
  }
  .dig-align-baseline {
    align-items: baseline;
  }
  .dig-align-stretch {
    align-items: stretch;
  }

  /* Position Utilities */
  .dig-position-static {
    position: static;
  }
  .dig-position-relative {
    position: relative;
  }
  .dig-position-absolute {
    position: absolute;
  }
  .dig-position-fixed {
    position: fixed;
  }
  .dig-position-sticky {
    position: sticky;
  }

  /* Sizing Utilities */
  .dig-w-25 {
    flex-basis: 25%;
    width: 25%;
  }
  .dig-w-33 {
    flex-basis: 33.333%;
    width: 33.333%;
  }
  .dig-w-50 {
    flex-basis: 50%;
    width: 50%;
  }
  .dig-w-67 {
    flex-basis: 66.666%;
    width: 66.666%;
  }
  .dig-w-75 {
    flex-basis: 75%;
    width: 75%;
  }
  .dig-w-100 {
    flex-basis: 100%;
    width: 100%;
  }
  .dig-h-25 {
    height: 25%;
  }
  .dig-h-50 {
    height: 50%;
  }
  .dig-h-75 {
    height: 75%;
  }
  .dig-h-100 {
    height: 100%;
  }
  .dig-mw-100 {
    max-width: 100%;
  }
  .dig-mh-100 {
    max-height: 100%;
  }

  /* Spacing Utilities */
  .dig-m-0 {
    margin: 0;
  }
  .dig-mt-0 {
    margin-top: 0;
  }
  .dig-mr-0 {
    margin-right: 0;
  }
  .dig-mb-0 {
    margin-bottom: 0;
  }
  .dig-ml-0 {
    margin-left: 0;
  }
  .dig-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .dig-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .dig-p-0 {
    padding: 0;
  }
  .dig-pt-0 {
    padding-top: 0;
  }
  .dig-pr-0 {
    padding-right: 0;
  }
  .dig-pb-0 {
    padding-bottom: 0;
  }
  .dig-pl-0 {
    padding-left: 0;
  }
  .dig-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .dig-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Border Utilities */
  .dig-border {
    border: 1px solid var(--dig-color-border);
  }
  .dig-border-top {
    border-top: 1px solid var(--dig-color-border);
  }
  .dig-border-right {
    border-right: 1px solid var(--dig-color-border);
  }
  .dig-border-bottom {
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-border-left {
    border-left: 1px solid var(--dig-color-border);
  }
  .dig-border-0 {
    border: 0;
  }
  .dig-rounded {
    border-radius: var(--dig-radius-md);
  }
  .dig-rounded-sm {
    border-radius: var(--dig-radius-sm);
  }
  .dig-rounded-lg {
    border-radius: var(--dig-radius-lg);
  }
  .dig-rounded-full {
    border-radius: var(--dig-radius-full);
  }
  .dig-rounded-top {
    border-top-left-radius: var(--dig-radius-md);
    border-top-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-right {
    border-top-right-radius: var(--dig-radius-md);
    border-bottom-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-bottom {
    border-bottom-right-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }
  .dig-rounded-left {
    border-top-left-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }

  /* Shadow Utilities */
  .dig-shadow-sm {
    box-shadow: var(--dig-shadow-sm);
  }
  .dig-shadow-md {
    box-shadow: var(--dig-shadow-md);
  }
  .dig-shadow-lg {
    box-shadow: var(--dig-shadow-lg);
  }
  .dig-shadow-xl {
    box-shadow: var(--dig-shadow-xl);
  }
  .dig-shadow-none {
    box-shadow: none;
  }

  /* Opacity Utilities */
  .dig-opacity-0 {
    opacity: 0;
  }
  .dig-opacity-25 {
    opacity: 0.25;
  }
  .dig-opacity-50 {
    opacity: 0.5;
  }
  .dig-opacity-75 {
    opacity: 0.75;
  }
  .dig-opacity-100 {
    opacity: 1;
  }

  /* Overflow Utilities */
  .dig-overflow-auto {
    overflow: auto;
  }
  .dig-overflow-hidden {
    overflow: hidden;
  }
  .dig-overflow-visible {
    overflow: visible;
  }
  .dig-overflow-scroll {
    overflow: scroll;
  }
  .dig-overflow-x-auto {
    overflow-x: auto;
  }
  .dig-overflow-y-auto {
    overflow-y: auto;
  }
  .dig-overflow-x-hidden {
    overflow-x: hidden;
  }
  .dig-overflow-y-hidden {
    overflow-y: hidden;
  }

  /* Z-index Utilities */
  .dig-z-index-dropdown {
    z-index: var(--dig-z-index-dropdown);
  }
  .dig-z-index-sticky {
    z-index: var(--dig-z-index-sticky);
  }
  .dig-z-index-fixed {
    z-index: var(--dig-z-index-fixed);
  }
  .dig-z-index-modal {
    z-index: var(--dig-z-index-modal);
  }
  .dig-z-index-popover {
    z-index: var(--dig-z-index-popover);
  }
  .dig-z-index-tooltip {
    z-index: var(--dig-z-index-tooltip);
  }
  .dig-z-index-toast {
    z-index: var(--dig-z-index-toast);
  }

  /* Interaction Utilities */
  .dig-pointer-events-none {
    pointer-events: none;
  }
  .dig-pointer-events-auto {
    pointer-events: auto;
  }
  .dig-user-select-none {
    user-select: none;
  }
  .dig-user-select-auto {
    user-select: auto;
  }
  .dig-cursor-pointer {
    cursor: pointer;
  }
  .dig-cursor-default {
    cursor: default;
  }
  .dig-cursor-not-allowed {
    cursor: not-allowed;
  }

  /* Visibility Utilities */
  .dig-visible {
    visibility: visible;
  }
  .dig-invisible {
    visibility: hidden;
  }

  /* Content Optimization */
  .dig-content-optimized {
    content-visibility: auto;
    contain: layout paint style;
  }

  /* Web API State Helpers */
  [data-dig-visible="false"] {
    display: none !important;
  }
  [data-dig-interactive] {
    cursor: pointer;
  }
  [data-dig-state="active"] {
    background-color: var(--dig-color-accent);
  }
  [data-dig-color="accent"] {
    color: var(--dig-color-accent);
  }
  [data-dig-bg="primary"] {
    background: var(--dig-color-primary);
    color: #fff;
  }

  /*
  * Prevents FOUC for conditional fields.
  * It hides any element with conditions until the JS engine has initialized it.
  */
  [data-conditions]:not([data-conditions-initialized]) {
    display: none;
  }

  /* Screen reader only (visually hidden but accessible) */
  /* Screen reader only (visually hidden but accessible) */
  /* Utilizes CSS Layers priority instead of !important hack */
  .dig-sr-only,
  .dig-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  /* Show on focus for better keyboard navigation */
  .dig-show-on-focus:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Focus ring variant for better accessibility */
  .dig-focus-ring {
    outline: 2px solid var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Quick Grid Helpers */
  .dig-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .dig-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Quick Flex Helpers */
  .dig-row {
    display: flex;
    flex-direction: row;
    gap: var(--dig-spacing-sm);
  }

  .dig-col {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-center {
    justify-content: center;
    align-items: center;
  }

  .dig-space-between {
    justify-content: space-between;
  }

  .dig-wrap {
    flex-wrap: wrap;
  }

  /* Digentus State Helpers */
  .dig-hidden {
    display: none !important;
  }

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

  .dig-loading {
    cursor: progress;
    opacity: 0.6;
    pointer-events: none;
  }

  .dig-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .dig-active {
    background-color: var(--dig-color-accent);
    color: var(--dig-color-text-light);
  }

  .dig-success {
    background-color: var(--dig-color-success);
    color: var(--dig-color-text-light);
  }

  .dig-warning {
    background-color: var(--dig-color-warning);
    color: var(--dig-color-primary);
  }

  .dig-error {
    background-color: var(--dig-color-danger);
    color: var(--dig-color-text-light);
  }

  /*
   * ========================================================================
   * Responsive Display Utilities (Systematic Approach)
   * ========================================================================
   * Pattern: .dig-d-{value} for mobile-first base styles.
   * Pattern: .dig-d-{breakpoint}-{value} for responsive overrides.
   * Values: none, block, flex, grid, inline-block, inline-flex.
   */

  /* Base (Mobile First) - Always applied unless overridden */
  .dig-d-none {
    display: none !important;
  }
  .dig-d-block {
    display: block !important;
  }
  .dig-d-flex {
    display: flex !important;
  }
  .dig-d-grid {
    display: grid !important;
  }
  .dig-d-inline {
    display: inline !important;
  }
  .dig-d-inline-block {
    display: inline-block !important;
  }
  .dig-d-inline-flex {
    display: inline-flex !important;
  }

  /* Base (Mobile) */
  .dig-d-none {
    display: none !important;
  }
  .dig-d-block {
    display: block !important;
  }
  .dig-d-flex {
    display: flex !important;
  }
  .dig-d-grid {
    display: grid !important;
  }

  html.d1-app-mode body > a.skip-link {
    display: none !important;
  }

  html.d1-app-mode header#masthead {
    display: none !important;
  }

  .screen-reader-text,
  .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link:focus,
  .screen-reader-text:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 999999;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #ffffff;
    color: #001827;
    border: 1px solid rgba(0, 24, 39, 0.18);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    font-weight: 700;
  }

  /* Tablet Portrait & Up (>= 576px) */
  @media (min-width: 576px) {
    .dig-d-sm-none {
      display: none !important;
    }
    .dig-d-sm-block {
      display: block !important;
    }
    .dig-d-sm-flex {
      display: flex !important;
    }
    .dig-d-sm-grid {
      display: grid !important;
    }
    .dig-d-sm-inline-block {
      display: inline-block !important;
    }
  }

  /* Tablet Landscape & Up (>= 768px) */
  @media (min-width: 768px) {
    .dig-d-md-none {
      display: none !important;
    }
    .dig-d-md-block {
      display: block !important;
    }
    .dig-d-md-flex {
      display: flex !important;
    }
    .dig-d-md-grid {
      display: grid !important;
    }
    .dig-d-md-inline-block {
      display: inline-block !important;
    }

    /* Tablet (md: 768px) */
    @media (min-width: 768px) {
      .dig-d-md-none {
        display: none !important;
      }
      .dig-d-md-block {
        display: block !important;
      }
      .dig-d-md-flex {
        display: flex !important;
      }
      .dig-d-md-grid {
        display: grid !important;
      }
      .dig-d-md-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* Desktop (lg: 992px) */
    @media (min-width: 992px) {
      .dig-d-lg-none {
        display: none !important;
      }
      .dig-d-lg-block {
        display: block !important;
      }
      .dig-d-lg-flex {
        display: flex !important;
      }
      .dig-d-lg-grid {
        display: grid !important;
      }
    }
  }

  /* Desktop & Up (>= 992px) */
  @media (min-width: 992px) {
    .dig-d-lg-none {
      display: none !important;
    }
    .dig-d-lg-block {
      display: block !important;
    }
    .dig-d-lg-flex {
      display: flex !important;
    }
    .dig-d-lg-grid {
      display: grid !important;
    }
    .dig-d-lg-inline-block {
      display: inline-block !important;
    }
  }

  /* Large Desktop & Up (>= 1200px) */
  @media (min-width: 1200px) {
    .dig-d-xl-none {
      display: none !important;
    }
    .dig-d-xl-block {
      display: block !important;
    }
    .dig-d-xl-flex {
      display: flex !important;
    }
    .dig-d-xl-grid {
      display: grid !important;
    }
  }
}

/* ==========================================================================
   6. Layer 'animations' & Transitions
   ==========================================================================
*/
@layer animations {
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

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

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

  @keyframes slideInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(20px);
      opacity: 0;
    }
  }

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

  .dig-animate-spin {
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  .dig-animate-fadeIn {
    animation: fadeIn var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-fadeOut {
    animation: fadeOut var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideInUp {
    animation: slideInUp var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideOutDown {
    animation: slideOutDown var(--dig-animation-duration) ease forwards;
  }

  .dig-transition-all {
    transition: all var(--dig-transition-base);
  }

  .dig-transition-colors {
    transition:
      color var(--dig-transition-base),
      background-color var(--dig-transition-base),
      border-color var(--dig-transition-base);
  }

  .dig-transition-opacity {
    transition: opacity var(--dig-transition-base);
  }

  .dig-transition-transform {
    transition: transform var(--dig-transition-base);
  }
}

/* ==========================================================================
   7. Layer 'admin' - WordPress Admin Coexistence
   ========================================================================== */
@layer admin {
  /*
  Override for Form Controls
  Selector: .dig-admin-context (class) + input (tag) + .dig-form-control (class)
  Specificity: (0, 2, 1) - Extremely high and targeted.
  */
  .dig-admin-context {
    --dig-form-control-padding: var(--dig-spacing-xs);
  }
  .dig-admin-context input.dig-form-control,
  .dig-admin-context textarea.dig-form-control,
  .dig-admin-context select.dig-form-control {
    /* Re-declare ALL properties to ensure a complete override */
    width: 100%;
    margin: 0;
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: none;
    line-height: 1.5;
    transition:
      border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }
  /* Also override the focus state with high specificity */
  .dig-admin-context input.dig-form-control:focus,
  .dig-admin-context textarea.dig-form-control:focus,
  .dig-admin-context select.dig-form-control:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
  }
  /**
  Layout Spacing Fix
  Adds a consistent vertical gap between form rows.
  */
  .dig-admin-context .dig-form-row {
    margin-bottom: var(--dig-spacing-md);
  }
  .dig-admin-context .dig-form-row:last-child {
    margin-bottom: 0;
  }
  /**
  Override for Buttons
  Selector: .dig-admin-context (class) + .dig-btn (class)
  Specificity: (0, 2, 0) - High enough to win.
  */
  .dig-admin-context .dig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border: none;
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-size: var(--dig-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
  }
  /* Override for button variants */
  .dig-admin-context .dig-btn.dig-btn-outline {
    background: transparent;
    color: var(--dig-color-primary);
    border: 1.5px solid var(--dig-color-primary);
  }
  /*
  ========================================================================
  Component Overrides: Branding Admin UI
  ========================================================================
  */
  .dig-admin-context .branding-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dig-spacing-md);
    padding-bottom: var(--dig-spacing-sm);
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-admin-context .branding-sidebar-header h2 {
    margin-bottom: 0;
    font-size: 1.3em;
  }
  .dig-admin-context .branding-controls h3 {
    margin-top: var(--dig-spacing-lg);
    margin-bottom: var(--dig-spacing-sm);
    font-size: 1em;
    text-transform: uppercase;
    color: var(--dig-color-text-muted);
    letter-spacing: 0.5px;
  }
  /* ========================================================================
  Component Overrides: Branding Admin UI - Color Picker Fix
  ======================================================================== */
  .dig-admin-context .dig-form-control[type="color"] {
    display: block;
    width: 100%;
    height: 36px;
    max-width: 40px;
    padding: var(--dig-spacing-xs);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .dig-admin-context .dig-form-control[type="color"]:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
    outline: none;
  }

  .dig-admin-context,
  .dig-admin-context *,
  .dig-admin-context *::before,
  .dig-admin-context *::after {
    box-sizing: border-box;
  }

  /* This ensures that component styles win the specificity war against core WP styles. */

  /* Badge Component Boost */
  .dig-admin-context .dig-badge {
    /* Re-assert the base styles with higher specificity */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  /* Form Group & Input Component Boost */
  .dig-admin-context .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-admin-context .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }
}

/* ==========================================================================
   EOF
   ========================================================================== */