/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║  GALAPPXY — Actions & CRUD Modal                          ║
 * ║  Fase 7 · Modal con Tabs por Categoría · Febrero 2026    ║
 * ║                                                           ║
 * ║  Components:                                               ║
 * ║  1. Row actions dropdown (.gx-actions-dropdown)            ║
 * ║  2. Confirm dialog (.gx-confirm)                           ║
 * ║  3. CRUD modal form (.gx-crud-modal)                       ║
 * ║  4. Toast enhancements                                     ║
 * ║  5. Table action cell                                      ║
 * ║  --- Fase 7 additions ---                                  ║
 * ║  6. Tabs (.gx-crud-tabs)                                   ║
 * ║  7. Subtable (.gx-crud-subtable)                           ║
 * ║  8. Accordion (.gx-crud-accordion)                         ║
 * ║  9. Field groups (.gx-crud-form__group)                    ║
 * ║  10. Read-only fields (.gx-field__value)                   ║
 * ║  11. Tooltips (.gx-field__tooltip)                         ║
 * ║  12. Empty states (.gx-crud-empty)                         ║
 * ║  13. Drag-and-drop (.gx-crud-drag-*)                       ║
 * ╚═══════════════════════════════════════════════════════════╝
 */


/* ═════════════════════════════════════════════════════════════
   1. ROW ACTIONS DROPDOWN
   ═════════════════════════════════════════════════════════════ */

.gx-actions-dropdown {
  position: relative;
  display: inline-flex;
}

.gx-actions-dropdown__trigger {
  color: var(--gx-text-primary);
  opacity: 0.7;
  transition: opacity var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-actions-dropdown__trigger:hover,
.gx-actions-dropdown.is-open .gx-actions-dropdown__trigger {
  opacity: 1;
}

tr:hover .gx-actions-dropdown__trigger {
  opacity: 1;
}

.gx-actions-dropdown__menu {
  position: fixed;
  z-index: 9999;
  min-width: 170px;
  background: var(--gx-bg-elevated);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-xl);
  padding: var(--gx-sp-1) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.95);
  transform-origin: top left;
  transition: opacity var(--gx-duration-base) var(--gx-ease-default),
              visibility var(--gx-duration-base) var(--gx-ease-default),
              transform var(--gx-duration-base) var(--gx-ease-default);
  pointer-events: none;
}

body > .gx-actions-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: fixed;
  z-index: 99999;
}

.gx-actions-dropdown.is-open .gx-actions-dropdown__menu,
.gx-actions-dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.gx-actions-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  width: 100%;
  padding: var(--gx-sp-2) var(--gx-sp-3);
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
  text-align: left;
  font-family: var(--gx-font-sans);
  white-space: nowrap;
}

.gx-actions-dropdown__item:hover {
  background: var(--gx-bg-surface-hover);
}

.gx-actions-dropdown__item i,
.gx-actions-dropdown__item svg {
  color: var(--gx-text-muted);
  flex-shrink: 0;
}

.gx-actions-dropdown__item--danger {
  color: var(--gx-danger);
}

.gx-actions-dropdown__item--danger i,
.gx-actions-dropdown__item--danger svg {
  color: var(--gx-danger);
}

.gx-actions-dropdown__item--danger:hover {
  background: var(--gx-danger-light);
}

.gx-actions-dropdown__divider {
  height: 1px;
  background: var(--gx-border-light);
  margin: var(--gx-sp-1) 0;
}


/* ═════════════════════════════════════════════════════════════
   2. CONFIRM DIALOG
   ═════════════════════════════════════════════════════════════ */

.gx-confirm-backdrop {
  z-index: calc(var(--gx-z-modal) + 10);
}

.gx-confirm {
  max-width: 400px;
  text-align: center;
}

.gx-confirm__body {
  padding: var(--gx-sp-6) var(--gx-sp-5) var(--gx-sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gx-sp-3);
}

.gx-confirm__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--gx-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gx-confirm__icon--danger {
  background: var(--gx-danger-light);
  color: var(--gx-danger);
}

.gx-confirm__icon--warning {
  background: var(--gx-warning-light);
  color: var(--gx-warning);
}

