/* Saved Searches page styles
   Scope everything under .saved-searches-root to avoid impacting the rest of the site.
   Palette: pale green ↔ pale pink background, buttons in pale pink (no blue).
*/

/* PAGE WRAPPER TOKENS (scoped) */
.saved-searches-root {
    /* Pale page background (green ↔ pink) */
    --ss-bg-a: #f6fff6; /* very pale green */
    --ss-bg-b: #fff6fb; /* very pale pink */
    /* Card */
    --ss-card-bg: #ffffff;
    --ss-card-border: #e9ecf2;
    --ss-card-border-hover: #d7dce6;
    /* Accent (pale pink buttons) */
    --ss-pink-50: #fff1f6;
    --ss-pink-100: #fde6ef;
    --ss-pink-200: #fbd1e0;
    --ss-pink-300: #f6b9cf;
    --ss-pink-400: #ee9fbe;
    /* Neutrals */
    --ss-muted: #6b7280;
    --ss-text: #212529;
    --ss-sep: #e7eaf0;
    /* Chips */
    --ss-chip-bg: #f3f5f9;
    --ss-chip-border: #dfe4ec;
    /* Radii / shadow / transitions */
    --ss-radius: 14px;
    --ss-shadow-sm: 0 2px 6px rgba(20,25,40,.06);
    --ss-shadow-md: 0 12px 30px -10px rgba(20,25,40,.18);
    --ss-transition: .18s cubic-bezier(.33,.07,.19,.97);
    /* Apply pale colored background */
    background: radial-gradient(900px 450px at 0% -10%, #fff6fb 0%, rgba(255,246,251,0) 70%), linear-gradient(180deg, #fcfdff 0%, #f7f8fb 100%);

    padding: 2rem 0 3rem;
}

    /* Header */
    .saved-searches-root .page-title {
        font-size: 1.55rem;
        font-weight: 600;
        letter-spacing: .3px;
        margin: 0 0 .25rem 0;
        color: var(--ss-text);
    }

    .saved-searches-root .subtitle {
        font-size: .9rem;
        color: var(--ss-muted);
    }

    /* Grid */
    .saved-searches-root .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
        gap: 22px;
        margin-top: 1rem;
    }

    /* Card */
    .saved-searches-root .search-card {
        background: var(--ss-card-bg);
        border: 1px solid var(--ss-card-border);
        border-radius: var(--ss-radius);
        padding: 1.1rem 1.2rem .95rem;
        display: flex;
        flex-direction: column;
        box-shadow: var(--ss-shadow-sm);
        transition: var(--ss-transition);
    }

        .saved-searches-root .search-card:hover {
            border-color: var(--ss-card-border-hover);
            box-shadow: var(--ss-shadow-md);
            transform: translateY(-3px);
        }

    /* Top row */
    .saved-searches-root .card-top {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
    }

    .saved-searches-root .search-title {
        font-size: 1.02rem;
        font-weight: 600;
        margin: 0 0 .2rem;
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    .saved-searches-root .pin-badge {
        display: inline-flex;
        background: #facc15;
        color: #7a5400;
        font-size: .65rem;
        line-height: 1;
        padding: .25rem .42rem;
        border-radius: 7px;
    }

    /* Chips + show more */
    .saved-searches-root .filter-summary {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        align-items: center;
    }

    .saved-searches-root .filter-chip {
        background: var(--ss-chip-bg);
        border: 1px solid var(--ss-chip-border);
        font-size: .62rem;
        padding: .30rem .55rem;
        border-radius: 6px;
        font-weight: 500;
        color: #49535f;
    }

    .saved-searches-root .btn-xs {
        font-size: .60rem;
        padding: .15rem .4rem;
        line-height: 1;
    }

    .saved-searches-root .show-more {
        color: #d26b9a; /* soft pink text */
    }

    /* Technical URL (expanded) */
    .saved-searches-root .technical-url {
        background: var(--ss-pink-50);
        border: 1px solid var(--ss-chip-border);
        padding: .5rem .6rem;
        border-radius: 8px;
        font-size: .65rem;
        max-height: 120px;
        overflow: auto;
        margin-top: .3rem;
    }

        .saved-searches-root .technical-url code {
            color: #5b2b3a;
        }

    /* Toolbar */
    .saved-searches-root .toolbar .btn {
        background: #f7f8fb;
        border: 1px solid #e1e5ec;
        color: #475569;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 9px;
        transition: var(--ss-transition);
        font-size: .9rem;
    }

        .saved-searches-root .toolbar .btn:hover {
            background: #ffffff;
            border-color: #cfd6e1;
        }

        .saved-searches-root .toolbar .btn.danger {
            color: #dc3545;
        }

    /* Meta */
    .saved-searches-root .meta {
        font-size: .68rem;
        color: var(--ss-muted);
        border-top: 1px dashed var(--ss-sep);
        padding-top: .45rem;
    }

    /* Actions row */
    .saved-searches-root .card-actions {
        display: flex;
        gap: .75rem;
    }

        .saved-searches-root .card-actions.has-vert-sep > .btn + .btn {
            position: relative;
        }

            .saved-searches-root .card-actions.has-vert-sep > .btn + .btn::before {
                content: "";
                position: absolute;
                left: -10px;
                top: 18%;
                bottom: 18%;
                width: 1px;
                background: var(--ss-sep);
            }

    /* Primary action – pale pink (no gradient) */
    .saved-searches-root .btn-gin-primary {
        background-color: var(--ss-pink-200);
        border: 1px solid var(--ss-pink-300);
        color: #5b2b3a; /* dark text for contrast */
        font-weight: 600;
    }

        .saved-searches-root .btn-gin-primary:hover {
            background-color: var(--ss-pink-300);
            border-color: var(--ss-pink-400);
            color: #4a2032;
        }

    /* Secondary */
    .saved-searches-root .btn-outline-secondary {
        background-color: #ffffff;
        border: 1px solid var(--ss-card-border);
        color: #4b5563;
    }

        .saved-searches-root .btn-outline-secondary:hover {
            border-color: var(--ss-card-border-hover);
        }

    /* Footer */
    .saved-searches-root .footer-line {
        border-top: 1px solid var(--ss-sep);
        padding-top: .55rem;
    }

        .saved-searches-root .footer-line .btn-link {
            font-size: .62rem;
            color: #d26b9a; /* soft pink */
            text-decoration: none;
        }

            .saved-searches-root .footer-line .btn-link:hover {
                text-decoration: underline;
            }

    /* Empty state */
    .saved-searches-root .empty-state {
        max-width: 520px;
        margin: 4rem auto 2rem;
        padding: 2.2rem 2rem;
        background: var(--ss-card-bg);
        border: 1px solid var(--ss-card-border);
        border-radius: 18px;
        box-shadow: var(--ss-shadow-md);
    }

    .saved-searches-root .empty-icon {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: var(--ss-pink-100);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.1rem;
        color: #b34f78;
        font-size: 1.2rem;
    }

    /* Modal overlay/panels */
    .saved-searches-root .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.45);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 8vh;
        z-index: 1200;
    }

    .saved-searches-root .modal-panel,
    .saved-searches-root .confirm-panel {
        background: var(--ss-card-bg);
        width: min(520px, 90vw);
        border-radius: 20px;
        box-shadow: 0 18px 40px -8px rgba(0,0,0,.28);
        border: 1px solid var(--ss-card-border);
        animation: ss-modalScale .25s ease;
        padding: 0;
    }

        .saved-searches-root .modal-panel .modal-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--ss-sep);
        }

        .saved-searches-root .modal-panel .modal-body {
            padding: 1.2rem 1.25rem 1.35rem;
        }

    .saved-searches-root .confirm-panel {
        padding: 1.2rem 1.2rem 1rem;
    }

    .saved-searches-root .btn-close {
        background: #f1f5f9;
        border: 1px solid #d0d7e2;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
        cursor: pointer;
    }

        .saved-searches-root .btn-close:hover {
            background: #ffffff;
        }

