/* Form Styles */
.form-control,
.form-select {
    background-color: transparent;
    color: #fff;
    border: 1px solid #763DF2;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 2px rgba(118, 61, 242, 0.4);
    border-color: #763DF2;
}
.is-invalid {
    border-color: #ff4f81;
    background-color: rgba(255, 79, 129, 0.05);
    box-shadow: 0 0 6px 2px rgba(255, 79, 129, 0.4);
}
/* Re-theme valid state to cyber cyan to remove the green */
.is-valid {
    border-color: #0bcdf4;
    background-color: rgba(11, 205, 244, 0.06);
    box-shadow: 0 0 6px 2px rgba(11, 205, 244, 0.35);
}
.invalid-feedback { color: #ff4f81 !important; font-size: 0.9rem; margin-top: 0.35rem; display: block; font-weight: 500; }
.valid-feedback { color: #0bcdf4 !important; font-size: 0.9rem; margin-top: 0.35rem; font-weight: 500; display: none; }
/* ===========================
   EDIT PAGE — Cyberpunk form
   Scoped to .edit-page to avoid bleed
   =========================== */

.edit-page .neon-title {
    background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 8px rgba(255,79,207,.45), 0 0 14px rgba(11,205,244,.28);
    animation: headerShimmer 5s linear infinite;
}

.edit-page .neon-panel {
    position: relative;
    border-radius: 18px;
    /* Shimmer outline in magenta–cyan */
    border: 3px solid transparent;
    background:
            /* Panel fill (kept subtle) */
            linear-gradient(0deg, rgba(118, 61, 242, 0.18), rgba(118, 61, 242, 0.18)) padding-box,
            /* Shimmering border gradient ring — magenta & cyan */
            linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 320% 320%;
    animation: borderShimmer 6s linear infinite;
    box-shadow:
            0 0 34px rgba(255, 79, 207, 0.28),
            0 0 54px rgba(11, 205, 244, 0.22);
}

.edit-page .neon-subpanel {
    border-radius: 14px;
    border: 3px solid transparent;
    background:
            linear-gradient(0deg, rgba(10,10,20,.65), rgba(10,10,20,.65)) padding-box,
            linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 320% 320%;
    animation: borderShimmer 6s linear infinite;
    box-shadow:
            0 6px 18px rgba(11,205,244,.16),
            0 0 0 2px rgba(234,57,184,.08) inset;
}

/* Floating-ish label spacing */
.edit-page .neon-field .form-label {
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: .35rem;
    color: #e6f7ff;
    text-shadow: 0 0 6px rgba(11,205,244,.25);
}

/* Strengthen inputs to match theme with shimmer border */
.edit-page .form-control,
.edit-page .form-select {
    background:
            linear-gradient(0deg, rgba(20,20,30,.88), rgba(20,20,30,.88)) padding-box,
            linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 300% 100%;
    border: 3px solid transparent;
    color: #e6f7ff;
    animation: outlineShimmer 4s linear infinite;
    will-change: background-position;
    border-radius: 0.75rem;
}
.edit-page .form-control::placeholder { color: rgba(230,247,255,.55); }
.edit-page .form-control:focus,
.edit-page .form-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 61, 242, 0.35);
}
/* Respect Firefox: fallback clip if mask unsupported (here using background-clip approach works universally) */

/* Existing images grid */
.edit-page .image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
}
@media (min-width: 576px) { .edit-page .image-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .edit-page .image-grid { grid-template-columns: repeat(2, 1fr); } }

.edit-page .image-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a14;
    border: 1px solid rgba(139,233,253,.25);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.edit-page .image-tile img {
    display: block;
    width: 100%;
    height: 152px;
    object-fit: cover;
    transition: transform .3s ease;
}
.edit-page .image-tile:hover img { transform: scale(1.05); }

