/* =========================================================
   ACTIVATION HERO — FIND & REPLACE
   Rich Text Version
========================================================= */


/* =========================================================
   FIND & REPLACE INSIDE EDIT TEMPLATE
========================================================= */

.editor-find-replace {
    margin: 10px 0 14px;

    border: 1px solid var(--ios-border);
    border-radius: 16px;

    overflow: hidden;
}


.editor-find-replace summary {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px 14px;

    cursor: pointer;

    font-weight: 600;
}


.editor-find-replace summary::marker {
    content: "";
}


.editor-find-replace summary .lucide {
    width: 18px;
    height: 18px;
}


.find-replace-body {
    padding: 0 14px 14px;
}



/* =========================================================
   FIND + REPLACE FIELD GRID
========================================================= */

.find-replace-fields {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    align-items: start;
}


.find-replace-editor-group {
    display: grid;
    gap: 7px;

    min-width: 0;
}


.find-replace-field-label {
    color: var(--ios-text);

    font-size: 14px;
    font-weight: 650;
}



/* =========================================================
   RICH TEXT BOX
========================================================= */

.find-replace-rich-box {
    width: 100%;

    box-sizing: border-box;

    overflow: hidden;

    background:
        var(--ios-glass-strong);

    border:
        1px solid
        var(--ios-border);

    border-radius: 14px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.find-replace-rich-box:focus-within {
    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 65%,
            var(--ios-border)
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-primary) 13%,
            transparent
        );
}



/* =========================================================
   ALWAYS-VISIBLE FORMAT TOOLBAR
========================================================= */

.find-replace-rich-toolbar {
    display: flex;
    align-items: center;

    gap: 5px;

    min-height: 40px;

    padding: 5px 7px;

    box-sizing: border-box;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass)
        );

    border-bottom:
        1px solid
        var(--ios-border);
}


.find-replace-rich-toolbar button {
    width: 31px;
    height: 31px;

    min-width: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: none;

    margin: 0;
    padding: 0;

    color:
        var(--ios-text);

    background:
        transparent;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    box-shadow: none;

    cursor: pointer;

    line-height: 1;

    transition:
        background 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease,
        transform 0.14s ease;
}


.find-replace-rich-toolbar button:hover {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 10%,
            var(--ios-glass)
        );

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 15%,
            var(--ios-border)
        );
}


.find-replace-rich-toolbar button:active {
    transform:
        scale(0.95);
}


.find-replace-rich-toolbar button.is-active,
.find-replace-rich-toolbar button[aria-pressed="true"] {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--theme-primary),
            var(--theme-primary-dark)
        );

    border-color:
        var(--theme-primary);

    box-shadow:
        0 2px 7px
        color-mix(
            in srgb,
            var(--theme-primary) 26%,
            transparent
        );
}


.find-replace-rich-toolbar button strong,
.find-replace-rich-toolbar button em,
.find-replace-rich-toolbar button u {
    font-size: 14px;
}


.find-replace-rich-toolbar button .lucide {
    width: 16px;
    height: 16px;

    stroke-width: 1.7;
}



/* =========================================================
   CONTENTEDITABLE FIND / REPLACE BOX
========================================================= */

.find-replace-rich-editor {
    width: 100%;

    min-height: 76px;
    max-height: 155px;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 11px 12px;

    color:
        var(--ios-text);

    background:
        transparent;

    border: 0;
    outline: 0;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    cursor: text;
}


.find-replace-rich-editor:empty::before {
    content:
        attr(data-placeholder);

    color:
        var(--ios-muted);

    opacity: 0.72;

    pointer-events: none;
}


.find-replace-rich-editor strong,
.find-replace-rich-editor b {
    font-weight: 700;
}


.find-replace-rich-editor em,
.find-replace-rich-editor i {
    font-style: italic;
}


.find-replace-rich-editor u {
    text-decoration: underline;
}


.find-replace-rich-editor a {
    color:
        var(--theme-primary);

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}



/* =========================================================
   SCOPE
========================================================= */

.find-replace-scope {
    display: grid;
    gap: 6px;

    margin-top: 14px;

    font-weight: 600;
}


.find-replace-scope select {
    width: 100%;

    min-height: 44px;

    box-sizing: border-box;

    padding: 9px 12px;

    color:
        var(--ios-text);

    background:
        var(--ios-glass-strong);

    border:
        1px solid
        var(--ios-border);

    border-radius: 12px;

    font: inherit;
}



