/**
 * IndieTech Popup Admin Styles
 */

// Variables
$primary-color: #0073aa;
$border-color: #ddd;
$bg-light: #f9f9f9;

/**
 * Meta Box Wrapper - WordPress Native Sidebar Styling
 */
.popup-settings-wrapper {
    .form-table {
        // Sidebar layout - stack vertically
        margin: 0;
        border: 0;

        .separator {
            display: block;
            padding-top: 24px;
            & > th {
                border-top: 1px solid gray;
                padding-top: 24px;
            }
        }

        th,
        td {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            border: 0;
            &.double-pb {
                padding-bottom: 8px;
            }
        }

        th {
            font-weight: 400;
            font-size: 13px;
            line-height: 1.4;
            padding: 0 0 4px;
            margin: 12px 0 0;
            color: #1d2327;

            &:first-child {
                margin-top: 0;
            }
        }

        td {
            padding: 0;
            margin: 0;
            &.flex-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0.5rem;
            }
        }

        input[type="text"],
        input[type="number"] {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;

            &.small-text {
                width: 100%;
                max-width: 4rem;
            }

            &.regular-text {
                width: 100%;
            }
        }

        select {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;
        }

        .description {
            display: block;
            margin: 4px 0 0;
            padding: 0;
            color: #646970;
            font-style: normal;
            font-size: 12px;
            line-height: 1.5;
        }

        label {
            display: block;
            margin: 0 0 8px;
            font-weight: 400;
            font-size: 13px;
            line-height: 1.4;

            &:last-child {
                margin-bottom: 0;
            }

            input[type="checkbox"],
            input[type="radio"] {
                margin: 0 5px 0 0;
                vertical-align: middle;
            }
        }

        fieldset {
            border: 0;
            padding: 0;
            margin: 0;

            label {
                display: block;
                margin-bottom: 8px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        // Range Control Component (Gutenberg-style)
        .popup-range-control {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;

            &__slider {
                flex: 1;
                height: 4px;
                appearance: none;
                background: #ddd;
                border-radius: 2px;
                outline: none;
                transition: background 0.15s ease-in-out;

                &::-webkit-slider-thumb {
                    appearance: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: $primary-color;
                    cursor: pointer;
                    transition: background 0.15s ease-in-out;

                    &:hover {
                        background: #005a87; // 10% darker than $primary-color
                    }
                }

                &::-moz-range-thumb {
                    width: 16px;
                    height: 16px;
                    border: none;
                    border-radius: 50%;
                    background: $primary-color;
                    cursor: pointer;
                    transition: background 0.15s ease-in-out;

                    &:hover {
                        background: #005a87; // 10% darker than $primary-color
                    }
                }

                &:focus {
                    background: #ccc;

                    &::-webkit-slider-thumb {
                        box-shadow: 0 0 0 4px rgba($primary-color, 0.2);
                    }

                    &::-moz-range-thumb {
                        box-shadow: 0 0 0 4px rgba($primary-color, 0.2);
                    }
                }
            }

            &__number {
                width: 60px;
                text-align: center;
                padding: 4px 8px;
                border: 1px solid #ddd;
                border-radius: 2px;
                font-size: 13px;
                
                &:focus {
                    border-color: $primary-color;
                    outline: none;
                    box-shadow: 0 0 0 1px $primary-color;
                }
            }
        }

        // Targeting rules inline options
        .popup-target-rule-item {
            margin-bottom: 12px;

            &:last-child {
                margin-bottom: 0;
            }

            > label {
                margin-bottom: 0;
            }
        }

        .popup-target-rule-options {
            margin-top: 8px;
            margin-left: 24px;
            padding: 12px;
            background-color: #f9f9f9;
            border-left: 3px solid $primary-color;
            border-radius: 3px;

            label {
                margin-bottom: 6px;
                font-size: 12px;
                font-weight: 500;
                color: #1d2327;

                &:first-child {
                    margin-top: 0;
                }
            }

            input[type="text"],
            textarea {
                width: 100%;
                margin-top: 4px;
            }

            fieldset {
                margin: 8px 0 0;
                padding: 0;
                border: 0;

                label {
                    margin-bottom: 6px;
                    font-weight: 400;
                }
            }

            .description {
                margin-top: 6px;
                margin-bottom: 0;
            }
        }
    }

    // Conditional rows
    .trigger-delay-row,
    .trigger-scroll-row,
    .display-pages-row {
        transition: opacity 0.3s ease;
    }
}

/**
 * Popup List Columns
 */
.wp-list-table {
    .column-popup_status {
        width: 100px;
    }

    .column-popup_trigger {
        width: 150px;
    }
}

/**
 * Meta Box Sections - WordPress Native Styling
 */
.postbox {
    &.popup-settings-metabox {
        border: 0;
        box-shadow: none;
        background: transparent;
        margin: 0 0 12px;

        .postbox-header {
            border-bottom: 1px solid #dcdcde;
            margin: 0 0 12px;
            padding: 0 0 12px;
        }

        .inside {
            padding: 0;
            margin: 0;
        }
    }
}

/**
 * Help Text
 */
.popup-help-text {
    background: $bg-light;
    padding: 15px;
    border-left: 4px solid $primary-color;
    margin: 15px 0;
    border-radius: 2px;

    p {
        margin: 0.5em 0;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    strong {
        color: $primary-color;
    }
}

/**
 * Status Indicators
 */
.popup-status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;

    &--enabled {
        background-color: #46b450;
    }

    &--disabled {
        background-color: #dc3232;
    }
}

/**
 * Buttons
 */
.popup-actions {
    margin-top: 15px;

    .button {
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }
    }
}