.gx-confirm__icon--primary {
  background: rgba(var(--gx-primary-rgb), 0.1);
  color: var(--gx-primary);
}

.gx-confirm__title {
  font-size: var(--gx-text-lg);
  font-weight: var(--gx-weight-semibold);
  color: var(--gx-text-primary);
  margin: 0;
}

.gx-confirm__message {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-secondary);
  margin: 0;
  line-height: var(--gx-leading-relaxed);
}

.gx-confirm__actions {
  display: flex;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-4) var(--gx-sp-5);
  border-top: 1px solid var(--gx-border-light);
  justify-content: center;
}

.gx-confirm__actions .gx-btn {
  min-width: 110px;
}


/* ═════════════════════════════════════════════════════════════
   3. CRUD MODAL (Create / Edit)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-modal-backdrop {
  z-index: var(--gx-z-modal);
}

.gx-crud-modal {
  position: relative;
  max-width: 560px;
}

.gx-crud-modal.gx-modal--sm {
  max-width: 400px;
}

.gx-crud-modal.gx-modal--lg {
  max-width: 720px;
}

.gx-crud-modal.gx-modal--xl {
  max-width: 1000px;
  height: 85vh;
  max-height: 85vh;
}

.gx-crud-modal.gx-modal--xl .gx-modal__body--tabbed {
  flex: 1;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

/* ── Form grid for multi-field forms ── */

.gx-crud-form__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gx-sp-4);
}

.gx-crud-form__grid .gx-field {
  margin-bottom: var(--gx-sp-4);
  grid-column: span 6;
}

.gx-crud-form__grid .gx-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .gx-crud-form__grid {
    grid-template-columns: 1fr;
  }
  .gx-crud-form__grid .gx-field {
    grid-column: span 1 !important;
  }
}

/* ── Form field enhancements ── */

.gx-crud-form .gx-field__label {
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-primary);
  margin-bottom: var(--gx-sp-1);
  display: flex;
  align-items: center;
  gap: 2px;
}

.gx-crud-form .gx-field__hint {
  font-size: 11px;
  color: var(--gx-text-muted);
  margin-top: 3px;
  line-height: var(--gx-leading-snug);
}

.gx-crud-form .gx-field__error {
  font-size: 12px;
  color: var(--gx-danger);
  margin-top: 3px;
  display: none;
  line-height: var(--gx-leading-snug);
}

.gx-crud-form .gx-field__error:not(:empty) {
  display: block;
}

.gx-crud-form .gx-input--error {
  border-color: var(--gx-danger);
}

.gx-crud-form .gx-input--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.gx-crud-form .gx-switch {
  margin-top: var(--gx-sp-2);
}

.gx-switch--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.gx-crud-form .gx-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ── Modal header icon ── */

.gx-crud-modal .gx-modal__title i,
.gx-crud-modal .gx-modal__title svg {
  color: var(--gx-primary);
}

/* ── Save button loading state ── */

.gx-crud-modal .gx-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.gx-crud-modal .gx-btn.is-loading i,
.gx-crud-modal .gx-btn.is-loading svg {
  visibility: hidden;
}

.gx-crud-modal .gx-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: gx-spin 0.6s linear infinite;
}


/* ═════════════════════════════════════════════════════════════
   4. TOAST ENHANCEMENTS
   ═════════════════════════════════════════════════════════════ */

.gx-toast-container {
  z-index: var(--gx-z-toast);
}

.gx-toast {
  animation: gx-toast-in 0.35s var(--gx-ease-bounce);
}

@keyframes gx-toast-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}


/* ═════════════════════════════════════════════════════════════
   5. TABLE ACTION CELL OVERRIDE
   ═════════════════════════════════════════════════════════════ */

td .gx-actions-dropdown {
  display: flex;
  justify-content: center;
}

.gx-table__action + .gx-actions-dropdown {
  display: none;
}


