/*
 * Avalist Theme — components
 * Кнопки, бейджи, картки, форми, тости. Усі значення — через --av-* токени.
 */

/* ============ Buttons ============ */

@keyframes av-btn-shimmer {
    from { transform: translateX(-180%) skewX(-20deg); }
    to   { transform: translateX(280%) skewX(-20deg); }
}

.av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-space-sm);
    padding: 9px 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--av-font);
    font-size: var(--av-size-h4);
    font-weight: var(--av-fw-medium);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition:
        background-color var(--av-duration-normal) var(--av-ease),
        background-size var(--av-duration-normal) var(--av-ease),
        border-color var(--av-duration-normal) var(--av-ease),
        color var(--av-duration-normal) var(--av-ease),
        transform var(--av-duration-normal) var(--av-ease),
        box-shadow var(--av-duration-normal) var(--av-ease);
}

/* Diagonal shimmer sweep — fires once on hover */
.av-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    width: 40%;
    height: 120%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
    transform: translateX(-180%) skewX(-20deg);
}

.av-btn:not(:disabled):not([aria-disabled="true"]):hover::after {
    animation: av-btn-shimmer 0.55s ease forwards;
}

.av-btn:hover {
    text-decoration: none;
}

/* Press feedback */
.av-btn:not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(0) scale(0.97) !important;
    transition-duration: 0.07s !important;
}

.av-btn:disabled,
.av-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.av-btn-sm {
    padding: 6px 14px;
    font-size: var(--av-size-small);
}

.av-btn-lg {
    padding: 11px 28px;
    font-size: var(--av-size-body);
}

/* Primary — основний CTA */
.av-btn-primary {
    background: var(--av-green);
    color: #fff;
    font-weight: var(--av-fw-bold);
    border-color: rgba(115, 174, 32, 0.3);
}

.av-btn-primary:hover {
    background: var(--av-green-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    border-color: rgba(115, 174, 32, 0.55);
    box-shadow:
        0 0 0 1px rgba(115, 174, 32, 0.25),
        0 0 22px rgba(115, 174, 32, 0.38),
        0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Ghost — заповнення зліва направо */
.av-btn-ghost {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--av-green), var(--av-green));
    background-position: left center;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    color: var(--av-green);
    border-color: rgba(115, 174, 32, 0.35);
}

.av-btn-ghost:hover {
    background-size: 100% 100%;
    border-color: rgba(115, 174, 32, 0.65);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow:
        0 0 16px rgba(115, 174, 32, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.28);
}

/* Neutral — нейтральна вторинна */
.av-btn-neutral {
    background: rgba(255, 255, 255, 0.06);
    color: var(--av-text-body);
    border-color: var(--av-border);
}

.av-btn-neutral:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--av-text);
    text-decoration: none;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Danger */
.av-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.25);
}

.av-btn-danger:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    text-decoration: none;
    transform: translateY(-1px);
    border-color: rgba(239, 68, 68, 0.44);
    box-shadow:
        0 0 18px rgba(239, 68, 68, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.28);
}

/* Accent — soft зелена */
.av-btn-accent {
    background: var(--av-green-soft);
    color: var(--av-green);
    border-color: rgba(115, 174, 32, 0.3);
}

.av-btn-accent:hover {
    background: rgba(115, 174, 32, 0.25);
    color: var(--av-green);
    text-decoration: none;
    transform: translateY(-1px);
    border-color: rgba(115, 174, 32, 0.48);
    box-shadow:
        0 0 16px rgba(115, 174, 32, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.28);
}

/* ============ Inputs ============ */

.av-input,
.av-select,
.av-textarea {
    width: 100%;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--av-text);
    border: 1px solid var(--av-border);
    border-radius: 5px;
    font-family: var(--av-font);
    font-size: var(--av-size-h4);
    transition:
        border-color var(--av-duration-fast) var(--av-ease),
        box-shadow var(--av-duration-fast) var(--av-ease);
}

/* Select-specific: знімаємо нативний вигляд, custom chevron */
.av-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 8 7-8' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

.av-select option {
    background: var(--av-card);
    color: var(--av-text);
}

.av-input::placeholder,
.av-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.av-input:focus,
.av-select:focus,
.av-textarea:focus {
    outline: none;
    border-color: var(--av-green);
    box-shadow: 0 0 0 3px var(--av-green-soft);
}

.av-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 8 7-8' fill='none' stroke='%2373ae20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.av-input:hover:not(:disabled),
.av-select:hover:not(:disabled),
.av-textarea:hover:not(:disabled) {
    border-color: var(--av-border-strong);
}

.av-input[aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.5);
}

.av-input:disabled,
.av-select:disabled,
.av-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Cards ============ */

.av-card {
    background: var(--av-card);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius-md);
    padding: 18px;
}

.av-card-lg {
    padding: var(--av-space-lg);
}

.av-card-accent {
    background: rgba(115, 174, 32, 0.08);
    border-color: rgba(115, 174, 32, 0.25);
}

