/* ============================================================================ Buttons ============================================================================ */ .admin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 8px 14px; border: none; border-radius: var(--border-radius-sm); font-size: 13px; font-weight: 550; font-family: inherit; cursor: pointer; transition: var(--transition); white-space: nowrap; } .admin-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* Prevent buttons from growing when text changes to spinner + loading text */ .admin-modal-footer .admin-btn { min-width: 100px; } .admin-modal-footer .admin-btn .admin-spinner { margin: -2px 0; } .admin-btn-sm { padding: 6px 11px; font-size: 12px; } .admin-btn-primary { background: var(--accent-color); color: #fff; } .admin-btn-primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(214, 48, 49, 0.3); } .admin-btn .admin-spinner { width: 16px; height: 16px; border-width: 2px; } .admin-btn-primary .admin-spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } .admin-btn-secondary .admin-spinner { border-color: rgba(var(--text-secondary-rgb, 107, 114, 128), 0.3); border-top-color: var(--text-secondary); } .admin-btn-secondary { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); } .admin-btn-secondary:hover:not(:disabled) { background: var(--bg-secondary); border-color: var(--border-color-hover); color: var(--text-primary); } .admin-btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 32px; height: 32px; background: transparent; border: none; color: var(--text-secondary); border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); } .admin-btn-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); } .admin-btn-icon.accent { color: var(--info); } .admin-btn-icon.accent:hover { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); } .admin-btn-icon.danger { color: var(--danger); } .admin-btn-icon.danger:hover { background: var(--danger-light); } /* Touch targets - min 44px on mobile */ @media (max-width: 768px) { .admin-btn { min-height: 44px; padding: 10px 16px; } .admin-btn-sm { min-height: 36px; } .admin-btn-icon { min-width: 44px; min-height: 44px; } }