/* ============================================================================
   Syncfusion → Orcanex theming
   ----------------------------------------------------------------------------
   Re-skins Syncfusion's bootstrap5-themed popups — dialogs (Font, Paragraph,
   Page Setup, Columns, Borders & Shading, Table properties, Spell-check, …),
   the document-editor Find/Replace options pane, and the right-click context
   menu — onto the Orcanex design tokens so they match the rest of the app and
   follow the user's chosen theme (light / dark / accent / density).

   Loaded globally AFTER bootstrap5.css. Intentionally colour / border / radius
   / font only — no structural or layout overrides — so it cannot break the
   internals of any third-party dialog. Tokens carry a light-mode fallback in
   case a popup paints before tokens.css resolves. !important is required to win
   against Syncfusion's own theme rules.
   ============================================================================ */

/* Backdrop */
.e-dlg-overlay { background-color: var(--color-backdrop, rgba(0, 0, 0, 0.4)) !important; }

/* Dialog box */
.e-dialog,
.e-dialog.e-popup {
    background: var(--color-panel, #fff) !important;
    border: 1px solid var(--color-border, #d2d0ce) !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: var(--shadow-overlay, 0 12px 32px rgba(0, 0, 0, 0.18)) !important;
    color: var(--color-text, #201f1e) !important;
    font-family: var(--font-family, "Inter", system-ui, sans-serif) !important;
}

/* Header */
.e-dialog .e-dlg-header-content {
    background: var(--color-panel, #fff) !important;
    border-bottom: 1px solid var(--color-border-soft, #edebe9) !important;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0 !important;
}
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header * { color: var(--color-text, #201f1e) !important; }

/* Body */
.e-dialog .e-dlg-content {
    background: var(--color-panel, #fff) !important;
    color: var(--color-text, #201f1e) !important;
}

/* Footer */
.e-dialog .e-footer-content {
    background: var(--color-panel, #fff) !important;
    border-top: 1px solid var(--color-border-soft, #edebe9) !important;
    border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px) !important;
}

/* Close (×) button */
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn { color: var(--color-text-muted, #605e5c) !important; background: transparent !important; }
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover { background: var(--color-bg, #f3f2f1) !important; }

/* Buttons */
.e-dialog .e-btn,
.e-dialog .e-css.e-btn {
    background: var(--color-panel, #fff) !important;
    border: 1px solid var(--color-border, #d2d0ce) !important;
    color: var(--color-text, #201f1e) !important;
    border-radius: var(--radius-sm, 6px) !important;
}
.e-dialog .e-btn:hover { background: var(--color-bg, #f3f2f1) !important; }
.e-dialog .e-btn.e-primary,
.e-dialog .e-btn.e-flat.e-primary {
    background: var(--color-accent, #2b579a) !important;
    border-color: var(--color-accent, #2b579a) !important;
    color: var(--color-on-accent, #fff) !important;
}
.e-dialog .e-btn.e-primary:hover { background: var(--color-accent-hover, #244c87) !important; }

/* Text inputs, textareas, dropdowns */
.e-dialog .e-input-group,
.e-dialog .e-input-group .e-input,
.e-dialog .e-input,
.e-dialog .e-textbox,
.e-dialog input.e-control,
.e-dialog textarea.e-control {
    background: var(--color-panel, #fff) !important;
    color: var(--color-text, #201f1e) !important;
    border-color: var(--color-border, #d2d0ce) !important;
}
.e-dialog .e-input-group.e-input-focus,
.e-dialog .e-input-group:focus-within,
.e-dialog .e-input:focus {
    border-color: var(--color-accent, #2b579a) !important;
    box-shadow: 0 0 0 2px var(--color-accent-ring, rgba(43, 87, 154, 0.2)) !important;
}

/* Checkboxes & radios */
.e-dialog .e-checkbox-wrapper .e-frame.e-check,
.e-dialog .e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: var(--color-accent, #2b579a) !important;
    border-color: var(--color-accent, #2b579a) !important;
}

/* Tab strips inside dialogs (e.g. the Paragraph dialog's Indents/Line-and-Page-Breaks tabs).
   Bootstrap5 leaves the inactive tabs link-blue and the active underline its own primary; re-skin the
   whole strip onto Orcanex tokens — inactive = muted, active = accent, indicator bar = accent. */
.e-dialog .e-tab .e-tab-header {
    background: transparent !important;
    border-bottom: 1px solid var(--color-border-soft, #edebe9) !important;
}
.e-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { font-family: var(--font-family, "Inter", system-ui, sans-serif) !important; background: transparent !important; }
.e-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text { color: var(--color-text-muted, #605e5c) !important; font-weight: 500 !important; }
.e-dialog .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover { background: var(--color-bg, #f3f2f1) !important; }
.e-dialog .e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text { color: var(--color-text, #201f1e) !important; }
.e-dialog .e-tab .e-tab-header .e-toolbar-item.e-active { border-color: var(--color-accent, #2b579a) !important; }
.e-dialog .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text { color: var(--color-accent, #2b579a) !important; }
.e-dialog .e-tab .e-tab-header .e-indicator { background: var(--color-accent, #2b579a) !important; }

/* Document-editor Find/Replace options pane */
.e-de-op,
.e-de-cmt-sub-container,
.e-de-op-dlg-target {
    background: var(--color-panel, #fff) !important;
    color: var(--color-text, #201f1e) !important;
    border-color: var(--color-border, #d2d0ce) !important;
}

/* Right-click context menu */
.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
    background: var(--color-panel, #fff) !important;
    border: 1px solid var(--color-border, #d2d0ce) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--shadow-overlay, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
}
.e-contextmenu-wrapper ul .e-menu-item { color: var(--color-text, #201f1e) !important; }
.e-contextmenu-wrapper ul .e-menu-item .e-caret { color: var(--color-text-muted, #605e5c) !important; }
.e-contextmenu-wrapper ul .e-menu-item.e-focused,
.e-contextmenu-wrapper ul .e-menu-item.e-selected,
.e-contextmenu-wrapper ul .e-menu-item:hover {
    background: var(--color-accent-soft, #eff3fb) !important;
    color: var(--color-accent, #2b579a) !important;
}

/* Comments pane — author, edit box, and the per-comment kebab (⋮) menu.
   The pane is rendered by Syncfusion's Blazor component, so we can only reach it via these global
   EJ2 classes. Goal: the new-comment / edit field reads as a real editable input, and the kebab
   menu (Edit / Delete / Reply / Resolve) reads as a solid, anchored, elevated card instead of a
   transparent "floating" list. */
.e-de-cmt-textarea {
    background: var(--color-panel, #fff) !important;
    color: var(--color-text, #201f1e) !important;
    border: 1px solid var(--color-border, #d2d0ce) !important;
    border-radius: var(--radius-sm, 6px) !important;
}
.e-de-cmt-textarea:focus {
    border-color: var(--color-accent, #2b579a) !important;
    box-shadow: 0 0 0 3px var(--color-accent-ring, rgba(47, 98, 255, 0.35)) !important;
    outline: none !important;
}
.e-de-cmt-author-name { color: var(--color-text, #201f1e) !important; font-weight: 600 !important; }
.e-de-cmt-date { color: var(--color-text-muted, #605e5c) !important; }

/* Keep the kebab trigger visible (default opacity .54 makes it look like it "disappears"). */
.e-de-cmt-drawer { opacity: 0.75 !important; }
.e-de-cmt-drawer:hover { opacity: 1 !important; }

/* The kebab opens a Syncfusion DropDownButton popup. Give it a solid themed card so it no longer
   reads as floating, and lift it above the comment pane. */
.e-dropdown-popup {
    background: var(--color-panel, #fff) !important;
    border: 1px solid var(--color-border, #d2d0ce) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--shadow-overlay, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
    z-index: 100002 !important;
    overflow: hidden !important;
}
.e-dropdown-popup ul { background: transparent !important; padding: 4px !important; }
.e-dropdown-popup ul .e-item {
    color: var(--color-text, #201f1e) !important;
    border-radius: var(--radius-sm, 6px) !important;
}
.e-dropdown-popup ul .e-item:hover,
.e-dropdown-popup ul .e-item.e-focused,
.e-dropdown-popup ul .e-item.e-selected,
.e-dropdown-popup ul .e-item.e-active {
    background: var(--color-accent-soft, #eff3fb) !important;
    color: var(--color-accent, #2b579a) !important;
}