/* CWG master-data record editor -- ERP right-drawer + collapsible history +
 * AI-draft affordance (lane R2-MDATA, 2026-09-27, Ben's items #2/#3).
 *
 * Everything here is ADDITIVE: a new `.ds-modal--drawer` modifier (opt-in via
 * RowPopup's existing `className` prop -- the exact same mechanism the
 * sales-pipeline CRM popups already use for `.ds-modal--crm`, see
 * components.css's own specificity note near that rule) plus new
 * `.cwg-history*` / `.cwg-ai-draft*` primitives consumed only by
 * CoreWorkspace.tsx's record editor. No existing `.ds-modal--dialog`
 * consumer (every other RowPopup caller across property/sales/dev/finance/
 * procurement) passes this className, so every one of them renders
 * byte-for-byte unchanged.
 *
 * Loaded after module-hr-cwg-dense.css (whose `.property-editor-fields--
 * dense` grid this drawer relies on for its 2-4 column layout) and before
 * red-plate.css, same placement rule as every other module skin
 * (src/lib/designSystems.ts SKIN_AND_MODULE_CSS_FILES).
 */

/* ----------------------------------------------------------------------
 * 1. Right-side drawer shell.
 * Three-class selectors on purpose, matching the codebase's own existing
 * convention (see the `.ds-modal--crm` specificity note in components.css):
 * the base `.ds-modal.ds-modal--dialog` rule already carries two classes,
 * so a lower-specificity override would lose the cascade regardless of load
 * order -- these match or exceed it on purpose, not by accident.
 * ------------------------------------------------------------------- */
.ds-modal-backdrop.ds-modal-backdrop--dialog:has(.ds-modal--drawer) {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.ds-modal.ds-modal--dialog.ds-modal--drawer {
  width: clamp(420px, 34vw, 640px);
  min-width: min(420px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border-width: 0 0 0 1.5px;
  resize: none;
  /* Reuses the existing --shadow-drag token (portal-core.css) -- the same
   * elevation shadow every other "lifted above the page" surface in this
   * design system already uses -- rather than a new color literal. */
  box-shadow: var(--shadow-drag);
}
.ds-modal--drawer .ds-modal-dialog-body {
  padding: 14px 20px 18px;
}
.ds-modal--drawer .ds-modal-dialog-foot {
  position: sticky;
  bottom: 0;
}

/* ----------------------------------------------------------------------
 * 2. Collapsible compact revision history (native <details>/<summary> --
 * no JS open/close state needed; CoreWorkspace only wires onToggle to
 * lazy-fetch the list the first time it opens).
 * ------------------------------------------------------------------- */
.cwg-history {
  margin: 0 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper-card);
}
.cwg-history[open] {
  padding-bottom: 4px;
}
.cwg-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.cwg-history-toggle::-webkit-details-marker {
  display: none;
}
.cwg-history-toggle::before {
  content: "\25B8";
  color: var(--ink-mute);
  margin-right: 6px;
  font-size: 9px;
}
.cwg-history[open] > .cwg-history-toggle::before {
  content: "\25BE";
}
.cwg-history-toggle-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cwg-history-body {
  padding: 0 10px;
}
.cwg-history-list {
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cwg-history-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
}
.cwg-history-row:first-child {
  border-top: 0;
}
.cwg-history-row-rev {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  flex: none;
  width: 44px;
}
.cwg-history-row-who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-mute);
}
.cwg-history-row-status {
  flex: none;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cwg-history-empty {
  margin: 0;
  padding: 6px 0 8px;
  font-size: 11px;
  color: var(--ink-mute);
}

/* ----------------------------------------------------------------------
 * 3. Locked (const-typed) field carrying a stored value that predates the
 * constraint -- R2-MDATA UX audit P2: Finance's Legal entities Country/
 * Currency showing "to be confirmed" with no visual cue the record is
 * incomplete. Same warm/amber tone the dropzone/suggestion primitives
 * already use for "needs attention", never the red error tone (this is a
 * data-quality flag, not a validation failure).
 * ------------------------------------------------------------------- */
.gsp-input--incomplete {
  border-color: var(--ds-c-amber-23);
  background: var(--ds-c-yellow-06);
}

/* ----------------------------------------------------------------------
 * 4. Job catalogue "AI: Draft from title" affordance.
 * ------------------------------------------------------------------- */
.cwg-ai-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-c-yellow-06);
}
.cwg-ai-draft-hint {
  font-size: 10px;
  color: var(--ink-mute);
  flex: 1 1 160px;
  min-width: 0;
}
.cwg-ai-draft-error {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--ds-c-red-26);
}