/**
 * Copyright (c) 2025 TWork Team. All rights reserved.
 * This source code is licensed under the TWork License.
 */

/**
 * DocxEditorProvider.css — Styles to ensure toolbar dropdowns/popovers
 * render correctly without being clipped by parent overflow containers.
 *
 * The @eigenpal/docx-editor-react library uses Radix UI primitives for
 * Select, DropdownMenu, etc. These components render their content via
 * portals to document.body by default, but if a parent container has
 * overflow: hidden/auto, the popper positioning can still be affected.
 *
 * This stylesheet ensures all dropdown/popover content:
 * 1. Escapes overflow-constrained ancestors (position: fixed, high z-index)
 * 2. Has a solid gray background so it remains readable over document content
 */

/* ── Radix UI portal content wrappers ─ */
.ep-root [data-radix-popper-content-wrapper] {
  position: fixed !important;
  z-index: 10000 !important;
}

/* ── ARIA role-based selectors (Radix uses these internally) ── */
.ep-root [role="dialog"],
.ep-root [role="listbox"],
.ep-root [role="menu"],
.ep-root [role="tooltip"] {
  position: fixed !important;
  z-index: 10000 !important;
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 4px 0 !important;
}

/* ── Data-state open indicators ── */
.ep-root [data-state="open"] > [role="dialog"],
.ep-root [data-state="open"] > [role="listbox"],
.ep-root [data-state="open"] > [role="menu"] {
  position: fixed !important;
  z-index: 10000 !important;
  background: #f5f5f5 !important;
}

/* ── Radix collection items (used in Select, DropdownMenu) ─ */
.ep-root [data-radix-collection-item] {
  position: relative; /* keep items in flow within their portal container */
}

/* ── Common class-name patterns used by shadcn/ui + Radix ── */
.ep-root [class*="SelectContent"],
.ep-root [class*="DropdownMenuContent"],
.ep-root [class*="ContextMenuContent"],
.ep-root [class*="PopoverContent"],
.ep-root [class*="select-content"],
.ep-root [class*="dropdown-content"],
.ep-root [class*="popover-content"] {
  position: fixed !important;
  z-index: 10000 !important;
  overflow: visible !important;
  background: #f5f5f5 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 4px 0 !important;
}

/* ── Ensure dropdown menus themselves aren't clipped ── */
.ep-root [class*="SelectTrigger"],
.ep-root [class*="DropdownMenuTrigger"],
.ep-root [class*="ContextMenuTrigger"] {
  overflow: visible !important;
}

/* ── Menu items — ensure text is readable on gray background ── */
.ep-root [role="menuitem"],
.ep-root [role="option"],
.ep-root [class*="SelectItem"],
.ep-root [class*="DropdownMenuItem"],
.ep-root [class*="ContextMenuMenuItem"] {
  color: #262626 !important;
  padding: 6px 12px !important;
}

.ep-root [role="menuitem"]:hover,
.ep-root [role="option"]:hover,
.ep-root [class*="SelectItem"]:hover,
.ep-root [class*="DropdownMenuItem"]:hover {
  background: #e8e8e8 !important;
}

/* ── Toolbar buttons — ensure active/selected state is visible ── */
/* When a formatting button is active (e.g. Bold, Underline), the library
   may set a white background that blends into the page. Force a visible
   background for active toolbar buttons. */
.ep-root button[aria-pressed="true"],
.ep-root button[data-state="open"],
.ep-root button[data-active="true"],
.ep-root [class*="ToolbarToggle"][data-state="on"],
.ep-root [class*="toolbar"][data-state="on"] {
  background: #e0e7ff !important;
  color: #1e293b !important;
}

/* Ensure all toolbar buttons have a non-white background */
.ep-root [class*="toolbar"] button,
.ep-root [class*="Toolbar"] button {
  background: #f8f9fa !important;
  color: #334155 !important;
}

.ep-root [class*="toolbar"] button:hover,
.ep-root [class*="Toolbar"] button:hover {
  background: #e9ecef !important;
}