@keyframes ss-modalScale {
    from {
        transform: scale(.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Skeleton loader */
.saved-searches-root .skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--ss-radius);
}

    .saved-searches-root .skeleton .line {
        height: 10px;
        background: #e9eef3;
        border-radius: 6px;
    }

    .saved-searches-root .skeleton .w-60 {
        width: 60%;
    }

    .saved-searches-root .skeleton .w-90 {
        width: 90%;
    }

    .saved-searches-root .skeleton .w-80 {
        width: 80%;
    }

    .saved-searches-root .skeleton .w-40 {
        width: 40%;
    }

    .saved-searches-root .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
        animation: ss-shimmer 1.4s infinite;
    }

.saved-searches-root .search-card .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* clé pour ne plus centrer verticalement */
    gap: .75rem;
    position: relative;
}
/* Option: réduire légèrement la hauteur visuelle du badge pour limiter l’effet de poussée */
.saved-searches-root .search-card .pin-badge {
    padding: .22rem .40rem;
    line-height: 1;
}

/* Si tu veux un offset pour remonter un peu la toolbar (cas où padding interne de la card est grand) */
.saved-searches-root .search-card .toolbar {
    margin-top: 0; /* s'assurer qu'il n'y a pas de marge parasite */
}
@keyframes ss-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Responsive tweaks */
@media (max-width: 720px) {
    .saved-searches-root .cards-grid {
        gap: 16px;
    }

    .saved-searches-root .search-card {
        padding: .95rem .9rem .8rem;
    }

    .saved-searches-root .toolbar .btn {
        width: 34px;
        height: 34px;
    }

    .saved-searches-root .filter-chip {
        font-size: .58rem;
    }

    .saved-searches-root .card-actions {
        flex-direction: column;
        gap: .65rem;
    }

        .saved-searches-root .card-actions.has-vert-sep > .btn + .btn::before {
            display: none;
        }
}