/* ═════════════════════════════════════════════════════════════
   6. TABS  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gx-border-light);
  padding: 0 var(--gx-sp-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height:45.5px;
}

.gx-crud-tabs::-webkit-scrollbar {
  display: none;
}

.gx-crud-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gx-sp-2);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  font-family: var(--gx-font-sans);
  color: var(--gx-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--gx-duration-fast) var(--gx-ease-default),
              border-color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-tabs__tab:hover {
  color: var(--gx-text-primary);
}

.gx-crud-tabs__tab.is-active {
  color: var(--gx-primary);
  border-bottom-color: var(--gx-primary);
}

.gx-crud-tabs__tab i,
.gx-crud-tabs__tab svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.gx-crud-tabs__tab.is-active i,
.gx-crud-tabs__tab.is-active svg {
  opacity: 1;
}

/* Tab tooltip — JS-positioned element (escapes overflow-x clipping) */
.gx-tab-tip {
  position: absolute;
  transform: translateX(-50%);
  background: var(--gx-text-primary);
  color: var(--gx-bg-elevated);
  font-size: 12px;
  font-weight: var(--gx-weight-normal);
  line-height: 1.4;
  padding: var(--gx-sp-1) var(--gx-sp-2);
  border-radius: var(--gx-radius-md);
  white-space: normal;
  min-width: 100px;
  max-width: 220px;
  text-align: center;
  z-index: calc(var(--gx-z-modal, 1000) + 10);
  pointer-events: none;
  box-shadow: var(--gx-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.gx-tab-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

.gx-tab-tip__arrow {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--gx-text-primary);
  border-top: 0;
}

.gx-tab-tip__text {
  display: block;
}

/* Suppress CSS pseudo-element tooltips on tabs (handled by JS) */
.gx-crud-tabs__tab[data-tooltip]:hover::after,
.gx-crud-tabs__tab[data-tooltip]:hover::before {
  display: none;
}

/* Tab panels */

.gx-crud-tabs__panels {
  position: relative;
}

.gx-crud-tabs__panel {
  display: none;
}

.gx-crud-tabs__panel.is-active {
  display: block;
  animation: gx-tab-fade-in 0.2s ease;
}

@keyframes gx-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Body adjustment for tabbed modal */

.gx-modal__body--tabbed {
  padding: var(--gx-sp-5);
  max-height: 60vh;
  overflow-y: auto;
  position: relative;
}

/* Scroll-more indicator shadows */
.gx-modal__body--tabbed.has-scroll-below,
.gx-modal__body.has-scroll-below {
  box-shadow: inset 0 -24px 16px -16px rgba(0, 0, 0, 0.08);
}

.gx-modal__body--tabbed.has-scroll-above,
.gx-modal__body.has-scroll-above {
  box-shadow: inset 0 24px 16px -16px rgba(0, 0, 0, 0.06);
}

.gx-modal__body--tabbed.has-scroll-below.has-scroll-above,
.gx-modal__body.has-scroll-below.has-scroll-above {
  box-shadow: inset 0 -24px 16px -16px rgba(0, 0, 0, 0.08),
              inset 0 24px 16px -16px rgba(0, 0, 0, 0.06);
}

/* Scroll hint arrows */
.gx-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
  z-index: 2;
}

