/* List-as-home workspace: persistent right Preview drawer, inline chips, row click. */

.erp-preview-root,
.erp-workspace-root {
  justify-content: flex-end !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Closed drawers must never paint or steal clicks. Alpine x-show sets
   display:none; .hidden is the class-toggled path. x-cloak is pre-Alpine. */
.erp-preview-root.hidden,
.erp-workspace-root.hidden,
.erp-preview-root[hidden],
.erp-workspace-root[hidden],
.erp-preview-root[x-cloak],
.erp-workspace-root[x-cloak],
.erp-preview-root[style*="display: none"],
.erp-preview-root[style*="display:none"],
.erp-workspace-root[style*="display: none"],
.erp-workspace-root[style*="display:none"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Force flex only when the drawer is actually open. Do not use a blanket
   .erp-preview-root { display:flex !important } — that trapped empty overlays
   over the list when Alpine had already hidden them. */
.erp-preview-root:not(.hidden):not([hidden]):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]),
.erp-workspace-root:not(.hidden):not([hidden]):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  visibility: visible;
}

/* Nested flex wrappers (clients/leads/accounts) must fill the viewport.
   Otherwise the panel's width: min(28rem, 100%) is 100% of an auto-sized
   parent and collapses to 0 — dimmer only, empty overlay after create. */
.erp-preview-root > div:not(.jalusi-modal):not(.erp-drawer-panel):not(.erp-preview-dimmer):not(.erp-ws-field-root),
.erp-workspace-root > div:not(.jalusi-modal):not(.erp-drawer-panel):not(.erp-preview-dimmer):not(.erp-ws-field-root) {
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}
.erp-preview-root .erp-preview-dimmer,
.erp-preview-root .jalusi-modal,
.erp-preview-root .erp-drawer-panel,
.erp-preview-root .erp-ws-field-root,
.erp-workspace-root .erp-preview-dimmer,
.erp-workspace-root .jalusi-modal,
.erp-workspace-root .erp-drawer-panel,
.erp-workspace-root .erp-ws-field-root {
  pointer-events: auto;
}

.erp-drawer-panel,
.erp-preview-root > .jalusi-modal,
.erp-preview-root > [class*="jalusi-modal"],
.erp-preview-root > .relative.z-\[100000\],
.erp-preview-root > div.bg-white,
.erp-workspace-root > .erp-drawer-panel {
  height: 100%;
  max-height: 100vh;
  flex: 0 0 min(28rem, 100%);
  width: min(28rem, 100vw);
  max-width: min(28rem, 100vw);
  margin: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto;
  animation: erpDrawerIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nested field-update is a centered jalusi-modal card, not the Preview drawer. */
.erp-preview-root .erp-ws-field-root,
.erp-workspace-root .erp-ws-field-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  overflow: auto;
}
.erp-preview-root .erp-ws-field-root.hidden,
.erp-workspace-root .erp-ws-field-root.hidden {
  display: none !important;
}
.erp-preview-root .erp-ws-field-root:not(.hidden),
.erp-workspace-root .erp-ws-field-root:not(.hidden) {
  display: flex !important;
}
.erp-preview-root .erp-ws-field-root .jalusi-modal,
.erp-workspace-root .erp-ws-field-root .jalusi-modal {
  height: auto !important;
  max-height: 90vh !important;
  flex: none !important;
  width: 100% !important;
  max-width: 28rem !important;
  margin: 0 !important;
  border-radius: 24px !important;
  overflow-y: auto;
  background: var(--tenant-card-bg, #ffffff) !important;
  color: var(--tenant-card-text, #111827) !important;
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.15)) !important;
  box-shadow: 0 32px 80px color-mix(in srgb, var(--theme-accent-800, #064e3b) 28%, transparent) !important;
}
html.dark .erp-preview-root .erp-ws-field-root .jalusi-modal,
html.dark .erp-workspace-root .erp-ws-field-root .jalusi-modal {
  background: var(--tenant-card-bg, #111827) !important;
  color: var(--tenant-card-text, #e5e7eb) !important;
}

@keyframes erpDrawerIn {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

[data-erp-row],
.erp-row-click {
  cursor: pointer;
}

.erp-chip-select,
.erp-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.2));
  background: var(--theme-accent-100, rgba(16, 185, 129, 0.08));
  color: inherit;
  outline: none;
}
.erp-chip-select:focus {
  border-color: var(--theme-accent-400, rgba(16, 185, 129, 0.5));
  box-shadow: 0 0 0 3px var(--theme-accent-100, rgba(16, 185, 129, 0.08));
}

.erp-ws-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  font-size: 13px;
  min-width: 0;
}
.erp-ws-fields dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-accent-800, rgba(6, 78, 59, 0.6));
  margin-bottom: 2px;
}
html.dark .erp-ws-fields dt { color: color-mix(in srgb, var(--theme-accent, #34d399) 50%, transparent); }

.erp-ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* Detail-page tabs: visible without Alpine (x-cloak used to leave Overview/Notes empty). */
[data-erp-tabs] [data-erp-tab-panel]:not(.is-active) {
  display: none !important;
}

@media (max-width: 640px) {
  .erp-drawer-panel,
  .erp-preview-root > .jalusi-modal,
  .erp-preview-root > div.bg-white {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}