/*
 * content-protection.css
 * Scope: only elements inside `.protected-content` — never document-wide.
 * Exceptions: inputs/editors/.allow-copy stay selectable.
 */

.protected-content {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Level 2: block selection on the entire document (except editable elements).
   !important needed to override component-level user-select rules from app CSS. */
html[data-cp-protection-level="2"],
html[data-cp-protection-level="2"] body,
html[data-cp-protection-level="2"] body * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Allow selection inside form/editor/explicit opt-in — applies in both scopes */
html[data-cp-protection-level="2"] input,
html[data-cp-protection-level="2"] textarea,
html[data-cp-protection-level="2"] select,
html[data-cp-protection-level="2"] [contenteditable="true"],
html[data-cp-protection-level="2"] .allow-copy,
html[data-cp-protection-level="2"] [data-allow-copy="true"],
html[data-cp-protection-level="2"] .ProseMirror,
html[data-cp-protection-level="2"] .ql-editor,
html[data-cp-protection-level="2"] .cm-content,
.protected-content input,
.protected-content textarea,
.protected-content select,
.protected-content [contenteditable="true"],
.protected-content .allow-copy,
.protected-content [data-allow-copy="true"],
.protected-content .ProseMirror,
.protected-content .ql-editor,
.protected-content .cm-content {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Images inside protected content — no drag, no save-as via long-press */
.protected-content img,
.protected-content audio,
.protected-content video {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
}
.protected-content img {
    pointer-events: auto;
}

/* Watermark overlay — only when data-watermark="1" */
.protected-content[data-watermark="1"]::before {
    content: attr(data-watermark-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: var(--cp-watermark-bg, none);
    background-repeat: repeat;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Watermark is rendered via SVG background (set by JS) — pseudo content kept as accessible text */

/* Toast container */
.cp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cp-toast.show { opacity: 1; }

/* Print protection */
@media print {
    [data-cp-protection-level="2"] .protected-content,
    body[data-cp-allow-print="0"] .protected-content {
        display: none !important;
    }
    body[data-cp-allow-print="0"]::before {
        content: "Nội dung này không hỗ trợ in trực tiếp.";
        display: block;
        padding: 40px;
        text-align: center;
        font-size: 18px;
        color: #111;
    }
}