/* ---- Outer layout -------------------------------------------------- */
/* CSS variables are defined on BOTH .docx-editor-react (the outermost
   container, so they cascade to the title bar, menu bar, and toolbar)
   AND .docx-editor-host (for the page surface). This ensures the
   toolbar buttons can read --de-toolbar-button-bg-active etc. */
.docx-editor-react {
  /* shadcn-style palette (HSL components) */
  --de-background: 0 0% 100%;
  --de-foreground: 220 14% 14%;
  --de-muted: 220 14% 96%;
  --de-muted-foreground: 220 9% 46%;
  --de-border: 220 13% 91%;
  --de-input: 220 13% 91%;
  --de-primary: 221 83% 53%;
  --de-primary-foreground: 0 0% 100%;
  --de-accent: 221 83% 53%;
  --de-accent-foreground: 0 0% 100%;
  --de-destructive: 0 84% 60%;

  /* semantic chrome palette */
  --de-surface: #ffffff;
  --de-surface-hover: #f1f5f9;
  --de-text: #1f2328;
  --de-text-muted: #57606a;
  --de-border-raw: #d0d7de;
  --de-shadow: rgba(0, 0, 0, 0.08);
  --de-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
  --de-focus-ring: rgba(37, 99, 235, 0.45);
  --de-selection: rgba(37, 99, 235, 0.18);

  /* page geometry */
  --de-page-bg: #ffffff;
  --de-page-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --de-page-width: 794px;
  --de-page-height: 1123px;
  --de-page-margin-x: 96px;
  --de-page-margin-y: 96px;
  --de-page-gap: 24px;

  /* typography */
  --de-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --de-font-size: 11pt;
  --de-line-height: 1.5;

  /* toolbar */
  --de-toolbar-bg: #ffffff;
  --de-toolbar-border: #e5e7eb;
  --de-toolbar-button-bg: transparent;
  --de-toolbar-button-bg-hover: #f1f5f9;
  --de-toolbar-button-bg-active: #dbeafe;
  --de-toolbar-button-fg: #1f2328;
  --de-toolbar-button-fg-active: #2563eb;
  --de-toolbar-button-radius: 6px;
  --de-toolbar-height: 36px;

  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  background: #f1f5f9;
  overflow: hidden;
}

.docx-editor-react-host {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 1; /* below toolbar (z-index: 50) so dropdowns overlay the page */
}

/* ---- Body row: editor content + docked sidebars (e.g. History) ----- */
/* Sits below the title/menu/toolbar chrome (which stay full-width) so a
   docked sidebar only shares space with the document, not the whole
   header — same visual split as Word/Google Docs' version-history panel. */
.docx-editor-body-row {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.docx-editor-main-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}