.gx-scroll-hint.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.gx-scroll-hint svg {
  cursor: pointer;
  color: #fff;
  background: var(--gx-primary, #6d5ff5);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  padding: 3px;
  width: 24px;
  height: 24px;
  transition: box-shadow 0.15s ease;
}

.gx-scroll-hint svg:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.gx-scroll-hint--down {
  margin-top: -14px;
}

.gx-scroll-hint--down svg {
  animation: gx-bounce-down 1.5s ease infinite;
}

.gx-scroll-hint--up {
  margin-bottom: -14px;
}

.gx-scroll-hint--up svg {
  animation: gx-bounce-up 1.5s ease infinite;
}

@keyframes gx-bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes gx-bounce-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


/* ═════════════════════════════════════════════════════════════
   7. SUBTABLE  (Fase 7 — mini-table inside modal)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gx-text-sm);
}

.gx-crud-subtable thead th {
  text-align: left;
  font-weight: var(--gx-weight-semibold);
  font-size: 12px;
  color: var(--gx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--gx-sp-2) var(--gx-sp-3);
  border-bottom: 2px solid var(--gx-border-light);
}

.gx-crud-subtable tbody tr {
  border-bottom: 1px solid var(--gx-border-light);
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-subtable tbody tr:hover {
  background: var(--gx-bg-surface-hover);
}

.gx-crud-subtable tbody td {
  padding: var(--gx-sp-2) var(--gx-sp-3);
  vertical-align: middle;
}

.gx-crud-subtable .gx-input,
.gx-crud-subtable .gx-select {
  font-size: var(--gx-text-sm);
  padding: var(--gx-sp-1) var(--gx-sp-2);
  height: 32px;
}

.gx-crud-subtable .gx-input--sm,
.gx-crud-subtable .gx-select--sm {
  height: 28px;
  font-size: 12px;
}

.gx-crud-subtable__delete {
  color: var(--gx-text-muted);
  opacity: 0;
  transition: opacity var(--gx-duration-fast) var(--gx-ease-default),
              color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-subtable tbody tr:hover .gx-crud-subtable__delete {
  opacity: 1;
}

.gx-crud-subtable__delete:hover {
  color: var(--gx-danger) !important;
}

.gx-crud-subtable tfoot td {
  padding: var(--gx-sp-3);
}

.gx-crud-subtable__add {
  width: 100%;
  justify-content: center;
}

.gx-crud-subtable__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── New row (inline add form) ── */
.gx-crud-subtable__newrow {
  background: var(--gx-primary-50, #f5f3ff);
  border-bottom: 2px solid var(--gx-primary-200, #c4b5fd);
}

.gx-crud-subtable__newrow td {
  padding: var(--gx-sp-2) var(--gx-sp-2);
  vertical-align: middle;
}

.gx-crud-subtable__newrow .gx-input,
.gx-crud-subtable__newrow .gx-select {
  background: var(--gx-bg, #fff);
}

.gx-crud-subtable__add-row {
  border-radius: var(--gx-radius-sm, 6px);
}

.gx-crud-subtable__add-row:not(:disabled):hover {
  transform: scale(1.1);
}

/* ── Subtable search bar ── */
.gx-crud-subtable__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-sp-3);
  padding: 0 0 var(--gx-sp-3) 0;
}

.gx-crud-subtable__search-wrap {
  position: relative;
  flex: 0 1 260px;
}

.gx-crud-subtable__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--gx-text-muted, #94a3b8);
  pointer-events: none;
}

.gx-crud-subtable__search-input {
  padding-left: 32px !important;
}

.gx-crud-subtable__count {
  font-size: 0.8125rem;
  color: var(--gx-text-muted, #94a3b8);
  white-space: nowrap;
}

/* ── Subtable scroll wrapper ── */
.gx-crud-subtable__scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
}

/* ── Sortable column headers ── */
.gx-crud-subtable__th--sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--gx-duration-fast, 0.1s) ease;
}

.gx-crud-subtable__th--sortable:hover {
  color: var(--gx-primary, #7c3aed);
}

.gx-crud-subtable__sort-icon {
  display: inline-block;
  width: 14px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.3;
}

.gx-crud-subtable__sort-icon::after {
  content: '⇅';
  font-size: 0.75rem;
}

.gx-crud-subtable__th--asc .gx-crud-subtable__sort-icon {
  opacity: 1;
}
.gx-crud-subtable__th--asc .gx-crud-subtable__sort-icon::after {
  content: '↑';
  color: var(--gx-primary, #7c3aed);
}

.gx-crud-subtable__th--desc .gx-crud-subtable__sort-icon {
  opacity: 1;
}
.gx-crud-subtable__th--desc .gx-crud-subtable__sort-icon::after {
  content: '↓';
  color: var(--gx-primary, #7c3aed);
}

/* Keep thead sticky when scrolling */
.gx-crud-subtable__scroll .gx-crud-subtable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gx-bg-secondary, #f8fafc);
}

/* Keep new row sticky below header */
.gx-crud-subtable__scroll .gx-crud-subtable__newrow {
  position: sticky;
  top: 33px; /* approx header height */
  z-index: 1;
}

/* Search select compact variant (for subtable cells) */
.gx-search-select--sm {
  position: relative;
  min-width: 150px;
}

.gx-search-select--sm .gx-search-select__selected {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-1);
  padding: 4px 8px;
  background: var(--gx-bg);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-sm);
  font-size: 0.8125rem;
  cursor: pointer;
  min-height: 30px;
}

