/**
 * Audiogarden OS v9.3.45 — UNIFIED BUTTON SYSTEM
 * ─────────────────────────────────────────────────
 * Single source of truth for ALL buttons.
 * Reference design: agos-dbtn ("Uložit finance" button).
 *
 * Overrides: .agos-btn, .agos-dbtn, .ag-c-btn, .agos-action-btn
 * Variants:  --primary (blue), --success (green), --danger (red), --warning (orange)
 * Sizes:     default, --lg (hero actions), --sm (compact)
 *
 * MUST LOAD AFTER portal.css, dashboard-reface.css, admin-detail-v2.css
 */

/* ═══════════════════════════════════════════════════════
   1. BASE — All button systems forced to identical design
   ═══════════════════════════════════════════════════════ */

.agos-btn,
.agos-dbtn,
.ag-c-btn,
.agos-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-family: var(--ag-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    letter-spacing: -0.006em !important;
    border: none !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
    /* Default = filled grey (secondary) */
    background: #F1F5F9 !important;
    color: var(--ag-text, #1E293B) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

/* ═══════════════════════════════════════════════════════
   2. STATES — hover, active, disabled, focus
   ═══════════════════════════════════════════════════════ */

.agos-btn:hover,
.agos-dbtn:hover,
.ag-c-btn:hover,
.agos-action-btn:hover {
    background: #E2E8F0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}

.agos-btn:active,
.agos-dbtn:active,
.ag-c-btn:active,
.agos-action-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.agos-btn:disabled,
.agos-btn.agos-loading,
.agos-dbtn:disabled,
.agos-dbtn.agos-loading,
.ag-c-btn:disabled,
.ag-c-btn.agos-loading,
.agos-action-btn:disabled,
.agos-action-btn.agos-loading {
    opacity: 0.45 !important;
    pointer-events: none !important;
    transform: none !important;
}

.agos-btn:focus-visible,
.agos-dbtn:focus-visible,
.ag-c-btn:focus-visible,
.agos-action-btn:focus-visible {
    outline: 2px solid var(--ag-accent, #2563EB) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════
   3. PRIMARY (blue) — all naming conventions
   ═══════════════════════════════════════════════════════ */

.agos-btn-primary,
.agos-btn.agos-btn-primary,
.agos-dbtn--primary,
.agos-dbtn--accent,
.ag-c-btn-primary,
.agos-action-btn--primary {
    background: var(--ag-accent, #2563EB) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(37,99,235,.3), 0 1px 2px rgba(0,0,0,.06) !important;
}

.agos-btn-primary:hover,
.agos-btn.agos-btn-primary:hover,
.agos-dbtn--primary:hover,
.agos-dbtn--accent:hover,
.ag-c-btn-primary:hover,
.agos-action-btn--primary:hover {
    background: var(--ag-accent-hover, #1D4ED8) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.3), 0 1px 3px rgba(0,0,0,.08) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   4. SUCCESS (green) — confirm / done
   ═══════════════════════════════════════════════════════ */

.agos-btn-success,
.agos-btn.agos-btn-success,
.agos-dbtn--ok,
.agos-action-btn--success {
    background: var(--ag-success, #16A34A) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(22,163,74,.3) !important;
}

.agos-btn-success:hover,
.agos-btn.agos-btn-success:hover,
.agos-dbtn--ok:hover,
.agos-action-btn--success:hover {
    background: #15803D !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.3) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   5. DANGER (red) — delete / cancel
   ═══════════════════════════════════════════════════════ */

.agos-btn-danger,
.agos-btn.agos-btn-danger,
.agos-dbtn--danger,
.agos-action-btn--danger {
    background: var(--ag-danger, #DC2626) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(220,38,38,.3) !important;
}

.agos-btn-danger:hover,
.agos-btn.agos-btn-danger:hover,
.agos-dbtn--danger:hover,
.agos-action-btn--danger:hover {
    background: #B91C1C !important;
    box-shadow: 0 4px 12px rgba(220,38,38,.3) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   6. WARNING (orange) — caution / revert
   ═══════════════════════════════════════════════════════ */

.agos-btn-warning,
.agos-btn.agos-btn-warning,
.agos-dbtn--warn,
.agos-action-btn--warning {
    background: var(--ag-warning, #F59E0B) !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(245,158,11,.3) !important;
}

.agos-btn-warning:hover,
.agos-btn.agos-btn-warning:hover,
.agos-dbtn--warn:hover,
.agos-action-btn--warning:hover {
    background: #D97706 !important;
    box-shadow: 0 4px 12px rgba(245,158,11,.3) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════
   7. SECONDARY (filled grey) — explicit secondary classes
   ═══════════════════════════════════════════════════════ */

.agos-btn-secondary,
.agos-btn.agos-btn-secondary,
.agos-dbtn--secondary,
.agos-action-btn--secondary,
.ag-c-btn-outline {
    background: #F1F5F9 !important;
    color: var(--ag-text, #1E293B) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
    border: none !important;
}

.agos-btn-secondary:hover,
.agos-btn.agos-btn-secondary:hover,
.agos-dbtn--secondary:hover,
.agos-action-btn--secondary:hover,
.ag-c-btn-outline:hover {
    background: #E2E8F0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
    color: var(--ag-text, #1E293B) !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════
   8. KILL GHOSTS / OUTLINES / TEXT BUTTONS
      → All forced to filled secondary
   ═══════════════════════════════════════════════════════ */

.agos-btn-ghost,
.agos-dbtn--ghost,
.ag-c-btn-text {
    background: #F1F5F9 !important;
    color: var(--ag-text-secondary, #6B7280) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
    border: none !important;
}
.agos-btn-ghost:hover,
.agos-dbtn--ghost:hover,
.ag-c-btn-text:hover {
    background: #E2E8F0 !important;
    color: var(--ag-text, #1E293B) !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   9. SIZE: --sm (compact, inline use)
   ═══════════════════════════════════════════════════════ */

.agos-btn-sm,
.agos-dbtn--sm,
.agos-dbtn--xs,
.ag-c-btn-sm {
    padding: 7px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════
   10. SIZE: --lg (hero / primary actions)
       Bigger padding + font for visual hierarchy
   ═══════════════════════════════════════════════════════ */

.agos-btn-lg,
.agos-btn-pill,
.ag-c-btn-lg {
    padding: 13px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

/* Sticky header action buttons = hero size */
.agos-sticky-header .agos-action-btn {
    padding: 11px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════════
   11. FULL-WIDTH modifier
   ═══════════════════════════════════════════════════════ */

.agos-btn-full {
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   12. BUTTON GROUP — consistent gap
   ═══════════════════════════════════════════════════════ */

.ag-btn-group,
.agos-action-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* ═══════════════════════════════════════════════════════
   13. STEPPER PULSE — unified subtle glow on active step
       Applied to: client (.ag-stepper), admin (.agos-sh-),
       collaborator (.agos-status-hero-icon)
   ═══════════════════════════════════════════════════════ */

/* Client stepper active circle — continuous subtle pulse */
.ag-stepper__step--active .ag-stepper__circle {
    animation: agosUnifiedPulse 2s ease-in-out infinite !important;
}

/* Admin stepper active circle — same pulse */
.agos-sh-step--active .agos-sh-circle {
    animation: agosUnifiedPulse 2s ease-in-out infinite !important;
}

/* Collaborator hero icon — pulse on all active (non-complete) states */
.agos-status-hero-action .agos-status-hero-icon,
.agos-status-hero-progress .agos-status-hero-icon,
.agos-status-hero-received .agos-status-hero-icon,
.agos-status-hero-approval .agos-status-hero-icon,
.agos-status-hero-revision .agos-status-hero-icon,
.agos-status-hero-neutral .agos-status-hero-icon {
    animation: agosHeroPulse 2s ease-in-out infinite;
}
/* No pulse on completed / archived */
.agos-status-hero-complete .agos-status-hero-icon,
.agos-status-hero-done .agos-status-hero-icon {
    animation: none !important;
}

/* Unified circle pulse: gentle shadow breathe + micro-scale */
@keyframes agosUnifiedPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 2px 6px rgba(37,99,235,.12);
        transform: scale(1);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(37,99,235,.07), 0 3px 10px rgba(37,99,235,.15);
        transform: scale(1.03);
        opacity: .88;
    }
}

/* Hero icon pulse: gentle opacity + scale (no box-shadow — icon is rounded rect) */
@keyframes agosHeroPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.03);
        opacity: .85;
    }
}

/* Inner pulse dot (client only) — keep existing but sync timing */
.ag-stepper__pulse {
    animation: agosUnifiedDotPulse 2s ease-in-out infinite !important;
}

@keyframes agosUnifiedDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.82); }
}

/* ═══════════════════════════════════════════════════════
   14. RESPONSIVE — mobile adjustments
   ═══════════════════════════════════════════════════════ */

@media (max-width: 782px) {
    .agos-sticky-header .agos-action-btn {
        padding: 9px 16px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 480px) {
    .agos-sticky-header .agos-sh-actions {
        flex-direction: column !important;
    }
    .agos-sticky-header .agos-action-btn {
        width: 100% !important;
    }
}