/**
 * Digentus One - Admin Context Overrides (v4.0 - Visually Complete)
 *
 * This UN-LAYERED stylesheet uses high-specificity selectors to assert both
 * structural AND key visual properties for UCA components inside the WordPress
 * admin, winning the specificity war against core WP styles without '!important'.
 */

/* ==========================================================================
   Component: Badge
   - Asserts all base structural and visual properties.
   ========================================================================== */
.wp-admin .dig-admin-context .dig-badge {
  /* Structural Resets */
  display: inline-block;
  border: none;
  box-shadow: none;
  margin: 0;

  /* Visual Properties from the Design System */
  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);

  /* Assert default background and text color */
  background-color: var(--dig-color-secondary);
  color: var(--dig-color-secondary-contrast);
}

/* Variant Overrides with high specificity */
.wp-admin .dig-admin-context .dig-badge--primary {
  background-color: var(--dig-color-primary);
  color: var(--dig-color-primary-contrast);
}
.wp-admin .dig-admin-context .dig-badge--secondary {
  background-color: var(--dig-color-secondary);
  color: var(--dig-color-secondary-contrast);
}
.wp-admin .dig-admin-context .dig-badge--success {
  background-color: var(--dig-color-success);
  color: var(--dig-color-success-contrast);
}
.wp-admin .dig-admin-context .dig-badge--danger {
  background-color: var(--dig-color-danger);
  color: var(--dig-color-danger-contrast);
}
.wp-admin .dig-admin-context .dig-badge--warning {
  background-color: var(--dig-color-warning);
  color: var(--dig-color-warning-contrast);
}
.wp-admin .dig-admin-context .dig-badge--info {
  background-color: var(--dig-color-info);
  color: var(--dig-color-info-contrast);
}
/* This yellow variant seems custom, let's define it */
.wp-admin .dig-admin-context .dig-badge--yellow {
  background-color: #f1c40f; /* Example yellow */
  color: #1a1a1a;
}

/* ==========================================================================
   Admin Layout Helpers (para nuestras páginas de prueba y UI)
   ========================================================================== */
.wp-admin .dig-admin-context .dig-definition-list {
  display: grid;
  grid-template-columns: 200px 1fr; /* Columna de etiqueta fija, contenido flexible */
  gap: var(--dig-spacing-sm) var(--dig-spacing-md);
  align-items: center;
}

.wp-admin .dig-admin-context .dig-definition-list dt {
  font-weight: 600;
  text-align: right;
}

.wp-admin .dig-admin-context .dig-definition-list dd {
  margin: 0;
}

/* ==========================================================================
   Component: Form Fields (Input, Label, etc.)
   ========================================================================== */
.wp-admin .dig-admin-context .dig-form-group {
  display: block;
  margin-bottom: var(--dig-spacing-md);
}

.wp-admin .dig-admin-context .dig-form-label {
  display: block;
  padding: 0;
  margin: 0 0 var(--dig-spacing-xs) 0;
  font-size: var(--dig-font-size-base);
  font-weight: 600;
  color: var(--dig-color-text-strong);
}

.wp-admin .dig-admin-context input.dig-form-control {
  display: block;
  width: 100%;
}

/* ==========================================================================
   Component: Alert (Structural Override)
   ========================================================================== */
.wp-admin .dig-admin-context .dig-alert {
  transition: opacity 0.3s ease, transform 0.3s ease, margin-bottom 0.3s ease,
    padding 0.3s ease, border 0.3s ease;
}

.wp-admin .dig-admin-context .dig-alert.is-dismissing {
  opacity: 0;
  transform: translateY(-20px);
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  height: 0; /* Add height transition for smoother collapse */
  overflow: hidden; /* Hide content during collapse */
}

.wp-admin .dig-admin-context .dig-card__body {
  padding: var(--dig-spacing-md);
}

/* ==========================================================================
   Component: Collection (The "Smart Repeater")
   ========================================================================== */
.wp-admin .dig-admin-context .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
  ); /* A slightly different background */
}

.wp-admin .dig-admin-context .dig-collection__row {
  display: flex;
  align-items: flex-start; /* Aligns controls to the top */
  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);
}

/* This class is added by SortableJS during a drag operation */
.wp-admin .dig-admin-context .dig-collection__row.sortable-ghost {
  opacity: 0.4;
  background: var(--dig-color-primary-bg);
}

.wp-admin .dig-admin-context .dig-collection__row-content {
  flex-grow: 1;
  display: grid;
  /* Creates a responsive grid for the fields inside the row */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dig-spacing-md);
}

.wp-admin .dig-admin-context .dig-collection__row-controls {
  display: flex;
  align-items: center;
  gap: var(--dig-spacing-xs);
}

.wp-admin .dig-admin-context .dig-collection__drag-handle,
.wp-admin .dig-admin-context .dig-collection__remove-btn {
  /* Basic button reset */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dig-color-border);
  background-color: var(--dig-color-bg);
  border-radius: var(--dig-radius-sm);
  padding: var(--dig-spacing-xs);
  cursor: pointer;
  transition: background-color var(--dig-transition-fast),
    border-color var(--dig-transition-fast);
}

.wp-admin .dig-admin-context .dig-collection__drag-handle {
  cursor: move; /* Grab cursor */
}

.wp-admin .dig-admin-context .dig-collection__drag-handle:hover,
.wp-admin .dig-admin-context .dig-collection__remove-btn:hover {
  background-color: var(--dig-color-bg-alt);
  border-color: var(--dig-color-border-hover);
}

.wp-admin .dig-admin-context .dig-collection__remove-btn {
  color: var(--dig-color-danger);
}
.wp-admin .dig-admin-context .dig-collection__remove-btn:hover {
  background-color: var(--dig-color-danger-bg);
  border-color: var(--dig-color-danger-border);
}

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

.wp-admin .dig-admin-context .dig-collection__row input.dig-form-control {
  cursor: text;
}

.dig-card__header {
  margin-left: 30px;
}

/* ==========================================================================
   Layout Pattern: Input Group
   ========================================================================== */
.dig-input-group {
  display: flex;
  align-items: stretch; /* Stretch items to fill height */
  position: relative;
  width: 100%;
}

.dig-input-group .dig-form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.dig-input-group__prepend,
.dig-input-group__append {
  display: flex;
  align-items: center;
  padding: 0 var(--dig-spacing-sm);
  color: var(--dig-color-text-muted);
  background-color: var(--dig-color-bg-alt);
  border: 1px solid var(--dig-color-border);
}

.dig-input-group__prepend {
  border-right: 0;
  border-radius: var(--dig-radius-base) 0 0 var(--dig-radius-base);
}

.dig-input-group__append {
  border-left: 0;
  border-radius: 0 var(--dig-radius-base) var(--dig-radius-base) 0;
}

.dig-input-group.has-prepend .dig-form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dig-input-group.has-append .dig-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/*
 * Targets the input *inside* a container with our modifier class.
 * This increases specificity and correctly applies the width constraint.
 * The .dig-form-group selector ensures we only target our components.
 */
.dig-form-group.admin-form-field--medium .dig-form-control {
  max-width: 400px;
}

.dig-form-group.admin-form-field--small .dig-form-control {
  max-width: 250px;
}

/*
 * If you need to override other properties, you can do it here.
 * For example, to change the border color on a specific form:
 */
/*
.my-specific-form .dig-form-control {
    border-color: rebeccapurple;
}
*/