.gx-search-select--sm .gx-search-select__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-search-select--sm .gx-search-select__clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gx-text-muted);
  flex-shrink: 0;
  display: flex;
}

.gx-search-select--sm .gx-search-select__clear:hover {
  color: var(--gx-danger);
}

.gx-search-select--sm .gx-search-select__input {
  font-size: 0.8125rem;
  padding: 4px 8px 4px 28px;
  min-height: 30px;
}

.gx-search-select--sm .gx-search-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--gx-bg, #ffffff);
  background-color: #fff;
  border: 1px solid var(--gx-border-light, #e2e8f0);
  border-radius: var(--gx-radius-sm, 6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  max-height: 200px;
  overflow-y: auto;
  display: none;
  min-width: 220px;
}

.gx-search-select--sm .gx-search-select__option {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8125rem;
  background: #fff;
}

.gx-search-select--sm .gx-search-select__option:hover {
  background: var(--gx-primary-50, #f0f4ff);
}

.gx-search-select--sm .gx-search-select__option--active {
  background: var(--gx-primary-50, #f0f4ff);
  font-weight: 600;
}


/* ═════════════════════════════════════════════════════════════
   8. ACCORDION  (Fase 7 — collapsible items)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gx-crud-accordion > .gx-crud-accordion__add {
  align-self: flex-start;
  margin-bottom: var(--gx-sp-3);
}

/* Accordion add bar */
.gx-crud-accordion__add-bar {
  margin-bottom: var(--gx-sp-3);
}

/* Inline create form */
.gx-crud-accordion__create-form {
  margin-top: var(--gx-sp-3);
  padding: var(--gx-sp-4);
  border: 1px solid var(--gx-primary, #7c3aed);
  border-radius: var(--gx-radius-md);
  background: var(--gx-primary-50, #f5f3ff);
}

.gx-crud-accordion__create-form[hidden] {
  display: none;
}

.gx-crud-accordion__create-actions {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  padding-top: var(--gx-sp-3);
  margin-top: var(--gx-sp-3);
  border-top: 1px solid var(--gx-border-light);
}

.gx-crud-accordion__item {
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-md);
  overflow: hidden;
  transition: box-shadow var(--gx-duration-fast) var(--gx-ease-default);
  margin-bottom: var(--gx-sp-2);
}

.gx-crud-accordion__item:hover {
  box-shadow: var(--gx-shadow-sm);
}

.gx-crud-accordion__item.is-open {
  box-shadow: var(--gx-shadow-md);
  border-color: var(--gx-primary);
  overflow: visible;
}

.gx-crud-accordion__header {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  cursor: pointer;
  user-select: none;
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-accordion__header:hover {
  background: var(--gx-bg-surface-hover);
}

.gx-crud-accordion__toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gx-text-muted);
  display: inline-flex;
  transition: transform var(--gx-duration-base) var(--gx-ease-default);
  flex-shrink: 0;
}

.gx-crud-accordion__item.is-open .gx-crud-accordion__toggle {
  transform: rotate(90deg);
  color: var(--gx-primary);
}

.gx-crud-accordion__summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
}

.gx-crud-accordion__title {
  font-weight: var(--gx-weight-medium);
  color: var(--gx-text-primary);
  font-size: var(--gx-text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gx-crud-accordion__subtitle {
  color: var(--gx-text-muted);
  font-size: var(--gx-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gx-crud-accordion__actions {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-1);
  flex-shrink: 0;
}

.gx-crud-accordion__actions .gx-btn {
  opacity: 0;
  transition: opacity var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-accordion__item:hover .gx-crud-accordion__actions .gx-btn {
  opacity: 1;
}

.gx-crud-accordion__body {
  border-top: 1px solid var(--gx-border-light);
  padding: var(--gx-sp-4);
  background: var(--gx-bg-surface);
  overflow: visible;
}

.gx-crud-accordion__body[hidden] {
  display: none;
}

.gx-crud-accordion__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--gx-sp-3);
  margin-top: var(--gx-sp-3);
  border-top: 1px solid var(--gx-border-light);
}

.gx-crud-accordion__add {
  margin-top: var(--gx-sp-2);
  width: auto;
}

.gx-crud-accordion__add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ═════════════════════════════════════════════════════════════
   9. FIELD GROUPS  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-form__group {
  margin-bottom: var(--gx-sp-4);
}

.gx-crud-form__group + .gx-crud-form__group {
  margin-top: var(--gx-sp-2);
  padding-top: var(--gx-sp-4);
  border-top: 1px solid var(--gx-border-light);
}

.gx-crud-form__group-title {
  font-size: 11px;
  font-weight: var(--gx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gx-text-muted);
  margin-bottom: var(--gx-sp-3);
  padding-bottom: var(--gx-sp-2);
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
}

.gx-crud-form__group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gx-border-light);
}


/* ═════════════════════════════════════════════════════════════
   10. READ-ONLY FIELDS  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-field__value {
  display: block;
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  padding: var(--gx-sp-2) 0;
  line-height: var(--gx-leading-relaxed);
  min-height: 36px;
}

.gx-field__value:empty::after {
  content: '—';
  color: var(--gx-text-muted);
}

.gx-field__value--pre {
  white-space: pre-wrap;
}


/* ═════════════════════════════════════════════════════════════
   11. TOOLTIPS  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-field__tooltip {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--gx-text-muted);
  cursor: help;
  vertical-align: middle;
  opacity: 0.5;
  transition: opacity var(--gx-duration-fast) var(--gx-ease-default),
              color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-field__tooltip:hover {
  opacity: 1;
  color: var(--gx-primary);
}

/* Native tooltip via data-tooltip attribute (uses title attr fallback) */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gx-text-primary);
  color: var(--gx-bg-elevated);
  font-size: 12px;
  font-weight: var(--gx-weight-normal);
  line-height: 1.4;
  padding: var(--gx-sp-1) var(--gx-sp-2);
  border-radius: var(--gx-radius-md);
  white-space: normal;
  max-width: 400px;
  min-width: 180px;
  z-index: 100;
  pointer-events: none;
  box-shadow: var(--gx-shadow-lg);
}

