/*
 * The employee legal-document editor at /legal-documents: everything below is used only there.
 * Split from legal.css for the same reason legal-report.css is, and it follows that sheet's two
 * mechanics exactly:
 *
 * 1. THE SURFACE IS antd, the only UI kit this app carries. Colour, radius, spacing and type come
 *    from legal.css's tokens, whose values are MBNXT's, so this screen re-themes with the rest of
 *    the estate (print included) instead of carrying a second palette to keep in step by hand.
 *    antd's own tokens take the same values through `src/theme/antdTheme.ts`.
 *
 * 2. SPECIFICITY IS LOAD-BEARING. index.html links this sheet and THEN Vite's bundle, which
 *    carries Tailwind's preflight and antd's own cssinjs output, so anything here written at equal
 *    specificity LOSES on document order. Every selector below is therefore anchored on `#root`,
 *    the page's mount point. Do not "simplify" that prefix away: the rule stops applying.
 *
 * The antd `App` wrapper's ink reset already lives in legal-report.css (`#root .ant-app`), which
 * index.html links for every page, so it is deliberately not repeated here.
 */

/* ── The screen ──────────────────────────────────────────────────────────────────────────── */

#root .legal-doc-workspace {
  margin-top: var(--sp-lg);
}

/* Alert, `yellow-subtle` variant: `preview/alert.html:44`, rounded-xs with px-3 py-2 and no
   border, because a subtle alert's wash is its boundary. */
#root .legal-doc-readonly-note {
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-control);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1875rem;
}

#root .legal-doc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin: var(--sp-lg) 0 var(--sp-md);
}

#root .legal-doc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

#root .legal-doc-filter {
  min-width: 11rem;
}

#root .legal-doc-error {
  color: var(--danger-ink);        /* red-800 is the TEXT token; red-700 is the border's */
  font-weight: 700;
}

/* ── The list ────────────────────────────────────────────────────────────────────────────── */

/* THE SCROLL CONTAINER, NEVER THE TABLE ITSELF. `display: block` on a <table> abandons the table
   layout algorithm: every row becomes its own anonymous shrink-to-fit table, so the rows and the
   rule under each one stop at the widest cell's content instead of running the width of the frame.
   That is what left this register ending mid-page while its own toolbar spanned the whole one. */
#root .legal-doc-table-scroll {
  overflow-x: auto;
}

#root .legal-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  /* Wide by nature: eight columns, one of which is a full document title. Under this width the
     container above scrolls rather than truncating a title an editor has to be able to read whole. */
  min-width: 56rem;
}

#root .legal-doc-table th,
#root .legal-doc-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

#root .legal-doc-table th {
  font-weight: 600;
  white-space: nowrap;
}

#root .legal-doc-sort {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}

#root .legal-doc-sort:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The mono face is retired with the old register. A slug and a date are a run of short tokens,
   so tabular figures keep the two columns aligned, which is what the mono was doing here. */
#root .legal-doc-slug,
#root .legal-doc-date {
  font-size: 0.75rem;              /* text-xxs 12 / 16 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Badge at the default size: `preview/badges.html:25` h-5 (20px), px-1.5 (6px), text-xs (13),
   bold, pill. Rest is the `light` variant; published takes `green-subtle` and archived stays
   light, so a status reads by colour AND by its own word. */
#root .legal-doc-status {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: #edeff1;             /* MBNXT specialDark-300 */
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#root .legal-doc-status-published {
  background: var(--ok-line);      /* MBNXT green-100, the `green-subtle` badge's ground */
  color: var(--primary);
}

#root .legal-doc-status-archived {
  background: #edeff1;
}

#root .legal-doc-pager {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
  font-size: 0.8125rem;
}

/* ── The editor ──────────────────────────────────────────────────────────────────────────────
   The shell is `@groupon2/frontend-article-editor`'s (the same desk the investor site writes on):
   the actions across the top, then a title and a full-height body at the whole width; the
   Identity and Search-and-sharing tabs sit in the shell's Settings drawer. Its layout lives in the
   package; this app only points the package's `--article-editor-*` properties at its own tokens,
   from one class. The rules this replaces (`.legal-doc-form`, `.legal-doc-form-aside`,
   `.legal-doc-tabs`, ...) were a grid, a sticky rail and a tab frame written here for one site. */

#root .legal-doc-workspace {
  --article-editor-line: var(--line);
  --article-editor-surface: var(--surface);
  --article-editor-radius: var(--radius-card);
  --article-editor-gap: var(--sp-md);
  --article-editor-gap-lg: var(--sp-lg);
}

/* The editor's own height is a PROP, not a rule here: the toolkit writes `min-height` onto the
   ProseMirror element as an inline style, which no stylesheet can override (see
   `LazyLegalTiptapEditor`). This only matches the placeholder that stands in while its chunk
   loads, so the page does not jump when it lands. */
#root .legal-doc-editor-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(32rem, calc(100vh - 20rem), 60rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

#root .legal-doc-panel {
  padding: var(--sp-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

#root .legal-doc-panel > legend {
  padding: 0 var(--sp-xs);
  font-size: 0.875rem;             /* text-h6 14 / 17 / 800 */
  line-height: 1.0625rem;
  font-weight: 800;
}


/* ── The body's sections ─────────────────────────────────────────────────────────────────── */

#root .legal-doc-sections {
  display: grid;
  gap: var(--sp-md);
}

#root .legal-doc-section {
  padding: var(--sp-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

#root .legal-doc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}

#root .legal-doc-section-name {
  font-size: 0.9375rem;            /* the list-group label's own 15 / 700 */
  font-weight: 700;
}

/* Badge at the SM size: `preview/badges.html:23`, h-[18px] px-1 text-xxs (12), bold, pill. The
   18px is the component's one arbitrary value and is deliberate; 20px is visible in a dense row. */
#root .legal-doc-section-kind {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.25rem;
  border-radius: var(--radius-pill);
  background: #edeff1;             /* MBNXT specialDark-300 */
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}


/* ── The editor desk ─────────────────────────────────────────────────────────────────────────
   The toolkit's `EditorWorkspace` (editor on the left, component palette and pictures on the
   right), re-pointed from its light-grey defaults onto this app's own tokens. The toolkit
   declares every colour as a custom property precisely so a host can do this from one class
   instead of forking the component; see EditorWorkspace.css for the list. */

#root .legal-doc-editor-desk {
  --tiptap-ws-panel: var(--paper-deep);
  --tiptap-ws-surface: var(--surface);
  --tiptap-ws-border: var(--line);
  --tiptap-ws-border-hover: var(--line-soft);
  --tiptap-ws-hover: var(--paper-deep);
  --tiptap-ws-active: var(--paper-deep);
  --tiptap-ws-text: var(--ink);
}

/* Upload sits above the grid it fills, and reads as the quiet secondary action it is: the
   primary act on this screen is writing, not filing pictures. */
#root .legal-doc-editor-desk .legal-doc-media-upload {
  width: 100%;
  margin-bottom: var(--sp-xs);
  padding: var(--sp-xs) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8125rem;
  cursor: pointer;
}

#root .legal-doc-editor-desk .legal-doc-media-upload:hover:not(:disabled) {
  border-color: var(--line-soft);
}

#root .legal-doc-editor-desk .legal-doc-media-upload:disabled {
  opacity: 0.6;
  cursor: default;
}