/* PcRichTextEditor global styles - needed because JS-created elements
   are outside Blazor CSS isolation scope */

.pc-variable-dropdown-container {
    position: relative;
    float: right;
}

/* US-232: brand-yellow toolbar pill (was muddy gold #d4a843). */
.pc-variable-btn {
    background-color: var(--mud-palette-secondary, #FCC231) !important;
    color: #01211b !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 600;
    white-space: nowrap;
    height: 28px;
    width: auto !important;
}

.pc-variable-btn:hover {
    filter: brightness(0.95);
}

/* US-232: the Figma "Változó értékek" reference card (replaces the old insert dropdown). */
.pc-variable-card {
    position: fixed;
    z-index: 10000;
    width: 340px;
    max-height: 360px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    box-shadow: 0 2px 20px 5px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    box-sizing: border-box;
}

.pc-variable-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pc-variable-card-title {
    color: #1C8578;
    font-size: 18px;
    font-weight: 500;
}

.pc-variable-card-close {
    border: none;
    background: transparent;
    color: #9F9F9F;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
}

.pc-variable-card-close:hover {
    color: #6f6f6f;
}

.pc-variable-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-variable-card-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14px;
    font-weight: 300;
}

.pc-variable-card-label {
    color: #333333;
    flex: 0 0 auto;
    white-space: nowrap;
}

.pc-variable-card-copy {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #9F9F9F;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
}

.pc-variable-card-copy:hover {
    color: #1C8578;
}

.pc-variable-card-copy--copied {
    color: #1C8578;
}

/* Ensure Quill editor formatting renders correctly (MudBlazor CSS can reset these) */
.ql-editor strong,
.ql-editor b {
    font-weight: 700 !important;
}

.ql-editor em,
.ql-editor i {
    font-style: italic !important;
}

.ql-editor u {
    text-decoration: underline !important;
}

/* Quill's snow.css uses ::before counters and sets list-style-type: none on every
   .ql-editor ol > li / ul > li (specificity 0,1,2). We restore native markers by
   re-asserting list-style-type on the li directly with !important — same selector
   target as snow.css so we win on cascade order without needing ::before content. */
.ql-editor ol,
.ql-editor ol > li {
    list-style-type: decimal !important;
}

.ql-editor ul,
.ql-editor ul > li {
    list-style-type: disc !important;
}

.ql-editor ol,
.ql-editor ul {
    padding-left: 24px !important;
}

.ql-editor li {
    display: list-item !important;
}

/* Suppress snow.css's ::before bullet/counter so we don't end up with double
   markers (one native + one pseudo-element). */
.ql-editor ol > li::before,
.ql-editor ul > li::before {
    content: none !important;
}

/* Image toolbar - floating controls for inline images. Two stacked rows: size+align, then caption. */
.pc-image-toolbar {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px 10px;
}

.pc-image-toolbar-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pc-image-toolbar-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Caption row spans the full toolbar width; the input grows to fill it. */
.pc-image-toolbar-group--caption {
    border-top: 1px solid #ececec;
    padding-top: 6px;
}

.pc-image-toolbar-caption {
    flex: 1 1 auto;
    min-width: 220px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #333;
    line-height: 1.3;
}

.pc-image-toolbar-caption:focus {
    outline: none;
    border-color: #c49a3a;
}

.pc-image-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-right: 2px;
}

.pc-image-toolbar-btn {
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
    line-height: 1.2;
}

.pc-image-toolbar-btn:hover {
    background: #e8e8e8;
    border-color: #bbb;
}

.pc-image-toolbar-btn.active {
    background: #d4a843;
    color: #ffffff;
    border-color: #c49a3a;
}

/* ---- Custom tool popovers ---- */
.pc-custom-popover {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 280px;
}

.pc-custom-popover-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.pc-custom-popover-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 3px;
}

.pc-custom-popover-input,
.pc-custom-popover-select,
.pc-custom-popover-textarea {
    font-size: 13px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 5px 8px;
    outline: none;
    font-family: inherit;
    resize: vertical;
}

.pc-custom-popover-input:focus,
.pc-custom-popover-select:focus,
.pc-custom-popover-textarea:focus {
    border-color: #158ebe;
}

.pc-custom-popover-hint {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}

.pc-custom-popover-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pc-custom-popover-save {
    background: #d4a843;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pc-custom-popover-save:hover {
    background: #c49a3a;
}

.pc-custom-popover-delete {
    background: #f8c8c8;
    color: #e6575a;
    border: 1px solid #e6575a;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pc-custom-popover-delete:hover {
    background: #f0b0b0;
}

/* ---- Editor preview: InfoCard ---- */
.ql-editor .pc-info-card {
    border-radius: 4px;
    padding: 10px 14px;
    margin: 8px 0;
    display: block;
    cursor: pointer;
}