[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gx-text-primary);
  z-index: 101;
}


/* ═════════════════════════════════════════════════════════════
   12. EMPTY STATE  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-empty {
  text-align: center;
  padding: var(--gx-sp-8) var(--gx-sp-4);
  color: var(--gx-text-muted);
}

.gx-crud-empty__icon {
  font-size: 2rem;
  margin-bottom: var(--gx-sp-2);
  opacity: 0.5;
}

.gx-crud-empty__message {
  font-size: var(--gx-text-sm);
  margin-bottom: var(--gx-sp-4);
  line-height: var(--gx-leading-relaxed);
}


/* ═════════════════════════════════════════════════════════════
   13. DRAG-AND-DROP  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: grab;
  color: var(--gx-text-muted);
  opacity: 0.4;
  font-size: 16px;
  line-height: 1;
  user-select: none;
  transition: opacity var(--gx-duration-fast) var(--gx-ease-default),
              color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-crud-drag-handle:hover {
  opacity: 1;
  color: var(--gx-text-primary);
}

.gx-crud-drag-handle:active {
  cursor: grabbing;
}

/* Ghost: item being dragged */

.gx-crud-drag-ghost {
  opacity: 0.4;
}

/* Placeholder: insertion line */

.gx-crud-drag-placeholder {
  height: 2px;
  background: var(--gx-primary);
  border-radius: 1px;
  margin: var(--gx-sp-1) 0;
  transition: all var(--gx-duration-fast) var(--gx-ease-default);
}