.edit-page .remove-check {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    background: rgba(10,10,20,.7);
    border-radius: 10px;
    padding: .25rem .5rem;
    border: 1px solid rgba(139,233,253,.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* New image preview tray */
.edit-page .preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .5rem;
    margin-top: .75rem;
}
.edit-page .preview-tile {
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(0deg, #0a0a14, #0a0a14) padding-box,
        linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: borderShimmer 6s linear infinite;
    box-shadow: 0 0 10px rgba(255,79,207,.2), 0 0 10px rgba(11,205,244,.15);
}
.edit-page .preview-tile img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: cover;
}

/* Buttons already themed globally; boost consistency here */
.edit-page .btn.btn-cyberpunk,
.edit-page .btn.btn-cyberpunk-outline {
    border-radius: .9rem;
    font-weight: 800;
    position: relative;
    overflow: hidden;
}
.edit-page .btn.btn-cyberpunk.btn-cyberpunk-danger {
    border-color: #ff3b6b !important;
}

/* Outline buttons with shimmer border on Edit page (mask-free variant for broad support) */
.edit-page .btn.btn-cyberpunk-outline {
    color: #ffffff !important;
    border: 3px solid transparent !important;
    background:
            linear-gradient(#0d0d15, #0d0d15) padding-box,
            linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box !important;
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-clip: padding-box, border-box;
    animation: outlineShimmer 4s linear infinite;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* Header buttons need cyberpunk shimmer on edit page */
.edit-page .btn.btn-cyberpunk-outline {
    color: #ffffff !important;
    border: 3px solid transparent !important;
    background:
            linear-gradient(#0d0d15, #0d0d15) padding-box,
            linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box !important;
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-clip: padding-box, border-box;
    animation: outlineShimmer 4s linear infinite;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

/* Hover effects for header buttons */
.edit-page .btn.btn-cyberpunk-outline:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 18px rgba(118, 61, 242, 0.35),
        0 0 24px rgba(11, 205, 244, 0.25);
}

.edit-page .btn.btn-cyberpunk-outline:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(118, 61, 242, 0.35),
        0 0 18px rgba(11, 205, 244, 0.25);
}

.edit-page .btn.btn-cyberpunk-outline:active {
    transform: translateY(0);
}

/* Validation (edit page palette aligned to theme) */
.edit-page .is-invalid {
    border-color: #ff4f81;
    background-color: rgba(255,79,129,.05);
    box-shadow: 0 0 6px 2px rgba(255,79,129,.4);
}
.edit-page .is-valid {
    border-color: #0bcdf4;
    background-color: rgba(11,205,244,.06);
    box-shadow: 0 0 6px 2px rgba(11,205,244,.35);
}

/* ===========================
   EDIT PAGE — Enhancements per issue
   =========================== */

/* Shimmer border around existing images */
.edit-page .image-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(0deg, #0a0a14, #0a0a14) padding-box,
        linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 320% 320%;
    animation: borderShimmer 6s linear infinite;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.edit-page .image-tile img { border-radius: 10px; }

/* Tier-like offset lines under the Edit header (matching index page style) */
.edit-page .tier-lines {
    position: relative;
    height: 8px;
    margin-top: .25rem;
    margin-bottom: .5rem;
}
.edit-page .tier-lines span {
    position: absolute;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
    background-size: 300% 100%;
    animation: borderShimmer 6s linear infinite;
    box-shadow: 0 0 8px rgba(11,205,244,.25);
}
.edit-page .tier-lines span:first-child { top: 0; width: 56%; }
.edit-page .tier-lines span:last-child { top: 4px; width: 42%; opacity: .85; }

/* Make file input button legible and on-theme with consistent sizing */
.edit-page input[type="file"].form-control { color: #e6f7ff; }
.edit-page input[type="file"]::file-selector-button {
    color: #ffffff;
    font-weight: 700;
    padding: .5rem 1rem;
    margin-right: .75rem;
    border-radius: .75rem;
    border: 3px solid transparent;
    background: linear-gradient(#0d0d15,#0d0d15) padding-box,
                linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: outlineShimmer 4s linear infinite;
    cursor: pointer;
    min-height: 44px;
    min-width: 110px;
}
.edit-page input[type="file"]:hover::file-selector-button {
    filter: brightness(1.05);
    box-shadow: 0 0 14px rgba(118, 61, 242, 0.25), 0 0 10px rgba(255,79,207,.18) inset;
}
.edit-page input[type="file"]:focus-visible::file-selector-button {
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 61, 242, 0.35);
}

/* Style Add URL button to match Browse button */
.edit-page .btn-add-url {
    color: #ffffff !important;
    border: 3px solid transparent !important;
    background:
        linear-gradient(#0d0d15, #0d0d15) padding-box,
        linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box !important;
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-clip: padding-box, border-box;
    animation: outlineShimmer 4s linear infinite;
    border-radius: .75rem;
    font-weight: 700;
    min-height: 44px;
    min-width: 110px;
    padding: .5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-page .btn-add-url:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 14px rgba(118, 61, 242, 0.25), 0 0 10px rgba(255,79,207,.18) inset;
}

.edit-page .btn-add-url:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(118, 61, 242, 0.35);
}

/* Button layout improvements - horizontal on larger screens, responsive on mobile */
.edit-page .btn-responsive-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}

.edit-page .btn-responsive-group > * {
    flex: 1 1 0;
    min-width: 96px;
}

.edit-page .btn-responsive-group .btn,
.edit-page .btn-responsive-group form .btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Mobile responsiveness - stack on very small screens */
@media (max-width: 576px) {
    .edit-page .btn-responsive-group {
        flex-direction: column;
    }

    .edit-page .btn-responsive-group > * {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Medium screens - allow shrinking but maintain readability */
@media (min-width: 577px) and (max-width: 768px) {
    .edit-page .btn-responsive-group > * {
        min-width: 100px;
        flex: 1 1 0;
    }
}


/* Keep action button text on a single line while allowing container-level wrapping */
.edit-page .btn-responsive-group .btn,
.edit-page .btn-responsive-group .slide-button {
    white-space: nowrap;
}

/* True shimmer border ring for outline buttons on edit page (Chromium/Safari) */
.edit-page .btn.btn-cyberpunk-outline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(90deg, #ff4fcf, #0bcdf4, #ff4fcf);
    background-size: 300% 100%;
    animation: outlineShimmer 4s linear infinite;
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    /* noinspection CssInvalidPropertyValue */
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(to right, #fff 0%, #fff 100%) content-box,
            linear-gradient(to right, #fff 0%, #fff 100%);
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

/* Add shimmering border to the large image preview card (New/Edit pages) */
.edit-page [data-role="image-thumbs"] + .card {
    border-radius: 14px;
    border: 3px solid transparent;
    background:
        linear-gradient(0deg, #0a0a14, #0a0a14) padding-box,
        linear-gradient(120deg, #ff4fcf, #0bcdf4, #ff4fcf) border-box;
    background-size: 100% 100%, 320% 320%;
    animation: borderShimmer 6s linear infinite;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.edit-page [data-role="image-thumbs"] + .card .card-img-top {
    border-radius: 12px;
}