.ql-editor .pc-info-card--information {
    background-color: #cceef3;
    color: #158ebe;
    border: 1px solid #158ebe;
}

.ql-editor .pc-info-card--warning {
    background-color: #ffefbf;
    color: #bb8838;
    border: 1px solid #bb8838;
}

.ql-editor .pc-info-card--danger {
    background-color: #f8c8c8;
    color: #e6575a;
    border: 1px solid #e6575a;
}

.ql-editor .pc-info-card--success {
    background-color: #dbf1d7;
    color: #1e9b6e;
    border: 1px solid #1e9b6e;
}

.ql-editor .pc-info-card__title {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.ql-editor .pc-info-card__body {
    font-size: 14px;
}

/* ---- Editor preview: CTA Button ---- */
/* Reproduces the actual rendered PcButton (MudButton) Color.Secondary + Variant.Filled, Size.Medium
   as measured from the live AdminWebApp DOM: #FCC231 fill, #01211b text, 7px radius, 2px 16px
   padding, 64px min-width, 22px line-height, Fira Sans 500 / 14px, no uppercase, NO box-shadow,
   secondary-darken (#FBB80E) hover. Kept identical to the public display rule in HomePage's
   article-body.css so the editor is WYSIWYG. */
.pc-rich-text-editor--article .ql-editor a.pc-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 0;
    padding: 2px 16px;
    background-color: var(--pc-secondary, #FCC231);
    color: #01211b;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
}

.pc-rich-text-editor--article .ql-editor a.pc-cta-button:hover {
    background-color: #fbb80e;
}

/* Inline prose links (Quill link tool) = PcButton Color.Secondary + Variant.Text: secondary-colored
   text, no fill, no underline; secondary-hover tint on hover (matches MudButton text variant).
   Scoped to the article editors (Blog/Know) via the --article modifier so other PcRichTextEditor
   hosts (e.g. email templates) keep Quill's default link styling in their preview. */
.pc-rich-text-editor--article .ql-editor a:not(.pc-cta-button) {
    color: var(--pc-secondary, #FCC231);
    background-color: transparent;
    font-weight: 500;
    text-decoration: none;
}

.pc-rich-text-editor--article .ql-editor a:not(.pc-cta-button):hover {
    background-color: rgba(252, 194, 49, .06);
    text-decoration: none;
}

/* ---- Editor preview: YouTube embed ---- */
.ql-editor .pc-youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 8px 0;
    cursor: pointer;
    background: #000;
}

.ql-editor .pc-youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* ---- Editor preview: image caption figure (bug #1297) ---- */
/* The figure carries the size/align inline style; the image fills it. Must mirror the public
   display rules in HomePage's article-body.css so the editor is WYSIWYG. */
.ql-editor .pc-article-figure {
    max-width: 100%;
}

.ql-editor .pc-article-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.ql-editor .pc-article-figure__caption {
    margin-top: 8px;
    color: #9F9F9F;
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

/* US-232: a variable is now an editable `{token}` magic string that self-highlights green while it
   matches a known token. The same `.pc-variable-token` look is shared by the in-body highlight, the
   reference chip in the card, and the generated preview. Replaces the retired amber `.pc-variable-chip`.
   !important beats MudBlazor's global resets, consistent with the rest of this file. */
.pc-variable-token {
    background-color: #DBF1D7 !important;
    color: #1C8578 !important;
    border-radius: 4px !important;
    padding: 0 3px !important;
    font-weight: 500 !important;
}

/* Bug #1213: Quill's snow.css bakes the link-tooltip texts as English `::before` /
   `::after` pseudo-content. Override the pseudo-content with CSS variables so each
   editor instance can localize the tooltip without touching Quill itself. The fallback
   values keep the editor working in English when the host doesn't pass labels (e.g.
   AdminWebApp Blog / Know editors, which don't use the translation system — see memory
   feedback_adminwebapp_no_translations.md). The wrapper class lifts specificity above
   Quill's `.ql-snow .ql-tooltip[...]::before` rules. */
.pc-rich-text-editor .ql-snow .ql-tooltip::before {
    content: var(--pc-rte-link-visit, "Visit URL:");
}

.pc-rich-text-editor .ql-snow .ql-tooltip[data-mode=link]::before {
    content: var(--pc-rte-link-prompt, "Enter link:");
}

.pc-rich-text-editor .ql-snow .ql-tooltip a.ql-action::after {
    content: var(--pc-rte-link-edit, "Edit");
}

.pc-rich-text-editor .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: var(--pc-rte-link-save, "Save");
}

.pc-rich-text-editor .ql-snow .ql-tooltip a.ql-remove::before {
    content: var(--pc-rte-link-remove, "Remove");
}