.av-card-soft {
    background: var(--av-card-2);
    border-color: var(--av-border);
}

/* ============ Badges (статуси документів / подій) ============ */

.av-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--av-space-xs);
    padding: 3px 10px;
    border-radius: var(--av-radius-sm);
    font-size: var(--av-size-caption);
    font-weight: var(--av-fw-semibold);
    line-height: 1.4;
    border: 1px solid transparent;
    text-transform: none;
    letter-spacing: var(--av-ls-caption);
}

.av-badge-draft {
    background: var(--av-status-draft-bg);
    color: var(--av-status-draft-text);
    border-color: var(--av-status-draft-border);
}

.av-badge-pending {
    background: var(--av-status-pending-bg);
    color: var(--av-status-pending-text);
    border-color: var(--av-status-pending-border);
}

.av-badge-signing {
    background: var(--av-status-signing-bg);
    color: var(--av-status-signing-text);
    border-color: var(--av-status-signing-border);
}

.av-badge-approved {
    background: var(--av-status-approved-bg);
    color: var(--av-status-approved-text);
    border-color: var(--av-status-approved-border);
}

.av-badge-signed {
    background: var(--av-status-signed-bg);
    color: var(--av-status-signed-text);
    border-color: var(--av-status-signed-border);
}

.av-badge-rejected {
    background: var(--av-status-rejected-bg);
    color: var(--av-status-rejected-text);
    border-color: var(--av-status-rejected-border);
}

.av-badge-archive {
    background: var(--av-status-archive-bg);
    color: var(--av-status-archive-text);
    border-color: var(--av-status-archive-border);
}

/* ============ Toasts ============ */

.av-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--av-space-md);
    padding: 12px 16px;
    border-radius: var(--av-radius-base);
    border: 1px solid var(--av-border);
    background: var(--av-card);
    color: var(--av-text);
    font-size: var(--av-size-h4);
}

.av-toast-success {
    background: var(--av-toast-success-bg);
    border-color: var(--av-toast-success-border);
}

.av-toast-error {
    background: var(--av-toast-error-bg);
    border-color: var(--av-toast-error-border);
}

.av-toast-warning {
    background: var(--av-toast-warning-bg);
    border-color: var(--av-toast-warning-border);
}

.av-toast-info {
    background: var(--av-toast-info-bg);
    border-color: var(--av-toast-info-border);
}

/* ============ Divider ============ */

.av-divider {
    width: 100%;
    height: 1px;
    background: var(--av-border);
    border: 0;
    margin: var(--av-space-lg) 0;
}

/* ============ Pulse / glow utility (для CTA elements) ============ */

@keyframes av-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes av-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(115, 174, 32, 0.22); }
    50% { box-shadow: 0 0 38px rgba(115, 174, 32, 0.42); }
}

.av-pulse {
    animation: av-pulse 2.4s ease-in-out infinite;
}

.av-glow {
    animation: av-glow 3s ease-in-out infinite;
}

/* ============================================================
   Глобальний професійний hover для блочків/карток.
   Прибирає підкреслення тексту всередині, додає підняття + тінь.
   ============================================================ */
.av-card,
.av-tile,
.av-stat-card,
.av-tool-card,
.av-recipient-card,
.av-kb-card,
.av-event-card,
.av-cat-card,
.av-news-card {
    transition:
        transform var(--av-duration-base, .2s) var(--av-ease, ease),
        box-shadow var(--av-duration-base, .2s) var(--av-ease, ease),
        border-color var(--av-duration-base, .2s) var(--av-ease, ease);
    will-change: transform;
}

.av-card:hover,
.av-tile:hover,
.av-stat-card:hover,
.av-tool-card:hover,
.av-recipient-card:hover,
.av-kb-card:hover,
.av-event-card:hover,
.av-cat-card:hover,
.av-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(115, 174, 32, 0.18);
    border-color: var(--av-green);
}

/* Усередині таких блочків — НЕ підкреслюємо текст, навіть для лінків. */
.av-card a,
.av-tile a,
.av-stat-card a,
.av-tool-card a,
.av-recipient-card a,
.av-kb-card a,
.av-event-card a,
.av-cat-card a,
.av-news-card a,
.av-card:hover *,
.av-tile:hover *,
.av-stat-card:hover *,
.av-tool-card:hover *,
.av-recipient-card:hover *,
.av-kb-card:hover *,
.av-event-card:hover *,
.av-cat-card:hover *,
.av-news-card:hover * {
    text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .av-card,
    .av-tile,
    .av-stat-card,
    .av-tool-card,
    .av-recipient-card,
    .av-kb-card,
    .av-event-card,
    .av-cat-card,
    .av-news-card {
        transition: none;
    }
    .av-card:hover,
    .av-tile:hover,
    .av-stat-card:hover,
    .av-tool-card:hover,
    .av-recipient-card:hover,
    .av-kb-card:hover,
    .av-event-card:hover,
    .av-cat-card:hover,
    .av-news-card:hover {
        transform: none;
    }
}