/* Squishy button START */
.squishy {
    position: relative;
    padding: 7px 12px;
    border: none;
    cursor: pointer;
    transition: all 250ms;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.squishy i {
    align-self: center;
}

/* Busy/disabled: no press affordance while the work is running */
.squishy:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

/* Tech Squishy */
.squishy-tech {
    background-color: rgb(5 150 105);
    color: white;
    border-radius: 0.5rem;
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.3),
        0 2px 0 0 #059669,
        0 4px 0 0 #047857,
        0 6px 0 0 #065f46,
        0 8px 0 0 #064e3b,
        0 8px 16px 0 rgba(5,150,105,0.5);
    overflow: visible;
}

.squishy-tech:hover:not(:disabled) {
    transform: translateY(4px);
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.3),
        0 1px 0 0 #059669,
        0 2px 0 0 #047857,
        0 3px 0 0 #065f46,
        0 4px 0 0 #064e3b,
        0 4px 8px 0 rgba(5,150,105,0.5);
}

.squishy-tech:hover:not(:disabled) i {
    animation: bounce 1s infinite;
}

/* Animations */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-25%);
    }
}

/* Squishy tech END */
/* Save/bookmark button — used by save_item.js on every feed and detail page.
   Kept here rather than in a per-app stylesheet because the button appears in
   politics, överblick, rnm and Min sida, and buttons.css is already loaded by
   all of them. */
/* The button keeps its neutral grey in both states — saved-ness is carried by
   the bookmark glyph going solid (bi-bookmark -> bi-bookmark-fill), and the
   moment-of-action feedback by the green pill below. `is-saved` is still
   toggled by save_item.js and left as a styling hook; it deliberately applies
   no colour of its own. Anchors the pill. */
.save-item-btn {
    position: relative;
}

/* "✓ Sparad" — shown for ~1.2s after a successful save, then faded out.
   pointer-events:none so it can never swallow a click aimed at the button it
   sits on top of. */
.save-item-flash {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    pointer-events: none;

    padding: 0.1rem 0.45rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background-color: #f0fdf4;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;
    animation: save-item-flash-in 0.18s ease-out forwards;
}

/* Set by save_item.js when there is not enough room above the button inside a
   scrolling feed, which would otherwise slice the pill in half. */
.save-item-flash.is-below {
    bottom: auto;
    top: calc(100% + 4px);
    animation-name: save-item-flash-in-below;
}

.save-item-flash.is-leaving {
    animation: save-item-flash-out 0.3s ease-in forwards;
}

.save-item-flash.is-below.is-leaving {
    animation-name: save-item-flash-out-below;
}

@keyframes save-item-flash-in {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes save-item-flash-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -4px); }
}

@keyframes save-item-flash-in-below {
    from { opacity: 0; transform: translate(-50%, -4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes save-item-flash-out-below {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, 4px); }
}

/* Flashed for ~1.5s when a toggle request fails, so a dropped save is visible
   rather than silently doing nothing. */
.save-item-btn.save-item-error {
    color: #b91c1c;
    border-color: #b91c1c;
    animation: save-item-shake 0.3s;
}

@keyframes save-item-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* Keep the feedback, drop the motion. The pill still appears and disappears —
   only the slide and the shake go away. */
@media (prefers-reduced-motion: reduce) {
    .save-item-flash,
    .save-item-flash.is-below {
        opacity: 1;
        transform: translate(-50%, 0);
        animation: none;
    }

    .save-item-flash.is-leaving,
    .save-item-flash.is-below.is-leaving {
        opacity: 0;
        animation: none;
        transition: opacity 0.2s linear;
    }

    .save-item-btn.save-item-error {
        animation: none;
    }
}

/* "Spara i ärende" — the archive-box button save_to_case.js attaches next to
   every bookmark, and the one shared popup it opens. The popup is fixed and
   lives in <body> (or the open modal), so feed scroll boxes cannot clip it. */
.save-to-case-btn .fa-box-archive {
    font-size: 0.9em;
}

.save-to-case-popup {
    position: fixed;
    z-index: 1085; /* above Bootstrap modals (1055) and dropdowns */
    width: 260px;
    max-width: calc(100vw - 16px);
    padding: 0.4rem;
    border: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
    border-radius: 8px;
    background: var(--brand-color-surface, #ffffff);
    color: var(--brand-color-text, #122033);
    box-shadow: 0 10px 28px rgba(18, 32, 51, 0.16);
    font-size: 0.875rem;
    text-align: left;
}

.save-to-case-head {
    padding: 0.25rem 0.45rem 0.4rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brand-color-text-muted, #5b6b7f);
}

.save-to-case-muted {
    padding: 0.35rem 0.45rem;
    color: var(--brand-color-text-muted, #5b6b7f);
}

.save-to-case-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

.save-to-case-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.save-to-case-item:hover:not(:disabled),
.save-to-case-item:focus-visible {
    background: var(--brand-color-surface-muted, #f5f8fc);
}

.save-to-case-item .fa-folder {
    color: var(--brand-color-text-muted, #5b6b7f);
}

.save-to-case-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.save-to-case-item.is-done {
    cursor: default;
    opacity: 0.75;
}

.save-to-case-done {
    flex: none;
    color: #15803d;
    font-size: 0.75rem;
    font-weight: 600;
}

.save-to-case-foot {
    margin-top: 0.3rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--brand-color-border, rgba(18, 32, 51, 0.12));
}

.save-to-case-new {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-color-link, #0d6efd);
    font-weight: 600;
    text-align: left;
}

.save-to-case-new:hover,
.save-to-case-new:focus-visible {
    background: var(--brand-color-surface-muted, #f5f8fc);
}

.save-to-case-create {
    display: flex;
    gap: 0.35rem;
    padding: 0.1rem;
}

.save-to-case-error,
.save-to-case-limit {
    padding: 0.35rem 0.45rem 0.1rem;
    font-size: 0.8rem;
}

.save-to-case-error {
    color: #b91c1c;
}