/* =========================================================
   FIND OPTIONS
========================================================= */

.find-replace-options {
    display: flex;
    flex-wrap: wrap;

    gap: 9px 20px;

    margin:
        15px 0
        10px;
}


.find-replace-options label {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        var(--ios-text);

    font-size: 14px;

    cursor: pointer;
}


#find-replace-modal input[type="checkbox"],
#import-template-container input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;

    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;

    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;

    flex: 0 0 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 40%,
            var(--ios-line)
        ) !important;

    border-radius: 4px !important;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 16%,
            var(--ios-glass-strong)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.18
        ) !important;

    cursor: pointer;
}


/* Checked */

#find-replace-modal input[type="checkbox"]:checked,
#import-template-container input[type="checkbox"]:checked {
    border-color:
        var(--theme-primary) !important;

    background-color:
        var(--theme-primary) !important;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L4 7L9 1' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        50% 50% !important;

    background-size:
        10px 8px !important;

    box-shadow:
        0 3px 9px
        rgba(
            var(--theme-primary-rgb),
            0.22
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.28
        ) !important;
}


/* Select-all mixed state */

#find-replace-modal input[type="checkbox"]:indeterminate,
#import-template-container input[type="checkbox"]:indeterminate {
    border-color:
        var(--theme-primary) !important;

    background-color:
        var(--theme-primary) !important;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4H9' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        50% 50% !important;

    background-size:
        10px 8px !important;
}


/* Keyboard focus */

#find-replace-modal input[type="checkbox"]:focus-visible,
#import-template-container input[type="checkbox"]:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--theme-primary-rgb),
            0.18
        ) !important;
}



/* =========================================================
   FORMAT EXPLANATION
========================================================= */

.find-replace-format-note {
    margin:
        2px 0
        15px;

    padding:
        10px 12px;

    color:
        var(--ios-muted);

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 4%,
            var(--ios-glass)
        );

    border:
        1px solid
        var(--ios-border);

    border-radius:
        11px;

    font-size:
        12px;

    line-height:
        1.45;
}


.find-replace-format-note strong {
    color:
        var(--ios-text);
}



/* =========================================================
   ACTION BAR
========================================================= */

.find-replace-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 14px;
}


.find-replace-actions [data-fr-result] {
    min-width: 0;

    margin-right: auto;

    color:
        var(--ios-muted);

    font-size: 13px;

    line-height: 1.35;
}


.find-replace-actions button,
.find-replace-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}


.find-replace-actions button {
    white-space: nowrap;
}


.find-replace-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


.find-replace-actions .lucide,
.find-replace-close .lucide {
    width: 17px;
    height: 17px;
}



/* =========================================================
   BULK FIND & REPLACE MODAL
========================================================= */

.find-replace-overlay {
    z-index: 10000;
}


.find-replace-modal {
    width:
        min(
            860px,
            calc(100vw - 32px)
        );

    max-height:
        calc(100vh - 40px);

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    padding: 24px;
}


.find-replace-modal > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 19px;
}


.find-replace-modal h2,
.find-replace-modal p {
    margin: 0;
}


.find-replace-modal > header p {
    margin-top: 5px;

    color:
        var(--ios-muted);

    font-size: 13px;
}


.find-replace-close {
    width: 40px;
    height: 40px;

    min-width: 40px;

    flex: none;

    padding: 0;

    border-radius: 12px;
}



/* =========================================================
   VERSION HISTORY WARNING
========================================================= */

.find-replace-warning {
    display: flex;
    align-items: center;

    gap: 8px;

    margin:
        15px 0
        0;

    padding:
        11px 13px;

    color:
        var(--ios-muted);

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 5%,
            var(--ios-glass)
        );

    border:
        1px solid
        var(--ios-border);

    border-radius:
        13px;

    font-size:
        13px;
}


.find-replace-warning .lucide {
    width: 17px;
    height: 17px;

    flex: none;
}



/* =========================================================
   REVIEW MATCHES
========================================================= */

.find-replace-review {
    margin:
        16px 0;

    overflow: hidden;

    border:
        1px solid
        var(--ios-border);

    border-radius:
        15px;
}


.find-replace-review > header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        13px 15px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 6%,
            var(--ios-glass)
        );
}