/* ═════════════════════════════════════════════════════════════
   14. TAB LOADING SPINNER  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

.gx-crud-tab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-8);
  color: var(--gx-text-muted);
  font-size: var(--gx-text-sm);
}

.gx-crud-tab-loading__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gx-border-light);
  border-top-color: var(--gx-primary);
  border-radius: 50%;
  animation: gx-spin 0.6s linear infinite;
}

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

/* Loading overlay for modal operations (save, delete, config reload) */
.gx-crud-modal__loading-overlay,
.gx-crud-modal__transition-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  border-radius: inherit;
  z-index: 10;
  animation: gx-fade-in 0.15s ease;
}
.gx-crud-modal__loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gx-sp-3, 12px);
}
.gx-crud-modal__loading-text {
  font-size: var(--gx-text-sm, 13px);
  color: var(--gx-text-muted, #6b7280);
  font-weight: 500;
}
.gx-crud-modal__loading-overlay .gx-crud-tab-loading__spinner,
.gx-crud-modal__transition-overlay .gx-crud-tab-loading__spinner {
  width: 28px;
  height: 28px;
}
.gx-crud-modal__loading-overlay.is-error {
  background: rgba(255, 255, 255, 0.95);
}
.gx-crud-modal__loading-dismiss {
  margin-top: var(--gx-sp-2, 8px);
}
@keyframes gx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ═════════════════════════════════════════════════════════════
   15. RESPONSIVE  (Fase 7)
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .gx-crud-modal.gx-modal--xl {
    max-width: calc(100vw - 32px);
    height: 90vh;
    max-height: 90vh;
  }

  .gx-crud-tabs {
    padding: 0 var(--gx-sp-3);
  }

  .gx-crud-tabs__tab {
    padding: var(--gx-sp-2) var(--gx-sp-3);
    font-size: 13px;
  }

  .gx-modal__body--tabbed {
    padding: var(--gx-sp-3);
  }

  .gx-crud-subtable {
    font-size: 12px;
  }

  .gx-crud-subtable thead th,
  .gx-crud-subtable tbody td {
    padding: var(--gx-sp-1) var(--gx-sp-2);
  }

  .gx-crud-accordion__header {
    padding: var(--gx-sp-2) var(--gx-sp-3);
  }

  .gx-crud-accordion__body {
    padding: var(--gx-sp-3);
  }
}


/* ═════════════════════════════════════════════════════════════
   16. TOOLTIP OVERRIDES INSIDE MODAL  (Fase 7)
   ═════════════════════════════════════════════════════════════
   The modal body uses overflow-y: auto, which clips tooltips
   that try to render above (using bottom: 100%). We flip them
   to render BELOW the icon inside the modal, and handle the
   tabs area (overflow-x: auto) separately.
   ═════════════════════════════════════════════════════════════ */

/* ── Tooltips inside scrollable modal body → appear to the RIGHT ── */

.gx-modal__body--tabbed [data-tooltip]:hover::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.gx-modal__body--tabbed [data-tooltip]:hover::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 3px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: var(--gx-text-primary);
  border-left-color: transparent;
}

/* ── Tab bar tooltips: handled via data-tooltip on .gx-crud-tabs__tab ── */

.gx-crud-tabs {
  overflow-x: auto;
  overflow-y: visible;
}

/* ── Ensure tooltip floats above modal chrome ── */

.gx-crud-modal [data-tooltip]:hover::after,
.gx-crud-modal [data-tooltip]:hover::before {
  z-index: calc(var(--gx-z-modal, 1000) + 5);
}

/* ── Fix table header tooltips: reset conflicting bottom from global rule ── */

.gx-table__th-label[data-tooltip]:hover::after {
  bottom: auto;
  min-width: 140px;
  max-width: 260px;
  transform: none;
  left: 0;
}

.gx-table__th-label[data-tooltip]:hover::before {
  bottom: auto;
}


/* ═════════════════════════════════════════════════════════════
   17. SEARCH SELECT  (Fase 7 — autocomplete field)
   ═════════════════════════════════════════════════════════════ */

.gx-search-select {
  position: relative;
  width: 100%;
}

/* Search icon on empty search_select inputs */
.gx-search-select__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px;
  padding-left: 34px !important;
  background-color: var(--gx-bg-surface-alt, #f8f9fa) !important;
}
.gx-search-select--sm .gx-search-select__input {
  background-size: 14px;
  background-position: left 7px center;
  padding-left: 28px !important;
}

