/* Inline confirm panel: the app-wide way to ask "are you sure?" — a danger/warning
   strip that slides over the right side of the row or card whose action was hit,
   with the question and two small buttons. Shared by project cards, the sources
   admin tables and the Telegram card on the profile page, so it lives outside
   projects.css (which owns the projects page alone). */

.project-card-confirm {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-left: 1.5px solid var(--border);
    background: var(--bg-elevated);
    min-width: 240px;
    max-width: 75%;
    z-index: 2;
    box-sizing: border-box;
}
.project-card-confirm.is-danger {
    border-left-color: var(--danger);
    background: var(--danger-bg);
}
.project-card-confirm.is-warning {
    border-left-color: var(--warning);
    background: var(--warning-bg);
}
.project-card-confirm-msg {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.002em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.project-card-confirm.is-danger .project-card-confirm-msg {
    color: var(--danger);
}
.project-card-confirm.is-warning .project-card-confirm-msg {
    color: var(--warning);
}
.project-card-confirm-row {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.project-card-confirm-btn {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.project-card-confirm-btn:hover {
    border-color: var(--border-strong);
    background: var(--bg-subtle);
}
.project-card-confirm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.project-card-confirm-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
.project-card-confirm-btn.is-primary-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.project-card-confirm-btn.is-primary-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    filter: brightness(1.08);
    color: #fff;
}
.project-card-confirm-btn.is-primary-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}
.project-card-confirm-btn.is-primary-warning:hover {
    background: var(--warning);
    border-color: var(--warning);
    filter: brightness(1.08);
    color: #fff;
}
html[data-theme="dark"] .project-card-confirm-btn.is-primary-warning,
html[data-theme="dark"] .project-card-confirm-btn.is-primary-warning:hover {
    color: #1f1408;
}

/* Narrow screens: the panel takes the whole width of its card instead of a strip */
@media (max-width: 720px) {
    .project-card-confirm {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}