.find-replace-review h3,
.find-replace-review p {
    margin: 0;
}


.find-replace-review h3 {
    font-size:
        15px;
}


.find-replace-review header p {
    margin-top: 3px;

    color:
        var(--ios-muted);

    font-size:
        12px;
}


.find-replace-review header label {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;

    font-size:
        13px;

    cursor: pointer;
}


.find-replace-review header input,
.find-replace-review-title input {
    accent-color:
        var(--theme-primary);
}


.find-replace-review-list {
    max-height: 310px;

    overflow-y: auto;
}


.find-replace-review-list article {
    padding:
        13px 15px;

    border-top:
        1px solid
        var(--ios-border);
}


.find-replace-review-list article:first-child {
    border-top: 0;
}


.find-replace-review-title {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    cursor: pointer;
}


.find-replace-review-title > span {
    min-width: 0;

    display: grid;

    gap: 2px;
}


.find-replace-review-title strong {
    overflow-wrap:
        anywhere;
}


.find-replace-review-title small {
    color:
        var(--ios-muted);

    font-size:
        11px;
}



/* =========================================================
   BEFORE / AFTER REVIEW
========================================================= */

.find-replace-comparison {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        18px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    margin:
        9px 0
        0
        25px;
}


.find-replace-comparison > .lucide {
    width: 16px;
    height: 16px;

    color:
        var(--ios-muted);
}


.find-replace-comparison p {
    min-width: 0;

    padding:
        8px 10px;

    background:
        color-mix(
            in srgb,
            var(--theme-secondary) 8%,
            var(--ios-glass)
        );

    border-radius:
        10px;

    font-size:
        12px;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;
}


.find-replace-comparison p span {
    display: block;

    margin-bottom:
        3px;

    color:
        var(--ios-muted);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;
}



/* =========================================================
   ADMIN VERSION HISTORY
   KEEP THESE — OTHER PARTS OF THE APP USE THEM
========================================================= */

.admin-version-history {
    display: grid;

    gap: 10px;
}


.admin-version-bulk-bar {
    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        10px 12px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 6%,
            var(--ios-glass-strong)
        );

    border:
        1px solid
        var(--ios-border);

    border-radius:
        12px;

    backdrop-filter:
        blur(18px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(150%);
}


.admin-version-bulk-bar label {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    font-weight:
        600;
}


.admin-version-bulk-bar input,
.admin-version-choice input {
    width: 17px;
    height: 17px;

    accent-color:
        var(--theme-primary);

    cursor: pointer;
}


.admin-version-selected-count {
    margin-left: auto;

    color:
        var(--ios-muted);

    font-size:
        13px;
}


.admin-restore-selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}


.admin-restore-selected:disabled {
    opacity: 0.48;

    cursor: not-allowed;
}


.admin-version-list {
    display: grid;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.admin-version-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px 12px;

    border:
        1px solid
        var(--ios-border);

    border-radius:
        12px;
}


.admin-version-choice {
    min-width: 0;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 10px;

    cursor: pointer;
}


.admin-version-choice > span {
    min-width: 0;

    display: grid;

    gap: 2px;
}


.admin-version-choice strong {
    overflow-wrap:
        anywhere;
}


.admin-version-list small {
    color:
        var(--ios-muted);
}


.admin-version-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}


.admin-version-list button .lucide {
    width: 16px;
    height: 16px;
}



/* =========================================================
   DARK MODE
========================================================= */

[data-theme="dark"]
.find-replace-rich-box {
    background:
        color-mix(
            in srgb,
            var(--ios-glass-strong) 92%,
            #000000
        );
}


[data-theme="dark"]
.find-replace-rich-toolbar {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass)
        );
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 720px) {

    .find-replace-modal {
        width:
            min(
                100%,
                calc(100vw - 20px)
            );

        padding:
            18px;
    }


    .find-replace-fields {
        grid-template-columns:
            1fr;
    }


    .find-replace-rich-editor {
        min-height:
            70px;
    }


    .find-replace-actions {
        align-items:
            stretch;

        flex-wrap:
            wrap;
    }


    .find-replace-actions
    [data-fr-result] {
        width: 100%;

        margin-right: 0;

        margin-bottom:
            3px;
    }


    .find-replace-comparison {
        grid-template-columns:
            1fr;

        margin-left:
            25px;
    }


    .find-replace-comparison >
    .lucide {
        transform:
            rotate(90deg);

        justify-self:
            center;
    }


    .admin-version-bulk-bar {
        align-items:
            stretch;

        flex-wrap:
            wrap;
    }


    .admin-version-selected-count {
        width: 100%;

        margin-left: 0;
    }


    .admin-restore-selected {
        width: 100%;
    }


    .admin-version-list li {
        align-items:
            stretch;

        flex-direction:
            column;
    }

}