.gx-search-select__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gx-sp-2);
  padding: 8px 12px;
  background: var(--gx-bg-surface-alt, #f8f9fa);
  border: 1px solid var(--gx-border-light);
  border-radius: var(--gx-radius-md);
  min-height: 38px;
  cursor: pointer;
  transition: border-color var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-search-select__selected:hover {
  border-color: var(--gx-primary, #7c3aed);
}

.gx-search-select__label {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  font-weight: var(--gx-weight-medium);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-search-select__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gx-text-muted);
  padding: 2px;
  border-radius: var(--gx-radius-sm);
  transition: color var(--gx-duration-fast) var(--gx-ease-default),
              background var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-search-select__clear:hover {
  color: var(--gx-text-danger, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}

.gx-search-select__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--gx-bg-elevated, #ffffff);
  background-color: #fff;
  border: 1px solid var(--gx-border-light, #e2e8f0);
  border-radius: var(--gx-radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  z-index: 100;
}

.gx-search-select__option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--gx-duration-fast) var(--gx-ease-default);
}

.gx-search-select__option:hover {
  background: var(--gx-bg-surface-hover, #f1f5f9);
}

.gx-search-select__option--active {
  background: rgba(124, 58, 237, 0.06);
  border-left: 3px solid var(--gx-primary, #7c3aed);
}

.gx-search-select__option--active .gx-search-select__option-label {
  color: var(--gx-primary, #7c3aed);
}

.gx-search-select__option-label {
  font-size: var(--gx-text-sm);
  color: var(--gx-text-primary);
  font-weight: var(--gx-weight-medium);
}

.gx-search-select__option-extra {
  font-size: 11px;
  color: var(--gx-text-muted);
}

.gx-search-select__loading,
.gx-search-select__empty {
  padding: 12px;
  text-align: center;
  font-size: var(--gx-text-sm);
  color: var(--gx-text-muted);
}

.gx-search-select__loading {
  color: var(--gx-primary);
}


/* ═════════════════════════════════════════════════════════════
   18. RICH TEXT EDITOR  (Jodit integration)
   ═════════════════════════════════════════════════════════════ */

.gx-rich-text-wrap {
  width: 100%;
  min-height: 100px;
}

.gx-rich-text-loading {
  padding: 24px;
  text-align: center;
  font-size: var(--gx-text-sm);
  color: var(--gx-text-muted);
  border: 1px dashed var(--gx-border-light);
  border-radius: var(--gx-radius-md);
}

/* Override Jodit to match our design system */
.gx-rich-text-wrap .jodit-container {
  border: 1px solid var(--gx-border-light) !important;
  border-radius: var(--gx-radius-md) !important;
  font-family: inherit !important;
}

.gx-rich-text-wrap .jodit-container:focus-within {
  border-color: var(--gx-primary, #7c3aed) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.gx-rich-text-wrap .jodit-toolbar__box {
  border-bottom: 1px solid var(--gx-border-light) !important;
  background: var(--gx-bg-surface-alt, #f8f9fa) !important;
}

.gx-rich-text-wrap .jodit-workplace {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: var(--gx-text-sm) !important;
  line-height: var(--gx-leading-relaxed) !important;
  color: var(--gx-text-primary) !important;
}

/* Readonly rich text content */
.gx-rich-text-readonly {
  font-size: var(--gx-text-sm);
  line-height: var(--gx-leading-relaxed);
  color: var(--gx-text-primary);
  overflow: hidden;
  word-wrap: break-word;
}

.gx-rich-text-readonly h1,
.gx-rich-text-readonly h2,
.gx-rich-text-readonly h3 {
  margin: 0.8em 0 0.4em;
  line-height: 1.3;
}

.gx-rich-text-readonly p {
  margin: 0 0 0.5em;
}

.gx-rich-text-readonly ul,
.gx-rich-text-readonly ol {
  padding-left: 1.5em;
  margin: 0 0 0.5em;
}

.gx-rich-text-readonly img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gx-radius-sm);
}

.gx-rich-text-readonly table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.gx-rich-text-readonly table td,
.gx-rich-text-readonly table th {
  border: 1px solid var(--gx-border-light);
  padding: 6px 10px;
  font-size: var(--gx-text-sm);
}

.gx-rich-text-readonly a {
  color: var(--gx-primary, #7c3aed);
  text-decoration: underline;
}