/**
 * Sidebar Meta Box Styling
 */
#side-sortables {
    .popup-settings-wrapper {
        .form-table {
            th {
                margin-top: 10px;
            }
        }
    }
}

/**
 * Responsive
 */
@media (max-width: 782px) {
    .popup-settings-wrapper {
        .form-table {
            th,
            td {
                padding: 0;
            }
        }
    }
}

body :where(.editor-styles-wrapper) {
    background-color: white !important;
    .is-root-container.is-desktop-preview {
        overflow: visible;
        width: 100%;
        border: 1px solid silver;
        border-radius: 5px;
        margin: 0 auto;
        padding: 0;
        // background-color: var(--wp--preset--color--background);
        background-color: white !important;
        position: relative;
    }
}

/**
 * Editor Preview Header and Close Button
 */
.indietech-popup-editor__header {
    padding: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    margin: 0;
}

.indietech-popup-editor__title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    padding-right: 40px;
}

.indietech-popup-editor__close {
    position: absolute;
    z-index: 1000;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    color: #666;
    transition: all 0.2s ease;
    padding: 0;
    
    &:hover,
    &:focus {
        color: #333;
        background-color: #f0f0f0;
        outline: none;
    }
    
    span {
        display: block;
        line-height: 1;
    }
    
    &--no-header {
        top: 15px;
        right: 15px;
    }

    // Button Position: Inside (default - positioned relative to editor container)
    &--inside {
        // Already positioned relative to container by default
    }

    // Button Position: Outside (positioned outside the editor container)
    &--outside {
        position: absolute;
        top: -60px; // Below WP admin bar
        right: -60px; // Account for sidebar width
        background-color: rgba(255, 255, 255, 0.95);
        color: #333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 99999;

        &:hover,
        &:focus {
            background-color: rgba(255, 255, 255, 1);
            color: #000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }
    }

    & ~ div {
        margin-block-start: 0 !important;
    }
}

.is-root-container.is-desktop-preview.indietech-popup-editor__container--no-header {
    padding-top: 60px; // Make room for standalone close button
}

/**
 * Hide Password Protection UI for Popup Post Type
 * This disables the password protected visibility option
 */
.post-type-popup {
    // Classic editor
    #post-visibility-select input[value="password"],
    #post-visibility-select input[value="password"] + label,
    #password-span {
        display: none !important;
    }
    
    // Block editor - multiple selectors to catch all variations
    fieldset.editor-change-status__password-fieldset,
    .editor-post-visibility__dialog-fieldset input[value="password"],
    .editor-post-visibility__dialog-fieldset input[value="password"] + label,
    .editor-post-visibility__dialog-password,
    .editor-post-visibility__dialog-password-input,
    .editor-change-status__password-content,
    .editor-post-visibility__choice[value="password"],
    .components-radio-control__option input[value="password"] {
        display: none !important;
    }
}

.popup-position-control {
    width: 100% !important;
    aspect-ratio: 2 / 1 !important;
    border: 1px solid #ddd !important;
}