@media (max-width: 480px) {

    .find-replace-modal {
        max-height:
            calc(100vh - 16px);

        padding:
            15px;
    }


    .find-replace-modal >
    header {
        margin-bottom:
            15px;
    }


    .find-replace-rich-toolbar {
        min-height:
            38px;

        padding:
            4px 6px;
    }


    .find-replace-rich-toolbar button {
        width: 30px;
        height: 30px;

        min-width:
            30px;
    }


    .find-replace-options {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }


    .find-replace-actions button {
        flex:
            1 1 auto;
    }


    .find-replace-review >
    header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* =========================================================
   FIND & REPLACE — RESULT / STATUS MESSAGE
========================================================= */

.find-replace-actions [data-fr-result] {
    display: inline-flex;
    align-items: center;

    min-height: 34px;
    min-width: 0;

    margin-right: auto;
    padding: 7px 11px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--theme-primary) 22%,
            var(--ios-line)
        );

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 7%,
            var(--ios-glass-strong)
        );

    color:
        color-mix(
            in srgb,
            var(--theme-primary-dark) 82%,
            var(--ios-text)
        ) !important;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;

    box-sizing: border-box;
}


/* Don't show an empty pill before anything happens */

.find-replace-actions [data-fr-result]:empty {
    display: none;
}


/* Dark mode */

html[data-theme="dark"]
.find-replace-actions [data-fr-result] {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 13%,
            var(--theme-dark-panel-strong)
        );

    border-color:
        color-mix(
            in srgb,
            var(--theme-primary) 27%,
            var(--ios-line)
        );

    color:
        var(--theme-secondary) !important;
}
/* =========================================================
   FIND & REPLACE — MATCH HIGHLIGHTING
========================================================= */


/*
 * Bulk Find & Replace review.
 *
 * <mark> is safe here because the review
 * is preview-only and is never stored in
 * the template itself.
 */

.find-replace-match-highlight {

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 28%,
            transparent
        );

    color:
        inherit;

    border-radius:
        4px;

    padding:
        0 2px;

    box-decoration-break:
        clone;

    -webkit-box-decoration-break:
        clone;

}


/*
 * Edit Template Find & Replace.
 *
 * CSS Custom Highlight API lets us paint
 * matches without adding anything to the
 * actual template HTML.
 */

::highlight(cloudshelf-find-replace) {

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 32%,
            transparent
        );

    color:
        inherit;

}

/*
 * Current Find Next result.
 *
 * Stronger than the general match highlight
 * so the user can immediately see which
 * occurrence they are reviewing.
 */

::highlight(cloudshelf-find-replace-current) {

    background:
        color-mix(
            in srgb,
            var(--theme-primary) 62%,
            transparent
        );

    color:
        inherit;

}


.find-replace-match-count {

    min-width:
        48px;

    color:
        var(--ios-muted);

    font-size:
        12px;

    font-weight:
        650;

    text-align:
        center;

    white-space:
        nowrap;

}
/* =========================================================
   FIND & REPLACE — PALETTE-AWARE SCROLLBARS
========================================================= */

.find-replace-modal,
.find-replace-review-list {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(
            var(--theme-primary-rgb),
            0.72
        )
        transparent;
}

.find-replace-modal::-webkit-scrollbar {
    width: 10px;
}

.find-replace-review-list::-webkit-scrollbar {
    width: 8px;
}

.find-replace-modal::-webkit-scrollbar-track,
.find-replace-review-list::-webkit-scrollbar-track {
    background: transparent;
}

.find-replace-modal::-webkit-scrollbar-thumb,
.find-replace-review-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background:
        rgba(
            var(--theme-primary-rgb),
            0.72
        );

    background-clip: padding-box;
}

.find-replace-modal::-webkit-scrollbar-thumb:hover,
.find-replace-review-list::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            var(--theme-primary-rgb),
            0.94
        );

    background-clip: padding-box;
}